/* CoreAI-Medic — Main Styles */

/* --- Theme system (5 themes; js/theme.js sets <html data-theme="...">,
   persisted in localStorage, default "dark") ---
   Every theme below defines the SAME variable names, so the rest of this
   file never checks which theme is active — components just read
   --primary/--text/--card/etc. Bare :root is the no-JS / first-paint
   fallback and matches Dark (the app's default) so a page whose anti-
   flash inline script hasn't run yet still renders correctly rather than
   flashing an unstyled or wrong-default look. */

:root {
    /* --primary/--danger/--warning/--success are used as solid fill +
       white text (buttons, badges, banners) — that pairing's contrast
       doesn't depend on theme, so these 4 stay the same hex across every
       theme EXCEPT where a theme's whole identity is a different accent
       hue (Medical Teal, Night Shift's amber-instead-of-blue primary) —
       those overrides are individually contrast-checked below, same
       method as this audit. --warning/--success here are amber-700/
       green-700, not the lighter 600 shades, because white-on-#d97706
       (amber-600) = 3.19:1 and white-on-#16a34a (green-600) = 3.30:1,
       both below the 4.5:1 WCAG AA text threshold — amber-700/green-700
       measure 5.02:1. See docs/design/UI_COMPONENTS.md's contrast audit.
       Anywhere the same hue is used as *text or border* against --bg/
       --card instead needs a separate theme-aware token (--primary-text/
       --danger-text/etc.), since a color dark enough for white-text-on-it
       often fails 4.5:1 as text against a dark surface. */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --warning: #b45309;
    --success: #15803d;
    --radius: 8px;

    /* Dark (default) — --text/--text-muted brightened one step past a
       "plain" slate-200/slate-400 pairing (which already passed WCAG AA
       against this --bg/--card) because light text on a dark surface
       still commonly *reads* thinner/washed-out than the same weight
       would on a light surface — see the body font-weight bump below,
       same fix from the other direction. */
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #cbd5e1;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --primary-text: #60a5fa;
    --danger-text: #f87171;
    --success-text: #4ade80;
    --warning-border: #d97706;
    --muted-fill: #64748b;
    --danger-bg: #4a1f28;
    --warning-bg: #443512;
    --badge-warning-bg: #523310;
    --badge-warning-text: #fbbf24;
    --badge-status-bg: #233854;
    --badge-status-text: #93c5fd;
    --chip-bg: #233854;
    --chip-border: #5a86c5;
    --hover-bg: #334155;

    /* Medication card "identity band" (see .med-header) — the solid-
       color header every medication entry uses so its name reads as the
       card's header, not just bold text in the body. White(-ish)-on-
       accent, so it works regardless of which theme's accent hue is
       active; High Contrast inverts it since white IS that theme's
       accent. */
    --med-header-bg: #1d4ed8;
    --med-header-text: #ffffff;
    --med-header-badge-bg: rgba(255,255,255,0.22);
    --med-header-badge-text: #ffffff;
}

:root[data-theme="dark"] {
    /* Identical to bare :root above, stated explicitly so switching back
       to Dark from another theme is an explicit choice, not just an
       absence of data-theme. */
    --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --text-muted: #cbd5e1;
    --border: #334155; --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --primary-text: #60a5fa; --danger-text: #f87171; --success-text: #4ade80;
    --warning-border: #d97706; --muted-fill: #64748b;
    --danger-bg: #4a1f28; --warning-bg: #443512;
    --badge-warning-bg: #523310; --badge-warning-text: #fbbf24;
    --badge-status-bg: #233854; --badge-status-text: #93c5fd;
    --chip-bg: #233854; --chip-border: #5a86c5; --hover-bg: #334155;
    --med-header-bg: #1d4ed8; --med-header-text: #ffffff;
    --med-header-badge-bg: rgba(255,255,255,0.22); --med-header-badge-text: #ffffff;
}

:root[data-theme="light"] {
    --bg: #f8fafc; --card: #ffffff; --text: #1e293b; --text-muted: #64748b;
    --border: #e2e8f0; --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --primary-text: var(--primary-dark); --danger-text: var(--danger); --success-text: var(--success);
    --warning-border: var(--warning); --muted-fill: #64748b;
    --danger-bg: #fef2f2; --warning-bg: #fffbeb;
    --badge-warning-bg: #fef3c7; --badge-warning-text: #92400e;
    --badge-status-bg: #dbeafe; --badge-status-text: #1e40af;
    --chip-bg: #eff6ff; --chip-border: #bfdbfe; --hover-bg: #f8fafc;
    --med-header-bg: var(--primary); --med-header-text: #ffffff;
    --med-header-badge-bg: rgba(255,255,255,0.25); --med-header-badge-text: #ffffff;
}

/* Medical Teal — professional hospital/clinical identity: teal replaces
   blue as the accent everywhere (still individually contrast-checked —
   white-on-teal-600 ≈ 4.7:1, teal-700-on-white ≈ 5.4:1), light surface,
   the teal/cyan commonly associated with clinical trust & hygiene. */
:root[data-theme="medical"] {
    --primary: #0d9488; --primary-dark: #0f766e;
    --bg: #f0fdfa; --card: #ffffff; --text: #134e4a; --text-muted: #0f766e;
    --border: #ccfbf1; --shadow: 0 1px 3px rgba(15,118,110,0.12);
    --primary-text: #0f766e; --danger-text: var(--danger); --success-text: var(--success);
    --warning-border: var(--warning); --muted-fill: #0f766e;
    --danger-bg: #fef2f2; --warning-bg: #fffbeb;
    --badge-warning-bg: #fef3c7; --badge-warning-text: #92400e;
    --badge-status-bg: #ccfbf1; --badge-status-text: #115e59;
    --chip-bg: #f0fdfa; --chip-border: #5eead4; --hover-bg: #ccfbf1;
    --med-header-bg: #0d9488; --med-header-text: #ffffff;
    --med-header-badge-bg: rgba(255,255,255,0.25); --med-header-badge-text: #ffffff;
}

/* High Contrast — near-black/white with saturated accents, aimed at
   WCAG AAA (7:1) normal-text contrast for low-vision use or a poorly-lit
   triage room. --primary stays the standard blue (already contrast-
   checked as fixed fill) — the AAA boost comes from --bg/--text/--border.
   The medication header band inverts to white-on-card instead of a
   colored band, since white itself is this theme's loudest accent. */
:root[data-theme="high-contrast"] {
    --bg: #000000; --card: #0d0d0d; --text: #ffffff; --text-muted: #d1d5db;
    --border: #ffffff; --shadow: none;
    --primary-text: #93c5fd; --danger-text: #fca5a5; --success-text: #86efac;
    --warning-border: #fbbf24; --muted-fill: #374151;
    --danger-bg: #3f0d0d; --warning-bg: #3f2c06;
    --badge-warning-bg: #453107; --badge-warning-text: #fde68a;
    --badge-status-bg: #16283f; --badge-status-text: #bfdbfe;
    --chip-bg: #111827; --chip-border: #60a5fa; --hover-bg: #1a1a1a;
    --med-header-bg: #ffffff; --med-header-text: #000000;
    --med-header-badge-bg: rgba(0,0,0,0.14); --med-header-badge-text: #000000;
}

/* Night Shift — near-black *warm* surfaces + amber/orange accents in
   place of blue anywhere (primary, links, info badges), so the palette
   stays low in blue light for clinicians reading this overnight.
   --primary uses orange-700 (#c2410c, not the same hex as --warning) so
   primary actions and warning banners stay visually distinct; verified
   white-on-#c2410c ≈ 4.9:1, same audit method as the base tokens above. */
:root[data-theme="night-shift"] {
    --primary: #c2410c; --primary-dark: #9a3412;
    /* --text/--text-muted brightened one step for the same reason as
       Dark above — see that theme's comment. */
    --bg: #170f0a; --card: #241a12; --text: #f8ede0; --text-muted: #d9c3a8;
    --border: #3a2a1c; --shadow: 0 1px 3px rgba(0,0,0,0.5);
    --primary-text: #fbbf24; --danger-text: #fca5a5; --success-text: #bef264;
    --warning-border: #ea580c; --muted-fill: #57534e;
    --danger-bg: #3a1210; --warning-bg: #3a1a06;
    --badge-warning-bg: #4a2308; --badge-warning-text: #fdba74;
    --badge-status-bg: #3a2a12; --badge-status-text: #fcd34d;
    --chip-bg: #2e2116; --chip-border: #92400e; --hover-bg: #2e2116;
    --med-header-bg: #92400e; --med-header-text: #fef3c7;
    --med-header-badge-bg: rgba(255,255,255,0.18); --med-header-badge-text: #fef3c7;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* Dark & Night Shift: regular-weight text on a dark surface tends to
   *read* thinner than the same weight on a light surface, even once the
   color contrast itself already passes WCAG AA (see --text/--text-muted
   above) — nudging the base weight up one step counteracts that without
   touching anything that already sets its own explicit weight (headings,
   buttons, badges, .med-header, etc. all keep theirs). Light/Medical/High
   Contrast are unaffected — High Contrast already reads as bold as
   possible via pure white-on-black, and Light/Medical never had the
   "thin" complaint to begin with. */
:root[data-theme="dark"] body,
:root:not([data-theme]) body,
:root[data-theme="night-shift"] body {
    font-weight: 500;
}

header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Brand mark (stethoscope) — same glyph as favicon.svg/.login-logo, reused
   as a small badge next to "CoreAI-Medic" in every header so the icon
   isn't confined to the browser tab and login screen. */
.app-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    flex-shrink: 0;
}
.app-logo-icon svg { width: 62%; height: 62%; }
.admin-header .app-logo-icon { width: 1.5rem; height: 1.5rem; }

.app-version-badge {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--border);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.login-card .app-version-badge {
    display: inline-block;
    margin-top: 0.25rem;
}

/* --- Header responsive / icon nav + tooltip --- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-nav a,
.main-nav button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.main-nav a:hover,
.main-nav button:hover {
    background: var(--hover-bg);
    color: var(--primary-text);
}

.main-nav a.active,
.main-nav button.active {
    color: var(--primary-text);
    background: var(--chip-bg);
    box-shadow: 0 0 0 1px var(--chip-border);
}

.nav-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* Tooltip (CSS-only) */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
}

/* Collapse to icon-only on mobile / tablet portrait */
@media (max-width: 720px) {
    header {
        padding: 0.75rem 1rem;
    }
    header h1 {
        font-size: 1.05rem;
    }
    .main-nav a,
    .main-nav button {
        padding: 0.5rem;
    }
    .main-nav .nav-label {
        display: none;
    }
    .nav-icon {
        width: 1.35rem;
        height: 1.35rem;
    }
    #admin-link {
        display: none;
    }
}

@media (max-width: 480px) {
    .app-version-badge {
        display: none;
    }
}

button {
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* --- Login / Register (versi 1.03 redesign) --- */

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 900px 500px at 50% -10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent),
        var(--bg);
}

.login-card {
    background: var(--card);
    padding: 1.75rem;
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), var(--shadow);
    border: 1px solid var(--border);
    text-align: center;
    max-width: 360px;
    width: 100%;
}

.login-brand {
    margin-bottom: 1.5rem;
}

.login-logo {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-logo svg { width: 26px; height: 26px; }

.login-brand h1 {
    font-size: 1.15rem;
    margin: 0;
}

.login-tagline {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.login-form {
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 0.85rem;
}

.btn-block {
    width: 100%;
    padding: 0.65rem;
    font-weight: 600;
}

.btn-block:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.login-switch {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-google-note {
    font-size: 0.825rem;
    color: var(--text-muted);
    background: var(--hover-bg);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    margin: 0;
}

#google-login-section {
    display: flex;
    justify-content: center;
}

.login-dev-tools {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    text-align: left;
}

.login-dev-tools-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--warning-border);
    background: var(--warning-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.severity-options label {
    display: inline-block;
    margin-right: 1rem;
    font-weight: normal;
}

.hidden { display: none !important; }

.error {
    color: var(--danger-text);
    background: var(--danger-bg);
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-top: 1rem;
}

.dev-fallback {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.dev-fallback input {
    width: 70%;
    margin-top: 0.5rem;
}

footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- Triage form additions --- */

.muted { color: var(--text-muted); font-size: 0.875rem; }

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.form-row .form-group {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}

/* --- Triage form: Wizard + Cards (versi 1.00.alpha.08) --- */

.form-layout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

#btn-toggle-layout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#btn-toggle-layout svg { width: 1.1rem; height: 1.1rem; }
.btn-toggle-label { font-size: 0.8rem; }

/* Stepper */
.form-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: default;
    transition: all 0.2s ease;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}
.step svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.step-icon { display: inline-flex; }
.step-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.step-check {
    display: none;
    width: 1rem;
    height: 1rem;
    color: var(--success);
}
.step.completed .step-icon { display: none; }
.step.completed .step-check { display: inline-flex; }
.step.disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}
.step.active {
    border-color: var(--primary);
    color: var(--primary-text);
    background: var(--chip-bg);
    box-shadow: 0 0 0 2px var(--chip-border);
}
.step-line {
    flex: 0 0 1.5rem;
    height: 2px;
    background: var(--border);
    position: relative;
}
.step-line span {
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.step.completed + .step-line span { transform: scaleX(1); }

/* Wizard step panels */
.wizard-step {
    display: none;
    animation: fadeIn 0.25s ease;
}
.wizard-step.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form card */
.form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.form-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 0.75rem;
    background: linear-gradient(135deg, var(--card) 0%, var(--hover-bg) 100%);
    border-bottom: 1px solid var(--border);
}
.form-card-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.form-card-icon svg { width: 1.25rem; height: 1.25rem; }
.form-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-text);
}
.form-card-sub {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.form-card-body {
    padding: 1.25rem;
}

/* Wizard nav */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--hover-bg);
}
.wizard-nav .btn-primary,
.wizard-nav .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
}
.wizard-nav .btn-primary {
    background: var(--primary);
    color: #fff;
}
.wizard-nav .btn-primary:hover { background: var(--primary-dark); }
.wizard-nav .btn-secondary {
    background: var(--border);
    color: var(--text);
}
.wizard-nav .btn-secondary:hover { background: var(--hover-bg); }
.wizard-nav svg { width: 1rem; height: 1rem; }

/* Cards layout */
.layout-cards .wizard-step {
    display: block !important;
    margin-bottom: 1rem;
    animation: none;
}
.layout-cards .wizard-step[hidden] { display: block !important; }
.layout-cards .form-stepper { display: none; }
.layout-cards .wizard-nav { display: none; }
.layout-cards .wizard-step:last-child .wizard-nav {
    display: flex;
}
.layout-cards .wizard-step:last-child .wizard-nav .wizard-prev { display: none; }

/* Severity badges in results */
.result-severity {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
/* Severity hue (green=ringan, orange=sedang, red=berat) stays the same
   semantic mapping across every theme so it's recognizable at a glance —
   only the exact shade adapts per theme for contrast against that
   theme's card background. */
:root, :root[data-theme="light"], :root[data-theme="medical"] {
    --severity-mild-bg: #dcfce7; --severity-mild-text: #166534; --severity-mild-border: #bbf7d0;
    --severity-moderate-bg: #ffedd5; --severity-moderate-text: #9a3412; --severity-moderate-border: #fed7aa;
    --severity-critical-bg: #fee2e2; --severity-critical-text: #991b1b; --severity-critical-border: #fecaca;
}
:root[data-theme="dark"], :root[data-theme="night-shift"] {
    --severity-mild-bg: #14532d; --severity-mild-text: #86efac; --severity-mild-border: #166534;
    --severity-moderate-bg: #7c2d12; --severity-moderate-text: #fdba74; --severity-moderate-border: #9a3412;
    --severity-critical-bg: #7f1d1d; --severity-critical-text: #fca5a5; --severity-critical-border: #991b1b;
}
:root[data-theme="high-contrast"] {
    --severity-mild-bg: #052e16; --severity-mild-text: #4ade80; --severity-mild-border: #16a34a;
    --severity-moderate-bg: #431407; --severity-moderate-text: #fb923c; --severity-moderate-border: #ea580c;
    --severity-critical-bg: #450a0a; --severity-critical-text: #f87171; --severity-critical-border: #dc2626;
}
.severity-mild {
    background: var(--severity-mild-bg);
    color: var(--severity-mild-text);
    border: 1px solid var(--severity-mild-border);
}
.severity-moderate {
    background: var(--severity-moderate-bg);
    color: var(--severity-moderate-text);
    border: 1px solid var(--severity-moderate-border);
}
.severity-critical,
.severity-severe {
    background: var(--severity-critical-bg);
    color: var(--severity-critical-text);
    border: 1px solid var(--severity-critical-border);
}

/* Mobile drawer for detail panel */
.detail-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 900;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.detail-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.detail-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-radius: 1rem 1rem 0 0;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 910;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
    padding: 1.25rem;
}
.detail-drawer.open { transform: translateY(0); }
.detail-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.detail-drawer-header h4 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.detail-drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: inline-flex;
    border-radius: var(--radius);
}
.detail-drawer-close:hover { background: var(--hover-bg); }
.detail-drawer-close svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 720px) {
    #split-detail-panel.split-detail {
        display: none !important;
    }
    .form-stepper {
        gap: 0.25rem;
    }
    .step-label { display: none; }
    .step { padding: 0.4rem; }
    .step-line { flex: 0 0 1rem; }
    .form-layout-header {
        gap: 0.5rem;
    }
    .btn-toggle-label { display: none; }
    .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    .form-row .form-group {
        min-width: 100%;
        flex: none;
    }
    .wizard-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
    .wizard-nav .btn-primary,
    .wizard-nav .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .form-card-header,
    .form-card-body,
    .wizard-nav {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 721px) {
    .detail-drawer-overlay,
    .detail-drawer {
        display: none !important;
    }
}

/* Ensure .btn-primary / .btn-secondary have proper SVG alignment */
.btn-primary svg,
.btn-secondary svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.symptom-picklist {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    background: var(--card);
}

.symptom-item {
    display: block;
    font-weight: normal;
    padding: 0.25rem 0;
    margin: 0;
}
.symptom-item input { width: auto; margin-right: 0.5rem; }

.btn-secondary {
    background: var(--border);
    color: var(--text);
}

a.btn-primary, a.btn-secondary {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
}

/* --- Public landing page (versi 1.02 item 1) — shown in #auth-gate when logged out --- */

.hero {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
}

.hero h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--primary-text);
}

.hero p {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    color: var(--text-muted);
}

.hero-cta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.feature-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--primary-text);
}

.feature-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.landing-footnote {
    text-align: center;
}

/* --- Disclaimer modal --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    margin: 1rem 0;
}
.modal-check input { width: auto; }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-danger {
    background: var(--card);
    color: var(--danger-text);
    border: 1px solid var(--danger-text);
}
.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}
/* Delete pinned to the opposite end from Cancel/Simpan so it can't be hit
   by a reflexive click after saving — see UX-B08, PLAN_KIMI_v_2_UX.md §7.7. */
.modal-actions .btn-danger {
    margin-right: auto;
}

/* --- Triage results --- */

.disclaimer-note {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    padding: 0.75rem;
    font-size: 0.875rem;
}

.result-rank {
    background: var(--muted-fill);
    color: #fff;
    border-radius: 999px;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.result-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: var(--primary-text);
    flex-shrink: 0;
}

.result-name { flex: 1; font-weight: 600; }

/* Every medication entry uses .med-header as a solid-color "identity
   band" so the drug name reads as the card's header (not just bold text
   in the body) — see --med-header-bg/--med-header-text per theme above.
   .med-suppressed (requires_clinician_review) keeps its own full-card
   red-warning look instead — that's already a stronger, differently-
   colored signal, so it opts out of the band via the override below
   rather than layering two competing "look at me" treatments. */
.med-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--card);
}
.med-suppressed {
    background: var(--danger-bg);
    border-color: var(--danger-text);
    padding: 0.75rem;
}
.med-suppressed .med-header {
    background: none;
    color: inherit;
    padding: 0;
    font-weight: normal;
}
.med-suppressed .med-header .badge { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.med-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--med-header-bg);
    color: var(--med-header-text);
    padding: 0.6rem 0.85rem;
    font-weight: 700;
}
.med-header .badge {
    background: var(--med-header-badge-bg);
    color: var(--med-header-badge-text);
}
.med-body {
    padding: 0.75rem 0.85rem 0.85rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-status { background: var(--badge-status-bg); color: var(--badge-status-text); }

/* --- Triage results (versi 1.00.alpha.07) ---
   Split View is now the ONLY page layout (no more user-selectable
   full-page layouts — versi 1.00.alpha.06's Accordion/Grid/Table/Tabs
   page-level layouts are gone). #triage-layout-root wraps #triage-form +
   #triage-results (index.html) so the collapsible form and the compact
   ranked-condition list share the left column via CSS Grid areas; the
   grid is unconditional now (no `.layout-split` modifier needed — there's
   only one state). main.layout-wide widens the page once results exist
   (before that, the bare form looks better narrow and centered). What IS
   still a user choice is List/Grid/Table for the MEDICATION list inside
   the right-hand detail panel specifically — see .med-view-switcher and
   .med-grid/.med-table below, and triage-results.js's MED_VIEWS. */

main.layout-wide {
    max-width: 1300px;
}

#triage-form-toggle > summary {
    cursor: pointer;
    list-style: none;
}
#triage-form-toggle > summary::-webkit-details-marker { display: none; }
#triage-form-toggle > summary h2 { display: inline-block; margin: 0; }
#triage-form-toggle > summary::before {
    content: '▾';
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
#triage-form-toggle:not([open]) > summary::before { transform: rotate(-90deg); }

/* Shared small pill-button look for both the (now removed) page switcher's
   original styling and the new in-panel med-view switcher below — kept
   under this name since triage-results.js's med-view buttons reuse it. */
.layout-switcher-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
}
.layout-switcher-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* #triage-form and #triage-results are each ONE normal grid item in the
   left column (everything inside each — heading, disclaimer, compact
   list — just stacks via ordinary block flow, no special CSS needed for
   that part). The detail pane is a physically separate, always-present
   sibling element (#split-detail-panel in index.html) placed in the
   right column — kept outside #triage-results specifically so it never
   has to fight over a shared named grid-area with the list/heading/
   disclaimer above it (multiple grid items given the *same* grid-area
   name overlap each other instead of stacking — a real bug an earlier
   version of this rule had). Hidden by default via the app's existing
   .hidden utility class; renderTriageResults()/renderDetailPanel() in
   triage-results.js reveal + populate it once there's a result to show. */
/* Layout: before results, the form is full-width centered (single column).
   Once results exist (.has-results), switch to split-view grid. */
#triage-layout-root:not(.has-results) {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}
#triage-layout-root:not(.has-results) #triage-form {
    width: 100%;
}
#triage-layout-root.has-results {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    grid-template-areas: "form detail" "results detail";
    grid-template-rows: auto 1fr;
    gap: 0.5rem 1.5rem;
    align-items: start;
}
#triage-layout-root.has-results #triage-form { grid-area: form; }
#triage-layout-root.has-results #triage-results { grid-area: results; }
#triage-layout-root.has-results #split-detail-panel {
    grid-area: detail;
}

/* Keep old unconditional grid rule hidden — now gated by .has-results */
/* (old #triage-layout-root block removed; see has-results variant above) */

.split-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 60vh;
    overflow-y: auto;
}
.split-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: var(--text);
}
.split-list-item .result-name { font-size: 0.9rem; }
.score { color: var(--text-muted); font-weight: 500; }
.split-list-item.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.split-detail {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}
.split-detail h4 { margin-top: 0; }

@media (max-width: 720px) {
    /* Below 720px the split view is always collapsed to a single column
       regardless of results state, so .has-results grid rules don't apply. */
    #triage-layout-root.has-results {
        display: block;
    }
    #triage-layout-root #split-detail-panel {
        margin-top: 1rem;
    }
    .split-list { max-height: none; }
    .split-detail { position: static; }
}

.med-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.med-list-header h5 { margin: 0; }
.med-view-switcher {
    display: flex;
    gap: 0.4rem;
}

/* Medication view: Grid (condensed cards, expand for full detail) */
.med-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.med-grid-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
    background: var(--card);
}
/* Comes after .med-grid-card so its padding wins over the padding:0
   above for a suppressed medication rendered in Grid view (same
   specificity — .med-suppressed alone, defined earlier, would otherwise
   lose the cascade tie-break to the later .med-grid-card rule). */
.med-grid-card.med-suppressed {
    padding: 0.75rem;
}
.med-grid-card details summary {
    cursor: pointer;
    color: var(--primary-text);
    font-weight: 500;
    font-size: 0.875rem;
}
.med-grid-card .med-body > *:first-child { margin-top: 0; }

/* Medication view: Table (one row per medication, expand row for detail) —
   reuses .results-table/.table-row-summary/.table-row-detail, the same
   compact-table styling versi 1.00.alpha.06 used at the page level.
   Default view (versi 1.00.alpha.08) — every row starts collapsed
   (renderMedicationsTable no longer auto-expands row 0); the summary
   row's left edge carries a --med-header-bg accent stripe so a medication
   is still visually identifiable before it's expanded, and expanding it
   repeats the same .med-header band used by List/Grid so the drug name
   reads as a "header" in every view, not just the card-based ones. */
.results-table-wrap { overflow-x: auto; }
.results-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
}
.results-table th, .results-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.results-table thead th {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}
.table-row-summary { cursor: pointer; }
.table-row-summary:hover { background: var(--bg); }
.table-row-summary td:first-child {
    border-left: 4px solid var(--med-header-bg);
}
.table-row-detail td { background: var(--bg); }
.table-row-detail .med-header {
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
}
.table-row-detail .med-body { padding: 0; }

/* --- History page --- */

.history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--text);
    background: var(--card);
}
.history-row:hover { border-color: var(--primary-text); }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* --- Error boundary --- */

.error-boundary-banner {
    background: var(--danger);
    color: #fff;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
}

/* --- Accessibility: skip link, offline indicator (PLAN_KIMI_v_2_UX.md C0-T05) --- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1rem;
    z-index: 3000;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
    left: 0;
}

.offline-indicator {
    background: var(--warning);
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* --- Offline queue badge/panel (UX-B05) --- */

.queue-badge {
    background: var(--warning);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    margin-left: 1rem;
    cursor: pointer;
}

.queue-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.queue-item:last-child { border-bottom: none; }
.queue-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.queue-item-status:not(:empty) {
    margin-top: 0.25rem;
    color: var(--danger-text);
}

/* --- Symptom chips (PLAN_KIMI_v_2_UX.md C2-T02) --- */

.symptom-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--chip-bg);
    color: var(--primary-text);
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    padding: 0.25rem 0.4rem 0.25rem 0.75rem;
    font-size: 0.8125rem;
}
.chip-remove {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}
.chip-remove:hover {
    color: var(--danger-text);
}

.field-error {
    display: block;
    color: var(--danger-text);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}
.field-error:empty { display: none; }

input[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--danger-text);
}

.symptom-item:focus-within,
.symptom-picklist input:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Theme switcher (js/theme.js) --- */

.theme-switcher {
    position: relative;
    display: inline-block;
    margin-left: 1rem;
    vertical-align: middle;
}
.theme-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text);
}
.theme-switcher-toggle:hover { border-color: var(--primary); }
.theme-switcher-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2), var(--shadow);
    padding: 0.35rem;
    min-width: 190px;
    z-index: 1200;
}
.theme-switcher.open .theme-switcher-menu { display: block; }
.theme-switcher-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.theme-switcher-item:hover { background: var(--hover-bg); }
.theme-switcher-item[aria-checked="true"] {
    background: var(--chip-bg);
    color: var(--primary-text);
    font-weight: 600;
}
/* login.html/register.html have no header nav to mount into, so
   theme.js appends a small floating button instead. */
.theme-switcher-floating {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    margin-left: 0;
}
.theme-switcher-floating .theme-switcher-menu {
    right: 0;
    top: auto;
    bottom: calc(100% + 0.4rem);
}
.theme-switcher-floating .theme-switcher-toggle {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
@media (max-width: 720px) {
    .theme-switcher-label { display: none; }
    .theme-switcher-toggle { padding: 0.45rem 0.55rem; }
}