/* ================================================================
   Vita IVF — Unified Design System v6
   Design Language: Tab 19 Cycle Timeline aesthetic
   - Clean category-coded cards (tinted bg + matching border)
   - Minimal shadows, precise typography
   - Fluid responsive layout for all screen sizes
   ================================================================ */

/* ==================== 1. DESIGN TOKENS ==================== */
:root {
    /* Layout */
    --topbar-h: 56px;
    --sidebar-w: 42px;
    --content-pad: 24px;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Brand accent — Indigo-500 */
    --brand: #6366f1;
    --brand-hover: #4f46e5;
    --brand-light: #eef2ff;
    --brand-border: #c7d2fe;

    /* Colors — Primary palette */
    --ink: #0f172a;
    --ink-secondary: #475569;
    --ink-muted: #94a3b8;
    --ink-faint: #cbd5e1;
    --surface: #ffffff;
    --surface-dim: #f8fafc;
    --surface-muted: #f1f5f9;
    --border: #e2e8f0;
    --border-subtle: #f1f5f9;

    /* Category colors (from cycle timeline) */
    --cat-green-bg: #f0fdfa;
    --cat-green-text: #065f46;
    --cat-green-border: #a7f3d0;
    --cat-green-accent: #10b981;

    --cat-yellow-bg: #fffbeb;
    --cat-yellow-text: #92400e;
    --cat-yellow-border: #fde68a;
    --cat-yellow-accent: #f59e0b;

    --cat-red-bg: #fff1f2;
    --cat-red-text: #9f1239;
    --cat-red-border: #fecdd3;
    --cat-red-accent: #f43f5e;

    --cat-purple-bg: #f5f3ff;
    --cat-purple-text: #5b21b6;
    --cat-purple-border: #ddd6fe;
    --cat-purple-accent: #8b5cf6;

    --cat-blue-bg: #eff6ff;
    --cat-blue-text: #1e40af;
    --cat-blue-border: #bfdbfe;
    --cat-blue-accent: #3b82f6;

    --cat-slate-bg: #f8fafc;
    --cat-slate-text: #1e293b;
    --cat-slate-border: #e2e8f0;
    --cat-slate-accent: #475569;

    /* Shadows — light & controlled */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
    --shadow-float: 0 8px 24px -6px rgb(0 0 0 / 0.15);

    /* Timing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ===== DESIGN SYSTEM v7 (2026-05-31) — additive only; legacy --cat-* / hex untouched ===== */
    /* Semantic color aliases — new code uses these (map §1.1 语义 → --cat-*) */
    --success-bg: var(--cat-green-bg);   --success-text: var(--cat-green-text);   --success-border: var(--cat-green-border);   --success-accent: var(--cat-green-accent);
    --warning-bg: var(--cat-yellow-bg);  --warning-text: var(--cat-yellow-text);  --warning-border: var(--cat-yellow-border);  --warning-accent: var(--cat-yellow-accent);
    --danger-bg: var(--cat-red-bg);      --danger-text: var(--cat-red-text);      --danger-border: var(--cat-red-border);      --danger-accent: var(--cat-red-accent);
    --info-bg: var(--cat-blue-bg);       --info-text: var(--cat-blue-text);       --info-border: var(--cat-blue-border);       --info-accent: var(--cat-blue-accent);
    --lab-bg: var(--cat-purple-bg);      --lab-text: var(--cat-purple-text);      --lab-border: var(--cat-purple-border);      --lab-accent: var(--cat-purple-accent);
    --neutral-bg: var(--cat-slate-bg);   --neutral-text: var(--cat-slate-text);   --neutral-border: var(--cat-slate-border);   --neutral-accent: var(--cat-slate-accent);

    /* Fonts (§7) */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-brand: 'Cormorant Garamond', Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Table density (§5) */
    --dt-pad: 8px 12px;          --dt-fs: 12px;
    --dt-pad-cozy: 12px 14px;    --dt-fs-cozy: 13px;
    --dt-pad-compact: 4px 8px;   --dt-fs-compact: 11.5px;

    /* List rows (§10) */
    --row-h: 40px;   --row-h-dense: 32px;   --list-gap: 16px;
}


/* ==================== DESIGN SYSTEM v7 — Buttons (§2) ====================
   Generic button system: .btn--{variant} + .btn--{size}  (+ optional .btn-icon / .is-loading).
   Base styles live on the GROUPED .btn--* selectors (NOT bare .btn), so the legacy
   single-dash .btn-* buttons (≈242 in app) are completely unaffected — zero regression.
   Markup: <button class="btn btn--primary btn--md">  (the `btn` class is decorative here). */
:is(.btn--primary,.btn--secondary,.btn--outline,.btn--ghost,.btn--danger,.btn--danger-outline) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--font-sans); font-weight: 600; line-height: 1;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
    padding: 8px 16px; font-size: 14px; min-height: 36px;   /* default = md */
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease,
                border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease;
}
:is(.btn--primary,.btn--secondary,.btn--outline,.btn--ghost,.btn--danger,.btn--danger-outline):focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}
:is(.btn--primary,.btn--secondary,.btn--outline,.btn--ghost,.btn--danger,.btn--danger-outline):is(:disabled,[disabled],.is-disabled) {
    opacity: .5; cursor: not-allowed; pointer-events: none;
}
/* variants */
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--secondary { background: var(--surface-muted); color: var(--ink-secondary); border-color: var(--border); }
.btn--secondary:hover { background: var(--surface); color: var(--ink); }
.btn--outline { background: var(--surface); color: var(--brand-hover); border-color: var(--brand-border); }
.btn--outline:hover { background: var(--brand-light); }
.btn--ghost { background: transparent; color: var(--ink-secondary); }
.btn--ghost:hover { background: var(--surface-muted); color: var(--ink); }
.btn--danger { background: var(--danger-accent); color: #fff; border-color: var(--danger-accent); }
.btn--danger:hover { filter: brightness(0.93); }
.btn--danger-outline { background: var(--surface); color: var(--danger-text); border-color: var(--danger-border); }
.btn--danger-outline:hover { background: var(--danger-bg); }
/* sizes */
.btn--sm { padding: 6px 12px; font-size: 12px; min-height: 28px; }
.btn--md { padding: 8px 16px; font-size: 14px; min-height: 36px; }
.btn--lg { padding: 12px 20px; font-size: 15px; min-height: 44px; }
/* icon-only round (§2.3) */
.btn-icon { padding: 0; border-radius: var(--radius-full); gap: 0; }
.btn-icon.btn--sm { width: 28px; height: 28px; min-height: 0; }
.btn-icon.btn--md { width: 36px; height: 36px; min-height: 0; }
.btn-icon.btn--lg { width: 44px; height: 44px; min-height: 0; }
/* loading (§2.3) — spinner replaces label, width unchanged (no layout shift) */
:is(.btn--primary,.btn--secondary,.btn--outline,.btn--ghost,.btn--danger,.btn--danger-outline).is-loading {
    color: transparent !important; position: relative; pointer-events: none;
}
:is(.btn--primary,.btn--secondary,.btn--outline,.btn--ghost,.btn--danger,.btn--danger-outline).is-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border: 2px solid rgba(100,116,139,.35); border-top-color: var(--ink-secondary);
    border-radius: 50%; animation: ds-btn-spin .6s linear infinite;
}
:is(.btn--primary,.btn--danger).is-loading::after { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
@keyframes ds-btn-spin { to { transform: rotate(360deg); } }


/* ==================== 2. RESET & BASE ==================== */
html {
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--surface-dim);
    scrollbar-gutter: stable;
    overflow-y: scroll;
    /* Kill macOS/Electron rubber-band overscroll: at the scroll extremes the
     * bounce shifts sticky chrome (KPI strip + table headers) against the
     * fixed topbar, which read as a "twitch". none = no bounce, no twitch. */
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.5;
}

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

input, select, textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    outline: none;
}

button {
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-fast) ease,
                color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease,
                transform var(--duration-fast) ease;
}

button:active {
    transform: scale(0.97);
}

/* Prevent text selection on all interactive elements */
button, .btn, .btn-new, [role="button"],
.sidebar-item, .tab-item, .nav-item,
.toolbar-btn, .toolbar-chip, .toolbar-select,
.save-icon-btn, .modal-close,
a.action-link, .accordion-header, .type-tag {
    user-select: none;
    -webkit-user-select: none;
}


/* ==================== 3. TABLES — Premium Clean Style ==================== */
table {
    border-collapse: collapse;
    overflow: hidden;
}

th, td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

#contentArea table {
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

#contentArea thead {
    background: var(--surface-dim);
}

#contentArea thead th {
    background: var(--surface-dim);
    color: var(--ink-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

#contentArea tbody tr {
    transition: background var(--duration-fast) ease;
}

#contentArea tbody tr:hover {
    background: rgba(248, 250, 252, 0.6);
}

#contentArea td {
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--ink-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

#contentArea td:first-child {
    color: var(--ink);
    font-weight: 500;
}

#contentArea tbody tr:last-child td {
    border-bottom: none;
}

#contentArea td:last-child {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
}

/* Modal tables — no outer styling */
.modal table {
    background: white !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* GlassGrid override — prevent #contentArea styles from breaking data grids */
#contentArea .data-table td:last-child {
    display: table-cell !important;
    padding: 8px 12px !important;
    gap: 0 !important;
}
#contentArea .data-table td,
#contentArea .data-table th {
    display: table-cell !important;
}
#contentArea .data-table tbody tr:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
}


/* ==================== 4. CARDS — Unified Clean Style ==================== */
.bg-white.shadow,
.bg-white.rounded-2xl {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}


/* ==================== 5. BUTTONS ==================== */

/* Primary / Secondary / Danger-outline CTAs — migrated to the .btn--* variant
   system in Step 5 (see §"Generic button system" above). The old single-dash
   .btn-primary / .btn-secondary / .btn-danger-outline rules were removed here
   after all global usages moved to .btn--{variant}; 0 remaining usages.
   (Specialised .btn-action / .btn-edit / .btn-row / .btn-new etc. below stay.) */

/* Text-link style table actions (Linear-style) */
.btn-action {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-muted);
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
    box-shadow: none;
    cursor: pointer;
}
.btn-action:hover {
    color: var(--ink);
    background: var(--surface-muted);
}

/* Sperm Records "Screening" column — infectious-disease verdict icon + the
   floating hover card that breaks down the four rapid tests. Icon matches the
   .btn-action naked-icon look (15px Lucide glyph) but isn't a button. */
.cryo-screen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}
.cryo-screen-icon svg { width: 16px; height: 16px; }
.cryo-screen-tip {
    position: fixed;
    z-index: 11000;
    pointer-events: none;
    min-width: 158px;
    padding: 10px 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    font-size: 12px;
    line-height: 1.4;
}
.cryo-screen-tip .cst-head { font-weight: 700; margin-bottom: 6px; }
.cryo-screen-tip .cst-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 0;
}
.cryo-screen-tip .cst-k { color: var(--ink-secondary, #475569); }
.cryo-screen-tip .cst-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.cryo-screen-tip .cst-sub {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle, #eef2f6);
    color: var(--ink-faint, #94a3b8);
    font-size: 11px;
}

.btn-edit { color: var(--ink-secondary); }
.btn-edit:hover { color: var(--ink); background: var(--surface-muted); }

.btn-appointment { color: var(--brand); }
.btn-appointment:hover { color: var(--brand-hover); background: var(--brand-light); }

.btn-delete { color: #ef4444; background: none; border: none; }
.btn-delete:hover { color: #dc2626; background: #fef2f2; }

.btn-view-rating { color: var(--ink-secondary); }
.btn-view-rating:hover { color: var(--ink); background: var(--surface-muted); }

.btn-detail {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    background: var(--surface-muted);
    color: var(--ink-secondary);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
}
.btn-detail:hover { background: var(--ink); color: white; border-color: var(--ink); }

/* Case table action buttons */
#caseTable tbody td:last-child {
    display: flex !important;
    align-items: center;
    gap: 2px;
    padding: 8px 12px !important;
    height: auto !important;
}

#caseTable .btn-edit,
#caseTable .btn-delete,
#caseTable .btn-action,
#patientTableBody .btn-edit,
#patientTableBody .btn-appointment {
    margin: 0;
    height: 28px;
    line-height: 28px;
}

/* New record button — compact slate */
.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: white;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-new:hover { background: #1e293b; }
.btn-new::before { content: '+'; font-size: 16px; font-weight: 400; line-height: 1; }

/* Circle add button (legacy, keep for backward compat) */
.btn-circle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    border: none;
    transition: background var(--duration-fast) ease;
    flex-shrink: 0;
}
.btn-circle::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: white;
    line-height: 1;
}
.btn-circle:hover {
    background: #1e293b;
}

/* Icon-only secondary button */
.btn-icon-secondary {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--ink-muted);
    cursor: pointer;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.btn-icon-secondary:hover { color: var(--ink-secondary); background: var(--surface-muted); }


/* ==================== 6. SEARCH & DATE CONTROLS ==================== */

.expandable-search {
    --search-default-width: 42px;
    --search-expanded-width: 340px;
    position: relative;
    display: flex;
    align-items: center;
    width: var(--search-default-width);
    height: 42px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: width var(--duration-slow) var(--ease-out);
    cursor: pointer;
}
.expandable-search:hover,
.expandable-search.expanded {
    width: var(--search-expanded-width);
}

.expandable-search .search-icon {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity var(--duration-normal) ease;
}
.expandable-search .search-icon img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}
.expandable-search.expanded .search-icon img {
    opacity: 0;
    transform: scale(0.7);
}

.expandable-search .search-input {
    flex: 1;
    height: 100%;
    padding-left: 0;
    padding-right: 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    opacity: 0;
    transition: padding-left var(--duration-slow) var(--ease-out),
                opacity var(--duration-normal) ease;
}
.expandable-search.expanded .search-input {
    padding-left: 44px;
    opacity: 1;
}
.expandable-search .search-input:focus {
    box-shadow: none;
}

/* Date picker control */
.expandable-date {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-dim);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: width var(--duration-slow) var(--ease-out);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.expandable-date.expanded {
    width: 240px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: var(--radius-full);
}
.expandable-date .date-icon {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    z-index: 2;
}
.expandable-date .date-input {
    position: absolute;
    left: 48px;
    width: 160px;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    padding: 0 36px 0 14px;
    font-size: 13px;
    height: 36px;
    box-shadow: var(--shadow-xs);
}
.expandable-date.expanded .date-input { opacity: 1; }

.expandable-date .date-clear {
    position: absolute;
    right: 10px;
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
    font-size: 16px;
    color: var(--ink-muted);
    background: none;
    border: none;
}
.expandable-date.expanded .date-clear { opacity: 1; }


/* ==================== 7. FLATPICKR CALENDAR ==================== */
.flatpickr-calendar {
    width: 300px !important;
    transform: translate(-100px, 10px) !important;
    font-size: 11px !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xl) !important;
    background: var(--surface) !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
}
.flatpickr-months {
    padding: 4px 8px !important;
    height: 36px !important;
}
.flatpickr-weekdays { padding: 2px 4px !important; }
.flatpickr-weekday { font-size: 9.5px !important; line-height: 1 !important; }
.flatpickr-days {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 3px !important;
    gap: 1px !important;
}
.flatpickr-day {
    flex: 0 0 calc(14.2857% - 2px) !important;
    max-width: calc(14.2857% - 2px) !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
    margin: 0 !important;
    text-align: center;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brand) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
}
.flatpickr-day.today {
    border: 2px solid var(--brand) !important;
}


/* ==================== 8. TOP BAR — Dark Theme ==================== */
#topBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
}

.top-bar-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px 0 calc(var(--sidebar-w) + 20px);
    justify-content: space-between;
    gap: 16px;
}

/* Page title — left side */
#topBarPageTitle {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Right side controls */
#topBarRight {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

#currentRoleDisplay {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(0,0,0,0.45);
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* User avatar circle */
.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid rgba(99,102,241,0.3);
    position: relative;
}
.topbar-avatar:hover { opacity: 0.9; }

/* Dropdown from avatar */
.topbar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    min-width: 160px;
    padding: 4px;
    z-index: 9999;
    display: none;
}
.topbar-dropdown.open { display: block; }
.topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: rgba(0,0,0,0.55);
    border-radius: var(--radius-xs);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background var(--duration-fast) ease;
}
.topbar-dropdown-item:hover { background: rgba(0,0,0,0.04); color: #1a1a1a; }
.topbar-dropdown-item.danger:hover { background: rgba(239,68,68,0.06); color: #ef4444; }

#signOutBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(0,0,0,0.4);
    background: transparent;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}
#signOutBtn:hover { color: #ef4444; border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.05); }

#signOutIcon { flex-shrink: 0; width: 15px; height: 15px; color: inherit; }
#signOutText { display: inline; }

/* Legacy logo elements — hidden in new design */
#topBarLogoIcon, #topBarLogoText, #dailyJokeBubble { display: none !important; }


/* ==================== 9. SIDEBAR — Dark Ultra-narrow icon strip ==================== */
#sidebar {
    position: fixed !important;
    left: 0 !important;
    top: var(--topbar-h) !important;
    width: var(--sidebar-w) !important;
    height: calc(100vh - var(--topbar-h)) !important;
    overflow: visible !important;
    background: #0f0f0f;
    z-index: 100 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    display: flex;
    flex-direction: column;
}

/* Logo area — compact mark only */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-logo-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(99,102,241,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818cf8;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Logo text — permanently hidden */
.sidebar-logo-text {
    display: none !important;
}

.sidebar-nav {
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow: hidden;
}

/* Sidebar item — permanently narrow, icon-only */
.sidebar-item {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    overflow: visible;
    white-space: nowrap;
    background: transparent;
    z-index: 1;
    cursor: pointer;
    border: none;
    border-left: 2px solid transparent;
    transition: background var(--duration-fast) ease,
                border-color var(--duration-fast) ease;
}

.sidebar-item:hover {
    background: rgba(255,255,255,0.06);
}
.sidebar-item.active {
    background: rgba(99,102,241,0.12);
    border-left-color: #818cf8;
}
.sidebar-item.active .sidebar-icon-wrap svg { color: #818cf8; }
.sidebar-item.active .sidebar-label { color: #818cf8; font-weight: 600; }

/* Legacy blue active classes — map to new brand */
.sidebar-item.bg-blue-50 {
    background: rgba(99,102,241,0.12) !important;
    border-left-color: #818cf8 !important;
}
.sidebar-item.text-blue-600 { color: #818cf8 !important; }

.sidebar-icon-wrap {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-icon-wrap svg {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.4);
    transition: color var(--duration-fast) ease;
}
.sidebar-item:hover .sidebar-icon-wrap svg { color: rgba(255,255,255,0.7); }

/* Label — permanently hidden in narrow mode */
.sidebar-label {
    display: none !important;
}

/* Tooltip — always show on hover (sidebar never expands) */
.sidebar-tooltip {
    position: absolute;
    left: calc(var(--sidebar-w) - 2px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: opacity var(--duration-fast) ease;
}
.sidebar-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-right-color: #1a1a1a;
}
.sidebar-item:hover .sidebar-tooltip { opacity: 1; }

/* Bottom section */
.sidebar-bottom {
    padding: 4px 4px 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-role-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.sidebar-role-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #818cf8;
    flex-shrink: 0;
}
/* Role text — permanently hidden */
.sidebar-role-text {
    display: none !important;
}

/* ==================== Today Reminders widget (sidebar bottom) ==================== */
.sidebar-reminders {
    padding: 5px 4px 2px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.sidebar-reminder-row {
    position: relative;
    width: 34px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    cursor: default;
    transition: background var(--duration-fast) ease;
}
.sidebar-reminder-row:hover {
    background: rgba(255,255,255,0.06);
}
/* Reuse sidebar-icon-wrap inside reminder rows — needs relative for badge overlay */
.sidebar-reminder-row .sidebar-icon-wrap {
    position: relative;
    width: 34px;
    height: 34px;
}
/* Inherit hover colour from sidebar-item rule equivalent */
.sidebar-reminder-row:hover .sidebar-icon-wrap svg {
    color: rgba(255,255,255,0.65);
}
.sidebar-reminder-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    letter-spacing: -0.02em;
    box-sizing: border-box;
    line-height: 1;
    pointer-events: none;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.sidebar-reminder-count.has-items {
    background: var(--badge-color, #818cf8);
    color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.sidebar-reminder-count.zero {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.25);
}
/* Tooltip reuse */
.sidebar-reminder-row .sidebar-tooltip {
    font-size: 11px;
    white-space: nowrap;
}

/* ==================== 10. CONTENT AREA — Fluid Responsive ==================== */
#contentArea {
    box-sizing: border-box;
    scrollbar-gutter: stable;
    margin-left: var(--sidebar-w) !important;
    margin-top: var(--topbar-h) !important;
    padding: 24px 28px !important;
    min-height: calc(100vh - var(--topbar-h));
    background: var(--surface-dim);
    border-radius: 0 !important;
    overflow-x: clip;   /* prevent horizontal scroll without breaking position:sticky */
}

/* Fix the wide-screen blank space issue */
#contentArea > .tab-content {
    max-width: 100%;
}

/* Override max-w-screen-2xl to use fluid width */
.max-w-screen-2xl {
    max-width: 100% !important;
}

/* Responsive container scaling */
@media (min-width: 1920px) {
    #contentArea { padding: 28px 40px !important; }
}
@media (max-width: 1440px) {
    #contentArea { padding: 20px 24px !important; }
}
@media (max-width: 1280px) {
    #contentArea { padding: 16px 20px !important; }
    #contentArea thead th { font-size: 10px; }
    #contentArea td { font-size: 12.5px; }
}


/* ==================== 11. LOGIN SCREEN — Light Premium Theme ==================== */
/* Aligned with the main app design language: surface-dim canvas, white floating
   card, Inter typography, --ink CTA. The indigo brand mark stays — that gradient
   is the one piece of visual continuity from the previous dark version. */
#loginScreen {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--surface-dim) !important;
    background-image:
        radial-gradient(ellipse 70% 55% at 50% 32%, rgba(99,102,241,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 82% 86%, rgba(99,102,241,0.04) 0%, transparent 60%) !important;
}
#loginScreen.hidden {
    display: none !important;
}
#loginScreen .login-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 auto 22px;
    box-shadow:
        0 10px 30px -8px rgba(99,102,241,0.45),
        0 4px 12px -2px rgba(99,102,241,0.18),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
#loginScreen h1 {
    font-size: 26px !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: 0.02em;
    text-shadow: none !important;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}
#loginScreen .login-subtitle {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 6px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
#loginScreen .footer-text,
#loginScreen p[data-i18n="footer_text"] {
    color: var(--ink-faint) !important;
}

.tab-button { transition: all 200ms; }
.tab-button.active { border-bottom: 3px solid var(--brand); color: var(--brand); }

/* ==================== 11b. KPI CARDS — Premium Style ==================== */
.kpi-card {
    background: var(--surface);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) ease;
    min-width: 0;
}
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -1px;
}
.kpi-trend {
    font-size: 11.5px;
    margin-top: 6px;
    color: var(--ink-muted);
}

/* ── Hover-popover shared timing (doc KPI menu, sparkline tip, etc.) ── */
:root {
    --hover-popover-hide-delay: 180ms;
    --hover-popover-fade: 120ms;
}

/* ── Patient cockpit spark-chart tooltip ── */
/* Invisible bridge fills the 6px gap above the chip so rapid pointer moves don't drop hover. */
.ck-spark-host { position: relative; }
.ck-spark-host::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
}
.ck-spark-tip {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hover-popover-fade) ease var(--hover-popover-hide-delay),
                visibility 0s linear calc(var(--hover-popover-fade) + var(--hover-popover-hide-delay));
}
.ck-spark-host:hover .ck-spark-tip {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--hover-popover-fade) ease,
                visibility 0s linear;
}

/* ── Doctor KPI mega-menu dropdowns ── */
.doc-mega-wrap { position: relative; }
/* Invisible bridge covering the 8px gap so hover stays alive when moving to the menu. */
.doc-mega-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}
.doc-mega-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    padding: 16px;
    z-index: 100;
    max-height: 420px;
    overflow-y: auto;
    min-width: 320px;
    transition: opacity var(--hover-popover-fade) ease var(--hover-popover-hide-delay),
                visibility 0s linear calc(var(--hover-popover-fade) + var(--hover-popover-hide-delay));
}
.doc-mega-wrap:hover .doc-mega-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--hover-popover-fade) ease,
                visibility 0s linear;
}
/* Cells vertically centred — keeps text baselines aligned with pills/badges. */
.doc-mega-menu table td,
.doc-mega-menu table th {
    vertical-align: middle;
}

/* ── Prescription dialog form fields ── */
.rx-label {
    display: block; font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.rx-input {
    width: 100%; padding: 11px 14px; font-size: 14px; color: #1e293b;
    background: white; border: 1.5px solid #e2e8f0; border-radius: 12px;
    box-sizing: border-box; font-family: inherit;
    transition: all 0.18s ease;
}
.rx-input:focus {
    outline: none; border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.kpi-trend.up { color: #10b981; }
.kpi-trend.highlight { color: var(--brand); }

/* ==================== 11c. STICKY TABLE TOOLBAR ==================== */
.table-toolbar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 40;
    background: rgba(255, 255, 255, 1.0);
    border-bottom: 1px solid var(--border);
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    margin: -24px -28px 20px;
    transition: box-shadow var(--duration-fast) ease;
}
.table-toolbar.stuck {
    box-shadow: var(--shadow-sm);
}

/* ==================== 11d. STICKY TABLE HEADER (Receptionist tables) ==================== */
/*
 * Patient Management (#patientJourneyView) 与 Appointments & Follow-up (#tabContent14) 的表头
 * 在页面滚动时保持贴在 toolbar 下沿,初始视觉位置完全不变。
 *
 * 定位: top = topbar(56px) + table-toolbar(52px) = 108px,让 thead 接在 toolbar 正下方。
 * z-index 30: 低于 toolbar(40),避免 toolbar 被表头盖住;高于行内容。
 *
 * overflow clip: 父 table 原本是 overflow:hidden,会在 sticky 链路上被当作 scroll ancestor,
 * 导致 thead 只能 sticky 在 table 内部(table 本身不滚动) → sticky 实际失效。
 * 换成 overflow:clip 同样裁剪边角,但不创建 scroll container,sticky 正常生效。
 * 仅作用于这两张表,不动全局 #contentArea table 规则。
 *
 * box-shadow: 部分浏览器 sticky 滚动时 th 的 border-bottom 会被 tbody 行覆盖,
 * 用 inset 0 -1px 同色兜底,肉眼与原 border-bottom 重合,不产生第二条线。
 */
#patientJourneyView > table,
#tabContent14 > table,
#labImportReviewView > table,
#allEmbryoCasesView > table,
#allCyclesView > table,
#transferScheduleBody > table,
#ultrasoundAllCyclesView > table,
#ultrasoundCarriersView > table,
#tabContent99 > table,
#tabContent116 > table,
#tabContent117 > table,
#doctorConsultCyclesBody > table {
    overflow: clip;
    /*
     * 关键: border-collapse:collapse 下 th 的 border-bottom 与 tbody 第一行 td 的 border-top
     * 会合并到邻接线,sticky 激活/解除瞬间浏览器会重新分配这条合并边框的归属,
     * 导致 thead 高度抖动 1 像素("缩了一下")。
     * 这两张表的 th/td 都只写了 border-bottom,没有 left/right/top,
     * 切成 separate+spacing:0 视觉完全一致,且每个 cell 的边框独立不再合并 → 不抖。
     */
    border-collapse: separate;
    border-spacing: 0;
}

/*
 * 把 toolbar 和 table 之间的间距收窄 —— 相当于"表+表头整体上移"。
 *
 * 关键:margin-bottom = 7 而不是 8 是有意的 1px 差值。配合下方 thead sticky top = 116,
 * 让 thead 的自然位置(y=115)永远 < sticky top(y=116) → 从 scroll=0 开始 thead 就始终处于
 * "已粘"状态,没有"未粘 ↔ 已粘"的临界切换。
 *
 * 为什么要这样:sticky 在临界点(自然位置 == sticky top)会在状态机之间反复切换,
 * 浏览器每切一次就 reflow 一帧,于是"滚到底再回顶"这一瞬间 thead 会抖 1px。
 * 永远处于"已粘"状态 → 没有状态切换 → 没有 reflow → 不抖。
 *
 * 视觉零损失:thead 视觉位置仍在 116(被 sticky 钉在 top 值上),toolbar 和 thead 之间的
 * 视觉 gap 仍然是 8px。唯一代价:tbody 第一行被 thead 覆盖 1px,但那 1px 是 tbody 的
 * 空白 padding 区域,文字完全不受影响,肉眼看不出来。
 */
#patientJourneyView > .table-toolbar,
#tabContent14 > .table-toolbar,
#labImportReviewView > .table-toolbar,
#allEmbryoCasesView > .table-toolbar,
#allCyclesView > .table-toolbar,
#transferScheduleBody > .table-toolbar,
#ultrasoundAllCyclesView > .table-toolbar,
#ultrasoundCarriersView > .table-toolbar,
#tabContent99 > .table-toolbar,
#tabContent116 > .table-toolbar,
#tabContent117 > .table-toolbar,
#doctorConsultCyclesBody > .table-toolbar {
    margin-bottom: 7px;
}

/* ==================== 11f. NARROW-SCREEN COLUMN COMPRESSION (small-laptop fit) ====================
 * PROBLEM: the sticky-recipe tables (§11d) and the agency dashboard use `table-layout:fixed` with a
 * <colgroup> of FIXED PIXEL widths. A fixed-layout table's used width = max(container, Σ col-px), so
 * Σ col-px is a HARD MINIMUM width. The page container (#contentArea) is `overflow-x: clip` (no
 * horizontal scroll, BY DESIGN — load-bearing for the sticky header, see §10 / §11d), so when the
 * content area is narrower than that floor the RIGHT-MOST columns are silently CLIPPED and become
 * unreachable (this is why the All Cycles "Actions" column vanished on a 13" MacBook — the table's
 * 1436px floor exceeded the ~1327px inner width of a 1440-wide laptop, and there is no way to scroll).
 *
 * FIX: below each table's own clip threshold, override the col widths to a smaller floor so the whole
 * table fits. Each block is wrapped in `@media (max-width: <floor + 113>px)`, where
 *     113 = sidebar(--sidebar-w 42) + #contentArea padding(28*2) + scrollbar gutter(~15).
 * ABOVE that viewport the table already fits today → the media query does NOT apply → the layout is
 * byte-for-byte IDENTICAL. Wide screens / external monitors are never touched. The compressed Σ is only
 * a FLOOR: on in-between widths `width:100%` redistributes the slack so columns scale up to fill and
 * never look cramped. Dates kept >= 82px (YYYY-MM-DD), status pills >= 76px; name/text cols (ellipsis-
 * truncated) and over-wide action cols absorb the compression. Action button padding is tightened so
 * multi-button cells don't wrap at the floor width. NOTE: All Cycles & Transfer Schedule deliberately
 * share one aligned skeleton — both inline colgroups total 1420px with IDENTICAL px on the lead cols
 * (1-2) and the Agency/Status/Actions tail, plus equal-sum (600px) middle blocks, so the two tabs line
 * up column-for-column. If you change a width on one table, mirror it on the other AND in both @media
 * floors below, or the cross-tab alignment breaks.
 */

/* All Cycles — 11-col skeleton, inline colgroup totals 1420px, so it clips below ~1533px (1420 + 113).
 * (Transfer Schedule USED to share this exact skeleton, but it gained Source-O / Source-S party columns
 * and now carries its own 10-col floor in the block below — they no longer align column-for-column.)
 * Keep these floors in lockstep with the inline colgroup in js/ui-tabs-all-cycles.js. */
@media (max-width: 1533px) {
    #allCyclesView > table > colgroup > col:nth-child(1)  { width: 100px !important; } /* Cycle (shared) */
    #allCyclesView > table > colgroup > col:nth-child(2)  { width: 130px !important; } /* Source-O (shared) */
    #allCyclesView > table > colgroup > col:nth-child(3)  { width: 116px !important; } /* Passport / ID */
    #allCyclesView > table > colgroup > col:nth-child(4)  { width: 82px  !important; } /* Start */
    #allCyclesView > table > colgroup > col:nth-child(5)  { width: 82px  !important; } /* End */
    #allCyclesView > table > colgroup > col:nth-child(6)  { width: 96px  !important; } /* Stage */
    #allCyclesView > table > colgroup > col:nth-child(7)  { width: 108px !important; } /* OPU & Eggs */
    #allCyclesView > table > colgroup > col:nth-child(8)  { width: 116px !important; } /* Latest E2 */
    #allCyclesView > table > colgroup > col:nth-child(9)  { width: 104px !important; } /* Agency (shared) */
    #allCyclesView > table > colgroup > col:nth-child(10) { width: 84px  !important; } /* Status (shared) */
    #allCyclesView > table > colgroup > col:nth-child(11) { width: 150px !important; } /* Actions (shared) */
    /* Actions col holds up to 3 buttons (Open + Complete + Cancel) — tighten so they don't wrap. */
    #allCyclesView .btn-action { padding: 2px 5px !important; font-size: 11px !important; }
}

/* Transfer Schedule (reproductive doctor) — 10-col layout (Transfer · Source-C · Source-O ·
 * Source-S · Prep Start · Transfer Date · β-HCG · Agency · Status · Actions). Inline colgroup
 * totals 1410px → clips below ~1523px (1410 + 113). Dates kept >= 84px (YYYY-MM-DD), name cols
 * ellipsis-truncate. Targets .ts-sched--doctor so it never hits the embryologist's 9-col table
 * below. Keep in lockstep with the inline colgroup in js/ui-transfer.js. */
@media (max-width: 1523px) {
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(1)  { width: 96px  !important; } /* Transfer */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(2)  { width: 116px !important; } /* Source-C */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(3)  { width: 104px !important; } /* Source-O */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(4)  { width: 104px !important; } /* Source-S */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(5)  { width: 84px  !important; } /* Prep Start */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(6)  { width: 100px !important; } /* Transfer Date */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(7)  { width: 84px  !important; } /* β-HCG */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(8)  { width: 104px !important; } /* Agency */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(9)  { width: 84px  !important; } /* Status */
    #transferScheduleBody > table.ts-sched--doctor > colgroup > col:nth-child(10) { width: 150px !important; } /* Actions */
}

/* Transfer Schedule (embryologist) — 9-col layout, Prep Start dropped (the lab doesn't run prep).
 * Inline colgroup totals 1290px → clips below ~1403px (1290 + 113). Same per-column floors as the
 * doctor variant, minus the Prep Start slot, so the nth-child indices shift up by one from col 5 on. */
@media (max-width: 1403px) {
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(1) { width: 96px  !important; } /* Transfer */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(2) { width: 116px !important; } /* Source-C */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(3) { width: 104px !important; } /* Source-O */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(4) { width: 104px !important; } /* Source-S */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(5) { width: 100px !important; } /* Transfer Date */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(6) { width: 84px  !important; } /* β-HCG */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(7) { width: 104px !important; } /* Agency */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(8) { width: 84px  !important; } /* Status */
    #transferScheduleBody > table.ts-sched--embryo > colgroup > col:nth-child(9) { width: 150px !important; } /* Actions */
}

/* Action-button padding tightened for both Transfer Schedule variants at their wider breakpoint. */
@media (max-width: 1523px) {
    #transferScheduleBody .btn-action { padding: 2px 6px !important; font-size: 11px !important; }
}

/* All Cycles (Ultrasound Doctor) — 8-col, floor ~1244px → clips below ~1357px viewport. */
@media (max-width: 1357px) {
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(1) { width: 180px !important; } /* Patient */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(2) { width: 56px  !important; } /* Tag */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(3) { width: 100px !important; } /* Cycle Start */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(4) { width: 110px !important; } /* Stage */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(5) { width: 100px !important; } /* Status */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(6) { width: 230px !important; } /* Last US */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(7) { width: 160px !important; } /* Next Appt */
    #ultrasoundAllCyclesView > table > colgroup > col:nth-child(8) { width: 96px  !important; } /* Actions */
    #ultrasoundAllCyclesView .btn-action { padding: 2px 6px !important; font-size: 11px !important; }
}

/* Carriers (Ultrasound Doctor) — 10-col, floor ~1446px → clips below ~1559px viewport. */
@media (max-width: 1559px) {
    #ultrasoundCarriersView > table > colgroup > col:nth-child(1)  { width: 120px !important; } /* Transfer */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(2)  { width: 140px !important; } /* Source-C */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(3)  { width: 84px  !important; } /* Prep Start */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(4)  { width: 84px  !important; } /* Transfer Date */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(5)  { width: 74px  !important; } /* β-HCG */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(6)  { width: 110px !important; } /* Agency */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(7)  { width: 110px !important; } /* Status */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(8)  { width: 180px !important; } /* Last US */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(9)  { width: 140px !important; } /* Next Appt */
    #ultrasoundCarriersView > table > colgroup > col:nth-child(10) { width: 96px  !important; } /* Actions */
    #ultrasoundCarriersView .btn-action { padding: 2px 6px !important; font-size: 11px !important; }
}

/* All Embryo Cases — floor 1252px (1312 with manager Actions col) → clips below ~1425px viewport.
 * Threshold covers the manager variant so the manager-only delete column never clips. */
@media (max-width: 1425px) {
    #allEmbryoCasesView > table > colgroup > col:nth-child(1)  { width: 62px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(2)  { width: 104px !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(3)  { width: 92px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(4)  { width: 82px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(5)  { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(6)  { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(7)  { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(8)  { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(9)  { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(10) { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(11) { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(12) { width: 40px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(13) { width: 48px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(14) { width: 68px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(15) { width: 86px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(16) { width: 80px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(17) { width: 78px  !important; }
    #allEmbryoCasesView > table > colgroup > col:nth-child(18) { width: 50px  !important; } /* manager only */
    #allEmbryoCasesView .btn-action { padding: 2px 6px !important; }
}

/* Agency Dashboard (pairing overview) — floor 1148px → clips below ~1261px viewport. */
@media (max-width: 1261px) {
    #agencyDashboardView > table > colgroup > col:nth-child(1)  { width: 92px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(2)  { width: 92px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(3)  { width: 86px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(4)  { width: 104px !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(5)  { width: 82px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(6)  { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(7)  { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(8)  { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(9)  { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(10) { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(11) { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(12) { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(13) { width: 40px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(14) { width: 50px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(15) { width: 70px  !important; }
    #agencyDashboardView > table > colgroup > col:nth-child(16) { width: 52px  !important; }
    #agencyDashboardView .btn-action { padding: 2px 4px !important; }
}

/* ==================== 11e. ORDERS & PLAN (Tab 99) — DS alignment ====================
 * Sits on the shared sticky-table recipe (#tabContent99 in 11d). This block only styles
 * the inner content layer (type icon / status pill / toolbar filters / column alignment),
 * replacing the renderer's hand-rolled inline styles so the page matches its sibling tables.
 * All colours come from semantic tokens (§1) — no hard-coded hex. */
#tabContent99 .ord-ico { display: inline-flex; align-items: center; justify-content: center; }

/* Column alignment by role (§10.5): icon / due / status / actions centered, rest left. */
#tabContent99 .data-table th:nth-child(1),
#tabContent99 .data-table th:nth-child(5),
#tabContent99 .data-table th:nth-child(6),
#tabContent99 .data-table td.ord-c-icon,
#tabContent99 .data-table td.ord-c-due,
#tabContent99 .data-table td.ord-c-status,
#tabContent99 .data-table td.ord-c-actions { text-align: center; }

#tabContent99 .data-table td.ord-c-type { color: var(--ink); font-weight: 500; }
#tabContent99 .ord-content { font-weight: 500; color: var(--ink); }
#tabContent99 .ord-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
#tabContent99 .ord-detail-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
#tabContent99 .ord-c-assigned, #tabContent99 .ord-c-due, #tabContent99 .ord-muted { color: var(--ink-muted); }
#tabContent99 .ord-c-due, #tabContent99 .ord-c-status { white-space: nowrap; }
#tabContent99 .ord-c-detail { font-size: 12px; color: var(--ink-secondary); }
#tabContent99 .ord-empty { padding: 48px; text-align: center; color: var(--ink-faint); font-style: italic; }

/* Status pill — semantic tokens. */
#tabContent99 .ord-pill {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600; line-height: 1.6;
    border: 1px solid;
}
#tabContent99 .ord-pill.s-pending   { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
#tabContent99 .ord-pill.s-collected { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
#tabContent99 .ord-pill.s-done,
#tabContent99 .ord-pill.s-resulted  { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
#tabContent99 .ord-pill.s-cancelled { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); }

/* Toolbar — segmented status filter + toggle chips (§11). */
#tabContent99 .ord-seg {
    display: inline-flex; gap: 2px; padding: 2px;
    background: var(--surface-muted); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
#tabContent99 .ord-seg-btn {
    border: none; background: none; cursor: pointer;
    padding: 4px 13px; font-size: 12px; font-weight: 500;
    color: var(--ink-muted); border-radius: calc(var(--radius-sm) - 2px);
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
#tabContent99 .ord-seg-btn:not(.is-active):hover { color: var(--ink); }
#tabContent99 .ord-seg-btn.is-active { background: var(--surface); color: var(--brand); font-weight: 600; box-shadow: var(--shadow-sm); }

#tabContent99 .ord-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; font-size: 12px; font-weight: 500;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-secondary); cursor: pointer;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
#tabContent99 .ord-toggle:hover { border-color: var(--ink-muted); }
#tabContent99 .ord-toggle.is-active { background: var(--brand-light); color: var(--brand-hover); border-color: var(--brand-border); }

/* Action buttons (Done / Cancel) — naked .btn-action + semantic colour + lucide glyph. */
#tabContent99 .ord-c-actions .btn-action { gap: 4px; }
#tabContent99 .ord-act-done { color: var(--success-text); }
#tabContent99 .ord-act-done:hover { color: var(--success-text); background: var(--success-bg); }
#tabContent99 .ord-act-cancel { color: var(--danger-text); }
#tabContent99 .ord-act-cancel:hover { color: var(--danger-text); background: var(--danger-bg); }

/* ──────── Patient/Appointment 表格:对齐 Sperm Records 美术风格 ────────
 * 覆盖 #contentArea 通用表格样式,让 Tab 13 / Tab 14 的视觉(表头字重 font-size
 * letter-spacing、行 padding、hover 色、外层 border)与 Sperm Records 内联风格一致。
 * sticky thead 规则紧随其后,会在此基础上仅覆盖 sticky 相关属性。
 */
#patientJourneyView > table,
#tabContent14 > table,
#labImportReviewView > table,
#allEmbryoCasesView > table,
#allCyclesView > table,
#transferScheduleBody > table,
#ultrasoundAllCyclesView > table,
#ultrasoundCarriersView > table,
#tabContent99 > table,
#tabContent116 > table,
#tabContent117 > table {
    border: 1px solid var(--border);
}
#patientJourneyView > table thead th,
#tabContent14 > table thead th,
#labImportReviewView > table thead th,
#allEmbryoCasesView > table thead th,
#allCyclesView > table thead th,
#transferScheduleBody > table thead th,
#ultrasoundAllCyclesView > table thead th,
#ultrasoundCarriersView > table thead th,
#tabContent99 > table thead th,
#tabContent116 > table thead th,
#tabContent117 > table thead th,
#doctorConsultCyclesBody > table thead th {
    background: var(--surface-muted);
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 8px;
}

/* Actions 列按钮:sidebar 同款裸图标风格(无边框/背景,hover 微反馈) */
.btn-action.btn-edit,
.btn-action.btn-edit-pair,
.btn-action.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.btn-action.btn-edit,
.btn-action.btn-edit-pair { color: var(--ink-muted); }
.btn-action.btn-edit:hover,
.btn-action.btn-edit-pair:hover { color: var(--ink); background: var(--surface-muted); }
.btn-action.btn-delete { color: #ef4444; }
.btn-action.btn-delete:hover { color: #dc2626; background: #fef2f2; }
.btn-action.btn-edit svg,
.btn-action.btn-edit-pair svg,
.btn-action.btn-delete svg { width: 15px; height: 15px; }

/* v35.4 (2026-05-03): Agency dashboard Actions/Tools 列的彩色操作按钮
   (transfer / supplement / freeze / archive) — 与 .btn-edit/.btn-delete
   同款裸图标，无背景无边框，SVG 强制 15×15，颜色靠各自 stroke。
   hover 时加一层很淡的同色 tint，跟 .btn-delete:hover 同节奏。 */
.btn-action.btn-transfer,
.btn-action.btn-supplement,
.btn-action.btn-freeze,
.btn-action.btn-archive,
.btn-action.btn-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.btn-action.btn-transfer { color: #10b981; }
.btn-action.btn-transfer:hover { color: #059669; background: #ecfdf5; }
.btn-action.btn-supplement { color: #f97316; }
.btn-action.btn-supplement:hover { color: #ea580c; background: #fff7ed; }
.btn-action.btn-freeze { color: #0ea5e9; }
.btn-action.btn-freeze:hover { color: #0284c7; background: #f0f9ff; }
.btn-action.btn-archive { color: #64748b; }
.btn-action.btn-archive:hover { color: #475569; background: var(--surface-muted); }
/* v35.5 (2026-05-03): Document column report button — cyan signal color
   matching the prior inline-style impl, but now via sister class so the
   28×28 box / 15px SVG / hover tint stay in lockstep with btn-edit etc. */
.btn-action.btn-report { color: #0891b2; }
.btn-action.btn-report:hover { color: #0e7490; background: #ecfeff; }
/* Disabled (gated but contextually shown) — grey, no hover */
.btn-action.btn-transfer:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    background: transparent;
}
.btn-action.btn-transfer svg,
.btn-action.btn-supplement svg,
.btn-action.btn-freeze svg,
.btn-action.btn-archive svg,
.btn-action.btn-report svg { width: 15px; height: 15px; }

/* PDF 查看按钮 / 上传标签:裸文字链接风格(绿色,hover 微反馈) */
.btn-view-pdf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: #10b981;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.btn-view-pdf:hover { color: #059669; background: rgba(16, 185, 129, 0.08); }
.btn-view-pdf svg { width: 13px; height: 13px; }
.tag-uploaded {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #10b981;
    white-space: nowrap;
}
.tag-uploaded svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Upload Report 按钮:裸图标灰色风格(sidebar 同款) */
.btn-upload-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.btn-upload-action:hover { color: var(--ink); background: var(--surface-muted); }
.btn-upload-action:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-upload-action svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 上传中 / 失败状态标签(瞬时) */
@keyframes icon-spin { to { transform: rotate(360deg); } }
.tag-processing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
}
.tag-processing svg { width: 13px; height: 13px; flex-shrink: 0; animation: icon-spin 0.9s linear infinite; }
.tag-error {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #ef4444;
    white-space: nowrap;
}
.tag-error svg { width: 13px; height: 13px; flex-shrink: 0; }

/* AI 提取进度条:压缩完先显示这个,AI 返回后切 .tag-uploaded */
.tag-ai-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
}
.tag-ai-progress .ai-bar-track {
    display: inline-block;
    width: 70px;
    height: 6px;
    border-radius: 3px;
    background: rgba(99, 102, 241, 0.15);
    overflow: hidden;
    vertical-align: middle;
}
.tag-ai-progress .ai-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #818cf8, #6366f1);
    border-radius: 3px;
    animation: ai-bar-grow 8s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes ai-bar-grow {
    0%   { width: 0%;  }
    50%  { width: 60%; }
    100% { width: 92%; }
}

/* 行内 Save/Cancel 按钮:高度与 input 对齐(input padding:4px 6px + font 12 ≈ 28px) */
.btn-row-save,
.btn-row-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.btn-row-save {
    background: #10b981;
    color: white;
    border: 1px solid #10b981;
}
.btn-row-save:hover { background: #059669; border-color: #059669; }
.btn-row-cancel {
    background: var(--surface);
    color: var(--ink-secondary);
    border: 1px solid var(--border);
}
.btn-row-cancel:hover { background: var(--surface-muted); color: var(--ink); }

/* Sperm Records Actions 列:恢复 table-cell 布局,避免 #contentArea td:last-child { display:flex } 在
 * 高行(REPORT 列 wrap 双行)里把按钮推到 td 顶部 → 视觉上比左边 input 高一截。 */
#cryoTableBody td:last-child {
    display: table-cell;
    padding: 8px;
    gap: 0;
    vertical-align: middle;
}
#patientJourneyView > table tbody td,
#tabContent14 > table tbody td,
#labImportReviewView > table tbody td {
    padding: 10px 8px;
    font-size: 12px;
    color: var(--ink);
}
#patientJourneyView > table tbody td:first-child,
#tabContent14 > table tbody td:first-child,
#labImportReviewView > table tbody td:first-child {
    color: var(--ink);
    font-weight: 500;
}
#patientJourneyView > table tbody td:last-child,
#tabContent14 > table tbody td:last-child,
#labImportReviewView > table tbody td:last-child {
    display: table-cell;
    padding: 10px 8px;
    gap: 0;
}
#patientJourneyView > table tbody tr:hover,
#tabContent14 > table tbody tr:hover,
#labImportReviewView > table tbody tr:hover,
#allEmbryoCasesView > table tbody tr:hover,
#allCyclesView > table tbody tr:hover,
#transferScheduleBody > table tbody tr:hover,
#ultrasoundAllCyclesView > table tbody tr:hover,
#ultrasoundCarriersView > table tbody tr:hover,
#tabContent99 > table tbody tr:hover {
    background: var(--surface-muted);
}

/* Consult Cycles (Tab 123): the shared restore rule above can't beat the
   .data-table tbody tr:hover { ...!important } killer at style.css:316 (same
   dead-hover footgun as All Cycles). Scope a higher-specificity !important rule
   to clickable rows only (.cc-row) so navigable rows get a visible hover while
   inert Source-S rows stay flat. */
#contentArea #doctorConsultCyclesBody > table tbody tr.cc-row:hover {
    background: var(--surface-muted) !important;
}

#patientJourneyView > table thead th,
#tabContent14 > table thead th,
#labImportReviewView > table thead th,
#allEmbryoCasesView > table thead th,
#allCyclesView > table thead th,
#transferScheduleBody > table thead th,
#ultrasoundAllCyclesView > table thead th,
#ultrasoundCarriersView > table thead th,
#tabContent99 > table thead th,
#tabContent116 > table thead th,
#tabContent117 > table thead th,
#doctorConsultCyclesBody > table thead th {
    position: sticky;
    /*
     * sticky top = 116,比 thead 自然位置(115)大 1px,保证永远粘住。
     */
    top: calc(var(--topbar-h) + 52px + 8px);
    z-index: 30;
    /*
     * 独立合成层兜底:即便临界计算上有 subpixel 漂移,sticky 重新定位也走 GPU 合成
     * 不走 CPU reflow,视觉上不会表现为"抖一下"。
     * translateZ(0) 和 will-change: transform 等价,双写是为了覆盖老引擎。
     */
    will-change: transform;
    transform: translateZ(0);
    /*
     * 关键:根除 sticky 激活/解除瞬间的高度抖动。
     *
     * 思路: border-bottom 无论 collapse 还是 separate,都参与 th 的 border-box 计算;
     * sticky 状态切换会触发 th 盒子重新测量,浏览器的合并/解除合并算法可能让这 1px
     * 在某一帧归属不明,看起来就是"缩了一下"。
     *
     * 修法:把 border-bottom 从 th 盒子里完全移除,改由 box-shadow(inset -1px)画线。
     * box-shadow 不占布局,sticky 切换永远不会去重算它 → 彻底消除抖动。
     * 为保持 th 总高度不变,padding-bottom 从基础 10 补到 11,刚好吃回消失的那 1px。
     * 分界线视觉位置: 原 y(border) → 现 y(shadow),肉眼无差。
     */
    border-bottom: 0;
    padding-bottom: 11px;
    box-shadow: inset 0 -1px 0 var(--border);
}

/*
 * Toolbar 下沿伪元素 —— 填掉 toolbar 和 sticky thead 之间那 8px 空隙,
 * 并对 toolbar / thead 各做 1px overlap,消除 subpixel 穿帮。
 *
 * 原因:.table-toolbar 自身 margin-bottom 是流式空间,不属于 toolbar 盒子。
 * toolbar 粘住时,下面这段流式空间仍会跟表格一起向上滚 —— 没有遮挡时会暴露
 * 表格的白色顶部 / 表格上边框 / tbody 行内容。加一条跟 toolbar 同步 sticky 的
 * 伪元素,背景取 surface-dim(等于页底色),效果:
 *   - 未滚动:颜色与原本透出的 surface-dim 一致,看不出新增
 *   - 滚动后:挡住表格上部 → 保持这段视觉为纯页底
 *
 * overlap 细节:
 *   top: calc(100% - 1px) → 向上咬进 toolbar 底部 1px,消除 toolbar↔伪元素的 subpixel 缝
 *   height: 10px → 8px gap + 1px 向上 overlap + 1px 向下咬进 table 顶部的余量
 */
#patientJourneyView > .table-toolbar::after,
#tabContent14 > .table-toolbar::after,
#labImportReviewView > .table-toolbar::after,
#allEmbryoCasesView > .table-toolbar::after,
#allCyclesView > .table-toolbar::after,
#transferScheduleBody > .table-toolbar::after,
#ultrasoundAllCyclesView > .table-toolbar::after,
#ultrasoundCarriersView > .table-toolbar::after,
#tabContent99 > .table-toolbar::after,
#tabContent116 > .table-toolbar::after,
#tabContent117 > .table-toolbar::after,
#doctorConsultCyclesBody > .table-toolbar::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    height: 10px;
    background: var(--surface-dim);
    pointer-events: none;
}

/* ==================== 11d-tris. Tab 25 (OPU & Culture) sticky chrome ==================== */
/*
 * ARCHITECTURE: the page body does NOT scroll on this tab. Instead the tab is a
 * flex column that fills the viewport below the topbar:
 *
 *   #opuScheduleBody (height:100%, flex column via the inline wrapper)
 *     ├─ .opu-kpi-strip   — fixed top row, never scrolls (flex:0 0 auto)
 *     └─ #opuTableScroll  — flex:1, overflow-y:auto = the ONLY scroller
 *           └─ table > thead th  — position:sticky; top:0
 *
 * Because the cards are a non-scrolling flex row (not a sticky element), they
 * are simply always there. The header is the ONLY sticky element and it sticks
 * to top:0 of its scroll container — no pixel offset to measure, nothing to
 * desync, and no second composited sticky layer to skew against (that dual
 * window-scroll sticky design was the "loose"/jitter cause). The body can't
 * over-scroll, so the header can never ride up into the cards at the bottom.
 *
 * #contentArea is locked to one viewport-minus-topbar tall with overflow:hidden
 * to guarantee the body stays put; the height:100% chain lets #opuTableScroll
 * size itself. :has() reacts to the active-tab class toggle (this tab only).
 */
#contentArea:has(#tabContent25:not(.hidden)) {
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Height chain so the inner flex column / #opuTableScroll can fill & scroll. */
#contentArea:has(#tabContent25:not(.hidden)) > #tabContent25,
#tabContent25 > .max-w-screen-2xl,
#tabContent25 #opuScheduleBody {
    height: 100%;
    min-height: 0;          /* allow the flex child to actually shrink & scroll */
}
#tabContent25 > .max-w-screen-2xl {
    padding-top: 0;
    padding-bottom: 0;
}

#opuScheduleBody .opu-kpi-strip {
    flex: 0 0 auto;         /* fixed top row — never scrolls, never shrinks */
    position: relative;
    /* Must be ABOVE the thead's z-index:30 — the thead and this strip compete
     * in the same stacking context, so the strip (and its hover mega-menus,
     * which are nested in the strip's stacking context) need z>30 or the
     * sticky header paints over the open dropdown. 40 matches the house
     * pattern's toolbar (style.css §11d). */
    z-index: 40;
    background: var(--surface-dim);
    margin: 0;
    padding: 14px 0 16px;   /* gap above cards (below topbar) and below cards (above header) */
    /* The header's TOP hairline is owned by this strip, NOT the sticky thead.
     * The strip never scrolls, so this line sits on a fixed device pixel and
     * can never "breathe"/shimmer as you scroll. This mirrors the house
     * pattern (style.css §11d) where the sticky toolbar — not the thead —
     * draws the line above the header. */
    border-bottom: 1px solid var(--border);
}
/* Card label/trend never wrap so the strip height stays stable. */
#opuScheduleBody .opu-kpi-strip .kpi-label,
#opuScheduleBody .opu-kpi-strip .kpi-trend {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Thin scrollbar (matches the app's modal/cockpit scrollbars) so on classic-
 * scrollbar platforms the table stays nearly full width and the strip's
 * border-bottom line aligns with it. macOS overlay scrollbars take no width. */
#opuTableScroll::-webkit-scrollbar { width: 8px; }
#opuTableScroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
#opuTableScroll::-webkit-scrollbar-track { background: transparent; }

#opuScheduleBody .opu-active-cases-card {
    background: var(--surface);
    /* No top border / no top radius: the strip's border-bottom above is the
     * header's single top line. A card top border would show at rest and
     * scroll away under the header — the exact "line changes while scrolling"
     * the user reported. Sides + bottom keep the card's containment. */
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: clip;       /* not hidden — see comment above */
    margin-bottom: 20px;
}
/*
 * Override #contentArea table { overflow: hidden } (style.css:166) — that
 * declaration makes the table itself a scroll ancestor and the thead would
 * try to sticky inside the table box (which never scrolls), so it just
 * sticks to the top of the table. overflow:clip keeps the visual clip for
 * border-radius without creating a scroll container. Same fix Tab 61 uses.
 *
 * Also needed to override #contentArea table { border: 1px solid ... } so
 * the wrapper's own 1px border on .opu-active-cases-card isn't doubled.
 */
#opuScheduleBody .opu-active-cases-card > table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: clip;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
#opuScheduleBody .opu-active-cases-card > table thead th {
    position: sticky;
    top: 0;                 /* sticks to the top of #opuTableScroll, right under the cards */
    z-index: 30;
    background: var(--surface-dim);
    /* BOTTOM hairline only — drawn as inset box-shadow so it takes no layout box
     * and the th height is invariant under sticky reposition. NO top line here:
     * the header's top edge is owned by the non-scrolling strip's border-bottom
     * above (a line on the sticky thead would land on a fractional pixel inside
     * the scroller and shimmer — the house pattern never draws one either). */
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--border);
}

/* ==================== 11d-bis. Lab Import Review (Tab 68) drawer + chrome ==================== */
#labImportReviewView > table tbody tr.row-selected {
    background: rgba(59, 130, 246, 0.08);
}
#labImportReviewView > table tbody tr {
    cursor: pointer;
}
.lir-reason-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: #fef3c7;
    color: #92400e;
}
.lir-reason-pill.r-patient_not_found { background: #fee2e2; color: #991b1b; }
.lir-reason-pill.r-cycle_ambiguous   { background: #fef3c7; color: #92400e; }
.lir-reason-pill.r-low_confidence    { background: #fed7aa; color: #9a3412; }
.lir-reason-pill.r-cross_check_disagreement { background: #ddd6fe; color: #5b21b6; }
.lir-reason-pill.r-panel_mismatch    { background: #fce7f3; color: #9d174d; }
.lir-reason-pill.r-panel_unknown     { background: #e0e7ff; color: #3730a3; }
.lir-reason-pill.r-parse_failed      { background: #f3f4f6; color: #374151; }
.lir-reason-pill.r-manual_rollback   { background: #d1fae5; color: #065f46; }
.lir-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}
.lir-status-pill.s-pending  { background: #fef9c3; color: #854d0e; }
.lir-status-pill.s-approved { background: #d1fae5; color: #065f46; }
.lir-status-pill.s-rejected { background: #e5e7eb; color: #4b5563; }

#labImportDrawer {
    position: fixed;
    right: 0;
    top: var(--topbar-h);
    bottom: 0;
    width: 600px;
    max-width: 90vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
    z-index: 60;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--duration-fast) ease;
}
#labImportDrawer.open { transform: translateX(0); }
#labImportDrawer .lir-drawer-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
#labImportDrawer .lir-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 80px;
}
#labImportDrawer .lir-drawer-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-dim);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
#labImportDrawer .lir-section {
    margin-bottom: 16px;
}
#labImportDrawer .lir-section h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin: 0 0 8px;
}
#labImportDrawer .lir-kv {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--ink);
}
#labImportDrawer .lir-kv .k { color: var(--ink-muted); }
#labImportDrawer iframe.lir-pdf {
    width: 100%;
    height: 360px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
}
#labImportDrawer .lir-cand {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
#labImportDrawer .lir-cand.is-top { border-color: var(--brand, #059669); background: #ecfdf5; }
#labImportDrawer table.lir-obs {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#labImportDrawer table.lir-obs th,
#labImportDrawer table.lir-obs td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
#labImportDrawer table.lir-obs th {
    background: var(--surface-muted);
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#labImportDrawer table.lir-obs input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 4px;
}
#labImportDrawer table.lir-obs input:focus {
    background: var(--surface);
    border-color: var(--border);
    outline: none;
}
/* 改过但没点"保存修改"的 input：琥珀色边框提示。 */
#labImportDrawer table.lir-obs input.lir-input-dirty {
    background: #fef3c7;
    border-color: #f59e0b;
}
/* "保存修改" 按钮在已保存状态下的视觉。 */
#labImportSaveObsBtn.is-saved {
    color: #059669;
    border-color: #a7f3d0;
    background: #ecfdf5;
}
.lir-btn {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-weight: 500;
}
.lir-btn:hover { background: var(--surface-muted); }
.lir-btn-primary { background: var(--brand, #059669); border-color: var(--brand, #059669); color: #fff; }
.lir-btn-primary:hover { background: #047857; }
.lir-btn-danger  { background: #fff; border-color: #fecaca; color: #b91c1c; }
.lir-btn-danger:hover { background: #fef2f2; }
.lir-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#labImportPickerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
}
#labImportPickerOverlay.open { display: flex; }
#labImportPickerOverlay .lir-picker {
    width: 540px;
    max-width: 92vw;
    max-height: 78vh;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
}
#labImportPickerOverlay .lir-picker-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#labImportPickerOverlay .lir-picker-search {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
#labImportPickerOverlay .lir-picker-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
#labImportPickerOverlay .lir-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
#labImportPickerOverlay .lir-picker-row {
    padding: 10px 18px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--surface-muted);
}
#labImportPickerOverlay .lir-picker-row:hover { background: var(--surface-muted); }

/* ==================== 11e. AGENCY Tab 26/46/47 STICKY (镜像 11d) ==================== */
/*
 * Tab 26 (Active Pairings)、Tab 46 (Sperm Records)、Tab 47 (Donor Cycles) 复用
 * 前台 Patient Management 的 sticky toolbar + sticky thead 模板,数学跟 11d 完全一致:
 *
 *   contentArea padding-top 24 + toolbar margin-top -24 = toolbar layout-y 0
 *   → toolbar 自然 viewport-y = topbar(56) → sticky.top 56 立即粘住
 *   → toolbar 末 viewport-y = 56+52 = 108
 *   → toolbar margin-bottom 7 → 下个元素自然 viewport-y = 115
 *   → thead sticky.top = 116(115 ≤ 116 永远 sticky,无切换抖)
 *
 * 前提: index.html 三个 tabContent26/46/47 的 wrapper 必须删 p-6,只留
 * `max-w-screen-2xl mx-auto`,否则 wrapper 24px padding-top 会把 toolbar
 * 顶到 viewport-y 80+,sticky 切换抖动 + 离 topbar 远(参见用户截图修复历史)。
 *
 * Tab 47 多一层 .stat-strip(4 个 KPI pill,sticky 紧贴 toolbar 下沿 top:108),
 * 所以 Tab 47 的 thead top 比 26/46 多 50(stat-strip 高度) → 166。
 */
#agencyDashboardView > table,
#agencySpermRecordsView > table,
#agencyDonorCyclesView > table {
    width: 100%;
    overflow: clip;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
/* fixed layout: detail row (colspan=5) 内容很宽 (cycle ID + 配对长名 + 多 chip),
 * auto layout 下会反向撑各列,展开瞬间整张表跳动。fixed + 显式列宽后
 * colspan 行不再参与列宽计算,展开稳定。 */
#agencyDonorCyclesView > table { table-layout: fixed; }
#agencyDonorCyclesView > table thead th:nth-child(1) { width: 22%; }
#agencyDonorCyclesView > table thead th:nth-child(2) { width: 14%; }
#agencyDonorCyclesView > table thead th:nth-child(3) { width: 14%; }
#agencyDonorCyclesView > table thead th:nth-child(4) { width: 22%; }
#agencyDashboardView > .table-toolbar,
#agencySpermRecordsView > .table-toolbar,
#agencyDonorCyclesView > .table-toolbar {
    /* 跟 11d 一样,只覆 bottom;left/right/top 的 -24/-28 由全局 .table-toolbar 接管 */
    margin-bottom: 7px;
}
#agencyDashboardView > table thead th,
#agencySpermRecordsView > table thead th,
#agencyDonorCyclesView > table thead th {
    text-align: left;
    background: var(--surface-muted);
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 8px 11px;
    position: sticky;
    z-index: 30;
    will-change: transform;
    transform: translateZ(0);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--border);
}
#agencyDashboardView > table thead th,
#agencySpermRecordsView > table thead th {
    /* topbar(56) + toolbar(52) + 8 = 116px;比自然位置 115 多 1 → 永远粘住 */
    top: calc(var(--topbar-h) + 52px + 8px);
}
#agencyDonorCyclesView > table thead th {
    top: calc(var(--topbar-h) + 52px + 8px);
}
#agencyDashboardView > table tbody td,
#agencySpermRecordsView > table tbody td,
#agencyDonorCyclesView > table tbody td {
    padding: 10px 8px;
    font-size: 12px;
    color: var(--ink);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
#agencyDashboardView > table tbody td:first-child,
#agencySpermRecordsView > table tbody td:first-child,
#agencyDonorCyclesView > table tbody td:first-child {
    font-weight: 500;
}
#agencyDashboardView > table tbody tr:hover td,
#agencySpermRecordsView > table tbody tr:hover td,
#agencyDonorCyclesView > table tbody tr:hover td {
    background: var(--surface-muted);
}
#agencyDashboardView > table tbody tr:last-child td,
#agencySpermRecordsView > table tbody tr:last-child td,
#agencyDonorCyclesView > table tbody tr:last-child td {
    border-bottom: none;
}
#agencyDashboardView > .table-toolbar::after,
#agencySpermRecordsView > .table-toolbar::after,
#agencyDonorCyclesView > .table-toolbar::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    height: 10px;
    background: var(--surface-dim);
    pointer-events: none;
}

/*
 * Stat strip — Tab 47 用,sticky 紧贴 toolbar 下沿(top 108)。
 * 自然 viewport-y = toolbar末(108) + toolbar margin-bottom(7) - 24(global toolbar margin-top
 *                  已生效,但 stat-strip 在 toolbar 之后,不被影响) = 115
 *   实际上:toolbar 流末 y=stick范围结束=108, gap=7, stat-strip 自然 y=115
 *   sticky.top=108 → 115 > 108 → 滚 7px 才 sticky
 * 为了"永远 sticky",margin-top: -7px(把 stat-strip 拉到 viewport-y=108,刚好等 sticky.top)
 * 然后 margin-bottom: 7 维持跟 thead 之间的视觉 gap。
 */
.stat-strip {
    position: sticky;
    top: calc(var(--topbar-h) + 52px);
    z-index: 35;
    display: flex;
    gap: 12px;
    padding: 10px 0 12px;
    margin: -7px 0 7px;
    background: var(--surface-dim);
}
/* Stat strip 与 thead 之间 8px 空隙的填充,跟 toolbar::after 同款逻辑 */
#agencyDonorCyclesView > .stat-strip::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    height: 10px;
    background: var(--surface-dim);
    pointer-events: none;
}
.stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.stat-pill .stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stat-pill .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 10px;
    height: 34px;
    width: 220px;
    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.toolbar-search:focus-within {
    border-color: var(--border);
    background: var(--surface);
}
.toolbar-search svg { color: var(--ink-faint); flex-shrink: 0; width: 14px; height: 14px; }
.toolbar-search input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: var(--ink);
    height: 100%;
    flex: 1;
    min-width: 0;
}
.toolbar-search input:focus { box-shadow: none; outline: none; }
.toolbar-search input::placeholder { color: var(--ink-faint); }

.toolbar-date {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 10px;
    height: 34px;
    transition: border-color var(--duration-fast) ease;
}
.toolbar-date:focus-within { border-color: var(--border); background: var(--surface); }
.toolbar-date svg { color: var(--ink-faint); flex-shrink: 0; width: 14px; height: 14px; }
.toolbar-date input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: var(--ink);
    height: 100%;
    width: 120px;
}
.toolbar-date input:focus { box-shadow: none; outline: none; }

.toolbar-separator { flex: 1; }

/* Date-scope dropdown in the Lab Tasks / External Lab toolbars. The shared
   .ui-dd menu stretches to the trigger width (left:0;right:0); a short value
   like "Today" would otherwise ellipsis-clip the longer presets ("Yesterday",
   "This Month") in the open list. Pin a min-width so every preset stays legible
   regardless of the current selection, and the trigger width stops jumping as
   the user switches scope. Scoped to these two hosts — not the global component. */
#ltDateScopeHost, #erDateScopeHost, #apptDateScopeHost { min-width: 120px; }
/* The appointments toolbar uses raw <select> filters at 34px tall; keep the
   uiDropdown scope trigger aligned with them so the row doesn't look ragged. */
#apptDateScopeHost { display: flex; align-items: center; }

/* Toolbar filter chip */
.toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--ink-secondary);
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
}
.toolbar-chip button {
    background: none;
    border: none;
    padding: 0;
    margin-left: 2px;
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1;
    border-radius: 2px;
    cursor: pointer;
}
.toolbar-chip button:hover { color: var(--ink); }

/* Select (filter) in toolbar */
.toolbar-select {
    height: 34px;
    border: 1px solid transparent;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-size: 13px;
    color: var(--ink-secondary);
    cursor: pointer;
    outline: none;
    transition: border-color var(--duration-fast) ease;
}
.toolbar-select:focus { border-color: var(--border); background: var(--surface); }

/* Toolbar pager (page-size + prev/next) */
.toolbar-pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}
.toolbar-pager .toolbar-select {
    height: 34px;
    padding: 0 6px;
    min-width: 56px;
}
.pager-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    color: var(--ink-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, color var(--duration-fast) ease;
    user-select: none;
}
.pager-btn:hover { background: var(--surface); border-color: var(--border); color: var(--ink); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-info {
    font-size: 12px;
    color: var(--ink-muted);
    min-width: 40px;
    text-align: center;
    padding: 0 4px;
}

/* ==================== 11d. INLINE APPOINTMENT PANEL ==================== */
.inline-appt-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0 -28px 16px;
    padding: 16px 20px;
    animation: slideDown 0.25s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
    to   { opacity: 1; max-height: 200px; padding-top: 16px; padding-bottom: 16px; margin-bottom: 16px; }
}

.inline-appt-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.inline-appt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.inline-appt-field label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.inline-appt-field select,
.inline-appt-field input[type="datetime-local"],
.inline-appt-field input[type="text"] {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0 10px;
    font-size: 13px;
    background: var(--surface);
    color: var(--ink);
}
.inline-appt-field select:focus,
.inline-appt-field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.10);
    outline: none;
}

/* Slot picker — 30-min grid, 08:00-19:00, AM/PM 并列，chip 下角显示已排人数 */
@keyframes slotPickerOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.slot-picker-overlay {
    position: absolute;
    /* Picker 会从 .modal 内的 input 打开,挂到 body 上。modal 系列 z 是
       99999/100000/100001(含 fz-dlg-overlay),必须高于这些它的 chip 才点得到。
       特殊全屏 overlay(force-update / cycle / medication 用 2147483646+)
       不放 slot-picker-input,不需要再翻越。 */
    z-index: 100050;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-float);
    padding: 14px 16px 16px;
    min-width: 560px;
    animation: slotPickerOpen 140ms var(--ease-out);
    transform-origin: top left;
}
.slot-picker-overlay[hidden] { display: none; }

.slot-picker-overlay .sp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.slot-picker-overlay .sp-nav-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) ease;
}
.slot-picker-overlay .sp-nav-btn:hover {
    background: var(--surface-dim);
    color: var(--ink);
    border-color: var(--brand);
}
.slot-picker-overlay .sp-date-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
.slot-picker-overlay .sp-date-input {
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0 8px;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
    cursor: pointer;
    font-family: inherit;
}
.slot-picker-overlay .sp-date-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.10);
}
.slot-picker-overlay .sp-weekday {
    font-size: 12px;
    color: var(--ink-muted);
    font-weight: 500;
    min-width: 36px;
}

.slot-picker-overlay .sp-body {
    display: flex;
    align-items: stretch;
    gap: 16px;
}
.slot-picker-overlay .sp-divider {
    width: 1px;
    background: var(--border-subtle);
}
.slot-picker-overlay .sp-column {
    flex: 1;
    min-width: 0;
}
.slot-picker-overlay .sp-column-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-align: center;
}
.slot-picker-overlay .sp-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.slot-picker-overlay .sp-chip {
    position: relative;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) ease;
    font-family: inherit;
    padding: 0;
}
.slot-picker-overlay .sp-chip:hover {
    background: var(--surface-dim);
    border-color: var(--brand);
}
.slot-picker-overlay .sp-chip.selected {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand-hover);
    font-weight: 600;
}
.slot-picker-overlay .sp-chip.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.slot-picker-overlay .sp-chip-time {
    font-variant-numeric: tabular-nums;
}
.slot-picker-overlay .sp-chip-badge {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 9px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-light);
    padding: 1px 5px;
    border-radius: 999px;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* Time-only 模式（Sperm Records 等只记录时刻的场景）：隐藏日期头、去容量徽章、缩宽 */
.slot-picker-overlay.time-only {
    min-width: 420px;
    padding: 12px 14px 14px;
}
.slot-picker-overlay.time-only .sp-header { display: none; }
.slot-picker-overlay.time-only .sp-chip-badge { display: none; }

/* Trigger input — display like a regular field but readonly & clickable */
.slot-picker-input,
.slot-time-input {
    cursor: pointer;
    caret-color: transparent;
}
.slot-picker-input:focus,
.slot-time-input:focus { cursor: pointer; }

/* Patient combobox — searchable dropdown matching the white-theme design language */
@keyframes patientComboOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.patient-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-float);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    padding: 4px;
    animation: patientComboOpen 140ms var(--ease-out);
    transform-origin: top center;
}
.patient-combo-menu[hidden] { display: none; }
.patient-combo-menu .pco-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.35;
    transition: background var(--duration-fast) ease;
}
.patient-combo-menu .pco-item:hover {
    background: var(--surface-dim);
}
.patient-combo-menu .pco-item.active {
    background: var(--brand-light);
}
.patient-combo-menu .pco-name {
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.patient-combo-menu .pco-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}
.patient-combo-menu .pco-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
}

/* ============================================================
   Generic dropdown (ui-dropdown.js) — 通用下拉,替代原生 <select>。
   视觉对齐 .patient-combo-menu;强调色走 --ui-dd-accent(每实例可覆盖)。
   ============================================================ */
.ui-dd { position: relative; width: 100%; }

.ui-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.ui-dd-trigger:hover { border-color: #cbd5e1; }
.ui-dd.ui-dd-open .ui-dd-trigger,
.ui-dd-trigger:focus-visible {
    outline: none;
    border-color: var(--ui-dd-accent, var(--brand));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dd-accent, var(--brand)) 14%, transparent);
}
.ui-dd-trigger.ui-dd-placeholder .ui-dd-value { color: var(--ink-muted); }
.ui-dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dd-chevron {
    flex-shrink: 0;
    color: var(--ink-muted);
    transition: transform var(--duration-fast) ease;
}
.ui-dd.ui-dd-open .ui-dd-chevron { transform: rotate(180deg); }

.ui-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-float);
    animation: patientComboOpen 140ms var(--ease-out);
    transform-origin: top center;
}
.ui-dd-menu[hidden] { display: none; }

.ui-dd-search-wrap {
    flex-shrink: 0;
    padding: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.ui-dd-search {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    outline: none;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.ui-dd-search:focus {
    border-color: var(--ui-dd-accent, var(--brand));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dd-accent, var(--brand)) 14%, transparent);
}

.ui-dd-list { overflow-y: auto; padding: 4px; }

.ui-dd-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}
.ui-dd-group-label[hidden] { display: none; }

.ui-dd-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex-shrink: 0; }

.ui-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.35;
    transition: background var(--duration-fast) ease;
}
.ui-dd-item[hidden] { display: none; }
.ui-dd-item:hover,
.ui-dd-item.active {
    background: color-mix(in srgb, var(--ui-dd-accent, var(--brand)) 10%, transparent);
}
.ui-dd-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dd-item-hint { flex-shrink: 0; font-size: 11px; color: var(--ink-muted); }

.ui-dd-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
}
.ui-dd-empty[hidden] { display: none; }

.inline-appt-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 72px;
    overflow-y: auto;
    padding: 4px 0;
}
.inline-appt-types .inline-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.inline-appt-types .inline-type-chip:hover {
    border-color: var(--brand-border);
    background: var(--brand-light);
}
.inline-appt-types .inline-type-chip.selected {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.inline-appt-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    padding-bottom: 1px;
}
.inline-appt-save {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    border: none;
    background: var(--brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.inline-appt-save:hover { background: var(--brand-hover); }
.inline-appt-cancel {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.inline-appt-cancel:hover { background: var(--surface-muted); color: var(--ink); }


/* ==================== 12. MODAL SYSTEM ==================== */
.modal {
    display: none !important;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.4);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    scrollbar-gutter: stable;
}
.modal.show {
    display: flex !important;
    opacity: 1;
}
.modal[data-position="left"]   .modal-content { margin-left: 5vw; margin-right: auto; }
.modal[data-position="right"]  .modal-content { margin-right: 5vw; margin-left: auto; }
.modal[data-position="top"]    .modal-content { margin-top: 8vh; margin-bottom: auto; }
.modal[data-position="center"] .modal-content { margin: auto; }

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    max-height: 92vh;
    max-width: 720px;
    width: 95%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.modal-header .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-icon-btn {
    background: var(--brand) !important;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: none;
    box-shadow: var(--shadow-sm);
}
.save-icon-btn:hover {
    transform: scale(1.05);
    background: var(--brand-hover) !important;
}

.save-icon-btn img,
.modal-close img {
    width: 24px;
    height: 24px;
    transition: transform var(--duration-fast) ease;
}
.save-icon-btn:hover img { transform: scale(1.1); }
.modal-close img { filter: brightness(0.9); }
.modal-close:hover img { filter: brightness(0) invert(1); }

.modal-body {
    padding: 24px 28px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-muted) var(--surface-muted);
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--ink-muted); border-radius: 20px; }
.modal-body::-webkit-scrollbar-track { background: var(--surface-muted); }

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    justify-content: flex-end;
    flex-shrink: 0;
}

.modal-primary-btn {
    background: var(--ink);
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 14px;
    border: none;
}
.modal-primary-btn:hover {
    background: #1e293b;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Modal animations — fast & light */
.modal.show .modal-content {
    animation: modalOpen 350ms var(--ease-out) forwards;
}
.modal.closing .modal-content {
    animation: modalClose 250ms var(--ease-in-out) forwards;
}
@keyframes modalOpen {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalClose {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.98) translateY(4px); }
}

/* Tech reference modal */
.tech-ref-modal .modal-content {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-md);
}
.tech-modal .modal-content {
    background: rgba(255, 255, 255, 0.96);
}
.tech-ref-modal.left-ref,
.tech-ref-modal.right-ref {
    z-index: 100000;
}
.tech-ref-modal .modal-header { padding: 14px 20px; }


/* ==================== 13. PATIENT MODAL — Clean IVF Style ==================== */
.patient-modal-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

.patient-left-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.patient-upload-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cat-green-bg) 0%, rgba(240, 253, 250, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--duration-normal) ease,
                box-shadow var(--duration-normal) ease;
    overflow: hidden;
    height: 180px;
    flex-shrink: 0;
}
.patient-upload-zone:hover {
    border-color: var(--cat-green-accent);
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.2);
}
.patient-upload-zone.drag-over {
    border-color: #059669;
    border-style: solid;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.06) 100%);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.patient-upload-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
}
.patient-upload-content { text-align: center; padding: 12px; pointer-events: none; }
.patient-upload-icon {
    width: 48px; height: 48px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: white;
    display: flex; align-items: center; justify-content: center;
    color: var(--cat-green-accent);
    box-shadow: var(--shadow-sm);
}
.patient-upload-title {
    font-size: 13px; font-weight: 600;
    color: var(--ink); margin-bottom: 2px;
}
.patient-upload-subtitle {
    font-size: 10px; color: var(--cat-green-accent);
    font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}

/* AI Badge */
.patient-ai-badge {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: white;
    border-radius: var(--radius-full);
    font-size: 9px; font-weight: 700; color: #059669;
    box-shadow: var(--shadow-xs);
    letter-spacing: 0.5px; text-transform: uppercase;
}
.patient-ai-badge .ai-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cat-green-accent);
    animation: aiPulse 2s ease-in-out infinite;
}
@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    50%      { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

/* Uploaded files */
.uploaded-preview { display: flex; flex-direction: column; gap: 6px; }
.uploaded-preview:empty { display: none; }

.file-chip {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 28px 8px 12px;
    background: var(--surface-muted);
    color: var(--ink-secondary);
    border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 500;
    border: 1px solid var(--border);
    width: 100%; box-sizing: border-box;
}
.file-chip .chip-name {
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 1; min-width: 0;
}
.file-chip .chip-icon { font-size: 13px; flex-shrink: 0; }
.file-chip .chip-remove {
    position: absolute; top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.12);
    color: var(--ink-muted);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
    z-index: 2;
}
.file-chip .chip-remove:hover {
    background: var(--cat-red-accent); color: white;
}

.file-chip.processing {
    background: linear-gradient(90deg, #ecfdf5, #d1fae5, #ecfdf5);
    background-size: 200% 100%;
    color: #059669; border-color: var(--cat-green-border);
    animation: chipShimmer 1.5s linear infinite;
}
@keyframes chipShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.file-chip.processed {
    background: #ecfdf5; color: #059669;
    border-color: #6ee7b7; cursor: pointer;
}
.file-chip.processed:hover { background: #d1fae5; }
.file-chip.active {
    background: var(--cat-green-accent); color: white;
    border-color: #059669; box-shadow: var(--shadow-md);
}
.file-chip.active .chip-remove { background: rgba(255, 255, 255, 0.25); color: white; }
.file-chip.active .chip-remove:hover { background: white; color: var(--cat-red-accent); }

/* 批量行 ivfTag / agency 标签 */
.file-chip .chip-tag {
    flex-shrink: 0;
    font-size: 10px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(16, 185, 129, 0.15); color: #047857;
    max-width: 130px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.file-chip.active .chip-tag {
    background: rgba(255, 255, 255, 0.28); color: white;
}

/* Process AI Button */
.process-ai-btn {
    width: 100%; padding: 10px 14px;
    background: linear-gradient(135deg, var(--cat-green-accent), #059669);
    color: white; border: none;
    border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; box-shadow: var(--shadow-md);
}
.process-ai-btn:hover:not(:disabled) {
    box-shadow: var(--shadow-lg);
}
.process-ai-btn:disabled {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    cursor: not-allowed; box-shadow: none;
}
.process-ai-btn .btn-icon { font-size: 14px; display: inline-block; }
.process-ai-btn.processing .btn-icon { animation: aiSpin 1.4s linear infinite; }
@keyframes aiSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form fields */
.patient-form-fields { display: flex; flex-direction: column; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-group { display: flex; flex-direction: column; }
.field-label {
    font-size: 10px; font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 5px;
}
#patientModal .field-input {
    width: 100%; padding: 9px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
}
#patientModal .field-input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    outline: none;
}
#patientModal .field-input::placeholder { color: var(--ink-faint); }
@keyframes fieldFillFlash {
    0%   { background: rgba(16, 185, 129, 0.15); }
    100% { background: var(--surface); }
}
.field-input.just-filled { animation: fieldFillFlash 0.8s ease-out; }

/* Upload zone locked state */
.patient-upload-zone.locked {
    opacity: 0.4; cursor: not-allowed !important;
    pointer-events: none; filter: grayscale(0.5);
    border-style: solid; border-color: var(--ink-faint);
    background: var(--surface-dim);
}
.patient-upload-zone.locked .patient-upload-icon { background: var(--border); color: var(--ink-muted); box-shadow: none; }
.patient-upload-zone.locked .patient-upload-title::before { content: '🔒 '; }
.patient-upload-zone.locked .patient-upload-title { color: var(--ink-muted); }
.patient-upload-zone.locked .patient-ai-badge { background: var(--surface-muted); color: var(--ink-muted); }
.patient-upload-zone.locked .patient-ai-badge .ai-dot { background: var(--ink-faint); animation: none; }
.process-ai-btn:disabled .btn-icon { animation: none !important; }

/* ==================== passport-drop-zone (shared, single-file) ==================== */
/* Mirrors the front-end .patient-upload-zone aesthetic. Used by passport-drop-zone.js
   wherever a single passport/ID is uploaded (agency walk-in, bulk-pairing slots, etc.). */
.passport-drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--cat-green-bg) 0%, rgba(240, 253, 250, 0.6) 100%);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color var(--duration-normal) ease,
                box-shadow   var(--duration-normal) ease,
                background   var(--duration-normal) ease;
    overflow: hidden;
    height: 170px;
    flex-shrink: 0;
    outline: none;
}
.passport-drop-zone:hover,
.passport-drop-zone:focus-visible {
    border-color: var(--cat-green-accent);
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.2);
}
.passport-drop-zone.drag-over {
    border-color: #059669;
    border-style: solid;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(5, 150, 105, 0.06) 100%);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.passport-drop-zone.processing { cursor: progress; border-style: solid; border-color: var(--cat-green-accent); }
.passport-drop-zone.done       { border-style: solid; border-color: var(--cat-green-accent); }
.passport-drop-zone.error      { border-style: solid; border-color: var(--cat-red-accent); }

.passport-drop-zone .pdz-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
}
.passport-drop-zone.processing .pdz-input,
.passport-drop-zone.done       .pdz-input { pointer-events: none; }

.passport-drop-zone .pdz-content { text-align: center; padding: 12px; pointer-events: none; }
.passport-drop-zone .pdz-icon {
    width: 48px; height: 48px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: white;
    display: flex; align-items: center; justify-content: center;
    color: var(--cat-green-accent);
    box-shadow: var(--shadow-sm);
}
.passport-drop-zone .pdz-title {
    font-size: 13px; font-weight: 600;
    color: var(--ink); margin-bottom: 2px;
}
.passport-drop-zone .pdz-subtitle {
    font-size: 10px; color: var(--cat-green-accent);
    font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}

.passport-drop-zone .pdz-ai-badge {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: white;
    border-radius: var(--radius-full);
    font-size: 9px; font-weight: 700; color: #059669;
    box-shadow: var(--shadow-xs);
    letter-spacing: 0.5px; text-transform: uppercase;
    z-index: 3;
    pointer-events: none;
}
.passport-drop-zone .pdz-ai-badge .pdz-ai-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cat-green-accent);
    animation: aiPulse 2s ease-in-out infinite;
}

/* ==================== Embryo photo dropzone (per-row, 36x36) ==================== */
/* Compact row-level variant of .passport-drop-zone — used in the embryo-lab
   drawer's Frozen Embryos table, one tiny zone per embryo row. Mirrors the
   green-dashed palette but shrunken to fit a table cell. Click or drop a file
   to upload; once a photoPath exists the same square becomes a rounded
   thumbnail with a hover × delete button. */
.embryo-photo-cell {
    position: relative;
    width: 36px; height: 36px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cat-green-bg) 0%, rgba(240, 253, 250, 0.6) 100%);
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    color: var(--cat-green-accent);
    vertical-align: middle;
}
.embryo-photo-cell:hover {
    border-color: var(--cat-green-accent);
    box-shadow: 0 4px 10px -4px rgba(16, 185, 129, 0.28);
}
.embryo-photo-cell.drag-over {
    border-color: #059669;
    border-style: solid;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.embryo-photo-cell.uploading {
    cursor: progress;
    border-style: solid;
    border-color: var(--cat-green-accent);
}
.embryo-photo-cell.has-photo {
    border-style: solid;
    border-color: var(--cat-green-border, #6ee7b7);
    background: var(--surface-muted);
    padding: 0;
}
/* Thumbnail loaded but the image data is unusable (e.g. 0-byte upload from
   the WKWebView toBlob bug). onerror hides the broken <img> and flips the
   cell here so the operator sees a clear "retake" cue, not a raw broken icon.
   The × remove button still shows on hover. */
.embryo-photo-cell.thumb-broken {
    border-style: solid;
    border-color: var(--cat-amber-accent, #d97706);
    background: var(--cat-amber-bg, #fffbeb);
}
.embryo-photo-cell.thumb-broken::after {
    content: '⚠';
    font-size: 16px;
    line-height: 1;
    color: var(--cat-amber-accent, #d97706);
    pointer-events: none;
}
.embryo-photo-cell .epc-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
}
.embryo-photo-cell.has-photo .epc-input,
.embryo-photo-cell.uploading .epc-input {
    pointer-events: none;
}
.embryo-photo-cell .epc-icon {
    width: 18px; height: 18px;
    pointer-events: none;
    opacity: 0.85;
}
.embryo-photo-cell .epc-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    pointer-events: auto;
}
.embryo-photo-cell .epc-spin {
    width: 16px; height: 16px;
    border: 2px solid rgba(16, 185, 129, 0.25);
    border-top-color: var(--cat-green-accent);
    border-radius: 50%;
    animation: epcSpin 0.8s linear infinite;
    pointer-events: none;
}
@keyframes epcSpin { to { transform: rotate(360deg); } }

/* Tiny × delete button — only visible when row has a photo and on hover */
.embryo-photo-cell .epc-remove {
    position: absolute;
    top: 1px; right: 1px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    color: white;
    border: none;
    font-size: 10px; line-height: 1;
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    z-index: 3;
}
.embryo-photo-cell.has-photo:hover .epc-remove { display: inline-flex; }
.embryo-photo-cell .epc-remove:hover { background: var(--cat-red-accent); }

/* Locked state (row is used/discarded) — keep visible but non-interactive */
.embryo-photo-cell.locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* ==================== Embryo photo lightbox ==================== */
.embryo-photo-lightbox {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.82);
    display: flex; align-items: center; justify-content: center;
    z-index: 100001;
    padding: 32px;
    cursor: zoom-out;
    animation: epcLightboxIn 0.15s ease-out;
}
@keyframes epcLightboxIn { from { opacity: 0; } to { opacity: 1; } }
.embryo-photo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.embryo-photo-lightbox .epl-close {
    position: absolute; top: 16px; right: 20px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.embryo-photo-lightbox .epl-close:hover { background: rgba(255, 255, 255, 0.28); }
.embryo-photo-lightbox .epl-caption {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px; font-family: monospace;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 16px;
}

/* ==================== Intake documents (外送文件) ==================== */
/* Drawer chip row — entry points into the flippable document viewer. */
.elab-intake-docs {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border, #e7e5e4);
    border-radius: 10px;
    background: var(--surface-muted, #fafaf9);
}
.elab-intake-docs-hd {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--ink-secondary, #57534e);
    text-transform: uppercase;
    margin-bottom: 9px;
}
.elab-intake-docs-hd .ic { color: #7c3aed; }
.elab-intake-docs-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #292524; color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 9px;
    font-variant-numeric: tabular-nums;
}
.elab-intake-docs-row { display: flex; flex-wrap: wrap; gap: 8px; }
.elab-doc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 220px;
    padding: 7px 11px;
    border: 1px solid var(--border, #e7e5e4);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--ink, #1c1917);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.elab-doc-chip:hover { border-color: #c4b5fd; background: #faf5ff; box-shadow: 0 1px 4px rgba(124, 58, 237, .12); }
.elab-doc-chip .ic { flex: none; color: #7c3aed; }
.elab-doc-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full-screen flippable viewer (images inline / PDFs in iframe / else download). */
.elab-doc-viewer {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.86);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 72px;
    animation: epcLightboxIn 0.15s ease-out;
}
.elab-doc-viewer .edv-stage {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.elab-doc-viewer .edv-img {
    max-width: 100%; max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
    background: #fff;
}
.elab-doc-viewer .edv-frame {
    width: min(980px, 100%); height: 100%;
    border: none; border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
}
.elab-doc-viewer .edv-loading,
.elab-doc-viewer .edv-err {
    color: rgba(255, 255, 255, 0.85);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.elab-doc-viewer .edv-loading .ic { animation: edvSpin 0.9s linear infinite; }
@keyframes edvSpin { to { transform: rotate(360deg); } }
.elab-doc-viewer .edv-dl {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff; text-decoration: none;
    border-radius: 12px; font-size: 14px; font-weight: 600;
}
.elab-doc-viewer .edv-dl:hover { background: rgba(255, 255, 255, 0.22); }
.elab-doc-viewer .edv-close {
    position: absolute; top: 16px; right: 20px;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15); color: #fff; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.elab-doc-viewer .edv-close:hover { background: rgba(255, 255, 255, 0.28); }
.elab-doc-viewer .edv-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14); color: #fff; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.elab-doc-viewer .edv-nav:hover { background: rgba(255, 255, 255, 0.3); }
.elab-doc-viewer .edv-prev { left: 18px; }
.elab-doc-viewer .edv-next { right: 18px; }
.elab-doc-viewer .edv-caption {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    max-width: 80vw;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12.5px;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 14px; border-radius: 16px;
}
.elab-doc-viewer .edv-count { font-family: ui-monospace, Menlo, monospace; opacity: 0.8; flex: none; }
.elab-doc-viewer .edv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
    .elab-doc-viewer { padding: 40px 12px; }
    .elab-doc-viewer .edv-prev { left: 6px; }
    .elab-doc-viewer .edv-next { right: 6px; }
}

/* ==================== Elegant AI progress overlay (shared) ==================== */
/* Sits over .passport-drop-zone OR .patient-upload-zone while AI is reading the
   passport. Three states: progress / done / error. Reveal is driven by the parent's
   .processing / .done / .error class. */
.ai-progress-overlay {
    position: absolute; inset: 0;
    display: flex;
    align-items: center; justify-content: center;
    z-index: 4;
    padding: 14px 18px;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--duration-normal) ease,
                transform var(--duration-normal) ease,
                visibility 0s linear var(--duration-normal);
}
.passport-drop-zone.processing > .ai-progress-overlay.is-progress,
.passport-drop-zone.done       > .ai-progress-overlay.is-done,
.passport-drop-zone.error      > .ai-progress-overlay.is-error,
.patient-upload-zone.processing > .ai-progress-overlay.is-progress {
    visibility: visible; opacity: 1; transform: translateY(0);
    transition-delay: 0s;
}
.ai-progress-overlay.is-progress {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.96) 0%, rgba(209, 250, 229, 0.92) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ai-progress-overlay.is-done {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.97) 0%, rgba(187, 247, 208, 0.94) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ai-progress-overlay.is-error {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.96) 0%, rgba(254, 226, 226, 0.92) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ai-progress-card {
    width: 100%;
    max-width: 240px;
    text-align: center;
}
.ai-progress-spark {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 8px;
    animation: aiSparkFloat 2.2s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.35));
}
@keyframes aiSparkFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(8deg); }
}
.ai-progress-label {
    font-size: 12px; font-weight: 600;
    color: #047857;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
    line-height: 1.35;
}
.ai-progress-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(16, 185, 129, 0.18);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(6, 95, 70, 0.06);
}
.ai-progress-bar-fill {
    position: absolute;
    top: 0; left: -45%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0)   0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0)   100%);
    border-radius: 999px;
    animation: aiBarSlide 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes aiBarSlide {
    0%   { left: -45%; }
    100% { left: 100%; }
}

.ai-progress-mark {
    width: 38px; height: 38px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: white;
    animation: aiMarkPop 0.42s cubic-bezier(.5,1.7,.55,1) both;
}
.ai-progress-mark.is-success {
    background: var(--cat-green-accent);
    box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.55);
}
.ai-progress-mark.is-error {
    background: var(--cat-red-accent);
    box-shadow: 0 6px 16px -4px rgba(244, 63, 94, 0.45);
}
@keyframes aiMarkPop {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.ai-progress-name {
    font-size: 12px; font-weight: 600;
    color: #047857;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.4;
}
.ai-progress-error-text {
    font-size: 12px; font-weight: 500;
    color: #b91c1c;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.4;
}

/* ==================== Bulk-pairing pair bar (Notion-row) ==================== */
/* Three equal triggers in a horizontal bar; clicking one opens an
   absolute-positioned dropdown panel that doesn't reflow the rest. */
.bp-pair-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.bp-trig {
    position: relative;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.bp-trig:hover { border-color: var(--brand); }
.bp-trig.is-open {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-bg, rgba(99,102,241,0.12));
}
.bp-trig.is-filled { background: #fafbff; }
.bp-trig-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.bp-trig-head-r { display: inline-flex; align-items: center; gap: 4px; }
.bp-trig-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface-muted, #f1f5f9);
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.bp-trig-tag-sperm { background: #fce7f3; color: #be185d; }
.bp-trig-tag-egg { background: #e0e7ff; color: #4338ca; }
.bp-trig-tag-spouse { background: #ccfbf1; color: #0f766e; }
.bp-trig-clear {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 50%;
    cursor: pointer; color: var(--ink-muted); font-size: 14px; line-height: 1;
}
.bp-trig-clear:hover { background: var(--surface-muted); color: var(--ink); }
.bp-trig-caret { font-size: 10px; color: var(--ink-muted); }
.bp-trig-body { font-size: 12px; min-height: 32px; }
.bp-trig-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-trig-meta { color: var(--ink-muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-trig-empty { color: var(--ink-muted); font-style: italic; font-size: 11.5px; }
.bp-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    padding: 12px;
    z-index: 10;
    cursor: default;
    max-height: 460px;
    overflow: auto;
}
.bp-dd-panel code { word-break: break-all; overflow-wrap: anywhere; }
.bp-slot-body, .bp-slot-preview { min-width: 0; }
.bp-slot-body code, .bp-slot-preview code { word-break: break-all; overflow-wrap: anywhere; }
.bp-slot-title {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 2px;
}

/* Tab segment — sidebar-flavored: SVG glyph + label, soft pill on active */
.bp-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--surface-muted);
    border-radius: 8px;
}
.bp-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) ease,
                color var(--duration-fast, 150ms) ease,
                box-shadow var(--duration-fast, 150ms) ease;
}
.bp-tab:hover { color: var(--ink); background: rgba(15, 23, 42, 0.04); }
.bp-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.bp-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}
.bp-tab-icon svg { display: block; }
.bp-tab-label { white-space: nowrap; }

/* Sub-segment inside the existing tab (sperm only): Donor / Cryo Vials */
.bp-subtabs {
    display: flex;
    gap: 3px;
    padding: 2px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 6px;
    margin-bottom: 8px;
}
.bp-subtab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) ease,
                color var(--duration-fast, 150ms) ease;
}
.bp-subtab:hover { color: var(--ink); }
.bp-subtab.is-active {
    background: var(--surface);
    color: #4f46e5;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bp-subtab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp-subtab-icon svg { display: block; }

.bp-slot-body { min-height: 170px; }
.bp-slot-preview:empty { display: none; }

/* ============================================================
   Bulk Pairing modal — warm cream palette (2026-05-22)
   Scoped to #bulkPairingModal so the rest of the app keeps its
   brand-purple tokens. Implemented by re-defining the design
   tokens on the modal root: every var(--brand / --surface /
   --border / --ink …) used inline by the modal AND by its child
   pickers (patient-picker, cycle-picker) resolves to these warm
   values through inheritance — no per-element overrides needed.
   ============================================================ */
#bulkPairingModal {
    --surface:        #fefdfb;   /* modal body, inputs, cards   */
    --surface-muted:  #f7f3ec;   /* PGT box, summary, board     */
    --surface-raised: #fffefc;   /* picker containers           */
    --border:         #e6dac0;   /* warm tan border             */
    --border-subtle:  #efe7d4;
    --border-soft:    #ece3ce;
    --ink:            #463f31;   /* warm dark text              */
    --ink-muted:      #8c8167;
    --ink-faint:      #bbb096;
    --brand:          #5a4d38;   /* active / CTA — warm espresso */
    --brand-hover:    #463a28;
    --brand-bg:       #f3eee2;   /* tag-pill tint               */
    --bp-pick-bg:     #f6f1e7;   /* "picked" card (was mint)    */
    --bp-pick-border: #d7c399;
    /* the shared passport drop-zone keys off these green tokens — warm them
       so the spouse slot's zone matches the cream theme (this modal only) */
    --cat-green-bg:     #f7f3ec;
    --cat-green-accent: #5a4d38;
    --cat-green-border: #d7c399;
}
#bulkPairingModal #bulkPairingConfirmBtn { transition: background 150ms ease; }
#bulkPairingModal #bulkPairingConfirmBtn:hover { background: var(--brand-hover); }
/* sub-segment active was hardcoded indigo — warm it */
#bulkPairingModal .bp-subtab.is-active { color: var(--brand); }
/* a touch more horizontal breathing room on the 3-column board */
#bulkPairingModal .bp-slots-board { padding: 18px 10px; }
/* spouse-slot drop zone: replace the green gradient/badge with cream */
#bulkPairingModal .passport-drop-zone {
    background: linear-gradient(135deg, var(--surface-muted) 0%, var(--surface) 100%);
}
#bulkPairingModal .passport-drop-zone:hover,
#bulkPairingModal .passport-drop-zone:focus-visible {
    border-color: var(--brand); box-shadow: 0 8px 20px -10px rgba(70, 63, 49, 0.18);
}
#bulkPairingModal .passport-drop-zone .pdz-ai-badge { color: var(--brand); }


/* ==================== 14. HANDSONTABLE PROFESSIONAL ==================== */
.handsontable-professional {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    background: var(--surface);
    width: 100%; height: 100%;
}
.handsontable-professional .handsontable,
.handsontable-professional .ht_master,
.handsontable-professional .wtHolder,
.handsontable-professional .htCore,
.handsontable-professional table {
    border: none !important;
    background: transparent !important;
    border-collapse: collapse !important;
}
.handsontable-professional thead tr,
.handsontable-professional .ht_clone_top tr,
.handsontable-professional .colHeader,
.handsontable-professional th,
.handsontable-professional .htCore thead th,
.handsontable-professional .ht_clone_top .colHeader,
.handsontable-professional .ht_clone_top th {
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 12px 18px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 24px !important;
    border: none !important;
    border-bottom: 0px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    vertical-align: middle !important;
    z-index: 99999 !important;
}
.handsontable-professional td {
    padding: 14px 18px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    vertical-align: middle !important;
    font-size: 14px !important;
}
.handsontable-professional tbody tr:first-child td {
    padding-top: 10px !important;
}

/* Edit state */
.handsontable-professional td.currentRow.currentCol,
.handsontable-professional .currentRow .currentCol td,
.handsontable-professional .ht_master .currentRow .currentCol td {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    color: transparent !important;
    box-shadow: inset 0 0 0 2px var(--cat-blue-accent) !important;
    border-radius: 6px !important;
}
.handsontable-professional .handsontableInputHolder {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 100000 !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: auto !important;
}
.handsontable-professional .handsontableInput,
.handsontable-professional input.handsontableInput,
.handsontable-professional .htEditorInput,
.handsontable-professional .currentEditor {
    width: 100% !important; height: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid var(--cat-blue-accent) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    outline: none !important;
    z-index: 100000 !important;
}
.handsontable-professional td:not(.currentRow.currentCol) { color: var(--ink) !important; }
.handsontable-professional .handsontableInputHolder[style*="display: none"],
.handsontable-professional .handsontableInputHolder[style*="display:none"],
.handsontable-professional .handsontableInputHolder[style*="visibility: hidden"] {
    display: none !important; visibility: hidden !important;
}
.handsontable-professional .ht_clone_top {
    z-index: 99999 !important;
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}
.handsontable-professional .wtHolder,
.handsontable-professional .ht_master {
    position: relative !important; z-index: 1 !important;
}


/* ==================== 15. TAB 19 WORKSPACE ==================== */
#myCyclesBody,
#patientFormsHubView {
    height: calc(100vh - var(--topbar-h) - 64px) !important;
}
#excelTableContainer {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
}
#glassWorkspaceContainer { width: 100%; height: 100%; }
#glassWorkspaceContainer .table-container {
    border-radius: var(--radius-md);
    box-shadow: none; background: transparent; height: 100%;
}
#excelTableContainer .table-container {
    max-height: none !important;
    width: 100% !important; min-width: 0 !important; height: 100% !important;
}
#excelTableContainer > div > div:first-child > div:first-child {
    display: none !important;
}


/* ==================== 16. PATIENT COCKPIT SCROLLBAR ==================== */
.cockpit-root::-webkit-scrollbar { width: 4px; }
.cockpit-root::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.2); border-radius: var(--radius-full); }
.cockpit-root::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.4); }
.cockpit-root::-webkit-scrollbar-track { background: transparent; }

/* Cockpit Hormones table: horizontal scroll for many record columns, but NO
 * visible scrollbar (drag/trackpad/shift-wheel to pan). 用户 2026-06-15 要求. */
.dcc-hormone-scroll { scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.dcc-hormone-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }


/* ==================== 17. INLINE EDIT CELLS ==================== */
.value-cell-box {
    display: inline-flex; align-items: baseline; gap: 6px;
    width: 130px; box-sizing: border-box;
}
.inline-edit-input,
.inline-edit-display {
    background: transparent;
    border: 1.5px solid transparent;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-family: inherit; font-size: 15px; line-height: 1.25;
    font-weight: 700; color: var(--ink); text-align: left;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    flex: 0 0 70px; min-width: 0;
}
.value-unit {
    flex: 0 0 auto; font-size: 10px;
    font-weight: 500; color: var(--ink-muted); white-space: nowrap;
}
.value-unit.empty { color: var(--ink-faint); }
.inline-edit-display { display: inline-block; width: 100%; }
.inline-edit-display.empty { color: var(--ink-faint); font-weight: 600; }
.inline-edit-input { width: 100%; -moz-appearance: textfield; }
.inline-edit-input::-webkit-outer-spin-button,
.inline-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inline-edit-input::placeholder { color: var(--ink-faint); font-weight: 600; }
.inline-edit-input:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.15);
}
.inline-edit-input:focus {
    background: white;
    border-color: var(--cat-green-accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    outline: none;
}

/* Cycle-timeline right-side manual edit popup: widen value cells (scoped) */
#panelTabContent .value-cell-box {
    width: 100%;
    display: flex;
}
#panelTabContent .inline-edit-input,
#panelTabContent .inline-edit-display {
    flex: 1 1 auto;
}

/* Cycle-timeline ultrasound popup inputs: kill native number spinners,
   smaller font, larger padding */
#panelTabContent input[type="number"] {
    -moz-appearance: textfield !important;
    font-size: 11px !important;
    padding: 8px 6px !important;
    min-height: 34px !important;
}
#panelTabContent input[type="number"]::-webkit-outer-spin-button,
#panelTabContent input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
/* Match display cell dimensions so toggling edit ↔ view doesn't reflow */
#panelTabContent .inline-edit-display,
#panelTabContent .inline-edit-input {
    font-size: 11px !important;
    padding: 8px 6px !important;
    min-height: 34px !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
}


/* ==================== 18. TEMPLATE EDITOR INPUTS ==================== */
.tpl-edit-input {
    background: transparent !important;
    border: 1.5px solid transparent !important;
    border-radius: 8px !important;
    padding: 7px 10px; font-family: inherit;
    font-size: 14px; line-height: 1.35; color: var(--ink);
    width: 100%;
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
    box-sizing: border-box; -moz-appearance: textfield;
}
.tpl-edit-input::-webkit-outer-spin-button,
.tpl-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tpl-edit-input:hover {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}
.tpl-edit-input:focus {
    background: white !important;
    border-color: var(--cat-green-accent) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    outline: none;
}


/* ==================== 19. RESPONSIVE BREAKPOINTS ==================== */

/* Large screens (>1920px) — fill the space */
@media (min-width: 1920px) {
    .grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Medium screens (1280-1440px) */
@media (max-width: 1440px) {
    .grid.grid-cols-4.gap-6 { gap: 16px; }
    .grid.grid-cols-12.gap-8 { gap: 20px; }
}

/* Smaller screens (<1280px) */
@media (max-width: 1280px) {
    .lg\:col-span-5 { grid-column: span 6 / span 6; }
    .lg\:col-span-4 { grid-column: span 6 / span 6; }
    .lg\:col-span-3 { grid-column: span 12 / span 12; }
}

/* Tablet (<1024px) */
@media (max-width: 1024px) {
    .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .patient-modal-grid { grid-template-columns: 1fr; }
}

/* ==================== Phase 7.5: Language Selector Buttons ==================== */
.lang-btn {
    transition: all 0.15s ease;
    color: rgba(255,255,255,0.35);
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.lang-btn:hover {
    border-color: rgba(99,102,241,0.4) !important;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04) !important;
}
.lang-btn.active {
    background: rgba(99,102,241,0.15) !important;
    color: #818cf8 !important;
    border-color: rgba(99,102,241,0.3) !important;
}

/* ==================== Embryo Lab Drawer Panel ==================== */
.elab-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.elab-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.elab-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 72vw; min-width: 880px; max-width: 96vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 48px rgba(0,0,0,0.10);
    z-index: 99999;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.elab-overlay.open .elab-drawer {
    transform: translateX(0);
}
.elab-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.elab-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.elab-drawer-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background: var(--surface);
}

/* Save button dirty-dot indicator: orange pip in top-right when unsaved */
.elab-save-btn {
    position: relative;
    overflow: visible;
}
.elab-save-btn.has-unsaved::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: #f59e0b;
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
    animation: elabSaveDotPulse 1.8s ease-in-out infinite;
}
@keyframes elabSaveDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(0.85); }
}

/* Drawer action buttons — flat brand primary. Replaces the old per-button
   inline treatments (sky-blue Egg-Freeze gradient, drop-shadowed Add-Embryo,
   footer Save) with one consistent flat var(--brand) look + hover. Per-button
   sizing (padding / font-size / radius) stays inline since scales differ. */
.elab-btn-brand {
    background: var(--brand);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background var(--duration-fast) ease;
}
.elab-btn-brand:hover { background: var(--brand-hover); }

/* ==================== v4c · Charcoal + Coral skin ====================
   Applies only inside #elabOverlay so other modals (executeProposalModal,
   addCaseFromPairModal, egg-freeze sub-modals using .modal* classes) and
   any other drawer stay untouched. */

/* Charcoal top band */
#elabOverlay .elab-drawer-header,
#agencyPairingDrawerOverlay .elab-drawer-header {
    background: #292524;
    border-bottom: 1px solid #1c1917;
    padding: 14px 24px;
}
#elabOverlay .elab-drawer-header > div:first-child > div:first-child,
#agencyPairingDrawerOverlay .elab-drawer-header > div:first-child > div:first-child {
    color: #fff !important;
    letter-spacing: -0.005em;
}
#elabOverlay .elab-drawer-header > div:first-child > div:nth-child(2),
#agencyPairingDrawerOverlay .elab-drawer-header > div:first-child > div:nth-child(2) {
    color: #a8a29e !important;
}
#elabOverlay .elab-drawer-header .elab-v4-src-line,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-src-line {
    color: #a8a29e;
}
#elabOverlay .elab-drawer-header .elab-v4-src-tag,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-src-tag {
    color: #78716c;
    font-weight: 600;
    margin-right: 6px;
}
#elabOverlay .elab-drawer-header .elab-v4-close,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-close {
    background: transparent;
    border: none;
    color: #a8a29e;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    font-size: 16px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}
#elabOverlay .elab-drawer-header .elab-v4-close:hover,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-close:hover {
    background: #44403c;
    color: #fff;
}
#elabOverlay .elab-drawer-header .elab-v4-kbd,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-kbd {
    font: 9px ui-monospace, Menlo, monospace;
    background: #44403c;
    color: #d6d3d1;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #57534e;
    margin-left: 6px;
    letter-spacing: 0.02em;
}

/* Header chips re-skinned dark (overrides the inline pastel pills the JS
   currently emits; same selectors win because they're more specific). */
#elabOverlay .elab-drawer-header span[style*="border-radius:999px"],
#agencyPairingDrawerOverlay .elab-drawer-header span[style*="border-radius:999px"] {
    background: #44403c !important;
    color: #d6d3d1 !important;
    border-color: #57534e !important;
}

/* Coral accent button (Add Embryo) */
.elab-btn-coral {
    background: #ea580c;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background var(--duration-fast) ease;
}
.elab-btn-coral:hover { background: #c2410c; }

/* Charcoal action button (footer Save) */
.elab-btn-charcoal {
    background: #292524;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background var(--duration-fast) ease;
}
.elab-btn-charcoal:hover { background: #44403c; }

/* BIO / PGT checkbox squares — square check tiles instead of native boxes.
   Native input stays (its onchange + id powers _elabStageFrozen), we just
   restyle the visual. Teal for BIO (#elabBioCheck-*), purple for PGT
   (#elabPgtCheck-*). Unchecked = empty outlined square (faint). */
#elabOverlay td input[type=checkbox][id^="elabBioCheck-"],
#elabOverlay td input[type=checkbox][id^="elabPgtCheck-"],
purple for PGT
   (#elabPgtCheck-*). Unchecked = empty outlined square (faint). */
#agencyPairingDrawerOverlay td input[type=checkbox][id^="elabBioCheck-"],
#agencyPairingDrawerOverlay td input[type=checkbox][id^="elabPgtCheck-"] {
    /* v1.6.12: 直接在 input 元素自身画 background ✓,不用 ::after。
       <input> 是 void element, ::after 在它上面是非标行为(盒子定位有歧义),
       靠 grid place-items 居中也会因 input 默认 30×22 而偏移。改用 input
       自身 background-image,背景 position:center + size:12px 强制居中。
       重要: 必须用 background longhand, shorthand `background: #fff` 会清掉
       position/size/repeat,让 ✓ 跑到左上角。 */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #d6d3d1;
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
    cursor: pointer;
    margin: 0;
    transition: background-color .12s ease, border-color .12s ease;
    vertical-align: middle;
}
#elabOverlay td input[type=checkbox][id^="elabBioCheck-"]:checked,
#agencyPairingDrawerOverlay td input[type=checkbox][id^="elabBioCheck-"]:checked {
    background-color: #0e7490;
    border-color: #0e7490;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5L6.5 11.5L12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#elabOverlay td input[type=checkbox][id^="elabPgtCheck-"]:checked,
#agencyPairingDrawerOverlay td input[type=checkbox][id^="elabPgtCheck-"]:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5L6.5 11.5L12.5 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#elabOverlay td input[type=checkbox][id^="elabPgtCheck-"]:focus-visible,
#elabOverlay td input[type=checkbox][id^="elabBioCheck-"]:focus-visible,
#agencyPairingDrawerOverlay td input[type=checkbox][id^="elabPgtCheck-"]:focus-visible,
#agencyPairingDrawerOverlay td input[type=checkbox][id^="elabBioCheck-"]:focus-visible {
    outline: 2px solid #ea580c;
    outline-offset: 1px;
}

/* Tight uiDropdown triggers for the frozen-embryos table.
   Default trigger is 7px/10px padding sized for forms — too tall/wide for
   a 60–100px table cell. These cell-scoped overrides match the surrounding
   <input> mini cells (height 26px, 11px font, monospace label). */
#elabOverlay .elab-v4-dd-day-cell .ui-dd-trigger,
#elabOverlay .elab-v4-dd-result-cell .ui-dd-trigger,
#agencyPairingDrawerOverlay .elab-v4-dd-day-cell .ui-dd-trigger,
#agencyPairingDrawerOverlay .elab-v4-dd-result-cell .ui-dd-trigger {
    padding: 4px 6px;
    font-size: 11px;
    border-width: 1px;
    border-radius: 6px;
    min-height: 0;
    height: 26px;
    justify-content: center;
    gap: 4px;
}
#elabOverlay .elab-v4-dd-day-cell .ui-dd-trigger,
#agencyPairingDrawerOverlay .elab-v4-dd-day-cell .ui-dd-trigger {
    width: 60px;
    margin: 0 auto;
}
#elabOverlay .elab-v4-dd-result-cell .ui-dd-trigger,
#agencyPairingDrawerOverlay .elab-v4-dd-result-cell .ui-dd-trigger {
    width: 96px;
    margin: 0 auto;
    font-weight: 600;
}
#elabOverlay .elab-v4-dd-day-cell .ui-dd-chevron,
#elabOverlay .elab-v4-dd-result-cell .ui-dd-chevron,
#agencyPairingDrawerOverlay .elab-v4-dd-day-cell .ui-dd-chevron,
#agencyPairingDrawerOverlay .elab-v4-dd-result-cell .ui-dd-chevron {
    width: 11px;
    height: 11px;
}
#elabOverlay .elab-v4-dd-day-cell .ui-dd-menu,
#elabOverlay .elab-v4-dd-result-cell .ui-dd-menu,
#agencyPairingDrawerOverlay .elab-v4-dd-day-cell .ui-dd-menu,
#agencyPairingDrawerOverlay .elab-v4-dd-result-cell .ui-dd-menu {
    min-width: 110px;
}

/* ==================== v4c mockup-alignment styles ====================
   Everything here is scoped under #elabOverlay so it can't bleed into other
   modals / drawers. Mirrors design-explorations/v4c.html one-to-one. */

/* —— Header inline layout (Case tag + h1 + meta) —— */
#elabOverlay .elab-drawer-header .elab-v4-head-left,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
#elabOverlay .elab-drawer-header .elab-v4-head-right,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#elabOverlay .elab-drawer-header .elab-v4-head-tag,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #a8a29e;
    text-transform: uppercase;
    padding: 4px 8px;
    background: #44403c;
    border-radius: 4px;
    border: 1px solid #57534e;
}
#elabOverlay .elab-drawer-header .elab-v4-head-title,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}
#elabOverlay .elab-drawer-header .elab-v4-head-divider,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-divider {
    color: #57534e;
}
#elabOverlay .elab-drawer-header .elab-v4-head-meta,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-meta {
    color: #a8a29e;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#elabOverlay .elab-drawer-header .elab-v4-head-meta b,
#agencyPairingDrawerOverlay .elab-drawer-header .elab-v4-head-meta b {
    color: #e7e5e4;
    font-weight: 500;
}

/* —— External transferred-in case (caseType==='external_incoming') ——
   Whole charcoal band re-tinted deep teal + amber left-edge stripe so an
   imported case is unmistakable at a glance vs in-house (warm charcoal).
   Scoped to #elabOverlay only — the agency pairing drawer is untouched.
   Inset shadow draws the stripe inside the border-box (never clipped). */
#elabOverlay .elab-drawer-header.elab-head-external {
    background: #0f3f3a;
    border-bottom-color: #0a2e2a;
    box-shadow: inset 4px 0 0 #f59e0b;
}
#elabOverlay .elab-drawer-header.elab-head-external .elab-v4-head-tag {
    color: #9fc3bc;
    background: #14534c;
    border-color: #1d6960;
}
#elabOverlay .elab-drawer-header.elab-head-external .elab-v4-head-divider { color: #2f6b63; }
#elabOverlay .elab-drawer-header.elab-head-external .elab-v4-head-meta { color: #9fc3bc; }
#elabOverlay .elab-drawer-header.elab-head-external .elab-v4-head-meta b { color: #e2efed; }
#elabOverlay .elab-drawer-header.elab-head-external .elab-v4-close { color: #9fc3bc; }
#elabOverlay .elab-drawer-header.elab-head-external .elab-v4-close:hover {
    background: #14534c;
    color: #fff;
}
/* EXTERNAL badge — amber pill next to the embryo code. Not an inline 999px
   pill, so the dark-chip override above does not catch it. */
#elabOverlay .elab-drawer-header .elab-v4-head-extbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 9px;
    background: #f59e0b;
    color: #3a2606;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
#elabOverlay .elab-drawer-header .elab-v4-head-extbadge svg { stroke-width: 2.25; }

/* —— White subhead (Source-S / Source-N / Culture status) —— */
#elabOverlay .elab-v4-subhead,
#agencyPairingDrawerOverlay .elab-v4-subhead {
    padding: 12px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    gap: 28px;
    font-size: 12px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-sub-item,
#agencyPairingDrawerOverlay .elab-v4-sub-item {
    display: flex;
    align-items: center;
    gap: 7px;
}
#elabOverlay .elab-v4-sub-lbl,
#agencyPairingDrawerOverlay .elab-v4-sub-lbl {
    color: #a8a29e;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#elabOverlay .elab-v4-sub-val,
#agencyPairingDrawerOverlay .elab-v4-sub-val {
    color: var(--ink);
    font-weight: 500;
}
#elabOverlay .elab-v4-sub-code,
#agencyPairingDrawerOverlay .elab-v4-sub-code {
    font: 11.5px ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--ink-secondary, #525252);
}
#elabOverlay .elab-v4-sub-dot,
#agencyPairingDrawerOverlay .elab-v4-sub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

/* —— Section bar above field grid —— */
#elabOverlay .elab-v4-section-bar,
#agencyPairingDrawerOverlay .elab-v4-section-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
#elabOverlay .elab-v4-section-bar h2,
#agencyPairingDrawerOverlay .elab-v4-section-bar h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #a8a29e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* —— Dense 9-col field grid (Embryo Code / OPU / counts / 2PN) —— */
#elabOverlay .elab-v4-grid,
#agencyPairingDrawerOverlay .elab-v4-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr repeat(6, 60px) 70px 1fr;
    gap: 8px 10px;
    margin-bottom: 18px;
}
/* Freeze-only collapses to 8 cols (no Embryo Code, no 2PN). */
#elabOverlay .elab-v4-grid-freeze-only,
no 2PN). */
#agencyPairingDrawerOverlay .elab-v4-grid-freeze-only {
    grid-template-columns: 1.2fr repeat(6, 60px) 1fr;
}
/* External-incoming, embryo-lab drawer (#elabOverlay): per boss 2026-06-24, the
   Day-0 oocyte counts (COC/MII/MI/GV/DEG/Other/2PN) are hidden for external cases —
   those embryos were made at another clinic. The row collapses to 5 text/date fields:
   Embryo Code · OPU Date (origin) · Transfer-in · Storage Location · Notes. */
#elabOverlay .elab-v4-grid.elab-v4-grid-ext {
    grid-template-columns: 1.2fr 1.2fr 1.1fr 1.4fr 1.2fr;
}
/* Agency pairing drawer keeps the original 11-col external layout (it renders its
   own grid in ui-agency.js with the counts still present — untouched by the lab change). */
#agencyPairingDrawerOverlay .elab-v4-grid.elab-v4-grid-ext {
    grid-template-columns: 1.3fr 1.1fr 1.1fr repeat(6, 56px) 64px 1fr;
}
#elabOverlay .elab-v4-field,
#agencyPairingDrawerOverlay .elab-v4-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
#elabOverlay .elab-v4-field label,
#agencyPairingDrawerOverlay .elab-v4-field label {
    font-size: 10px;
    color: #a8a29e;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#elabOverlay .elab-v4-input,
#agencyPairingDrawerOverlay .elab-v4-input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 13px "Inter", system-ui, sans-serif;
    background: var(--surface);
    color: var(--ink);
    transition: border-color .12s ease, box-shadow .12s ease;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
}
#elabOverlay .elab-v4-input:focus,
#agencyPairingDrawerOverlay .elab-v4-input:focus {
    outline: none;
    border-color: #ea580c;
    box-shadow: 0 0 0 3px #ffedd5;
}
#elabOverlay .elab-v4-input.elab-v4-num,
#agencyPairingDrawerOverlay .elab-v4-input.elab-v4-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* —— Supplement-group banner (teal gradient + 3px left bar) —— */
#elabOverlay .elab-v4-banner,
#agencyPairingDrawerOverlay .elab-v4-banner {
    background: linear-gradient(90deg, #cffafe, transparent 70%);
    border-left: 3px solid #06b6d4;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--ink);
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-banner b,
#agencyPairingDrawerOverlay .elab-v4-banner b {
    font-weight: 600;
    color: var(--ink);
}
#elabOverlay .elab-v4-banner code,
#agencyPairingDrawerOverlay .elab-v4-banner code {
    font: 11.5px ui-monospace, Menlo, monospace;
    background: rgba(6, 182, 212, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    color: #0e7490;
}
/* Head-donor passport: name shown bold, primary-ID rendered as a faded
   monospace trailer (mirrors the Source-S/N subhead .elab-v4-sub-code look). */
#elabOverlay .elab-v4-banner-passport,
primary-ID rendered as a faded
   monospace trailer (mirrors the Source-S/N subhead .elab-v4-sub-code look). */
#agencyPairingDrawerOverlay .elab-v4-banner-passport {
    font: 11.5px ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--ink-secondary, #525252);
    opacity: 0.7;
    margin-left: 2px;
}
/* Amber variant (pending head-donor selection). */
#elabOverlay .elab-v4-banner-amber,
#agencyPairingDrawerOverlay .elab-v4-banner-amber {
    background: linear-gradient(90deg, #fef3c7, transparent 70%);
    border-left-color: #f59e0b;
    color: #92400e;
}
#elabOverlay .elab-v4-banner-amber b,
#agencyPairingDrawerOverlay .elab-v4-banner-amber b {
    color: #78350f;
}

/* —— Frozen Embryos header (h2 + black count-pill + button row) —— */
#elabOverlay .elab-v4-freeze-head,
#agencyPairingDrawerOverlay .elab-v4-freeze-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-top: 4px;
    gap: 12px;
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-freeze-head h2,
#agencyPairingDrawerOverlay .elab-v4-freeze-head h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
    color: var(--ink);
}
#elabOverlay .elab-v4-count-pill,
#agencyPairingDrawerOverlay .elab-v4-count-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: #292524;
    color: #fff;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
#elabOverlay .elab-v4-btn-row,
#agencyPairingDrawerOverlay .elab-v4-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* —— v4c button kit (primary / secondary / ghost / accent / danger / amber) —— */
#elabOverlay .elab-v4-btn,
#agencyPairingDrawerOverlay .elab-v4-btn {
    font: 500 12.5px "Inter", system-ui, sans-serif;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    height: 30px;
    box-sizing: border-box;
}
#elabOverlay .elab-v4-btn-secondary,
#agencyPairingDrawerOverlay .elab-v4-btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
#elabOverlay .elab-v4-btn-secondary:hover,
#agencyPairingDrawerOverlay .elab-v4-btn-secondary:hover { background: #fafaf9; border-color: #d6d3d1; }
#elabOverlay .elab-v4-btn-ghost,
#agencyPairingDrawerOverlay .elab-v4-btn-ghost {
    background: transparent;
    color: var(--ink-secondary, #525252);
}
#elabOverlay .elab-v4-btn-ghost:hover,
#agencyPairingDrawerOverlay .elab-v4-btn-ghost:hover { background: #fafaf9; color: var(--ink); }
#elabOverlay .elab-v4-btn-accent,
#agencyPairingDrawerOverlay .elab-v4-btn-accent {
    background: #ea580c;
    color: #fff;
}
#elabOverlay .elab-v4-btn-accent:hover,
#agencyPairingDrawerOverlay .elab-v4-btn-accent:hover { background: #c2410c; }
#elabOverlay .elab-v4-btn-danger,
#agencyPairingDrawerOverlay .elab-v4-btn-danger {
    background: #dc2626;
    color: #fff;
}
#elabOverlay .elab-v4-btn-danger:hover,
#agencyPairingDrawerOverlay .elab-v4-btn-danger:hover { background: #b91c1c; }
#elabOverlay .elab-v4-btn-amber,
#agencyPairingDrawerOverlay .elab-v4-btn-amber {
    background: #f59e0b;
    color: #fff;
}
#elabOverlay .elab-v4-btn-amber:hover,
#agencyPairingDrawerOverlay .elab-v4-btn-amber:hover { background: #d97706; }
#elabOverlay .elab-v4-btn.is-disabled,
#elabOverlay .elab-v4-btn:disabled,
#agencyPairingDrawerOverlay .elab-v4-btn.is-disabled,
#agencyPairingDrawerOverlay .elab-v4-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#elabOverlay .elab-v4-btn.is-disabled:hover,
#elabOverlay .elab-v4-btn:disabled:hover,
#agencyPairingDrawerOverlay .elab-v4-btn.is-disabled:hover,
#agencyPairingDrawerOverlay .elab-v4-btn:disabled:hover {
    background: var(--surface);
    border-color: var(--border);
}

/* —— Bulk Storage row (gray card + monospace inputs + Apply right-aligned) —— */
#elabOverlay .elab-v4-storage-row,
#agencyPairingDrawerOverlay .elab-v4-storage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fafaf9;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
    gap: 14px;
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-storage-left,
#agencyPairingDrawerOverlay .elab-v4-storage-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-storage-lbl,
#agencyPairingDrawerOverlay .elab-v4-storage-lbl {
    color: #a8a29e;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 6px;
}
#elabOverlay .elab-v4-storage-inline,
#agencyPairingDrawerOverlay .elab-v4-storage-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ink-secondary, #525252);
    font-family: ui-monospace, Menlo, monospace;
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-storage-input,
#agencyPairingDrawerOverlay .elab-v4-storage-input {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 4px 8px;
    border-radius: 4px;
    font: 11.5px ui-monospace, Menlo, monospace;
    width: 60px;
    text-align: center;
    height: 26px;
    box-sizing: border-box;
}
#elabOverlay .elab-v4-storage-input-tight,
#agencyPairingDrawerOverlay .elab-v4-storage-input-tight { width: 40px; }
#elabOverlay .elab-v4-storage-input:focus,
#agencyPairingDrawerOverlay .elab-v4-storage-input:focus {
    outline: none;
    border-color: #ea580c;
    box-shadow: 0 0 0 2px #ffedd5;
}

/* —— Photo thumb (gray gradient w/ "img" text — replaces camera SVG) ——
   Override the outer .embryo-photo-cell green dashed-border / gradient bg so
   the inner gray .elab-v4-thumb stands alone (matches the v4c mockup). Keep
   .has-photo state untouched — once an image lands, the existing rounded
   green-bordered <img> styling still applies. */
#elabOverlay .embryo-photo-cell,
the existing rounded
   green-bordered <img> styling still applies. */
#agencyPairingDrawerOverlay .embryo-photo-cell {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
}
#elabOverlay .embryo-photo-cell:not(.has-photo):hover,
#agencyPairingDrawerOverlay .embryo-photo-cell:not(.has-photo):hover {
    box-shadow: none;
}
#elabOverlay .embryo-photo-cell.drag-over,
#agencyPairingDrawerOverlay .embryo-photo-cell.drag-over {
    background: transparent;
    box-shadow: 0 0 0 2px #ea580c;
    border-radius: 5px;
}
#elabOverlay .elab-v4-thumb,
#agencyPairingDrawerOverlay .elab-v4-thumb {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: linear-gradient(135deg, #e7e5e4, #d6d3d1);
    border: 1px solid #d6d3d1;
    display: grid;
    place-items: center;
    color: #a8a29e;
    font-size: 9px;
    pointer-events: none;
}
#elabOverlay .embryo-photo-cell.drag-over .elab-v4-thumb,
#agencyPairingDrawerOverlay .embryo-photo-cell.drag-over .elab-v4-thumb {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    border-color: #ea580c;
}

/* —— Footer (v4c bg-gray + left culture pill + right action group) —— */
#elabOverlay .elab-drawer-footer,
#agencyPairingDrawerOverlay .elab-drawer-footer {
    justify-content: space-between;
    background: #fafaf9;
    padding: 12px 22px;
}
#elabOverlay .elab-v4-footer-left,
#agencyPairingDrawerOverlay .elab-v4-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#elabOverlay .elab-v4-footer-right,
#agencyPairingDrawerOverlay .elab-v4-footer-right {
    display: flex;
    gap: 6px;
    align-items: center;
}
#elabOverlay .elab-v4-culture-pill,
#agencyPairingDrawerOverlay .elab-v4-culture-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    color: var(--ink-secondary, #525252);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, Menlo, monospace;
}
#elabOverlay .elab-v4-culture-dot,
#agencyPairingDrawerOverlay .elab-v4-culture-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}
#elabOverlay .elab-v4-culture-ended,
#agencyPairingDrawerOverlay .elab-v4-culture-ended {
    color: #78716c;
}

/* Save button: ⌘S kbd hint inside */
#elabOverlay .elab-v4-save-btn,
#agencyPairingDrawerOverlay .elab-v4-save-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#elabOverlay .elab-v4-save-kbd,
#agencyPairingDrawerOverlay .elab-v4-save-kbd {
    font: 10px ui-monospace, Menlo, monospace;
    background: rgba(255, 255, 255, 0.18);
    color: #fafaf9;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    margin-left: 4px;
    letter-spacing: 0.02em;
}

/* ==================== OPU Mega-Menu ==================== */
.opu-mega-wrap {
    position: relative;
}
.opu-mega-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-width: calc(100vw - 80px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06);
    padding: 20px 24px;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.opu-mega-menu.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  Mobile — let wide data tables scroll horizontally instead of clipping.
 *
 *  The desktop rule at L166 (#contentArea table{overflow:hidden; width:100%})
 *  chops off the right-hand columns on narrow viewports. Rather than touching
 *  that load-bearing rule, we override it only below 768px:
 *    - #contentArea itself becomes the horizontal scroll container
 *    - tables take their natural width (max-content) and no longer clip
 *    - cell padding + font shrink a notch so more columns fit on-screen
 *
 *  Trade-off: the sticky thead on #patientJourneyView / #tabContent14 goes
 *  inert on mobile (the new overflow-x scroll ancestor breaks position:sticky).
 *  Acceptable — sticky headers aren't very useful on a phone anyway, since the
 *  user is scrolling sideways, not down. Revisit if we do a full responsive
 *  redesign (card-per-row pattern) later.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #contentArea {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #contentArea table {
    width: max-content;
    min-width: 100%;
    overflow: visible;
  }
  #contentArea thead th,
  #contentArea td {
    padding: 10px 10px;
    font-size: 12.5px;
  }
  /* Modal tables (patient edit forms etc.) — same treatment, own scroll ctx */
  .modal .modal-content {
    max-width: 100vw;
  }
  .modal table {
    width: max-content;
    min-width: 100%;
  }
  .modal .modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ====================================================================
   Delete-embryo dialog — shared with mobile (mobile-app.css has the
   same rule names with mobile-only tokens). Hardcoded values here so
   the dialog renders correctly inside the desktop shell which doesn't
   load mobile-app.css and may not define the mobile theme tokens.
   ==================================================================== */
.fz-dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(11, 18, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.fz-dlg-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.fz-dlg {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  box-shadow: 0 16px 40px rgba(11, 18, 32, 0.30), 0 4px 12px rgba(11, 18, 32, 0.18);
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fz-dlg-overlay.open .fz-dlg {
  transform: translateY(0) scale(1);
}
.fz-dlg-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fz-dlg-close:hover,
.fz-dlg-close:active {
  background: #f1f5f9;
  color: #0f172a;
}
.fz-dlg-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  padding-right: 28px;
}
.fz-dlg-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}
.fz-dlg-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.fz-dlg-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #0f172a;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}
.fz-dlg-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.fz-dlg-btn:active {
  background: #e2e8f0;
  border-color: #3b82f6;
  transform: scale(0.99);
}
.fz-dlg-btn-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.fz-dlg-btn-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Testing role — 19 panels, some with 20+ indicator columns (CBC, Urine).
 * Wrap each panel's <table> in .testing-table-scroll to allow horizontal
 * scroll instead of bursting #contentArea. Indicator <th>s also get to
 * wrap so long names like "Antibodies to thyroperoxidase (Anti TPO)"
 * stack vertically rather than forcing the column wider.
 * ═══════════════════════════════════════════════════════════════════════ */
/* All selectors are prefixed with #contentArea so specificity (0,1,1,N+)
 * beats the bare #contentArea rules above (0,1,0,N) — otherwise nowrap /
 * uppercase / td:last-child{display:flex} from the global table block win
 * and the indicator headers overflow + actions break their row. */
#contentArea .testing-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
#contentArea .testing-table-scroll > table {
  width: max-content;
  min-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#contentArea .testing-table-scroll thead th {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  padding: 10px 8px;
  vertical-align: bottom;
  text-transform: none;     /* override #contentArea th uppercase  */
  letter-spacing: 0;        /* override #contentArea th 0.06em     */
  font-size: 11px;
}
/* Indicator columns — inner div with explicit width forces wrap;
 * table-cell max-width is unreliable with long unbreakable strings. */
#contentArea .testing-table-scroll thead th.testing-ind .testing-ind-label {
  width: 80px;              /* th width 96px - padding 8*2 = 80px usable */
  display: block;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-transform: none;
  letter-spacing: 0;
}
#contentArea .testing-table-scroll thead th.testing-ind .testing-ind-unit {
  font-size: 10px;
  color: var(--ink-faint);
  font-weight: 400;
}
#contentArea .testing-table-scroll tbody td {
  padding: 10px 10px;
  vertical-align: middle;
  font-size: 12.5px;
}
/* Indicator data cells stay narrow too — value + unit string can run long.  */
#contentArea .testing-table-scroll tbody td.testing-ind-cell {
  max-width: 120px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Override #contentArea td:last-child {display:flex} which throws the
 * Actions column off its row in this scope. */
#contentArea .testing-table-scroll tbody td:last-child {
  display: table-cell;
  text-align: center;
  padding: 10px 10px;
}
#contentArea .testing-table-scroll tbody td:last-child .btn-action {
  display: inline-flex;
}
/* td:first-child has font-weight:500 globally — stays the same here.   */

/* ==================== Appointment TYPE cell tooltip ====================
   Doctor appointments table 的 TYPE 列 hover 出子项详情。
   不用浏览器原生 title= (黑底 + I-beam,丑且不可定制) 也不用 ::after,
   改用 portal floating panel:JS 把 .appt-type-tt 挂在 <body> 下,fixed
   定位 + 视口边界检测自动翻面 — 避开 filter 栏遮挡 / 表格 overflow 裁切 / 最
   后几行被底部裁掉。保持 white-space: pre-wrap 让 \n 换行生效。 */
td.appt-type-cell { cursor: default; }
.appt-type-tt {
    position: fixed;
    display: none;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
    white-space: pre-wrap;
    box-shadow: var(--shadow-float);
    z-index: 10000;
    pointer-events: none;
    min-width: 220px;
    max-width: 380px;
    width: max-content;
    text-align: left;
}

/* MPC (Tab 19) patient-card selected state. v1.2.94 (2026-05-19):
   replaced the Tailwind ring-2/ring-emerald-400/bg-emerald-50 trio with
   an explicit rule because the CDN JIT intermittently dropped the ring
   classes, leaving the click visually unconfirmed. !important wins
   over the inline bg-white the card carries by default. */
.cycle-card.cycle-card-selected {
    background: var(--surface-dim) !important;
    box-shadow: inset 0 0 0 1px var(--ink-secondary) !important;
    border-color: transparent !important;
}
.cycle-card:not(.cycle-card-selected):hover {
    background: var(--surface-dim);
}

/* Cockpit Save button — flat ghost text, replaces the legacy purple round icon.
   Scoped to cockpit (.save-icon-btn is still used by global modals). */
.cockpit-save-btn {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cockpit-save-btn:hover {
    background: var(--surface-dim);
    color: var(--ink);
    border-color: var(--ink-muted);
}
.cockpit-save-btn:active {
    background: var(--surface-muted);
}

/* ============================================================ */
/* Tab 64 — Medical Certificates (Form IV-100/ა)                */
/* WYSIWYG A4 sheet rendered on-screen; @media print emits the   */
/* sheet alone as the printed/PDF output (doctor signs by hand). */
/* ============================================================ */

.mc-a4-sheet {
    width: 210mm;
    min-height: 297mm;
    padding: 18mm 16mm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    color: #000;
    font-family: 'Times New Roman', 'Sylfaen', Georgia, serif;
    font-size: 10pt;
    line-height: 1.35;
    box-sizing: border-box;
}

.mc-field {
    margin-bottom: 10px;
}

.mc-label {
    font-size: 9pt;
    color: #000;
    line-height: 1.3;
    margin-bottom: 2px;
}

.mc-sublabel {
    display: block;
    font-size: 9pt;
    color: #000;
    line-height: 1.3;
}

.mc-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font: inherit;
    font-size: 10pt;
    padding: 2px 4px;
    color: #000;
    box-sizing: border-box;
}

.mc-input:focus {
    outline: 1px dashed #2563eb;
    background: #eff6ff;
}

textarea.mc-input {
    border: 1px solid #d1d5db;
    border-radius: 2px;
    /* textarea-autogrow.js 按内容自动长高，手动拖拽手柄已多余且会与之打架
       （拖大后一打字又被弹回内容高度）。!important 压过模板里的内联 resize:vertical。 */
    resize: none !important;
    font-family: inherit;
}

.mc-bold {
    font-weight: bold;
}

.mc-rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin-top: 4px;
}

.mc-rx-table th,
.mc-rx-table td {
    border: 1px solid #000;
    padding: 3px 5px;
    text-align: left;
    vertical-align: top;
}

.mc-rx-table th {
    background: #f3f4f6;
    font-weight: bold;
}

.mc-rx-input {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 9pt;
    padding: 1px 2px;
}

.mc-rx-input:focus {
    outline: 1px dashed #2563eb;
    background: #eff6ff;
}

@media print {
    /* Hide all app chrome.
     * `:not(.lab-stats-printing)` excludes the Lab-Stats PDF export, which lifts
     * #labStatsView (not #mainContent) to <body> top and drives its own print
     * stylesheet — otherwise this rule's !important would blank that export. */
    body:not(.lab-stats-printing) > *:not(#mainContent),
    #sidebar,
    #topBar,
    .mc-toolbar,
    .mc-left-pane,
    .table-toolbar {
        display: none !important;
    }
    #mainContent,
    .tab-content,
    #tabContent64,
    #medicalCertsView,
    .mc-tab-root,
    .mc-right-pane,
    .mc-a4-wrap {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        flex: none !important;
        width: auto !important;
        border: none !important;
    }
    .mc-a4-sheet {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 10mm 12mm !important;
        page-break-after: always;
    }
    /* Strip input chrome — make fields look like static text */
    .mc-input,
    .mc-rx-input {
        border: none !important;
        background: transparent !important;
        color: #000 !important;
        -webkit-appearance: none;
        appearance: none;
    }
    .mc-input:not(textarea) {
        border-bottom: 1px solid #000 !important;
    }
    /* textarea-autogrow.js 把屏幕上的高度写成 inline style.height（按内容长高）。
       打印时必须 height:auto，让文本回归分页文档流，否则那段 inline px 会把 A4
       撑过 297mm、挤乱签名/页脚/分页。屏幕长高、打印照常分页。 */
    textarea.mc-input {
        height: auto !important;
        overflow: visible !important;
    }
    .mc-rx-table,
    .mc-rx-table th,
    .mc-rx-table td {
        border: 1px solid #000 !important;
    }
    @page { size: A4; margin: 0; }
}

/* ============================================================ */
/* v1.3.36 — Patient Forms hub (Tab 107/108/109/110/111)        */
/* Unified styling: all five forms share the "A4 sheet + under- */
/* lined field + Times New Roman" look pioneered by Form 100    */
/* (Tab 64 Medical Certificates). Before this block the cons-*  */
/* / intake-* / pe-* / opd-* class names had NO CSS rules at    */
/* all — the forms inherited browser-default <input> boxes and  */
/* looked nothing like the government PDF template they're      */
/* meant to mirror.                                              */
/* ============================================================ */

/* A4 sheet wrappers — all four new forms.
   Selectors duplicated rather than aliased to .mc-* so future
   per-form tweaks don't accidentally cross-pollute. */
.cons-a4-wrap,
.opd-a4-wrap,
.intake-a4-wrap,
.cons-a4-wrap,
.opd-a4-wrap,
.pe-a4-wrap,
.mc-a4-wrap {
    overscroll-behavior: contain;
    padding: 24px;
    background: var(--surface-dim);
    overflow-y: auto;
    flex: 1;
}
.cons-a4-sheet,
.opd-a4-sheet,
.intake-a4-sheet,
.pe-a4-sheet {
    width: 210mm;
    min-height: 297mm;
    padding: 18mm 16mm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    color: #000;
    font-family: 'Times New Roman', 'Sylfaen', Georgia, serif;
    font-size: 10pt;
    line-height: 1.35;
    box-sizing: border-box;
}

/* Field block (label + control) */
.cons-field {
    margin-bottom: 10px;
}

/* Field label — small grey-on-white government-form caption */
.cons-label {
    font-size: 9pt;
    color: #000;
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Single-line and textarea inputs — underline-only style */
.cons-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font: inherit;
    font-size: 10pt;
    padding: 2px 4px;
    color: #000;
    box-sizing: border-box;
}
.cons-input:focus {
    outline: 1px dashed #2563eb;
    background: #eff6ff;
}
textarea.cons-input {
    border: 1px solid #d1d5db;
    border-radius: 2px;
    /* 见 textarea.mc-input 同款注释：交给 textarea-autogrow.js 自动长高。 */
    resize: none !important;
    font-family: inherit;
}
/* 病史表自由文本框无公共 class（按 id 前缀命中），同样关掉手动拖拽。 */
textarea[id^="avField_"] {
    resize: none !important;
}
select.cons-input {
    background: white;  /* select needs an opaque bg; otherwise it shows table cells through */
}

/* Section divider — bold gray-blue band that mirrors the PDF's
   numbered subsection headers. */
.cons-section {
    font-size: 11pt;
    font-weight: bold;
    color: #1e3a8a;
    border-bottom: 1px solid #93c5fd;
    padding-bottom: 3px;
    margin: 16px 0 8px;
    background: linear-gradient(180deg, transparent, transparent 95%, #93c5fd 95%);
}

/* Grid utilities — same column counts as mc-* sub-grids */
.cons-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.cons-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 12px; }
.cons-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; }

/* Bordered tables (prescriptions, prior treatments) — match mc-rx-table */
.cons-rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin-top: 4px;
}
.cons-rx-table th,
.cons-rx-table td {
    border: 1px solid #000;
    padding: 3px 5px;
    text-align: left;
    vertical-align: top;
}
.cons-rx-table th {
    background: #f3f4f6;
    font-weight: bold;
}
.cons-rx-input, .it-rx-input, .it-tx-input {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 9pt;
    padding: 1px 2px;
}
.cons-rx-input:focus,
.it-rx-input:focus,
.it-tx-input:focus {
    outline: 1px dashed #2563eb;
    background: #eff6ff;
}

/* Tab-root containers + toolbars — match Form 100 chrome */
.cons-tab-root,
.opd-tab-root,
.pe-tab-root,
.intake-tab-root,
.pf-hub-root {
    display: flex;
    height: calc(100vh - 64px);
    background: white;
}

/* Patient Forms hub — record-picker hover dropdown on the tab chips.
   The menu sits flush under the tab (top:100%) with a transparent top
   padding so moving the cursor from chip to menu keeps :hover alive and
   the panel doesn't flicker shut. Closing is automatic on mouse-out. */
.pf-rec-tab { position: relative; }
.pf-rec-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    padding-top: 6px;          /* hover bridge — no dead gap between chip and panel */
    min-width: 210px;
    max-width: 340px;
}
.pf-rec-tab:hover .pf-rec-menu,
.pf-rec-menu:hover { display: block; }
.pf-rec-menu-inner {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
    padding: 6px;
    max-height: 340px;
    overflow-y: auto;
}
.pf-rec-menu-inner > button:hover { background: var(--surface-muted) !important; }
/* A menu carrying flyout submenus must NOT clip horizontally, so the
   submenu can escape to the right. (overflow-y:auto would force overflow-x
   to auto and clip it.) These menus are short, so dropping the scroll is ok. */
.pf-rec-menu-inner.has-flyout { overflow: visible; max-height: none; }

/* Second-level flyout (Pre-OPU Eval record → Summary/PHQ-9/GAD-7/VTE).
   Opens to the right of the hovered record row. */
.pf-rec-subitem { position: relative; }
.pf-rec-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -6px;                  /* line the first item up with the record row */
    padding-left: 6px;          /* hover bridge — no dead gap */
    min-width: 150px;
    z-index: 61;
}
.pf-rec-subitem:hover .pf-rec-submenu,
.pf-rec-submenu:hover { display: block; }
.pf-rec-submenu-inner {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
    padding: 6px;
}
.pf-rec-submenu-inner > button { width: 100%; }
.pf-rec-submenu-inner > button:hover { background: var(--surface-muted) !important; }
@media print { .pf-rec-menu, .pf-rec-submenu { display: none !important; } }

.cons-toolbar,
.opd-toolbar,
.pe-toolbar,
.intake-toolbar {
    display: flex;
    gap: 10px;
    row-gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    align-items: center;
    min-height: 32px;
}

/* Hub container — picks up the system's pale-blue surface tone so
   the A4 sheet floats on a backdrop that matches the rest of the app
   instead of the old hard #e5e7eb gray. */
#hubIntakeView,
#hubConsultationsView,
#hubPreopEvalView,
#hubOpuDayView,
#hubMedicalCertsView {
    background: var(--surface-dim);
}

/* Intake body — the section <details> tile, opens like a folder. */
.intake-tab-root details,
#hubIntakeView details,
#tabContent107 details {
    margin: 8px auto;
    max-width: 210mm;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: white;
}

/* When a Pre-OPU PHQ/GAD/VTE/Summary is active, also use the A4
   sheet look — wrap the right pane content in a white card. */
#hubPreopEvalView > div,
#preopEvalView .pe-right-pane > div:nth-child(3) {
    /* the right-pane content after chip strips */
}

/* Print rules — extend mc-* print to cover all five new tabs.
   Same strategy: hide chrome, expand sheet to full page, strip
   input box borders. */
@media print {
    .cons-toolbar,
    .cons-left-pane,
    .opd-toolbar,
    .opd-left-pane,
    .pe-toolbar,
    .pe-left-pane,
    .intake-toolbar,
    .intake-left-pane,
    .pf-hub-left,
    .pf-hub-right > div:first-child {  /* hub chip strip */
        display: none !important;
    }
    #tabContent107, #tabContent108, #tabContent109, #tabContent110, #tabContent111,
    #intakeView, #consultationsView, #preopEvalView, #opuDayView,
    #hubIntakeView, #hubConsultationsView, #hubPreopEvalView, #hubOpuDayView, #hubMedicalCertsView,
    .cons-tab-root, .cons-right-pane, .cons-a4-wrap,
    .opd-tab-root, .opd-right-pane, .opd-a4-wrap,
    .pe-tab-root, .pe-right-pane,
    .intake-tab-root, .intake-right-pane,
    .pf-hub-root, .pf-hub-right {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        flex: none !important;
        width: auto !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .cons-a4-sheet, .opd-a4-sheet, .pe-a4-sheet, .intake-a4-sheet {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 10mm 12mm !important;
        page-break-after: always;
    }
    .cons-input, .cons-rx-input, .it-rx-input, .it-tx-input {
        border: none !important;
        background: transparent !important;
        color: #000 !important;
        -webkit-appearance: none;
        appearance: none;
    }
    .cons-input:not(textarea):not(select) {
        border-bottom: 1px solid #000 !important;
    }
    /* textarea-autogrow.js 写 inline style.height 让屏幕上按内容长高；打印必须
       height:auto，否则那段 px 会撑破 A4 分页/挤乱签名页脚。见 mc-input 同款注释。
       avField_*（病史表自由文本框）一并兜底。 */
    textarea.cons-input,
    textarea[id^="avField_"] {
        height: auto !important;
        overflow: visible !important;
    }
    .cons-rx-table, .cons-rx-table th, .cons-rx-table td {
        border: 1px solid #000 !important;
    }
    /* Intake collapsible sections — auto-open all on print so nothing hides */
    .intake-tab-root details,
    #hubIntakeView details,
    #tabContent107 details {
        border: none !important;
        margin: 4mm 0 !important;
    }
    .intake-tab-root details summary,
    #hubIntakeView details summary,
    #tabContent107 details summary {
        font-weight: bold;
        background: transparent !important;
        padding-left: 0 !important;
        border-bottom: 1px solid #000;
        margin-bottom: 2mm;
    }
}