/* Critical login styles generated from theme, shell and login stylesheets. */

/* Shared high-contrast theme tokens. Dark is the default; theme-light is explicit. */
:root {
    color-scheme: dark;
    --app-bg: #111820;
    --app-surface: #1b2530;
    --app-surface-soft: #222f3b;
    --app-surface-raised: #2a3947;
    --app-border: #465867;
    --app-text: #e7edf4;
    --app-muted: #b2c0cc;
    --app-link: #82c9ff;
    --app-accent: #176fae;
    --app-accent-hover: #0f5f99;
    --app-selected-bg: #173b55;
    --app-input-bg: #101820;
    --app-input-text: #f3f6f9;
    --app-input-border: #5b6e7e;
    --app-header-bg: #18222c;
    --app-header-text: #f5f8fb;
    --app-header-muted: #d0d9e2;
    --app-header-active: #304354;
    --app-success-bg: #173d2a;
    --app-success-text: #9ce5b7;
    --app-info-bg: #17354a;
    --app-info-text: #a9dcff;
    --app-warning-bg: #4a3514;
    --app-warning-text: #f5d48a;
    --app-danger-bg: #4b2025;
    --app-danger-text: #ffb4b9;
    --app-shadow-sm: 0 2px 8px #0000002e;
    --app-shadow-lg: 0 12px 32px #00000073;
}

html.theme-light {
    color-scheme: light;
    --app-bg: #edf2f6;
    --app-surface: #ffffff;
    --app-surface-soft: #f1f5f8;
    --app-surface-raised: #e2eaf1;
    --app-border: #aebdca;
    --app-text: #182a3a;
    --app-muted: #465f74;
    --app-link: #075f9b;
    --app-accent: #176fae;
    --app-accent-hover: #0f5f99;
    --app-selected-bg: #dcecf7;
    --app-input-bg: #ffffff;
    --app-input-text: #142536;
    --app-input-border: #8fa4b5;
    --app-header-bg: #dce5ed;
    --app-header-text: #13283a;
    --app-header-muted: #2d465a;
    --app-header-active: #c4d5e3;
    --app-success-bg: #d9f3e2;
    --app-success-text: #185b35;
    --app-info-bg: #dceef9;
    --app-info-text: #07567f;
    --app-warning-bg: #f8edcf;
    --app-warning-text: #74520b;
    --app-danger-bg: #f9dfe2;
    --app-danger-text: #8c2932;
    --app-shadow-sm: 0 2px 8px #52697d24;
    --app-shadow-lg: 0 12px 32px #52697d52;
}

body { transition: background-color .16s ease, color .16s ease; }
a { color: var(--app-link); }
input::placeholder, textarea::placeholder { color: var(--app-muted); opacity: 1; }
input:focus, textarea:focus, select:focus {
    border-color: var(--app-accent);
    outline: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
    outline-offset: 1px;
}
button:hover { background: var(--app-accent-hover); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--app-link); outline-offset: 2px; }
button:disabled, input:disabled, select:disabled { opacity: .62; cursor: not-allowed; }

.app-header-nav > a,
.app-nav-menu > summary { color: var(--app-header-muted); }
.app-header-nav > a:hover,
.app-nav-menu > summary:hover { color: var(--app-header-text); }
.app-nav-menu-panel > a { color: var(--app-text); }
.app-nav-menu-panel > a:hover { background: var(--app-surface-raised); color: var(--app-link); }
.app-mode-status { border-color: var(--app-border); color: var(--app-header-muted); }
.app-mode-status.is-research { border-color: #3ba6dd; color: var(--app-info-text); }
.app-theme-switch { color: var(--app-header-muted) !important; }
.app-theme-track { background: var(--app-surface-raised); }
.app-user-name { box-sizing: border-box; min-width: 88px; margin: 0; color: var(--app-header-muted); text-align: center; }
.app-logout-button {
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    background: var(--app-header-active);
    color: var(--app-header-text);
}
.app-logout-button:hover { background: var(--app-accent); }

.settings-heading p,
.settings-card-title p,
.mode-option small,
.settings-meta dt,
.session-list article span,
.home-hero p,
.home-metrics .metric small,
.file-import-form small,
.patient-match-status,
.patient-page-heading p,
.section-heading p,
.patient-demographics dt,
.empty-state,
.doctor-session-qr p { color: var(--app-muted); }
.page-icon,
.settings-card-title > span,
.patient-page-heading > span { background: var(--app-info-bg); color: var(--app-info-text); }
.mode-chip,
.session-status { background: var(--app-success-bg); color: var(--app-success-text); }
.mode-chip.is-research { background: var(--app-info-bg); color: var(--app-info-text); }
.settings-card {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-sm);
}
.mode-option { border-color: var(--app-border); background: var(--app-surface-soft); }
.mode-option:has(input:checked) {
    border-color: var(--app-accent);
    background: var(--app-selected-bg);
}
.research-form fieldset,
.session-list article { border-color: var(--app-border); background: var(--app-surface-soft); }
.home-metrics .metric {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
}
.home-metrics .metric > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--app-info-bg);
    color: var(--app-info-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}
.home-quick a { border-color: var(--app-border); background: var(--app-surface-soft); color: var(--app-link); }
.home-quick a:hover { border-color: var(--app-accent); background: var(--app-surface-raised); }
.import-submit a { color: var(--app-link); }
.clickable-row:hover { background: var(--app-surface-raised); }
.patient-demographics > div { background: var(--app-surface-soft); }
.doctor-session-qr { border-color: var(--app-border); background: var(--app-info-bg); }
.message.error { background: var(--app-danger-bg); color: var(--app-danger-text); }
.message.success { background: var(--app-success-bg); color: var(--app-success-text); }
html:not(.theme-light) .patient-match-status.is-loading { color: var(--app-info-text); }
html:not(.theme-light) .patient-match-status.is-found { color: var(--app-success-text); }
html:not(.theme-light) .patient-match-status.is-new { color: var(--app-warning-text); }
html:not(.theme-light) .patient-match-status.is-error { color: var(--app-danger-text); }

/* Patient module lives inside the CAD shell but follows the selected theme. */
html:not(.theme-light) .patient-module-workspace {
    border-color: var(--app-border);
    background: var(--app-bg);
    color: var(--app-text);
}
html:not(.theme-light) .patient-module-workspace > header,
html:not(.theme-light) .patient-module-demographics > div,
html:not(.theme-light) .patient-module-history article,
html:not(.theme-light) .patient-module-assets button {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}
html:not(.theme-light) .patient-module-workspace > header span,
html:not(.theme-light) .patient-module-demographics span { color: var(--app-muted); }

/* The image canvas remains black; surrounding controls switch with the application. */
html.theme-light .image-stage-toolbar,
html.theme-light .image-thumb-nav { background: #dbe5ed; color: #183247; }
html.theme-light .image-stage-toolbar button,
html.theme-light .image-thumb-nav > button { border: 1px solid #8da2b4; background: #f7fafc; color: #174d70; }
html.theme-light .image-tool-dock { background: #eef3f7; color: #1a3144; }
html.theme-light .image-dock-title { border: 1px solid #a8b8c6; background: #dce7f0; }
html.theme-light .image-dock-title small { color: #3f5c72; }
html.theme-light .image-tool-dock details { border-color: #a7b8c6; background: #f8fafc; }
html.theme-light .image-tool-dock summary { background: #dce7f0; color: #183247; }
html.theme-light .image-tool-dock p { color: #3f5c72; }

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

html .image-tool-dock label.image-display-control {
    grid-template-columns: 52px 34px minmax(0, 1fr);
    gap: 5px;
    margin: 7px 8px;
    white-space: nowrap;
}
html .image-tool-dock label.image-display-control output {
    color: #8dcfff;
    text-align: right;
    font-family: Consolas, monospace;
}
html .image-tool-dock label.image-display-control input[type='range'] {
    grid-column: 3;
    min-width: 0;
    min-height: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
html.theme-light .image-tool-dock label.image-display-control output { color: #075f9b; }

/* Generic patient pages also use the dark token palette. */
html:not(.theme-light) .patient-page-heading > span { background: var(--app-info-bg); color: var(--app-info-text); }
html:not(.theme-light) .patient-page-heading p,
html:not(.theme-light) .section-heading p,
html:not(.theme-light) .patient-demographics dt,
html:not(.theme-light) .empty-state { color: var(--app-muted); }
html:not(.theme-light) .patient-demographics > div { background: var(--app-surface-soft); border: 1px solid var(--app-border); color: var(--app-text); }
html:not(.theme-light) .clickable-row:hover { background: var(--app-surface-raised); }
html:not(.theme-light) .patient-search input,
html:not(.theme-light) .patient-search select { background: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-input-text); }
html:not(.theme-light) .asset-thumb { border-color: var(--app-border); }


.app-header-nav{min-width:0}.app-mode-status{margin-left:auto;padding:5px 9px;border:1px solid #475569;border-radius:999px;color:#cbd5e1;font-size:11px;white-space:nowrap}.app-mode-status.is-research{border-color:#0ea5e9;color:#bae6fd}.app-theme-switch{display:inline-flex;align-items:center;gap:6px;padding:0!important;background:transparent!important;color:#e2e8f0}.app-theme-track{position:relative;width:42px;height:20px;border-radius:12px;background:#475569}.app-theme-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.18s}.theme-light .app-theme-knob{transform:translateX(22px);background:#f59e0b}.theme-light .app-theme-track{background:#bfdbfe}.settings-page{display:grid;gap:16px}.settings-heading,.settings-heading>div,.settings-card-title{display:flex;align-items:center;gap:12px}.settings-heading{justify-content:space-between}.settings-heading h1,.settings-card-title h2{margin:0}.settings-heading p,.settings-card-title p{margin:3px 0 0;color:#64748b}.page-icon,.settings-card-title>span{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#dbeafe;color:#1d4ed8;font-size:20px}.mode-chip,.session-status{padding:5px 10px;border-radius:999px;background:#dcfce7;color:#166534;font-size:12px}.mode-chip.is-research{background:#e0f2fe;color:#075985}.settings-card{background:#fff;border:1px solid #dbe2ea;border-radius:10px;padding:18px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mode-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:12px;align-items:stretch;margin-top:16px}.mode-option{position:relative;display:grid!important;grid-template-columns:32px 1fr;column-gap:8px;padding:14px;border:1px solid #cbd5e1;border-radius:8px;margin:0!important}.mode-option input{position:absolute;right:10px;top:10px;width:auto}.mode-option>span{grid-row:1/3;font-size:24px}.mode-option small{color:#64748b}.settings-meta{display:grid;grid-template-columns:90px 1fr;gap:7px;margin:16px 0}.settings-meta dt{color:#64748b}.settings-meta dd{margin:0;font-weight:600}.compact-form,.research-form{margin-top:14px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.check-grid{display:flex;flex-wrap:wrap;gap:12px}.check-grid label,.collection-grid label{display:flex;align-items:center;gap:6px;margin:0}.check-grid input,.collection-grid input{width:auto;margin:0}.collection-grid{display:grid;grid-template-columns:1fr 70px 1fr 70px;gap:8px}.research-form fieldset{margin:10px 0 16px;border:1px solid #dbe2ea;border-radius:8px;padding:12px}.session-list{display:grid;gap:8px;margin-top:16px}.session-list article{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid #e2e8f0;border-radius:7px}.session-list article>div{display:grid;margin-right:auto}.session-list article span{font-size:12px;color:#64748b}.theme-light body{background:#f1f5f9}.theme-light header{background:#e2e8f0;color:#0f172a}.theme-light nav a,.theme-light .app-nav-menu>summary{color:#334155}.theme-light .app-mode-status{color:#334155;border-color:#94a3b8}.theme-light .app-theme-switch{color:#334155!important}@media(max-width:800px){.settings-grid,.mode-selector,.form-grid{grid-template-columns:1fr}.collection-grid{grid-template-columns:1fr 70px}.app-mode-status{display:none}}


.login-card {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
    max-width: 920px;
    min-height: 520px;
    margin: 34px auto;
    padding: 0;
    overflow: hidden;
}

.login-form-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px;
}

.login-heading {
    margin-bottom: 28px;
}

.login-heading h1 {
    margin: 8px 0 10px;
    font-size: clamp(30px, 4vw, 40px);
    letter-spacing: -.03em;
}

.login-heading p {
    margin: 0;
    color: var(--app-muted);
    line-height: 1.75;
}

.login-eyebrow {
    color: var(--app-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.login-form label {
    color: var(--app-text);
    font-size: 13px;
}

.login-form input {
    min-height: 44px;
}

.login-submit {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    font-weight: 700;
}

.login-session-takeover {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
}

.login-session-takeover > p { margin: 0; font-size: 13px; line-height: 1.6; }
.login-session-takeover ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.login-session-takeover li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 10px; border-radius: 7px; background: #fff; font-size: 12px; }
.login-session-takeover li small { grid-column: 1 / -1; color: #8a5a16; }
.login-session-takeover-actions { margin: 0; }
.login-cancel-takeover { width: 100%; border-color: #d6b77a; background: transparent; color: #78350f; }

.login-visual {
    position: relative;
    display: flex;
    min-height: 520px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 32px;
    background: linear-gradient(145deg, #075985 0%, #2563eb 54%, #38bdf8 100%);
    color: #fff;
    text-align: center;
}

.login-visual::before,
.login-visual::after {
    position: absolute;
    border: 1px solid #ffffff26;
    border-radius: 50%;
    content: '';
}

.login-visual::before {
    top: -130px;
    right: -110px;
    width: 310px;
    height: 310px;
}

.login-visual::after {
    bottom: -170px;
    left: -140px;
    width: 360px;
    height: 360px;
}

.login-illustration {
    position: relative;
    z-index: 1;
    width: min(100%, 390px);
    height: auto;
    filter: drop-shadow(0 24px 28px #0f3f7f55);
}

.login-visual-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
    margin-top: -16px;
}

.login-visual-copy strong {
    font-size: 19px;
}

.login-visual-copy span {
    color: #e0f2fe;
    font-size: 13px;
}

@media (max-width: 760px) {
    .login-card {
        grid-template-columns: 1fr;
        min-height: 0;
        margin: 12px auto;
    }

    .login-form-pane {
        padding: 30px 24px;
    }

    .login-visual {
        min-height: 300px;
        padding: 20px;
    }

    .login-illustration {
        width: min(100%, 260px);
    }
}