/* ============================================================
   _theme.css — Palette e regole base condivise
   Modifica qui i colori del brand e le regole comuni a tutte le pagine.
   Incluso da _head.php → presente in ogni pagina.
   ============================================================ */

:root {
    --forest:   #005e61;
    --cannoli:  #d59e19;
    --tropical: #428b78;
    --silver: #e7ede6;
    --sunset: #ebf1ea;
    --rum:      #AA423A;
    --white:    #ffffff;
    --text:     #35413e;
    --muted:    #657a66;
    --border:   #ebe5e0;
    --w:        1336px;

    /* ── Scala tipografica (rem fissi, ratio ≈1.2–1.25) ──────────
       Product UI: scala fissa, non fluida. Il nome dice il RUOLO.
       Usata dai componenti condivisi; le pagine possono ancora
       sovrascrivere localmente, ma parti da questi step per restare
       in gerarchia. Mono (Roboto Mono) → niente tabular-nums: le
       cifre sono già a larghezza fissa. */
    --text-2xs:  0.7rem;    /* 11.2px — etichette header tabella (uppercase) */
    --text-xs:   0.8rem;    /* 12.8px — caption, %, small */
    --text-sm:   0.875rem;  /* 14px   — secondario, corpo tabella, subtitle */
    --text-base: 1rem;      /* 16px   — corpo */
    --text-md:   1.125rem;  /* 18px   — card-title / sottotitolo di sezione */
    --text-lg:   1.5rem;    /* 24px   — h1 di pagina */

    /* ── Pesi font ───────────────────────────────────────────────
       In dark il bold (700) è troppo pesante sul fondo scuro: --fw-bold
       scende a 600 nel blocco [data-theme="dark"]. Usa i token, non il
       literal, così la regola dark si applica ovunque. */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Variabili semantiche (tema chiaro) ──────────────────────
       Centralizzano i colori "tinta" prima hardcoded nelle pagine,
       così il dark-mode li può ridefinire in un solo punto. */
    --ok-bg:         #d6f5e8;   /* alert successo: fondo */
    --ok-text:       #0a4f32;   /* alert successo: testo */
    --err-bg:        #fce8e6;   /* alert errore / btn-danger: fondo */
    --err-bg-hover:  #f9d0cc;   /* btn-danger admin: hover */
    --banner-bg:     #fff8ec;   /* banner data retroattiva (form) */
    --banner-border: #f5d48a;
    --banner-text:   #7a5c10;
    --badge-admin-bg:#d6f0ec;   /* badge ruolo admin */
    --tint:          #eaf3ed;   /* hover verde tenue (pill, upload-zone) */
    --on-accent:     #fff;      /* testo SEMPRE bianco su fondi brand (forest/tropical/cannoli/rum):
                                   resta bianco anche in dark, dove --white diventa scuro */
    --row-weekend:   hsl(111 16% 95% / 1); /* righe weekend/festa (presenze) */
    --overlay:       rgba(26, 18, 9, .55); /* fondo modali */
    --shadow:        rgba(20, 45, 37, .18);/* ombre card/modali */

    /* ── Layer semantico per RUOLO (alias dei primitivi qui sopra) ──
       Convenzione: nei componenti usa QUESTI, non i primitivi (--forest…).
       Il nome dice il ruolo, non la tinta. In dark i primitivi cambiano e
       questi li seguono (sono var() sui primitivi, non valori fissi):
       NON vanno ridefiniti nel blocco [data-theme="dark"].
       Esempio del perché: --forest in dark diventa teal, quindi un bottone
       che scrive var(--color-primary) resta leggibile e auto-documentato. */
    --bg:                  var(--silver);   /* sfondo pagina */
    --surface:             var(--white);    /* card, input, superfici */
    --surface-2:           var(--sunset);   /* superfici secondarie: badge, footer, bar-wrap */
    --color-primary:       var(--forest);   /* azione primaria, selezione, header tabelle */
    --color-primary-hover: var(--tropical); /* hover primario */
    --color-accent:        var(--cannoli);  /* accento, focus ring */
    --color-danger:        var(--rum);      /* errori, danger */
    --color-link:          var(--tropical); /* link */

    /* ── Scala radius ─────────────────────────────────────────
       Corner tondi classici (border-radius), uguali su tutti i
       browser. Look originale. */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    /* ── Scala spacing (OPT-IN, non retroattiva) ──────────────────
       Aggiunta come scala esplicita per il codice NUOVO. Il CSS
       esistente usa ancora valori rem letterali: NON convertirlo in
       blocco (rischio regressioni). Usa questi step nei nuovi
       componenti per restare a ritmo. Mappano i valori già più
       ricorrenti nell'app (.5/.75/1/1.5/2rem). */
    --space-1: 0.25rem;   /* 4px  — gap minimi, icona↔testo stretto */
    --space-2: 0.5rem;    /* 8px  — gap piccoli, padding compatti */
    --space-3: 0.75rem;   /* 12px — gap form/grid, padding medio */
    --space-4: 1rem;      /* 16px — gap standard, page-header gap */
    --space-6: 1.5rem;    /* 24px — padding card, h-padding container */
    --space-8: 2rem;      /* 32px — separazioni di sezione ampie */

    /* ── Scala elevation / ombre (OPT-IN) ─────────────────────────
       Costruite sul colore --shadow (che cambia in dark): usa l'alias,
       non ri-scrivere la stringa box-shadow nei componenti. Il CSS
       esistente ha ancora stringhe letterali: non convertirlo in blocco. */
    --elev-1: 0 2px 8px  color-mix(in srgb, var(--shadow) 50%, transparent); /* hover sottili, chip */
    --elev-2: 0 3px 12px color-mix(in srgb, var(--shadow) 60%, transparent); /* card a riposo */
    --elev-3: 0 6px 20px color-mix(in srgb, var(--shadow) 70%, transparent); /* dropdown, popover */
    --elev-4: 0 12px 32px color-mix(in srgb, var(--shadow) 80%, transparent);/* modali */
    --elev-5: 0 18px 48px color-mix(in srgb, var(--shadow) 90%, transparent);/* overlay grandi */

    /* ── Gradient firma (OPT-IN) ──────────────────────────────────
       Solo i 2 pattern -120deg fade-to-transparent ricorrenti
       (nav header, card todo). NON includono i gradient parametrici
       priorità todo né i one-off (bar-fill, bordo privati). */
    --grad-surface: linear-gradient(-120deg, var(--white) 0%,
                    color-mix(in srgb, var(--white) 60%, transparent) 100%);
    --grad-brand:   linear-gradient(-120deg, var(--forest) 0%,
                    color-mix(in srgb, var(--forest) 40%, transparent) 100%);
}

/* ── Tema scuro ──────────────────────────────────────────────
   Attivato da data-theme="dark" su <html> (script in _head.php).
   Ridefinisce SOLO le variabili: il resto dell'app le eredita. */
:root[data-theme="dark"] {
    --forest:   #1d9496;   /* teal schiarito: bottoni primari, giorno selezionato, header tabelle */
    --cannoli:  hsl(42.45deg 78.45% 45.81%);
    --tropical: #26b2a0;   /* link, hover, giorni compilati */
    --silver:   #0d1110;   /* background pagine + input */
    --sunset:   #20302a;   /* badge, bar-wrap, footer tabelle */
    --rum:      #d2655c;   /* danger/errori (schiarito per leggibilità) */
    --white:    #222a28;   /* card e superfici */
    --text:     #e6ece9;
    --muted:    #93a89a;
    --border:   #1a1f1d;

    --ok-bg:         #163a2c;
    --ok-text:       #7fe0b2;
    --err-bg:        #3c211f;
    --err-bg-hover:  #4a2925;
    --banner-bg:     #332a13;
    --banner-border: #5d4a1d;
    --banner-text:   #e6cd80;
    --badge-admin-bg:#123029;
    --tint:          color-mix(in srgb, var(--tropical) 16%, var(--white));
    --row-weekend:   #11201b;
    --overlay:       rgba(0, 0, 0, .62);
    --shadow:        rgba(0, 0, 0, .5);

    /* Pesi più leggeri sul fondo scuro (come l'h1 già a 500) */
    --fw-bold:       500;
    --fw-semibold:   500;
}


/* Freccia del <select> (report.php): in chiaro è scura nel data-URI di
   report.css; su dark va schiarita o sparisce sul fondo scuro. */
:root[data-theme="dark"] .filters select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e6ece9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Bottone toggle tema (iniettato da _head.php su ogni pagina) ── */
.theme-toggle {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 90;            /* sotto i modali (300–1000), sopra il contenuto */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--white);
    color: var(--muted);
    border: 0px solid var(--border);
    /* box-shadow: 0 2px 10px var(--shadow); */
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary-hover); }
.theme-toggle svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
    .theme-toggle { top: 10px; right: 10px; width: 34px; height: 34px; }
}

/* ── Flatpickr: adattamento al tema scuro ──────────────────────
   I giorni (filled/today/selected) usano già le variabili in form.css;
   qui si scuriscono contenitore, intestazioni e celle di default. */
:root[data-theme="dark"] .flatpickr-calendar {
    background: var(--white);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--border); }
:root[data-theme="dark"] .flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--white); }
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom::before { border-top-color: var(--border); }
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom::after  { border-top-color: var(--white); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-theme="dark"] .flatpickr-weekday { color: var(--text); fill: var(--text); }
:root[data-theme="dark"] .flatpickr-monthDropdown-months { background: var(--white); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--text); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--tropical); }
:root[data-theme="dark"] span.flatpickr-weekday { color: var(--muted); }
:root[data-theme="dark"] .flatpickr-day { color: var(--text); }
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--muted); opacity: .55; }
:root[data-theme="dark"] .flatpickr-day:hover { background: color-mix(in srgb, var(--tropical) 18%, var(--white)); }
:root[data-theme="dark"] .flatpickr-monthSelect-month { color: var(--text); }
:root[data-theme="dark"] .numInputWrapper span { border-color: var(--border); }

/* Reset box-sizing universale */
*, *::before, *::after { box-sizing: border-box; }

/* ── Noise / texture materica ──────────────────────────────
   Grain SVG inline (feTurbulence) in overlay fisso su tutta la
   pagina. pointer-events:none → non blocca i click. Opacità
   bassissima per un effetto "carta" non invadente.
   Per regolare l'intensità: cambia opacity (.02–.05).
   Su display retina può sembrare grosso: alza baseFrequency. */
/*body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}*/
@media (prefers-reduced-motion: reduce) { body::after { opacity: .025; } }

/* Reset margini paragrafi (uniforme su tutte le pagine) */
p { margin-block-start: 0; margin-block-end: 0; }

/* Input/controlli ereditano il font (Roboto Mono) */
button, select, textarea, input { font-family: inherit; }

/* ── Lenis smooth scroll (init in _head.php, solo desktop) ──
   CSS minimo raccomandato: le classi le aggiunge Lenis su <html>. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Layout & tipografia base condivisi ────────────────────
   Caricato prima degli <style> di pagina: le pagine possono
   sovrascrivere queste regole (es. padding diverso su .card). */
body {
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    background: var(--bg);
    color: var(--text);
}
.container {max-width: var(--w);margin: 5rem auto;padding: 0 1.5rem 4rem;}
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.75rem; gap: 1rem;
}
h1 {font-size: var(--text-lg);margin: 0;font-weight: var(--fw-bold);letter-spacing: -.01em;line-height: 1.2;text-wrap: balance;display: flex;gap: 0.3em;align-content: center;flex-direction: row;align-items: center;}
.subtitle { color: var(--muted); font-size: var(--text-sm); margin: 0; }

@media (max-width: 768px) {
    /* Su mobile dimezza la distanza del content dall'alto (5rem -> 2.5rem) */
    .container { margin-top: 2.5rem; }
    .page-header {display: flex;flex-direction: row;gap: 1rem;justify-content: flex-start;}
    h1 {font-size: 1.3rem !important;margin: 0;font-weight: var(--fw-bold);letter-spacing: -.01em;line-height: 1.2;display: flex;gap: 0.3em;align-content: center;flex-direction: row;align-items: center;}
    .subtitle { color: var(--muted); font-size: var(--text-sm); margin: 0; }

}

/* Card: base condivisa. Padding/margini specifici per pagina. */
.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-2); }

/* ── Radius uniforme su TUTTI i pulsanti d'azione ─────────────
   Prefisso `body ` (specificità 0,1,1) per vincere sulle regole
   per-pagina (0,1,0) caricate dopo, senza !important.
   Esclusi: bottoni-icona piccoli (.icon-btn, .rte-btn, .filter-clear,
   .btn-archive-*) e toggle (.btn-mine), che hanno forma propria. */
body .btn,
body .btn-add, body .btn-add-card, body .btn-add-project,
body .btn-primary, body .btn-ghost,
body .btn-danger, body .btn-danger-ghost,
body .btn-print, body .btn-remove, body .btn-save,
body .btn-sm, body .btn-submit,
body .filters button {
    border-radius: var(--radius-md);
}

/* Focus visibile (tastiera) — bordo Cannoli per accessibilità */
:focus-visible {
    outline: 2.5px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Rispetta la preferenza sistema "riduci movimento" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ── Bottone primary (condiviso admin/profile) ─────────────── */
.btn-primary { background: var(--color-primary); color: var(--on-accent); }
.btn-primary:hover { background: var(--color-primary-hover); }

/* ── Password toggle ──────────────────────────────────────────
   Versione condivisa: le pagine possono aggiungere solo override
   minori (es. admin: .pw-field { margin-bottom: .9rem }). */
.pw-field { position: relative; }
.pw-field input[type="password"],
.pw-field input[type="text"] {
    padding-right: 2.6rem !important;
    width: 100%;
    margin-bottom: 0 !important;
}
.pw-field .pw-toggle {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: .25rem;
    display: flex;
    align-items: center;
    line-height: 1;
    font-family: inherit;
    transition: color .15s;
}
.pw-field .pw-toggle:hover { color: var(--text); }
.pw-field .pw-toggle svg   { width: 16px; height: 16px; display: block; }