/* Admin calendar: a resource timeline (car units x time) for Day/5-Day, and a date grid for Month.
   The scrollable timeline canvas (header + row tracks) is deliberately forced dir=ltr — this app already
   treats time/phone data as an LTR "island" inside RTL pages (see reservation-cards.js's <bdi dir="ltr">
   around phone numbers). Everything outside the canvas stays normal RTL. */

.cal-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cal-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cal-toolbar .cal-modes { display: flex; gap: 3px; background: var(--cloud); border-radius: 999px; padding: 3px; }
.cal-toolbar .cal-modes button { border: 0; background: transparent; padding: 0 16px; height: 36px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--muted); }
.cal-toolbar .cal-modes button[aria-pressed="true"] { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cal-toolbar .cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-toolbar .cal-nav button { border: 1px solid var(--line); background: #fff; border-radius: 999px; min-width: 36px; height: 36px; padding: 0 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cal-toolbar .cal-nav-arrow { padding: 0; font-size: 18px; line-height: 1; color: var(--muted); }
.cal-toolbar .cal-nav-today { color: var(--blue); border-color: #cfe0ff; background: #f2f7ff; }
.cal-toolbar .cal-range-label { font-weight: 700; font-size: 17px; }
.cal-toolbar .cal-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-toolbar input[type="search"], .cal-toolbar input[type="text"] { height: 36px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; font-size: 13px; background: #fff; min-width: 150px; }
.cal-toolbar label.cal-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Searchable car-type filter: ~30 types is too many to scroll through in a plain select. */
.cal-combo { position: relative; }
.cal-combo-options { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 4px); width: max(220px, 100%); max-height: 260px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.cal-combo-options li { padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cal-combo-options li:hover { background: #eef4ff; color: var(--blue); }
.cal-combo-options li[aria-selected="true"] { background: var(--blue); color: #fff; font-weight: 700; }
.cal-combo-options[hidden] { display: none; }

/* Operations numbers above the board: the handful a rental desk glances at before looking at rows. */
.cal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cal-stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cal-stat p { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.cal-stat strong { display: block; font-size: 28px; line-height: 1.1; font-weight: 700; }
.cal-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.cal-stat-live strong { color: var(--stage-active, #0a7a45); }
.cal-stat-alert strong { color: var(--stage-cancelled, #b22d3b); }
.cal-stat-alert span { color: var(--stage-cancelled, #b22d3b); font-weight: 700; }
@media (max-width: 900px) { .cal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cal-grid-scroll { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: auto; max-height: 72vh; background: #fff; }
/* width:max-content so the grid box actually spans all its columns — otherwise it is capped at the
   container width and the sticky unit column scrolls out of sight as soon as you scroll along the day. */
.cal-grid { display: grid; grid-template-columns: 220px var(--cal-track-w, 1fr); width: max-content; min-width: 100%; }
.cal-corner { position: sticky; inset-inline-start: 0; top: 0; z-index: 3; background: var(--cloud); border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-time-header { position: sticky; top: 0; z-index: 2; background: var(--cloud); border-bottom: 1px solid var(--line); direction: ltr; }
.cal-row-header { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; border-inline-end: 1px solid var(--line); border-bottom: 1px solid #eef0f2; padding: 8px 10px; display: flex; align-items: center; gap: 8px; min-height: 62px; }
.cal-row-header img { width: 34px; height: 24px; object-fit: contain; flex-shrink: 0; }
.cal-row-header strong { display: block; font-size: 13px; }
.cal-row-header small { display: block; color: var(--muted); font-size: 11px; }
/* The band spans the whole timeline, so the LABEL is what sticks — otherwise the car type name sits at the
   far left of a 3800px row and is invisible the moment you scroll into the afternoon. */
.cal-row-group-head { z-index: 2; grid-column: 1 / -1; background: linear-gradient(to bottom, #f4f6f9, #eceff4); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 7px 0; font-size: 12px; font-weight: 700; cursor: pointer; display: block; text-align: start; width: 100%; }
.cal-group-label { position: sticky; inset-inline-start: 0; display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px; color: var(--ink); }
.cal-group-label b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; }
.cal-row-group-head svg { width: 14px; height: 14px; transition: transform 160ms ease; color: var(--muted); }
.cal-row-group-head[aria-expanded="false"] svg { transform: rotate(-90deg); }
.cal-row-group-head:hover .cal-group-label { color: var(--blue); }

.cal-row-track { position: relative; border-bottom: 1px solid #eef0f2; direction: ltr; min-height: 62px; background-image: repeating-linear-gradient(to right, #f3f4f6 0, #f3f4f6 1px, transparent 1px, transparent var(--cal-hour-px, 150px)); }
.cal-row-track.cal-row-target { background-color: #eaf2ff; }
.cal-row-track.cal-row-invalid { background-color: #fdecee; }
.cal-row-track.cal-row-dimmed { opacity: .35; pointer-events: none; }

/* Booking chip: a soft tint of its stage with a solid stage-coloured edge, the time and customer on the first
   line and the reference underneath — the shape a scheduling board is read in. */
.cal-block { position: absolute; top: 5px; bottom: 5px; border-radius: 10px; background: var(--stage-soft, #dce9ff);
  border: 1px solid color-mix(in srgb, var(--stage, #0057ff) 22%, transparent); border-inline-start: 4px solid var(--stage, #0057ff);
  color: var(--ink); font-size: 12px; padding: 5px 9px; overflow: hidden; cursor: grab; direction: ltr; text-align: left; container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  transition: transform .12s ease, box-shadow .12s ease; }
.cal-block strong { color: var(--stage, #0057ff); font-weight: 600; }
.cal-block strong b { font-weight: 700; }
.cal-block:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--stage, #0057ff) 22%, transparent); z-index: 3; }
.cal-block:focus-visible { outline: 3px solid #0057ff; outline-offset: 2px; }
.cal-block strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-block small { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 90px) { .cal-block small { display: none; } }
.cal-block.cal-cancelled { opacity: .5; cursor: default; background: var(--stage-cancelled-soft, #fdecee); border-color: var(--stage-cancelled, #b22d3b); }
.cal-block.cal-dimmed-original { opacity: .35; }
.cal-block.pressing { transform: scale(.98); }
.cal-block.dragging { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.25); opacity: .92; z-index: 5; cursor: grabbing; }
.cal-handle { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.cal-handle-start { left: -4px; } .cal-handle-end { right: -4px; }
.cal-block:hover .cal-handle, .cal-block:focus-visible .cal-handle { background: rgba(0,0,0,.08); }

.cal-ghost { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; border: 2px dashed var(--blue); background: rgba(0,87,255,.14); z-index: 4; pointer-events: none; }
.cal-ghost.cal-ghost-conflict { border-color: var(--red); background: repeating-linear-gradient(45deg, rgba(178,45,59,.16), rgba(178,45,59,.16) 6px, rgba(178,45,59,.28) 6px, rgba(178,45,59,.28) 12px); }
.cal-ghost.cal-ghost-maintenance { border-color: var(--amber, #9c690e); background: repeating-linear-gradient(45deg, rgba(156,105,14,.16), rgba(156,105,14,.16) 6px, rgba(156,105,14,.28) 6px, rgba(156,105,14,.28) 12px); }
.cal-ghost-badge { position: absolute; top: -22px; inset-inline-start: 0; background: var(--ink); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

.cal-block-wrong-type { display: none; }

.cal-block-maintenance { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #f3e3c8 0, #f3e3c8 8px, #ecd7ae 8px, #ecd7ae 16px); opacity: .7; }

/* Month view: one band per week. The day cells are a background layer; the bookings sit on a 7-column layer
   above them, so a multi-day rental spans the days it actually covers instead of being trapped in one cell. */
.cal-month { border: 1px solid var(--line); border-radius: var(--control-radius); overflow: hidden; background: #fff; }
.cal-month-heads { display: grid; grid-template-columns: repeat(var(--cal-cols, 7), 1fr); background: var(--cloud); border-bottom: 1px solid var(--line); }
.cal-month-head { padding: 9px 8px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.cal-month-head.cal-weekend { color: var(--blue); }

.cal-week { position: relative; min-height: 116px; border-bottom: 1px solid #eef0f2; }
.cal-week:last-child { border-bottom: 0; }
.cal-week-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cal-cols, 7), 1fr); }
.cal-week-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cal-cols, 7), 1fr); grid-auto-rows: 24px; gap: 3px 0; padding: 30px 0 6px; pointer-events: none; }

.cal-month-cell { position: relative; border-inline-end: 1px solid #eef0f2; transition: background-color .15s ease; }
.cal-month-cell:last-child { border-inline-end: 0; }
.cal-month-cell.cal-weekend { background: #f7f9fc; }
.cal-month-cell.cal-other-month { background: #fafbfc; }
.cal-month-cell.cal-other-month .cal-month-date { opacity: .4; }
.cal-month-cell.cal-month-today { background: #eef4ff; }
.cal-month-date { position: absolute; top: 6px; inset-inline-end: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-month-cell.cal-month-today .cal-month-date { display: grid; place-items: center; top: 3px; inset-inline-end: 5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; }
/* Empty space is a booking waiting to happen: hovering it shows the target you can drag across. */
.cal-month-cell:not(.cal-other-month):hover { background: #eaf1ff; box-shadow: inset 0 0 0 2px #cfe0ff; }
/* Top and bottom edges only, so a run of selected days reads as one band rather than a row of boxes. */
.cal-month-cell.cal-cell-selected { background: #dbe8ff; box-shadow: inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--blue); }

.cal-month-bar { position: relative; z-index: 1; pointer-events: auto; display: flex; align-items: center; gap: 5px;
  margin-inline: 4px; padding: 0 8px; height: 24px; border-radius: 6px; overflow: hidden; white-space: nowrap;
  background: var(--stage-soft, #dce9ff); border-inline-start: 3px solid var(--stage, #0057ff);
  color: var(--stage, #0057ff); font-size: 11px; cursor: grab; transition: transform .12s ease, box-shadow .12s ease; }
.cal-month-bar strong { font-weight: 700; }
.cal-month-bar span { color: var(--ink); opacity: .7; overflow: hidden; text-overflow: ellipsis; }
.cal-bar-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cal-month-bar:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.14); z-index: 2; }
.cal-month-bar:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.cal-month-bar.cal-cancelled { opacity: .55; cursor: default; text-decoration: line-through; }
.cal-month-bar.cal-chevron-start { border-inline-start-width: 0; border-start-start-radius: 0; border-end-start-radius: 0; }
.cal-month-bar.cal-chevron-start::before { content: "\2039"; opacity: .6; }
.cal-month-bar.cal-chevron-end { border-start-end-radius: 0; border-end-end-radius: 0; }
.cal-month-bar.cal-chevron-end::after { content: "\203A"; margin-inline-start: auto; opacity: .6; }
.cal-month-more { pointer-events: auto; z-index: 1; margin-inline: 4px; height: 22px; padding: 0 8px; border: 0;
  border-radius: 6px; background: #eef0f3; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.cal-month-more:hover { background: #e2e6ec; color: var(--ink); }
.cal-month .cal-handle { display: none; }

/* Status legend — the colour code, spelled out, so staff learn it by reading the board. */
.cal-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--stage, var(--muted)); font-weight: 700; }
.cal-legend-item i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cal-legend-hint { margin-inline-start: auto; font-weight: 600; }

/* "Now", on a board whose whole job is telling you what is happening right now — the line carries the clock
   time in the header so you can read the moment without counting columns. */
.cal-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--stage-cancelled, #b22d3b); z-index: 3; pointer-events: none; }
.cal-now-head { position: absolute; top: 3px; z-index: 3; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px;
  background: var(--stage-cancelled, #b22d3b); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Hour ticks, and the per-day column heads used by the 5-day view. */
.cal-hour { position: absolute; top: 7px; font-size: 11px; color: var(--muted); font-weight: 600; }
.cal-dayhead { position: absolute; top: 0; height: 100%; display: flex; align-items: center; gap: 6px; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); font-size: 12px; }
.cal-dayhead b { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.cal-dayhead i { font-style: normal; font-weight: 700; font-size: 14px; }
.cal-dayhead em { font-style: normal; color: var(--muted); font-size: 11px; }
.cal-dayhead-today i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; }
.cal-dayhead-today b { color: var(--blue); }

/* Drag across an empty row to start a booking. */
.cal-create-ghost { position: absolute; top: 6px; bottom: 6px; z-index: 4; border-radius: 8px; border: 2px dashed var(--blue); background: rgba(0,87,255,.12); pointer-events: none; }
.cal-row-track:hover { background-color: #fbfcfe; }

.cal-confirm-bar { position: sticky; bottom: 0; z-index: 6; margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--control-radius); box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-confirm-bar .cal-confirm-summary { flex: 1; min-width: 220px; font-size: 13px; }
.cal-confirm-bar .cal-confirm-summary strong { display: block; }
.cal-confirm-bar .cal-confirm-summary .cal-muted { color: var(--muted); }
.cal-confirm-bar .cal-confirm-summary .cal-changed { color: var(--blue); font-weight: 700; }

.cal-undo-pill { position: fixed; inset-block-end: 24px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 50; }
.cal-undo-pill button { border: 0; background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 12px; cursor: pointer; }
.cal-undo-pill .cal-undo-progress { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; background: var(--blue); border-radius: 999px; animation: cal-undo-shrink 6s linear forwards; }
@keyframes cal-undo-shrink { from { width: 100%; } to { width: 0%; } }

.cal-zoom-sheet { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; flex-direction: column; }
.cal-zoom-sheet .cal-zoom-head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.cal-zoom-sheet .cal-grid-scroll { flex: 1; border: 0; border-radius: 0; max-height: none; }
.cal-zoom-fade-out { animation: cal-zoom-fade 150ms ease forwards; }
@keyframes cal-zoom-fade { to { opacity: 0; } }

/* A booking is a page in the dashboard shell, not a pop-up: it has room to breathe, it survives a reload,
   and it can be linked to. The stage-coloured band carries the status the way the sheet used to. */
.cal-booking-page { max-width: 960px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cal-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px;
  background: var(--stage, #0057ff); color: #fff; }
.cal-side-stage { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.cal-side-stage i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cal-side-head button { border: 0; background: rgba(255,255,255,.18); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.cal-side-head button:hover { background: rgba(255,255,255,.3); }
.cal-side-body { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 12px 28px; align-items: start; }
.cal-side-who { grid-column: 1; display: flex; align-items: center; gap: 12px; }
.cal-side-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--stage-soft, #dce9ff); color: var(--stage, #0057ff); font-weight: 700; }
.cal-side-who strong { display: block; font-size: 17px; }
.cal-side-who bdi { color: var(--muted); font-size: 13px; }
.cal-side-code { grid-column: 1; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cal-side-when { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cal-side-when > div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--cloud); }
.cal-side-when em { display: block; font-style: normal; color: var(--muted); font-size: 11px; font-weight: 700; }
.cal-side-when strong { display: block; margin: 4px 0 2px; font-size: 16px; }
.cal-side-when span { color: var(--muted); font-size: 12px; }
.cal-side-rows { grid-column: 1; display: grid; gap: 2px; }
.cal-side-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f2f4; font-size: 14px; }
.cal-side-rows > div > span:first-child { color: var(--muted); }
.cal-side-total { font-weight: 700; font-size: 16px; }
/* Actions and the things you change sit in their own column beside the record on a wide screen. */
.cal-details-dialog .cal-details-actions, .cal-details-actions { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.cal-details-actions > button { flex: 1 1 46%; font-size: 14px; }
:root .cal-details-actions > button.danger-action { flex-basis: 100%; }
.cal-reschedule-form { grid-column: 2; display: none; border-top: 1px solid var(--line); padding-top: 14px; }
.cal-reschedule-form.cal-open { display: block; }
.cal-reschedule-form .form-grid { grid-template-columns: 1fr; }
.cal-status-form { grid-column: 2; }
.cal-side-pay { grid-column: 2; }
@media (max-width: 900px) {
  .cal-side-body { grid-template-columns: minmax(0, 1fr); }
  .cal-details-actions, .cal-reschedule-form, .cal-status-form, .cal-side-pay { grid-column: 1; grid-row: auto; }
}
@media (max-width: 520px) { .cal-side-when { grid-template-columns: 1fr; } }

.cal-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cal-empty { padding: 40px 20px; text-align: center; color: var(--muted); }

@media (max-width: 760px) {
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .cal-toolbar .cal-filters { margin-inline-start: 0; }
  .cal-grid { grid-template-columns: 150px var(--cal-track-w, 1fr); }
  .cal-row-header { min-height: 48px; padding: 6px 8px; }
  .cal-month { grid-template-columns: repeat(7, minmax(38px, 1fr)); font-size: 10px; }
  .cal-month-cell { min-height: 70px; padding: 18px 2px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-undo-pill .cal-undo-progress, .cal-zoom-fade-out, .cal-row-group-head svg { animation: none !important; transition: none !important; }
}

/* Unit suggestions carry a code and a plate/car-type line, so the option is a two-line row. */
.cal-combo-options li strong { display: block; font-size: 13px; }
.cal-combo-options li span { display: block; color: var(--muted); font-size: 11px; }
.cal-combo-options li:hover span { color: inherit; opacity: .8; }
.cal-combo-options li[aria-selected="true"] span { color: #fff; opacity: .85; }
.cal-combo-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; cursor: default; }
.cal-combo-empty:hover { background: transparent; }

/* The shared ".cal-details-actions > button" rule outranks the app's .danger-action colours, so the
   destructive action restates them here rather than losing its meaning to a grey pill. */
:root .cal-details-dialog .cal-details-actions > button.danger-action { flex-basis: 100%; color: #b42318; background: #fff1f0; border-color: #f4c7c3; }

/* Payment summary in the details sheet: what was collected, and what is still owed. */
.cal-side-pay { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-side-pay h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.cal-pay-state { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cal-pay-state[data-pay="full"] { background: var(--stage-active-soft, #dcf5e7); color: var(--stage-active, #0a7a45); }
.cal-pay-state[data-pay="part"] { background: var(--stage-pending-soft, #fff4d6); color: var(--stage-pending, #9c690e); }
.cal-pay-state[data-pay="unpaid"] { background: var(--stage-cancelled-soft, #fdecee); color: var(--stage-cancelled, #b22d3b); }
.cal-pay-invoice { margin: 0 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.cal-side-pay-loading { margin: 0; color: var(--muted); font-size: 12px; }
.cal-pay-rows { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 2px; }
.cal-pay-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f2f4; font-size: 12px; }
.cal-pay-rows strong { display: block; font-weight: 700; }
.cal-pay-rows small { display: block; color: var(--muted); font-size: 11px; }
.cal-pay-totals { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--cloud); }
.cal-pay-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.cal-pay-totals > div > span:first-child { color: var(--muted); }
.cal-pay-balance { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 700; }
.cal-pay-balance[data-pay="part"], .cal-pay-balance[data-pay="unpaid"] { color: var(--stage-cancelled, #b22d3b); }
.cal-pay-balance[data-pay="full"] { color: var(--stage-active, #0a7a45); }

/* Labelled actions in the details sheet keep one uniform pill: the per-icon tints in the shared sheet are
   meant for bare icon buttons in table rows, where colour is the only thing identifying the action. */
:root .cal-details-actions > button.app-icon-action[data-action-icon] { color: #1d1d1f; background: #f0f1f5; border-color: #e1e4eb; }
:root .cal-details-actions > button.danger-action.app-icon-action[data-action-icon] { color: #b42318; background: #fff1f0; border-color: #f4c7c3; }

/* Status control: the same field language as the rest of the app, with its Save beside it. */
.cal-details-dialog .cal-status-form { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-status-field, .cal-status-reason { display: grid; gap: 5px; }
.cal-status-field > span, .cal-status-reason > span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.cal-details-dialog .cal-status-form select,
.cal-details-dialog .cal-status-form textarea { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 15px;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-fill);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.cal-details-dialog .cal-status-form textarea { min-height: 64px; resize: vertical; }
.cal-details-dialog .cal-status-form :is(select, textarea):hover { border-color: var(--control-border-hover); background: #fff; }
.cal-details-dialog .cal-status-form :is(select, textarea):focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--control-focus); }
.cal-details-dialog .cal-status-form button[type="submit"] { justify-self: start; }
.cal-details-dialog .cal-status-form .form-error:empty { display: none; }
.cal-status-reason[hidden] { display: none; }

/* Booking from the board: a toolbar button for the day in view, and a "+" that shows on an empty day under the pointer. */
.cal-toolbar .cal-new-booking { margin-inline-start: auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--blue, #0057ff); background: var(--blue, #0057ff); color: #fff; font-weight: 700; cursor: pointer; }
.cal-toolbar .cal-new-booking:hover { filter: brightness(1.08); }
.cal-month-cell:not(.cal-other-month) { cursor: copy; }
.cal-month-cell:not(.cal-other-month):hover::after { content: "+"; position: absolute; inset-inline-start: 6px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--blue, #0057ff); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; pointer-events: none; }
.cal-row-track { cursor: copy; }
/* A booking still waiting for confirmation breathes slowly so it is not mistaken for a settled one. */
@keyframes cal-awaiting { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.cal-block[data-status="pending"], .cal-month-bar[data-status="pending"] { animation: cal-awaiting 2.6s ease-in-out infinite; }
.cal-block[data-status="pending"]:hover, .cal-month-bar[data-status="pending"]:hover, .cal-block[data-status="pending"]:focus-visible, .cal-month-bar[data-status="pending"]:focus-visible, .cal-block.dragging, .cal-block.pressing { animation: none; opacity: 1; }
.cal-legend-item[data-status="pending"] i { animation: cal-awaiting 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cal-block[data-status="pending"], .cal-month-bar[data-status="pending"], .cal-legend-item[data-status="pending"] i { animation: none; } }

/* 5-day: the same day grid as Month, one tall row of five so every booking has room, and a head per day. */
.cal-week.cal-week-tall { min-height: 420px; }
.cal-week.cal-week-tall .cal-week-grid { grid-auto-rows: 30px; padding-top: 34px; }
.cal-month-five .cal-month-bar { height: 28px; }
.cal-month-five .cal-month-bar em { font-style: normal; font-weight: 700; font-size: 10px; opacity: .85; white-space: nowrap; }
.cal-month-head-day { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; }
.cal-month-head-day b { font-size: 12px; }
.cal-month-head-day i { font-style: normal; font-size: 18px; font-weight: 700; line-height: 1; }
.cal-month-head-day em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); }
.cal-month-head-today { color: var(--blue, #0057ff); }
.cal-month-head-today i { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--blue, #0057ff); color: #fff; }