/* =============================================================================
   Sinapsy / Domicilia — Skin globale "plancia tecnica a riposo"
   Estende e formalizza l'estetica gia' usata in landing+login.
   Caricato da base.html. Convive con Tailwind: le classi qui sono opt-in
   (prefisso .skin-*) eccetto le variabili :root che sono globali.
   ========================================================================== */

:root {
    /* palette carta + salvia + ocra */
    --bg:           #f7f5ef;
    --bg-soft:      #efeadf;
    --ink:          #1c1d1a;
    --ink-soft:     #4a4943;
    --ink-mute:     #837d6e;
    --line:         #d4cfc0;
    --line-strong:  #b4ad9c;
    --salvia:       #4a5d4f;
    --salvia-dark:  #364539;
    --salvia-soft:  #c8d2c4;
    --ocra:         #b58d3f;
    --status:       #67815a;
    --danger:       #8a3a2a;
    --warning:      #b88239;

    /* family stack — niente Google Fonts (vincolo GDPR), solo system */
    --ff-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", -apple-system, "Segoe UI", system-ui, sans-serif;
    --ff-serif:   ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --ff-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ff-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* spacing scale (ritmo) */
    --rhythm-1: 4px;
    --rhythm-2: 8px;
    --rhythm-3: 14px;
    --rhythm-4: 22px;
    --rhythm-5: 36px;
    --rhythm-6: 58px;

    /* status-dot pulse halo color (rgba so .skin-card non si rompe quando il
       background sotto e' scuro). Overridato dai temi.
       Esposte come triple RGB per costruire rgba() theme-aware sulle
       righe della tabella e su altre superfici tinte. */
    --status-halo:  103, 129, 90;
    --warning-halo: 184, 130, 57;
    --danger-halo:  138, 58, 42;
    --salvia-focus-ring: rgba(74, 93, 79, 0.12);
}

/* ----- Tema NOTTE — modalita' scura, salvia tenue su ink scuro ----------- */
[data-theme="notte"] {
    --bg:           #1a1b18;
    --bg-soft:      #25261f;
    --ink:          #efeadf;
    --ink-soft:     #b4ad9c;
    --ink-mute:     #837d6e;
    --line:         #34352c;
    --line-strong:  #4a4943;
    --salvia:       #8aa085;
    --salvia-dark:  #6a8068;
    --salvia-soft:  #2a3a30;
    --ocra:         #d4a868;
    --status:       #8aa085;
    --status-halo:  138, 160, 133;
    --warning-halo: 212, 168, 104;
    --danger-halo:  201, 122, 106;
    --danger:       #c97a6a;
    --warning:      #d4a868;
    --salvia-focus-ring: rgba(138, 160, 133, 0.20);
}

/* ----- Tema CLINICO — bianco clinico + accent blu DOMUS ------------------ */
[data-theme="clinico"] {
    --bg:           #ffffff;
    --bg-soft:      #f3f5f8;
    --ink:          #0f172a;
    --ink-soft:     #475569;
    --ink-mute:     #94a3b8;
    --line:         #e2e8f0;
    --line-strong:  #cbd5e1;
    --salvia:       #1a4f8b;        /* in clinico la "salvia" semantica e' il blu DOMUS */
    --salvia-dark:  #143d6d;
    --salvia-soft:  #dbeafe;
    --ocra:         #c2410c;        /* arancio bruciato, accent parsimonioso */
    --status:       #16a34a;
    --status-halo:  22, 163, 74;
    --warning-halo: 217, 119, 6;
    --danger-halo:  220, 38, 38;
    --danger:       #dc2626;
    --warning:      #d97706;
    --salvia-focus-ring: rgba(26, 79, 139, 0.15);
}

/* ----- shell pagina ------------------------------------------------------- */

.skin {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff-body);
    min-height: 100vh;
    position: relative;
}

/* micro-grid atmosferica in sottofondo, sfumata con maschera radiale.
   Usa currentColor cosi' si adatta al tema (in notte le linee sono chiare). */
.skin::before {
    content: "";
    position: fixed;
    inset: 0;
    color: var(--ink);
    background-image:
        linear-gradient(to right,  currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 72px 72px;
    background-position: -1px -1px;
    opacity: 0.045;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at 88% 12%, rgba(0, 0, 0, 0.75), transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 88% 12%, rgba(0, 0, 0, 0.75), transparent 65%);
}
.skin > * { position: relative; z-index: 1; }

/* ----- header globale ----------------------------------------------------- */

.skin-header {
    border-bottom: 1px solid var(--line);
    background: rgba(247, 245, 239, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* z-index esplicito: i figli .rise di <main> creano stacking context
       via transform, e sotterrerebbero il dropdown del theme switcher */
    position: relative;
    z-index: 50;
}
[data-theme="notte"] .skin-header   { background: rgba(26, 27, 24, 0.82); }
[data-theme="clinico"] .skin-header { background: rgba(255, 255, 255, 0.88); }
.skin-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    gap: 28px;
}
.skin-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.skin-logo .nm { font-family: var(--ff-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.skin-logo .nm .dot { color: var(--salvia); margin-left: -0.04em; }
.skin-logo .sub { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }

.skin-nav { display: flex; align-items: center; gap: 22px; }
.skin-nav a {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-decoration: none;
    transition: color 180ms ease;
    position: relative;
    padding-bottom: 2px;
}
.skin-nav a:hover { color: var(--ink-soft); }
.skin-nav a.active {
    color: var(--salvia-dark);
}
.skin-nav a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -16px;
    height: 1px;
    background: var(--salvia);
}
.skin-nav .sep { color: var(--line-strong); }

.skin-userbar {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.skin-userbar .who { color: var(--ink-soft); }

/* ----- sidebar / aside di sezione ---------------------------------------- */

.skin-sidebar {
    border-right: 1px solid var(--line);
    padding: 28px 22px;
    background: var(--bg);
    min-height: calc(100vh - 56px);
}
.skin-sidebar-label {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 14px;
}
.skin-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.skin-sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    font-family: var(--ff-body);
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 160ms, border-color 160ms, background 160ms;
}
.skin-sidebar nav a:hover { color: var(--ink); background: var(--bg-soft); }
.skin-sidebar nav a.active {
    color: var(--salvia-dark);
    border-left-color: var(--salvia);
    background: var(--bg-soft);
    font-weight: 500;
}

/* ----- typography helpers ------------------------------------------------- */

.label-mono {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.skin-h1 {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--ink);
}
.skin-h1 .dot { color: var(--salvia); }

.skin-h2 {
    font-family: var(--ff-display);
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--ink);
}
.skin-h3 {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.skin-lede {
    font-family: var(--ff-serif);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.55;
}

/* ----- status pill + dot ------------------------------------------------- */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 5px 12px 5px 11px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: rgba(247, 245, 239, 0.7);
    backdrop-filter: blur(4px);
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--status);
    box-shadow: 0 0 0 0 rgba(var(--status-halo), 0.55);
    animation: status-pulse 2.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--status-halo), 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--status-halo), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--status-halo), 0); }
}

/* ----- card + sezioni ----------------------------------------------------- */

.skin-card {
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 22px 24px;
    position: relative;
}
.skin-card-tag {
    /* etichetta tecnica infilata in alto a sx come testa di scheda */
    position: absolute;
    top: -9px; left: 22px;
    background: var(--bg);
    padding: 0 8px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.skin-card-tag.right { left: auto; right: 22px; bottom: -9px; top: auto; color: var(--line-strong); }

/* ----- form fields ------------------------------------------------------- */

.skin-fg { display: block; margin-bottom: 18px; }
.skin-fg-label {
    display: block;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 8px;
}
.skin-fg-label .req { color: var(--ocra); margin-left: 4px; }

.skin-input, .skin-select {
    display: block;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    padding: 10px 12px;
    font-family: var(--ff-mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--ink);
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    caret-color: var(--salvia);
}
.skin-input::placeholder { color: var(--ink-mute); opacity: 0.55; }
.skin-input:hover, .skin-select:hover { border-color: var(--ink-mute); }
.skin-input:focus, .skin-select:focus {
    border-color: var(--salvia);
    box-shadow: 0 0 0 3px var(--salvia-focus-ring);
}
.skin-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

/* ----- buttons ----------------------------------------------------------- */

.skin-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 3px;
    font-family: var(--ff-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.skin-btn-primary { background: var(--salvia); color: var(--bg); }
.skin-btn-primary:hover { background: var(--salvia-dark); }
.skin-btn-primary .arrow { transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
.skin-btn-primary:hover .arrow { transform: translateX(4px); }

.skin-btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.skin-btn-ghost:hover { color: var(--ink); border-color: var(--ink-mute); }

.skin-btn-warn { background: transparent; color: var(--danger); border-color: rgba(138, 58, 42, 0.3); }
.skin-btn-warn:hover { background: rgba(138, 58, 42, 0.06); border-color: var(--danger); }

/* ----- tables ------------------------------------------------------------- */

.skin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.skin-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line-strong);
    font-weight: 500;
    white-space: nowrap;
}
.skin-table thead th.r { text-align: right; }
.skin-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    vertical-align: middle;
}
.skin-table tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
.skin-table tbody td.num { font-family: var(--ff-mono); font-size: 12.5px; color: var(--ink); }
.skin-table tbody tr:hover { background: var(--bg-soft); }
.skin-table tbody tr.off { color: var(--ink-mute); opacity: 0.65; }
.skin-table .name { font-weight: 500; color: var(--ink); }
.skin-table .tag {
    display: inline-block;
    padding: 1px 7px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border: 1px solid var(--line);
    border-radius: 2px;
}

/* righe colorate per soglie occupazione: sfondo + segno ridondante a sx.
   Theme-aware via var(--*-halo). Hover scurisce ulteriormente. */
.skin-table tr.lvl-ok    td { background: rgba(var(--status-halo),  0.11); }
.skin-table tr.lvl-warn  td { background: rgba(var(--warning-halo), 0.16); }
.skin-table tr.lvl-crit  td { background: rgba(var(--danger-halo),  0.18); }

.skin-table tr.lvl-ok    td:first-child { box-shadow: inset 3px 0 0 0 var(--status); }
.skin-table tr.lvl-warn  td:first-child { box-shadow: inset 3px 0 0 0 var(--warning); }
.skin-table tr.lvl-crit  td:first-child { box-shadow: inset 4px 0 0 0 var(--danger); }

.skin-table tbody tr.lvl-ok:hover   td { background: rgba(var(--status-halo),  0.18); }
.skin-table tbody tr.lvl-warn:hover td { background: rgba(var(--warning-halo), 0.24); }
.skin-table tbody tr.lvl-crit:hover td { background: rgba(var(--danger-halo),  0.26); }

.skin-table .pct {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--ff-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    font-weight: 700;
}
.skin-table .pct.lvl-ok   { color: var(--status);  background: rgba(var(--status-halo),  0.18); }
.skin-table .pct.lvl-warn { color: var(--warning); background: rgba(var(--warning-halo), 0.22); }
.skin-table .pct.lvl-crit { color: var(--danger);  background: rgba(var(--danger-halo),  0.22); }

/* ----- filter bar -------------------------------------------------------- */

.skin-filterbar {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 18px 20px;
    position: relative;
}
.skin-filterbar::before {
    content: "FILTRI";
    position: absolute;
    top: -9px; left: 18px;
    background: var(--bg);
    padding: 0 8px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
}

/* ----- animazioni stagger ------------------------------------------------ */

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.rise { opacity: 0; animation: rise 720ms cubic-bezier(.2, .7, .2, 1) forwards; }
.rise[data-d="1"] { animation-delay: 50ms; }
.rise[data-d="2"] { animation-delay: 160ms; }
.rise[data-d="3"] { animation-delay: 280ms; }
.rise[data-d="4"] { animation-delay: 400ms; }
.rise[data-d="5"] { animation-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
    .rise, .status-dot, .skin-btn-primary .arrow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ----- alpine x-cloak (gia' globale in base, ripeto qui per safety) ----- */
[x-cloak] { display: none !important; }