:root {
    /* --- Light Theme (Modern & Minimalist) --- */
    --primary-color: #0f172a;
    /* Darker, almost black blue for high contrast text */
    --accent-color: #1B6CB2;
    /* RadApp brand blue */
    --accent-hover: #155FA0;

    --bg-color: #f8fafc;
    /* Very light slate */
    --surface-color: #ffffff;
    --surface-hover: #fcfcfd;

    --text-main: #334155;
    /* Softer dark gray */
    --text-light: #64748b;
    --text-inverse: #ffffff;

    --border-color: transparent;
    /* Remove most borders for minimalism */
    --border-light: #e2e8f0;
    /* For dividers only */

    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;

    /* Soft, diffused shadows for depth without borders - REDUCED OPACITY for Cleaner Look */
    --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.01), 0 2px 4px -2px rgb(0 0 0 / 0.01);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.02), 0 4px 6px -4px rgb(0 0 0 / 0.02);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.01);

    --radius-md: 12px;
    --radius-lg: 24px;

    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- Icon Styles --- */
.icon-png,
.icon-svg {
    mix-blend-mode: multiply;
    /* Light Mode: Blend with background to unify colors */
}

body.dark-mode .icon-svg {
    mix-blend-mode: normal;
    /* SVGs are already transparent, no need to invert */
    filter: invert(1) hue-rotate(180deg);
    /* Match the color transformation of PNGs */
}

body.dark-mode .icon-png {
    mix-blend-mode: screen;
    /* Dark Mode: Black (inverted white) becomes transparent */
    filter: invert(1) hue-rotate(180deg);
    /* Invert colors (White->Black, Blue->Orange) and rotate hue back to Blue */
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

/* --- Dark Theme --- */
body.dark-mode {
    --primary-color: #4A9FD9;
    /* Brand blue lightened for dark mode */
    --accent-color: #4A9FD9;
    /* Lighter brand blue */
    --accent-hover: #2882CC;

    --bg-color: #1e293b;
    /* Pane & workspace background — unified slate so empty space matches cards */
    --surface-color: #263446;
    /* Cards slightly lighter than pane for subtle depth */
    --surface-hover: #334155;
    --bg-secondary: #334155;
    /* Added: Secondary Background */

    --text-main: #f1f5f9;
    /* Light Text */
    --text-light: #94a3b8;
    /* Muted Light Text */
    --text-inverse: #0f172a;

    --border-color: #334155;
    --border-light: #3e526b;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    /* Default: Behind Login Overlay (150) */
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    visibility: hidden;
    /* Hidden by default */
    background-color: var(--bg-color);
    /* Block content behind (for Login) */
}

#bg-canvas.canvas-visible {
    opacity: 1 !important;
    visibility: visible !important;
    /* Show only when class is added */
    transition: opacity 0.3s ease-in;
}

/* High Z-Index for Processing State */
#bg-canvas.canvas-foreground {
    z-index: 9999 !important;
    /* In front of everything for processing */
    pointer-events: none !important;
    /* Double check */
    background-color: rgba(0, 0, 0, 0.2);
    /* Semi-transparent for processing (see app behind) */
}

/* Header */
header {
    background-color: rgba(255, 255, 255, 0.3);
    /* Ultra transparent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: none;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
    z-index: 10;
    transition: background-color 0.3s ease;
    position: sticky;
    top: 0;
}

/* Optional: Add shadow on scroll via JS class if needed later, but keeping it clean for now */

header h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.brand-bold {
    font-size: 1.5rem;
    font-weight: 800;
    /* Extra Bold */
    color: #0f172a;
    /* Dark Navy/Black */
    letter-spacing: -0.03em;
}

.brand-light {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-light);
    opacity: 0.8;
    position: relative;
    top: 2px;
    /* Visual alignment */
}

/* Dark mode: ensure brand text stays readable in the sticky header */
body.dark-mode .brand-bold {
    color: #f8fafc !important;
}
body.dark-mode .brand-light {
    color: #cbd5e1 !important;
    opacity: 0.9;
}

.header-brand-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    line-height: 1.2;
}

.header-institution-sep {
    font-weight: 400;
    opacity: 0.75;
}

.header-institution-workspace {
    font-weight: 500;
    white-space: nowrap;
}
body.dark-mode #current-template-name {
    color: #cbd5e1 !important;
}

.user-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    overflow: hidden;        /* clip any text that exceeds the circle */
    flex-shrink: 0;          /* never shrink when sibling elements are wide */
}

#user-initials {
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
    font-size: inherit;
}

.user-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.template-card h3 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}

/* Bottom row: template name (left) + info icon (right) — same pattern as Einstellungen → Template-Sichtbarkeit */
.template-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    min-height: 1.85rem;
    margin-top: auto;
}

.template-card-footer h3 {
    flex: 1;
    text-align: left;
    padding-right: 0.15rem;
}

.template-card-info-anchor {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: -0.06rem;
    z-index: 12;
}

.template-card-has-info:hover,
.template-card-has-info:focus-within {
    z-index: 15;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Main Layout */
main {
    flex: 1;
    display: flex;
    overflow: hidden;
    /* Container is fixed */
    position: relative;
    z-index: 1;
    /* Ensure above canvas */
    /* Prevent body scroll, handle in panes */
}

body.logged-in main {
    display: flex;
}

/* Ensure Selection Screen Scrolls */
#selection-screen {
    width: 100%;
    height: 100%;
    overflow-y: auto !important;
    /* Force scrolling */
    padding: 2rem;
    /* ... other styles ... */
}

/* Template overview: discrete info (visibility / „Author“ vs global) — fixed so it stays accessible while scrolling */
.template-overview-info-anchor {
    position: fixed;
    z-index: 55;
    bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    right: max(1rem, calc(env(safe-area-inset-right, 0px) + 0.75rem));
}

#selection-screen.hidden .template-overview-info-anchor {
    display: none;
}

.template-overview-info-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e2e8f0);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-light, #64748b);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.template-overview-info-btn:hover,
.template-overview-info-btn:focus-visible {
    color: var(--accent-color, #6366f1);
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    outline: none;
}

.template-overview-info-btn:focus-visible {
    outline: 2px solid var(--accent-color, #6366f1);
    outline-offset: 2px;
}

.template-overview-info-tooltip {
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    width: min(288px, calc(100vw - 5rem));
    padding: 0.75rem 0.95rem;
    bottom: calc(100% + 14px);
    right: -6px;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: rgba(255, 255, 255, 0.98);
    color: var(--text-main, #1e293b);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    font-size: 0.78rem;
    line-height: 1.42;
    transform: translate(4px, 4px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.template-overview-info-anchor:hover .template-overview-info-tooltip,
.template-overview-info-anchor:focus-within .template-overview-info-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: 0.05s;
}

.template-overview-info-tooltip-heading {
    font-weight: 800;
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
    color: var(--text-main);
}

.template-overview-info-tooltip-sub {
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-main);
}

.template-overview-info-tooltip-body {
    margin: 0;
    padding-left: 1.15rem;
    list-style-type: disc;
}

.template-overview-info-tooltip-body li + li {
    margin-top: 0.35rem;
}

.template-overview-info-tooltip-body dfn {
    font-style: normal;
    font-weight: 700;
}

.template-overview-info-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.98);
    bottom: -17px;
    right: 20px;
    filter: drop-shadow(0 2px 1px rgba(15, 23, 42, 0.08));
}

body.dark-mode .template-overview-info-btn {
    background: rgba(30, 41, 59, 0.95);
    border-color: var(--border-color);
    color: #94a3b8;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

body.dark-mode .template-overview-info-tooltip {
    background: rgba(30, 41, 59, 0.98);
    border-color: var(--border-color);
    color: var(--text-main);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .template-overview-info-tooltip::after {
    border-top-color: rgba(30, 41, 59, 0.98);
}

@media (prefers-reduced-motion: reduce) {

    .template-overview-info-tooltip,
    .template-overview-info-btn {
        transition: none;
    }

    .template-overview-info-tooltip {
        transform: none;
    }

    .settings-visibility-info-tooltip,
    .settings-visibility-info-btn {
        transition: none;
    }

    .settings-visibility-info-tooltip {
        transform: none;
    }
}

/* Einstellungen → Template-Sichtbarkeit: Suche + pro Zeile Info-Icon */

.settings-visibility-search-wrap {
    margin-top: 0.75rem;
}

#settings-visibility-search {
    width: 100%;
    max-width: 360px;
    padding: 0.45rem 0.7rem;
    font-size: 0.95rem;
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    background: var(--bg-color, #fff);
    color: inherit;
    box-sizing: border-box;
}

#settings-visibility-search:focus {
    outline: none;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

body.dark-mode #settings-visibility-search {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

#settings-visibility-list {
    position: relative;
}

.settings-visibility-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.38rem;
    padding: 0.22rem 0.08rem;
    padding-right: 0.2rem;
    border-radius: 8px;
    position: relative;
}

.settings-visibility-row:focus-within,
.settings-visibility-row:hover {
    z-index: 8;
    background: rgba(99, 102, 241, 0.05);
}

.settings-visibility-row-main {
    display: inline-flex;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    flex: 1;
    margin: 0;
    padding-top: 0.05rem;
    line-height: 1.35;
    font-weight: inherit;
    color: inherit;
}

.settings-visibility-info-anchor {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: -0.06rem;
}

.settings-visibility-info-btn {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e2e8f0);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-light, #64748b);
    padding: 0;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    transition: transform 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
}

.settings-visibility-info-btn:hover,
.settings-visibility-info-btn:focus-visible {
    transform: scale(1.07);
    color: var(--accent-color, #6366f1);
    outline: none;
}

.settings-visibility-info-btn:focus-visible {
    outline: 2px solid var(--accent-color, #6366f1);
    outline-offset: 1px;
}

.settings-visibility-info-tooltip {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: min(274px, 86vw);
    padding: 0.66rem 0.82rem;
    bottom: calc(100% + 12px);
    right: -4px;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: rgba(255, 255, 255, 0.98);
    color: var(--text-main, #1e293b);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
    font-size: 0.72rem;
    line-height: 1.4;
    transform: translate(4px, 4px);
    transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

.settings-visibility-info-tooltip-floating {
    position: fixed;
    right: auto;
    bottom: auto;
    width: min(380px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    z-index: 99999;
    transform: translateY(4px);
}

.settings-visibility-info-tooltip-floating.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.settings-visibility-info-anchor:hover .settings-visibility-info-tooltip,
.settings-visibility-info-anchor:focus-within .settings-visibility-info-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: 0.06s;
}

.settings-visibility-tooltip-heading {
    font-weight: 800;
    font-size: 0.78rem;
    margin-bottom: 0.22rem;
    color: var(--text-main);
}

.settings-visibility-tooltip-sub {
    font-weight: 600;
    margin-bottom: 0.32rem;
    color: var(--text-main);
}

.settings-visibility-tooltip-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.18rem 0.5rem;
    margin: 0 0 0.55rem 0;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.settings-visibility-tooltip-meta dt {
    margin: 0;
    font-weight: 700;
    color: var(--text-light, #64748b);
}

.settings-visibility-tooltip-meta dd {
    margin: 0;
    color: var(--text-main, #1e293b);
    overflow-wrap: anywhere;
}

.settings-visibility-tooltip-context {
    font-size: 0.675rem;
    line-height: 1.38;
    color: var(--text-light, #64748b);
    margin-top: 0.42rem;
    padding-top: 0.42rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.settings-visibility-tooltip-list {
    margin: 0;
    padding-left: 1.05rem;
    list-style-type: disc;
}

.settings-visibility-tooltip-list li + li {
    margin-top: 0.32rem;
}

.settings-visibility-tooltip-list dfn {
    font-style: normal;
    font-weight: 700;
}

.settings-visibility-info-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.98);
    bottom: -17px;
    right: 16px;
    filter: drop-shadow(0 2px 1px rgba(15, 23, 42, 0.1));
}

body.dark-mode .settings-visibility-row:hover,
body.dark-mode .settings-visibility-row:focus-within {
    background: rgba(99, 102, 241, 0.1);
}

body.dark-mode .settings-visibility-info-btn {
    background: rgba(30, 41, 59, 0.95);
    border-color: var(--border-color);
    color: #94a3b8;
}

body.dark-mode .settings-visibility-info-tooltip {
    background: rgba(30, 41, 59, 0.98);
    border-color: var(--border-color);
    color: var(--text-main);
}

body.dark-mode .settings-visibility-tooltip-context {
    color: var(--text-light);
    border-top-color: var(--border-color);
}

body.dark-mode .settings-visibility-tooltip-meta {
    border-bottom-color: var(--border-color);
}

body.dark-mode .settings-visibility-info-tooltip::after {
    border-top-color: rgba(30, 41, 59, 0.98);
}

/* ... (Dark Mode Fixes) ... */
/* ... existing overrides ... */

/* Login Overlay Specifics */
#login-overlay {
    z-index: 150;
    background-color: var(--bg-color) !important;
    /* Force solid background */
    opacity: 1 !important;
    /* Ensure full opacity */
    /* backdrop-filter: blur(5px); Removed */
}

/* Dark Mode Card Overrides */
body.dark-mode .template-card.disabled {
    background: var(--surface-hover);
    color: var(--text-light);
}

body.dark-mode .card,
body.dark-mode .template-card {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* View Settings Bar */
.view-settings-bar {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.view-settings-bar label {
    font-weight: 500;
    color: var(--text-main);
}

/* Split View (3 Columns) */
.split-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Default: 3 equal columns */
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.pane {
    overflow: hidden;
    padding: 1rem;
    border-right: 1px solid var(--border-light);
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pane:last-child {
    border-right: none;
}

#workspace.layout-freetext {
    grid-template-columns: minmax(360px, 0.95fr) minmax(520px, 1.25fr);
}

#workspace.layout-freetext #slot-1,
#workspace.layout-freetext #slot-2 {
    height: 100%;
    min-height: 0;
}

#workspace.layout-freetext #comp-transcript,
#workspace.layout-freetext #comp-clinical-question,
#workspace.layout-freetext #comp-freetext {
    min-height: 0;
}

#workspace.layout-freetext #transcript-text,
#workspace.layout-freetext #clinical-question-text {
    min-height: 0 !important;
    height: 100%;
    resize: none;
}

#workspace.layout-freetext #clinical-question-text,
#workspace.layout-structured #clinical-question-text,
#workspace.layout-hybrid #clinical-question-text {
    min-height: 88px !important;
    resize: none;
    overflow-y: auto;
}

/* Freitext slot-1: index.html injects .report-card { flex:1 !important; height:100% !important },
   which breaks column flex from applyLayout() and makes Material expand/collapse reflow the
   whole left column. Scoped overrides restore intended flex (matches hybrid stripping). */
#workspace.layout-freetext #slot-1 > #comp-transcript.report-card {
    flex: 2 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

#workspace.layout-freetext #slot-1 > #comp-clinical-question.report-card {
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
}

#workspace.layout-freetext #slot-1 > #comp-material-upload.report-card {
    flex: 0 0 auto !important;
    height: auto !important;
}

#workspace.layout-freetext #slot-1 > #comp-pictogram.report-card {
    flex: 0 0 auto !important;
    height: auto !important;
}

/* Structured slot-1: same fix — prevent report-card flex:1 from reflowing the entire
   left column when Material-Scan / Doku / KI-Ergebnisse is expanded or collapsed. */
#workspace.layout-structured #slot-1 > #comp-transcript.report-card {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

#workspace.layout-structured #slot-1 > #comp-clinical-question.report-card {
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
}

#workspace.layout-structured #slot-1 > #comp-material-upload.report-card {
    flex: 0 0 auto !important;
    height: auto !important;
}

#workspace.layout-structured #slot-1 > #comp-pictogram.report-card {
    flex: 0 0 auto !important;
    height: auto !important;
}

#comp-pictogram.pictogram-collapsed {
    flex: 0 0 auto !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#comp-pictogram.pictogram-collapsed #pictogram-toggle-header h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

#comp-material-upload.material-collapsed {
    flex: 0 0 auto !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#comp-material-upload.material-collapsed #material-toggle-header h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.pane-left {
    background-color: var(--bg-color);
    /* Use bg color for container */
}

.pane-middle {
    background-color: var(--bg-color);
}

.pane-right {
    background-color: var(--surface-color);
    /* Use surface color (white/dark) instead of hardcoded white */
}

.pane.hidden-pane {
    display: none;
}

/* Dark Mode Overrides for Panes */
body.dark-mode .pane {
    color: var(--text-main);
}

body.dark-mode .pane-right {
    color: var(--text-main);
}

.report-card {
    background: var(--surface-color);
    padding: 1.75rem;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Transcript card: inner bordered section fills the card vertically */
#comp-transcript #transcript-section {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#comp-transcript #transcript-text {
    flex: 1 1 0;
    min-height: 80px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

/* Clinical question card: fixed-height, scrollable textarea (mirrors Befundung) */
#comp-clinical-question {
    display: flex;
    flex-direction: column;
    overflow: visible;
}
#clinical-question-text {
    flex: 1 1 0;
    min-height: 88px;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    overflow-y: auto;
}

.report-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-card > p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.report-card .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.report-card .action-buttons .btn {
    flex: 1;
    min-width: 100px;
    min-height: 2.6rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    justify-content: center;
    letter-spacing: 0.01em;
}

.report-card .action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.report-card .action-buttons .btn:active {
    transform: translateY(0);
}

/* Typography & Headings */
h2,
h3,
h4 {
    color: var(--primary-color);
    /* Restored to primary color (Blue) */
    margin-top: 0;
}

h2 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    font-weight: 700;
}

h3 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--accent-color);
    /* Restored to accent color (Blue/Cyan) */
    text-transform: capitalize;
    /* Changed from uppercase to Title Case as requested */
    letter-spacing: 0.05em;
    font-weight: 700;
}

h4 {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
}

/* --- Report output (Freitext Befund) – readable, document-like --- */
#full-text-output {
    font-size: 0.9375rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--surface-color);
    min-height: 300px;
    max-width: 100%;
    overflow-y: auto;
    color: var(--text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
}

#full-text-output:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 124, 194, 0.12);
}

#full-text-output ul {
    margin: 0.75rem 0 1rem 1.5rem;
    padding-left: 0.5rem;
    list-style-type: disc;
}

#full-text-output li {
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

#full-text-output strong,
#full-text-output b {
    font-weight: 700;
    color: var(--text-main);
}

#full-text-output h2,
#full-text-output h3,
#full-text-output h4 {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

#full-text-output h2 { font-size: 1.1rem; }
#full-text-output h3 { font-size: 1rem; }
#full-text-output h4 { font-size: 0.95rem; }

body.dark-mode #full-text-output {
    border-color: var(--border-color);
    background: var(--surface-color);
}

body.dark-mode #full-text-output:focus {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* --- Material Extraction UI --- */
.material-result-container {
    flex: 1;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--surface-color);
    overflow-y: auto;
    max-height: 250px;
    /* Added max-height for scrolling */
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.material-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

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

.material-category {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
}

.material-value {
    background-color: #e0f2fe;
    /* Light blue */
    color: #0369a1;
    /* Dark blue text */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: monospace;
}

body.dark-mode .material-value {
    background-color: rgba(27, 108, 178, 0.22);
    color: #4A9FD9;
}

/* Form Elements */
fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    background-color: var(--surface-color);
    /* Fix: Use variable instead of #fff */
}

/* ... existing styles ... */

/* --- Dark Mode Fixes for Profile Statistics --- */
body.dark-mode #modality-stats-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
    /* Add border for visibility */
}

body.dark-mode #modality-stats-header h4 {
    color: var(--text-main) !important;
}

body.dark-mode #modality-stats-content {
    border-color: var(--border-color) !important;
}

/* Dark mode: soften Reports & Nutzung dashboard surfaces */
body.dark-mode #usage-modal .modal {
    background: rgba(15, 23, 42, 0.98) !important;
    color: var(--text-main) !important;
}

body.dark-mode #usage-modal .modal-header,
body.dark-mode #usage-modal .modal-footer {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #usage-modal .hint,
body.dark-mode #usage-table-hint {
    color: #94a3b8 !important;
}

body.dark-mode #usage-modal label,
body.dark-mode #usage-modal h3,
body.dark-mode #usage-modal th {
    color: #e2e8f0 !important;
}

body.dark-mode .usage-chart-card,
body.dark-mode .usage-summary-card,
body.dark-mode .usage-table-card {
    background: rgba(30, 41, 59, 0.78) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: none !important;
}

body.dark-mode .usage-table-header,
body.dark-mode #usage-modal thead tr {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: #e2e8f0 !important;
}

body.dark-mode #usage-modal tbody tr {
    border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}

body.dark-mode #usage-modal tbody td {
    color: #cbd5e1 !important;
}

body.dark-mode #usage-modal tbody td:last-child,
body.dark-mode #usage-total,
body.dark-mode #usage-avg {
    color: #7dd3fc !important;
}

body.dark-mode #usage-summary-cards .usage-summary-card > div:first-child {
    color: #94a3b8 !important;
}

/* Dark Mode Overrides for Search */
body.dark-mode #template-search {
    background-color: var(--surface-color);
    color: var(--text-main);
    border-color: var(--border-color);
}

body.dark-mode #template-search::placeholder {
    color: var(--text-light);
}

/* Score Suggestion Box Styles */
#score-suggestion {
    font-size: 0.85rem;
    color: #0ea5e9;
    background: #f0f9ff;
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* Dark Mode Suggestion Box */
body.dark-mode #score-suggestion {
    background: rgba(27, 108, 178, 0.18);
    color: #4A9FD9;
}

/* Login Overlay Specifics */
/* Login Overlay Specifics */
#login-overlay {
    z-index: 150;
    background-color: transparent !important;
    /* Fully transparent */
    backdrop-filter: none !important;
    /* No blur on the veil, so background is sharp */
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

/* Dark Mode Login Overlay */
body.dark-mode #login-overlay {
    background-color: rgba(15, 23, 42, 0.4) !important;
    /* Darker tint */
}

legend {
    font-weight: 600;
    color: var(--accent-color);
    padding: 0 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.group {
    margin-bottom: 1rem;
}

.inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-main);
    user-select: none;
}

/* Custom Inputs */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
    background-color: var(--bg-color);
    /* Use variable */
    color: var(--text-main);
    /* Use variable */
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: var(--surface-color);
    /* Use variable */
}

textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}

/* ... (Radio/Checkbox skipped for brevity) ... */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    border: none;
    font-size: 0.95rem;
    gap: 0.5rem;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, #1B6CB2 0%, #2882CC 60%, #1B6CB2 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 3px 12px rgba(27, 108, 178, 0.32);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(27, 108, 178, 0.42);
    background-position: right center;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(27, 108, 178, 0.25);
}

.btn-secondary {
    background-color: var(--surface-color);
    border: 1.5px solid var(--border-color);
    color: var(--text-main);
}

.btn-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* Specific styling for top header icon buttons to ensure uniformity */
header .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* New Purple Outline Button for KI */
.btn-purple-outline {
    background-color: var(--surface-color);
    border: 1.5px solid var(--border-color);
    color: #8b5cf6;
    font-weight: 700;
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-purple-outline:hover {
    background-color: var(--surface-hover);
    border-color: #8b5cf6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.18);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 60%, #ef4444 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.28);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(239, 68, 68, 0.38);
    background-position: right center;
}

/* Dark mode button adjustments */
body.dark-mode .btn-secondary {
    background-color: var(--surface-color);
    border-color: var(--border-light);
    color: var(--text-main);
}

body.dark-mode .btn-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent-color);
}

/* Shared keyframe for subtle button shimmer (opt-in via class) */
@keyframes btnShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ... */

/* Utilities */
.hidden {
    display: none !important;
}

/* Custom Tooltip – must be above all modals */
.custom-tooltip {
    position: fixed;
    background: var(--surface-color, #fff);
    color: var(--text-main, #1e293b);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    width: 250px;
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--border-color, #e2e8f0);
    text-align: center;
    transition: opacity 0.2s;
}

.dropdown-item.hidden {
    display: none !important;
}

.register-support-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: #fff;
    color: var(--text-main, #0f172a);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.register-support-btn:not(.hidden) {
    display: inline-flex;
}

.register-support-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--accent-color, #2563eb);
    color: var(--accent-color, #2563eb);
}

/* Ensure overlay is visible on top */
#processing-overlay {
    z-index: 99999 !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    /* Darker background for contrast */
}

.block-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-main);
}

/* Selection Screen */
.selection-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.selection-card {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 800px;
}

/* Centered Selection Screen */
#selection-screen.card {
    max-width: 1200px;
    width: 95%;
    margin: 1rem auto;
    padding: 0;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.card-header {
    text-align: center;
    padding: 1rem 2rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.card-header h2 {
    font-size: 1.8rem;
    color: var(--text-color);
}

.card-body {
    padding: 1rem 3rem 3rem;
    overflow-y: auto;
    flex-grow: 1;
}

/* Search Bar */
.search-container {
    margin-bottom: 2rem;
    position: relative;
    max-width: 100%;
}

#template-search {
    width: 100%;
    padding: 1rem 1.5rem;
    padding-left: 3rem;
    /* Space for icon */
    font-size: 1.1rem;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}

#template-search:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.1);
}

.search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 1.2rem;
    pointer-events: none;
}

/* Template Grid */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.card {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    margin-bottom: 1rem;
    border: none;
    /* Remove border */
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.template-card {
    height: auto;
    min-height: 110px;
    width: 100%;
    background: white;
    border: none;
    /* Remove border */
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
    /* Smooth rounded corners */
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    /* For absolute positioning of delete btn */
    user-select: none;
    overflow: visible;
    /* Allow info tooltip to escape card bounds */
}

.template-card:active {
    cursor: grabbing;
}

.template-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    /* border-color removed for minimalism */
}

.delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff0f0;
    color: #ff4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0;
    transition: all 0.2s;
    z-index: 10;
    /* Ensure clickable */
}

.template-card:hover .delete-btn {
    opacity: 1;
}

/* Super-admin / institution-admin: X always visible on template cards where delete is allowed */
.template-card-show-delete .delete-btn {
    opacity: 1;
}

/* Super-admin: export templates — left side, complements delete on the right */
.template-download-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    opacity: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.template-card:hover .template-download-btn {
    opacity: 1;
}

.template-card-show-download .template-download-btn {
    opacity: 1;
}

.template-download-btn:hover {
    background: #059669;
    color: #fff;
    transform: scale(1.08);
}

.template-download-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

body.dark-mode .template-download-btn {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

body.dark-mode .template-download-btn:hover {
    background: #059669;
    color: #fff;
}

.template-category-drop.template-category-drop-active {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    outline: 2px dashed var(--accent-color);
    padding: 4px;
    min-height: 60px;
}

.delete-btn:hover {
    background: #ff4444;
    color: white;
}

.category-delete-btn:hover {
    background: #ff4444 !important;
    color: white !important;
}

.template-card.disabled {
    opacity: 0;
    transition: all 0.2s;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.delete-btn:hover {
    background: #ffe0e0;
    transform: scale(1.1);
}

.template-card:hover .delete-btn {
    opacity: 1;
}

.icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

/* Bigger logo for the 4 example templates (and custom with logo) */
.template-card .template-card-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: transparent;
}

/* Dark-mode safeguard for transparent logos/icons:
   keep original colors (no inversion) and add subtle contrast backdrop */
body.dark-mode .template-card .template-card-logo.icon-png,
body.dark-mode .template-card .template-card-logo.icon-svg {
    mix-blend-mode: normal !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
    background-color: rgba(15, 23, 42, 0.28);
    border-radius: 12px;
    padding: 6px;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal {
    background: rgba(255, 255, 255, 0.95) !important;
    /* Global: Solid/Opaque */
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    padding: 2.5rem;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    color: var(--text-main);
    margin: auto;
    border: 1px solid rgba(255, 255, 255, 0.8);
    animation: modalScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Settings modal: always allow scrolling so footer button is reachable */
#settings-modal.modal-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    padding: 1rem 1rem 2rem;
}

#settings-modal .modal {
    max-width: 860px;
    width: 96%;
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Two-pane layout: sidebar + content — applies to ALL two-pane modals */
.modal-body.settings-two-pane {
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
}

/* Settings-modal specific min-height */
#settings-modal .modal-body.settings-two-pane {
    min-height: 420px;
    padding: 0 !important;
    overflow: hidden !important;
}
/* ── Left sidebar nav ── */
.settings-nav {
    width: 160px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 0.75rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-color);
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-light);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s, color 0.15s;
}

.settings-nav-item:hover {
    background: var(--surface-hover);
    color: var(--text-main);
}

.settings-nav-item.active {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

body.dark-mode .settings-nav-item.active {
    background: var(--primary-color);
    color: #0f172a;
}

.settings-nav-item i {
    width: 16px;
    text-align: center;
    font-size: 0.9rem;
}

/* ── Right content area ── */
.settings-content {
    flex: 1 1 0 !important;
    min-width: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem;
    text-align: left !important;
    display: block !important;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: settingsFadeIn 0.15s ease;
}

@keyframes settingsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Section title inside a panel ── */
.settings-panel-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    opacity: 0.85;
}

#settings-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

/* form-group spacing inside panels */
#settings-modal .settings-content .form-group {
    margin-bottom: 0;
}

/* User management: keep long user lists fully reachable on smaller screens */
#user-management-modal.modal-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    padding: 1rem 1rem 2rem;
}

/* Restore header top gap for two-pane modals that have padding: 0 on .modal */
#settings-modal .modal-header,
#user-management-modal .modal-header,
#profile-modal .modal-header,
#institution-management-modal .modal-header {
    padding-top: 2.5rem !important;
}

#user-management-modal .modal {
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

#user-management-modal .modal.two-pane-modal {
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
}

#user-management-modal .modal-body.settings-two-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Institution nav items truncate long names */
#user-mgmt-inst-nav .settings-nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile modal two-pane */
#profile-modal .modal.two-pane-modal {
    max-width: 860px;
    width: 95vw;
    display: flex !important;
    flex-direction: column !important;
    height: 90vh;
    max-height: 90vh;
    padding: 0 !important;
}

#profile-modal .modal-body.settings-two-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden !important;
    padding: 0 !important;
}

#user-management-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#user-mgmt-list {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

#user-mgmt-list thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.96);
}

/* Institution management modal (Super-Admin): same style as user-management */
#institution-management-modal.modal-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    padding: 1rem 1rem 2rem;
}

#institution-management-modal .modal {
    max-width: 860px;
    width: 96%;
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

#institution-management-modal .modal-body.settings-two-pane {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden !important;
    padding: 0 !important;
}

#inst-mgmt-list thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.96);
}

body.dark-mode #inst-mgmt-list thead th {
    background: var(--surface-color);
}

/* Fix Jumping Copy Buttons - FORCE WIDTH & DISABLE FLEX GROW */
#btn-copy-structured,
#btn-copy-text,
#btn-copy-ops {
    flex: 0 0 160px !important;
    /* Stop growing/shrinking */
    width: 160px !important;
    /* Fixed width */
    min-width: 160px !important;
    max-width: 160px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* Prevent text wrapping */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Specific Login Modal Transparency - MORE GLASS */
#login-overlay .modal,
#register-overlay .modal {
    background: rgba(255, 255, 255, 0.6) !important;
    /* Very transparent */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2) !important;
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Toast Styles */
.toast {
    position: relative;
    /* Relative to container */
    /* top: 50%; left: 50%; transform: translate(-50%, -50%); - Removed (Container handles pos) */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem 3rem;
    /* Larger padding */
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    color: var(--text-main);
    font-weight: 500;
    /* Reduced from 700 to 500 */
    font-size: 1.1rem;
    /* Slightly smaller for cleaner look */
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: toastScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), toastFadeOut 0.4s ease 2.6s forwards;
    border: 1px solid rgba(255, 255, 255, 0.7);
    z-index: 99999;
}

body.dark-mode .toast {
    background: rgba(30, 41, 59, 0.97);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

@keyframes toastScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes toastFadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.toast i {
    font-size: 1.1rem;

    @keyframes toastFadeOut {
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }

    .toast i {
        font-size: 1.1rem;
    }

    .toast.success i {
        color: var(--success-color);
    }

    .toast.info i {
        color: var(--accent-color);
    }

    .toast.error i {
        color: var(--danger-color);
    }

    /* Message Modal Specifics */
    #message-modal .modal {
        text-align: center;
    }

    #msg-modal-title {
        justify-content: center;
    }

    .modal h2 {
        margin-top: 0;
        color: var(--primary-color);
    }

    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-light);
    }

    .modal-close:hover {
        color: var(--danger-color);
    }

    /* Settings Modal Specifics */
    .settings-group {
        margin-bottom: 1.5rem;
    }

    .settings-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .settings-group input[type="text"],
    .settings-group input[type="password"] {
        width: 100%;
    }

    .settings-info {
        font-size: 0.85rem;
        color: var(--text-light);
        margin-top: 0.25rem;
    }

    /* Toggle Switch */
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: var(--accent-color);
    }

    input:focus+.slider {
        box-shadow: 0 0 1px var(--accent-color);
    }

    input:checked+.slider:before {
        transform: translateX(26px);
    }

    /* Score Indicator */
    /* Score Indicator (CSS-based Conic Gradient) */
    .score-ring {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: conic-gradient(var(--success-color) 0%, #e2e8f0 0%);
        position: relative;
        transition: background 0.5s ease-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .score-ring::before {
        content: attr(data-score);
        position: absolute;
        width: 32px;
        height: 32px;
        background: var(--surface-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.8rem;
        color: var(--text-main);
    }

    /* Popover */
    .popover {
        position: absolute;
        top: 100%;
        right: 0;
        width: 300px;
        background: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 1rem;
        box-shadow: var(--shadow-md);
        z-index: 100;
        margin-top: 0.5rem;
        color: var(--text-main);
    }

    .popover::before {
        content: "";
        position: absolute;
        top: -6px;
        right: 15px;
        width: 10px;
        height: 10px;
        background: var(--surface-color);
        border-top: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
        transform: rotate(45deg);
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

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

    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    body.dark-mode ::-webkit-scrollbar-thumb {
        background: #475569;
    }

    body.dark-mode ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

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

        100% {
            transform: rotate(360deg);
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .split-container {
            flex-direction: column;
        }

        .pane-left {
            max-width: 100%;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            position: relative;
            /* For absolute positioning of delete btn */
            user-select: none;
            /* Prevent text selection while dragging */
        }
    }

    .template-card:active {
        cursor: grabbing;
    }

    .template-card.dragging {
        opacity: 0.5;
        transform: scale(0.95);
    }

    .template-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border-color: var(--primary-color);
    }

    .delete-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff0f0;
        color: #ff4444;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        opacity: 0;
        transition: all 0.2s;
    }

    .template-card:hover .delete-btn {
        opacity: 1;
    }

    .template-card-show-delete .delete-btn {
        opacity: 1;
    }

    .delete-btn:hover {
        background: #ff4444;
        color: white;
    }

    .template-download-btn {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 26px;
        height: 26px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: #ecfdf5;
        color: #059669;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        opacity: 0;
        transition: all 0.2s ease;
        z-index: 10;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .template-card:hover .template-download-btn {
        opacity: 1;
    }

    .template-card-show-download .template-download-btn {
        opacity: 1;
    }

    .template-download-btn:hover {
        background: #059669;
        color: #fff;
        transform: scale(1.08);
    }

    .template-download-btn:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }

    body.dark-mode .template-download-btn {
        background: rgba(16, 185, 129, 0.2);
        color: #34d399;
    }

    body.dark-mode .template-download-btn:hover {
        background: #059669;
        color: #fff;
    }

    .template-card.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background: #f1f5f9;
    }

    .template-card .icon {
        font-size: 2.5rem;
        color: var(--accent-color);
    }

    .template-card.disabled .icon {
        color: var(--text-light);
    }

    /* Modal Duplicate 1 REMOVED */

    /* ... */

    /* Processing Overlay Container */
    #processing-overlay {
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.4) !important;
    }

    /* Class to blur content underneath */
    .content-blurred {
        filter: blur(5px);
        transition: filter 0.3s ease;
    }

    /* Transcript Section Styles */
    #transcript-section {
        background: var(--surface-hover);
        padding: 1rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    /* Dark Mode Override for Transcript */
    body.dark-mode #transcript-section {
        background: var(--bg-color);
        /* Darker background in dark mode */
        border-color: var(--border-color);
    }

    /* Cleaned up duplicates */

    @keyframes pulse-text {
        0% {
            opacity: 0.6;
            transform: scale(0.98);
        }

        50% {
            opacity: 1;
            transform: scale(1.02);
        }

        100% {
            opacity: 0.6;
            transform: scale(0.98);
        }
    }

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

        100% {
            transform: rotate(360deg);
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .split-container {
            flex-direction: column;
        }

        .pane-left {
            max-width: 100%;
            border-right: none;
            border-bottom: 1px solid var(--border-color);
        }
    }

    .info-icon:hover {
        color: var(--accent-color) !important;
    }

    /* Expanded Transcript Mode */
    .expanded-transcript {
        display: flex;
        flex-direction: column;
    }

    .expanded-transcript #transcript-section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .expanded-transcript #transcript-text {
        flex: 1;
        min-height: 0;
        /* Allow shrinking */
    }

    /* Settings modal: larger for better visibility */
    #settings-modal.modal-overlay {
        /* Allow scrolling when the modal is taller than the viewport */
        overflow-y: auto;
        align-items: flex-start;
        padding: 1rem 1rem 2rem;
    }
    #settings-modal .modal {
        max-width: 720px;
        width: 94%;
        padding: 0 !important;
        height: calc(100vh - 4rem);
        max-height: calc(100vh - 4rem);
        display: flex !important;
        flex-direction: column !important;
        border-radius: 20px;
        margin: 0 auto !important;
    }
    #settings-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
        padding-top: 4rem !important;
    }
    #settings-modal .modal-body {
        padding: 1.25rem 0;
        font-size: 0.95rem;
        line-height: 1.5;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }
    #settings-modal .modal-body.settings-two-pane {
        padding: 0 !important;
        overflow: hidden !important;
    }
    #settings-modal .modal-body .form-group {
        padding: 0.75rem 0 1rem;
        margin: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
    }
    #settings-modal .modal-body .form-group:first-child {
        border-top: none;
    }

    /* Radio Group as Cards */
    #settings-modal .radio-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-left: 1rem;
        /* Indentation as requested */
        border-left: 2px solid var(--border-color);
        /* Optional: Visual guide for indentation */
        padding-left: 1rem;
    }

    #settings-modal .radio-label {
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
        /* Reduced padding, no horizontal padding needed if no box */
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        /* No border */
        background-color: transparent;
        /* No background */
        color: var(--text-main);
    }

    #settings-modal .radio-label:hover {
        color: var(--primary-color);
        /* Just color change on hover */
        background-color: transparent;
    }

    body.dark-mode #settings-modal .radio-label:hover {
        color: var(--primary-light);
        background-color: transparent;
    }

    /* Selected State for Radio Label */
    #settings-modal .radio-label:has(input:checked) {
        background-color: transparent;
        border: none;
        color: var(--primary-color);
        font-weight: 600;
    }

    #settings-modal .radio-label i {
        margin-right: 0.75rem;
        width: 20px;
        text-align: center;
        font-size: 1.1rem;
    }

    #settings-modal input[type="radio"] {
        margin-right: 0.5rem;
        accent-color: var(--primary-color);
    }

    /* Close Button Styling */
    .modal-header .btn-icon {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #64748b;
        transition: color 0.2s;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .modal-header .btn-icon:hover {
        background-color: #f1f5f9 !important;
        color: #ef4444;
    }

    #settings-modal .modal-footer {
        padding: 1rem 1.5rem;
        background-color: var(--surface-color);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    /* Error Highlighting */
    .error-highlight {
        background-color: rgba(255, 255, 0, 0.3);
        border-bottom: 2px solid red;
        cursor: pointer;
        /* Changed to pointer */
        transition: background-color 0.2s;
    }

    .error-highlight:hover {
        background-color: rgba(255, 255, 0, 0.5);
    }

    /* Popover */
    .popover {
        position: absolute;
        z-index: 10000;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        width: 300px;
        max-width: 90vw;
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-main);
    }

    /* Dark Mode Popover */
    body.dark-mode .popover {
        background: var(--surface-color);
        border-color: var(--border-color);
        color: var(--text-main);
    }

    .popover-content {
        padding: 1rem;
    }

    .popover.hidden {
        display: none;
    }

/* Keep quality popover readable and inside viewport on smaller screens */
#score-popover {
    width: min(360px, 92vw) !important;
    max-height: min(55vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-word;
}

    /* Chat Window */
    .chat-window {
        position: fixed;
        top: 100px;
        /* Default start position */
        left: 50%;
        width: 400px;
        height: 500px;
        max-height: 80vh;
        max-width: 90vw;
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        z-index: 2000;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        resize: both;
        font-family: 'Inter', sans-serif;
    }

    /* Dark Mode Chat Window */
    body.dark-mode .chat-window {
        background: var(--surface-color);
        border-color: var(--border-color);
    }

    body.dark-mode .chat-messages {
        background: var(--surface-color);
        color: var(--text-main);
    }

    body.dark-mode .chat-input-area {
        background: var(--surface-color);
        border-color: var(--border-color);
    }

    body.dark-mode .chat-message.ai {
        background: var(--bg-color);
        /* Slightly darker than surface */
        color: var(--text-main);
    }

    .chat-suggestion-box {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: #ecfdf5;
        border: 1px solid #10b981;
        border-radius: 0.5rem;
        color: #065f46;
    }

    body.dark-mode .chat-suggestion-box {
        background: #064e3b;
        border-color: #059669;
        color: #a7f3d0;
    }

    /* Ensure FHIR Report Content matches Dark Mode */
    body.dark-mode #report-content,
    body.dark-mode #report-content div,
    body.dark-mode #report-content p,
    body.dark-mode #report-content span {
        background-color: transparent !important;
        /* Remove any white backgrounds */
        color: var(--text-main);
    }

    .chat-window.hidden {
        display: none;
    }

    .chat-header {
        background: white;
        color: #8e44ad;
        padding: 0.75rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: move;
        border-bottom: 2px solid #8e44ad;
        /* Purple border */
    }

    .chat-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #8e44ad !important;
        text-transform: none;
    }

    /* Modern Close Button */
    .chat-header button {
        background: transparent;
        border: none;
        color: #94a3b8;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 50%;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }

    .chat-header button:hover {
        background-color: #f1f5f9;
        color: #ef4444;
        /* Red on hover */
    }

    .chat-messages {
        flex: 1;
        padding: 1rem;
        overflow-y: auto;
        background: white;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .chat-message {
        max-width: 85%;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .chat-message.ai {
        background: #f1f5f9;
        color: #1e293b;
        align-self: flex-start;
        overflow-x: auto;
    }

    .chat-message.user {
        background: #8e44ad;
        /* Match RadApp Purple */
        color: white;
        align-self: flex-end;
    }

    .chat-message .markdown-table,
    #full-text-output .markdown-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0.75rem 0;
        font-size: 0.85rem;
        white-space: normal;
        display: table;
        table-layout: fixed;
    }

    .chat-message .markdown-table th,
    .chat-message .markdown-table td,
    #full-text-output .markdown-table th,
    #full-text-output .markdown-table td {
        padding: 6px 10px;
        border: 1px solid #e2e8f0;
        text-align: left;
        vertical-align: top;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .chat-message .markdown-table th,
    #full-text-output .markdown-table th {
        background: #f1f5f9;
        font-weight: 600;
        color: #475569;
    }

    .chat-message .markdown-table td,
    #full-text-output .markdown-table td {
        color: #334155;
    }

    body.dark-mode .chat-message .markdown-table th,
    body.dark-mode #full-text-output .markdown-table th {
        background: var(--surface-color);
        color: #e2e8f0;
        border-color: #334155;
    }

    body.dark-mode .chat-message .markdown-table td,
    body.dark-mode #full-text-output .markdown-table td {
        color: #e2e8f0;
        border-color: #334155;
    }

    .chat-input-area {
        padding: 1.5rem;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        background: var(--bg-color);
        border-radius: 0 0 16px 16px;
    }

    .chat-input-area textarea {
        flex: 1;
        border: 1px solid #cbd5e1;
        border-radius: 0.375rem;
        padding: 0.5rem;
        font-family: inherit;
        resize: none;
        min-height: 40px;
        font-size: 0.9rem;
    }

    .chat-input-area textarea:focus {
        outline: none;
        border-color: #8e44ad;
        box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
    }

    #btn-send-chat {
        background-color: #8e44ad;
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0;
        transition: background-color 0.2s;
    }

    #btn-send-chat:hover {
        background-color: #732d91;
        /* Darker purple */
    }

    .btn-purple {
        background: linear-gradient(135deg, #8b5cf6, #6d28d9);
        color: white;
        border: none;
        border-radius: 10px;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .btn-purple:hover {
        background: linear-gradient(135deg, #7c3aed, #5b21b6);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
    }

    /* Ensure form container scrolls */
    #comp-fhir-form form {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        padding-right: 0.5rem;
    }

    /* Specific width for Profile Modal to accommodate chart */
    #profile-modal .modal {
        max-width: 800px;
        width: 90%;
        padding: 0;
    }

    /* Ensure spinner is always visible */
    .spinner {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10001;
    }

    /* Flex Layout for Report Cards (Bottom Alignment) */
    #comp-fhir-response,
    #comp-freetext {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #report-content,
    #full-text-output {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        /* Allow shrinking */
        margin-bottom: 1rem;
    }

    /* Ensure text area output looks good */
    .text-area-output {
        background: transparent;
        color: var(--text-main);
        padding: 0.5rem;
        border-radius: 4px;
    }

    /* SVG Text Visibility */
    .score-text {
        font-size: 10px;
        font-weight: bold;
        text-anchor: middle;
        dominant-baseline: middle;
    }

    /* Explicit Bold Styling for Report */
    #full-text-output strong,
    #full-text-output b {
        font-weight: 700 !important;
        color: var(--text-main);
    }

    #full-text-output h2,
    #full-text-output h3 {
        font-weight: 700 !important;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    /* Improved Modal Styling */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        animation: fadeIn 0.2s ease-out;
    }

    /* Modal Duplicate 2 REMOVED */
    .modal-header {
        padding: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-main);
        text-transform: none;
    }

    .modal-body {
        padding: 1.5rem;
        overflow-y: auto;
    }

    /* Settings modal: bold category labels */
    .settings-modal .modal-body .settings-section-label,
    #settings-modal .modal-body .settings-section-label {
        font-weight: 700;
        color: var(--text-main);
    }
    #settings-modal .modal-body .form-group > .settings-section-label {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Change password form: single column, placeholders only, no labels */
    .change-password-form {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 360px;
    }
    #profile-modal #profile-change-password-section {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
    }
    .change-password-form .change-password-title {
        display: block;
        margin-bottom: 1rem;
    }
    .change-password-form .change-password-field {
        margin-bottom: 0.75rem;
    }
    .change-password-form .change-password-field input {
        width: 100%;
        box-sizing: border-box;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        font-size: 1rem;
    }
    .change-password-form .change-password-error {
        margin-bottom: 0.75rem;
    }
    .change-password-form .change-password-btn {
        align-self: flex-start;
        margin-top: 0.25rem;
    }

    .modal-footer {
        padding: 1.5rem;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        background: var(--bg-color);
        border-radius: 0 0 16px 16px;
    }

    /* Duplicate blocks removed */

    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }

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

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* --- Modality Stats Styling (Class-based) --- */
    .modality-header {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        background-color: var(--bg-secondary);
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        border: 1px solid transparent;
        /* Prepare for border change */
    }

    .modality-content {
        margin-bottom: 2rem;
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .modality-table-header {
        border-bottom: 2px solid #e2e8f0;
        background-color: #f8fafc;
    }

    .modality-table-header th {
        color: #64748b;
    }

    .modality-footer,
    .metrics-footer {
        /* Shared styles */
        padding: 0.5rem;
        font-size: 0.8rem;
        color: #64748b;
        text-align: right;
        background-color: #f8fafc;
        /* Keep explicit light for now */
        border-top: 1px solid #e2e8f0;
    }

    /* --- Dark Mode Overrides --- */
    body.dark-mode .modality-header {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
    }

    body.dark-mode .modality-header h4 {
        color: var(--text-main) !important;
    }

    body.dark-mode .modality-content {
        border-color: var(--border-color);
    }

    body.dark-mode .modality-table-header {
        background-color: var(--bg-secondary);
        border-bottom-color: var(--border-color);
    }

    body.dark-mode .modality-table-header th {
        color: var(--text-muted);
    }

    body.dark-mode .modality-footer,
    body.dark-mode .metrics-footer {
        background-color: var(--bg-secondary);
        border-top-color: var(--border-color);
        color: var(--text-muted);
    }

    body.dark-mode #metrics-modalities-body td {
        color: var(--text-main);
        border-bottom-color: var(--border-color);
        background-color: transparent !important;
    }

    /* Optimization Highlight */
    .optimization-highlight {
        background-color: #86efac;
        /* Green highlight (Tailwind green-300) */
        color: #000;
        /* Ensure text is readable */
        transition: background-color 8s ease-out;
        border-radius: 2px;
        padding: 0 2px;
    }

    .optimization-highlight.fade-out {
        background-color: transparent;
    }

    /* AI-inserted content (from transcript / Befund generieren) - blue like primary/accent */
    mark.ai-inserted-highlight,
    .ai-inserted-highlight {
        background-color: rgba(0, 124, 194, 0.12);
        border-radius: 4px;
        padding: 0 2px;
        transition: background-color 8s ease-out;
    }
    mark.ai-inserted-highlight.fade-out,
    .ai-inserted-highlight.fade-out {
        background-color: transparent;
    }
    /* Form fields that were filled by AI */
    input.ai-inserted-highlight,
    textarea.ai-inserted-highlight {
        background-color: rgba(0, 124, 194, 0.08);
        border: 1px solid rgba(0, 124, 194, 0.35);
        transition: background-color 8s ease-out, border-color 8s ease-out;
    }
    input.ai-inserted-highlight.fade-out,
    textarea.ai-inserted-highlight.fade-out {
        background-color: transparent;
        border-color: var(--border-light, #e2e8f0);
    }

    /* --- Mobile Optimization (Electron App / Small Screens) --- */
    @media (max-width: 600px) {

        /* General Layout */
        body {
            font-size: 14px;
            /* Scale down base font */
        }

        /* Header */
        header {
            padding: 0.5rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        header h1 {
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .header-actions {
            gap: 0.5rem;
        }

        #user-header-icon {
            width: 32px;
            height: 32px;
            font-size: 0.9rem;
        }

        /* Workspace Layout */
        #workspace {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            height: calc(100vh - 56px);
            /* full viewport minus header */
            overflow: hidden;
            padding-bottom: 0;
            gap: 0.5rem;
        }

        /* Slots are columns; JS controls which ones are visible and what they contain */
        #slot-1,
        #slot-2,
        #slot-3 {
            padding: 0.5rem;
            overflow-y: auto;
        }

        /* Re-enable Transcript on Mobile */
        #comp-transcript {
            display: block !important;
            margin-bottom: 1rem;
        }

        #comp-transcript textarea {
            min-height: 100px;
            /* Ensure usable height */
        }

        /* Keep Upload visible but compact */
        #comp-material-upload {
            margin-bottom: 0;
            padding: 0;
            border: none;
            box-shadow: none;
        }

        #comp-material-upload h2,
        #comp-material-upload p,
        #comp-pictogram h2,
        #comp-pictogram p {
            display: none;
        }

        .upload-area {
            min-height: auto;
            padding: 0.5rem;
            border: 1px dashed #cbd5e1;
        }

        /* Slot 2 & 3: Output (Bottom, Configurable) */
        #slot-2,
        #slot-3 {
            display: none;
            /* Controlled by JS */
            flex: 1;
            overflow-y: auto;
            padding-bottom: 100px;
            /* Space for FAB */
            background-color: #f8fafc;
            flex-direction: column;
        }

        /* Floating Action Button (FAB) */
        .mic-fab-container {
            display: none;
            /* Hidden by default, shown by JS when template active */
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        /* Show FAB when active class is added */
        .mic-fab-container.active {
            display: flex !important;
        }

        .mic-fab {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #ef4444;
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            -webkit-user-select: none;
            user-select: none;
        }

        .mic-fab:active,
        .mic-fab.recording {
            transform: scale(1.1);
            background-color: #dc2626;
        }

        .mic-fab.processing {
            background-color: #f59e0b;
            animation: pulse 1.5s infinite;
        }

        .fab-label {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            pointer-events: none;
            font-weight: 500;
        }

        /* Hide Desktop Nav Elements */
        .mobile-nav {
            display: none !important;
        }

        .mobile-toggle-bar {
            display: none !important;
        }

        /* Fix Template List Scrolling */
        #template-list {
            max-height: 60vh;
            overflow-y: auto;
        }
    }

    /* Close @media */

    /* --- End of Mobile Optimization --- */

    /* Default: Hide FAB on Desktop */
    .mic-fab-container {
        display: none;
    }

    /* Material Upload Grid */
    .material-grid {
        grid-template-columns: 1fr !important;
        /* Stack upload and result */
    }

    .upload-area {
        min-height: 150px;
    }

    /* Buttons - Prevent Blue Focus */
    .btn:focus,
    .btn:active {
        outline: none !important;
        box-shadow: none !important;
        background-color: white !important;
        /* Keep white on click */
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    /* Mobile Nav */
    .mobile-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #ffffff;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .nav-item {
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 0.75rem;
        gap: 4px;
        padding: 8px;
        width: 100%;
    }

    .nav-item i {
        font-size: 1.25rem;
    }

    .nav-item.active {
        color: var(--primary-color);
    }


    /* Default: Hide Mobile Nav on Desktop */
    .mobile-nav {
        display: none;
    }

    /* --- JS Custom Tooltip --- */
    .custom-tooltip {
        position: fixed;
        background: var(--surface-color);
        color: var(--text-main);
        padding: 0.75rem;
        border-radius: var(--radius-md);
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.4;
        width: 250px;
        z-index: 999999;
        pointer-events: none;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border-color);
        text-align: center;
        transition: opacity 0.2s;
    }

    /* --- Thrombektomie Template Custom Styles --- */
    .thrombektomie-header {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    body.dark-mode .thrombektomie-header {
        background: var(--surface-color);
        border-color: #334155;
    }

    .scanner-container {
        display: flex;
        gap: 1rem;
        align-items: stretch;
    }

    .scanner-left {
        flex: 0 0 90px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .scanner-right {
        flex: 1;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 0.75rem;
        min-height: 90px;
        display: flex;
        flex-direction: column;
    }

    body.dark-mode .scanner-right {
        background: var(--bg-color);
        border-color: #334155;
    }

    .material-list {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1;
    }

    .material-list li {
        padding: 0.25rem 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
    }

    body.dark-mode .material-list li {
        border-color: #334155;
    }

    .material-list li:last-child {
        border-bottom: none;
    }

    .scanner-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .btn-small {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border-radius: 10px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
        font-weight: 600;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 42px;
    }

    .btn-ops {
        background: #f0fdf4;
        color: #166534;
        border-color: #bbf7d0;
    }

    .btn-ops:hover {
        background: #dcfce7;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(22, 101, 52, 0.10);
    }

    .btn-reorder {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .btn-reorder:hover {
        background: #dbeafe;
    }

    /* File Input Styling */
    .file-upload-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 90px;
        height: 90px;
        border: 2px dashed #cbd5e1;
        border-radius: 6px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s;
    }

    body.dark-mode .file-upload-wrapper {
        background: var(--bg-color);
        border-color: #334155;
    }

    .file-upload-wrapper:hover {
        border-color: var(--accent-color);
    }

    .file-upload-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    .file-upload-btn-content {
        text-align: center;
        color: #64748b;
        pointer-events: none;
    }

    .file-upload-btn-content i {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
        display: block;
    }

    /* Specific Fix for Komplikationen Checkboxes (Horizontal) */
    #item-komplikationen\.art .inline-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        flex-wrap: wrap !important;
    }

    #item-komplikationen\.art .inline-group label {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0 !important;
        cursor: pointer !important;
        width: auto !important;
    }

    /* --- Thrombektomie Template Layout (Sidebar) --- */
    .thrombektomie-main-layout {
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
        width: 100%;
    }

    .thrombektomie-sidebar {
        width: 320px;
        /* Fixed width sidebar */
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .thrombektomie-content {
        flex: 1;
        min-width: 0;
        /* Prevent flex overflow */
    }

    /* Sidebar Components */
    .thrombektomie-sidebar .file-upload-wrapper {
        width: 100% !important;
        height: 180px !important;
        /* Fixed height for sidebar look */
    }

    .thrombektomie-sidebar .material-list {
        max-height: 400px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0.75rem;
    }

    /* --- Modern Dropdown Menu --- */
    .user-menu-container {
        position: relative;
        z-index: 100;
    }

    .dropdown-menu {
        position: absolute;
        top: 50px;
        right: 0;
        width: 240px;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        transform-origin: top right;
        animation: menuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: hidden;
    }

    body.dark-mode .dropdown-menu {
        background: #1a2640;
        border: 1px solid rgba(56, 189, 248, 0.18);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    }

    @keyframes menuSlideIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(-10px);
        }

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

    .dropdown-header-info {
        padding: 0.75rem 1rem;
        display: flex;
        flex-direction: column;
        color: #0f172a;
        font-weight: 600;
    }

    .dropdown-divider {
        height: 1px;
        background-color: var(--border-color);
        margin: 0.25rem 0.5rem;
        opacity: 0.5;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border: none;
        background: transparent;
        color: #0f172a;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        border-radius: 12px;
        transition: all 0.2s;
        width: 100%;
    }

    .dropdown-item:hover {
        background-color: var(--surface-hover);
        transform: translateX(2px);
    }

    .dropdown-item i {
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
        transition: transform 0.2s;
        color: inherit;
    }

    .dropdown-item:hover i {
        transform: scale(1.1);
    }

    .dropdown-item.danger {
        color: var(--danger-color);
    }

    .dropdown-item.danger:hover {
        background-color: rgba(239, 68, 68, 0.1);
    }

    .dropdown-item.danger i {
        color: var(--danger-color);
    }

    /* --- Header Action Buttons (Redesign - Ultra Minimalist) --- */
    .header-action-btn {
        background-color: transparent !important;
        color: var(--text-light) !important;
        /* Muted default */
        border: none !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease !important;
        position: relative;
        overflow: visible;
        font-weight: 500;
    }

    .header-action-btn:hover {
        background-color: transparent !important;
        /* NO Background on hover */
        transform: translateY(-1px);
    }

    .header-action-btn i {
        font-size: 1.2rem;
        pointer-events: none;
        transition: color 0.2s;
    }

    .header-action-btn.is-disabled,
    .header-action-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Hover Colors (Icon Color ONLY) */
    #btn-reset:hover {
        color: #ef4444 !important;
        /* Red Icon */
    }

    #btn-upload-text:hover {
        color: #3b82f6 !important;
        /* Blue Icon */
    }

    #btn-previous-report:hover {
        color: #10b981 !important;
        /* Green Icon */
    }

    #btn-ask-gemini {
        font-size: 1.1rem !important;
        /* Larger text to match icons */
        font-weight: 700 !important;
    }

    #btn-ask-gemini:hover {
        color: #8b5cf6 !important;
        /* Purple Icon */
    }

    /* --- Dropdown Menu Polish --- */
    .dropdown-menu {
        top: 55px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
        animation: menuSlideInSmooth 3s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding: 1rem;
    }

    body.dark-mode .dropdown-menu {
        background: #1a2640;
        border: 1px solid rgba(56, 189, 248, 0.18);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
    }

    body.dark-mode .dropdown-header-info,
    body.dark-mode .dropdown-item {
        color: #f1f5f9 !important;
    }

    body.dark-mode .dropdown-header-info {
        font-weight: 700;
    }

    body.dark-mode .dropdown-item {
        font-weight: 600;
    }

    body.dark-mode .dropdown-item:hover {
        background: rgba(56, 189, 248, 0.12) !important;
        color: #e0f2fe !important;
    }

    body.dark-mode .dropdown-item i {
        color: #93c5fd !important;
    }

    body.dark-mode .dropdown-divider {
        background-color: rgba(148, 163, 184, 0.25);
        opacity: 1;
    }

    @keyframes menuSlideInSmooth {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }

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

    .dropdown-item {
        color: #0f172a !important;
        font-weight: 600;
        transition: all 0.3s ease;
        background: transparent !important;
        border: none !important;
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .dropdown-item:hover {
        transform: translateX(5px);
        /* Subtle shift instead of background */
    }

    .dropdown-item i {
        color: inherit !important;
        font-size: 1.1rem;
        width: 24px;
        text-align: center;
        transition: color 0.3s;
    }

    /* Specific Hover Colors for Menu Items - Text AND Icon change color */

    /* 0. Indication Check -> Teal/Emerald */
    .dropdown-item[onclick*="openIndicationCheck"]:hover {
        color: #059669 !important;
        /* Emerald 600 */
        background: transparent !important;
        /* No BG */
    }

    .dropdown-item[onclick*="openIndicationCheck"]:hover i {
        color: #059669 !important;
    }

    /* 1. Statistics/Profile -> Blue/Cyan */
    .dropdown-item[onclick*="openUserProfile"]:hover {
        color: var(--accent-color) !important;
        background: transparent !important;
        /* No BG */
    }

    .dropdown-item[onclick*="openUserProfile"]:hover i {
        color: var(--accent-color) !important;
    }

    /* 2. Settings -> Slate/Gray (Subtle, but distinct from black) */
    .dropdown-item[onclick*="openSettings"]:hover {
        color: #64748b !important;
        background: transparent !important;
    }

    .dropdown-item[onclick*="openSettings"]:hover i {
        color: #64748b !important;
    }

    /* 3. Logout -> Red */
    /* 3. Logout -> Red */
    .dropdown-item.danger {
        color: var(--text-main) !important;
        margin-top: 0.5rem;
    }

    .dropdown-item.danger i {
        color: var(--text-main) !important;
    }

    .dropdown-item.danger:hover {
        color: var(--danger-color) !important;
        background: transparent !important;
    }

    .dropdown-item.danger:hover i {
        color: var(--danger-color) !important;
    }

    /* Remove border from any button in dropdown */
    button.dropdown-item {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* --- Header Action Buttons (Refined) --- */
    .header-action-btn {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: var(--text-main) !important;
        position: relative !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }

    .header-action-btn:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        transform: translateY(-2px);
    }

    /* Color-coded hovers */
    .header-action-btn[data-label="Reset"]:hover {
        color: #ef4444 !important;
    }

    .header-action-btn[data-label="Import"]:hover {
        color: #3b82f6 !important;
    }

    .header-action-btn[data-label="Save"]:hover {
        color: #10b981 !important;
    }

    .header-action-btn[data-label="Settings"]:hover {
        color: #64748b !important;
    }

    .header-action-btn[data-label="KI"]:hover {
        color: #8e44ad !important;
    }

    /* Tooltip (::after) */
    .header-action-btn::after {
        content: attr(data-label);
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        background-color: var(--surface-color);
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        pointer-events: none;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .header-action-btn:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* ============================================== */
    /* EMERGENCY OVERRIDES - FINAL CLEANUP            */
    /* ============================================== */

    /* 1. Login Modal - Glassy */
    #login-overlay .modal {
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2) !important;
    }

    /* 2. Copy Button Stability & Width */
    #btn-copy-structured,
    #btn-copy-text,
    #btn-copy-ops,
    .btn {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* 3. Global Focus Reset */
    *:focus,
    *:active,
    button:focus,
    button:active {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
        border-color: transparent !important;
    }

    input:focus,
    textarea:focus {
        border-color: var(--accent-color) !important;
    }

    /* 4. Layout Fix: Cards fill vertical space, Buttons at bottom */
    /* Turn the right pane into a column flexbox that spans full height */
    .pane-right {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    /* The card itself grows to fill the pane */
    .report-card {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        /* Internal scrolling handles content */
        border-radius: 0 !important;
        /* Flatten corners for full pane fit if desired, or keep rounded */
    }

    /* The content area grows to push buttons down */
    #report-content,
    #full-text-output,
    .material-result-container {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        /* Scrollable content */
        margin-bottom: 1rem !important;
    }

    /* Buttons Container Pinned to Bottom */
    .action-buttons,
    #comp-fhir-response>div:last-child {
        margin-top: auto !important;
        width: 100% !important;
        padding: 1rem 0 0 0 !important;
        display: flex !important;
        justify-content: center !important;
        /* CENTER ALIGN */
        gap: 1rem !important;
        background: var(--surface-color) !important;
        /* Ensure bg covers scrolling content behind */
        flex-shrink: 0 !important;
        /* Never shrink buttons */
    }

    /* Override any inline styles blocking flex */
    .action-buttons[style] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* 5. Center All Modal Text */
    .modal,
    .modal h2,
    .modal p,
    .modal-body {
        text-align: center !important;
    }

    .modal-actions {
        justify-content: center !important;
    }

    .dropdown-item.danger i {
        color: var(--text-main) !important;
    }

    .dropdown-item.danger:hover {
        color: var(--danger-color) !important;
        background: transparent !important;
    }

    .dropdown-item.danger:hover i {
        color: var(--danger-color) !important;
    }

    /* Remove border from any button in dropdown */
    button.dropdown-item {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* --- Header Action Buttons (Refined) --- */
    .header-action-btn {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: var(--text-main) !important;
        position: relative !important;
        transition: all 0.2s ease !important;
    }

    .header-action-btn:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        transform: translateY(-2px);
    }

    /* Color-coded hovers */
    .header-action-btn[data-label="Reset"]:hover {
        color: #ef4444 !important;
    }

    .header-action-btn[data-label="Import"]:hover {
        color: #3b82f6 !important;
    }

    .header-action-btn[data-label="Save"]:hover {
        color: #10b981 !important;
    }

    .header-action-btn[data-label="Settings"]:hover {
        color: #64748b !important;
    }

    .header-action-btn[data-label="KI"]:hover {
        color: #8e44ad !important;
    }

    /* Tooltip (::after) */
    .header-action-btn::after {
        content: attr(data-label);
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        background-color: var(--surface-color);
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        pointer-events: none;
        z-index: 1000;
    }

    .header-action-btn:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* ============================================== */
    /* EMERGENCY OVERRIDES - FINAL & VERIFIED         */
    /* ============================================== */

    /* 1. Login Modal - Glassy */
    #login-overlay .modal {
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2) !important;
    }

    /* 2. Copy Button Stability & Width */
    #btn-copy-structured,
    #btn-copy-text,
    #btn-copy-ops,
    .btn {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* 3. Global Focus Reset (Kill Blue Outline) */
    *:focus,
    *:active,
    button:focus,
    button:active {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
        border-color: transparent !important;
        /* Aggressive border clear for buttons */
    }

    /* Re-add border for inputs so they are usable */
    input:focus,
    textarea:focus {
        border-color: var(--accent-color) !important;
    }

    /* 4. Layout Fix: Cards fill vertical space, Buttons at bottom */
    .pane-right {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .report-card {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        /* Allow flex to dictate height */
        min-height: 0 !important;
    }

    #comp-fhir-response,
    #comp-freetext {
        justify-content: space-between !important;
    }

    #report-content,
    #full-text-output {
        flex-grow: 1 !important;
        margin-bottom: 2rem !important;
    }

    /* 5. Button Group Centering & Bottom Pinning */
    .action-buttons,
    #comp-fhir-response>div:last-child {
        margin-top: auto !important;
        width: 100% !important;
        padding-top: 1rem !important;
        display: flex !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* Ensure inline styles don't override flex direction */
    .action-buttons[style] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    /* 6. Modal Centering */
    .modal,
    .modal h2,
    .modal p,
    .modal-body {
        text-align: center !important;
    }

    .modal-actions {
        justify-content: center !important;
    }

    /* ============================================== */
    /* EMERGENCY OVERRIDES - APPENDED FOR SAFETY      */
    /* ============================================== */

    /* 1. Login Modal Transparency */
    #login-overlay .modal {
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2) !important;
    }

    /* 2. Copy Button Stability & No Blue Focus */
    #btn-copy-structured,
    #btn-copy-text,
    #btn-copy-ops,
    .btn {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        border-color: var(--border-color) !important;
        /* Reset border color on focus */
    }

    /* Force Remove Blue Outline on Focus/Active */
    *:focus,
    *:active,
    button:focus,
    button:active {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* 3. Global Modal Opacity */
    .modal:not(#message-modal):not(#confirm-modal) {
        /* Exclude alerts if needed, or apply to specific ones */
    }

    /* 4. Bottom Alignment for Buttons - TRUE FIX */
    /* Make the right pane a flex container so the card stretches */
    .pane-right {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* Make the cards expand to fill the pane */
    .report-card {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        /* Allow scroll within if needed */
    }

    #comp-fhir-response,
    #comp-freetext {
        justify-content: space-between !important;
    }

    #report-content,
    #full-text-output {
        flex-grow: 1 !important;
        margin-bottom: 2rem !important;
    }

    /* Button Container: Pinned to bottom, Centered Content */
    .action-buttons,
    #comp-fhir-response>div:last-child {
        margin-top: auto !important;
        width: 100% !important;
        padding-top: 1rem !important;
        display: flex !important;
        justify-content: center !important;
        /* Center the group horizontally */
        gap: 1rem !important;
    }

    /* Override inline styles in HTML if any */
    .action-buttons[style] {
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* 5. Center All Modal Text */
    .modal,
    .modal h2,
    .modal p,
    .modal-body {
        text-align: center !important;
    }

    .modal-actions {
        justify-content: center !important;
        /* Center buttons in modals too */
    }

    /* Center buttons in modals too */
}

/* Workspace alignment: keep freetext layout columns visually symmetrical */
#workspace.layout-freetext #slot-1,
#workspace.layout-freetext #slot-2 {
    align-items: stretch;
}

#workspace.layout-freetext #slot-2 > #comp-freetext.report-card {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
}

#workspace.layout-freetext #comp-freetext #full-text-output {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-bottom: 0.75rem !important;
}

#workspace.layout-freetext #comp-freetext .action-buttons {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}