/* ============================================================================
   FONT FACE DECLARATIONS
   ============================================================================ */
@font-face {
    font-style: normal;
    font-weight: 100 700;
    src: url("../fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
        format("woff2");
    font-family: "Material Symbols Rounded";
    font-display: swap;
}

/* Inter - Variable Font (UI Text) */
@font-face {
    font-style: normal;
    font-weight: 300 900;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
    font-family: "Inter";
    font-display: swap;
}

/* JetBrains Mono - Variable Font (Code/Monospace) */
@font-face {
    font-style: normal;
    font-weight: 300 700;
    src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
    font-family: "JetBrains Mono";
    font-display: swap;
}

/* ============================================================================
   SECTION 1: CSS VARIABLES & THEME
   ============================================================================ */
:root {
    /* Primary Brand Colors */
    --primary: #6750a4;
    --primary-hover: #5b44a0;
    --primary-active: #4f378b;
    --primary-light: #7965af;
    --primary-transparent: rgba(103, 80, 164, 0.2);
    --primary-glow: rgba(103, 80, 164, 0.12);
    --google-cyan: #b69df8;
    --google-red: #d93025;
    --google-red300: #b9312a;
    --google-green300: #14868a;
    --google-green600: #1b5e20;
    --google-amber300: #fdd663;
    --google-amber700: #f2994a;
    --google-grey-400: #bdbdbd;

    /* IHC stain result colors — overridden in dark mode */
    --ihc-pos-color: #1e8e3e;
    --ihc-neg-color: #c5221f;
    --ihc-variable-color: #ffb300;
    --ihc-variable-neg-color: #ff6d00;
    --google-grey-500: #9e9e9e;

    /* Admin Colors */
    --admin-purple: #7d5260;
    --admin-purple-hover: #6b3f4e;
    --admin-purple-active: #5a2d3c;
    --admin-purple-bg: #ffd8e4;
    --admin-purple-shadow: rgba(125, 82, 96, 0.2);

    /* Background Palette */
    --bg-page: #f8f9fb;
    --bg-field: #fafafa;
    --bg-gray: #f3f4f6;
    --bg-gray-hover: #edeef1;
    --bg-gray-active: #e4e5e9;
    --bg-modal: rgba(0, 0, 0, 0.7);
    --bg-optional: #fcfcfc;
    --bg-toast: #323232;
    --bg-tooltip: rgba(45, 50, 60, 0.95);

    /* Border Palette */
    --border-main: #e0e2e6;
    --border-hover: #bdc1c6;
    --border-focus: var(--primary);
    --border-muted: #eeeeee;

    /* Text Palette */
    --text-main: #202124;
    --text-white: #ffffff;
    --text-muted: #5f6368;

    /* Transparency helpers */
    --shadow-black-04: rgba(0, 0, 0, 0.04);
    --shadow-black-05: rgba(0, 0, 0, 0.05);
    --shadow-black-06: rgba(0, 0, 0, 0.06);
    --shadow-black-07: rgba(0, 0, 0, 0.07);
    --shadow-black-08: rgba(0, 0, 0, 0.08);
    --shadow-black-10: rgba(0, 0, 0, 0.1);
    --shadow-black-12: rgba(0, 0, 0, 0.12);
    --shadow-black-15: rgba(0, 0, 0, 0.15);
    --shadow-black-18: rgba(0, 0, 0, 0.18);
    --shadow-black-20: rgba(0, 0, 0, 0.2);
    --shadow-charcoal-30: rgba(60, 64, 67, 0.3);
    --shadow-charcoal-15: rgba(60, 64, 67, 0.15);
    --alert-shadow: rgba(217, 48, 37, 0.2);
    --alert-bg-light: rgba(217, 48, 37, 0.08);
    --alert-bg-medium: rgba(217, 48, 37, 0.1);
    --alert-bg-medium-dark: rgba(217, 48, 37, 0.12);
    --alert-bg-dark: rgba(217, 48, 37, 0.15);
    --green-shadow: rgba(76, 175, 80, 0.3);
    --primary-shadow: rgba(103, 80, 164, 0.3);
    --primary-focus: rgba(103, 80, 164, 0.15);
    --overlay-white-08: rgba(255, 255, 255, 0.08);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-15: rgba(255, 255, 255, 0.15);
    --overlay-white-18: rgba(255, 255, 255, 0.18);
    --overlay-white-25: rgba(255, 255, 255, 0.25);
    --overlay-white-50: rgba(255, 255, 255, 0.5);
    --overlay-white-60: rgba(255, 255, 255, 0.6);

    /* Material 3 Elevation System */
    --shadow-elevation-1:
        0 1px 3px var(--shadow-black-08), 0 1px 2px var(--shadow-black-06);
    --shadow-elevation-2:
        0 4px 6px var(--shadow-black-07), 0 2px 4px var(--shadow-black-06);
    --shadow-elevation-3:
        0 10px 20px var(--shadow-black-08), 0 3px 6px var(--shadow-black-05);

    /* Other Components */
    --pill-blue-bg: #eaddff;
    --pill-blue-text: var(--primary);
    --pill-focus-bg: #ffd700;
    --pill-focus-text: #202124;
    --scrollbar-thumb: #dadce0;
    --scrollbar-thumb-hover: #bdc1c6;
    --tooltip-bg: #3c4043;
    --tooltip-txt: #ffffff;
    --alert-border: #f5c2c7;
    --alert-bg: #fff5f5;
    --alert-bg-hover: #fce8e6;
    --alert-text: #a51d14;

    /* Animation & Timing */
    --google-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-full: 50%;

    /* Material 3 Tonal Palette */
    --m3-primary-container: #eaddff;
    --m3-on-primary-container: #21005d;
    --m3-surface-container: #f5eeff;
    --m3-outline-variant: #cac4d0;

    /* Material 3 Expressive Radii */
    --radius-xl: 16px; /* Expressive cards, elevated sections */
    --radius-2xl: 24px; /* Modals, feature panels */
    --radius-3xl: 28px; /* Hero sections, primary CTAs */
    --radius-pill: 500px;

    /* Material 3 Expressive Gradients */
    --gradient-primary: linear-gradient(135deg, #6750a4 0%, #7965af 100%);
    --gradient-primary-alt: linear-gradient(135deg, #6750a4 0%, #5b44a0 100%);
    --gradient-primary-hover: linear-gradient(135deg, #5b44a0 0%, #4f378b 100%);
    --gradient-success: linear-gradient(135deg, #0f9d58 0%, #34a853 100%);
    --gradient-accent: linear-gradient(135deg, #b69df8 0%, #7965af 100%);
}

* {
    cursor: default;
    box-sizing: border-box;
}

/* Interactive element cursors */
button,
a,
[data-action],
select,
.clear-icon,
.web-link,
.dropdown-item,
.dropdown-trigger,
.token-preview-toggle,
.owner-indicator {
    cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
[contenteditable="true"] {
    cursor: text;
}

input:disabled,
button:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

/* ============================================================================
   SECTION 2: BASE & GLOBAL STYLES
   ============================================================================ */
body {
    margin: 0;
    background:
        radial-gradient(
            ellipse at 12% -5%,
            rgba(21, 88, 176, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 88% 108%,
            rgba(21, 88, 176, 0.03) 0%,
            transparent 45%
        ),
        var(--bg-page);
    padding: 0;
    height: 100vh;
    overflow: hidden;
    color: var(--text-main);
    line-height: 1.5;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Flexbox Utilities */
.flex-center {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-inline-center {
    display: inline-flex;
    align-items: center;
}

/* Common Focus State */
.focus-ring:focus,
.focus-ring:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-focus);
    border-color: var(--border-focus);
}

/* Common Transition */
.transition-standard {
    transition: all 0.2s var(--google-timing);
}

/* Scrollbar Utility */
.custom-scrollbar {
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border: 2px solid var(--bg-page);
    border-radius: 10px;
    background-color: var(--scrollbar-thumb);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

.material-symbols-rounded {
    display: inline-flex;
    vertical-align: middle;

    /* Hide text until font loads to prevent FOUT */
    visibility: hidden;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1;
    font-family: "Material Symbols Rounded";
    font-variation-settings:
        "wght" 300,
        "opsz" 24;
    letter-spacing: normal;
    direction: ltr;
    text-transform: none;
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Show icons when font is loaded */
.fonts-loaded .material-symbols-rounded {
    visibility: visible;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ============================================================================
   SECTION 3: LAYOUT COMPONENTS
   ============================================================================ */

/* App Ribbon (Top Navigation Bar) */
.app-ribbon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px var(--primary-shadow);
    background: var(--gradient-primary);
    padding: 8px 20px;
    height: 56px;
    color: var(--text-white);
}

.ribbon-left,
.ribbon-right,
.app-logo {
    display: flex;
    align-items: center;
}

.ribbon-left {
    gap: 15px;
}

.ribbon-right {
    gap: 10px;
}

.app-logo {
    gap: 10px;
    font-weight: 700;
    font-size: 1.3rem;
}

.app-logo-icon {
    width: 1.8em;
    height: 1.8em;
    color: var(--text-white);
}

.view-separator {
    color: var(--overlay-white-50);
    font-weight: 300;
    font-size: 1.2rem;
}

.view-name-display {
    opacity: 0.95;
    color: var(--text-white);
    font-weight: 500;
    font-size: 1rem;
}

/* Shared ribbon button styling */
.ribbon-btn,
.lang-options-toggle,
.dropdown-trigger {
    gap: 6px;
    transition:
        background 0.2s,
        border-color 0.2s;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--overlay-white-10);
    padding: 6px 14px;
    color: var(--text-white);
    font-weight: 500;
    font-size: 0.9rem;
}

.ribbon-btn:hover,
.lang-options-toggle:hover,
.dropdown-trigger:hover {
    border-color: var(--overlay-white-25);
    background: var(--overlay-white-25);
}

.ribbon-btn .material-symbols-rounded,
.lang-options-toggle .material-symbols-rounded {
    font-size: 1.2rem;
}

/* App Container & Views */
.app-view {
    display: none;
    height: calc(100vh - 56px);
}

.app-view.active {
    display: block;
    animation: fadeInUp 0.25s ease-out forwards;
}

/* Shared fade-in animation */
@keyframes fadeInUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.app-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    height: 100%;
    overflow: hidden;
}

@media (max-width: 900px) {
    .app-container {
        grid-template-columns: 1fr;
    }
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.flex-grow {
    flex: 1;
    min-height: 0;
}

/* Fieldset & Legend */
fieldset {
    display: flex;
    flex-direction: column;
    outline: none;
    box-shadow:
        0 2px 12px var(--shadow-black-06),
        0 1px 4px var(--shadow-black-04);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--radius-2xl);
    background: var(--bg-field);
    padding: 2px 24px 24px 24px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

legend {
    display: block;
    padding: 0 10px;
    width: 100%;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    text-transform: capitalize;
}

/* Mirrors legend styling for div replacements (only one <legend> per fieldset is valid) */
.panel-legend {
    padding: 6px 10px;
    width: 100%;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    text-transform: capitalize;
}

.legend-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.legend-flex .web-links,
.legend-flex .panel-switcher {
    margin-left: auto;
}

/* Scrollable Areas */
.scroll-area {
    flex-grow: 1;
    margin: 0 0 10px 0;
    outline: none;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 6px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.scroll-area::-webkit-scrollbar {
    width: 6px;
}

.scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
    border: 2px solid var(--bg-page);
    border-radius: 10px;
    background-color: var(--scrollbar-thumb);
}

.scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

.divider {
    flex-shrink: 0;
    margin: 15px 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border-main) 50%,
        transparent 100%
    );
    height: 1px;
}

/* ============================================================================
   SECTION 4: UI COMPONENTS
   ============================================================================ */

/* Language Options Panel */
.dropdown-wrapper,
.custom-dropdown-container {
    display: inline-block;
    position: relative;
}

.lang-panel {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    z-index: 1000;
    transition:
        opacity 0.15s var(--google-timing),
        transform 0.15s var(--google-timing),
        visibility 0.15s;
    margin-top: 1px;
    margin-bottom: 0;
    box-shadow: var(--shadow-elevation-2);
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-field);
    padding: 14px 22px;
    min-width: auto;
    white-space: nowrap;
}

/* Override global .hidden so the panel stays in flow and can animate */
.lang-panel.hidden {
    display: flex !important;
    transform: translateY(-8px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.lang-panel label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 !important;
    color: var(--text-main);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
}

.lang-panel select {
    appearance: none;
    transition: all 0.2s var(--google-timing);
    padding: 8px 32px 8px 12px;
    min-width: 80px;
    font-size: 0.875rem;
}

.lang-panel select:hover {
    border-color: var(--border-hover);
    background-color: var(--bg-gray-hover);
}

.lang-panel input[type="checkbox"] {
    transition: all 0.2s var(--google-timing);
}

.lang-panel input[type="checkbox"]:focus {
    outline: 2px solid var(--primary-transparent);
    outline-offset: 2px;
}

/* Dropdown Menus */
.dropdown-trigger {
    user-select: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 1000;
    animation: menuFadeIn 0.15s;
    box-shadow: var(--shadow-elevation-2);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-md);
    background-color: var(--bg-field);
    padding: 10px 0;
    min-width: 220px;
}

#userMenuContainer .dropdown-content {
    right: 0;
    left: auto;
}

.dropdown-content.show {
    display: block;
}

/* Shared dropdown item styling */
.dropdown-item,
.searchable-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: background 0.1s;
    padding: 12px 18px;
    color: var(--text-main);
    font-size: 0.9rem;
}

.dropdown-item:hover,
.searchable-dropdown .dropdown-item:hover,
.searchable-dropdown .dropdown-item.highlighted {
    background-color: var(--bg-gray-hover);
}

.dropdown-item .material-symbols-rounded {
    color: var(--text-muted);
    font-size: 1.25em;
}

.text-danger {
    color: var(--google-red) !important;
}

.text-danger .material-symbols-rounded {
    color: var(--google-red) !important;
}

@keyframes menuFadeIn {
    from {
        transform: translateY(-5px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Panel Switcher */
.panel-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: var(--radius-pill);
    background-color: var(--bg-gray-active);
    padding: 3px;
    height: 34px;
}

.panel-switcher button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    appearance: none;
    transition:
        color 0.18s var(--google-timing),
        background-color 0.18s var(--google-timing),
        box-shadow 0.18s var(--google-timing);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    padding: 5px 16px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1;
    font-family: inherit;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.panel-switcher button:hover:not(.active) {
    background-color: var(--bg-gray-hover);
    color: var(--text-main);
}

.panel-switcher button.active {
    box-shadow: var(--shadow-elevation-1);
    background-color: var(--primary);
    color: var(--text-white);
    font-weight: 700;
}

.panel-switcher button.active:focus {
    outline: none;
}

/* Token Type Switcher - Control icon size to fit container height */
#tokenTypeSwitcher button {
    gap: 4px;
}

#tokenTypeSwitcher button .material-symbols-rounded {
    font-size: 0.9rem;
}

/* Search Box */
.search-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: 5px;
    margin-bottom: 15px;
}

.search-box {
    display: flex;
    position: relative;
    flex: 1;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--m3-surface-container);
    padding: 0 16px;
    height: 48px;
}

.search-box:focus-within {
    background: var(--bg-field);
}

.search-box::before {
    flex-shrink: 0;
    content: "search";
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    font-family: "Material Symbols Rounded";
}

.search-box input {
    transition: all 0.2s;
    border: none;
    border-radius: 0;
    background: var(--m3-surface-container);
    padding: 0;
    width: 100%;
    color: var(--text-main);
    font-size: 0.95rem;
}

.search-box input::placeholder {
    color: var(--google-grey-400);
}

.search-box input:focus {
    outline: none;
    box-shadow: none;
}

/* Shared clear icon styling */
.search-box .clear-icon,
.searchable-dropdown .clear-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    color: var(--google-grey-500);
}

.search-box .clear-icon {
    right: 20px;
    cursor: pointer;
    font-size: 1.25rem;
}

.searchable-dropdown .clear-icon {
    right: 8px;
    cursor: pointer;
    font-size: 1.25rem;
}

.search-box input:not(:placeholder-shown) ~ .clear-icon,
.searchable-dropdown input:not(:placeholder-shown) ~ .clear-icon {
    opacity: 1;
    pointer-events: auto;
}

.search-box .clear-icon:hover,
.searchable-dropdown .clear-icon:hover {
    color: var(--google-red);
}

/* Template Table */
.template-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

.template-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 4px var(--primary-transparent);
    background: var(--gradient-primary);
}

.template-table th {
    border-bottom: none;
    padding: 12px 14px;
    color: var(--text-white);
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

#snomedTTable thead th,
#snomedMTable thead th {
    white-space: nowrap;
}

.template-table td {
    border-bottom: 1px solid var(--border-main);
    padding: 12px 14px;
}

.template-table tbody tr {
    transition: background-color 0.2s;
    background-color: var(--bg-field);
}

.template-table tbody tr.empty-row {
    background-color: var(--bg-field);
}

.template-table tbody tr.empty-row:hover {
    background-color: var(--bg-field);
}

.template-table tbody tr.empty-row td {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

.template-table tbody tr:hover {
    background-color: var(--bg-gray-hover);
}

.template-table tbody tr.selected {
    box-shadow: var(--shadow-elevation-1);
    border-left: 4px solid var(--primary);
    background: linear-gradient(
        90deg,
        var(--pill-blue-bg) 0%,
        var(--bg-field) 100%
    ) !important;
}

/* Subtle marker for user-owned (editable) templates */
.template-table tbody tr.is-editable {
    background-color: inherit;
}

.template-table tbody tr.is-editable:hover {
    background-color: var(--bg-gray-hover);
}

.template-table tbody tr.is-editable.selected {
    background-color: var(--pill-blue-bg) !important;
}

.template-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.template-shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.8rem;
}

.owner-indicator {
    color: var(--primary);
    font-size: 1em;
    line-height: 1;
}

.deleted-indicator {
    color: var(--google-red);
    font-size: 1em;
    line-height: 1;
}

.pending-indicator {
    animation: spin 1s linear infinite;
    color: var(--primary);
    font-size: 1em;
    line-height: 1;
}

.template-table tbody tr.is-pending {
    opacity: 0.7;
}

body.hide-chinese-terms .snomed-chinese-col {
    display: none;
}

.template-dx {
    overflow: hidden;
    color: var(--google-grey-500);
    font-size: 0.9rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Template table needs fixed layout for truncation */
#templateTable {
    table-layout: fixed;
}

#templateTable td {
    max-width: 0;
}

.data-table {
    display: none;
}

.data-table.active {
    display: table;
    animation: fadeIn 0.25s var(--google-timing);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Web Search Links */
.web-links {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border-main);
    border-radius: 8px;
    background-color: var(--pill-blue-bg);
    overflow: hidden;
}

/* Individual link style */
.web-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s var(--google-timing);
    cursor: pointer;
    border-right: 1px solid var(--border-main);
    border-radius: 0;
    background: transparent;
    padding: 0px 12px;
    height: 34px;
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
}

.web-link:last-child {
    border-right: none;
}

.web-link:hover {
    background-color: var(--pill-blue-bg);
    color: var(--primary);
}

.web-link .material-symbols-rounded {
    font-size: 1em;
}

/* Form Components */
.form-group {
    flex-shrink: 0;
    margin-bottom: 20px;
}

.form-group-compact {
    margin-top: -4px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.form-group-inline label {
    flex-shrink: 0;
    margin-bottom: 0;
    min-width: 150px;
}

.form-group-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
    margin-bottom: 20px;
}

.form-group-two-column .form-group {
    margin-bottom: 0;
}

.snomed-group {
    position: relative;
    margin-bottom: 14px;
    border: 1px solid var(--border-main);
    border-radius: 8px;
    padding: 16px 14px 4px;
}

.snomed-group-label {
    position: absolute;
    top: -9px;
    left: 10px;
    background: var(--bg-field);
    padding: 0 5px;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.snomed-group .form-group-two-column {
    margin-bottom: 6px;
}

@media (max-width: 900px) {
    .form-group-two-column {
        grid-template-columns: 1fr;
    }
}

/* Shared input styles */
.form-group input,
.form-group textarea,
.form-group select,
input[type="text"],
input[type="email"],
input[type="password"],
.searchable-dropdown input,
.lang-panel select {
    transition:
        box-shadow 0.2s,
        border-color 0.2s,
        background-color 0.2s;
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background-color: var(--m3-surface-container);
    padding: 10px 12px;
    width: 100%;
    color: var(--text-main);
    font-size: 0.95rem;
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
.searchable-dropdown input::placeholder {
    color: var(--google-grey-400);
}

/* Consolidated focus states */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
.searchable-dropdown input:focus,
.search-box:focus-within,
.cm-editor.cm-focused {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-focus);
    border-color: var(--border-focus);
    background-color: var(--bg-field);
}

.form-group textarea {
    font-family: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;
}

/* Keep search-box textbox tonal until focused */
.search-controls .search-box input {
    box-shadow: none;
    border-color: transparent;
    background-color: var(--m3-surface-container);
}

.search-controls .search-box input:focus {
    background-color: var(--bg-field);
}

/* CAP Input Panel Styles */
#capPanel.active .form-group {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#capInputText {
    flex: 1;
    min-height: 0;
    resize: none;
}

.form-group .helper-text {
    margin-top: 4px;
    color: var(--google-grey-500);
    font-size: 0.8rem;
}

.form-row-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Shared inline label styling */
.form-row-inline .inline-label,
#tokenBuilderPanel .inline-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 0.9rem;
    white-space: nowrap;
}

.form-row-inline .inline-label {
    font-weight: 600;
}

#tokenBuilderPanel .inline-label {
    margin-bottom: 8px;
    font-weight: 400;
}

.form-row-inline select {
    padding: 6px 10px;
    width: auto;
    min-width: 80px;
}

/* Custom Searchable Dropdown */
.searchable-dropdown {
    position: relative;
    width: 100%;
}

.searchable-dropdown input {
    padding: 10px 36px 10px 10px;
}

.searchable-dropdown .dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px var(--shadow-black-10);
    border: 1px solid var(--border-focus);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: var(--bg-field);
    max-height: 320px;
    overflow-y: auto;
}

.searchable-dropdown .dropdown-list.show {
    display: block;
}

.searchable-dropdown .dropdown-item {
    border-bottom: 1px solid var(--border-main);
    padding: 8px 10px;
}

.searchable-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.searchable-dropdown .dropdown-item .code {
    margin-left: 8px;
    color: var(--google-grey-500);
    font-size: 0.8rem;
}

.searchable-dropdown .dropdown-group-label {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-main);
    background: var(--bg-gray);
    padding: 6px 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.searchable-dropdown .no-results {
    padding: 8px 10px;
    color: var(--google-grey-500);
    font-style: italic;
    font-size: 0.9rem;
}

.searchable-dropdown .dropdown-item.selected {
    background-color: var(--primary-transparent);
    font-weight: 500;
}

.searchable-dropdown .dropdown-item.selected::before {
    vertical-align: middle;
    margin-right: 6px;
    content: "\e5ca";
    font-size: 1rem;
    font-family: "Material Symbols Rounded";
}

.text-muted {
    color: var(--google-grey-500);
    font-size: 0.9rem;
}

/* CodeMirror Template Editor */
.cm-editor {
    border: 1px solid var(--border-main);
    border-radius: var(--radius-sm);
    height: 35vh;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5;
}

.cm-editor .cm-scroller {
    overflow: auto;
    font-family: inherit;
}

.cm-editor .cm-content {
    padding: 2px;
    font-family: inherit;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.cm-editor.cm-focused {
    background-color: var(--bg-field);
}

.cm-fake-cursor {
    z-index: 1;
    background-color: var(--text-main);
    width: 1px;
    pointer-events: none;
}

.cm-fake-cursor.cm-fake-cursor-highlight {
    animation: blinker 1.06s steps(1) infinite;
    background-color: var(--primary);
    width: 1px;
}

@keyframes blinker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.cm-editor-host {
    width: 100%;
}

/* Shared token chip/highlight base styling */
.token-chip,
.token-highlight,
.token-highlight--active {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-bottom: 2px solid var(--shadow-black-10);
    border-radius: var(--radius-sm);
    background-color: var(--pill-blue-bg);
    padding: 0 6px;
    color: var(--pill-blue-text);
    font-weight: 600;
    overflow-wrap: break-word;
}

.token-chip {
    gap: 2px;
    opacity: 0.75;
    white-space: normal;
}

.token-highlight,
.token-highlight--active {
    display: inline;
    opacity: 0.75;
    transition: all 0.3s;
    line-height: 1;
}

/* Material icon sizing utilities */
.token-chip .material-symbols-rounded,
.condition-badge .material-symbols-rounded {
    vertical-align: middle;
    font-size: 0.875rem;
}

/* Textarea Wrapper for Token Highlighting */
.textarea-wrapper {
    display: flex;
    position: relative;
}

.builder-panel {
    display: none;
}

.builder-panel.active {
    display: flex;
    flex-direction: column;
    animation: fadeInRight 0.3s var(--google-timing);
}

@keyframes fadeInRight {
    from {
        transform: translateX(8px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Special input modifiers */
input[type="email"] {
    text-transform: lowercase;
}

input.optional-field {
    border-style: dashed;
    background-color: var(--bg-optional);
}

/* Radio/Checkbox Buttons */
.radio-group,
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-option label,
.checkbox-option label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    margin: 0 !important;
    border: 1px solid var(--border-main);
    border-radius: 18px; /* Material 3 Expressive: more expressive pill shape */
    background-color: var(--bg-gray);
    padding: 6px 14px;
    font-weight: 500;
    font-size: 0.9rem;
}

.checkbox-option label {
    border-radius: 8px; /* Material 3 Expressive: refined checkbox shape */
}

/* M3 Chip type indicators */
.radio-option:not(.radio-option--null) label::before {
    content: "radio_button_unchecked";
    color: var(--google-grey-400);
    font-size: 14px;
    line-height: 1;
    font-family: "Material Symbols Rounded";
}

.radio-option:not(.radio-option--null)
    input[type="radio"]:checked
    + label::before {
    content: "radio_button_checked";
    color: var(--text-white);
}

.checkbox-option label::before {
    content: "check_box_outline_blank";
    color: var(--google-grey-400);
    font-size: 14px;
    line-height: 1;
    font-family: "Material Symbols Rounded";
}

.checkbox-option input[type="checkbox"]:checked + label::before {
    content: "check";
    color: var(--text-white);
}

.radio-option:hover label,
.checkbox-option:hover label {
    border-color: var(--primary);
    background-color: var(--pill-blue-bg);
}

.radio-option input[type="radio"]:checked + label,
.checkbox-option input[type="checkbox"]:checked + label {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px var(--primary-glow),
        0 2px 4px var(--primary-shadow);
    border-color: var(--primary);
    background: var(--gradient-primary-alt);
    color: var(--text-white);
}

/* Null/Blank Option Styling */
.radio-option--null label {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.85;
    border-style: dashed;
    background-color: var(--bg-optional);
    color: var(--google-grey-500);
}

.radio-option--null label::before {
    display: inline-block;
    position: relative;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        currentColor 45%,
        currentColor 55%,
        transparent 55%
    );
    width: 12px;
    height: 12px;
    content: "";
}

.radio-option--null:hover label {
    opacity: 1;
    border-style: solid;
    border-color: var(--google-grey-400);
    background-color: var(--bg-gray-hover);
}

.radio-option--null input[type="radio"]:checked + label {
    opacity: 1;
    box-shadow: 0 2px 10px var(--shadow-black-15);
    border: 1px solid var(--google-grey-500);
    background-color: var(--google-grey-400);
    color: var(--text-white);
}

/* Combo Option Styling */
.combo-placeholder {
    border-radius: 4px;
    background-color: var(--primary-transparent);
    padding: 1px 5px;
    color: var(--primary);
    font-weight: 700;
}

/* Make placeholders distinctive when radio/checkbox option is selected */
.radio-option input[type="radio"]:checked + label .combo-placeholder,
.checkbox-option input[type="checkbox"]:checked + label .combo-placeholder {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.28);
    color: var(--text-white);
    font-weight: 700;
}

.combo-input {
    margin-top: 3px;
}

/* Buttons */
button {
    position: relative;
    transition:
        all 0.2s var(--google-timing),
        transform 0.1s var(--google-timing);
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    overflow: hidden;
    font-weight: 600;
}

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

button:disabled {
    cursor: not-allowed;
    border: 1px solid var(--border-main);
    background-color: var(--bg-gray) !important;
    color: var(--google-grey-500) !important;
}

/* Button focus styles for keyboard navigation */
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.primary-btn,
.secondary-btn,
.danger-btn,
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.primary-btn {
    border-radius: 12px; /* Material 3 Expressive: larger, more organic shape */
    background: var(--gradient-primary-alt);
    color: var(--text-white);
}

.primary-btn:hover:not(:disabled) {
    box-shadow:
        0 4px 8px var(--shadow-black-12),
        0 2px 4px var(--shadow-black-08),
        0 0 12px var(--primary-glow);
    background: var(--gradient-primary-hover);
}

.primary-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.secondary-btn {
    border: 1px solid var(--border-main);
    border-radius: 10px; /* Material 3 Expressive: refined shape */
    background-color: var(--bg-field);
    color: var(--primary);
}

.secondary-btn:hover:not(:disabled) {
    box-shadow: var(
        --shadow-elevation-2
    ); /* Material 3 Expressive: enhanced elevation */
    border-color: var(--border-hover);
    background-color: var(--bg-gray);
}

.danger-btn {
    transition:
        background-color 150ms var(--google-timing),
        border-color 150ms var(--google-timing),
        color 150ms var(--google-timing),
        box-shadow 150ms var(--google-timing);
    border: 1.5px solid var(--alert-border);
    border-radius: 12px;
    background-color: var(--alert-bg);
    color: var(--google-red);
}

.danger-btn:hover:not(:disabled) {
    box-shadow:
        0 4px 8px var(--alert-shadow),
        0 2px 4px var(--shadow-black-08),
        0 0 12px var(--alert-bg-dark);
    border-color: var(--google-red);
    background-color: var(--google-red);
    color: #ffffff;
}

.danger-btn:focus-visible {
    outline: 3px solid var(--google-red);
    outline-offset: 2px;
    background-color: var(--alert-bg-hover);
}

.admin-btn {
    position: relative;
    border: 1px solid var(--admin-purple);
    background-color: var(--admin-purple-bg);
    color: var(--admin-purple);
}

.admin-btn:hover:not(:disabled) {
    box-shadow:
        0 1px 3px var(--admin-purple-shadow),
        0 0 8px var(--admin-purple-shadow);
    border-color: var(--admin-purple-hover);
    background-color: var(--admin-purple);
    color: var(--text-white);
}

.admin-btn:focus-visible {
    outline: 3px solid var(--admin-purple);
    outline-offset: 2px;
}

.admin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.link-btn {
    transition:
        color 0.2s var(--google-timing),
        text-decoration-color 0.3s var(--google-timing);
    border: none;
    background: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
}

.link-btn:hover {
    color: var(--primary-hover);
    text-decoration-color: var(--primary-hover);
}

.actions {
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--border-main);
    padding-top: 15px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
}

/* Ripple Effect */
.ripple {
    position: absolute;
    transform: scale(0);
    animation: ripple-animation 1s ease-out;
    border-radius: 50%;
    background-color: var(--overlay-white-60);
    pointer-events: none;
}

.secondary-btn .ripple,
.panel-switcher button .ripple,
.panel-switcher button .ripple {
    background-color: var(--primary-shadow);
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Icon animation on hover */
button:hover:not(:disabled) .material-symbols-rounded {
    transform: scale(1.1);
    transition: transform 0.2s var(--google-timing);
}

button .material-symbols-rounded {
    transition: transform 0.2s var(--google-timing);
}

/* ============================================================================
   SECTION 5: TOKEN & REPORT SPECIFIC STYLES
   ============================================================================ */

/* Template Display */
.template-display {
    font-size: 1rem;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    white-space: pre-wrap;
}

#selectedTemplateView:empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#selectedTemplateView:empty::before {
    margin-bottom: 10px;
    content: "list_alt";
    color: var(--border-main);
    font-size: 2.5rem;
    line-height: 1;
    font-family: "Material Symbols Rounded";
    font-variation-settings:
        "wght" 200,
        "opsz" 48;
}

#selectedTemplateView:empty::after {
    content: "Select a template from the library →";
    color: var(--google-grey-400);
    font-size: 0.875rem;
    font-family: Inter, sans-serif;
    text-align: center;
    white-space: normal;
}

.section-header {
    position: sticky;
    top: 0;
    z-index: 10;
    will-change: position;
    margin-top: 12px;
    margin-bottom: 8px;
    background: var(--bg-field);
    padding: 6px 0 0 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    white-space: normal;
}

/* Shortcut headers placed outside scroll-areas don't need sticky */
#selectedTemplateShortcutHeader,
#sourceTemplateShortcutHeader,
#draftTemplateShortcutHeader {
    position: static;
    will-change: auto;
    margin-top: 5px;
}

#reportView[contenteditable="true"] {
    transition: all 0.2s;
    cursor: text;
    outline: none;
    border: 1px solid transparent;
    padding: 10px;
}

#reportView[contenteditable="true"]:focus {
    box-shadow: 0 0 0 1px var(--primary-transparent);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background-color: var(--bg-field);
}

/* Token Highlighting */
.token-index {
    vertical-align: super;
    opacity: 0.5;
    margin-right: 1px;
    font-size: 0.6rem;
}

.token-chip-active {
    position: relative;
    transform: translateY(-1px) scale(1.03);
    opacity: 1;
    z-index: 1;
    box-shadow:
        0 2px 6px var(--shadow-black-15),
        0 1px 2px var(--shadow-black-10);
    border-radius: var(--radius-sm);
    background-color: var(--pill-focus-bg);
    color: var(--pill-focus-text);
    font-weight: 700;
}

.token-highlight--active {
    opacity: 1;
    background-color: var(--pill-focus-bg);
    color: var(--pill-focus-text);
}

/* Token Input Groups */
.token-group {
    position: relative;
    transition: all 0.2s;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-muted);
    border-left: 4px solid transparent;
    padding: 8px 4px 8px 4px;
}

.token-group:hover {
    border-radius: 0 8px 8px 0;
    background-color: var(--bg-gray-hover);
}

.token-group:focus-within {
    border-left: 4px solid var(--primary);
    border-radius: 0 8px 8px 0;
    background-color: var(--bg-gray-hover);
}

/* Missing Field Highlighting */
.token-group.missing-field {
    animation: pulse-missing 2s ease-in-out infinite;
    border-left: 4px solid var(--google-red) !important;
    border-radius: 0 8px 8px 0;
    background-color: var(--alert-bg-light);
}

.token-group.missing-field.focused-missing {
    animation: none;
    background-color: var(--alert-bg-dark);
}

@keyframes pulse-missing {
    0%,
    100% {
        background-color: var(--alert-bg-light);
    }

    50% {
        background-color: var(--alert-bg-medium-dark);
    }
}

.token-group.missing-field::after {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 12px;
    background-color: var(--google-red);
    padding: 2px 8px;
    content: "Required";
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Clickable Submit Hint */
#submitHint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#submitHint .material-symbols-rounded {
    font-size: 1.1em;
}

#submitHint.clickable {
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 8px;
    padding: 8px 12px;
}

#submitHint.clickable:hover {
    transform: scale(1.02);
    background-color: var(--alert-bg-medium);
}

#submitHint.active {
    background-color: var(--alert-bg-dark);
    font-weight: 600;
}

@keyframes conditionalFieldEnter {
    from {
        transform: scaleY(0.85);
        transform-origin: top;
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}

/* Conditional Fields */
.conditional-field {
    transition:
        opacity 0.2s ease-in-out,
        max-height 0.25s ease-in-out;
    max-height: 800px; /* Required: gives max-height a value to transition FROM */
}

.conditional-field.hidden {
    opacity: 0;
    margin: 0;
    border: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none; /* Prevent clicks during fade-out */
}

/* Entrance animation class, applied on user-triggered reveals */
.conditional-field--entering {
    animation: conditionalFieldEnter 0.5s var(--google-timing) forwards;
}

.condition-hint {
    margin-top: 2px;
    margin-bottom: 4px;
    color: var(--google-grey-500);
    font-size: 0.8rem;
}

.condition-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 2px;
    color: var(--google-grey-500);
}

/* Conditional Settings in Token Builder */
#conditionalSettings {
    margin-top: var(--spacing-sm);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    padding: var(--spacing-md);
}

#conditionalSettings .form-group-inline {
    margin-bottom: var(--spacing-sm);
}

#conditionalSettings .helper-text {
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

/* ============================================================================
   SECTION 6: VALIDATION & ERROR STATES
   ============================================================================ */
.error-text {
    display: none;
    margin-top: 4px;
    color: var(--google-red);
    font-size: 0.9rem;
}

input.error {
    border-style: solid !important;
    border-color: var(--google-red) !important;
}

input.error + .error-text {
    display: block;
}

.submit-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    white-space: nowrap;
}

.submit-wrapper #templateLibrarySwitcher {
    align-self: center;
    margin-left: auto;
}

.info-hint {
    padding-left: 2px;
    color: var(--google-grey-500);
    font-size: 0.8rem;
}

/* SNOMED Info Display */
.snomed-info {
    font-size: 0.9rem;
}

.snomed-item {
    display: flex;
    margin-bottom: 6px;
}

.snomed-label {
    flex-shrink: 0;
    min-width: 100px;
    color: var(--google-grey-500);
    font-weight: 700;
}

.snomed-value {
    flex: 1;
}

.snomed-code {
    flex-shrink: 0;
    min-width: 100px;
    color: var(--text-main);
}

.snomed-codect {
    flex-shrink: 0;
    min-width: 150px;
    color: var(--text-main);
}

.snomed-code.snomed-link,
.snomed-codect.snomed-link,
.snomed-value.snomed-link {
    cursor: pointer;
}

/* ============================================================================
   SECTION 7: MODALS & OVERLAYS
   ============================================================================ */
.modal-overlay {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(8px);
    inset: 0;
    background: var(--bg-modal);
}

#warningModal {
    z-index: 2100;
}

.modal-card {
    box-shadow: var(--shadow-elevation-3);
    border-radius: var(
        --radius-2xl
    ); /* Material 3 Expressive: 24px for organic feel */
    background: var(--bg-field);
    padding: 24px;
    width: 100%;
    max-width: 600px;
}

.modal-card h3 {
    margin-top: 0;
}

.modal-card .actions {
    justify-content: flex-end;
    margin-top: 20px;
}

/* Toast Notifications */
#toast {
    display: flex;
    position: fixed;
    bottom: 32px;
    left: 50%;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
    z-index: 2000;
    backdrop-filter: blur(8px);
    transition:
        opacity 1s,
        transform 0.3s;
    box-shadow: var(--shadow-elevation-2);
    border-radius: 14px; /* Material 3 Expressive: refined notification shape */
    background: var(--bg-toast);
    padding: 14px 24px;
    pointer-events: none;
    color: var(--text-white);
    font-weight: 500;
    font-size: 1rem;
}

#toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   SECTION 8: TOOLTIPS
   ============================================================================ */
/* Modern Tippy.js Theme for PathoBench */
.tippy-box[data-theme~="pathobench"] {
    /* Enhanced glassmorphism effect */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);

    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;

    /* Modern layered shadow system */
    box-shadow:
        0 0 0 1px var(--overlay-white-10) inset,
        0 2px 4px var(--shadow-black-05),
        0 8px 16px var(--shadow-black-15),
        0 16px 32px var(--shadow-black-15);

    /* Refined border with subtle gradient */
    border: 1px solid var(--overlay-white-18);
    border-radius: 14px; /* Material 3 Expressive: refined tooltip shape */
    background-image: linear-gradient(
        135deg,
        var(--overlay-white-08) 0%,
        transparent 100%
    );

    /* Modern semi-transparent dark background with subtle gradient overlay */
    background-color: var(--bg-tooltip);

    /* Typography */
    color: var(--text-white);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    user-select: none;
}

.tippy-box[data-theme~="pathobench"] .tippy-content {
    position: relative;
    padding: 6px 10px;
}

/* Modern arrow styling */
.tippy-box[data-theme~="pathobench"] .tippy-arrow {
    filter: drop-shadow(0 -1px 1px var(--shadow-black-10));
    color: var(--bg-tooltip);
}

.tippy-box[data-theme~="pathobench"] .tippy-arrow::before {
    border-width: 7px;
}

/* Smooth entrance/exit animations */
.tippy-box[data-theme~="pathobench"][data-animation="shift-away"][data-state="hidden"] {
    transform: translateY(8px);
    opacity: 0;
}

.tippy-box[data-theme~="pathobench"][data-animation="shift-away"][data-state="visible"] {
    transform: translateY(0);
    opacity: 1;
}

/* Hover state for interactive tooltips */
.tippy-box[data-theme~="pathobench"][data-interactive]:hover {
    box-shadow:
        0 0 0 1px var(--overlay-white-15) inset,
        0 2px 4px var(--shadow-black-05),
        0 12px 24px var(--shadow-black-20),
        0 20px 40px var(--shadow-black-18);
    border-color: var(--overlay-white-25);
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tippy-box[data-theme~="pathobench"] {
        animation: none !important;
        transition: none !important;
    }

    button,
    button::after,
    button .material-symbols-rounded {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    button:active:not(:disabled) {
        transform: none;
    }

    .ripple {
        animation: none !important;
    }
}

/* ============================================================================
   SECTION 9: ANIMATIONS & TRANSITIONS
   ============================================================================ */
#dataEntryPanel,
#reportTextPanel {
    grid-area: stack;
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.fade-out {
    transform: translateY(15px) !important;
    visibility: hidden;
    opacity: 0 !important;
    pointer-events: none;
}

/* ============================================================================
   SECTION 10: UTILITY CLASSES
   ============================================================================ */
.hidden {
    display: none !important;
}

/* ============================================================================
   SECTION 11: TOKEN BUILDER
   ============================================================================ */

/* Token Template Row */
.token-template-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-template-row .searchable-dropdown {
    flex: 1;
}

.token-preview-dock {
    border-top: 1px solid var(--border-muted);
    background: var(--bg-page);
    padding-top: var(--spacing-sm);
    max-height: 25vh;
    overflow-y: auto;
}

.token-preview-dock .form-group {
    margin-bottom: 8px;
}

/* Checkbox styling for inline labels */
#tokenBuilderPanel .inline-label input[type="checkbox"],
.form-row-inline input[type="checkbox"],
.lang-panel input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

#conditionalFieldGroup > .inline-label {
    margin-left: calc(150px + var(--spacing-md));
}

/* Radio Options List */
#radioOptionsList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.radio-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: move;
}

.radio-option-row.dragging {
    opacity: 0.5;
}

.radio-option-row .drag-handle {
    display: flex;
    align-items: center;
    cursor: grab;
    color: var(--google-grey-500);
}

.radio-option-row .drag-handle:active {
    cursor: grabbing;
}

.radio-option-row input[type="text"] {
    flex: 1;
}

/* Icon button utility */
.radio-option-row .remove-option-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    padding: 4px;
    color: var(--google-grey-500);
}

.radio-option-row .remove-option-btn:hover:not(:disabled) {
    background-color: var(--alert-bg);
    color: var(--google-red);
}

.radio-option-row .remove-option-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
    color: var(--google-grey-500);
}

/* Token Preview Box */
.token-preview-box {
    border: 1px solid var(--border-main);
    border-radius: var(--radius-md);
    background-color: var(--bg-gray);
    padding: 8px;
    overflow-wrap: break-word;
}

.token-preview-box code {
    color: var(--google-grey-400);
    font-size: 0.8rem;
}

/* Icon toggle utility */
.token-preview-toggle,
.token-preview-label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.token-preview-toggle {
    transition: color 0.2s;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
}

.token-preview-label {
    gap: 6px;
    margin-bottom: 6px;
    line-height: 1.2;
}

.token-preview-toggle.active {
    color: var(--primary);
}

.token-preview-toggle.disabled {
    cursor: not-allowed;
    color: var(--google-grey-400);
}

.chinese-translation-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chinese-translation-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chinese-translation-row .searchable-dropdown {
    flex: 1;
}

.chinese-translation-result {
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
    background: var(--bg-field);
    padding: 8px 10px;
    min-height: 36px;
    color: var(--text-main);
    font-size: 0.85rem;
    overflow-wrap: break-word;
}

.chinese-translation-result.hidden {
    display: none;
}

/* Token Builder Add Buttons */
.token-builder-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 6px;
}

.token-builder-add-buttons .secondary-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Default-selection radio in token builder option rows */
.radio-option-row .option-default-radio {
    display: none;
    flex-shrink: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Show only for radio-type tokens */
.radio-options-list--radio-mode .option-default-radio {
    display: block;
}

/* Special option rows (null and other) — lock the read-only text label only */
.radio-option-row.special-null input[type="text"],
.radio-option-row.special-other input[type="text"] {
    background-color: var(--bg-gray);
    pointer-events: none;
    font-style: italic;
}

/* Field Order Panel */
.field-order-hint {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.field-order-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-order-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: default;
}

.field-order-row.dragging {
    opacity: 0.5;
}

.field-order-row.dragging .field-order-name {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-focus);
    border-color: var(--border-focus);
    background-color: var(--bg-field);
}

.field-order-row .drag-handle {
    display: flex;
    align-items: center;
    cursor: grab;
    color: var(--text-muted);
    flex-shrink: 0;
}

.field-order-row .drag-handle:active {
    cursor: grabbing;
}

.field-order-row .field-order-name {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background-color: var(--m3-surface-container);
    padding: 10px 12px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.field-order-row .field-order-name .field-order-type-icon {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--text-muted);
}

.field-order-row .field-order-name .field-order-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.field-order-row .field-order-badge {
    font-size: 0.75em;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-gray);
    color: var(--text-muted);
    flex-shrink: 0;
    width: 5.5em;
    text-align: center;
}

/* Token Preview Rendered */
.token-preview-rendered {
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    background-color: var(--pill-blue-bg);
    padding: 8px;
}

.token-preview-rendered > label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-main);
    /* font-weight: 600; */
    font-size: 0.9rem;
}

/* ============================================================================
   KEYBOARD SHORTCUTS HELP MODAL
   ============================================================================ */

#keyboardHelpContent {
    padding: 8px 0;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.shortcut-section {
    margin-bottom: 24px;
}

.shortcut-section:last-child {
    margin-bottom: 0;
}

.shortcut-section h4 {
    margin: 12px 0 8px 0;
    border-bottom: 1px solid var(--border-main);
    padding-bottom: 4px;
    color: var(--text-main);
    font-size: 1em;
}

.shortcut-section:first-child h4 {
    margin-top: 0;
}

.shortcuts-table {
    margin: 8px 0;
    border-collapse: collapse;
    width: 100%;
}

.shortcuts-table td {
    vertical-align: top;
    padding: 8px 4px;
}

.shortcut-key {
    width: 40%;
    font-weight: 500;
    white-space: nowrap;
}

.shortcut-key kbd,
.help-panel kbd {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    border: 1px solid var(--border-main);
    border-radius: 6px;
    background: var(--bg-gray);
    box-shadow:
        0 1px 0 var(--border-hover),
        inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
    padding: 2px 7px;
    min-width: 1.6em;
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.8em;
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-family: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;
}

.shortcut-desc {
    width: 60%;
    color: var(--text-muted);
    font-size: 0.95em;
}

/* ============================================================================
   HELP MODAL TAB PANELS
   ============================================================================ */

.help-panel {
    display: none;
}

.help-panel.active {
    display: block !important;
    animation: fadeInRight 0.3s var(--google-timing);
}

.help-panel ol,
.help-panel ul {
    margin: 12px 0;
    padding-left: 24px;
    color: var(--text-main);
}

.help-panel ol li,
.help-panel ul li {
    margin: 8px 0;
    line-height: 1.6;
}

.help-panel strong {
    color: var(--text-main);
    font-weight: 600;
}

.help-panel code {
    border: 1px solid var(--border-main);
    border-radius: var(--radius-sm);
    background-color: var(--bg-gray);
    padding: 2px 6px;
    color: var(--text-main);
    font-size: 0.9em;
    font-family: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;
}

.help-panel p {
    margin: 12px 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.help-panel li {
    color: var(--text-muted);
}

.help-panel a {
    color: var(--primary);
    text-underline-offset: 2px;
}

.help-panel a:hover {
    color: var(--primary-hover);
}

/* Syntax reference table */
.syntax-table {
    margin: 12px 0;
    border: 1px solid var(--border-main);
    border-collapse: collapse;
    width: 100%;
}

.syntax-table th,
.syntax-table td {
    border-bottom: 1px solid var(--border-main);
    padding: 10px 12px;
    text-align: center;
}

.syntax-table th {
    background-color: var(--bg-gray);
    color: var(--text-main);
    font-weight: 600;
}

.syntax-table td:first-child {
    color: var(--primary);
    font-weight: 700;
    text-align: left;
}

.syntax-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   LOADING ANIMATIONS
   ============================================================================ */

/* Danger heading for modals */
.danger-heading {
    color: var(--google-red);
}

/* Conditional field icon sizing */
.condition-icon {
    vertical-align: middle;
    margin-right: 2px;
    font-size: 1.125rem;
}

/* Full-height panel layout */
#dataEntryPanel,
#reportTextPanel {
    height: 100%;
}

/* Help modal overrides */
#keyboardHelpModal .modal-card {
    max-width: 1000px;
    overflow-x: hidden;
}

#helpTabSwitcher {
    margin-bottom: 16px;
}

#helpContentContainer {
    max-height: 65vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

#helpContentContainer::-webkit-scrollbar,
#keyboardHelpContent::-webkit-scrollbar,
.ihc-table-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#helpContentContainer::-webkit-scrollbar-track,
#keyboardHelpContent::-webkit-scrollbar-track,
.ihc-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

#helpContentContainer::-webkit-scrollbar-thumb,
#keyboardHelpContent::-webkit-scrollbar-thumb,
.ihc-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--scrollbar-thumb);
}

#helpContentContainer::-webkit-scrollbar-thumb:hover,
#keyboardHelpContent::-webkit-scrollbar-thumb:hover,
.ihc-table-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Spacing utility for help panel paragraphs */
.help-panel p.help-spacer {
    margin-top: 24px;
}

/* ============================================================================
   SNOMED MANAGER MODAL
   ============================================================================ */

#snomedManagerModal .modal-card {
    max-width: 900px;
    overflow-x: hidden;
}

#snomedMgrTabSwitcher {
    margin-bottom: 16px;
}

.snomed-mgr-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-field);
    padding: 0 0 12px;
    margin-bottom: 4px;
}

.snomed-mgr-search {
    flex: 1;
    transition: border-color 0.15s;
    box-sizing: border-box;
    outline: none;
    border: 1px solid var(--border-main);
    border-radius: var(--radius-sm);
    background: var(--bg-gray);
    padding: 8px 14px;
    color: var(--text-main);
    font-size: 0.875rem;
    font-family: inherit;
}

.snomed-mgr-search:focus {
    border-color: var(--border-focus);
    background: var(--bg-field);
}

.snomed-mgr-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: 1px solid var(--border-main);
    border-radius: var(--radius-lg);
    background: var(--bg-gray);
    padding: 12px;
    margin-bottom: 10px;
}

.snomed-mgr-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.snomed-mgr-form input[type="text"] {
    width: 100%;
}

.snomed-mgr-field-wide {
    grid-column: 1 / -1;
}

.required-star {
    color: var(--google-red);
}

.snomed-mgr-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#snomedMgrContentContainer {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

#snomedMgrContentContainer::-webkit-scrollbar {
    width: 6px;
}

#snomedMgrContentContainer::-webkit-scrollbar-track {
    background: transparent;
}

#snomedMgrContentContainer::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--scrollbar-thumb);
}

#snomedMgrContentContainer::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

.snomed-mgr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.snomed-mgr-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-field);
    border-bottom: 1px solid var(--border-main);
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    white-space: nowrap;
}

.snomed-mgr-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-light, var(--border-main));
    vertical-align: middle;
}

.snomed-mgr-table tbody tr:hover {
    background: var(--bg-gray-hover);
}

/* ============================================================================
   IHC PANELS TAB
   ============================================================================ */

/* Search bar — sticky at top of scrollable panel */
.ihc-search-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 4px;
    background: var(--bg-field);
    padding: 0 0 12px;
}

.ihc-search-bar input {
    transition: border-color 0.15s;
    box-sizing: border-box;
    outline: none;
    border: 1px solid var(--border-main);
    border-radius: var(--radius-sm);
    background: var(--bg-gray);
    padding: 8px 14px;
    width: 100%;
    color: var(--text-main);
    font-size: 0.875rem;
    font-family: inherit;
}

.ihc-search-bar input:focus {
    border-color: var(--border-focus);
    background: var(--bg-field);
}

/* Organ group container */
.ihc-organ-group {
    margin-bottom: 4px;
    border: 1px solid var(--border-main);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Accordion header */
.ihc-organ-header {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s;
    cursor: pointer;
    border: none;
    background: var(--bg-gray);
    padding: 10px 14px;
    width: 100%;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.875rem;
    font-family: inherit;
    user-select: none;
    text-align: left;
}

.ihc-organ-header:hover {
    background: var(--bg-gray-hover);
}

.ihc-organ-icon {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 1.1rem;
}

.ihc-organ-name {
    flex: 1;
}

.ihc-organ-badge {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: var(--primary-transparent);
    padding: 0 6px;
    min-width: 20px;
    height: 20px;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.75rem;
}

.ihc-chevron {
    flex-shrink: 0;
    transition: transform 0.2s var(--google-timing, ease);
    color: var(--text-muted);
    font-size: 1.1rem;
}

.ihc-organ-header[aria-expanded="true"] .ihc-chevron {
    transform: rotate(180deg);
}

/* Collapsible body */
.ihc-organ-body {
    display: none;
    padding: 0 14px 14px;
}

.ihc-organ-body--open {
    display: block;
}

/* Individual differential entry */
.ihc-differential {
    margin-top: 14px;
}

.ihc-differential:first-child {
    margin-top: 12px;
}

/* Scenario title */
.ihc-scenario {
    margin: 0 0 6px;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Horizontal scroll wrapper — table overflows, first column stays fixed */
.ihc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.ihc-table-scroll .ihc-table {
    width: max-content;
    min-width: 100%;
}

/* Override syntax-table first-cell style for IHC entity column */
.ihc-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-field);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.ihc-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-gray);
}

.ihc-table th {
    font-size: 0.75rem;
    white-space: nowrap;
}

.ihc-table td {
    font-size: 0.8rem;
}

/* Stain result color coding — use td.ihc-* for specificity over .ihc-table td */
.ihc-table td.ihc-pos {
    color: var(--ihc-pos-color);
    font-weight: 600;
    font-size: 0.7rem;
}

.ihc-table td.ihc-neg {
    color: var(--ihc-neg-color);
    font-weight: 700;
    font-size: 0.7rem;
}

.ihc-table td.ihc-variable {
    color: var(--ihc-variable-color);
    font-weight: 700;
    font-size: 0.7rem;
}

.ihc-table td.ihc-variable-neg {
    color: var(--ihc-variable-neg-color);
    font-weight: 700;
    font-size: 0.7rem;
}

/* Stain result icons (add_circle / do_not_disturb_on / contrast) */
.ihc-stain-icon {
    color: inherit;
    font-size: 1rem;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "opsz" 20;
}

/* Clinical notes */
.ihc-note {
    margin: 6px 0 0 !important;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5 !important;
    white-space: pre-line;
}

/* No-results message */
.ihc-no-results {
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* Rotating spinner animation for loading states */
.rotating {
    display: inline-block;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   SECTION 12: SKELETON LOADING
   ============================================================================ */
@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton {
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-gray) 25%,
        var(--bg-gray-hover) 50%,
        var(--bg-gray) 75%
    );
    background-size: 200% 100%;
}

.skeleton-shortcut {
    margin-bottom: 6px;
    height: 11px;
}

.skeleton-dx {
    height: 9px;
}

.skeleton-row td {
    vertical-align: middle;
    padding: 14px;
}

/* ============================================================================
   SECTION 13: DARK MODE
   Applies when system dark mode is active (unless .theme-light is forced),
   or when .theme-dark is manually set on <html>.
   ============================================================================ */

/* Shared dark variables — used by both media query and manual toggle */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light) {
        /* Backgrounds */
        --bg-page: #111213;
        --bg-field: #1e1f23;
        --bg-gray: #28292d;
        --bg-gray-hover: #303136;
        --bg-gray-active: #38393e;
        --bg-optional: #1e1f23;
        --bg-toast: #404144;
        --bg-tooltip: rgba(55, 60, 70, 0.97);

        /* Borders */
        --border-main: #3c3e43;
        --border-hover: #5f6368;
        --border-muted: #3c3e43;

        /* Text */
        --text-main: #e8eaed;
        --text-muted: #9aa0a6;

        /* Primary brand — lighter purple for dark surface legibility */
        --primary: #d0bcff;
        --primary-hover: #dbcbff;
        --primary-active: #e8daff;
        --primary-transparent: rgba(208, 188, 255, 0.2);
        --primary-glow: rgba(208, 188, 255, 0.1);
        --primary-focus: rgba(208, 188, 255, 0.2);
        --primary-shadow: rgba(208, 188, 255, 0.2);
        --google-grey-400: #5f6368;
        --google-grey-500: #80868b;

        /* Charcoal shadows invisible on dark — invert to subtle light */
        --shadow-charcoal-30: rgba(200, 202, 205, 0.2);
        --shadow-charcoal-15: rgba(200, 202, 205, 0.1);

        /* Shadow opacity — slightly higher to show elevation on dark surfaces */
        --shadow-black-04: rgba(0, 0, 0, 0.2);
        --shadow-black-05: rgba(0, 0, 0, 0.25);
        --shadow-black-06: rgba(0, 0, 0, 0.3);
        --shadow-black-07: rgba(0, 0, 0, 0.35);
        --shadow-black-08: rgba(0, 0, 0, 0.4);
        --shadow-black-10: rgba(0, 0, 0, 0.45);
        --shadow-black-12: rgba(0, 0, 0, 0.5);
        --shadow-black-15: rgba(0, 0, 0, 0.55);
        --shadow-black-18: rgba(0, 0, 0, 0.6);
        --shadow-black-20: rgba(0, 0, 0, 0.65);

        /* Material 3 surfaces */
        --m3-primary-container: #4f378b;
        --m3-on-primary-container: #eaddff;
        --m3-surface-container: #2b2440;
        --m3-outline-variant: #49454f;

        /* Scrollbar */
        --scrollbar-thumb: #5f6368;
        --scrollbar-thumb-hover: #80868b;

        /* Pill / token chips */
        --pill-blue-bg: #4f378b;
        --pill-blue-text: #d0bcff;

        /* Alert (danger) */
        --alert-border: #6b2023;
        --alert-bg: #2d1416;
        --alert-bg-light: rgba(217, 48, 37, 0.12);
        --alert-bg-medium: rgba(217, 48, 37, 0.15);
        --alert-bg-medium-dark: rgba(217, 48, 37, 0.18);
        --alert-bg-dark: rgba(217, 48, 37, 0.22);
        --alert-bg-hover: #3d1a1c;
        --alert-text: #f28b82;

        /* Admin */
        --admin-purple: #ffb1c8;
        --admin-purple-hover: #ffd8e4;
        --admin-purple-bg: #31111d;
        --admin-purple-shadow: rgba(255, 177, 198, 0.2);

        /* Accent / combo-option selected */
        --google-cyan: #d0bcff;

        /* Active token highlight on dark background */
        --pill-focus-bg: rgba(255, 215, 0, 0.18);
        --pill-focus-text: #ffd700;

        /* IHC stain result colors */
        --ihc-pos-color: #81c995;
        --ihc-neg-color: #f28b82;
        --ihc-variable-color: var(--google-amber300);
        --ihc-variable-neg-color: #ffa040;
    }

    /* Reset body gradient mesh for dark mode */
    html:not(.theme-light) body {
        background: var(--bg-page);
    }
}

/* Manual dark mode override (set by theme toggle in user menu) */
html.theme-dark {
    --bg-page: #111213;
    --bg-field: #1e1f23;
    --bg-gray: #28292d;
    --bg-gray-hover: #303136;
    --bg-gray-active: #38393e;
    --bg-optional: #1e1f23;
    --bg-toast: #404144;
    --bg-tooltip: rgba(55, 60, 70, 0.97);
    --border-main: #3c3e43;
    --border-hover: #5f6368;
    --border-muted: #3c3e43;
    --text-main: #e8eaed;
    --text-muted: #9aa0a6;
    --primary: #d0bcff;
    --primary-hover: #dbcbff;
    --primary-active: #e8daff;
    --primary-transparent: rgba(208, 188, 255, 0.2);
    --primary-glow: rgba(208, 188, 255, 0.1);
    --primary-focus: rgba(208, 188, 255, 0.2);
    --primary-shadow: rgba(208, 188, 255, 0.2);
    --google-grey-400: #5f6368;
    --google-grey-500: #80868b;
    --shadow-charcoal-30: rgba(200, 202, 205, 0.2);
    --shadow-charcoal-15: rgba(200, 202, 205, 0.1);
    --shadow-black-04: rgba(0, 0, 0, 0.2);
    --shadow-black-05: rgba(0, 0, 0, 0.25);
    --shadow-black-06: rgba(0, 0, 0, 0.3);
    --shadow-black-07: rgba(0, 0, 0, 0.35);
    --shadow-black-08: rgba(0, 0, 0, 0.4);
    --shadow-black-10: rgba(0, 0, 0, 0.45);
    --shadow-black-12: rgba(0, 0, 0, 0.5);
    --shadow-black-15: rgba(0, 0, 0, 0.55);
    --shadow-black-18: rgba(0, 0, 0, 0.6);
    --shadow-black-20: rgba(0, 0, 0, 0.65);
    --m3-primary-container: #4f378b;
    --m3-on-primary-container: #eaddff;
    --m3-surface-container: #2b2440;
    --m3-outline-variant: #49454f;
    --scrollbar-thumb: #5f6368;
    --scrollbar-thumb-hover: #80868b;
    --pill-blue-bg: #4f378b;
    --pill-blue-text: #d0bcff;
    --alert-border: #6b2023;
    --alert-bg: #2d1416;
    --alert-bg-light: rgba(217, 48, 37, 0.12);
    --alert-bg-medium: rgba(217, 48, 37, 0.15);
    --alert-bg-medium-dark: rgba(217, 48, 37, 0.18);
    --alert-bg-dark: rgba(217, 48, 37, 0.22);
    --alert-bg-hover: #3d1a1c;
    --alert-text: #f28b82;
    --admin-purple: #ffb1c8;
    --admin-purple-hover: #ffd8e4;
    --admin-purple-bg: #31111d;
    --admin-purple-shadow: rgba(255, 177, 198, 0.2);
    --google-cyan: #d0bcff;
    --pill-focus-bg: rgba(255, 215, 0, 0.18);
    --pill-focus-text: #ffd700;

    /* IHC stain result colors */
    --ihc-pos-color: #81c995;
    --ihc-neg-color: #f28b82;
    --ihc-variable-color: var(--google-amber300);
    --ihc-variable-neg-color: #ffa040;
}

html.theme-dark body {
    background: var(--bg-page);
}

/* Component overrides needed in dark mode (both system and manual) */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light) .cm-editor,
    html:not(.theme-light) .cm-editor .cm-scroller {
        background-color: var(--bg-field) !important;
        color: var(--text-main) !important;
    }

    html:not(.theme-light) .cm-editor .cm-selectionBackground,
    html:not(.theme-light) .cm-editor.cm-focused .cm-selectionBackground {
        background-color: var(--primary-transparent) !important;
    }

    html:not(.theme-light) .cm-editor .cm-content {
        caret-color: var(--text-main) !important;
    }

    html:not(.theme-light) .cm-editor .cm-cursor {
        border-left-color: var(--text-main) !important;
    }

    html:not(.theme-light) .secondary-btn {
        border-color: var(--border-main);
        background-color: var(--bg-gray);
    }

    html:not(.theme-light) .secondary-btn:hover:not(:disabled) {
        background-color: var(--bg-gray-hover);
    }

    html:not(.theme-light) .search-box,
    html:not(.theme-light) .search-controls .search-box input {
        background: var(--m3-surface-container);
    }

    html:not(.theme-light) .search-box:focus-within,
    html:not(.theme-light) .search-controls .search-box input:focus {
        background: var(--bg-field);
    }

    html:not(.theme-light) .panel-switcher button.active {
        color: #381e72;
    }
}

html.theme-dark .cm-editor,
html.theme-dark .cm-editor .cm-scroller {
    background-color: var(--bg-field) !important;
    color: var(--text-main) !important;
}

html.theme-dark .cm-editor .cm-selectionBackground,
html.theme-dark .cm-editor.cm-focused .cm-selectionBackground {
    background-color: var(--primary-transparent) !important;
}

html.theme-dark .cm-editor .cm-content {
    caret-color: var(--text-main) !important;
}

html.theme-dark .cm-editor .cm-cursor {
    border-left-color: var(--text-main) !important;
}

html.theme-dark .secondary-btn {
    border-color: var(--border-main);
    background-color: var(--bg-gray);
}

html.theme-dark .secondary-btn:hover:not(:disabled) {
    background-color: var(--bg-gray-hover);
}

html.theme-dark .search-box,
html.theme-dark .search-controls .search-box input {
    background: var(--m3-surface-container);
}

html.theme-dark .panel-switcher button.active {
    color: #381e72;
}

html.theme-dark .search-box:focus-within,
html.theme-dark .search-controls .search-box input:focus {
    background: var(--bg-field);
}

/* ============================================================================
   GUIDED TOUR
   ============================================================================ */

#tour-overlay {
    position: fixed;
    z-index: 9000;
    inset: 0;
    pointer-events: all;
}

#tour-overlay.tour-hidden {
    display: none;
}

#tour-spotlight {
    position: fixed;
    z-index: 9001;
    animation: tour-spotlight-pulse 2.5s ease-in-out infinite;
    transition:
        top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.35),
        0 0 12px 4px rgba(255, 255, 255, 0.18),
        0 0 32px 10px rgba(255, 255, 255, 0.09),
        0 0 0 9999px rgba(0, 0, 0, 0.72);
    border-radius: 10px;
    pointer-events: none;
}

@keyframes tour-spotlight-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1.5px rgba(255, 255, 255, 0.35),
            0 0 12px 4px rgba(255, 255, 255, 0.18),
            0 0 32px 10px rgba(255, 255, 255, 0.09),
            0 0 0 9999px rgba(0, 0, 0, 0.72);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.55),
            0 0 18px 7px rgba(255, 255, 255, 0.28),
            0 0 48px 14px rgba(255, 255, 255, 0.13),
            0 0 0 9999px rgba(0, 0, 0, 0.72);
    }
}

.tour-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.tour-corner::before,
.tour-corner::after {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    content: "";
}

.tour-corner::before {
    width: 12px;
    height: 2px;
}
.tour-corner::after {
    width: 2px;
    height: 12px;
}

.tour-corner.tl {
    top: -4px;
    left: -4px;
}
.tour-corner.tl::before {
    top: 0;
    left: 0;
}
.tour-corner.tl::after {
    top: 0;
    left: 0;
}

.tour-corner.tr {
    top: -4px;
    right: -4px;
}
.tour-corner.tr::before {
    top: 0;
    right: 0;
    left: auto;
}
.tour-corner.tr::after {
    top: 0;
    right: 0;
    left: auto;
}

.tour-corner.bl {
    bottom: -4px;
    left: -4px;
}
.tour-corner.bl::before {
    top: auto;
    bottom: 0;
    left: 0;
}
.tour-corner.bl::after {
    top: auto;
    bottom: 0;
    left: 0;
}

.tour-corner.br {
    right: -4px;
    bottom: -4px;
}
.tour-corner.br::before {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
}
.tour-corner.br::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
}

.tour-spotlight--null .tour-corner {
    display: none;
}

.tour-progress-bar {
    flex-shrink: 0;
    margin: -20px -20px 0 -20px;
    border-radius: 3px 3px 0 0;
    background: var(--border-main);
    width: calc(100% + 40px);
    height: 3px;
    overflow: hidden;
}

.tour-progress-fill {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--primary);
    width: 0%;
    height: 100%;
}

#tour-popover {
    display: flex;
    position: fixed;
    flex-direction: column;
    gap: 10px;
    z-index: 9002;
    backdrop-filter: blur(6px) saturate(160%);
    box-shadow: var(--shadow-elevation-3);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-2xl);
    background: var(--bg-field);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    padding: 20px;
    width: 480px;
    overflow: hidden;
}

@keyframes tour-popover-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.tour-popover-fade {
    animation: tour-popover-in 0.22s ease both;
}

#tour-popover.tour-hidden {
    display: none;
}

.tour-step-badge {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#tour-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
}

#tour-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.tour-skip-btn {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.tour-skip-btn:hover {
    color: var(--text-secondary);
}

.tour-nav {
    display: flex;
    gap: 8px;
}

.tour-nav .secondary-btn,
.tour-nav .primary-btn {
    min-width: 68px;
}

.tour-simulated-click {
    transform-origin: center;
    animation: tour-click-press 0.3s ease both;
}

@keyframes tour-click-press {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.91);
    }
    70% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}

.tour-click-ripple {
    position: fixed;
    z-index: 9003;
    animation: tour-ripple-expand 0.5s ease-out forwards;
    border-radius: 50%;
    background: rgba(103, 80, 164, 0.28);
    pointer-events: none;
}

@keyframes tour-ripple-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}