/* ===== TEMA VERDE IeO ===== */

* { box-sizing: border-box; }

:root {
/* ─── Ordine di sovrapposizione ──────────────────────────────────────────
   Un tempo ogni foglio aveva il suo numero (z-index: 90, 185, 9999...): due
   livelli che si sovrappongono potevano finire nel ordine sbagliato per caso,
   e per correggerne uno bisognava conoscere tutti i numeri della casa. Qui il
   numero vive una volta sola, con un nome che dice il ruolo. I valori sono
   quelli di prima: cambia il nome, non la pila. */

  --z-base: 0;                 /* il piano della pagina */
  --z-raised-1: 1;             /* sollevamenti minimi dentro le tabelle */
  --z-raised-2: 2;
  --z-raised-3: 3;
  --z-raised-4: 4;
  --z-sticky-column: 12;       /* intestazioni attaccate allo scorrimento */
  --z-autocomplete: 30;        /* menu che appaiono sotto il campo */
  --z-fab: 50;                 /* pulsante galleggiante */
  --z-popover: 60;             /* pannelli che sporgono */
  --z-editor: 90;              /* componenti interni dell'editor wiki */
  --z-editor-raised: 95;
  --z-topbar: 100;             /* barra in alto */
  --z-menu: 120;               /* menu delle sezioni aperto */
  --z-bottom-nav: 180;         /* navigazione in basso su telefono */
  --z-nav-backdrop: 185;
  --z-nav-menu: 190;
  --z-sticky-actions: 195;     /* barre che restano in basso */
  --z-modal: 200;              /* finestre e sfondi che coprono la pagina */
  --z-notification: 210;       /* pannello delle notifiche */
  --z-toast: 9999;             /* messaggi temporanei, sempre in cima */

  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #d97706;
  --amber-600: #a16207;
  --amber-700: #92400e;
  --amber-800: #713f12;
  --blue-50: #eff6ff;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-800: #1e40af;
  --holiday: #0f766e;
  --rose-100: #fee2e2;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-800: #991b1b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  /* ===== SCALA DEI RAGGI =====
     Un unico sistema per gli angoli: niente valori sparsi nei vari fogli.
     - contenitori (card, pannelli, tavole, modali): 10px, morbidi ma non "da app";
     - controlli (bottoni, input, select, tabelle): 8px, si leggono come tasti;
     - badge ed etichette: 6px, piccoli, si notano solo i dati;
     - pillola: bottoni compatti, tab di navigazione e badge tondi.
     I nomi già in uso restano, così nulla cambia di nome: cambiano solo i valori. */
  --radius-badge: 6px;
  --radius-control: 8px;
  --radius-panel: 10px;
  --radius-pill: 999px;
  --radius: var(--radius-panel);
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-panel);
  --radius-lg: 1rem;
  --radius-full: var(--radius-pill);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-green: 0 4px 14px rgba(45, 106, 79, 0.2);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bg: #faf8f5;
  --surface: white;
  --surface-alt: #f3f4f6;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-primary: var(--text);
  --primary: var(--green-600);
  --primary-dark: var(--green-700);
  --border: #d1d5db;
  --modal-overlay: rgba(0,0,0,0.5);
  --topbar-start: #065f46;
  --topbar-end: #047857;
  --control-bg: #ffffff;
  --control-option-bg: #ffffff;
  --focus-ring: #d1fae5;
  --success-bg: #d1fae5;
  --success-fg: #065f46;
  --success-border: #6ee7b7;
  --success-solid: #047857;
  --success-solid-hover: #065f46;
  --on-success: #ffffff;
  --warning-bg: #fef3c7;
  --warning-fg: #92400e;
  --warning-border: #fcd34d;
  --warning-solid: #d97706;
  --on-warning: #ffffff;
  --danger-bg: #fee2e2;
  --danger-fg: #991b1b;
  --danger-border: #fca5a5;
  --danger-solid: #be123c;
  --on-danger: #ffffff;
  --info-bg: #eff6ff;
  --info-fg: #1e40af;
  --info-border: #93c5fd;
  --info-solid: #2563eb;
  --info-solid-hover: #1e40af;
  --on-info: #ffffff;
  --on-neutral: #ffffff;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-lg: 1.1rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  /* ===== CIFRE TABULARI =====
     Orari, date, conteggi e colonne numeriche devono avere cifre di larghezza
     costante: senza questo le colonne "saltano" e gli importi non si confrontano. */
  --numeric: tabular-nums;
  /* Layout mobile: altezze reali per calcoli fixed/sticky con safe-area.
     L'intestazione ha due piani:
       piano 1 = logo, ricerca, report, profilo;
       piano 2 = le sezioni dell'app, a tutta larghezza.
     --topbar-h e la loro somma e serve a pannelli appiccicati e
     scroll-margin: se cambi una delle due, aggiorna anche la somma. */
  --topbar-plane1-h: 48px;
  --topbar-sections-h: 44px;
  --topbar-h: 92px;
  --bottom-nav-h: calc(68px + env(safe-area-inset-bottom, 0px));
}

[data-theme="dark"] {
  --green-50: #102b24;
  --green-100: #173f33;
  --green-200: #225a48;
  --green-300: #357c62;
  --green-400: #49a77f;
  --green-500: #147a58;
  --green-600: #0f6c4e;
  --green-700: #83d7ad;
  --green-800: #b7f7d2;
  --green-900: #d5ffe5;
  --primary-dark: #09563e;
  --amber-50: #2c220c;
  --amber-100: #3d2d0c;
  /* 200, 600 e 800 restano identici al tema chiaro: servono alle celle festività
     dell'orario settimanale, che restano chiare anche in modalità scura. */
  --amber-300: #6f5513;
  --amber-500: #d99116;
  --amber-700: #ffd36b;
  --blue-50: #102b3b;
  --blue-500: #4da3ff;
  --blue-600: #8ac7ff;
  --blue-800: #c7e5ff;
  --holiday: #2dd4bf;
  --rose-100: #42151a;
  --rose-500: #ff8fa1;
  --rose-600: #f06a7d;
  --rose-800: #ffbec6;
  --gray-50: #17211e;
  --gray-100: #1e2c28;
  --gray-200: #2e403a;
  --gray-300: #496059;
  --gray-400: #789089;
  --gray-500: #adbbb5;
  --gray-600: #c8d4ce;
  --gray-700: #e0e8e3;
  --gray-800: #edf5f0;
  --gray-900: #f7fbf8;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
  --shadow-green: 0 4px 14px rgba(64, 159, 122, 0.2);
  --bg: #101815;
  --surface: #1b2823;
  --surface-alt: #141f1b;
  --text: #edf5f0;
  --text-secondary: #b7c6c0;
  --text-tertiary: #91a49c;
  --border: #4a6058;
  --modal-overlay: rgba(0,0,0,0.76);
  --topbar-start: #063d30;
  --topbar-end: #07513d;
  --control-bg: #101a17;
  --control-option-bg: #18231f;
  --focus-ring: #1b5a43;
  --success-bg: #123d30;
  --success-fg: #b7f7d2;
  --success-border: #2b765b;
  --success-solid: #0f6c4e;
  --success-solid-hover: #09563e;
  --on-success: #ffffff;
  --warning-bg: #3d2d0c;
  --warning-fg: #ffd36b;
  --warning-border: #8f6517;
  --warning-solid: #d99116;
  --on-warning: #1c1300;
  --danger-bg: #42151a;
  --danger-fg: #ffbec6;
  --danger-border: #9f3c4d;
  --danger-solid: #c43850;
  --on-danger: #ffffff;
  --info-bg: #102b3b;
  --info-fg: #c7e5ff;
  --info-border: #2e6e8f;
  --info-solid: #1d6fa5;
  --info-solid-hover: #15557f;
  --on-info: #ffffff;
  --on-neutral: #101815;
}

/* Su telefono sparisce il piano 2 (la navigazione e' la barra in basso):
   l'intestazione scende a una riga sola, quindi le posizioni appiccicate
   (pannello notifiche, statistiche mensili) vanno riallineate. */
@media (max-width: 768px) {
  :root {
    --topbar-sections-h: 0px;
    --topbar-h: 56px;
  }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--green-200);
  color: var(--green-800);
}

[x-cloak] { display: none !important; }