/* ===========================================================================
   DentaCare admin portal stylesheet
   Palette: blue (#0284c7) / teal (#0d9488) / white, slate neutrals.
   =========================================================================== */

:root {
    --blue-600: #0284c7;
    --blue-700: #0369a1;
    --blue-50:  #f0f9ff;
    --teal-600: #0d9488;
    --teal-50:  #f0fdfa;
    --slate-25:  #fcfdfe;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --green-600: #059669;
    --green-100: #dcfce7;
    --rose-600: #e11d48;
    --rose-100: #ffe4e6;
    --amber-600: #d97706;
    --amber-100: #fef3c7;
    --violet-600: #7c3aed;
    --violet-100: #ede9fe;

    /* Brand theme tokens (Settings -> Branding). Every value falls back to
       the shipped palette; partials/theme-vars.php overrides only the tokens
       a clinic actually customised, so stock installs (and their dark-mode
       remaps) behave exactly as before. */
    --brand-primary: var(--blue-600);
    --brand-primary-hover: var(--blue-700);
    --brand-sidebar-bg: #0f172a;
    --brand-sidebar-link: #cbd5e1;
    --brand-topbar-bg: var(--surface-glass);
    --brand-heading: var(--slate-900);
    --brand-heading-card: var(--slate-800);
    --brand-danger: var(--rose-600);
    --brand-cancel: var(--slate-500);
    --brand-modal-head-bg: transparent;
    --brand-modal-head-fg: inherit;

    --radius: 10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
    --shadow: 0 1px 3px rgb(15 23 42 / .08), 0 4px 14px rgb(15 23 42 / .06);
    --shadow-lg: 0 8px 30px rgb(15 23 42 / .16);
    --sidebar-w: 248px;
    --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Semantic theme tokens (remapped by [data-theme="dark"]) */
    --surface: #ffffff;
    --surface-glass: rgb(255 255 255 / .92);
    --body-bg: #f1f5f9;
    --auth-glass-bg: rgb(255 255 255 / .85);
    --auth-glass-border: rgb(255 255 255 / .7);

    color-scheme: light;
}

/* ==========================================================================
   Dark theme: remaps the neutral scale and tint tokens. Fixed-dark elements
   (sidebar, toasts, primary buttons) are pinned to literals below and are
   unaffected.
   ========================================================================== */
[data-theme="dark"] {
    --surface: #111a2b;
    --surface-glass: rgb(15 22 37 / .92);
    --body-bg: #0a101d;
    --auth-glass-bg: rgb(17 26 43 / .88);
    --auth-glass-border: rgb(255 255 255 / .08);

    --slate-25:  #162032;
    --slate-50:  #182336;
    --slate-100: #1c2942;
    --slate-200: #273550;
    --slate-300: #354765;
    --slate-400: #7f90a8;
    --slate-500: #97a7bd;
    --slate-600: #b4c1d3;
    --slate-700: #ccd6e4;
    --slate-800: #e5ebf4;
    --slate-900: #f4f7fb;

    --blue-50:   #14293f;
    --blue-700:  #38bdf8;
    --teal-50:   #0f2b29;
    --green-100: #113321;
    --rose-100:  #3a1725;
    --amber-100: #34270f;
    --violet-100: #271c3f;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
    --shadow: 0 1px 3px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .3);
    --shadow-lg: 0 8px 30px rgb(0 0 0 / .55);

    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 15px; }

body {
    font-family: var(--font);
    color: var(--slate-800);
    background: var(--body-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
canvas { max-width: 100%; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }

/* ------------------------------------------------------------------ layout */

.admin-shell { display: flex; min-height: 100vh; }

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
}

.admin-content { flex: 1; padding: 1.4rem 1.6rem; max-width: 1560px; width: 100%; }

.admin-footer {
    display: flex; justify-content: space-between;
    padding: .8rem 1.6rem; color: var(--slate-400); font-size: .8rem;
    border-top: 1px solid var(--slate-200);
}

/* ----------------------------------------------------------------- sidebar */

/* The sidebar is fixed-dark in both themes, so every colour inside it is a
   literal - theme-remapped tokens like var(--slate-300) flip dark in dark
   mode and would vanish against this background. */
.sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--brand-sidebar-bg);
    color: var(--brand-sidebar-link);
    display: flex; flex-direction: column;
    z-index: 50;
}

.sidebar-brand {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem; border-bottom: 1px solid rgb(255 255 255 / .08);
}

.brand-link { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.02rem; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-primary); }
.brand-mark svg { width: 20px; height: 20px; color: #fff; }
/* Uploaded org logo (Settings > clinic_logo). Falls back to .brand-mark above.
   The sidebar is dark and most logos are drawn for white paper, so the logo
   sits on a light chip - a dark-on-transparent logo stays readable without
   asking every clinic to produce a dark-mode variant. */
.brand-logo {
    display: block; height: 38px; width: auto; max-width: 172px; object-fit: contain;
    background: rgb(255 255 255 / .92); border-radius: 8px; padding: .25rem .5rem;
}
.sidebar-close { display: none; background: none; border: 0; color: #cbd5e1; font-size: 1.5rem; cursor: pointer; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .8rem .7rem; }
/* Both scrollbar syntaxes: modern browsers honour scrollbar-color (and ignore
   the ::-webkit rules once it is set), older WebKit uses the pseudo-elements.
   Either way the bar blends into the dark sidebar instead of standing out. */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .22) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .15); border-radius: 3px; }

.nav-heading {
    padding: 1rem .6rem .35rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #64748b;
}

.nav-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .52rem .65rem; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--brand-sidebar-link); font-size: .92rem;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: rgb(255 255 255 / .07); color: #fff; }
.nav-item.is-active { background: var(--brand-primary); color: #fff; font-weight: 600; }

.nav-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; flex: none; }
.nav-icon svg { width: 100%; height: 100%; }

.sidebar-foot { padding: .8rem 1rem; border-top: 1px solid rgb(255 255 255 / .08); }
.branch-pill { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: #94a3b8; }

.sidebar-backdrop { position: fixed; inset: 0; background: rgb(15 23 42 / .5); z-index: 45; }

/* Desktop collapse: the topbar hamburger tucks the sidebar away entirely. */
.sidebar { transition: transform .22s ease; }
.admin-main { transition: margin-left .22s ease; }
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .admin-main { margin-left: 0; }

/* ------------------------------------------------------------------ topbar */

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem 1.6rem;
    background: var(--brand-topbar-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--slate-200);
}

/* Text and icons that sit DIRECTLY on the topbar follow its contrast token
   (set only when a custom dark bar is chosen); controls with their own
   surface (search pill, branch switcher, dropdown panels) keep their look. */
.topbar .icon-btn { color: var(--brand-topbar-fg, var(--slate-500)); }
.topbar .dropdown-menu .icon-btn { color: var(--slate-500); }
.topbar .user-chip-name { color: var(--brand-topbar-fg, var(--slate-700)); }

.topbar-menu { display: grid; }

.global-search { position: relative; flex: 1; max-width: 460px; }
.global-search .search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--slate-400); pointer-events: none; }
.global-search input {
    width: 100%; padding: .5rem .8rem .5rem 2.2rem;
    border: 1px solid var(--slate-200); border-radius: 99px;
    background: var(--slate-50); font-size: .88rem; font-family: inherit;
}
.global-search input:focus { outline: 2px solid var(--blue-600); outline-offset: -1px; background: var(--surface); }

.search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto; z-index: 60;
}
/* The results panel is absolutely positioned, so every host needs to be a
   containing block. The topbar search gets this from .global-search; in-form
   pickers would otherwise resolve against the page and render a full
   viewport below the field - invisible. */
[data-component="patient-picker"] { position: relative; }
/* A caret marks the field as openable; without it the control reads as a
   plain text box and nobody discovers the list. */
[data-component="patient-picker"] [data-role="patient-input"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 16px;
    padding-right: 2.2rem;
}
/* Inside a modal the card scrolls, so keep the panel short enough to sit
   within it rather than forcing a scroll to see the first match. */
.modal-body .search-results { max-height: 240px; }
.search-result { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: .6rem .9rem; border-bottom: 1px solid var(--slate-100); cursor: pointer; }
.search-result:hover, .search-result.is-focused { background: var(--blue-50); }
.search-result strong { color: var(--slate-800); display: block; }
.search-result small { color: var(--slate-500); }
.search-empty { padding: .9rem; color: var(--slate-500); text-align: center; font-size: .88rem; }
.search-empty.search-error { color: var(--rose-600); background: var(--rose-100); }
.search-heading {
    padding: .45rem .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--slate-400);
    background: var(--slate-50); border-bottom: 1px solid var(--slate-100);
}

.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.branch-switch {
    display: flex; align-items: center; gap: .45rem;
    padding: .45rem .8rem; border: 1px solid var(--slate-200); border-radius: 99px;
    background: var(--surface); cursor: pointer; font: inherit; font-size: .85rem; color: var(--slate-700);
}
.branch-switch:hover { border-color: var(--blue-600); color: var(--blue-600); }
.branch-switch [data-icon] { width: 15px; height: 15px; }

.user-chip { display: flex; align-items: center; gap: .5rem; background: none; border: 0; cursor: pointer; font: inherit; padding: .25rem .4rem; border-radius: 99px; }
.user-chip:hover { background: var(--slate-100); }
.user-chip-name { font-size: .88rem; font-weight: 600; color: var(--slate-700); }

/* ----------------------------------------------------------------- avatars */

.avatar { border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; }
.avatar-sm { width: 32px; height: 32px; font-size: .72rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; }
.avatar-fallback { background: var(--blue-600); color: #fff; font-weight: 700; }

/* --------------------------------------------------------------- dropdowns */

.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 230px; background: var(--surface);
    border: 1px solid var(--slate-200); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: .35rem; z-index: 70;
}
.dropdown-menu-right { left: auto; right: 0; }
/* Never wider than the viewport: the bell sits near the right edge, so an
   unclamped 340px panel walks off screen on small windows. */
.dropdown-menu-wide { min-width: 340px; max-width: min(380px, calc(100vw - 1.5rem)); }
.dropdown-menu-wide .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
.dropdown-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .55rem .75rem .35rem; font-size: .8rem; font-weight: 700; color: var(--slate-500); }
.dropdown-item {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .5rem .75rem; border: 0; background: none; text-align: left;
    border-radius: var(--radius-sm); font: inherit; font-size: .88rem; color: var(--slate-700); cursor: pointer;
}
.dropdown-item:hover { background: var(--slate-100); color: var(--slate-900); }
.dropdown-item.is-active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.dropdown-item-danger { color: var(--rose-600); }
.dropdown-item-danger:hover { background: var(--rose-100); color: var(--rose-600); }
.dropdown-item-center { justify-content: center; color: var(--blue-600); }
.dropdown-divider { height: 1px; background: var(--slate-200); margin: .35rem 0; }
.dropdown-empty { padding: 1rem; text-align: center; color: var(--slate-400); font-size: .85rem; }
.dropdown-item [data-icon] { width: 16px; height: 16px; color: var(--slate-500); }

.badge-dot {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--rose-600); color: #fff; font-size: .65rem; font-weight: 700;
    border-radius: 99px; display: grid; place-items: center;
}

.notif-preview { display: flex; gap: .6rem; padding: .55rem .75rem; border-radius: var(--radius-sm); }
.notif-preview:hover { background: var(--slate-100); }
.notif-preview.is-unread { background: var(--blue-50); }
.notif-preview strong { font-size: .85rem; display: block; }
.notif-preview small { color: var(--slate-500); font-size: .76rem; }

/* --------------------------------------------------------------- page head */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.page-title { font-size: 1.35rem; font-weight: 700; color: var(--brand-heading); }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.page-actions form { display: inline; }

/* ------------------------------------------------------------------- cards */

.card { background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 1.1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--slate-100); flex-wrap: wrap; }
.card-head h2 { font-size: 1rem; font-weight: 700; color: var(--brand-heading-card); }
.card-body { padding: 1.15rem; }
.card-body-flush { padding: 0; }
.card-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.15rem; border-top: 1px solid var(--slate-100); background: var(--slate-25); border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; }
.card-foot-start { justify-content: flex-start; }
.card-foot-between { justify-content: space-between; align-items: center; }
.card-foot form { display: inline; }

.stack > * { margin-bottom: 1.1rem; }

/* ------------------------------------------------------------------- grids */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.1rem; align-items: start; }
.grid-2 > .card, .grid-2-1 > .card { margin-bottom: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.stat-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stat-card {
    display: flex; gap: .85rem; align-items: center;
    background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius);
    padding: .95rem 1.05rem; box-shadow: var(--shadow-sm);
    color: inherit; transition: transform .12s, box-shadow .12s;
}
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; }
.stat-icon [data-icon] { width: 22px; height: 22px; }
.stat-value { font-size: 1.3rem; font-weight: 800; color: var(--slate-900); line-height: 1.15; }
.stat-label { font-size: .8rem; color: var(--slate-500); font-weight: 600; }
.stat-sub { font-size: .74rem; color: var(--slate-400); }

.stat-blue .stat-icon   { background: var(--blue-50);   color: var(--blue-600); }
.stat-teal .stat-icon   { background: var(--teal-50);   color: var(--teal-600); }
.stat-green .stat-icon  { background: var(--green-100); color: var(--green-600); }
.stat-rose .stat-icon   { background: var(--rose-100);  color: var(--rose-600); }
.stat-amber .stat-icon  { background: var(--amber-100); color: var(--amber-600); }
.stat-violet .stat-icon { background: var(--violet-100); color: var(--violet-600); }
.stat-slate .stat-icon  { background: var(--slate-100); color: var(--slate-600); }

/* ----------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .52rem 1rem; border-radius: var(--radius-sm);
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: all .14s; white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: auto;
}
.btn [data-icon] { width: 16px; height: 16px; }
.btn-lg { padding: .68rem 1.5rem; font-size: .95rem; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-hover); color: #fff; }
.btn-secondary { background: #1e293b; color: #fff; }
.btn-secondary:hover { background: #0f172a; color: #fff; }
.btn-outline { background: var(--surface); border-color: var(--slate-300); color: var(--slate-700); }
.btn-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-outline.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand-cancel); }
.btn-ghost:hover { background: var(--slate-100); color: var(--slate-700); }
.btn-danger-outline { background: var(--surface); border-color: var(--brand-danger); color: var(--brand-danger); }
.btn-danger-outline:hover { background: var(--brand-danger); color: #fff; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.icon-btn {
    display: inline-grid; place-items: center; width: 32px; height: 32px;
    border: 0; background: none; border-radius: var(--radius-sm);
    color: var(--slate-500); cursor: pointer; font-size: 1rem;
}
.icon-btn:hover { background: var(--slate-100); color: var(--slate-800); }
.icon-btn-danger:hover { background: var(--rose-100); color: var(--brand-danger); }
.icon-btn [data-icon] { width: 17px; height: 17px; }

.link { color: var(--brand-primary); font-weight: 500; }
.link:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; color: var(--brand-primary); font: inherit; font-size: .8rem; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- forms */

.form-field { margin-bottom: .95rem; }
.form-label { display: block; font-size: .82rem; font-weight: 600; color: var(--slate-600); margin-bottom: .3rem; }
.form-label .req { color: var(--rose-600); margin-left: 2px; }

.form-control {
    width: 100%; padding: .52rem .7rem;
    border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
    font: inherit; font-size: .9rem; color: var(--slate-800); background: var(--surface);
    transition: border-color .14s, box-shadow .14s;
}
.form-control:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgb(2 132 199 / .14); }
.form-control:disabled, .form-control[readonly] { background: var(--slate-50); color: var(--slate-500); }
.form-control-sm { padding: .34rem .55rem; font-size: .84rem; }
textarea.form-control { resize: vertical; }
input[type="color"].form-control { padding: .15rem; height: 38px; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .9rem; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 .9rem; }
/* Horizontal stack: inline controls that should wrap on narrow screens. */
.stack-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 900px) { .form-grid-4 { grid-template-columns: repeat(2, 1fr); } }

.has-error .form-control { border-color: var(--rose-600); }
.field-error { color: var(--rose-600); font-size: .78rem; margin-top: .28rem; font-weight: 500; }
.field-help { color: var(--slate-400); font-size: .78rem; margin-top: .28rem; }

.checkbox-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--slate-700); cursor: pointer; }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--blue-600); }

.static-value { padding: .5rem .2rem; font-size: .92rem; }

.error-summary { margin: .3rem 0 0 1.1rem; font-size: .85rem; }

.section-label { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin: 1rem 0 .6rem; }
.divider { border: 0; border-top: 1px solid var(--slate-200); margin: 1rem 0; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.check-grid-3 { grid-template-columns: repeat(3, 1fr); }
.check-tile {
    display: flex; gap: .6rem; align-items: flex-start;
    border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
    padding: .6rem .7rem; cursor: pointer; transition: border-color .14s, background .14s;
}
.check-tile:hover { border-color: var(--blue-600); }
.check-tile:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); }
.check-tile input { margin-top: 3px; accent-color: var(--blue-600); }
.check-tile strong { display: block; font-size: .86rem; }
.check-tile small { color: var(--slate-500); font-size: .74rem; line-height: 1.35; display: block; }
.check-tile-sm { padding: .45rem .6rem; }

.perm-module { border: 1px solid var(--slate-200); border-radius: var(--radius); padding: .8rem 1rem 1rem; margin-bottom: 1rem; }
.perm-module legend { font-weight: 700; font-size: .9rem; padding: 0 .4rem; color: var(--slate-700); }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
    text-align: left; padding: .65rem .9rem;
    background: var(--slate-50); color: var(--slate-500);
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--slate-200); white-space: nowrap;
}
.table td { padding: .62rem .9rem; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover td { background: var(--slate-25); }
/* In-table section headings (e.g. Settings -> Modules grouped by edition). */
.table .table-section th {
    background: var(--slate-100); color: var(--slate-600);
    border-top: 1px solid var(--slate-200); white-space: normal;
}
.edition-list { margin-bottom: 1.2rem; }
.edition-list dt { font-weight: 600; font-size: .9rem; }
.edition-list dd { margin: 0 0 .7rem; font-size: .86rem; }
.table-plain th { background: none; }
.table tfoot td { background: var(--slate-25); font-weight: 600; }
.tfoot-grand td { font-size: 1rem; font-weight: 800; border-top: 2px solid var(--slate-800); }
.tfoot-danger td { color: var(--rose-600); }

.th-sortable a { color: inherit; display: inline-flex; gap: .3rem; align-items: center; }
.th-sortable.is-sorted a { color: var(--blue-600); }
.sort-caret { font-size: .6rem; }
.th-actions, .td-actions { text-align: right; white-space: nowrap; }
.td-actions form { display: inline-block; }
.num { text-align: right; }
.row-warning td { background: #fffbeb; }
.row-highlight td { background: var(--blue-50); }
.row-detail td { font-size: .8rem; padding-top: 0; }

.user-cell { display: flex; gap: .6rem; align-items: center; }

/* -------------------------------------------------------------- pagination */

.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; flex-wrap: wrap; }
.table-summary { color: var(--slate-500); font-size: .82rem; padding: .8rem 1.1rem; }
.pagination-bar .table-summary { padding: 0; }
.pagination { display: flex; gap: .25rem; }
.page-link {
    display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 .5rem;
    border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
    font-size: .84rem; color: var(--slate-600); background: var(--surface);
}
.page-link:hover { border-color: var(--blue-600); color: var(--blue-600); }
.page-link.is-current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; font-weight: 700; }
.page-link.is-disabled { opacity: .4; pointer-events: none; }
.page-gap { align-self: center; color: var(--slate-400); padding: 0 .2rem; }

/* ------------------------------------------------------------------ badges */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .55rem; border-radius: 99px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.badge-blue   { background: var(--blue-50);   color: var(--blue-700); }
.badge-teal   { background: var(--teal-50);   color: var(--teal-600); }
.badge-green  { background: var(--green-100); color: #166534; }
.badge-rose   { background: var(--rose-100);  color: #9f1239; }
.badge-amber  { background: var(--amber-100); color: #92400e; }
.badge-violet { background: var(--violet-100); color: #5b21b6; }
.badge-slate  { background: var(--slate-100); color: var(--slate-600); }
/* Plain-English aliases, so a view can say what it means without knowing which
   palette name happens to be the rose one. */
.badge-gray   { background: var(--slate-100); color: var(--slate-600); }
.badge-red    { background: var(--rose-100);  color: #9f1239; }

.color-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .35rem; vertical-align: baseline; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { background: var(--slate-100); color: var(--slate-600); font-size: .72rem; font-family: ui-monospace, monospace; padding: .2rem .5rem; border-radius: 5px; }
.stars { color: #f59e0b; letter-spacing: 1px; }

/* ------------------------------------------------------------------ alerts */

.alert {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .8rem 1rem; border-radius: var(--radius);
    font-size: .88rem; margin-bottom: 1rem; border: 1px solid;
}
.alert[hidden] { display: none; }
.alert > div { flex: 1; }
.alert [data-icon] { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-success { background: var(--green-100); border-color: #86efac; color: #14532d; }
.alert-error   { background: var(--rose-100);  border-color: #fda4af; color: #881337; }
.alert-warning { background: var(--amber-100); border-color: #fcd34d; color: #78350f; }
.alert-info    { background: var(--blue-50);   border-color: #7dd3fc; color: #0c4a6e; }
.alert-close { margin-left: auto; background: none; border: 0; font-size: 1.15rem; cursor: pointer; color: inherit; opacity: .6; }
.alert-close:hover { opacity: 1; }
.alert .btn { margin-left: auto; }
.flash-stack { position: relative; }

/* ------------------------------------------------------------------ toasts */

.toast-region { position: fixed; bottom: 1.2rem; right: 1.2rem; display: flex; flex-direction: column; gap: .5rem; z-index: 200; max-width: 380px; }
.toast {
    display: flex; align-items: center; gap: .6rem;
    background: #0f172a; color: #fff;
    padding: .75rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    font-size: .88rem; animation: toast-in .25s ease;
}
.toast-success { border-left: 4px solid #22c55e; }
.toast-error { border-left: 4px solid var(--rose-600); }
.toast-warning { border-left: 4px solid #f59e0b; }
.toast-info { border-left: 4px solid var(--blue-600); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ----------------------------------------------------------------- filters */

.filter-bar {
    display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--slate-100);
}
.filter-bar .form-control { width: auto; min-width: 130px; flex: 0 1 auto; }
.filter-bar input[type="search"] { flex: 1 1 220px; }
.filter-bar-report { background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius); margin-bottom: 1.1rem; box-shadow: var(--shadow-sm); }
.filter-spacer { flex: 1; }

/* -------------------------------------------------------------------- tabs */

.tabs { margin-bottom: 1.1rem; }
.tab-nav { display: flex; gap: .25rem; border-bottom: 2px solid var(--slate-200); margin-bottom: 1.1rem; overflow-x: auto; }
.tab-btn {
    padding: .6rem 1rem; background: none; border: 0; border-bottom: 2px solid transparent;
    margin-bottom: -2px; font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--slate-500); cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { color: var(--slate-800); }
.tab-btn.is-active { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* Vertical variant: a guides-style rail of groups beside the panes, for pages
   with too many groups to fit a horizontal strip (Settings). */
.tabs-vertical { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.tabs-vertical .tab-nav {
    flex-direction: column; gap: 1px; overflow-x: visible;
    background: var(--surface); border: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: .6rem; margin-bottom: 0;
    position: sticky; top: 5rem; max-height: calc(100vh - 7rem); overflow-y: auto;
}
.tabs-vertical .tab-btn {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .55rem .7rem; border: 0; border-radius: var(--radius-sm);
    color: var(--slate-600); font-size: .92rem;
}
.tabs-vertical .tab-btn [data-icon] { color: var(--slate-400); flex: 0 0 auto; width: 17px; height: 17px; }
.tabs-vertical .tab-btn:hover { background: var(--slate-50); color: var(--slate-900); }
.tabs-vertical .tab-btn.is-active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.tabs-vertical .tab-btn.is-active [data-icon] { color: var(--blue-600); }
@media (max-width: 900px) {
    /* Narrow screens: fall back to the scrolling strip above the panes. */
    .tabs-vertical { grid-template-columns: 1fr; }
    .tabs-vertical .tab-nav { position: static; max-height: none; flex-direction: row; overflow-x: auto; }
    .tabs-vertical .tab-btn { width: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------------- patients */

.patient-header { display: flex; justify-content: space-between; gap: 1.4rem; padding: 1.15rem; flex-wrap: wrap; }
.patient-header-main { display: flex; gap: 1rem; align-items: center; }
.patient-header-main h2 { font-size: 1.25rem; color: var(--slate-900); }
.patient-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; color: var(--slate-500); font-size: .84rem; margin-top: .3rem; }
.patient-meta [data-icon] { width: 13px; height: 13px; vertical-align: -2px; }
.patient-header-stats { display: flex; gap: 1.6rem; align-items: center; }
.patient-header-stats > div { text-align: center; }
.patient-header-stats strong { display: block; font-size: 1rem; color: var(--slate-800); }
.patient-header-stats small { color: var(--slate-400); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.patient-header-stats .is-danger strong { color: var(--rose-600); }

.detail-list { display: grid; grid-template-columns: 140px 1fr; gap: .45rem .9rem; font-size: .88rem; }
.detail-list dt { color: var(--slate-400); font-weight: 600; }
.detail-list dd { color: var(--slate-700); }
.detail-list-2col { grid-template-columns: 150px 1fr; }

.timeline { list-style: none; position: relative; padding-left: .4rem; }
.timeline::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--slate-200); }
.timeline-item { display: flex; gap: .9rem; padding: .55rem 0; position: relative; }
.timeline-icon {
    display: grid; place-items: center; width: 30px; height: 30px; flex: none;
    background: var(--surface); border: 2px solid var(--slate-200); border-radius: 50%; z-index: 1;
    color: var(--slate-500);
}
.timeline-icon [data-icon] { width: 14px; height: 14px; }
.timeline-appointment .timeline-icon { border-color: var(--blue-600); color: var(--blue-600); }
.timeline-invoice .timeline-icon { border-color: var(--amber-600); color: var(--amber-600); }
.timeline-payment .timeline-icon { border-color: var(--green-600); color: var(--green-600); }
.timeline-note .timeline-icon { border-color: var(--violet-600); color: var(--violet-600); }
.timeline-body { flex: 1; padding-bottom: .3rem; }
.timeline-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.timeline-head time { margin-left: auto; font-size: .78rem; }
.timeline-body p { font-size: .85rem; color: var(--slate-600); margin-top: .2rem; }
.timeline-compact .timeline-icon { width: 24px; height: 24px; }
.timeline-compact::before { left: 14px; }

.note { border: 1px solid var(--slate-200); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .7rem; }
.note-alert { border-color: #fda4af; background: #fff1f2; }
.note-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; flex-wrap: wrap; }
.note-head time { font-size: .76rem; margin-left: auto; }
.note-head form { margin-left: .25rem; }
.note p { font-size: .88rem; }

/* ------------------------------------------------------------------- feeds */

.feed-list { list-style: none; }
.feed-list li { display: flex; align-items: center; gap: .7rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--slate-100); }
.feed-list li:last-child { border-bottom: 0; }
.feed-list-compact li { padding: .45rem 1.1rem; font-size: .85rem; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-300); flex: none; }
.feed-dot-green { background: #22c55e; }
.feed-dot-amber { background: #f59e0b; }
.feed-amount { margin-left: auto; color: var(--green-600); font-size: .88rem; }

.empty-state { text-align: center; padding: 2.4rem 1rem; color: var(--slate-400); }
.empty-state .empty-icon { display: inline-grid; width: 42px; height: 42px; margin-bottom: .6rem; color: var(--slate-300); }
.empty-state .empty-icon svg { width: 100%; height: 100%; }
.empty-state p { margin-bottom: .9rem; }

/* ---------------------------------------------------------------- calendar */

.calendar-card { padding: 0; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--slate-100); flex-wrap: wrap; }
.calendar-nav { display: flex; align-items: center; gap: .4rem; }
.calendar-title { font-size: 1.05rem; font-weight: 700; margin-left: .6rem; color: var(--slate-800); }
.calendar-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .5rem 1.1rem; font-size: .78rem; color: var(--slate-500); border-bottom: 1px solid var(--slate-100); }
.legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.calendar-grid { min-height: 540px; padding: .6rem; overflow-x: auto; }
.calendar-loading { display: grid; place-items: center; min-height: 300px; color: var(--slate-400); }

.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; min-width: 760px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--slate-400); padding: .35rem 0; }
.cal-day { min-height: 96px; border: 1px solid var(--slate-100); border-radius: var(--radius-sm); padding: .3rem; background: var(--surface); }
.cal-day.is-other { background: var(--slate-50); opacity: .65; }
.cal-day.is-today { border-color: var(--blue-600); }
.cal-day-num { font-size: .76rem; font-weight: 700; color: var(--slate-500); display: block; margin-bottom: .2rem; }
.is-today .cal-day-num { color: var(--blue-600); }
.cal-event {
    display: block; width: 100%; text-align: left; border: 0; font: inherit;
    font-size: .72rem; padding: .18rem .35rem; margin-bottom: 2px;
    border-radius: 4px; color: #fff; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event.is-cancelled { opacity: .55; text-decoration: line-through; }
.cal-more { font-size: .7rem; color: var(--blue-600); background: none; border: 0; cursor: pointer; }

.cal-week { display: grid; grid-template-columns: 56px repeat(7, 1fr); min-width: 860px; }
.cal-week.is-day { grid-template-columns: 56px 1fr; min-width: 480px; }
.cal-time { font-size: .7rem; color: var(--slate-400); text-align: right; padding-right: .5rem; transform: translateY(-7px); }
.cal-col { border-left: 1px solid var(--slate-100); position: relative; }
.cal-col-head { text-align: center; font-size: .78rem; font-weight: 700; padding: .4rem 0; border-bottom: 1px solid var(--slate-200); color: var(--slate-600); position: sticky; top: 0; background: var(--surface); }
.cal-col-head.is-today { color: var(--blue-600); }
.cal-slot { height: 44px; border-bottom: 1px solid var(--slate-100); }
.cal-slot:nth-child(even) { border-bottom-style: dashed; }
/* Empty slots and month cells are booking targets. */
.cal-col .cal-slot[data-slot] { cursor: pointer; }
.cal-col .cal-slot[data-slot]:hover { background: var(--slate-50); }
.cal-day[data-date] { cursor: pointer; }
.cal-day[data-date]:hover { border-color: var(--blue-600); }
.cal-week-event {
    /* left/width come from the layout pass so overlapping appointments sit
       side by side; these are the single-event defaults. */
    position: absolute; left: 3px; width: calc(100% - 6px);
    border-radius: 5px; color: #fff; font-size: .72rem; padding: .18rem .4rem;
    overflow: hidden; cursor: pointer; border: 0; text-align: left; font-family: inherit;
    line-height: 1.25; z-index: 2;
    /* The hairline keeps touching columns legible against each other. */
    box-shadow: 0 0 0 1px rgb(255 255 255 / .55), var(--shadow-sm);
}
/* Never let a label spill past its box - truncate and keep the full text in
   the tooltip instead. */
.cal-week-event strong,
.cal-week-event span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-week-event strong { font-size: .72rem; font-weight: 700; }
.cal-week-event span { font-size: .68rem; opacity: .92; }
/* Short or narrow blocks show the name only. */
.cal-week-event.is-compact span { display: none; }
.cal-week-event:hover { z-index: 6; box-shadow: 0 0 0 1px #fff, var(--shadow-lg); }
.cal-week-event:focus-visible { z-index: 6; outline: 2px solid #fff; outline-offset: -3px; }
.cal-agenda { min-width: 0; }
.cal-agenda-day { font-weight: 700; padding: .7rem .4rem .3rem; color: var(--slate-700); border-bottom: 1px solid var(--slate-200); }

.cal-popover {
    position: absolute; z-index: 90; width: 270px;
    background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: .85rem;
}
.cal-popover-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cal-popover dl { display: grid; grid-template-columns: 84px 1fr; gap: .25rem .5rem; font-size: .82rem; }
.cal-popover dt { color: var(--slate-400); }
.cal-popover-actions { margin-top: .7rem; text-align: right; }

/* --------------------------------------------------------------- slots etc */

.slot-picker { margin: .6rem 0 1rem; }
.slot-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.slot-chip {
    padding: .35rem .7rem; border: 1px solid var(--slate-300); border-radius: 99px;
    background: var(--surface); font: inherit; font-size: .82rem; cursor: pointer;
}
.slot-chip:hover { border-color: var(--blue-600); color: var(--blue-600); }
.slot-chip.is-selected { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

.picked-patient {
    display: flex; align-items: center; gap: .6rem;
    background: var(--teal-50); border: 1px solid #99f6e4; border-radius: var(--radius-sm);
    padding: .5rem .7rem; margin-top: .45rem; font-size: .86rem;
}
/* display:flex outweighs the UA [hidden] rule - restate it, or an empty
   chip sits under every patient picker (same trap as .modal below). */
.picked-patient[hidden] { display: none; }
.picked-patient button { margin-left: auto; }

.collapse { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); margin-bottom: .6rem; }
.collapse summary {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .65rem .9rem; cursor: pointer; font-size: .9rem; list-style: none;
}
.collapse summary::-webkit-details-marker { display: none; }
.collapse summary::before { content: '▸'; color: var(--slate-400); transition: transform .15s; }
.collapse[open] summary::before { transform: rotate(90deg); }
.collapse-body, .collapse > .form-grid-2, .collapse > .form-grid-3, .collapse > .form-field, .collapse > p { padding: .2rem .9rem .9rem; }
.collapse-body { border-top: 1px solid var(--slate-100); padding-top: .8rem; }

/* --------------------------------------------------------- invoice builder */

.invoice-items-table th, .invoice-items-table td { padding: .45rem .5rem; }
.invoice-summary-card .summary-row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .92rem; }
.summary-row-grand { border-top: 2px solid var(--slate-800); font-size: 1.05rem !important; font-weight: 800; margin-top: .3rem; padding-top: .6rem !important; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: .5rem; }

.tender-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: .5rem; margin-bottom: .55rem; align-items: center; }
.allocation-row {
    display: grid; grid-template-columns: auto 1fr auto 110px; gap: .6rem; align-items: center;
    border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
    padding: .55rem .7rem; margin-bottom: .5rem; cursor: pointer; font-size: .86rem;
}
.allocation-row:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); }
.allocation-invoice small { display: block; color: var(--slate-500); font-size: .74rem; }
.allocation-balance { font-weight: 700; color: var(--rose-600); }

/* ----------------------------------------------------------------- modals */

.modal { position: fixed; inset: 0; background: rgb(15 23 42 / .55); display: grid; place-items: center; z-index: 150; padding: 1rem; }
/* display:grid outweighs the UA [hidden] rule - restate it or modals can never close. */
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.15rem; border-bottom: 1px solid var(--slate-100); background: var(--brand-modal-head-bg); color: var(--brand-modal-head-fg); border-radius: var(--radius) var(--radius) 0 0; }
.modal-head h3 { font-size: 1rem; color: inherit; }
.modal-head .icon-btn { color: inherit; }
.modal-body { padding: 1.15rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.15rem; border-top: 1px solid var(--slate-100); }

/* ----------------------------------------------------------------- reports */

.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.report-grid-sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 1.1rem; }
.report-card {
    display: block; background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius);
    padding: 1.3rem; color: inherit; box-shadow: var(--shadow-sm);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.report-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-600); color: inherit; }
.report-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--blue-50); color: var(--blue-600); margin-bottom: .8rem; }
.report-icon svg { width: 22px; height: 22px; }
.report-card h2 { font-size: 1rem; margin-bottom: .3rem; display: flex; gap: .5rem; align-items: center; }
.report-card p { font-size: .84rem; color: var(--slate-500); margin-bottom: .7rem; }
.report-cta { font-size: .82rem; color: var(--blue-600); font-weight: 600; }

.diff-old { background: #fff1f2; color: #9f1239; font-family: ui-monospace, monospace; font-size: .78rem; }
.diff-new { background: #f0fdf4; color: #166534; font-family: ui-monospace, monospace; font-size: .78rem; }

/* ------------------------------------------------------- notifications page */

.notif-list { list-style: none; }
.notif-item { display: flex; gap: .8rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--slate-100); }
.notif-item.is-unread { background: var(--blue-50); }
.notif-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--slate-100); color: var(--slate-500); flex: none; }
.notif-icon [data-icon] { width: 17px; height: 17px; }
.notif-success { background: var(--green-100); color: var(--green-600); }
.notif-warning { background: var(--amber-100); color: var(--amber-600); }
.notif-error { background: var(--rose-100); color: var(--rose-600); }
.notif-body p { font-size: .85rem; color: var(--slate-600); margin: .15rem 0; }

/* --------------------------------------------------------- patient portal */
/*
 * The portal reuses the admin shell wholesale; these are the only differences.
 * Sign-in and code-entry render no sidebar (there is no patient yet), so the
 * main column has to reclaim the space the fixed sidebar would have occupied.
 */
.is-gate .admin-main { margin-left: 0; }
.portal-topbar-title { font-size: .92rem; font-weight: 600; color: var(--slate-500); }
.portal-gate { max-width: 460px; margin: 3rem auto; }
.portal-gate .card-body { padding: 1.6rem; }

/* Booking wizard: each answered step narrows the next one's choices. */
.book-step { border-top: 1px solid var(--slate-200); padding: 1.1rem 0; }
.book-step:first-of-type { border-top: 0; padding-top: 0; }
.book-step-label { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .92rem; margin-bottom: .7rem; }
.book-step-num {
    display: grid; place-items: center; width: 22px; height: 22px; flex: none;
    border-radius: 50%; background: var(--blue-600); color: #fff; font-size: .74rem; font-weight: 700;
}
.book-slots { display: flex; flex-wrap: wrap; gap: .45rem; }
.book-slot { position: relative; }
.book-slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.book-slot span {
    display: block; padding: .45rem .8rem; border: 1px solid var(--slate-200); border-radius: var(--radius);
    font-size: .88rem; font-variant-numeric: tabular-nums; cursor: pointer; background: var(--surface);
}
.book-slot input:checked + span { background: var(--blue-600); border-color: var(--blue-600); color: #fff; font-weight: 600; }
.book-slot input:focus-visible + span { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.notif-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.notif-bulkbar-actions { display: flex; gap: .45rem; }
/* Aligned to the icon medallion beside it rather than the text baseline. */
.notif-pick { flex: none; align-items: flex-start; padding-top: .55rem; }
.notif-item:hover .notif-pick input { outline: 2px solid var(--blue-200); outline-offset: 2px; }

/* ---------------------------------------------------------- profile & misc */

.profile-avatar-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.avatar-upload .btn { cursor: pointer; }

.strength-meter { margin: -.4rem 0 .9rem; }
.strength-bar { height: 6px; background: var(--slate-200); border-radius: 3px; overflow: hidden; }
.strength-bar span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; border-radius: 3px; }
.strength-meter small { color: var(--slate-500); font-size: .75rem; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 1.2rem; }

.banner-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 5px; }
.gallery-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; }
.gallery-admin-item { border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; }
.gallery-admin-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.gallery-admin-item figcaption { padding: .55rem .7rem; font-size: .82rem; position: relative; }
.gallery-admin-item form { position: absolute; top: .3rem; right: .3rem; }
.message-quote { border-left: 3px solid var(--slate-300); padding: .5rem .9rem; background: var(--slate-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: .7rem 0; font-size: .9rem; }
.message-actions { display: flex; gap: .5rem; align-items: center; }
.message-actions input { flex: 1; }
.message-item.is-unread summary { font-weight: 600; }

.editor-toolbar { display: flex; gap: .25rem; margin-bottom: .35rem; }
.editor-toolbar button {
    min-width: 32px; padding: .3rem .55rem; border: 1px solid var(--slate-300);
    background: var(--surface); border-radius: var(--radius-sm); font: inherit; font-size: .8rem; cursor: pointer;
}
.editor-toolbar button:hover { border-color: var(--blue-600); color: var(--blue-600); }
.editor-area { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: .84rem; }

/* --------------------------------------------------- searchable comboboxes */

.combo { position: relative; }
/* The native <select> behind a searchable combo, when it is [required].
   Invisible but still focusable: a display:none required control makes the
   browser abort submission with only a console warning, so the user would
   click Save and see nothing happen. Sized and placed to sit under the
   toggle, so the browser's own validation bubble points at the right thing. */
.combo-native {
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px;
    opacity: 0; pointer-events: none;
    border: 0; padding: 0; margin: 0;
}
.combo-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .52rem .7rem;
    border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
    background: var(--surface); font: inherit; font-size: .9rem; color: var(--slate-800);
    cursor: pointer; text-align: left;
}
.combo-toggle:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgb(2 132 199 / .14); }
.combo-toggle .combo-caret { color: var(--slate-400); font-size: .7rem; flex: none; }
.combo-toggle .combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-toggle .combo-label.is-placeholder { color: var(--slate-400); }
.combo.form-control-sm-host .combo-toggle { padding: .34rem .55rem; font-size: .84rem; }

.combo-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px;
    background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); z-index: 80; overflow: hidden;
}
.combo-search {
    width: 100%; border: 0; border-bottom: 1px solid var(--slate-200);
    padding: .55rem .8rem; font: inherit; font-size: .88rem;
}
.combo-search:focus { outline: none; background: var(--blue-50); }
.combo-list { max-height: 240px; overflow-y: auto; list-style: none; }
.combo-option {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: .48rem .8rem; font: inherit; font-size: .88rem; color: var(--slate-700); cursor: pointer;
}
.combo-option:hover, .combo-option.is-focused { background: var(--blue-50); }
.combo-option.is-selected { background: var(--blue-600); color: #fff; font-weight: 600; }
.combo-empty { padding: .7rem .8rem; color: var(--slate-400); font-size: .84rem; }

.inline-edit-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.table-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* -------------------------------------------------------------- typography */

.text-muted { color: var(--slate-400); }
.text-danger { color: var(--rose-600); }
.text-success { color: var(--green-600); }
.text-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-mono { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: .84em; }
.text-lg { font-size: 1.15rem; }
.d-block { display: block; }

[data-icon] { display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: -3px; }
[data-icon] svg { width: 100%; height: 100%; }

/* -------------------------------------------------------------------- auth */

.auth-body { background: var(--slate-100); }
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-visual {
    position: relative; display: grid; place-items: center;
    background: #0c2a46;
    color: #e0f2fe; padding: 3rem;
    isolation: isolate;
    overflow: hidden;
}

/*
 * Photograph layer.
 *
 * The image sits in its own ::before rather than on .auth-visual, so the
 * navy stays underneath: if the file 404s or is still uploading, the panel
 * degrades to the original solid colour instead of to unreadable white text
 * on nothing.
 *
 * `object-position: center 22%` favours the upper third - a portrait framed
 * for a wide hero crops through the chin at this aspect ratio otherwise.
 */
.auth-visual-photo {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 22%;
}

/*
 * The scrim is what makes the overlaid copy legible, and it is not optional:
 * white text on an unknown photograph is a contrast accident waiting for the
 * first clinic that uploads a bright one. Heavier on the left, where the text
 * block sits, so the face on the right stays visible.
 */
.auth-visual::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(105deg, rgba(6, 26, 45, .93) 0%, rgba(6, 26, 45, .78) 45%, rgba(6, 26, 45, .45) 100%),
        linear-gradient(to top, rgba(6, 26, 45, .6) 0%, transparent 40%);
}

.auth-visual-inner { position: relative; max-width: 400px; }
.auth-tooth { width: 76px; height: 76px; color: #7dd3fc; margin-bottom: 1.2rem; }
.auth-logo { display: block; max-height: 92px; max-width: 260px; width: auto; margin: 0 auto 1.3rem; object-fit: contain; }
.auth-visual h2 { font-size: 1.9rem; color: #fff; margin-bottom: .4rem; }
.auth-visual p { color: #bae6fd; margin-bottom: 1.6rem; }
.auth-points { list-style: none; display: grid; gap: .75rem; }
.auth-points li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; }
.auth-points [data-icon] { width: 20px; height: 20px; color: #5eead4; }

.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.2rem; }
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--auth-glass-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--auth-glass-border);
    border-radius: 18px; box-shadow: var(--shadow-lg);
    padding: 2.2rem;
}
.auth-title { font-size: 1.5rem; color: var(--slate-900); margin-bottom: .3rem; }
.auth-subtitle { color: var(--slate-500); font-size: .92rem; margin-bottom: 1.5rem; }
.auth-row { display: flex; justify-content: space-between; align-items: center; margin: -.2rem 0 1.2rem; font-size: .86rem; }
.auth-alt { margin-top: 1.2rem; text-align: center; font-size: .88rem; }
.auth-footnote { margin-top: 1.4rem; color: var(--slate-400); font-size: .8rem; }

.password-wrap { position: relative; }
.password-wrap .toggle-eye {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--slate-400); cursor: pointer; font-size: .78rem; font-weight: 600;
}

/* ------------------------------------------------------------------ errors */

.error-body { display: grid; place-items: center; min-height: 100vh; }
.error-page { text-align: center; padding: 2rem; max-width: 560px; }
.error-code {
    font-size: 6.5rem; font-weight: 900; line-height: 1;
    color: var(--blue-600);
}
.error-page h1 { margin: .4rem 0; color: var(--slate-800); }
.error-page p { color: var(--slate-500); margin-bottom: 1.4rem; }
.error-actions { display: flex; gap: .7rem; justify-content: center; }
.error-trace { text-align: left; margin-top: 1.6rem; background: #0f172a; color: #cbd5e1; padding: 1rem; border-radius: var(--radius); font-size: .74rem; overflow: auto; max-height: 300px; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .grid-2, .grid-2-1 { grid-template-columns: 1fr; }
    .form-grid-3 { grid-template-columns: 1fr 1fr; }
    .check-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.is-open { transform: none; }
    .sidebar-close { display: block; }
    .admin-main { margin-left: 0; }
    .auth-split { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .patient-header-stats { width: 100%; justify-content: space-between; }
    .tender-row { grid-template-columns: 1fr 1fr; }
    .allocation-row { grid-template-columns: auto 1fr; }
    .allocation-row input[data-role="alloc-amount"] { grid-column: 2; }
}

@media (max-width: 600px) {
    .admin-content { padding: 1rem .8rem; }
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .check-grid, .check-grid-3 { grid-template-columns: 1fr; }
    .global-search { display: none; }
    .user-chip-name { display: none; }
    .branch-switch-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
    .page-actions .btn { font-size: .8rem; padding: .42rem .7rem; }
    .detail-list, .detail-list-2col { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .detail-list dt { margin-top: .45rem; }
}

/* ---------------------------------------------------- dark theme overrides */
/* Components whose light styling uses literal colours (tinted alerts, badge
   text, warning rows) get explicit dark counterparts here. */

[data-theme="dark"] .alert-success { background: #0e2a1b; border-color: #1e5c39; color: #a7e3c0; }
[data-theme="dark"] .alert-error   { background: #331520; border-color: #7f2740; color: #f3b8c6; }
[data-theme="dark"] .alert-warning { background: #33260d; border-color: #7c5f1d; color: #ecd9a0; }
[data-theme="dark"] .alert-info    { background: #0f2740; border-color: #1f5f8a; color: #a8d4f0; }

[data-theme="dark"] .badge-green  { color: #86efac; }
[data-theme="dark"] .badge-rose   { color: #fda4af; }
[data-theme="dark"] .badge-amber  { color: #fcd34d; }
[data-theme="dark"] .badge-teal   { color: #5eead4; }
[data-theme="dark"] .badge-violet { color: #c4b5fd; }

[data-theme="dark"] .row-warning td { background: #2b2410; }
[data-theme="dark"] .note-alert { background: #331520; border-color: #7f2740; }
[data-theme="dark"] .diff-old { background: #331520; color: #fda4af; }
[data-theme="dark"] .diff-new { background: #0e2a1b; color: #86efac; }
[data-theme="dark"] .picked-patient { background: #0f2b29; border-color: #1d5b52; }
[data-theme="dark"] .global-search input:focus { background: var(--slate-50); }
[data-theme="dark"] .stat-green .stat-icon  { color: #4ade80; }
[data-theme="dark"] .stat-rose .stat-icon   { color: #fb7185; }
[data-theme="dark"] .stat-amber .stat-icon  { color: #fbbf24; }
[data-theme="dark"] .stat-violet .stat-icon { color: #a78bfa; }

/* ----------------------------------------------------------------- nursing */

/* A form that sits inside a table cell next to its siblings rather than
   stacking - the drug round is a row of small decisions, not a page of them. */
.inline-form { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
.inline-form .form-control { width: auto; min-width: 8rem; }

/* Wide tables scroll inside their card instead of pushing the page sideways. */
.table-scroll { overflow-x: auto; }

.mar-slots { display: flex; flex-wrap: wrap; gap: .6rem; }
.mar-slot { min-width: 7rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.mar-slot-time { font-weight: 700; font-size: .78rem; margin-bottom: .25rem; }

/* ------------------------------------------------------------------- print */

@media print {
    .sidebar, .topbar, .page-actions, .filter-bar, .pagination-bar, .admin-footer,
    .toast-region, .card-foot, .td-actions, .th-actions { display: none !important; }
    .admin-main { margin-left: 0; }
    .card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
    body { background: var(--surface); }
}


/* -------------------------------------------------------------- odontogram */

.odontogram { --odo-tooth: #f1f5f9; --odo-line: #94a3b8; }
[data-theme="dark"] .odontogram { --odo-tooth: #1e293b; --odo-line: #475569; }
.odo-surface { cursor: pointer; transition: filter .1s; }
.odo-surface:hover { filter: brightness(0.85); }
.odo-num { font-size: 11px; fill: var(--text-muted, #64748b); font-family: inherit; }
.odo-swatch {
    display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
    margin-right: .3rem; vertical-align: baseline;
}

/* ---------------------------------------------------------------- lightbox */

.lightbox-overlay {
    position: fixed; inset: 0; z-index: 300; display: none;
    background: rgba(10, 14, 22, 0.92); flex-direction: column;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem 1rem; color: #e2e8f0; font-size: .9rem; gap: 1rem;
}
.lightbox-btn {
    background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 6px;
    padding: .35rem .8rem; cursor: pointer; font-size: .85rem; margin-left: .4rem;
}
.lightbox-btn.is-active { background: #2563eb; }
.lightbox-stage {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 1rem; padding: 0 3.5rem 1.5rem; min-height: 0;
}
.lightbox-img, .lightbox-half img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 6px; background: #000;
}
.lightbox-half {
    flex: 1 1 50%; height: 100%; margin: 0; display: flex; flex-direction: column;
    align-items: center; min-width: 0;
}
.lightbox-half img { flex: 1; min-height: 0; width: auto; }
.lightbox-half figcaption { color: #cbd5e1; font-size: .8rem; padding-top: .4rem; text-align: center; }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px;
    width: 2.6rem; height: 2.6rem; font-size: 1.1rem; cursor: pointer; z-index: 2;
}
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-prev { left: .75rem; }
.lightbox-next { right: .75rem; }

/* ------------------------------------------------------------------ guides */

.guide-hero {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.guide-hero-title {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.9rem; font-weight: 700; color: var(--slate-900); margin: 0;
}
.guide-hero-title [data-icon] { color: var(--blue-600); }
.guide-hero-title svg { width: 30px; height: 30px; }
.guide-hero-sub { color: var(--slate-500); margin: .25rem 0 0; }

.guide-search {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--slate-200);
    border-radius: var(--radius); padding: .55rem .75rem; margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.guide-search [data-icon] { color: var(--slate-400); }
.guide-search input {
    flex: 1; min-width: 12rem; border: 0; outline: none; font: inherit;
    background: transparent; color: var(--slate-800); padding: .2rem 0;
}

.guide-results { list-style: none; margin: 0; padding: 0; }
.guide-results li { padding: .6rem 0; border-bottom: 1px solid var(--slate-200); }
.guide-results li:last-child { border-bottom: 0; }
.guide-results p { margin: .2rem 0 0; font-size: .88rem; }

.guide-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.guide-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 1.75rem 1.25rem;
    background: var(--surface); border: 1px solid var(--slate-200);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.guide-card:hover {
    transform: translateY(-2px); box-shadow: var(--shadow);
    border-color: var(--blue-600);
}
.guide-card-icon { color: var(--blue-600); }
.guide-card-icon svg { width: 34px; height: 34px; }
.guide-card h3 { margin: .3rem 0 0; font-size: 1.05rem; color: var(--slate-900); }
.guide-card p { margin: 0; font-size: .88rem; color: var(--slate-500); line-height: 1.45; }

/* -------------------------------------------------------------- the reader */

.guide-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; } }

.guide-rail {
    background: var(--surface); border: 1px solid var(--slate-200);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: .6rem; position: sticky; top: 5rem;
    max-height: calc(100vh - 7rem); overflow-y: auto;
}
@media (max-width: 900px) { .guide-rail { position: static; max-height: none; } }

.guide-rail-back {
    display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
    color: var(--slate-600); text-decoration: none; font-weight: 600;
    border-bottom: 1px solid var(--slate-200); margin-bottom: .4rem;
}
.guide-rail-back:hover { color: var(--blue-600); }
.guide-rail-nav { display: flex; flex-direction: column; gap: 1px; }
.guide-rail-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border-radius: var(--radius-sm);
    color: var(--slate-600); text-decoration: none; font-size: .92rem;
}
.guide-rail-item [data-icon] { color: var(--slate-400); flex: 0 0 auto; }
.guide-rail-item:hover { background: var(--slate-50); color: var(--slate-900); }
.guide-rail-item.is-active {
    background: var(--blue-50); color: var(--blue-700); font-weight: 600;
}
.guide-rail-item.is-active [data-icon] { color: var(--blue-600); }

.guide-article { max-width: 62rem; }
.guide-title {
    font-size: 1.75rem; color: var(--blue-700); margin: 0 0 .3rem;
    padding-bottom: .6rem; border-bottom: 2px solid var(--blue-600);
}
.guide-summary { color: var(--slate-500); margin: 0 0 1.25rem; }

.guide-toc {
    background: var(--slate-50); border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm); padding: .7rem .9rem; margin-bottom: 1.5rem;
    display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline;
}
.guide-toc-label {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--slate-500); font-weight: 700; width: 100%;
}
.guide-toc a { font-size: .89rem; color: var(--blue-700); text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }

.guide-section { scroll-margin-top: 5rem; margin-bottom: 1.75rem; }
.guide-section > h3 {
    font-size: 1.3rem; color: var(--slate-900); margin: 0 0 .7rem;
}
.guide-section p { color: var(--slate-700); line-height: 1.65; margin: 0 0 .8rem; }
.guide-h { font-size: 1.02rem; color: var(--slate-900); margin: 1.1rem 0 .4rem; }

.guide-list, .guide-steps { color: var(--slate-700); line-height: 1.65; margin: 0 0 .9rem; padding-left: 1.3rem; }
.guide-list li, .guide-steps li { margin-bottom: .35rem; }
.guide-steps li::marker { font-weight: 700; color: var(--blue-600); }

.guide-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.guide-table { font-size: .9rem; }
.guide-table th { white-space: nowrap; }
.guide-table td { vertical-align: top; line-height: 1.55; }

.guide-callout {
    display: flex; gap: .7rem; align-items: flex-start;
    border-left: 4px solid var(--slate-400); border-radius: var(--radius-sm);
    background: var(--slate-50); padding: .75rem 1rem; margin: 0 0 1rem;
    color: var(--slate-700); line-height: 1.6; font-size: .93rem;
}
.guide-callout [data-icon] { flex: 0 0 auto; margin-top: .1rem; }
.guide-callout-note { border-left-color: var(--blue-600); background: var(--blue-50); }
.guide-callout-note [data-icon] { color: var(--blue-600); }
.guide-callout-tip { border-left-color: var(--green-600); background: var(--green-100); }
.guide-callout-tip [data-icon] { color: var(--green-600); }
.guide-callout-warn { border-left-color: var(--amber-600); background: var(--amber-100); }
.guide-callout-warn [data-icon] { color: var(--amber-600); }

.guide-pager {
    display: flex; justify-content: space-between; gap: .75rem;
    padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid var(--slate-200);
}

@media print {
    .guide-rail, .guide-hero .btn-row, .guide-toc, .guide-pager, .guide-search { display: none !important; }
    .guide-layout { grid-template-columns: 1fr; }
    .guide-article { max-width: none; }
}

/* ------------------------------------------------------- date/time pickers */
/* flatpickr theme integration: brand the selected day and repaint the popup
   for dark mode (flatpickr's own stylesheet uses literal light colours). */

.flatpickr-calendar { box-shadow: var(--shadow-lg); border: 1px solid var(--slate-200); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--blue-600); border-color: var(--blue-600);
}
.flatpickr-day.today { border-color: var(--teal-600); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

[data-theme="dark"] .flatpickr-calendar { background: var(--slate-800); border-color: var(--slate-700); }
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-weekday,
[data-theme="dark"] .flatpickr-day,
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--slate-200); fill: var(--slate-200); }
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--slate-800); }
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--slate-500); }
[data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day:focus { background: var(--slate-700); border-color: var(--slate-700); }
[data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.selected:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--slate-300); }
[data-theme="dark"] .flatpickr-time { border-top-color: var(--slate-700); }
[data-theme="dark"] .flatpickr-time input:hover, [data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus { background: var(--slate-700); }
[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--slate-800); }
[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--slate-800); }
[data-theme="dark"] .numInputWrapper span.arrowUp::after { border-bottom-color: var(--slate-300); }
[data-theme="dark"] .numInputWrapper span.arrowDown::after { border-top-color: var(--slate-300); }

/* ---------------------------------------------------------------- bulk bar */
.bulk-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1.15rem; border-bottom: 1px solid var(--slate-100); background: var(--blue-50); }
.bulk-bar[hidden] { display: none; }
.bulk-count { font-size: .85rem; font-weight: 600; color: var(--slate-600); }
.td-check, .th-check { width: 2rem; text-align: center; }
[data-theme="dark"] .bulk-bar { background: var(--slate-800); border-bottom-color: var(--slate-700); }
[data-theme="dark"] .bulk-count { color: var(--slate-300); }

/* --------------------------------------------------------------- quick add */
.quick-add-wrap { display: flex; align-items: flex-start; gap: .4rem; }
.quick-add-wrap > .form-control, .quick-add-wrap > .combo { flex: 1 1 auto; min-width: 0; }
.quick-add-btn { flex: 0 0 auto; border: 1px solid var(--slate-200); border-radius: var(--radius-sm, 6px); height: 2.45rem; width: 2.45rem; display: inline-flex; align-items: center; justify-content: center; }
.quick-add-btn:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-200, var(--slate-300)); }
.modal-card-sm { max-width: 420px; }
[data-theme="dark"] .quick-add-btn { border-color: var(--slate-600); }
[data-theme="dark"] .quick-add-btn:hover { background: var(--slate-700); color: var(--blue-300, #93c5fd); }

/* ------------------------------------------------------- settings colours */
.color-setting { display: flex; align-items: center; gap: .6rem; }
.form-control-color { width: 64px; height: 2.45rem; padding: .2rem .3rem; cursor: pointer; }
.color-setting-hex { color: var(--slate-500); font-size: .85rem; }

/* ------------------------------------------------------------ theme studio */
/* Settings -> Branding: preset gallery and live preview. */

.theme-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; margin-top: .6rem; }
.theme-preset {
    display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; text-align: left;
    padding: .8rem .9rem; border: 2px solid var(--slate-200); border-radius: var(--radius);
    background: var(--surface); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s;
}
.theme-preset:hover { border-color: var(--slate-400); }
.theme-preset.is-active { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgb(2 132 199 / .15); }
.theme-preset small { font-size: .76rem; line-height: 1.35; }
.theme-swatches { display: flex; gap: 4px; margin-bottom: .2rem; }
.theme-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgb(15 23 42 / .12); }

.theme-preview {
    display: flex; border: 1px solid var(--slate-200); border-radius: var(--radius);
    overflow: hidden; min-height: 240px; box-shadow: var(--shadow-sm);
}
.theme-preview-sidebar {
    width: 108px; flex: none; background: #0f172a; color: #cbd5e1;
    display: flex; flex-direction: column; gap: .45rem; padding: .7rem .55rem; font-size: .74rem;
}
.theme-preview-brand { font-weight: 800; color: #fff; background: var(--blue-600); border-radius: 6px; padding: .25rem .45rem; align-self: flex-start; }
.theme-preview-active { background: var(--blue-600); color: #fff; border-radius: 6px; padding: .22rem .45rem; font-weight: 600; }
.theme-preview-sidebar span { padding: .18rem .45rem; }
.theme-preview-main { flex: 1; background: var(--body-bg); display: flex; flex-direction: column; }
.theme-preview-topbar { background: #fff; border-bottom: 1px solid var(--slate-200); padding: .45rem .7rem; font-size: .74rem; color: var(--slate-500); }
.theme-preview-body { padding: .8rem; display: flex; flex-direction: column; gap: .7rem; font-size: .85rem; }
.theme-preview-modal { border: 1px solid var(--slate-200); border-radius: 8px; overflow: hidden; background: var(--surface); max-width: 240px; box-shadow: var(--shadow-sm); }
.theme-preview-modal-head { padding: .4rem .6rem; border-bottom: 1px solid var(--slate-100); font-weight: 600; font-size: .78rem; }
.theme-preview-modal-body { padding: .5rem .6rem; font-size: .75rem; color: var(--slate-500); }
.theme-preview-buttons { display: flex; gap: .5rem; }
.theme-preview-buttons .btn { pointer-events: none; }
.theme-preview-buttons [data-preview="danger"] { border: 1px solid; }

/* -------------------------------------------------------------- mail tools */
.mail-tools { display: grid; gap: 1.4rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--slate-200); }
.mail-tools h3 { font-size: .95rem; margin-bottom: .3rem; }
.mail-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.mail-test-row { display: flex; gap: .6rem; margin-top: .6rem; max-width: 480px; }
.mail-test-row .form-control { flex: 1 1 auto; }

/* ---------------------------------------------------------- queue check-in */
.queue-checkin { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.queue-checkin-patient { flex: 1 1 280px; margin: 0; position: relative; }
.queue-checkin-complaint { flex: 2 1 320px; }
.queue-checkin .btn { flex: 0 0 auto; }
.queue-walkin { flex: 1 1 100%; }

/* ------------------------------------------------------------ system health */
/* Status is carried by an icon, a coloured rail AND a badge word - colour
   alone would leave the screen unreadable to anyone who cannot distinguish
   the greens from the ambers, and this is a screen people act on. */
.health-headline { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.health-headline strong { font-size: 1.05rem; }

.health-worst { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.health-worst li { font-size: .9rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }

.health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.health-item {
    display: flex; gap: .75rem; padding: .7rem .85rem;
    border: 1px solid var(--slate-200); border-left-width: 3px; border-radius: 6px;
    background: var(--surface, #fff);
}
.health-item .health-icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: .15rem; }
.health-body { flex: 1 1 auto; min-width: 0; }
.health-title { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.health-detail { color: var(--slate-600); font-size: .88rem; margin-top: .15rem; }
.health-remedy {
    margin-top: .4rem; font-size: .85rem; color: var(--slate-700);
    background: var(--slate-50); border-radius: 4px; padding: .4rem .55rem;
}

.health-ok      { border-left-color: #16a34a; }
.health-warn    { border-left-color: #d97706; }
.health-fail    { border-left-color: #dc2626; }
.health-unknown { border-left-color: #64748b; }

.health-ok      .health-icon { color: #16a34a; }
.health-warn    .health-icon { color: #d97706; }
.health-fail    .health-icon { color: #dc2626; }
.health-unknown .health-icon { color: #64748b; }

[data-theme="dark"] .health-item   { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .health-remedy { background: #111c31; color: #cbd5e1; }
[data-theme="dark"] .health-detail { color: #94a3b8; }