/*
   Sano Conference's palette and type: the "Fresh Mint" palette of docs/style-guide.md and
   docs/mockups.html - emerald for action, slate for text, mint-tinted surfaces, pale yellow reserved
   for "requires human verification" - drawn light, with the specification's own dark palette
   (#0f172a / #1e293b / #6ee7b7) for dark mode and for the live presentation.

   Contrast adjustments, keeping each hue and moving its lightness (see the README):

   - The style guide's emerald #10b981 is 2.5:1 against white, and its hover #059669 3.8:1, so
     neither can carry white button text or a link at body size. Buttons and links use emerald-700
     #047857 (5.5:1 with white), hovering to emerald-800 #065f46. #10b981 stays as the accent line:
     active tab and nav indicators, selected card borders, focus rings.
   - The danger red #ef4444 is 3.8:1 with white text; buttons and error text use red-700 #b91c1c
     (6.5:1).
   - The placeholder grey #94a3b8 is 2.6:1 on white, so it is used for placeholders only, never
     for text somebody has to read; muted text is #64748b (4.8:1 on white, 4.6:1 on mint).

   Fonts: Space Grotesk, and Space Mono for FHIR data and audit entries, as the style guide asks.
   The Content-Security-Policy allows no font host, so they are used when installed and fall back
   to the system stack otherwise; the README says how to ship the font files.
*/

:root,
[data-bs-theme="light"] {
    --app-accent: #047857;
    --app-accent-hover: #065f46;
    --app-accent-line: #10b981;
    --app-accent-contrast: #ffffff;
    --app-surface: #ffffff;
    --app-surface-sunken: #f8fafc;
    --app-surface-mint: #f0fdfa;
    --app-text: #1e293b;
    --app-text-muted: #64748b;
    --app-placeholder: #94a3b8;
    --app-border: #e2e8f0;
    --app-border-muted: #cbd5e1;

    /* Pale yellow means one thing: this needs a human to verify it. Disclaimers and pending review. */
    --app-review-bg: #fef9c3;
    --app-review-text: #1e293b;
    --app-review-border: #a16207;

    /* Clinical signals. */
    --app-critical: #b91c1c;
    --app-critical-hover: #991b1b;
    --app-warning: #a16207;
    --app-positive: #047857;
    --app-info: #1d4ed8;

    --app-radius: 0.5rem;
    --app-radius-lg: 0.75rem;
    --app-font: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --app-font-heading: var(--app-font);
    --app-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    --app-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --app-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* The style guide's sidebar: slate-50 with a hairline, mint behind the active item. */
    --app-sidebar-bg: #f8fafc;
    --app-sidebar-brand-bg: #ffffff;
    --app-sidebar-text: #475569;
    --app-sidebar-text-active: #047857;
    --app-sidebar-hover-bg: #f0fdfa;
    --app-sidebar-active-bg: #f0fdfa;
    --app-sidebar-border: #e2e8f0;
    --app-topbar-bg: #ffffff;

    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 4, 120, 87;
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: 4, 120, 87;
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-hover-color-rgb: 6, 95, 70;
    --bs-body-bg: var(--app-surface);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius);
    --bs-body-font-family: var(--app-font);
    --bs-font-monospace: var(--app-font-mono);
    --bs-focus-ring-color: rgba(16, 185, 129, 0.45);
}

[data-bs-theme="dark"] {
    --app-accent: #6ee7b7;
    --app-accent-hover: #a7f3d0;
    --app-accent-line: #6ee7b7;
    --app-accent-contrast: #0f172a;
    --app-surface: #0f172a;
    --app-surface-sunken: #1e293b;
    --app-surface-mint: #133a36;
    --app-text: #f1f5f9;
    --app-text-muted: #94a3b8;
    --app-placeholder: #64748b;
    --app-border: #334155;
    --app-border-muted: #475569;

    /* Still pale yellow with dark text on a dark page: the signal must not change meaning. */
    --app-review-bg: #fef9c3;
    --app-review-text: #1e293b;
    --app-review-border: #eab308;

    --app-critical: #f87171;
    --app-critical-hover: #fca5a5;
    --app-warning: #fbbf24;
    --app-positive: #6ee7b7;
    --app-info: #7dd3fc;

    --app-sidebar-bg: #1e293b;
    --app-sidebar-brand-bg: #0f172a;
    --app-sidebar-text: #cbd5e1;
    --app-sidebar-text-active: #6ee7b7;
    --app-sidebar-hover-bg: rgba(110, 231, 183, 0.08);
    --app-sidebar-active-bg: rgba(110, 231, 183, 0.14);
    --app-sidebar-border: #334155;
    --app-topbar-bg: #1e293b;

    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 110, 231, 183;
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: 110, 231, 183;
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-hover-color-rgb: 167, 243, 208;
    --bs-body-bg: var(--app-surface);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-focus-ring-color: rgba(110, 231, 183, 0.45);
}

body {
    background-color: var(--app-surface);
    color: var(--app-text);
    font-family: var(--app-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font-heading);
    font-weight: 700;
    color: var(--app-text);
}

code, pre, kbd, .font-monospace {
    font-family: var(--app-font-mono);
}

::placeholder {
    color: var(--app-placeholder) !important;
}

.card {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

.btn {
    font-weight: 600;
    border-radius: var(--app-radius);
}

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-color: var(--app-accent-contrast);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-hover-color: var(--app-accent-contrast);
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
    --bs-btn-active-color: var(--app-accent-contrast);
    --bs-btn-disabled-bg: var(--app-border-muted);
    --bs-btn-disabled-border-color: var(--app-border-muted);
    --bs-btn-disabled-color: var(--app-text-muted);
}

.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-surface-mint);
    --bs-btn-hover-border-color: var(--app-accent-line);
    --bs-btn-active-color: var(--app-accent);
    --bs-btn-active-bg: var(--app-surface-mint);
    --bs-btn-active-border-color: var(--app-accent-line);
}

.btn-danger {
    --bs-btn-bg: var(--app-critical);
    --bs-btn-border-color: var(--app-critical);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--app-critical-hover);
    --bs-btn-hover-border-color: var(--app-critical-hover);
    --bs-btn-hover-color: #ffffff;
}

[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: #0f172a;
    --bs-btn-hover-color: #0f172a;
}

.btn-outline-danger {
    --bs-btn-color: var(--app-critical);
    --bs-btn-border-color: var(--app-critical);
    --bs-btn-hover-bg: var(--app-critical);
    --bs-btn-hover-border-color: var(--app-critical);
}

.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-accent-line);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

:focus-visible {
    outline: 2px solid var(--app-accent-line);
    outline-offset: 2px;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-striped-bg: var(--app-surface-mint);
    --bs-table-hover-bg: var(--app-surface-sunken);
}

.table > thead th {
    background: var(--app-surface-sunken);
    color: var(--app-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The sidebar's hairline and the active item's emerald rule, as the style guide draws them. */
.sidebar {
    border-right: 1px solid var(--app-sidebar-border);
}

.sidebar .nav-link.active {
    box-shadow: inset 3px 0 0 var(--app-accent-line);
    font-weight: 600;
}

.top-row {
    border-bottom: 1px solid var(--app-border);
}

/* Clinical signal helpers, for the app's own content. */
.app-critical { color: var(--app-critical); }
.app-warning { color: var(--app-warning); }
.app-positive { color: var(--app-positive); }
.app-info { color: var(--app-info); }