/* Appointments page — layout + components.
   Reuses the project's .btn / .form-control / .modal-* primitives; only
   appointment-specific structure is defined here. */

/* Defined on :root (not .appt-page) so the appointment modals — which render
   outside .appt-page — can use the same tokens. */
:root {
    --ap-accent: #6366f1;
    --ap-accent2: #8b5cf6;
    --ap-accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
    --ap-line: #e9ebf2;
    --ap-soft: #f5f6fb;
    --ap-soft-accent: #f3f1fe;
    --ap-ink: #0f172a;
    --ap-muted: #64748b;
    --ap-faint: #94a3b8;
    --ap-card-shadow: 0 8px 24px -14px rgba(45,41,88,.22), 0 1px 4px -1px rgba(45,41,88,.06);
}

/* The page root must occupy the main content cell of the #app CSS grid
   (sidebar = col 1, content = col 2/-1; header = row 1, content = row 2).
   Without this the content collapses into a narrow auto-placed column. */
.appt-page {
    grid-column: 2 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    background: var(--page-bg-gradient);
    overflow-y: auto;
    height: calc(100vh - var(--header-height));
}
.appt-wrapper { display: flex; flex-direction: column; gap: 14px; padding: 24px; min-height: 100%; }

/* Page header */
.appt-page .page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.appt-page .page-title { display: flex; align-items: center; gap: 14px; }
.appt-page .page-title > i { font-size: 26px; color: #6366f1; }
.appt-page .page-title h1 { margin: 0; font-size: 24px; }
.appt-page .page-subtitle { margin: 2px 0 0; color: #6b7280; font-size: 14px; }

/* Primary action buttons inside the page → accent gradient (modals keep the app theme). */
.appt-page .btn-primary { background: var(--ap-accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px rgba(99,102,241,.5); transition: filter .15s, box-shadow .15s, transform .15s; }
.appt-page .btn-primary:hover { filter: brightness(1.06); color: #fff; transform: translateY(-1px); }
.appt-page .btn-primary:active { transform: translateY(0); }

/* Gate (addon not enabled) */
.appt-gate { display: flex; justify-content: center; padding-top: 60px; }
.appt-gate-card { text-align: center; max-width: 420px; padding: 36px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.appt-gate-card i { font-size: 42px; color: #6366f1; }
.appt-gate-card h2 { margin: 10px 0 4px; }
.appt-gate-card p { color: #6b7280; margin-bottom: 18px; }

/* Tabs */
/* flex-shrink:0 — the wrapper is a flex column; overflow-x:auto makes this row's
   flex min-height resolve to 0, so without this it collapses under the panel at
   normal zoom (visible only when zoomed out). Keep its natural height. */
.appt-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e5e7eb; overflow-x: auto; flex-shrink: 0; }
.appt-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: none; background: none; color: #6b7280; font-weight: 500; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.appt-tab:hover { color: #111827; }
/* Inset box-shadow (not just border-bottom-color): the tabs row has
   overflow-x:auto which forces overflow-y:auto, clipping a bottom border at the
   container edge. An inset shadow is painted inside the tab so it always shows. */
.appt-tab.active { color: #111827; border-bottom-color: #6366f1; box-shadow: inset 0 -2px 0 0 #6366f1; }

.appt-panel { display: none; }
.appt-panel.active { display: block; }

/* Toolbar */
.appt-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.appt-toolbar .form-select {
    width: auto; min-width: 160px; border: 1px solid var(--ap-line); border-radius: 11px;
    padding: 9px 12px; background: #fff; font-size: 14px; color: var(--ap-ink);
    box-shadow: 0 1px 2px rgba(45,41,88,.05); transition: border-color .15s, box-shadow .15s;
}
.appt-toolbar .form-select:hover { border-color: rgba(99,102,241,.45); }
.appt-toolbar .form-select:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.appt-toolbar-grow { flex: 1; }

/* Calendar shell */
#apptCalendar { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 16px; min-height: 560px; box-shadow: var(--ap-card-shadow); }

/* ── FullCalendar theming ─────────────────────────────────────────── */
.fc { --fc-border-color: #eef0f6; --fc-today-bg-color: #f5f3ff; --fc-now-indicator-color: #8b5cf6; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 16px; gap: 8px; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ap-ink); text-transform: capitalize; }
/* Buttons */
.fc .fc-button { border-radius: 10px; font-weight: 600; font-size: 13px; padding: 7px 13px; text-transform: capitalize; box-shadow: none; transition: all .15s ease; }
.fc .fc-button-primary { background: #fff; border-color: var(--ap-line); color: #475569; }
.fc .fc-button-primary:hover { background: var(--ap-soft-accent); border-color: rgba(99,102,241,.45); color: var(--ap-accent); }
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--ap-accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(99,102,241,.6); }
.fc .fc-button-primary:focus, .fc .fc-button:focus { box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.fc .fc-button-primary:disabled { background: #fff; border-color: var(--ap-line); color: #cbd2e0; }
.fc .fc-button-group > .fc-button { border-radius: 0; }
.fc .fc-button-group > .fc-button:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.fc .fc-button-group > .fc-button:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.fc .fc-today-button { background: var(--ap-soft); border-color: var(--ap-line); color: #475569; opacity: 1; }
.fc .fc-today-button:disabled { opacity: .5; }
/* Day-of-week header + day numbers (kill the blue underlined links) */
.fc .fc-col-header-cell { background: var(--ap-soft); }
.fc .fc-col-header-cell-cushion { color: var(--ap-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; padding: 8px 4px; }
.fc .fc-daygrid-day-number { color: #334155; text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 8px; }
.fc .fc-day-other .fc-daygrid-day-number { color: #cbd2e0; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color: var(--ap-accent); }
.fc .fc-col-header-cell-cushion:hover, .fc .fc-daygrid-day-number:hover { color: var(--ap-accent); }
/* Events as soft pills */
.fc .fc-daygrid-event { cursor: pointer; border: none; border-radius: 7px; padding: 2px 6px; margin: 1px 3px; font-size: 12px; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fc .fc-daygrid-event:hover { filter: brightness(.97); }
.fc .fc-daygrid-dot-event .fc-event-title { font-weight: 500; }
.fc-event { cursor: pointer; }
.fc-event.appt-ev-cancelled { opacity: .45; text-decoration: line-through; }
/* No-show appointments in red (dot view: red dot + red text; block view: red bg). */
.fc .fc-daygrid-event.appt-ev-noshow .fc-event-title,
.fc .fc-daygrid-event.appt-ev-noshow .fc-event-time { color: #dc2626; font-weight: 600; }

/* Cards (services / staff) */
.appt-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.appt-panel-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
.appt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 16px; }
.appt-card { position: relative; overflow: hidden; border: 1px solid var(--ap-line); border-radius: 16px; padding: 18px 18px 16px; background: #fff; box-shadow: var(--ap-card-shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.appt-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-accent, #6366f1) 55%, transparent); box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--card-accent, #6366f1) 60%, transparent); }
/* left color accent bar — uses the service/staff color */
.appt-card-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--card-accent, #6366f1); border-radius: 16px 0 0 16px; }
.appt-card.is-inactive { opacity: .68; }
.appt-card.is-inactive .appt-card-accent { background: #cbd5e1; }
.appt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.appt-card-title { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.appt-card-name { font-size: 15.5px; font-weight: 700; color: var(--ap-ink); line-height: 1.25; word-break: break-word; }
.appt-card-namewrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.appt-card-role { color: var(--ap-muted); font-weight: 500; font-size: 12.5px; }
.appt-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, #6366f1) 18%, transparent); }
.appt-avatar { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--card-accent, #6366f1) 70%, transparent); }
/* meta pills (duration / price / service count) */
.appt-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.appt-meta-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #475569; background: #f1f5f9; border-radius: 8px; padding: 4px 9px; }
.appt-meta-pill i { font-size: 14px; color: color-mix(in srgb, var(--card-accent, #6366f1) 80%, #334155); }
.appt-card-sub { color: #6b7280; font-size: 13px; margin-top: 6px; }
.appt-card-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ap-line); flex-wrap: wrap; }
.appt-card-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.appt-card-actions .btn i { font-size: 14px; }
.appt-del-btn { color: #dc2626; }
.appt-del-btn:hover { background: #fee2e2; color: #b91c1c; }
.appt-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-weight: 500; }
.appt-badge.blue { background: #dbeafe; color: #1d4ed8; }
.appt-badge.green { background: #dcfce7; color: #15803d; }
.appt-badge.red { background: #fee2e2; color: #b91c1c; }
.appt-badge.amber { background: #fef3c7; color: #b45309; }

.appt-empty { text-align: center; color: #9ca3af; padding: 40px; }

/* Schedule */
.appt-schedule-grid { display: flex; flex-direction: column; gap: 18px; max-width: 780px; }
.appt-sched-section { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 22px; box-shadow: var(--ap-card-shadow); }
.appt-sched-section h2 { font-size: 17px; font-weight: 700; margin: 0 0 16px; }

/* Working-hours day rows */
.appt-day-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ap-line); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; transition: border-color .15s, background .15s; }
.appt-day-row:has(.appt-dow-on:checked) { border-color: rgba(99,102,241,.32); }
.appt-day-row:not(:has(.appt-dow-on:checked)) { background: var(--ap-soft); }
.appt-day-row:not(:has(.appt-dow-on:checked)) .form-control { opacity: .5; }
.appt-day-name { width: 120px; font-weight: 600; font-size: 14px; display: flex; gap: 9px; align-items: center; cursor: pointer; }
.appt-day-name input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ap-accent); cursor: pointer; }
.appt-day-row .form-control { width: 132px; border: 1px solid var(--ap-line); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.appt-day-row .form-control:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.appt-day-row > span { color: var(--ap-faint); }

/* Breaks / holidays */
.appt-mini-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.appt-mini-row { display: flex; align-items: center; justify-content: space-between; background: var(--ap-soft); border: 1px solid var(--ap-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--ap-ink); }
.appt-mini-row .btn { color: #dc2626; }
.appt-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.appt-inline-form .form-control { width: auto; min-width: 120px; border: 1px solid var(--ap-line); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.appt-inline-form .form-control:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.appt-inline-form > span { color: var(--ap-faint); }

/* Settings */
.appt-settings-form { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.appt-set-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 22px; box-shadow: var(--ap-card-shadow); }
.appt-set-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.appt-set-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--ap-soft-accent); color: var(--ap-accent); flex-shrink: 0; }
.appt-set-ico.green { background: #dcfce7; color: #16a34a; }
.appt-set-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.appt-set-head p { margin: 2px 0 0; font-size: 13px; color: var(--ap-muted); }
.appt-set-label { font-size: 13px; font-weight: 600; color: #475569; margin: 6px 0 8px; }

/* Toggle rows (checkboxes rendered as selectable rows) */
.appt-toggle-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ap-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.appt-toggle-row:hover { border-color: rgba(99,102,241,.4); }
.appt-toggle-row:has(input:checked) { border-color: rgba(99,102,241,.6); background: var(--ap-soft-accent); }
.appt-toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ap-accent); flex-shrink: 0; cursor: pointer; }
.appt-toggle-txt { display: flex; flex-direction: column; gap: 1px; }
.appt-toggle-txt b { font-weight: 600; font-size: 14px; color: var(--ap-ink); }
.appt-toggle-txt small { font-size: 12px; color: var(--ap-faint); }

/* Public link box */
.appt-linkbox { background: var(--ap-soft); border: 1px solid var(--ap-line); border-radius: 12px; padding: 14px; margin: 14px 0; }
.appt-public-link { display: flex; gap: 8px; align-items: center; }
.appt-public-link .form-control { flex: 1; }
.appt-link-preview { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--ap-accent); word-break: break-all; text-decoration: none; }
.appt-link-preview:hover { text-decoration: underline; }

/* Inputs grid */
.appt-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 14px 0; }
.appt-set-grid .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.appt-set-card label:not(.appt-toggle-row) { font-size: 13px; font-weight: 500; color: #475569; }
.appt-set-card .form-control,
.appt-set-card .form-select { width: 100%; border: 1px solid var(--ap-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.appt-set-card .form-control:focus,
.appt-set-card .form-select:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.appt-set-card .form-control[readonly] { background: var(--ap-soft); color: var(--ap-muted); }

.appt-set-actions { display: flex; justify-content: flex-end; }
.appt-set-actions .btn { min-width: 150px; }

/* Template variable → value mapping */
#apptTplVarsContainer { display: flex; flex-direction: column; gap: 14px; }
.appt-tpl-vars-block { border: 1px solid var(--ap-line); border-radius: 12px; padding: 14px; background: var(--ap-soft); }
.appt-tpl-vars-h { font-size: 13px; font-weight: 600; color: var(--ap-muted); margin-bottom: 10px; }
.appt-tpl-vars-h b { color: var(--ap-ink); }
.appt-tpl-vars-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.appt-tpl-var-row { display: flex; align-items: center; gap: 8px; }
.appt-tpl-var-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 700; color: var(--ap-accent); background: var(--ap-soft-accent); border-radius: 7px; padding: 5px 8px; flex-shrink: 0; }
.appt-tpl-var-row .appt-tpl-var { flex: 1; }

/* Section title — still used by the in-modal reschedule block */
.appt-section-title { font-size: 16px; font-weight: 600; border-top: 1px solid var(--ap-line); padding-top: 14px; }

/* Modals shared bits */
.appt-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appt-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.appt-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid #d1d5db; font-size: 12px; cursor: pointer; color: #6b7280; background: #fff; }
.appt-chip.on { background: #6366f1; border-color: #6366f1; color: #fff; }
.appt-check label { display: flex; align-items: center; gap: 6px; }
.appt-hint { color: #6b7280; font-size: 13px; margin-bottom: 8px; }
/* Detail modal — key/value list */
.appt-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--ap-line); }
.appt-detail-row:last-of-type { border-bottom: none; }
.appt-detail-row .k { color: var(--ap-muted); font-weight: 500; flex-shrink: 0; }
.appt-detail-row > span:not(.k) { font-weight: 600; color: var(--ap-ink); text-align: right; }

/* Reschedule block inside the detail modal */
#apptReschedBox { margin-top: 10px; }
#apptReschedBox .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#apptReschedBox .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
#apptReschedBox .form-row .form-group { flex: 1; min-width: 140px; }
#apptReschedBox label { font-size: 13px; font-weight: 500; color: #475569; }
#apptReschedBox .form-control,
#apptReschedBox .form-select { width: 100%; border: 1px solid var(--ap-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
#apptReschedBox .form-control:focus,
#apptReschedBox .form-select:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.appt-resched-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.appt-resched-actions .btn { min-width: 110px; }

/* Primary buttons inside appointment modals → accent gradient (match the page) */
.modal-overlay[id^="appt"] .btn-primary { background: var(--ap-accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px rgba(99,102,241,.5); transition: filter .15s, transform .15s; }
.modal-overlay[id^="appt"] .btn-primary:hover { filter: brightness(1.06); color: #fff; transform: translateY(-1px); }
#apptDetailFooter { display: flex; flex-wrap: wrap; gap: 8px; }

.appt-notify-banner { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.appt-notify-banner p { color: #92400e; font-weight: 500; margin: 0 0 8px; }

/* ── Dashboard / statistics ─────────────────────────────────────────── */
.appt-dash-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.appt-dash-presets { display: inline-flex; background: var(--ap-soft); border: 1px solid var(--ap-line); border-radius: 12px; padding: 4px; gap: 2px; }
.appt-dash-preset { border: none; background: transparent; color: var(--ap-muted); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.appt-dash-preset:hover { color: var(--ap-ink); }
.appt-dash-preset.active { background: #fff; color: var(--ap-accent); box-shadow: var(--ap-card-shadow); }
.appt-dash-range { display: flex; align-items: center; gap: 8px; }
.appt-dash-range .form-control { width: auto; }
.appt-dash-range span { color: var(--ap-faint); }
.appt-dash-range-label { font-size: 13px; font-weight: 600; color: var(--ap-muted); margin-bottom: 14px; }

/* KPI cards */
.appt-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.appt-kpi { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 16px; box-shadow: var(--ap-card-shadow); }
.appt-kpi-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.appt-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.appt-kpi-val { font-size: 22px; font-weight: 800; color: var(--ap-ink); line-height: 1.15; }
.appt-kpi-label { font-size: 12.5px; color: var(--ap-muted); font-weight: 500; }
.appt-kpi.indigo .appt-kpi-ico { background: #eef2ff; color: #4f46e5; }
.appt-kpi.green  .appt-kpi-ico { background: #dcfce7; color: #16a34a; }
.appt-kpi.blue   .appt-kpi-ico { background: #dbeafe; color: #2563eb; }
.appt-kpi.amber  .appt-kpi-ico { background: #fef3c7; color: #d97706; }
.appt-kpi.red    .appt-kpi-ico { background: #fee2e2; color: #dc2626; }
.appt-kpi.slate  .appt-kpi-ico { background: #f1f5f9; color: #475569; }
.appt-kpi.gold   .appt-kpi-ico { background: #fef9c3; color: #ca8a04; }

/* Dashboard cards */
.appt-dash-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 18px; box-shadow: var(--ap-card-shadow); margin-bottom: 18px; }
.appt-dash-card-h { font-size: 14.5px; font-weight: 700; color: var(--ap-ink); margin-bottom: 16px; }
.appt-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.appt-dash-grid .appt-dash-card { margin-bottom: 0; }

/* Per-day bar chart */
.appt-chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; overflow-x: auto; padding-bottom: 4px; }
.appt-chart-col { flex: 1 0 22px; min-width: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.appt-chart-bar { width: 70%; max-width: 26px; background: #e0e7ff; border-radius: 6px 6px 0 0; display: flex; flex-direction: column-reverse; overflow: hidden; transition: filter .15s; position: relative; }
.appt-chart-col:hover .appt-chart-bar { filter: brightness(.95); }
.appt-chart-fill-comp { width: 100%; background: linear-gradient(180deg, #34d399, #10b981); }
.appt-chart-x { font-size: 11px; color: var(--ap-faint); }
.appt-chart-v { font-size: 11px; font-weight: 700; color: var(--ap-muted); }

/* Breakdown bars (staff / service) */
.appt-bars { display: flex; flex-direction: column; gap: 12px; }
.appt-bar-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto; align-items: center; gap: 12px; }
.appt-bar-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-bar-track { height: 10px; background: var(--ap-soft); border-radius: 999px; overflow: hidden; }
.appt-bar-fill { height: 100%; border-radius: 999px; min-width: 4px; transition: width .3s ease; }
.appt-bar-meta { font-size: 12.5px; color: var(--ap-muted); white-space: nowrap; }
.appt-bar-meta b { color: var(--ap-ink); }

/* Source pills */
.appt-src { display: flex; flex-wrap: wrap; gap: 12px; }
.appt-src-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ap-soft); border: 1px solid var(--ap-line); border-radius: 12px; padding: 12px 20px; min-width: 96px; }
.appt-src-n { font-size: 20px; font-weight: 800; color: var(--ap-ink); }
.appt-src-l { font-size: 12px; color: var(--ap-muted); font-weight: 500; }

@media (max-width: 860px) {
  .appt-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .appt-wrapper { padding: 12px; }
  .appt-lang-grid { grid-template-columns: 1fr; }
  .appt-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .appt-bar-track { order: 3; }
}

/* ══════════════════════════════════════════════════════════════════════
   Dark mode. The page uses <html data-theme="dark"> (set by global.settings).
   Step 1: re-point the --ap-* tokens to dark values — this flips every
   token-based rule (borders, soft surfaces, ink/muted text, shadows) at once.
   Step 2: targeted overrides for the rules that hardcode #fff / gray / pastel
   colors (surfaces, inputs, badges, FullCalendar, dashboard).
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --ap-line: #2a2330;
    --ap-soft: #1f1a26;
    --ap-soft-accent: #241d33;
    --ap-ink: #f3f1f6;
    --ap-muted: #9a929e;
    --ap-faint: #6b6470;
    --ap-card-shadow: 0 8px 24px -14px rgba(0,0,0,.6), 0 1px 3px -1px rgba(0,0,0,.5);
}

/* Surfaces (cards / shells) that hardcode a white background */
[data-theme="dark"] .appt-gate-card,
[data-theme="dark"] #apptCalendar,
[data-theme="dark"] .appt-card,
[data-theme="dark"] .appt-sched-section,
[data-theme="dark"] .appt-set-card,
[data-theme="dark"] .appt-kpi,
[data-theme="dark"] .appt-dash-card { background: #1a1620; }
[data-theme="dark"] .appt-dash-preset.active { background: #2a2334; color: var(--ap-accent); }
[data-theme="dark"] .appt-gate-card { border-color: var(--ap-line); }

/* Inputs / selects / chips that hardcode white */
[data-theme="dark"] .appt-toolbar .form-select,
[data-theme="dark"] .appt-day-row .form-control,
[data-theme="dark"] .appt-inline-form .form-control,
[data-theme="dark"] .appt-set-card .form-control,
[data-theme="dark"] .appt-set-card .form-select,
[data-theme="dark"] #apptReschedBox .form-control,
[data-theme="dark"] #apptReschedBox .form-select,
[data-theme="dark"] .appt-chip {
    background: #14111b; color: var(--ap-ink); border-color: var(--ap-line);
}
[data-theme="dark"] .appt-set-card .form-control[readonly] { background: var(--ap-soft); color: var(--ap-muted); }

/* Text colors that hardcode gray */
[data-theme="dark"] .appt-page .page-subtitle,
[data-theme="dark"] .appt-gate-card p,
[data-theme="dark"] .appt-card-sub,
[data-theme="dark"] .appt-hint,
[data-theme="dark"] .appt-empty { color: var(--ap-muted); }
[data-theme="dark"] .appt-set-label,
[data-theme="dark"] .appt-set-card label:not(.appt-toggle-row),
[data-theme="dark"] #apptReschedBox label { color: #b8b0bc; }
[data-theme="dark"] .appt-chip { color: #b8b0bc; }
[data-theme="dark"] .appt-tab { color: var(--ap-muted); }
[data-theme="dark"] .appt-tab:hover,
[data-theme="dark"] .appt-tab.active { color: var(--ap-ink); }
[data-theme="dark"] .appt-tabs { border-bottom-color: var(--ap-line); }

/* Meta pills + chart bar (light gray surfaces) */
[data-theme="dark"] .appt-meta-pill { background: #221c2b; color: #b8b0bc; }
[data-theme="dark"] .appt-chart-bar { background: #2a2438; }

/* Status badges → translucent on dark */
[data-theme="dark"] .appt-badge { background: #26222e; color: #b8b0bc; }
[data-theme="dark"] .appt-badge.blue  { background: rgba(59,130,246,.20); color: #93c5fd; }
[data-theme="dark"] .appt-badge.green { background: rgba(34,197,94,.20);  color: #86efac; }
[data-theme="dark"] .appt-badge.red   { background: rgba(239,68,68,.20);  color: #fca5a5; }
[data-theme="dark"] .appt-badge.amber { background: rgba(245,158,11,.20); color: #fcd34d; }
[data-theme="dark"] .appt-del-btn:hover { background: rgba(220,38,38,.18); color: #fca5a5; }
[data-theme="dark"] .appt-mini-row .btn,
[data-theme="dark"] .appt-del-btn { color: #f87171; }

/* Settings reminder icon + notify banner */
[data-theme="dark"] .appt-set-ico.green { background: rgba(34,197,94,.18); color: #86efac; }
[data-theme="dark"] .appt-notify-banner { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.3); }
[data-theme="dark"] .appt-notify-banner p { color: #fcd34d; }

/* KPI icon chips → translucent */
[data-theme="dark"] .appt-kpi.indigo .appt-kpi-ico { background: rgba(99,102,241,.22); color: #a5b4fc; }
[data-theme="dark"] .appt-kpi.green  .appt-kpi-ico { background: rgba(34,197,94,.20);  color: #86efac; }
[data-theme="dark"] .appt-kpi.blue   .appt-kpi-ico { background: rgba(37,99,235,.22);  color: #93c5fd; }
[data-theme="dark"] .appt-kpi.amber  .appt-kpi-ico { background: rgba(217,119,6,.22);  color: #fcd34d; }
[data-theme="dark"] .appt-kpi.red    .appt-kpi-ico { background: rgba(220,38,38,.22);  color: #fca5a5; }
[data-theme="dark"] .appt-kpi.slate  .appt-kpi-ico { background: rgba(148,163,184,.20); color: #cbd5e1; }
[data-theme="dark"] .appt-kpi.gold   .appt-kpi-ico { background: rgba(202,138,4,.24);  color: #fde047; }

/* FullCalendar internals */
[data-theme="dark"] .fc {
    --fc-border-color: #2a2330;
    --fc-page-bg-color: #1a1620;
    --fc-neutral-bg-color: #1f1a26;
    --fc-today-bg-color: rgba(139,92,246,.14);
}
[data-theme="dark"] .fc .fc-button-primary,
[data-theme="dark"] .fc .fc-button-primary:disabled,
[data-theme="dark"] .fc .fc-today-button { background: #1f1a26; border-color: var(--ap-line); color: #b8b0bc; }
[data-theme="dark"] .fc .fc-daygrid-day-number { color: #cbd5e1; }
[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number,
[data-theme="dark"] .fc .fc-button-primary:disabled { color: #4b4453; }