/* ==========================================================
   SAM-IA — Design System: Colors & Typography
   Source of truth for all design variables.
   Derived from sam_nicegui/components/window_chrome.py + shell.py
   and static/pdf/style.css (WeasyPrint PDF output).
   ========================================================== */

:root {
    /* =====================================================
       BRAND PALETTE
       ===================================================== */

    /* Primary — the SAM-IA wordmark green. Used sparingly:
       logo, primary accents, "positive" success semantics. */
    --sam-green:            #1D9E75;
    --sam-green-dark:       #0E8F6A;
    --sam-green-50:         #E8F5E9;   /* banner / success surface */
    --sam-green-100:        #EAF4EE;
    --sam-green-border:     #A5D6A7;
    --sam-green-text:       #2E7D32;   /* success text on light bg */

    /* Clinical blue — the data / informational accent.
       Used for: data KPIs, primary actions in the clinical
       workflow, patient table hover, PDF section bars. */
    --sam-blue:             #378ADD;
    --sam-blue-dark:        #1B4F8A;   /* PDF titles */
    --sam-blue-mid:         #3A72B5;
    --sam-blue-50:          #E8F0FA;
    --sam-blue-hover:       rgba(55, 138, 221, 0.08);

    /* Warm ochre — "tools & management" accent.
       Used for: agenda, editor, export, advanced settings. */
    --sam-ochre:            #BA7517;
    --sam-orange:           #D85A30;   /* DB alimenti window */
    --sam-orange-warn:      #ED6C02;   /* overweight BMI */

    /* AI purple — any AI / machine-generated feature.
       Used for: plan generator, founder KPI, token badges. */
    --sam-purple:           #534AB7;
    --sam-purple-deep:      #5C35CC;

    /* Prescription indigo — separate from AI purple,
       reserved for "ricetta bianca" surfaces. */
    --sam-indigo:           #534AB7;

    /* Critical / danger — red family. */
    --sam-red:              #A32D2D;   /* admin badge */
    --sam-red-danger:       #C0392B;   /* alert box */
    --sam-red-dot:          #E24B4A;   /* macOS-style close dot */
    --sam-red-text:         #7B241C;
    --sam-red-bg:           #FDF3F2;

    /* Warning yellow — past-due / past-bound states. */
    --sam-yellow-bg:        #FFF8E1;
    --sam-yellow-border:    #FFCC80;
    --sam-yellow-text:      #6D4C00;
    --sam-yellow-dot:       #EF9F27;   /* minimize dot */

    /* Superadmin amber — tenant visiting banner. */
    --sam-amber-bg:         #FFF3CD;
    --sam-amber-border:     #FFC107;
    --sam-amber-icon:       #D97706;
    --sam-amber-text:       #92400E;

    /* BMI spectrum — from underweight blue to class-3 obesity. */
    --bmi-sottopeso:        #2980B9;
    --bmi-normale:          #27AE60;
    --bmi-sovrappeso:       #E67E22;
    --bmi-obesita1:         #C0392B;
    --bmi-obesita2:         #922B21;
    --bmi-obesita3:         #641E16;

    /* =====================================================
       NEUTRAL SURFACES (light mode default)
       ===================================================== */
    --sam-bg:               #F5F5F5;   /* desktop canvas */
    --sam-bg-alt:           #F7F8FA;   /* grigio-bg in PDF */
    --sam-card-bg:          #FFFFFF;
    --sam-menubar-bg:       #FFFFFF;

    --sam-border:           rgba(0, 0, 0, 0.10);
    --sam-border-soft:      rgba(0, 0, 0, 0.08);
    --sam-border-hairline:  rgba(0, 0, 0, 0.12);
    --sam-sep:              #D0D8E4;   /* PDF separator */

    /* =====================================================
       TEXT
       ===================================================== */
    --sam-text-primary:     #212121;
    --sam-text-body:        #2D2D2D;   /* PDF body */
    --sam-text-secondary:   #666666;
    --sam-text-tertiary:    #888888;
    --sam-text-hint:        #AAAAAA;
    --sam-text-muted:       #777777;

    /* =====================================================
       ELEVATION — soft, desk-native shadows.
       SAM windows feel like paper on a wood desk: crisp
       at the edge, diffuse underneath.
       ===================================================== */
    --sam-shadow-card:      0 4px 16px rgba(0, 0, 0, 0.12);
    --sam-shadow-card-hover:0 6px 20px rgba(0, 0, 0, 0.13);
    --sam-shadow-window:    0 8px 32px rgba(0, 0, 0, 0.12),
                            0 2px 8px rgba(0, 0, 0, 0.06);
    --sam-shadow-dock:      0 4px 16px rgba(0, 0, 0, 0.18);
    --sam-shadow-fab:       0 1px 4px rgba(0, 0, 0, 0.18);

    /* =====================================================
       RADII — small, reserved. Windows 10px; cards 12–16px;
       buttons/inputs 8px; badges 3pt-ish.
       ===================================================== */
    --sam-r-xs:             2px;   /* badges, chips */
    --sam-r-sm:             4px;   /* taskbar pill */
    --sam-r-md:             8px;   /* buttons, inputs */
    --sam-r-lg:             10px;  /* windows */
    --sam-r-xl:             12px;  /* welcome buttons */
    --sam-r-2xl:            16px;  /* cockpit cards */
    --sam-r-pill:           9999px;

    /* =====================================================
       SPACING SCALE (4px baseline)
       ===================================================== */
    --sp-0:   0;
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:   12px;
    --sp-4:   16px;
    --sp-5:   20px;
    --sp-6:   24px;
    --sp-8:   32px;
    --sp-10:  40px;
    --sp-12:  48px;
    --sp-16:  64px;

    /* =====================================================
       WINDOW CHROME METRICS
       ===================================================== */
    --sam-menubar-h:        40px;
    --sam-taskbar-h:        30px;
    --sam-titlebar-h:       36px;
    --sam-banner-h:         36px;

    /* =====================================================
       TYPOGRAPHY — system font stack, zero external deps.
       SAM uses native UI fonts (Segoe UI / SF / Roboto) so
       every Italian hospital laptop looks native.
       PDFs use DejaVu Sans (WeasyPrint default bundled).
       ===================================================== */
    --ff-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-pdf:       "DejaVu Sans", "Liberation Sans", Arial,
                    Helvetica, sans-serif;
    --ff-mono:      ui-monospace, SFMono-Regular, "SF Mono",
                    Menlo, Consolas, "Liberation Mono", monospace;

    /* Type scale — NiceGUI/Quasar roots at 16px;
       dense clinical density pushes most body to 13px. */
    --fs-xs:        11px;  /* section headers uppercase, hints */
    --fs-sm:        12px;  /* hint, timestamp, taskbar pill */
    --fs-base:      13px;  /* body in clinical density */
    --fs-md:        14px;  /* cockpit label, banner */
    --fs-lg:        15px;  /* logo, data value, welcome btn */
    --fs-xl:        18px;  /* H6 */
    --fs-2xl:       22px;  /* H5 */
    --fs-3xl:       28px;  /* KPI value */
    --fs-4xl:       36px;  /* hero icon */

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --lh-tight:     1.2;
    --lh-body:      1.5;
    --lh-relaxed:   1.6;

    --ls-normal:    0;
    --ls-caps:      0.06em;   /* section headers */
    --ls-wide:      0.08em;   /* doc titles */

    /* Zoom compensation variable (set by accessibility menu). */
    --sam-zoom:     1;

    /* =====================================================
       SEMANTIC ALIASES — stable role-based tokens.
       UI code should prefer these over raw brand hex.
       Remap here to retheme the app without touching call sites.
       ===================================================== */
    --sam-primary:         var(--sam-blue);
    --sam-primary-50:      var(--sam-blue-50);
    --sam-primary-hover:   var(--sam-blue-hover);

    --sam-success:         var(--sam-green);
    --sam-success-50:      var(--sam-green-50);
    --sam-success-text:    var(--sam-green-text);

    --sam-warn:            var(--sam-orange-warn);
    --sam-warn-50:         var(--sam-yellow-bg);
    --sam-warn-text:       var(--sam-yellow-text);

    --sam-danger:          var(--sam-red-danger);
    --sam-danger-50:       var(--sam-red-bg);
    --sam-danger-text:     var(--sam-red-text);

    --sam-accent-ai:       var(--sam-purple);
}

/* =====================================================
   DARK MODE — keep identity, dim everything below chrome.
   ===================================================== */
body.body--dark,
[data-theme="dark"] {
    --sam-bg:               #1A1A1A;
    --sam-bg-alt:           #222222;
    --sam-card-bg:          #2A2A2A;
    --sam-menubar-bg:       #1E1E1E;
    --sam-border:           rgba(255, 255, 255, 0.10);
    --sam-border-soft:      rgba(255, 255, 255, 0.08);
    --sam-border-hairline:  rgba(255, 255, 255, 0.15);
    --sam-text-primary:     #E0E0E0;
    --sam-text-body:        #E0E0E0;
    --sam-text-secondary:   #BBBBBB;
    --sam-text-tertiary:    #999999;
    --sam-text-hint:        #777777;
}

/* =====================================================
   SEMANTIC BASELINE — apply these to raw elements.
   Keeps the "medical-software-quiet" default across any
   artifact that includes this stylesheet.
   ===================================================== */

html { font-size: 16px; }

body {
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--sam-text-primary);
    background: var(--sam-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-sans);
    color: var(--sam-text-primary);
    margin: 0 0 var(--sp-3) 0;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-md);  font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

p {
    margin: 0 0 var(--sp-2) 0;
    color: var(--sam-text-body);
}

code, pre, kbd, samp {
    font-family: var(--ff-mono);
    font-size: 0.95em;
}

small { font-size: var(--fs-sm); color: var(--sam-text-secondary); }

hr {
    border: 0;
    border-top: 1px solid var(--sam-border);
    margin: var(--sp-4) 0;
}

/* Section header label — the uppercase eyebrow used
   throughout the NiceGUI shell. */
.sam-section-header {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sam-text-muted);
    margin: var(--sp-4) 0 var(--sp-1) 0;
}

.sam-data-value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--sam-text-primary);
}

.sam-hint {
    font-size: var(--fs-sm);
    color: var(--sam-text-hint);
    margin-top: 2px;
}

/* =====================================================
   NUMERIC TABULAR — use for all grammature, kcal, macro
   values in tables/KPIs so columns align by digit width.
   ===================================================== */
.sam-num {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum", "lnum";
}

/* =====================================================
   PILL — compact status chip for macro deltas, targets,
   day totals in the WeekPlan view. Default = neutral.
   ===================================================== */
.sam-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    padding: 2px 8px;
    border-radius: var(--sam-r-pill);
    background: rgba(0, 0, 0, 0.06);
    color: var(--sam-text-secondary);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
    line-height: 1.4;
}
.sam-pill--ok {
    background: var(--sam-success-50);
    color: var(--sam-success-text);
}
.sam-pill--warn {
    background: var(--sam-warn-50);
    color: var(--sam-warn-text);
}
.sam-pill--bad {
    background: var(--sam-danger-50);
    color: var(--sam-danger-text);
}
.sam-pill--info {
    background: var(--sam-blue-50);
    color: var(--sam-blue-dark);
}

/* Macro identity — fisso per tipo (P/C/G/F) indipendente dal target.
   Permette scansione visiva verticale tra giorni. Tinte sature
   sufficienti a restare visibili sopra il gradient soft della card. */
.sam-pill.sam-pill--macro-prot {
    background: #CFE0F5;
    color: #1B4F8A;
    border: 1px solid #B4CDEC;
}
.sam-pill.sam-pill--macro-cho {
    background: #FBD8BD;
    color: #7E3712;
    border: 1px solid #F2C29D;
}
.sam-pill.sam-pill--macro-fat {
    background: #DCD4F2;
    color: #312A6B;
    border: 1px solid #C9BEE9;
}
.sam-pill.sam-pill--macro-fib {
    background: #C5E5C9;
    color: #1F5824;
    border: 1px solid #A8D5AE;
}
/* Anello di stato sovrapposto — segnala scostamento dal target
   senza nascondere l'identita' macro. */
.sam-pill--off-warn {
    box-shadow: inset 0 0 0 1.5px var(--sam-warn-text);
}
.sam-pill--off-bad {
    box-shadow: inset 0 0 0 1.5px var(--sam-danger-text);
}

/* KPI card — small metric tile used in WeekPlan header
   and in cockpit summaries. Role-neutral by default. */
.sam-kpi {
    background: var(--sam-card-bg);
    border: 1px solid var(--sam-border-hairline);
    border-radius: var(--sam-r-xl);
    padding: var(--sp-3) var(--sp-4);
    min-width: 140px;
}
.sam-kpi__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sam-text-muted);
}
.sam-kpi__value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--sam-text-primary);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: var(--lh-tight);
    margin-top: 2px;
}
.sam-kpi__delta {
    font-size: var(--fs-sm);
    margin-left: 6px;
    font-weight: var(--fw-medium);
}
.sam-kpi__delta--ok   { color: var(--sam-success-text); }
.sam-kpi__delta--warn { color: var(--sam-warn-text); }
.sam-kpi__delta--bad  { color: var(--sam-danger-text); }

/* Soft-warning footer callout — disclaimer/legal notes.
   Less visually dominant than a red banner: informs without
   competing with the clinical content above. */
.sam-callout--warn-soft {
    border-left: 3px solid var(--sam-warn);
    background: var(--sam-warn-50);
    color: var(--sam-warn-text);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--sam-r-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.sam-callout--danger-soft {
    border-left: 3px solid var(--sam-danger);
    background: var(--sam-danger-50);
    color: var(--sam-danger-text);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--sam-r-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* =====================================================
   FOCUS RING — accessibility baseline.
   Mostra sempre un indicatore di focus-visible coerente
   su elementi interattivi custom (card cliccabili, chip,
   pill, bottoni quasar con props che rimuovono l'outline).
   :focus-visible compare solo da tastiera, non al click
   — non disturba l'uso mouse.
   ===================================================== */
:where(button, [role="button"], a, .sam-kpi, .sam-pill,
       .sam-stepper__item):focus-visible {
    outline: 2px solid var(--sam-primary);
    outline-offset: 2px;
    border-radius: var(--sam-r-md);
}