:root {
  /* Primary Colors - CLER Logo Blue (#4b78ab) */
  --color-primary: #4b78ab;
  --color-primary-light: #f0f4f8;
  --color-primary-lighter: #f8fafc;
  --color-primary-dark: #3a5f88;
  --color-primary-border: rgba(75, 120, 171, 0.2);
  --color-primary-border-strong: rgba(75, 120, 171, 0.4);
  --color-primary-shadow: rgba(75, 120, 171, 0.1);

  /* Neutral Colors - Slate Scale */
  --color-text: #1e293b;
  --color-text-light: #475569;
  --color-text-lighter: #64748b;
  --color-text-dark: #0f172a;
  --color-text-darkest: #020617;
  --color-white: #ffffff;
  --color-bg-light: #f8fafc;
  --color-bg-gray: #f1f5f9;
  --color-bg-gray-dark: #e2e8f0;
  --color-bg: var(--color-bg-light);
  --color-bg-subtle: var(--color-bg-light);
  --color-border: #f1f5f9;
  --color-border-medium: #e2e8f0;
  --color-border-light: var(--color-border);

  /* Accent Colors — ERROR (toasts, validation). Not the MATERIALI category hue. */
  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.1);
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fca5a5;
  --color-danger-text: #7f1d1d;

  /* Matrix calendar day tints — festivo ≠ error; inconsistenza = danger */
  --color-cal-weekend: #d8e0ea;
  --color-cal-festivo: #ebe4f5;
  --color-cal-festivo-strong: #d8ccec;
  /* Giornale Filtro Cantiere: gold glow on Ordinarie with hours on filtered cantiere */
  --color-cal-cantiere-match: color-mix(in srgb, var(--color-warning) 18%, var(--color-white));
  --color-cal-cantiere-match-border: var(--color-warning-strong);
  --color-cal-cantiere-match-glow: color-mix(in srgb, var(--color-warning) 55%, transparent);
  --color-cal-inconsistent: #fecaca;
  --color-cal-inconsistent-soft: #fee2e2;
  --color-cal-inconsistent-border: var(--color-danger);
  --color-cal-inconsistent-text: var(--color-danger-text);
  --color-cal-warning: var(--color-warning-soft);
  --color-cal-warning-border: var(--color-warning);
  --color-cal-warning-text: var(--color-warning-text);
  /* OT absorbed into trasferta — subtle slate/blue, not alert orange */
  --color-cal-ot-absorbed: #e8eef4;
  --color-cal-ot-absorbed-stripe: rgba(100, 116, 139, 0.22);
  --color-cal-ot-absorbed-border: #94a3b8;
  --color-cal-ot-absorbed-text: #475569;
  /* Trasferta fascia day: the code (TZ, T8, ...) is the label, tinted so a
     fascia day is findable while scrolling 31 narrow day columns. */
  --color-cal-fascia: #d9e7e0;
  --color-cal-fascia-border: #6b9080;
  --color-cal-fascia-text: #2f4f43;
  /* One step per band, cheapest to dearest (TZ 20 -> TF 46), which is the order
     of PERSONALE_TRASFERTA_FASCE on both sides. This is an ORDINAL scale, so it
     is one hue walking from near-white to a solid deep green rather than five
     different colours: the operator reads "how expensive" at a glance and the
     code still says which band.

     The lightness spread is deliberately wide (L 0.88 -> 0.30). A first attempt
     kept every step inside a narrow light band and was unreadable in practice: at
     day-column size, five tints a few percent apart in lightness are the same
     colour. Hue stays in the green family on purpose, so a fascia day can never
     be mistaken for ferie (blue), reperibilita (plum), telelavoro (yellow) or an
     alert (amber). Every step is dark text on a light ground, the tightest being
     TF at 5.8:1, so the band code stays legible. */
  --color-cal-fascia-tz: #e9f4ee;
  --color-cal-fascia-tz-border: #b9d6c6;
  --color-cal-fascia-tz-text: #1e4536;
  --color-cal-fascia-t8: #cfe8dc;
  --color-cal-fascia-t8-border: #8fbca4;
  --color-cal-fascia-t8-text: #123a2c;
  --color-cal-fascia-ta: #aed7c4;
  --color-cal-fascia-ta-border: #6ea787;
  --color-cal-fascia-ta-text: #0d3125;
  --color-cal-fascia-t7: #87bfa6;
  --color-cal-fascia-t7-border: #4a8a6b;
  --color-cal-fascia-t7-text: #0a2a1f;
  --color-cal-fascia-tf: #5da183;
  --color-cal-fascia-tf-border: #2f6b52;
  --color-cal-fascia-tf-text: #061d14;
  /* Lavoro da remoto day: soft yellow tint on the ordinary hours cell — warm,
     clearly not an alert, and distinct from fascia green and warning orange. */
  --color-cal-telelavoro: #fbf0cf;
  --color-cal-telelavoro-border: #c9a63f;
  --color-cal-telelavoro-text: #5f4a12;
  /* Reperibilità day: plum wash — on-call, far from fascia green
     and from the red used for inconsistencies. */
  --color-cal-reperibilita: #f6dced;
  --color-cal-reperibilita-border: #b4578b;
  --color-cal-reperibilita-text: #5f2350;
  /* Fluida-synced presenza mark (F): cool info wash, distinct from TL/RP. */
  --color-cal-fluida: #dbeafe;
  --color-cal-fluida-border: var(--color-info);
  --color-cal-fluida-text: #1e3a8a;
  /* Giornale HR-acknowledged inconsistency (muted, not alert) */
  --color-cal-acked: var(--color-bg-gray);
  --color-cal-acked-border: var(--color-cal-ot-absorbed-border);
  --color-cal-acked-text: var(--color-text-lighter);
  --color-success: #10b981;
  --color-success-soft: #f0fdf4;
  --color-success-bg: #dcfce7;
  --color-success-border: #86efac;
  --color-success-text: #064e3b;
  --color-warning: #f59e0b;
  --color-warning-strong: #d97706;
  --color-warning-soft: #ffedd5;
  --color-warning-bg: #fff7ed;
  --color-warning-border: #fed7aa;
  --color-warning-text: #713f12;
  --color-info: #3b82f6;
  --color-overlay-scrim: rgba(15, 23, 42, 0.6);
  --color-info-ring: rgba(59, 130, 246, 0.12);
  --color-info-glow: rgba(59, 130, 246, 0.15);
  --color-neutral-glow: rgba(0, 0, 0, 0.04);
  --color-text-muted: var(--color-text-lighter);

  /*
   * Mezzi day-cal status (Presenze flotta) — classic flotta emerald/amber/coral/slate,
   * softened. Distinct from Personale giornale --color-cal-* tokens.
   */
  --color-mezzi-day-ok-bg: color-mix(in srgb, var(--color-success) 16%, var(--color-white));
  --color-mezzi-day-ok-border: color-mix(in srgb, var(--color-success) 42%, var(--color-white));
  --color-mezzi-day-ok-text: var(--color-success-text);
  --color-mezzi-day-copy-bg: color-mix(in srgb, var(--color-warning) 14%, var(--color-white));
  --color-mezzi-day-copy-border: color-mix(in srgb, var(--color-warning) 40%, var(--color-white));
  --color-mezzi-day-copy-text: var(--color-warning-text);
  --color-mezzi-day-todo-bg: color-mix(in srgb, var(--color-danger) 10%, var(--color-white));
  --color-mezzi-day-todo-border: color-mix(in srgb, var(--color-danger) 38%, var(--color-white));
  --color-mezzi-day-todo-text: var(--color-danger-text);
  --color-mezzi-day-fermo-bg: var(--color-bg-gray);
  --color-mezzi-day-fermo-border: var(--color-border-medium);
  --color-mezzi-day-fermo-text: var(--color-text-light);
  --color-mezzi-day-festivo-bg: var(--color-bg-gray);
  --color-mezzi-day-festivo-stripe: color-mix(in srgb, var(--color-text-lighter) 22%, transparent);
  --color-mezzi-day-festivo-border: var(--color-bg-gray-dark);
  --color-mezzi-day-weekend-stripe: color-mix(in srgb, var(--color-text-lighter) 16%, transparent);
  /* Sidebar selected day: light primary wash, not a solid fill */
  --color-mezzi-day-selected-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-white));
  --color-mezzi-day-selected-border: color-mix(in srgb, var(--color-primary) 45%, var(--color-white));
  --color-mezzi-day-selected-text: var(--color-primary-dark);
  --color-mezzi-day-idle-bg: var(--color-white);
  --color-mezzi-day-idle-border: var(--color-border-medium);

  /* Forecast Colors */
  --color-forecast: #d97706;
  --color-forecast-light: #fffbeb;
  --color-forecast-lighter: #fef3c7;
  --color-forecast-border: #f59e0b;
  --color-forecast-text: #92400e;
  --color-forecast-input: #fcd34d;

  /* Category Colors (Polished for premium look - Matches reference site).
     MATERIALI ≠ --color-danger: coral/terracotta so error toasts stay readable. */
  --cat-produzione-rgb: 0, 188, 212;   /* Cyan */
  --cat-materiali-rgb: 231, 111, 81;   /* Coral / terracotta (#e76f51) */
  --cat-personale-rgb: 76, 175, 80;    /* Green */
  --cat-mezzi-rgb: 233, 30, 99;        /* Pink/Magenta */
  --cat-subappalti-rgb: 255, 193, 7;   /* Amber/Tan */
  --cat-totale-rgb: 189, 189, 189;     /* Gray */
  --cat-alpha-main: 1;
  --cat-alpha-budget: 0.15;

  /* Budget Theme Tokens (Reference Gold) */
  --color-budget-bg: #fff9c4;
  --color-budget-accent: #827717;
  --color-budget-border: #fbc02d;
  --color-budget-text: #33691e;

  /* Typography */
  /* System UI stack — no external webfont (CSP style-src 'self'). */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 14px;
  --font-size-xs: 0.75rem;
  --font-size-2xs: 0.6875rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.5rem;
  --font-size-caption: 0.5625rem;
  --font-size-touch: 1rem;
  --font-size-ui: var(--font-size-sm);
  --font-size-ui-label: var(--font-size-caption);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-black: 800;

  /* TeamSystem invoice preview — A4 replica of the TeamSystem/SDI PDF.
     pt (not rem) so the on-screen preview and the printed page keep the
     same typographic scale as the source document (8pt body, 6.5pt notes). */
  --invoice-page-width: 210mm;
  --invoice-page-height: 297mm;
  --invoice-page-padding-x: 7.35pt;
  --invoice-page-padding-top: 4pt;
  --invoice-page-padding-bottom: 8pt;
  --invoice-print-size: 8pt;
  --invoice-print-size-top: 7.5pt;
  --invoice-print-size-note: 6.5pt;
  --invoice-print-leading: 9.5pt;
  --invoice-print-cell-padding-y: 2.2pt;
  --invoice-print-cell-padding-x: 2.3pt;
  --invoice-print-border: 0.5pt;
  --invoice-print-section-gap: 16.7pt;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* Shadows (More premium) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 35px -10px rgba(0, 0, 0, 0.16), 0 12px 14px -8px rgba(0, 0, 0, 0.08);
  --shadow-panel: -12px 0 24px -6px rgba(0, 0, 0, 0.12);
  /* Sticky bottom action bars — lifts the strip off the content above. */
  --shadow-action-bar: 0 -8px 20px -6px rgba(15, 23, 42, 0.14), 0 -2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-input: 0 0 0 4px var(--color-primary-shadow);
  --action-bar-min-height: 3.75rem;
  --border-width-strong: 2px;

  /* Layout — top-global-nav is position:fixed; body reserves --nav-height automatically
     (see navigation.css). Use --page-inset-top for inner shell padding only.
     Mobile drawer needs a taller bar (48px) for touch targets — see the
     @media (max-width: 768px) override in navigation.css. */
  --nav-height: 36px;
  --personale-commessa-bar-height: 52px;
  --page-max-width: none;
  --page-padding-x: var(--spacing-xl);
  --page-padding-y: var(--spacing-xl);
  --page-gap-top: var(--spacing-xl);
  --page-inset-top: var(--page-gap-top);
  --page-offset-top: calc(var(--nav-height) + var(--page-gap-top));
  --glass-header-top: calc(var(--nav-height) + var(--spacing-md));
  --page-content-gap: var(--spacing-lg);
  --page-section-gap: var(--spacing-lg);
  --page-header-gap: var(--spacing-lg);
  --page-header-pb: var(--spacing-lg);
  --page-subtitle-size: var(--font-size-sm);
  --mezzi-sidebar-width: clamp(240px, 28%, 340px);
  --color-text-secondary: var(--color-text-light);
  --analytic-header-height: 272px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-panel: 0.5s cubic-bezier(0.4, 0, 0.6, 1);

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-sticky-column: 150;
  --z-action-bar: 220;
  --z-fab: 250;
  --z-side-panel: 300;
  --z-analytic-header: 400;
  --z-loading: 500;
  --z-search-dropdown: 600;
  --z-modal: 1000;
  --z-modal-confirm: 1050;
  --z-modal-top: 1100;

  /* Modal design system (single owner: components-modals.css) */
  /* Width scale — the ONLY sanctioned modal widths. */
  --modal-w-sm: 400px;
  --modal-w-md: 560px;
  --modal-w-lg: 800px;
  --modal-w-xl: 1000px;
  /* Fluid escape hatch for wide data grids (3+ column layouts). */
  --modal-w-fluid: min(1200px, 92vw);
  --modal-max-h: 90vh;
  --modal-gutter: 1.5rem;
  --modal-overlay-bg: rgba(15, 23, 42, 0.55);
  --modal-radius: var(--radius-lg);
  --modal-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  --modal-border: 1px solid rgba(255, 255, 255, 0.35);
  --modal-title-size: 1.0625rem;
  --modal-anim: modal-in var(--transition-normal);

  /* Table Styles */
  --table-header-bg: var(--color-text-dark);
  --table-header-text: var(--color-white);
  --table-row-even: var(--color-bg-light);
  --table-row-hover: var(--color-bg-gray);
  --table-border: var(--color-border-medium);
  --table-sticky-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --color-grid-heavy: var(--color-text-darkest);
  /* Finanziaria matrix: min widths so € amounts never ellipsis at mid viewports */
  --fin-col-comm-min: 12rem;
  --fin-col-amount-min: 10rem;
}

/* Category Semantic Classes */
.produzione { --cat-rgb: var(--cat-produzione-rgb); }
.materiali   { --cat-rgb: var(--cat-materiali-rgb); }
.personale   { --cat-rgb: var(--cat-personale-rgb); }
.mezzi       { --cat-rgb: var(--cat-mezzi-rgb); }
.subappalti  { --cat-rgb: var(--cat-subappalti-rgb); }
.totali      { --cat-rgb: var(--cat-totale-rgb); }

/* Category Color Utility Classes - Reusable alpha variants */
/* Usage: Add class .cat-bg-15, .cat-bg-12, .cat-bg-8 to any element inside a category-scoped parent */
.cat-bg-15 {
  background: rgba(var(--cat-rgb), 0.15) !important;
}

.cat-bg-12 {
  background: rgba(var(--cat-rgb), 0.12) !important;
}

.cat-bg-08 {
  background: rgba(var(--cat-rgb), 0.08) !important;
}

.cat-bg-05 {
  background: rgba(var(--cat-rgb), 0.05) !important;
}

/* Category text colors - Derived darker variants for contrast */
.cat-text-produzione { color: color-mix(in srgb, rgb(var(--cat-produzione-rgb)), #000 40%); }
.cat-text-materiali  { color: color-mix(in srgb, rgb(var(--cat-materiali-rgb)), #000 30%); }
.cat-text-personale  { color: color-mix(in srgb, rgb(var(--cat-personale-rgb)), #000 40%); }
.cat-text-mezzi      { color: color-mix(in srgb, rgb(var(--cat-mezzi-rgb)), #000 30%); }
.cat-text-subappalti { color: color-mix(in srgb, rgb(var(--cat-subappalti-rgb)), #000 40%); }