/* ─── Scheduling calendar (clinic_portal/appointments/_calendar, calendar_controller.js) ─── */
.cal-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cal-page__main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Toolbar */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cal-toolbar__nav { display: flex; align-items: center; gap: 8px; }
.cal-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cal-toolbar__actions { margin-left: auto; }
.cal-toolbar__title { position: relative; font-size: 18px; font-weight: 700; color: var(--grey-900); cursor: pointer; padding: 4px 6px; border-radius: var(--radius); }
.cal-toolbar__title:hover { background: var(--grey-100); }
.cal-toolbar__title input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; border: 0; padding: 0; }

.cal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border: 1px solid var(--grey-200); border-radius: var(--radius);
  background: #fff; color: var(--grey-900); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cal-btn:hover { background: var(--grey-50); text-decoration: none; }
.cal-btn.is-current { border-color: var(--blue-mid); color: var(--blue-mid); }
.cal-btn--icon { width: 34px; padding: 0; font-size: 18px; }
.cal-btn--danger { color: var(--red); }
.cal-btn-group { display: inline-flex; }
.cal-btn-group .cal-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-btn-group .cal-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

.cal-segmented { display: inline-flex; background: var(--grey-100); border-radius: 8px; padding: 3px; }
.cal-segmented a { padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--grey-700); text-decoration: none; }
.cal-segmented a.is-active { background: #fff; color: var(--grey-900); box-shadow: var(--shadow-sm); }

.cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--grey-200); background: #fff; color: var(--grey-500); font-size: 13px; font-weight: 600; text-decoration: none;
}
.cal-chip:hover { text-decoration: none; border-color: var(--chip-color); }
.cal-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-200); }
.cal-chip.is-active { color: var(--grey-900); border-color: color-mix(in srgb, var(--chip-color) 45%, white); background: color-mix(in srgb, var(--chip-color) 8%, white); }
.cal-chip.is-active .cal-chip__dot { background: var(--chip-color); }

/* Grid */
.cal {
  --cal-hour: 88px;
  --cal-gutter: 56px;
  --cal-col-min: 180px;
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 170px);
  min-height: 420px;
}
.cal__head, .cal__body {
  display: grid;
  grid-template-columns: var(--cal-gutter) repeat(var(--cal-columns), minmax(var(--cal-col-min), 1fr));
}
.cal__scroll { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
/* Both grids get the same width — never sized from their own content, or the header's text
   would widen its columns past the ones below it */
.cal__head, .cal__body { min-width: calc(var(--cal-gutter) + var(--cal-columns) * var(--cal-col-min)); width: 100%; }
.cal__head { position: sticky; top: 0; border-bottom: 1px solid var(--grey-200); background: #fff; z-index: 6; }
.cal__corner { position: sticky; left: 0; z-index: 1; background: #fff; border-right: 1px solid var(--grey-100); }
.cal__colhead {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 8px; min-width: 0;
  border-right: 1px solid var(--grey-100); border-top: 3px solid var(--col-color);
}
.cal__colhead:last-child { border-right: 0; }
.cal__colhead strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__colhead span { font-size: 12px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__colhead small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--grey-700); min-width: 0; }
.cal__colhours { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal__colcount { flex: none; margin-left: auto; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--col-color) 12%, white); color: color-mix(in srgb, var(--col-color) 70%, black); font-weight: 700; }
.cal__colname-short { display: none; }
.cal__colhead.is-today strong { color: var(--blue-mid); }

.cal__body { position: relative; }
.cal__gutter { position: sticky; left: 0; z-index: 5; background: #fff; border-right: 1px solid var(--grey-100); }
.cal__hour { height: var(--cal-hour); position: relative; }
.cal__hour span { position: absolute; top: -7px; right: 8px; font-size: 11px; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.cal__hour:first-child span { top: 2px; }

.cal__col {
  position: relative;
  height: calc(var(--cal-hour) * var(--cal-hours));
  border-right: 1px solid var(--grey-100);
  /* Off hours: muted and lightly hatched — working hours (.cal__work) are plain white on top */
  background: repeating-linear-gradient(-45deg, #f3f5f9 0 6px, #eef1f6 6px 12px);
  min-width: 0;
}
/* Hour and half-hour lines, drawn over the working hours too */
.cal__col::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to bottom, var(--grey-200) 1px, transparent 1px),
    linear-gradient(to bottom, transparent calc(var(--cal-hour) / 2), var(--grey-100) calc(var(--cal-hour) / 2), var(--grey-100) calc(var(--cal-hour) / 2 + 1px), transparent calc(var(--cal-hour) / 2 + 1px));
  background-size: 100% var(--cal-hour);
}
.cal__col:last-child { border-right: 0; }
.cal__col[data-action] { cursor: copy; }
.cal__col.is-today .cal__work { background: #fbfdff; }
.cal__work { position: absolute; left: 0; right: 0; background: #fff; border-left: 3px solid color-mix(in srgb, var(--col-color) 40%, white); pointer-events: none; }
.cal__off {
  position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(-45deg, rgba(192, 57, 43, .06) 0 8px, rgba(192, 57, 43, .12) 8px 16px);
  border-top: 1px dashed rgba(192, 57, 43, .4); border-bottom: 1px dashed rgba(192, 57, 43, .4);
}
.cal__off span { position: sticky; top: 0; display: inline-block; margin: 6px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--red); font-size: 11.5px; font-weight: 600; }
.cal__now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.cal__now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

.cal__ghost {
  position: absolute; left: 4px; right: 4px; z-index: 2; pointer-events: none;
  border: 1.5px dashed var(--blue-accent); border-radius: 6px; background: rgba(26, 127, 224, .08);
  color: var(--blue-mid); font-size: 12px; font-weight: 700; padding: 3px 8px;
}
.cal__ghost.is-outside { border-color: var(--grey-500); color: var(--grey-700); background: rgba(138, 146, 163, .08); }

/* A termin */
.cal-event {
  --lane: 0; --lanes: 1;
  --ev-color: var(--col-color, var(--blue-accent));
  position: absolute;
  left: calc(4px + (100% - 8px) * var(--lane) / var(--lanes));
  width: calc((100% - 8px) / var(--lanes) - 2px);
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden;
  padding: 4px 8px; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; color: var(--grey-900);
  background: color-mix(in srgb, var(--ev-color) 12%, white);
  border: 1px solid color-mix(in srgb, var(--ev-color) 30%, white);
  border-left: 4px solid var(--ev-color);
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: box-shadow .12s;
}
.cal-event:hover { box-shadow: var(--shadow-md); z-index: 4; }
.cal-event:focus-visible { outline: 2px solid var(--blue-accent); outline-offset: 1px; }
.cal-event.is-movable { cursor: grab; }
.cal-event.is-dragging { cursor: grabbing; opacity: .9; box-shadow: 0 8px 24px rgba(0, 56, 153, .25); z-index: 10; transition: none; }
.cal-event.is-saving { opacity: .6; }
.cal-event__time { font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ev-color) 75%, black); }
.cal-event__name { font-weight: 600; font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event__reason { color: var(--grey-700); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event__marks { display: flex; gap: 4px; margin-top: 2px; }
/* Up to half an hour: one line — time, name, and the marks that matter */
.cal-event--short { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.cal-event--short .cal-event__reason { display: none; }
.cal-event--short .cal-event__marks { margin: 0 0 0 auto; flex: none; }
.cal-event--checked_in { --ev-color: var(--amber-dark); background: var(--amber-light); }
.cal-event--completed { --ev-color: var(--green); background: var(--green-light); }
.cal-event--no_show { --ev-color: var(--grey-500); background: repeating-linear-gradient(-45deg, #f5f7fb 0 6px, #edf0f7 6px 12px); color: var(--grey-500); }
.cal-event--no_show .cal-event__name { text-decoration: line-through; }
.cal-event__surname { display: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-mark { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: #fff; }
.cal-mark--waiting { color: var(--amber-text); }
.cal-mark--email { color: var(--purple); background: var(--purple-light); }

/* Popover */
.cal-popover { position: fixed; z-index: 50; }
.cal-popover__card {
  background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(10, 16, 30, .22);
  border-top: 4px solid var(--blue-accent); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.cal-popover__card--checked_in { border-top-color: var(--amber); }
.cal-popover__card--completed { border-top-color: var(--green); }
.cal-popover__card--cancelled, .cal-popover__card--no_show { border-top-color: var(--grey-200); }
.cal-popover__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cal-popover__name { font-size: 16px; font-weight: 700; color: var(--grey-900); }
.cal-popover__meta { font-size: 12.5px; color: var(--grey-500); }
.cal-popover__close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--grey-500); cursor: pointer; }
.cal-popover__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 0; }
.cal-popover__facts div { display: contents; }
.cal-popover__facts dt { color: var(--grey-500); }
.cal-popover__facts dd { margin: 0; overflow-wrap: anywhere; }
.cal-popover__status { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-popover__actions { display: flex; flex-direction: column; gap: 8px; }
.cal-popover__actions form { margin: 0; max-width: none; gap: 0; }
.cal-popover__row { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-popover__row > * { flex: 1; }
.cal-popover__row .cal-btn { width: 100%; }
.cal-popover__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--grey-100); font-size: 13px; }

/* Booking dialog */
.portal-modal--booking { max-width: 620px; }
.portal-modal--booking[open] { animation: dialog-in .14s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.booking { display: flex; flex-direction: column; gap: 0; max-width: none; }
.booking__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 6px; }
.booking__head h2 { font-size: 18px; }
.booking__errors { margin: 8px 22px 0; padding: 10px 12px; border-radius: 8px; background: var(--red-light); color: var(--red); font-size: 13px; }
.booking__section { padding: 14px 22px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--grey-100); }
.booking__grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 10px; }
.booking__grid--2 { grid-template-columns: 1fr 1fr; }
.booking__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.booking__field > span { font-size: 12px; font-weight: 600; color: var(--grey-700); }
.booking__field input, .booking__field select, .booking textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--grey-200); border-radius: 8px; font: inherit; font-size: 14px; background: #fff;
}
.booking__field input:focus, .booking__field select:focus, .booking textarea:focus { outline: none; border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(26, 127, 224, .15); }
.booking__field--time input { font-weight: 700; font-variant-numeric: tabular-nums; }
.booking__hint { font-size: 13px; color: var(--grey-500); }
.booking__hint--warn { color: var(--amber-text); background: var(--amber-light); padding: 6px 10px; border-radius: 6px; }
.booking__slots { display: block; }
.booking__check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-700); cursor: pointer; }
.booking__check input { margin: 0; }
.booking__more summary { cursor: pointer; font-size: 13px; color: var(--blue-mid); margin-bottom: 6px; }
.booking__foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 22px 18px; }
.booking__kbd { margin-right: auto; display: inline-flex; gap: 3px; }
.booking__kbd kbd { font-family: inherit; font-size: 11px; line-height: 1; padding: 3px 5px; border: 1px solid var(--grey-200); border-bottom-width: 2px; border-radius: 4px; color: var(--grey-500); }

.booking__switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; position: relative; }
.booking__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.booking__switch-track { width: 34px; height: 20px; border-radius: 999px; background: var(--grey-200); position: relative; transition: background .15s; flex: none; }
.booking__switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.booking__switch input:checked + .booking__switch-track { background: var(--blue-accent); }
/* "Putem emaila" keeps the purple of its badge (pill--through-email) */
.booking__switch--email input:checked + .booking__switch-track { background: var(--purple); }
.booking__switch input:checked + .booking__switch-track::after { transform: translateX(14px); }
.booking__switch input:focus-visible + .booking__switch-track { outline: 2px solid var(--blue-accent); outline-offset: 2px; }

.seg-radio { display: flex; flex-wrap: wrap; gap: 4px; }
.seg-radio label { cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio { flex-wrap: nowrap; }
.seg-radio label { flex: 1; }
.seg-radio span { display: block; text-align: center; padding: 7px 4px; border: 1px solid var(--grey-200); border-radius: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seg-radio input:checked + span { background: var(--grey-900); border-color: var(--grey-900); color: #fff; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--blue-accent); outline-offset: 2px; }

.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow-y: auto; padding: 2px; }
.slot-chip { border: 1px solid color-mix(in srgb, var(--blue-accent) 35%, white); background: var(--blue-light); color: var(--blue-mid); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.slot-chip:hover { background: #d6e6ff; }
.slot-chip.is-selected { background: var(--blue-mid); border-color: var(--blue-mid); color: #fff; }

/* Patient picker */
.patient-picker { position: relative; display: flex; flex-direction: column; gap: 8px; }
.patient-picker input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--grey-200); border-radius: 8px; font: inherit; font-size: 15px; }
.patient-picker input[type="search"]:focus { outline: none; border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(26, 127, 224, .15); }
.patient-picker__results {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30; list-style: none; padding: 4px;
  background: #fff; border: 1px solid var(--grey-200); border-radius: 10px; box-shadow: var(--shadow-md); max-height: 300px; overflow-y: auto;
}
.patient-picker__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.patient-picker__item strong { font-size: 14px; }
.patient-picker__item span { font-size: 12.5px; color: var(--grey-500); }
.patient-picker__item.is-active, .patient-picker__item:hover { background: var(--blue-light); }
.patient-picker__item--new { color: var(--blue-mid); font-weight: 600; font-size: 13.5px; border-top: 1px solid var(--grey-100); }
.patient-picker__item--empty { color: var(--grey-500); cursor: default; }
.patient-picker__new { border: 1px dashed var(--grey-200); border-radius: 10px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.patient-picker__new legend { font-size: 12px; font-weight: 700; color: var(--grey-700); padding: 0 4px; }
.patient-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 10px; background: var(--grey-50); border: 1px solid var(--grey-100); }
.patient-chip strong { font-size: 15px; }
.patient-chip span { font-size: 13px; color: var(--grey-500); }
.patient-chip .link-button { margin-left: auto; }
.btn--small { padding: 4px 10px; font-size: 12.5px; }


@media (max-width: 700px) {
  .cal { --cal-gutter: 44px; --cal-col-min: 150px; max-height: none; }
  .cal-toolbar__actions { margin-left: 0; }
  .booking__grid, .booking__grid--2 { grid-template-columns: 1fr 1fr; }
  .booking__grid:not(.booking__grid--2) > :first-child { grid-column: 1 / -1; }
  .booking__section, .booking__head, .booking__foot { padding-left: 16px; padding-right: 16px; }
  .booking__kbd { display: none; }
}

/* ─── Shift editor (doctor_schedules/show, shift_editor_controller.js) ─── */
.back-link { display: inline-block; font-size: 13px; color: var(--grey-500); margin-bottom: 6px; }
.doctor-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--chip-color); margin-right: 10px; vertical-align: middle; }
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.shift-card { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; max-width: none; }
.shift-card h2 { font-size: 16px; }
.shift-card__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.shift-card__hint { font-size: 13px; color: var(--grey-500); margin-top: 2px; }
.shift-card__total { display: flex; flex-direction: column; align-items: flex-end; }
.shift-card__total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.shift-card__total span { font-size: 12px; color: var(--grey-500); }
.shift-card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; justify-content: flex-end; }
.shift-card__length { margin-right: auto; min-width: 280px; }
.shift-card__dirty { font-size: 13px; color: var(--amber-text); background: var(--amber-light); padding: 4px 10px; border-radius: 999px; }
.shift-card.is-dirty [data-shift-editor-target="save"] { box-shadow: 0 0 0 3px rgba(26, 127, 224, .25); }

.shift-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shift-presets__label { font-size: 12px; font-weight: 600; color: var(--grey-500); margin-right: 4px; }
.shift-presets .cal-chip { cursor: pointer; color: var(--grey-900); font: inherit; font-size: 13px; }

.shift-grid { --shift-hour: 30px; border: 1px solid var(--grey-100); border-radius: 10px; overflow: auto; user-select: none; }
.shift-grid__head, .shift-grid__body { display: grid; grid-template-columns: 52px repeat(7, minmax(84px, 1fr)); min-width: 640px; }
.shift-grid__head { position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid var(--grey-200); }
.shift-grid__day { position: relative; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--grey-100); }
.shift-grid__day strong { font-size: 13px; }
.shift-grid__day span { font-size: 11.5px; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.shift-grid__day.is-weekend strong { color: var(--grey-500); }
.shift-grid__day-actions { position: absolute; top: 6px; right: 4px; display: none; gap: 2px; }
.shift-grid__day:hover .shift-grid__day-actions, .shift-grid__day:focus-within .shift-grid__day-actions { display: inline-flex; }
.shift-grid__day-actions button { border: 0; background: var(--grey-100); border-radius: 4px; width: 22px; height: 22px; cursor: pointer; color: var(--grey-700); font-size: 13px; line-height: 1; }
.shift-grid__day-actions button:hover { background: var(--blue-light); color: var(--blue-mid); }
.shift-grid__gutter { border-right: 1px solid var(--grey-100); }
.shift-grid__hour { height: var(--shift-hour); position: relative; }
.shift-grid__hour span { position: absolute; top: -7px; right: 6px; font-size: 10.5px; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.shift-grid__hour:first-child span { top: 2px; }
.shift-grid__col {
  position: relative; height: calc(var(--shift-hour) * 16); border-left: 1px solid var(--grey-100); cursor: crosshair;
  background-image: linear-gradient(to bottom, var(--grey-100) 1px, transparent 1px); background-size: 100% var(--shift-hour);
}
.shift-grid__col.is-weekend { background-color: #fafbfd; }
.shift-block {
  position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 6px; overflow: hidden; cursor: grab; touch-action: none;
  background: color-mix(in srgb, var(--col-color) 18%, white); border: 1px solid color-mix(in srgb, var(--col-color) 45%, white);
  border-left: 4px solid var(--col-color); display: flex; flex-direction: column; gap: 1px;
}
.shift-block.is-selected { box-shadow: 0 0 0 2px var(--col-color); }
.shift-block.is-draft { opacity: .75; border-style: dashed; }
.shift-block__time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--col-color) 70%, black); padding-right: 14px; line-height: 1.25; }
.shift-block__length { font-size: 11px; color: var(--grey-700); }
.shift-block__edge { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; }
.shift-block__edge--top { top: -2px; }
.shift-block__edge--bottom { bottom: -2px; }
.shift-block__remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .85); color: var(--grey-700); cursor: pointer; display: none; line-height: 1; }
.shift-block:hover .shift-block__remove, .shift-block.is-selected .shift-block__remove { display: block; }

.time-off-card h3 { font-size: 14px; }
.time-off-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.time-off-list__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--red-light); }
.time-off-list__item form { margin: 0; max-width: none; }
.time-off-list__item strong { display: block; font-size: 13.5px; }
.time-off-list__item span { font-size: 12.5px; color: var(--grey-700); }
.time-off-list__warn { display: block; font-size: 12px; color: var(--amber-text); font-weight: 600; }
.time-off-card .time-off-form { margin-top: 6px; padding: 14px 0 0; border-radius: 0; box-shadow: none; gap: 10px; max-width: none; border-top: 1px solid var(--grey-100); }

@media (max-width: 1100px) { .schedule-layout { grid-template-columns: minmax(0, 1fr); } }
.cal--week { --cal-col-min: 118px; }

/* Doctor filter dropdown */
.cal-filter { position: relative; }
.cal-filter > summary { list-style: none; }
.cal-filter > summary::-webkit-details-marker { display: none; }
.cal-filter__button { gap: 8px; }
.cal-filter__dots { display: inline-flex; }
.cal-filter__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--chip-color); border: 2px solid #fff; margin-left: -4px; }
.cal-filter__dots span:first-child { margin-left: 0; }
.cal-filter__count { color: var(--grey-500); font-variant-numeric: tabular-nums; }
.cal-filter__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 340px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(10, 16, 30, .2); padding: 10px;
}
.cal-filter__quick { display: flex; gap: 6px; padding: 2px 4px 10px; border-bottom: 1px solid var(--grey-100); margin-bottom: 6px; }
.cal-filter__list { list-style: none; max-height: 360px; overflow-y: auto; }
.cal-filter__item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--grey-900); text-decoration: none; }
.cal-filter__item:hover { background: var(--grey-50); text-decoration: none; }
.cal-filter__item.is-active { background: var(--blue-light); }
.cal-filter__item input { margin: 0; }
.cal-filter__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip-color); flex: none; }
.cal-filter__name { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; min-width: 0; }
.cal-filter__name small { font-size: 12px; font-weight: 400; color: var(--grey-500); }
.cal-filter__hours { margin-left: auto; font-size: 12px; color: var(--grey-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-filter__hours.is-off { color: var(--grey-500); font-style: italic; }

/* Many doctors in the day view: narrower columns, the essentials only */
.cal--dense { --cal-col-min: 104px; }
.cal--dense .cal__colhead { padding: 8px 8px 6px; }
.cal--dense .cal__colname-full { display: none; }
.cal--dense .cal__colname-short { display: inline; }
.cal--dense .cal__colhead > span { font-size: 11px; }
.cal--dense .cal-event { padding: 3px 6px; font-size: 11.5px; }
.cal--dense .cal-event__name { font-size: 12px; }
/* A short termin in a narrow column: "09:00 Perić" on one line — the full name is in the popover */
.cal--dense .cal-event--short { gap: 4px; }
.cal--dense .cal-event--short .cal-event__name, .cal--dense .cal-event--short .cal-event__marks { display: none; }
.cal--dense .cal-event--short .cal-event__surname { display: block; }
.cal--tight { --cal-col-min: 92px; --cal-gutter: 46px; }
.cal--tight .cal__colhead > span { display: none; }

/* ─── Patient list (clinic_portal/patients/index) ─── */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.list-toolbar__search { flex: 1 1 320px; max-width: 460px; margin: 0; }
.list-toolbar__search input[type="search"] { width: 100%; padding: 10px 14px; border: 1px solid var(--grey-200); border-radius: 10px; font: inherit; font-size: 14.5px; background: #fff; }
.list-toolbar__search input[type="search"]:focus { outline: none; border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(26, 127, 224, .15); }
.list-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.list-toolbar__filters summary.cal-chip { list-style: none; cursor: pointer; }
.list-toolbar__filters summary::-webkit-details-marker { display: none; }

.patient-list { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); overflow: visible; }
.patient-list__head, .patient-row { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(110px, 1fr) minmax(120px, 1fr) minmax(130px, 1.1fr) 196px; align-items: center; gap: 12px; padding: 0 16px; }
.patient-list__head { padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-100); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--grey-500); }
.patient-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-100); position: relative; }
.patient-row:last-child { border-bottom: 0; }
.patient-row:hover { background: var(--grey-50); }
.patient-row--waiting { box-shadow: inset 3px 0 0 var(--amber); }
.patient-row__who { display: flex; align-items: center; gap: 12px; color: var(--grey-900); text-decoration: none; min-width: 0; }
.patient-row__who:hover { text-decoration: none; }
.patient-row__who:hover strong { color: var(--blue-mid); }
.patient-row__avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--avatar-color) 75%, black); background: color-mix(in srgb, var(--avatar-color) 14%, white); }
.patient-row__name { display: flex; flex-direction: column; min-width: 0; }
.patient-row__name strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.patient-row__name small { font-size: 12.5px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.patient-row__cell { display: flex; flex-direction: column; font-size: 13.5px; min-width: 0; }
.patient-row__actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.muted { color: var(--grey-500); }
.doctor-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.doctor-tag .cal-filter__dot { background: var(--chip-color); }
.next-termin { display: flex; flex-direction: column; color: var(--grey-900); text-decoration: none; }
.next-termin strong { color: var(--blue-mid); font-size: 13.5px; }
.next-termin small { font-size: 12px; color: var(--grey-500); }
.btn--small { padding: 6px 12px; font-size: 13px; }

.row-menu { position: relative; }
.row-menu > summary { list-style: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu__button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--grey-700); }
.row-menu__button:hover, .row-menu[open] .row-menu__button { background: var(--grey-100); }
.row-menu__panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(10, 16, 30, .18); padding: 6px; display: flex; flex-direction: column; }
.row-menu__form { margin: 0; max-width: none; gap: 0; display: block; }
.row-menu__item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--grey-900); text-decoration: none; cursor: pointer; }
.row-menu__item:hover { background: var(--grey-50); text-decoration: none; }

.booking__label { font-size: 12px; font-weight: 600; color: var(--grey-700); }
.doctor-pick { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.doctor-pick__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--grey-100); border-radius: 8px; cursor: pointer; }
.doctor-pick__option:has(input:checked) { border-color: var(--blue-accent); background: var(--blue-light); }
.doctor-pick__option.is-off { opacity: .6; }
.doctor-pick__option input { margin: 0; }
.doctor-pick__meta { margin-left: auto; font-size: 12px; color: var(--grey-700); white-space: nowrap; }

@media (max-width: 900px) {
  .patient-list__head { display: none; }
  .patient-row { grid-template-columns: 1fr auto; padding: 12px 14px; }
  .patient-row__who { grid-column: 1 / -1; }
  .patient-row__cell { flex-direction: row; gap: 6px; align-items: baseline; }
  .patient-row__cell::before { content: attr(data-label) ":"; font-size: 12px; color: var(--grey-500); }
  .patient-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.patient-row:has(.row-menu[open]) { z-index: 5; }

/* ─── Clinic dashboard (clinic_portal/dashboard/show, DashboardHelper) ─── */
.today-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.today-strip__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--grey-500); margin-right: 4px; }
.today-strip__item { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13px; color: var(--grey-700); text-decoration: none; }
.today-strip__item strong { font-size: 15px; color: var(--grey-900); }
a.today-strip__item:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.today-strip__item.is-warm { background: var(--amber-light); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi__label { font-size: 13px; color: var(--grey-700); }
.kpi__value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--grey-900); }
.kpi--hero .kpi__value { font-size: 40px; }
.kpi__hint { font-size: 12px; color: var(--grey-500); }
.kpi .sparkline { margin-top: auto; }
.stat-delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px; font-size: 12.5px; font-weight: 600; }
.stat-delta__vs { font-weight: 400; color: var(--grey-500); }
.stat-delta--good { color: #0b7a0b; }
.stat-delta--bad { color: #c03030; }
.stat-delta--flat, .stat-delta--none { color: var(--grey-500); font-weight: 400; }
.meter { display: block; height: 8px; border-radius: 999px; background: #cde2fb; overflow: hidden; margin-top: auto; }
.meter span { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash-card { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dash-card--wide { grid-column: 1 / -1; }
.dash-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dash-card__head h2 { font-size: 15px; }
.dash-card__head p { font-size: 12.5px; color: var(--grey-500); margin-top: 2px; }

.chart-legend { list-style: none; display: flex; gap: 14px; font-size: 12.5px; color: var(--grey-700); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__line { width: 16px; height: 2px; border-radius: 2px; background: var(--key); }
.chart { position: relative; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: #eceef3; stroke-width: 1; }
.chart__axis { stroke: var(--grey-200); stroke-width: 1; }
.chart__tick { font-size: 11px; fill: var(--grey-500); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__crosshair { stroke: var(--grey-500); stroke-width: 1; }
.chart__tooltip { position: absolute; top: 4px; z-index: 5; pointer-events: none; min-width: 150px; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(10, 16, 30, .18); padding: 8px 10px; font-size: 12.5px; }
.chart__tip-title { font-weight: 600; color: var(--grey-700); margin-bottom: 4px; }
.chart__tip-row { display: flex; align-items: center; gap: 8px; }
.chart__tip-row strong { font-size: 14px; color: var(--grey-900); min-width: 18px; }
.chart__tip-row span:last-child { color: var(--grey-500); }
.chart__tip-key { width: 12px; height: 2px; border-radius: 2px; }
.chart__tip-key--current { background: #2a78d6; }
.chart__tip-key--previous { background: #8a8f99; }
.chart-table summary { font-size: 12.5px; color: var(--blue-mid); cursor: pointer; }
.chart-table table { margin-top: 8px; }
.chart-empty { font-size: 13px; color: var(--grey-500); }

.bar-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.bar-list__row { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; border-radius: 6px; }
.bar-list__row:focus-visible { outline: 2px solid var(--blue-accent); outline-offset: 4px; }
.bar-list__name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--grey-900); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar-list__name .cal-filter__dot { background: var(--chip-color); }
.bar-list__track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-list__bar { height: 14px; border-radius: 0 4px 4px 0; background: #2a78d6; min-width: 3px; transition: filter .12s; }
.bar-list__row:hover .bar-list__bar, .bar-list__row:focus-visible .bar-list__bar { filter: brightness(1.12); }
.bar-list__value { font-size: 13px; font-weight: 700; color: var(--grey-900); font-variant-numeric: tabular-nums; }
.bar-list__meta { grid-column: 2; font-size: 12px; color: var(--grey-500); display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: baseline; }
.bar-list__delta { margin-left: auto; }
.bar-list__bad { color: #c03030; }

.heatmap { display: grid; grid-template-columns: 32px repeat(var(--heat-cols), minmax(14px, 1fr)); gap: 2px; max-width: 720px; }
.heatmap__hour { font-size: 10.5px; color: var(--grey-500); text-align: center; font-variant-numeric: tabular-nums; }
.heatmap__day { font-size: 11.5px; color: var(--grey-700); align-self: center; }
.heatmap__cell { height: 24px; border-radius: 4px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
.heatmap__cell:hover, .heatmap__cell:focus-visible { outline: 2px solid var(--grey-900); outline-offset: 0; }
.heatmap__scale { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--grey-500); justify-content: flex-end; }
.heatmap__scale span:first-child { margin-right: 6px; }
.heatmap__scale span:last-child { margin-left: 6px; }
.heatmap__swatch { width: 14px; height: 10px; border-radius: 2px; }

@media (max-width: 1000px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* ─── Receiving a patient ─── */
.receive-button small { font-weight: 600; opacity: .85; margin-left: 2px; }
.receive-termin { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--amber-light); border: 1px solid var(--amber); }
.receive-termin strong { display: block; font-size: 14.5px; }
.receive-termin span { font-size: 13px; color: var(--grey-700); }
.cal-mark--walk-in { color: var(--grey-700); }
.patient-row__actions .btn { white-space: nowrap; }
.portal-modal--booking { max-height: calc(100vh - 32px); overflow-y: auto; }

/* ─── Patient page: termini and pregledi (clinic_portal/patients/show) ─── */
.stat-card__value--text { font-size: 22px; }
.termin-list { list-style: none; background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); }
.termin-list__item { display: grid; grid-template-columns: 200px minmax(150px, 1fr) minmax(100px, 1fr) 200px; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--grey-100); font-size: 13.5px; }
.termin-list__item:last-child { border-bottom: 0; }
.termin-list__when strong { margin-right: 6px; }
.termin-list__reason { color: var(--grey-700); }
.termin-list__actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

.exam-table { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); }
.exam-table__head, .exam-table__row { display: grid; grid-template-columns: 130px 130px minmax(150px, 1fr) minmax(170px, 1.2fr) minmax(160px, 1.3fr); gap: 12px; padding: 0 16px; align-items: center; }
.exam-table__head { padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-100); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--grey-500); }
.exam-table__row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-100); font-size: 13.5px; }
.exam-table__row:last-child { border-bottom: 0; }
.exam-table__row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.exam-table__row--in_progress, .exam-table__row--waiting { box-shadow: inset 3px 0 0 var(--amber); }
.exam-table__row--cancelled { opacity: .6; }
.exam-table__date { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.exam-table__date small { color: var(--grey-500); font-size: 12px; }
.exam-table__docs { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
.exam-table__doc { font-weight: 600; overflow-wrap: anywhere; }
.exam-table__print { font-size: 12px; color: var(--grey-500); }

@media (max-width: 900px) {
  .exam-table__head { display: none; }
  .exam-table__row, .termin-list__item { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
  .exam-table__row > span:not(.exam-table__date)::before { content: attr(data-label) ":"; font-size: 12px; color: var(--grey-500); }
  .termin-list__actions { justify-content: flex-start; }
}
.time-off-list__remove { border: 0; background: none; font-size: 18px; color: var(--grey-500); cursor: pointer; padding: 0 4px; }
.time-off-list__empty { font-size: 13px; color: var(--grey-500); }

/* ─── Izveštaj templates by speciality (manual_documents/_paper, doctors/_form) ─── */
.template-picker__group { list-style: none; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--grey-500); }
.template-picker__item--own { font-weight: 600; }

/* ─── Month calendar (doctor_schedules/_month, month_schedule_controller.js) ─── */
.month-card { margin-bottom: 20px; }
.month-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.month-card__nav { display: flex; align-items: center; gap: 6px; }
.month-card__nav strong { min-width: 150px; text-align: center; font-size: 15px; }
.month-card__nav .cal-chip { color: var(--grey-900); text-decoration: none; }

.month-grid { border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.month-grid__head, .month-grid__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-grid__head { background: var(--grey-50); border-bottom: 1px solid var(--grey-200); }
.month-grid__weekday { padding: 8px 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--grey-500); text-align: center; background: none; border: 0; }
button.month-grid__weekday { cursor: pointer; }
button.month-grid__weekday:hover { color: var(--blue-mid); background: var(--blue-light); }
.month-grid__week + .month-grid__week { border-top: 1px solid var(--grey-100); }

.month-day { position: relative; min-height: 78px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--grey-100); background: #fff; font-size: 12px; outline: none; }
.month-day:first-child { border-left: 0; }
.month-day[data-date] { cursor: pointer; }
.month-day[data-date]:hover { background: var(--grey-50); }
.month-day[data-date]:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-mid); }
.month-day__date { font-weight: 700; font-size: 13px; color: var(--grey-900); font-variant-numeric: tabular-nums; }
.month-day--today .month-day__date { color: #fff; background: var(--blue-mid); border-radius: 999px; width: 22px; height: 22px; display: inline-grid; place-items: center; margin: -2px 0 0 -3px; }
.month-day__hours { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--grey-700); }
.month-day--working .month-day__hours::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--col-color); margin-right: 5px; vertical-align: 1px; opacity: .45; }
.month-day--own .month-day__hours { color: var(--grey-900); }
.month-day--own .month-day__hours::before { opacity: 1; }
.month-day--own { box-shadow: inset 3px 0 0 var(--col-color); }
.month-day__free { color: var(--grey-500); }
.month-day--free:not(.month-day--outside) { background: repeating-linear-gradient(-45deg, #fff 0 6px, var(--grey-50) 6px 12px); }
.month-day__away { color: var(--red); font-weight: 600; }
.month-day__away--part { font-weight: 500; font-size: 11px; }
.month-day--away { background: var(--red-light); }
.month-day__termini { margin-top: auto; font-size: 11px; color: var(--grey-500); }
.month-day--outside { background: var(--grey-50); }
.month-day--outside .month-day__date { color: var(--grey-200); }
.month-day--past:not(.month-day--outside) { opacity: .55; }
.month-grid .month-day.month-day--selected, .month-grid .month-day.month-day--selected:hover { background: var(--blue-light); box-shadow: inset 0 0 0 2px var(--blue-mid); }

.month-card__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--grey-500); }
.month-legend::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--grey-200); }
.month-legend--usual::before { background: #fff; }
.month-legend--own::before { background: #fff; box-shadow: inset 3px 0 0 var(--blue-mid); }
.month-legend--free::before { background: repeating-linear-gradient(-45deg, #fff 0 3px, var(--grey-100) 3px 6px); }
.month-legend--away::before { background: var(--red-light); }

.month-panel { position: sticky; top: 8px; z-index: 3; max-width: none; margin: 0; display: block; padding: 10px 14px; border: 1px solid var(--grey-200); border-radius: 10px; background: var(--grey-50); transition: box-shadow .15s, border-color .15s; }
.month-panel--active { background: #fff; border-color: var(--blue-mid); box-shadow: 0 8px 28px rgba(15, 40, 80, .14); padding: 14px 16px; }
.month-panel__idle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: var(--grey-500); }
.month-panel__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.month-panel__quick .cal-chip, .month-panel .shift-presets .cal-chip { cursor: pointer; color: var(--grey-900); font: inherit; font-size: 13px; background: #fff; }
.month-panel__fields { display: flex; flex-direction: column; gap: 12px; }
.month-panel__fields[hidden] { display: none; }
.month-panel__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.month-panel__top { align-items: center; }
.month-panel__count { font-size: 15px; }
.month-panel__row > .link-button { align-self: center; }
.month-panel__times .booking__field { width: 116px; }
.month-panel__times .link-button { padding-bottom: 10px; align-self: flex-end; }
.month-panel__dash { padding-bottom: 10px; color: var(--grey-500); }
.month-panel__second { display: contents; }
.month-panel__second[hidden] { display: none; }
.month-panel__times .shift-presets { margin-left: auto; padding-bottom: 4px; }
.month-panel__actions { border-top: 1px solid var(--grey-100); padding-top: 12px; }

@media (max-width: 600px) {
  .month-day { min-height: 58px; padding: 4px; font-size: 10.5px; }
  .month-day__termini, .month-day--working .month-day__hours::before { display: none; }
  .month-card__nav strong { min-width: 0; }
}