/* ============================================================
   Medical Analytics Dashboard — design tokens
   Grounded in the ABC / VED / FNS inventory classification
   system used by Project 1: every item resolves along three
   axes to a priority tier. The tier colors below are that
   legend, reused everywhere (charts, tables, radios) so the
   UI teaches the classification instead of decorating it.
   ============================================================ */

:root {
    /* Core palette */
    --ink: #1B2B3A;          /* clinical navy — primary text, nav, footer */
    --ink-soft: #445564;     /* secondary text on light surfaces */
    --paper: #F6F3EC;        /* warm paper — page background */
    --surface: #FFFFFF;      /* card surface */
    --line: #DED7C6;         /* hairline borders on paper */
    --rust: #C4622D;         /* primary accent — links, buttons, brand mark */
    --rust-dark: #A54F22;

    /* Classification tier accents — shared by ABC (A/B/C),
       VED (Vital/Essential/Desirable) and FNS (Fast/Normal/Slow) */
    --tier-1: #A5432A;   /* A / Vital / Fast — highest priority */
    --tier-2: #B8912F;   /* B / Essential / Normal */
    --tier-3: #3D7A5C;   /* C / Desirable / Slow — lowest priority */

    /* Type */
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius: 4px;
}

/* ---------- Base ---------- */

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.975rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lead {
    color: var(--ink-soft);
    font-family: var(--font-body);
}

a {
    color: var(--rust-dark);
}

a:hover {
    color: var(--rust);
}

/* ---------- Navbar ---------- */

.mad-nav {
    background-color: var(--ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.mad-nav .navbar-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--paper);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.mad-nav-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--rust);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}

.mad-nav .nav-link {
    color: rgba(246, 243, 236, 0.75);
    font-weight: 500;
    font-size: 0.92rem;
}

.mad-nav .nav-link:hover,
.mad-nav .nav-link:focus {
    color: var(--paper);
}

.mad-nav .navbar-toggler {
    border-color: rgba(246, 243, 236, 0.35);
}

.mad-nav .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

/* ---------- Cards ---------- */

.card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
    border-color: var(--rust);
    box-shadow: none !important;
}

.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.card-body {
    padding: 1.5rem;
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--rust-dark);
    border-color: var(--rust-dark);
    color: #fff;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--ink-soft);
    color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid var(--rust);
    outline-offset: 2px;
}

/* ---------- Alerts ---------- */

.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.alert-danger {
    background-color: #F6E4DC;
    border-color: var(--tier-1);
    color: var(--tier-1);
}

.alert-success {
    background-color: #E4EEE8;
    border-color: var(--tier-3);
    color: var(--tier-3);
}

.alert-info {
    background-color: #EFEAE0;
    border-color: var(--line);
    color: var(--ink-soft);
}

/* ---------- Tables ---------- */

.table-responsive {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.table {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin-bottom: 0;
    color: var(--ink);
}

.table thead th {
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table tbody tr:hover {
    background-color: #EFEAE0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #FBFAF6;
}

/* ---------- Forms ---------- */

.form-label {
    font-weight: 500;
    color: var(--ink);
}

.form-control {
    border-color: var(--line);
    border-radius: var(--radius);
}

.form-control:focus {
    border-color: var(--rust);
    box-shadow: 0 0 0 0.2rem rgba(196, 98, 45, 0.2);
}

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

.form-check-input:focus {
    border-color: var(--rust);
    box-shadow: 0 0 0 0.2rem rgba(196, 98, 45, 0.2);
}

.form-check-label {
    cursor: pointer;
    padding-left: 0.5rem;
}

/* ---------- Footer ---------- */

.mad-footer {
    background-color: var(--ink);
    color: rgba(246, 243, 236, 0.65);
    border-top: none;
    margin-top: auto;
    font-size: 0.85rem;
}

/* ---------- Classification matrix hero (index page) ---------- */

.matrix-hero {
    padding: 2.5rem 0 1.5rem;
}

.matrix-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rust-dark);
    margin-bottom: 0.75rem;
}

.matrix-hero__title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.matrix-hero__lede {
    max-width: 40rem;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.matrix-grid-scroll {
    overflow-x: auto;
    margin: 2rem 0;
}

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background-color: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.matrix-cell {
    background-color: var(--surface);
    padding: 1rem 0.9rem;
    min-height: 88px;
}

.matrix-cell--header {
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.matrix-cell__tier {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.matrix-cell__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}

.matrix-cell--tier-1 { border-left: 3px solid var(--tier-1); }
.matrix-cell--tier-1 .matrix-cell__tier { color: var(--tier-1); }
.matrix-cell--tier-2 { border-left: 3px solid var(--tier-2); }
.matrix-cell--tier-2 .matrix-cell__tier { color: var(--tier-2); }
.matrix-cell--tier-3 { border-left: 3px solid var(--tier-3); }
.matrix-cell--tier-3 .matrix-cell__tier { color: var(--tier-3); }

/* ---------- Project cards ---------- */

.project-card {
    position: relative;
}

.project-card__index {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* ---------- Analysis method radio cards ---------- */

.method-option {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}

.method-option:has(.form-check-input:checked) {
    border-color: var(--rust);
    background-color: #FBF3EC;
}

/* ---------- Charts container ---------- */

.plotly-graph-div {
    width: 100% !important;
    height: auto !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-responsive {
        max-height: 400px;
    }

    .matrix-hero__title {
        font-size: 1.9rem;
    }

    .matrix-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
        min-width: 520px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}