/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — TOKEN PALETTE
   Tutti i colori vivono qui come variabili CSS.
   Nessun componente usa valori letterali di colore.
   2151 — fondazione portata IDENTICA da AtomSoft.Adm/wwwroot/app.css
   (copia fedele, rev.13). A registro: duplicata in due app, candidata a
   sorgente unica condivisa in un faro futuro — per oggi il male minore.
═══════════════════════════════════════════════════════════════ */

/* ── AVORIO (default · brand) ──────────────────────────────── */
:root,
[data-theme="avorio"] {
    --bg:                  #FAF9F6;
    --surface:             #FFFFFF;
    --surface-hover:       #F4F2EC;
    --text:                #16242E;
    --text-soft:           #5A6B75;
    --border:              #E4E2DA;
    --accent:              #BA7517;
    --accent-text:         #FFFFFF;
    --accent-soft:         #FAEEDA;
    --accent-soft-text:    #633806;
    --success-bg:          #EAF3DE;
    --success-text:        #27500A;
    --danger-bg:           #FBECE9;
    --danger-text:         #B3402F;
    --warning-bg:          #FBF2E3;
    --warning-text:        #B9741A;
    --sidebar-bg:          #16242E;
    --sidebar-text:        #AEBBC4;
    --sidebar-active-bg:   #BA7517;
    --sidebar-active-text: #FFFFFF;

    /* — Carattere: famiglie — */
    --font-body:   'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-titoli: var(--font-body);
    --font-mono:   'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font-scala:  1;

    /* — SCALA TIPOGRAFICA — */
    --testo-pagina-size:  1.6rem;    --testo-pagina-weight: 700;   /* h1 titolo pagina */
    --testo-brand-size:   1.35rem;   --testo-brand-weight:  300;   /* brand sidebar */
    --testo-card-size:    .75rem;    --testo-card-weight:   700;   /* header sezione (uppercase) */
    --testo-campo-size:   .9rem;     --testo-campo-weight:  600;   /* etichetta campo */
    --testo-base-size:    .875rem;                                  /* input, celle, nav link */
    --testo-chiave-size:  .67rem;                                   /* chiave mono */
    --testo-aiuto-size:   .78rem;                                   /* aiuto / hint / errore */
    --testo-small-size:   .82rem;                                   /* secondario: voci menu, editor btn */
    --testo-micro-size:   .7rem;                                    /* chip, th griglia, breadcrumb sep */
    --peso-bold:          700;

    /* — SPAZIATURA — */
    --gap-base:    0.9rem;
    --gap-riga:    1.1rem;           /* ARIA verticale tra righe-parametro */
    --pad-card:    .75rem 1.25rem;   /* header / footer card */
    --pad-titolo:  .75rem 1.25rem .5rem;  /* header sezione (3 valori) */
    --pad-riga:    .9rem 1.25rem;    /* corpo campo */
    --pad-input:   .3rem .6rem;      /* input compatti */
    --pad-nav:     .55rem .75rem;    /* voci navigazione sidebar */
    --pad-badge:   .15rem .5rem;     /* badge stato / chip */

    /* — Stile struttura — */
    --radius-sm:   0.375rem;
    --radius-md:   0.75rem;
    --shadow-card: 0 2px 14px color-mix(in srgb, var(--text) 12%, transparent);
    --shadow-popup: 0 4px 16px color-mix(in srgb, var(--text) 15%, transparent);
    --radius-lg:   1rem;           /* strutturale · card grandi; --radius-md resta ai controlli */

    /* === anatomia 2049 — token layout impostazioni ==================== */
    --header-accent:  color-mix(in srgb, var(--accent)       15%, var(--surface));
    --header-warning: color-mix(in srgb, var(--warning-text) 18%, var(--surface));
    --header-neutro:  color-mix(in srgb, var(--text)          8%, var(--surface));
    --header-success: color-mix(in srgb, var(--success-text) 15%, var(--surface));

    --pillola-neutra-bg:   color-mix(in srgb, var(--border) 40%, var(--surface));
    --pillola-neutra-text: var(--text-soft);

    --evidenza-bg:   color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
    --evidenza-text: var(--accent-soft-text);

    --inarrivo-border:  color-mix(in srgb, var(--border) 70%, var(--text-soft));
    --inarrivo-opacita: 0.75;

    --chip-bg:   color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
    --chip-size: 2rem;

    --gap-section:      calc(var(--gap-base) * 2);
    --bordo-attenzione: 2px solid color-mix(in srgb, var(--warning-text) 55%, transparent);
    /* ================================================================= */

    /* — MOVIMENTO — */
    --transizione: .15s ease;

    /* — LAYOUT sidebar — */
    --sidebar-width:     250px;
    --sidebar-width-min: 64px;

    /* — EDITOR OTP: scale relative — */
    --otp-size-piccolo: .8em;
    --otp-size-grande:  1.3em;
}

/* Anteprime per il selettore tema (mattone 'aspetto'). */
:root {
    --swatch-avorio:  #BA7517;
    --swatch-notte:   #EF9F27;
    --swatch-ambra:   #BA7517;
    --swatch-mare:    #185FA5;
    --swatch-foresta: #3B6D11;
    --swatch-ardesia: #527084;
}

/* ── NOTTE (scuro · brand) ─────────────────────────────────── */
[data-theme="notte"] {
    --header-warning: color-mix(in srgb, var(--warning-text) 20%, var(--surface));

    --bg:                  #16242E;
    --surface:             #1E2F3A;
    --surface-hover:       #24333E;
    --text:                #E8EEF2;
    --text-soft:           #9FB0BA;
    --border:              #2A3A45;
    --accent:              #EF9F27;
    --accent-text:         #16242E;
    --accent-soft:         #33291A;
    --accent-soft-text:    #EFC57A;
    --success-bg:          #1E3A2A;
    --success-text:        #7FD4A0;
    --danger-bg:           #3A2120;
    --danger-text:         #E89B91;
    --warning-bg:          #33291A;
    --warning-text:        #EFC57A;
    --sidebar-bg:          #0F1922;
    --sidebar-text:        #7C8B95;
    --sidebar-active-bg:   #EF9F27;
    --sidebar-active-text: #FFFFFF;
}

/* ── AMBRA (caldo) ─────────────────────────────────────────── */
[data-theme="ambra"] {
    --bg:                  #FBF2E3;
    --surface:             #FFFFFF;
    --surface-hover:       #F6EAD3;
    --text:                #4A2F0A;
    --text-soft:           #8A6A3A;
    --border:              #ECD9B8;
    --accent:              #BA7517;
    --accent-text:         #FFFFFF;
    --accent-soft:         #FAEEDA;
    --accent-soft-text:    #633806;
    --success-bg:          #EAF3DE;
    --success-text:        #27500A;
    --danger-bg:           #FBECE9;
    --danger-text:         #B3402F;
    --warning-bg:          #FBF2E3;
    --warning-text:        #B9741A;
    --sidebar-bg:          #4A2F0A;
    --sidebar-text:        #C9A86A;
    --sidebar-active-bg:   #BA7517;
    --sidebar-active-text: #FFFFFF;
}

/* ── MARE (freddo) ─────────────────────────────────────────── */
[data-theme="mare"] {
    --bg:                  #EAF1FB;
    --surface:             #FFFFFF;
    --surface-hover:       #DDE9F6;
    --text:                #0C2C4A;
    --text-soft:           #5A7A98;
    --border:              #CDD9E8;
    --accent:              #185FA5;
    --accent-text:         #FFFFFF;
    --accent-soft:         #E6F1FB;
    --accent-soft-text:    #0C447C;
    --success-bg:          #EAF3DE;
    --success-text:        #27500A;
    --danger-bg:           #FBECE9;
    --danger-text:         #B3402F;
    --warning-bg:          #FBF2E3;
    --warning-text:        #B9741A;
    --sidebar-bg:          #0C2C4A;
    --sidebar-text:        #8AA8C4;
    --sidebar-active-bg:   #185FA5;
    --sidebar-active-text: #FFFFFF;
}

/* ── FORESTA (verde) ───────────────────────────────────────── */
[data-theme="foresta"] {
    --header-success: color-mix(in srgb, var(--success-text) 20%, var(--surface));

    --bg:                  #EEF4E6;
    --surface:             #FFFFFF;
    --surface-hover:       #E2EDD3;
    --text:                #1F3B0A;
    --text-soft:           #5F7A45;
    --border:              #D5E2C2;
    --accent:              #3B6D11;
    --accent-text:         #FFFFFF;
    --accent-soft:         #EAF3DE;
    --accent-soft-text:    #27500A;
    --success-bg:          #EAF3DE;
    --success-text:        #27500A;
    --danger-bg:           #FBECE9;
    --danger-text:         #B3402F;
    --warning-bg:          #FBF2E3;
    --warning-text:        #B9741A;
    --sidebar-bg:          #1F3B0A;
    --sidebar-text:        #9FB585;
    --sidebar-active-bg:   #3B6D11;
    --sidebar-active-text: #FFFFFF;
}

/* ── ARDESIA (neutro) ──────────────────────────────────────── */
[data-theme="ardesia"] {
    --bg:                  #ECEFF1;
    --surface:             #FFFFFF;
    --surface-hover:       #E1E6E9;
    --text:                #263238;
    --text-soft:           #607079;
    --border:              #D5DBDF;
    --accent:              #527084;
    --accent-text:         #FFFFFF;
    --accent-soft:         #E0E5E8;
    --accent-soft-text:    #37474F;
    --success-bg:          #EAF3DE;
    --success-text:        #27500A;
    --danger-bg:           #FBECE9;
    --danger-text:         #B3402F;
    --warning-bg:          #FBF2E3;
    --warning-text:        #B9741A;
    --sidebar-bg:          #263238;
    --sidebar-text:        #90A4AE;
    --sidebar-active-bg:   #527084;
    --sidebar-active-text: #FFFFFF;
}


/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */

html {
    font-size: calc(16px * var(--font-scala));
}

html, body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
}

/* Titolo pagina: governato dal template, non da Bootstrap. */
h1 {
    font-size:   calc(var(--testo-pagina-size) * var(--font-scala));
    font-weight: var(--testo-pagina-weight);
    font-family: var(--font-titoli);
    color:       var(--text);
}

h2, h3, h4, h5, h6 { color: var(--text); }

.content { padding-top: 1.1rem; }
h1:focus  { outline: none; }


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES — prefisso [data-theme] per vincere
   la specificità di Bootstrap senza !important
═══════════════════════════════════════════════════════════════ */

[data-theme] body {
    background-color: var(--bg);
    color: var(--text);
}

[data-theme] .text-muted,
[data-theme] .text-secondary {
    color: var(--text-soft) !important;
}

/* Card */
[data-theme] .card {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme] .card-header,
[data-theme] .card-footer {
    background-color: var(--surface-hover);
    border-color: var(--border);
}

/* Form */
[data-theme] .form-control,
[data-theme] .form-select,
[data-theme] textarea.form-control {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme] .form-control:focus,
[data-theme] .form-select:focus,
[data-theme] textarea.form-control:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
[data-theme] .form-control::placeholder { color: var(--text-soft); opacity: 1; }
[data-theme] .form-label               { color: var(--text-soft); }
[data-theme] .form-check-label         { color: var(--text); }
[data-theme] .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
[data-theme] .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}

/* select option in tema scuro */
[data-theme="notte"] option { background-color: var(--surface); color: var(--text); }

/* Btn primary */
[data-theme] .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}
[data-theme] .btn-primary:hover,
[data-theme] .btn-primary:active {
    background-color: color-mix(in srgb, var(--accent) 80%, black);
    border-color:     color-mix(in srgb, var(--accent) 80%, black);
    color: var(--accent-text);
}
[data-theme] .btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 35%, transparent);
    outline: none;
}

/* Btn outline-secondary (usato da .btn-link nella pagina accesso, focus-visible generico) */
[data-theme] .btn-outline-secondary {
    color: var(--text-soft);
    border-color: var(--border);
    background: transparent;
}
[data-theme] .btn-outline-secondary:hover,
[data-theme] .btn-outline-secondary:active {
    background-color: var(--surface-hover);
    border-color: var(--border);
    color: var(--text);
}

/* Focus generico */
[data-theme] .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 30%, transparent);
    outline: none;
}

/* Alert */
.alert.alert-ds-danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    border-color: color-mix(in srgb, var(--danger-text) 35%, transparent);
}
.alert.alert-ds-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: color-mix(in srgb, var(--success-text) 35%, transparent);
}
.alert.alert-ds-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-color: color-mix(in srgb, var(--warning-text) 35%, transparent);
}


/* ═══════════════════════════════════════════════════════════════
   CARD TEMPLATE — classi globali per card (modello-card), portate da
   AtomSoft.Adm/wwwroot/app.css. Nessun letterale di scala/spaziatura:
   tutto via var(--*). Usate da Accesso.razor e ProfiloSicurezza.razor
   per la card di login e le card riserva/password (2151).
═══════════════════════════════════════════════════════════════ */

.atom-campi {
    display:        flex;
    flex-direction: column;
    max-width:      680px;
    background:     var(--surface);
    border-radius:  var(--radius-md);
    box-shadow:     var(--shadow-card);
    overflow:       hidden;
}

.atom-gruppo__titolo {
    display:        flex;
    align-items:    center;
    gap:            .45rem;
    font-size:      var(--testo-card-size);
    font-weight:    var(--testo-card-weight);
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--text-soft);
    padding:        var(--pad-titolo);
    margin:         0;
    border-bottom:  1px solid var(--border);
}

.atom-gruppo__campos {
    display:        flex;
    flex-direction: column;
    gap:            var(--gap-riga);
}

.atom-gruppo__campos .atom-campo:last-child,
.atom-campo:last-child {
    border-bottom: none;
}

.atom-gruppo__footer {
    display:    flex;
    gap:        .5rem;
    padding:    var(--pad-card);
    background: color-mix(in srgb, var(--surface) 85%, var(--bg));
    border-top: 1px solid var(--border);
}

.atom-campo {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
    padding:        var(--pad-riga);
    border-bottom:  1px solid var(--border);
}

.atom-campo__label {
    font-size:   var(--testo-campo-size);
    font-weight: var(--testo-campo-weight);
    color:       var(--text);
    line-height: 1.3;
}

.atom-campo__aiuto {
    font-size: var(--testo-aiuto-size);
    color:     var(--text-soft);
}

.atom-campo__errore {
    font-size:  var(--testo-aiuto-size);
    color:      var(--danger-text);
    align-self: center;
}