/* FC-WFS — FootCare brand stylesheet, v2 (UX overhaul)
 *
 * Design rules applied:
 *   - Body text 16px / line-height 1.6 (older-friendly)
 *   - Buttons ≥ 48px tall, primary obvious
 *   - WCAG-AA contrast minimum
 *   - Generous whitespace
 *   - Color = meaning, not decoration
 *   - Bilingual support (Thai main + English sub)
 */

:root {
    /* Lock the site to LIGHT MODE — without this, Chrome / Safari /
       Edge apply an automatic darkening tint to the whole page when
       the user's OS is in dark mode (or f.lux night-shift is on).
       That tint reads as a "gray overlay on everything" and washes
       out fonts. Declaring `color-scheme: only light` opts the page
       out of those auto-adjustments. */
    color-scheme: only light;
    /* Brand palette */
    --fc-orange:    #EE7F2B;
    --fc-orange-d:  #c45e10;        /* darker for AA contrast on white */
    --fc-orange-l:  #fff5eb;
    --fc-orange-xl: #fffaf3;
    --fc-dark:      #191919;
    --fc-darker:    #111111;

    /* Semantic colors (WCAG AA on white) */
    --fc-success:    #058a4a;       /* "done" / passed */
    --fc-success-bg: #d1fae5;
    --fc-warning:    #b45309;       /* "action needed" / waiting */
    --fc-warning-bg: #fef3c7;
    --fc-danger:     #b91c1c;       /* "blocked" / refund / error */
    --fc-danger-bg:  #fee2e2;
    --fc-info:       #0369a1;       /* "in progress" */
    --fc-info-bg:    #dbeafe;
    --fc-neutral:    #475569;       /* secondary text */

    /* Text / surface
       --fc-text is the PRIMARY body text colour. Pure black
       (`#000`) so headlines and body copy read as crisp on
       the white page. The old `#1a1a1a` was technically dark
       gray and rendered with a slight haze on sub-pixel
       displays — combined with browser dark-mode auto-tint,
       the page read as washed out.
       --fc-surface is the PAGE BACKGROUND. Pure white so the
       site reads as crisp clinical-clean. The cream
       (`#f7f5f2`) it used to be added a permanent off-white
       cast over everything.
       --fc-surface-2 stays a hair off white so table zebra
       striping (`tr:nth-child(even)`) is still visible. */
    --fc-text:       #000000;
    --fc-text-dim:   #334155;
    --fc-text-mute:  #4b5563;
    --fc-surface:    #ffffff;
    --fc-surface-2:  #fafafa;
    --fc-border:     #e0d8ce;
    --fc-border-2:   #f0ece6;

    /* Scale — based on a 4pt grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Type */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Noto Sans Thai", "Sarabun", "IBM Plex Sans Thai",
                  system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--fc-surface);
    color: var(--fc-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* iPhone notch / home-bar safe areas — viewport-fit=cover lets
       the page paint full-bleed; this padding stops actual content
       (header, footer, modals) from landing under hardware. */
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    /* Stop iOS Safari's elastic scroll from over-zooming on
       horizontal-drag gestures (calendar drag-to-move). */
    overscroll-behavior-x: contain;
    /* Disable the iOS tap-highlight "blue flash" on buttons / links.
       Our own :active / :focus-visible states give the visual cue. */
    -webkit-tap-highlight-color: transparent;
}

/* ── iOS Safari quirks ─────────────────────────────────
   On iOS, focusing an input with `font-size < 16px` auto-zooms the
   viewport. We pin every form control to ≥16px on touch so the page
   doesn't lurch the moment reception taps a field. */
@media (pointer: coarse) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Kill the legacy 300 ms tap delay on every interactive element.
   `manipulation` says "we don't need double-tap to zoom on this
   element" so iOS Safari fires the tap synchronously. */
button, a, [role="button"],
.btn, .fc-side-link, .fc-tab-btn,
.cal-block, .place-card, .drag-handle,
input[type="submit"], input[type="button"] {
    touch-action: manipulation;
}

/* Minimum 44×44 tap-target — Apple HIG. Apply where buttons might
   render small (icon-only action buttons in tables). */
@media (pointer: coarse) {
    .btn-sm,
    button.btn-fc-outline,
    .lang-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ── Headings ────────────────────────────────────────── */
h1, .h1 { font-size: 1.625rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--space-2); }
h2, .h2 { font-size: 1.25rem;  line-height: 1.3;  font-weight: 700; margin: 0 0 var(--space-2); }
h3, .h3 { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; margin: 0 0 var(--space-2); }
h4, .h4 { font-size: 0.9375rem; line-height: 1.4; font-weight: 600; margin: 0 0 var(--space-1); }

p { margin: 0 0 var(--space-3); }
.text-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--fc-text-dim); }
small { font-size: 0.875rem; }

/* ══════════════════════════════════════════════════════
   Bilingual UI — ONE language at a time. The top-bar pill
   toggles `<html lang>`; CSS hides whichever language is
   not active. NEVER mix Thai + English in the same label.
   ══════════════════════════════════════════════════════ */

/* Canonical toggle classes — preferred for all new code.
   Use `bi("ไทย", "English")` / `bi_block(...)` from a Jinja template
   to emit these automatically. */
.t-th, .t-en { display: none; }
html[lang="th"] .t-th { display: inline; }
html[lang="en"] .t-en { display: inline; }

.t-th-block, .t-en-block { display: none; }
html[lang="th"] .t-th-block { display: block; }
html[lang="en"] .t-en-block { display: block; }

/* ── Legacy class aliases ────────────────────────────── */
/* These names appear all over the codebase from earlier work. They now
   behave like the canonical toggle classes — strictly one language at
   a time, never stacked. */

.lbl-th, .lbl-th-inline { display: none; }
.lbl-en, .lbl-en-inline { display: none; }
html[lang="th"] .lbl-th, html[lang="th"] .lbl-th-inline { display: inline; }
html[lang="en"] .lbl-en, html[lang="en"] .lbl-en-inline { display: inline; }
/* Restore typography for the visible one (no longer dimmed/stacked) */
html[lang="th"] .lbl-th { font-size: 1rem; font-weight: 600; color: var(--fc-text); }
html[lang="en"] .lbl-en { font-size: 1rem; font-weight: 600; color: var(--fc-text); }

/* Sidebar link pair (.fc-side-th / .fc-side-en) — single-language too */
.fc-side-link .fc-side-th, .fc-side-link .fc-side-en { display: none; }
html[lang="th"] .fc-side-link .fc-side-th { display: inline; }
html[lang="en"] .fc-side-link .fc-side-en { display: inline; }
/* Both languages get the SAME typography when shown — no demotion */
.fc-side-link .fc-side-th,
.fc-side-link .fc-side-en {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fc-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    line-height: 1.2;
}
html[lang="th"] .fc-side-link.active .fc-side-th,
html[lang="en"] .fc-side-link.active .fc-side-en { color: var(--fc-orange-d); }

/* Stat-card label rows — only show the active locale's row */
.stat-lbl-row.t-th-only { display: none; }
.stat-lbl-row.t-en-only { display: none; }
html[lang="th"] .stat-lbl-row.t-th-only { display: inline-flex; }
html[lang="en"] .stat-lbl-row.t-en-only { display: inline-flex; }

/* Bi-pair helper (rare; some legacy code uses it) */
.bi-pair > .bi-th, .bi-pair > .bi-sep, .bi-pair > .bi-en { display: none; }
html[lang="th"] .bi-pair > .bi-th { display: inline; }
html[lang="en"] .bi-pair > .bi-en { display: inline; }

/* ── Top bar (slim, sticky) ──────────────────────────── */
.fc-nav {
    background: var(--fc-dark);
    padding: 8px clamp(10px, 1.5vw, 20px);
    min-height: 60px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* keep the row tidy; right cluster has its own wrap */
    gap: var(--space-2);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
    border-bottom: 3px solid var(--fc-orange);
}
.fc-nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.brand-text { display: inline-flex; gap: 4px; }
.brand-text-sub { color: var(--fc-orange); }
.fc-brand {
    font-weight: 700;
    font-size: 1.125rem;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    letter-spacing: .2px;
}
.fc-brand span { color: var(--fc-orange); }
.brand-logo { height: 40px; width: auto; flex-shrink: 0; }
.fc-nav-system {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(238, 127, 43, .22);
    color: var(--fc-orange);
    border: 1px solid rgba(238, 127, 43, .45);
    border-radius: var(--r-sm);
    padding: 3px 9px;
    flex-shrink: 0;
}
.fc-nav-ver {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, .35);
    flex-shrink: 0;
}
.fc-uat-pill {
    /* Bright amber chip in the header so testers always know this is
       UAT, not production. Comes with a tooltip listing scope. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: white;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(217, 119, 6, .35);
    flex-shrink: 0;
}
/* (the canonical .fc-nav-right rule lives further down — kept above for backward compat) */

.user-pill {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 24px;
    padding: 6px 14px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.role-badge {
    background: rgba(238, 127, 43, .25);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fc-orange);
    font-weight: 700;
}
.logout-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .85);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.logout-btn:hover {
    background: rgba(238, 127, 43, .25);
    color: white;
    border-color: var(--fc-orange);
}

/* ── Language switcher (top nav) ───────────────────────── */
.lang-switch {
    display: inline-flex;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-sm);
    padding: 3px;
    gap: 2px;
}
.lang-btn {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 5px 11px;
    min-height: 32px;
    border-radius: 6px;
    transition: background .15s, color .15s;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}
.lang-btn:hover {
    color: white;
    background: rgba(238, 127, 43, .25);
}
.lang-btn.active {
    background: var(--fc-orange);
    color: white;
    box-shadow: 0 1px 4px rgba(238, 127, 43, .35);
}
.lang-btn.active:hover { background: var(--fc-orange-d); }

/* ══════════════════════════════════════════════════════
   APP SHELL — top bar (fc-nav, kept) + vertical sidebar
   + main content. Linear/Notion-style.
   ══════════════════════════════════════════════════════ */

/* ── Hamburger toggle in the top bar ─────────────────── */
.fc-hamburger {
    width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    border-radius: var(--r-sm);
    display: inline-flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.fc-hamburger:hover { background: rgba(238,127,43,.25); border-color: var(--fc-orange); }
.fc-hamburger span {
    display: block; width: 18px; height: 2px; background: white;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
html[data-sidebar="closed"] .fc-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
html[data-sidebar="closed"] .fc-hamburger span:nth-child(2) { opacity: 0; }
html[data-sidebar="closed"] .fc-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Shell layout ────────────────────────────────────── */
.fc-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 60px);     /* below the top bar */
    position: relative;
}

/* ── Sidebar (vertical nav) ──────────────────────────── */
.fc-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: white;
    border-right: 1px solid var(--fc-border);
    padding: 14px 10px 80px;
    position: sticky;
    top: 60px;                          /* below top bar */
    align-self: flex-start;
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform .25s ease, width .25s ease;
    z-index: 90;
}
html[data-sidebar="closed"] .fc-sidebar { width: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
html[data-sidebar="closed"] .fc-sidebar > * { opacity: 0; pointer-events: none; }

.fc-side-group { margin-bottom: 18px; }
.fc-side-group-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fc-text-mute);
    padding: 8px 14px 6px;
}

.fc-side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    min-height: 44px;
    color: var(--fc-text-dim);
    text-decoration: none;
    border-radius: var(--r-sm);
    margin: 1px 0;
    font-weight: 500;
    transition: background .12s, color .12s, padding-left .12s;
    position: relative;
    border-left: 3px solid transparent;
}
.fc-side-link .bi {
    font-size: 1.125rem;
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    opacity: .85;
}
.fc-side-link .fc-side-th {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fc-text);
    line-height: 1.2;
}
.fc-side-link .fc-side-en {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--fc-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    line-height: 1.2;
}
/* Stack th + en when locale is en — mirror */
.fc-side-link > .fc-side-th, .fc-side-link > .fc-side-en {
    display: inline-block;
}
html[lang="en"] .fc-side-link .fc-side-en {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fc-text);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0;
}
html[lang="en"] .fc-side-link .fc-side-th {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--fc-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    order: 2;
}

.fc-side-link:hover {
    background: var(--fc-orange-xl);
    color: var(--fc-orange-d);
    text-decoration: none;
}
.fc-side-link:hover .fc-side-th { color: var(--fc-orange-d); }
.fc-side-link:focus-visible {
    outline: 3px solid var(--fc-orange);
    outline-offset: -3px;
}

.fc-side-link.active {
    background: linear-gradient(90deg, var(--fc-orange-l) 0%, transparent 100%);
    border-left-color: var(--fc-orange);
    color: var(--fc-orange-d);
}
.fc-side-link.active .fc-side-th { color: var(--fc-orange-d); }
.fc-side-link.active .bi { opacity: 1; color: var(--fc-orange-d); }

.fc-side-footer {
    padding: 12px 14px 6px;
    color: var(--fc-text-mute);
    border-top: 1px solid var(--fc-border);
    margin-top: 12px;
}

/* ── Backdrop (mobile only) ──────────────────────────── */
.fc-backdrop {
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

/* ── Main content ────────────────────────────────────── */
.fc-main {
    flex: 1 1 auto;
    min-width: 0;                  /* let inner content shrink properly */
    max-width: 100%;
}

/* ── Responsive: drawer mode below 992px ─────────────── */
@media (max-width: 991.98px) {
    .fc-sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        height: auto;
        width: 280px !important;
        padding: 14px 10px 80px;
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
        z-index: 95;
    }
    html[data-sidebar="open"] .fc-sidebar {
        transform: translateX(0);
    }
    html[data-sidebar="open"] .fc-sidebar > * { opacity: 1; pointer-events: auto; }
    html[data-sidebar="open"] .fc-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    /* Even in "closed" CSS state the content shouldn't be offset */
    .fc-main { width: 100%; }
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 10px 18px;
    min-height: 44px;
    border-radius: var(--r-md);
    transition: background .15s, border-color .15s, color .15s, transform .05s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.btn:active { transform: translateY(1px); }
.btn-lg {
    font-size: 1.0625rem;
    padding: 14px 24px;
    min-height: 52px;
    border-radius: var(--r-md);
    font-weight: 600;
}
.btn-sm {
    font-size: 0.8125rem;
    padding: 6px 12px;
    min-height: 36px;
}
.btn-fc-primary {
    background: var(--fc-orange);
    border: 2px solid var(--fc-orange);
    color: white;
    font-weight: 600;
}
.btn-fc-primary:hover { background: var(--fc-orange-d); border-color: var(--fc-orange-d); color: white; }
.btn-fc-primary:focus-visible { outline: 3px solid rgba(238, 127, 43, .35); outline-offset: 2px; }

.btn-fc-outline {
    background: white;
    border: 2px solid var(--fc-border);
    color: var(--fc-text);
    font-weight: 500;
}
.btn-fc-outline:hover {
    background: var(--fc-orange-l);
    border-color: var(--fc-orange);
    color: var(--fc-orange-d);
}
.btn-fc-success {
    background: var(--fc-success);
    border: 2px solid var(--fc-success);
    color: white;
    font-weight: 600;
}
.btn-fc-success:hover { filter: brightness(.92); color: white; }

.btn-fc-danger {
    background: white;
    color: var(--fc-danger);
    border: 2px solid var(--fc-danger-bg);
    font-weight: 500;
}
.btn-fc-danger:hover {
    background: var(--fc-danger-bg);
    border-color: var(--fc-danger);
    color: var(--fc-danger);
}

/* ── Action buttons inside modals ────────────────────────
   Chunky, obviously-clickable buttons for the Patient-absent
   chooser modal (postpone / cancel) and the End-visit confirmation.
   Larger tap target, centered label, subtle press-down animation —
   the previous "card with subtitle" style read too much like a menu
   item and not enough like "click me to do X". */
.fc-action-btn {
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 56px;
    border-radius: 10px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.fc-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.fc-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
/* Cancel/danger variant inside an action-button context: solid red
   fill so the destructive action looks distinct from the orange
   primary on the same modal — no chance of mis-clicking the wrong
   one because both look the same. */
.btn-fc-danger.fc-action-btn {
    background: var(--fc-danger);
    color: white;
    border-color: var(--fc-danger);
}
.btn-fc-danger.fc-action-btn:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: white;
    filter: none;
}

/* ── Cards ───────────────────────────────────────────── */
.fc-card {
    background: white;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--fc-border-2);
    overflow: hidden;
}
.fc-card-header {
    background: var(--fc-orange-xl);
    padding: 14px 20px;
    border-bottom: 1px solid #f5dfc0;
    font-weight: 600;
    color: var(--fc-orange-d);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.fc-card-body { padding: 20px; }

/* The "do this next" hint card — most prominent CTA on each detail page */
.fc-next-step {
    background: linear-gradient(135deg, #fffaf3 0%, #ffe3c4 100%);
    border: 2px solid var(--fc-orange);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}
.fc-next-step-icon {
    width: 56px;
    height: 56px;
    background: var(--fc-orange);
    color: white;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    flex-shrink: 0;
}
.fc-next-step-body { flex: 1; min-width: 0; }
.fc-next-step-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fc-orange-d);
    margin: 0 0 4px;
}
.fc-next-step-desc { color: var(--fc-text-dim); margin: 0; font-size: 0.9375rem; }
.fc-next-step-action { flex-shrink: 0; }

/* ── Stat cards ──────────────────────────────────────── */
.stat-card {
    background: white;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--fc-border-2);
    border-left: 4px solid var(--fc-orange);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: box-shadow .2s, transform .15s, border-left-color .15s;
    text-decoration: none;
    color: inherit;
    min-height: 88px;
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.stat-icon {
    width: 52px; height: 52px;
    border-radius: var(--r-md);
    background: var(--fc-orange-l);
    color: var(--fc-orange-d);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.stat-val {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--fc-text);
}
.stat-lbl {
    font-size: 0.8125rem;
    color: var(--fc-text-mute);
    margin-top: 4px;
    letter-spacing: .2px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Tiny inline icon that can appear before the label text */
.stat-lbl-row { display: inline-flex; align-items: center; gap: 5px; }
.stat-lbl-row .bi { font-size: 0.875rem; opacity: .7; flex-shrink: 0; }

/* ── Hero ─────────────────────────────────────────────── */
.fc-hero {
    background: linear-gradient(160deg, #1a1a1a 0%, #2a1810 60%, #1e0f06 100%);
    padding: 28px 24px 24px;
    border-bottom: 4px solid var(--fc-orange);
    color: white;
}
.fc-hero h1 { color: white; font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; }
.fc-hero p { color: rgba(255, 255, 255, .78); font-size: 1rem; margin: 0; }

/* ── Forms ───────────────────────────────────────────── */
.form-control, .form-select {
    font-size: 1rem;
    padding: 11px 14px;
    min-height: 46px;
    border-radius: var(--r-md);
    border: 2px solid var(--fc-border);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--fc-orange);
    box-shadow: 0 0 0 4px rgba(238, 127, 43, .15);
    outline: none;
}
.form-label, .form-label-sm {
    font-size: 0.875rem;
    color: var(--fc-text-dim);
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}
.input-group-text {
    background: var(--fc-surface);
    border: 2px solid var(--fc-border);
    color: var(--fc-text-dim);
    font-size: 1rem;
    padding: 10px 14px;
}

/* ── State chips ─────────────────────────────────────── */
.state-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    letter-spacing: .2px;
}
.state-BOOK    { background: #ede9fe; color: #5b21b6; }
.state-INT     { background: #fed7aa; color: #9a3412; }
.state-SAL     { background: #fce7f3; color: #9d174d; }
.state-INS_CAD, .state-INS { background: #cffafe; color: #155e75; }
.state-INS_GCD { background: #c7d2fe; color: #3730a3; }
.state-INS_MFG { background: #e0e7ff; color: #4338ca; }
.state-SHO     { background: #fce7f3; color: #9d174d; }
.state-SHO_MFG { background: #fce7f3; color: #9d174d; }
.state-ASM     { background: #fef3c7; color: #92400e; }
.state-QC      { background: #d1fae5; color: #065f46; }
.state-HND     { background: #cffafe; color: #155e75; }
.state-DLV     { background: #dbeafe; color: #1e40af; }
.state-FIT     { background: #fae8ff; color: #6b21a8; }
.state-END     { background: #e5e7eb; color: #374151; }
.state-START   { background: #f3f4f6; color: #6b7280; }

/* Human-readable state block: big readable name + small code below */
.state-human {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.state-human-name { font-size: 0.9375rem; font-weight: 600; color: var(--fc-text); }
.state-human-code { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fc-text-mute); margin-top: 2px; }

/* ── HN + phone badges ───────────────────────────────── */
.badge-hn {
    background: var(--fc-success-bg);
    color: var(--fc-success);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: 3px 10px;
    border-radius: var(--r-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Section card (small detail block) ───────────────── */
.section-card {
    background: white;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--fc-border-2);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.section-header {
    background: var(--fc-orange-l);
    padding: 12px 18px;
    font-weight: 600;
    color: var(--fc-orange-d);
    font-size: 0.9375rem;
    border-bottom: 1px solid #f5dfc0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.section-body { padding: 16px 18px; }

.field-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--fc-text-mute);
    letter-spacing: .6px;
    margin-bottom: 4px;
    font-weight: 600;
}
.field-val {
    font-size: 0.9375rem;
    color: var(--fc-text);
    word-break: break-word;
    line-height: 1.5;
}
.field-val.empty { color: #cbd5e1; font-style: italic; }

/* ── Step rail (the intake/CAD progress strip) ─────────
   Visual pattern: white card, circles connected by a thick line,
   labels below. Done = green-filled with checkmark. Current =
   green-filled with number + small chevron above. Pending = white
   circle with grey border. The line between two circles is green
   when the LEFT circle is `.done` (transition has happened) and
   grey otherwise. Designed to match the e-commerce checkout-style
   progress trackers our team referenced. */
.step-rail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 22px 22px 16px;
    background: white;
    border: 1px solid var(--fc-border-2);
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.step-rail::-webkit-scrollbar { display: none; }

.step-item {
    flex: 1 0 auto;
    min-width: 88px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--fc-text-mute);
    white-space: normal;
    line-height: 1.3;
}

/* ── Connecting line ────────────────────────────────
   Lives as a ::after on each step-item, painting from the
   center of THIS circle to the center of the NEXT circle.
   Color depends on whether THIS step is done. */
.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;                    /* center of 34px circle = 17 */
    left: calc(50% + 22px);       /* edge of circle + a bit */
    right: calc(-50% + 22px);     /* extend to next circle's edge */
    height: 3px;
    background: #e5e7eb;
    z-index: 0;
}
.step-item.done:not(:last-child)::after {
    background: #16a34a;          /* fully green once this step is done */
}

/* ── Chevron above current step ("you are here" cue) ── */
.step-item.current::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #16a34a;
    transform: translateX(-50%);
}

/* ── Circle ───────────────────────────────────── */
.step-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    z-index: 1;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.step-item.done .step-num {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
}
.step-item.current .step-num {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
}
/* "Done but files pending upload" — yellow override for the scan
   steps when the visit advanced via the Skip path. Beats the green
   .done styling so reception spots the gap at a glance. */
.step-item.done.pending-files .step-num {
    background: #f59e0b;
    border-color: #d97706;
    color: white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}
.step-item.done.pending-files:not(:last-child)::after {
    background: #fcd34d;
}

/* ── Label tone ──────────────────────────────── */
.step-item.done    { color: var(--fc-text-mute); }
.step-item.current { color: var(--fc-text); font-weight: 700; }
.step-item.done.pending-files { color: #92400e; font-weight: 600; }

/* Optional secondary label (small English under primary Thai). */
.step-rail .step-sub {
    font-size: 10.5px;
    color: var(--fc-text-mute);
    font-weight: 400;
}

@media (max-width: 575.98px) {
    .step-rail { padding: 16px 12px 10px; }
    .step-item { min-width: 64px; font-size: 11px; }
    .step-num  { width: 28px; height: 28px; font-size: 11.5px; }
    .step-item:not(:last-child)::after {
        top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px);
    }
}

/* ── Appointment row action buttons ──────────────────────────
   All buttons in the action cell sit on the same 32px baseline so
   the row scans as a single visual unit. The primary (text+icon)
   button stays orange-filled — that's what signals "do this next" —
   but its padding is tightened so its rhythm matches the 32×32
   icon-only secondary buttons next to it.

   Tooltips are wired through `data-tooltip="…"` (see base.html);
   browser-native `title=""` is kept as accessibility fallback. */
.appt-actions {
    display: inline-flex; gap: 6px;
    align-items: center; flex-wrap: nowrap;
}
/* Every button in this row is 38px tall — generous touch target
   sized for tablets (Apple HIG / Material both ≥44pt, we land at
   38 because the row itself is dense and 44 wraps on phones). */
.appt-actions .btn {
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: background .12s, border-color .12s, transform .08s;
}
.appt-actions .btn:active { transform: scale(.96); }
.appt-actions .btn i { font-size: 14px; }
/* Icon-only buttons are square + chunkier so they read as
   "press me" instead of "decorative chip". */
.appt-actions .appt-icon-btn {
    width: 38px;
    padding: 0;
    justify-content: center;
    background: white;
    border: 1.5px solid var(--fc-border);
}
.appt-actions .appt-icon-btn i { font-size: 16px; }

/* Per-purpose icon tints + hover backgrounds — so the operator can
   pick the right action at a glance without reading the tooltip.
   The button surface stays neutral until hover; the icon carries
   the colour signal. */
.appt-actions .appt-icon-btn[data-tooltip*="follow-up"]:hover,
.appt-actions .appt-icon-btn[data-tooltip*="ติดตาม"]:hover {
    background: #f0fdf4;
    border-color: #86efac;
}
.appt-actions .appt-icon-btn[data-tooltip*="Postpone"]:hover,
.appt-actions .appt-icon-btn[data-tooltip*="เลื่อน"]:hover {
    background: #fff7ed;
    border-color: var(--fc-orange);
}
.appt-actions .appt-icon-btn[data-tooltip*="absent"]:hover,
.appt-actions .appt-icon-btn[data-tooltip*="ไม่มา"]:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}
/* Fallback for any other icon button (Undo etc.) */
.appt-actions .appt-icon-btn:hover {
    background: var(--fc-orange-xl);
    border-color: var(--fc-orange);
}

/* Subtle separator between the primary action (Check in / Start
   intake / Open / Undo) and the trio of secondary icon buttons. */
.appt-actions .btn + .appt-icon-btn {
    margin-left: 4px;
    position: relative;
}
.appt-actions .btn + .appt-icon-btn::before {
    content: '';
    position: absolute;
    left: -5px; top: 8px; bottom: 8px;
    width: 1px;
    background: var(--fc-border);
}
/* Bootstrap tooltip — match the brand palette. */
.tooltip-inner {
    background: var(--fc-text);
    color: white;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    max-width: 260px;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--fc-text); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--fc-text); }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--fc-text); }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--fc-text); }

/* ── Flash / alert ───────────────────────────────────── */
.alert-flash {
    padding: 14px 20px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: 0.9375rem;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    line-height: 1.5;
}
.alert-flash.alert-error,
.alert-flash.alert-danger {
    background: var(--fc-danger-bg);
    border-color: #fecaca;
    color: var(--fc-danger);
}
.alert-flash.alert-warning {
    background: var(--fc-warning-bg);
    border-color: #fde68a;
    color: var(--fc-warning);
}
.alert-flash.alert-success {
    background: var(--fc-success-bg);
    border-color: #a7f3d0;
    color: var(--fc-success);
}
.alert-flash.alert-info {
    background: var(--fc-info-bg);
    border-color: #bae6fd;
    color: var(--fc-info);
}

/* ── Tables ──────────────────────────────────────────── */
table.fc-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}
table.fc-table thead th {
    background: var(--fc-orange-l);
    color: #374151;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 2px solid var(--fc-border);
    border-top: 2px solid var(--fc-orange);
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}
table.fc-table tbody td {
    border-bottom: 1px solid var(--fc-border-2);
    padding: 14px 14px;
    font-size: 0.9375rem;
    vertical-align: middle;
}
table.fc-table tbody tr:hover {
    background: var(--fc-orange-l);
    box-shadow: inset 4px 0 0 var(--fc-orange);
}
table.fc-table tbody tr.row-link { cursor: pointer; }
table.fc-table tbody tr:nth-child(even) { background: var(--fc-surface-2); }
table.fc-table tbody tr:nth-child(even):hover { background: var(--fc-orange-l); }

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
}
.empty-state-icon {
    font-size: 3.5rem;
    color: var(--fc-border);
    margin-bottom: var(--space-3);
}
.empty-state-title {
    font-size: 1.125rem;
    color: var(--fc-text-dim);
    margin-bottom: var(--space-2);
    font-weight: 500;
}
.empty-state-desc {
    color: var(--fc-text-mute);
    font-size: 0.9375rem;
    margin-bottom: var(--space-4);
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Big decision buttons (one-click outcomes) ───────── */
.decision-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.decision-btn {
    background: white;
    border: 2px solid var(--fc-border);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .05s;
    width: 100%;
    color: var(--fc-text);
    text-decoration: none;
    display: block;
}
.decision-btn:hover {
    border-color: var(--fc-orange);
    background: var(--fc-orange-xl);
}
.decision-btn:active { transform: scale(.98); }
.decision-btn-icon {
    font-size: 1.5rem;
    color: var(--fc-orange-d);
    margin-bottom: 6px;
    display: block;
}
.decision-btn-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--fc-text);
}
.decision-btn-desc {
    font-size: 0.8125rem;
    color: var(--fc-text-mute);
    line-height: 1.4;
}
.decision-btn.primary {
    background: var(--fc-orange);
    border-color: var(--fc-orange);
}
.decision-btn.primary,
.decision-btn.primary .decision-btn-title,
.decision-btn.primary .decision-btn-desc,
.decision-btn.primary .decision-btn-icon {
    color: white;
}
.decision-btn.primary:hover { background: var(--fc-orange-d); border-color: var(--fc-orange-d); }
.decision-btn.success { border-color: var(--fc-success); }
.decision-btn.success .decision-btn-icon { color: var(--fc-success); }
.decision-btn.success:hover { background: var(--fc-success-bg); }
.decision-btn.danger { border-color: #fca5a5; }
.decision-btn.danger .decision-btn-icon { color: var(--fc-danger); }
.decision-btn.danger:hover { background: var(--fc-danger-bg); }

/* ──────────────────────────────────────────────────────
   Status pills — clearer than raw state codes, identical on every
   device. Icon is mandatory (use a <i class="bi …"> as first child or
   the empty-fallback rule below renders a generic dot).
   ────────────────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: .1px;
    vertical-align: middle;
    border: 1px solid transparent;       /* keeps height stable when bordered */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-pill .bi {
    font-size: 0.9375rem;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
/* Fallback: if author forgot the icon, emit a tiny dot so the pill
   visual is consistent — fulfils "every status has an icon". */
.status-pill:not(:has(> .bi))::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
    flex-shrink: 0;
}

.status-pill.pill-info     { background: var(--fc-info-bg);    color: var(--fc-info); }
.status-pill.pill-success  { background: var(--fc-success-bg); color: var(--fc-success); }
.status-pill.pill-warning  { background: var(--fc-warning-bg); color: var(--fc-warning); }
.status-pill.pill-danger   { background: var(--fc-danger-bg);  color: var(--fc-danger); }
.status-pill.pill-neutral  { background: #e5e7eb;              color: #374151; }
.status-pill.pill-walkin   { background: #fed7aa;              color: #9a3412; }

/* Three-variant appointment status pills (May 2026). Reception
   reads ALL of these in one glance, so they share the same
   "Done"/"Undone" wording but use colour to convey clean vs
   pending-files vs in-flight:
     • .pill-done-clean    — appt COMPLETED + all scans captured  (green)
     • .pill-done-pending  — appt COMPLETED + files still owed     (yellow)
     • .pill-undone        — appt CHECKED_IN / IN_PROGRESS         (grey) */
.status-pill.pill-done-clean   { background: #dcfce7; color: #166534; font-weight: 700; }
.status-pill.pill-done-pending { background: #fef3c7; color: #92400e; font-weight: 700; }
.status-pill.pill-undone       { background: #f3f4f6; color: #4b5563; font-weight: 600; }

/* Size variants — explicit so authors don't override with inline styles */
.status-pill.pill-sm { padding: 3px 9px;  font-size: 0.6875rem; gap: 4px; }
.status-pill.pill-sm .bi { font-size: 0.8125rem; }
.status-pill.pill-lg { padding: 8px 16px; font-size: 0.9375rem; gap: 8px; }
.status-pill.pill-lg .bi { font-size: 1.125rem; }

@media (max-width: 575px) {
    .status-pill { padding: 5px 9px; font-size: 0.75rem; }
    .status-pill .bi { font-size: 0.875rem; }
}
@media print {
    .status-pill { border: 1px solid currentColor !important; background: white !important; }
}

/* ── Rooms board (drag-and-drop Kanban) ──────────────── */
.rooms-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 1199px) { .rooms-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .rooms-board { grid-template-columns: 1fr; } }
.room-column {
    background: var(--fc-surface-2);
    border: 1px solid var(--fc-border);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
}
.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: white;
    border-bottom: 1px solid var(--fc-border);
}
.room-header.tone-neutral { background: linear-gradient(180deg, #f3f4f6, #ffffff); }
.room-header.tone-info    { background: linear-gradient(180deg, #e0f2fe, #ffffff); }
.room-header.tone-success { background: linear-gradient(180deg, #dcfce7, #ffffff); }
.room-header.tone-done    {
    background: linear-gradient(180deg, #16a34a, #15803d);
    color: white;
    border-bottom-color: #15803d;
}
.room-header.tone-done .room-title,
.room-header.tone-done .room-title-en { color: white; }
.room-header.tone-done .room-count { background: white; color: #15803d; }

/* "Done" column visually distinct — slight green tint + check ribbon */
.room-column:has(.room-header.tone-done) {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.room-column:has(.room-header.tone-done) .room-card {
    border-left-color: #16a34a;
    background: #f0fdf4;
    opacity: .92;
}
.room-column:has(.room-header.tone-done) .room-card:hover { opacity: 1; }
.room-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--fc-text);
    display: block;
}
.room-title-en {
    font-size: 0.75rem;
    color: var(--fc-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.room-count {
    background: var(--fc-orange);
    color: white;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.875rem;
    min-width: 32px;
    text-align: center;
}
.room-dropzone {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 280px;
    transition: background .15s, box-shadow .15s;
}
.room-dropzone.over {
    background: var(--fc-orange-l);
    box-shadow: inset 0 0 0 2px var(--fc-orange);
}
.room-card {
    background: white;
    border: 1px solid var(--fc-border);
    border-left: 4px solid var(--fc-orange);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: grab;
    transition: transform .12s, box-shadow .12s, border-color .12s;
    user-select: none;
    touch-action: none;
}
.room-card:hover {
    border-left-color: var(--fc-orange-d);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transform: translateY(-1px);
}
.room-card:active { cursor: grabbing; }
.room-card.dragging {
    opacity: .45;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.room-card-time {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fc-text);
}
.room-card-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--fc-text);
    margin: 4px 0 2px;
    line-height: 1.3;
}
.room-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.room-card-reason {
    font-size: 0.875rem;
    color: var(--fc-text-dim);
    margin-top: 4px;
    line-height: 1.4;
}
.room-card-manual {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.room-card-manual .btn {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-height: 32px;
}
.room-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--fc-text-mute);
    border: 2px dashed var(--fc-border);
    border-radius: var(--r-md);
    background: white;
}

/* ── Full-width main wrap (matches clinic.hansasuta) ─── */
.fc-main-wrap {
    max-width: none !important;
    width: 100%;
    padding-left: clamp(12px, 2vw, 28px);
    padding-right: clamp(12px, 2vw, 28px);
}

/* ── Misc ────────────────────────────────────────────── */
.text-fc-orange { color: var(--fc-orange-d); }
.text-fc-dim    { color: var(--fc-text-dim); }
.text-fc-mute   { color: var(--fc-text-mute); }
.text-fc-success { color: var(--fc-success); }
.text-fc-danger  { color: var(--fc-danger); }
.bg-fc-surface  { background: var(--fc-surface); }
.bg-fc-orange-l { background: var(--fc-orange-l); }
.border-fc { border: 1px solid var(--fc-border); }

a { color: var(--fc-orange-d); text-decoration: none; transition: color .15s; }
a:hover { color: var(--fc-orange); text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--fc-surface);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--fc-text);
}

/* On the dark hero (and any other dark surface that opts in), the
   default light-orange `<code>` background reads as a stray
   highlight blob. Swap it for a subtle translucent-white chip so the
   code text stays readable but doesn't shout. The inline color="…"
   sprinkled across templates (`#ffd9b3`, brand orange-tint) lands on
   top and is preserved. */
.fc-hero code,
.fc-hero-dark code {
    background: rgba(255, 255, 255, 0.10);
    color: inherit;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 500;
}

/* ── Responsive (tablet + phone) ─────────────────────── */
@media (max-width: 767px) {
    .fc-hero { padding: 22px 18px 18px; }
    .fc-hero h1 { font-size: 1.375rem; }
    h1, .h1 { font-size: 1.375rem; }
}
@media (max-width: 900px) {
    .fc-nav-system, .fc-nav-ver { display: none; }
}
@media (max-width: 575px) {
    .fc-nav { min-height: auto; gap: 6px; padding: 8px 12px; }
    .fc-brand { font-size: 0.9375rem; gap: 8px; }
    .fc-brand span { display: none; }              /* hide " WFS" suffix */
    .brand-text-sub { display: none; }             /* same intent for the new class */
    .brand-logo { height: 30px; }
    .user-pill { padding: 4px 10px; font-size: 0.75rem; }
    .user-pill .full-name { display: none; }
    .role-badge { display: none; }
    .lang-switch { padding: 2px; }
    .lang-btn { padding: 4px 9px; min-height: 28px; font-size: 0.75rem; }
    .logout-btn { padding: 6px 10px; min-height: 36px; font-size: 0.8125rem; }
    .logout-btn span { display: none; }            /* icon only on phones */
    .stat-card { padding: 14px 16px; gap: 12px; min-height: 72px; }
    .stat-icon { width: 44px; height: 44px; font-size: 1.25rem; }
    .stat-val { font-size: 1.5rem; }
    .fc-card-body { padding: 16px; }
    .fc-next-step { padding: 16px; gap: 12px; flex-direction: column; align-items: flex-start; }
    .fc-next-step-icon { width: 44px; height: 44px; font-size: 1.25rem; }
    .fc-next-step-title { font-size: 1rem; }
    .fc-next-step-action { width: 100%; }
    .fc-next-step-action .btn { width: 100%; }
    .btn-lg { font-size: 1rem; padding: 12px 18px; min-height: 48px; }
    /* Tables: let them scroll horizontally inside a wrapper instead of overflowing the page */
    .fc-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.fc-table { min-width: 600px; }
}

/* Print: hide nav and footer */
@media print {
    .fc-nav, .fc-subnav, .logout-btn, footer { display: none !important; }
    .fc-hero { background: white; color: black; border: none; }
}