/* ==========================================================================
   progetto-98 — Design system "Banco" v1
   (docs/frontend-review/03-design-system-proposal.md)

   Struttura:
     1. Token (chiaro = default, scuro = [data-bs-theme="dark"])
     2. Mappatura su Bootstrap 5.3 (--bs-*) e alias dei token legacy
     3. Base: tipografia, link, focus, motion
     4. App shell: sidebar, contenuto, drawer mobile
     5. Componenti: page header, card, pulsanti, form, tabelle, badge,
        alert, dropdown, modali, tabs, paginazione, toast, empty state
     6. Pattern di modulo (dashboard, archivio, fogli ore, ...)
     7. Responsive
   Regole: nessun colore fuori dai token; superfici opache; il materiale
   traslucido è solo sul livello funzionale (.sticky-actions, popover).
   ========================================================================== */

/* ===========================
   1. TOKEN
   =========================== */
:root,
:root[data-bs-theme="light"] {
  color-scheme: light;
  --c-canvas:   #F4F5F7;
  --c-surface:  #FFFFFF;
  --c-sunken:   #EEF0F3;
  --c-raised:   #FFFFFF;
  --c-text:     #14171F;   /* 17.9:1 su surface */
  --c-text-2:   #4A5262;   /*  7.85:1 */
  --c-text-3:   #636B7A;   /*  5.36:1 (4.70 su sunken) */
  --c-border:   #DADDE3;   /* separatori decorativi */
  --c-control:  #8C93A1;   /*  3.09:1 bordi controlli (WCAG 1.4.11) */
  --c-accent:   #1D5BD6;   /*  5.97:1 */
  --c-accent-hover: #174BB3;
  --c-on-accent: #FFFFFF;
  --c-success:  #18794E;   /*  5.41:1 */
  --c-warning:  #8F5500;   /*  6.06:1 (4.94 sulla tinta warning-bg) */
  --c-danger:   #C4302B;   /*  5.52:1 */
  --c-danger-hover: #A62722;
  --c-on-fill:  #FFFFFF;
  --c-focus:    #1D5BD6;   /*  5.97:1 */
  --c-overlay:  rgb(15 17 21 / .45);
  --c-selected: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface));
  --c-hover:    color-mix(in srgb, var(--c-text) 4%, transparent);

  --e-1: 0 1px 2px rgb(16 24 40 / .06), 0 0 0 1px rgb(16 24 40 / .02);
  --e-3: 0 8px 24px rgb(16 24 40 / .14);
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --c-canvas:   #0E1014;
  --c-surface:  #16191F;
  --c-sunken:   #1C2027;
  --c-raised:   #1E222A;
  --c-text:     #ECEEF2;   /* 15.2:1 */
  --c-text-2:   #B3B9C5;   /*  8.94:1 */
  --c-text-3:   #8E96A5;   /*  5.91:1 (5.49 su sunken) */
  --c-border:   #2A2F38;
  --c-control:  #5F6878;   /*  3.13:1 */
  --c-accent:   #6C9CFF;   /*  6.57:1 */
  --c-accent-hover: #8DB2FF;
  --c-on-accent: #0E1014;
  --c-success:  #4BC283;
  --c-warning:  #F2B24A;
  --c-danger:   #FF6E66;
  --c-danger-hover: #FF8C86;
  --c-on-fill:  #0E1014;
  --c-focus:    #8DB2FF;   /*  8.34:1 */
  --c-overlay:  rgb(0 0 0 / .6);
  --c-hover:    color-mix(in srgb, var(--c-text) 6%, transparent);

  --e-1: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .02);
  --e-3: 0 10px 30px rgb(0 0 0 / .5);
}

:root {
  /* Tinte di stato (sfondi tenui: il testo resta il colore pieno) */
  --c-accent-bg:  color-mix(in srgb, var(--c-accent)  12%, var(--c-surface));
  --c-success-bg: color-mix(in srgb, var(--c-success) 12%, var(--c-surface));
  --c-warning-bg: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface));
  --c-danger-bg:  color-mix(in srgb, var(--c-danger)  12%, var(--c-surface));
  --c-neutral-bg: var(--c-sunken);

  /* Tipografia: 7 stili */
  --font-sans: system-ui, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --t-title-1: 1.375rem;   /* 22 */
  --t-title-2: 1.0625rem;  /* 17 */
  --t-title-3: .9375rem;   /* 15 */
  --t-body:    .875rem;    /* 14 */
  --t-callout: .8125rem;   /* 13 */
  --t-footnote:.75rem;     /* 12 */
  --t-eyebrow: .6875rem;   /* 11 */

  /* Spaziatura base 4 */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;

  /* Raggi */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* Controlli e layout */
  --control-h: 2.25rem;     /* 36 */
  --control-h-sm: 1.875rem; /* 30 */
  --row-h: 2.75rem;         /* 44 */
  --sidebar-w: 240px;

  --motion-fast: 120ms;
  --motion-med: 180ms;
}

/* Densità compatta (preferenza utente, html[data-density="compact"]) */
:root[data-density="compact"] {
  --t-body: .8125rem;
  --control-h: 1.875rem;
  --row-h: 2rem;
}

/* ===========================
   2. BOOTSTRAP + ALIAS LEGACY
   =========================== */
:root,
[data-bs-theme] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--t-body);
  --bs-body-line-height: 1.45;
  --bs-body-bg: var(--c-canvas);
  --bs-body-color: var(--c-text);
  --bs-emphasis-color: var(--c-text);
  --bs-secondary-color: var(--c-text-2);
  --bs-tertiary-color: var(--c-text-3);
  --bs-secondary-bg: var(--c-sunken);
  --bs-tertiary-bg: var(--c-sunken);
  --bs-border-color: var(--c-border);
  --bs-border-color-translucent: var(--c-border);
  --bs-heading-color: var(--c-text);
  --bs-link-color: var(--c-accent);
  --bs-link-hover-color: var(--c-accent-hover);
  --bs-link-color-rgb: 29, 91, 214;
  --bs-link-hover-color-rgb: 23, 75, 179;
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-md);
  --bs-focus-ring-color: color-mix(in srgb, var(--c-focus) 40%, transparent);
  --bs-form-valid-color: var(--c-success);
  --bs-form-valid-border-color: var(--c-success);
  --bs-form-invalid-color: var(--c-danger);
  --bs-form-invalid-border-color: var(--c-danger);
  --bs-code-color: var(--c-accent);
  --bs-highlight-bg: var(--c-warning-bg);
  --bs-highlight-color: var(--c-text);

  /* Alias dei token legacy: i template e i <style> esistenti continuano a funzionare */
  --surface-0: var(--c-surface);
  --surface-1: var(--c-sunken);
  --surface-2: var(--c-sunken);
  --surface-3: color-mix(in srgb, var(--c-text) 8%, var(--c-surface));
  --surface-strong: var(--c-raised);
  --surface-sidebar: var(--c-surface);
  --surface-sidebar-mobile: var(--c-surface);
  --border-soft: var(--c-border);
  --border: var(--c-border);
  --border-strong: var(--c-control);
  --text-heading: var(--c-text);
  --text-body: var(--c-text);
  --text-body-2: var(--c-text);
  --text-muted: var(--c-text-2);
  --text-soft: var(--c-text-2);
  --text-faint: var(--c-text-3);
  --link: var(--c-accent);
  --link-hover: var(--c-accent-hover);
  --accent-primary-text: var(--c-accent);
  --accent-primary-text-strong: var(--c-accent);
  --accent-success-text: var(--c-success);
  --accent-danger-text: var(--c-danger);
  --accent-warning-text: var(--c-warning);
  --accent-info-text: var(--c-accent);
  --shadow-color: rgb(0 0 0 / .12);
  --shadow-color-soft: rgb(0 0 0 / .06);
  --scrollbar-thumb: color-mix(in srgb, var(--c-text) 22%, transparent);
}
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 108, 156, 255;
  --bs-link-hover-color-rgb: 141, 178, 255;
}

/* ===========================
   3. BASE
   =========================== */
html {
  background: var(--c-canvas);
  height: 100%;
  overflow: hidden;
}
body {
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--c-text); font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
h1, .h1, h2, .h2 { font-size: var(--t-title-1); }
h3, .h3, h5, .h5 { font-size: var(--t-title-2); }
h4, .h4 { font-size: var(--t-title-2); }
h6, .h6 { font-size: var(--t-title-3); }

a { color: var(--c-accent); text-underline-offset: 2px; }
a:hover { color: var(--c-accent-hover); }
hr { border-color: var(--c-border); opacity: 1; }
code { color: var(--c-accent); background: var(--c-accent-bg); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
mark, .mark { background: var(--c-warning-bg); color: var(--c-text); border-radius: 3px; padding: 0 .2em; }
small, .small { font-size: var(--t-footnote); }

/* Colori di testo semantici (sostituiscono i colori inline) */
.text-2, .text-soft, .text-muted, .text-body-secondary, .text-secondary { color: var(--c-text-2) !important; }
.text-3, .text-softer, .text-body-tertiary { color: var(--c-text-3) !important; }
.text-heading, .text-body-emphasis { color: var(--c-text) !important; }
.text-primary, .text-info, .text-accent { color: var(--c-accent) !important; }
.text-success { color: var(--c-success) !important; }
.text-danger  { color: var(--c-danger) !important; }
.text-warning { color: var(--c-warning) !important; }
.text-white   { color: var(--c-text) !important; }   /* legacy: era "bianco su vetro scuro" */
.text-dark    { color: var(--c-text) !important; }
.link-quiet { color: var(--c-text-3); text-decoration: none; }
.link-quiet:hover { color: var(--c-accent); text-decoration: underline; }

/* Focus visibile, uguale ovunque (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex], .btn, .page-link, .dropdown-item, .form-check-input):focus-visible {
  outline: 2px solid var(--c-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus { outline: none; }

.skip-link {
  position: fixed; left: var(--s-3); top: var(--s-3); z-index: 2000;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--c-on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Scrollbar sobrie */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* Codici (P.IVA, CF, IBAN, CER, targhe): monospace, mai spezzati in tabella */
.mono, .font-monospace { font-family: var(--font-mono) !important; font-size: .95em; font-variant-numeric: tabular-nums; }
td .mono, td .font-monospace, td.font-monospace, td.mono { white-space: nowrap; }
.tabular, .dash-list-date { font-variant-numeric: tabular-nums; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===========================
   4. APP SHELL
   =========================== */
.app-layout { display: flex; align-items: stretch; flex: 1 1 0; min-height: 0; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-2);
}
.sidebar-header img { max-height: 34px; max-width: 150px; display: block; }
[data-bs-theme="dark"] .sidebar-header img { filter: brightness(1.25) saturate(1.1); }

.sidebar-search {
  margin: var(--s-1) var(--s-3) var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--control-h-sm);
  padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-sunken);
  color: var(--c-text-3);
  font-size: var(--t-callout);
  text-decoration: none;
  cursor: pointer;
  width: calc(100% - 1.5rem);
  text-align: left;
}
.sidebar-search:hover { color: var(--c-text-2); border-color: var(--c-control); }
.sidebar-search .kbd-hint { margin-left: auto; }

.kbd-hint, kbd {
  font-family: var(--font-sans);
  font-size: .6875rem; font-weight: 600;
  color: var(--c-text-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 .3rem;
  line-height: 1.4;
}

.sidebar-nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding: var(--s-1) 0 var(--s-3); }

.sidebar-section {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: 0;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-3);
  padding: var(--s-4) var(--s-4) var(--s-1);
  text-align: left;
}
button.sidebar-section { cursor: pointer; }
button.sidebar-section:hover { color: var(--c-text-2); }
.sidebar-section .bi { font-size: .7rem; transition: transform var(--motion-fast); }
.sidebar-section[aria-expanded="false"] .bi { transform: rotate(-90deg); }
.sidebar-group[hidden] { display: none; }

.sidebar-link {
  display: flex; align-items: center; gap: .625rem;
  margin: 1px var(--s-2);
  padding: 0 var(--s-3);
  min-height: 2.125rem;
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--t-callout); font-weight: 500;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.sidebar-link span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link i { font-size: 1rem; width: 1.125rem; text-align: center; flex-shrink: 0; color: var(--c-text-3); }
.sidebar-link:hover { color: var(--c-text); background: var(--c-hover); }
.sidebar-link:hover i { color: var(--c-text-2); }
.sidebar-link.active { color: var(--c-accent); background: var(--c-accent-bg); font-weight: 600; }
.sidebar-link.active i { color: var(--c-accent); }

/* Menu account (in fondo, con testo: non più icone isolate) */
.sidebar-account { flex-shrink: 0; border-top: 1px solid var(--c-border); padding: var(--s-2); }
.sidebar-account > .dropdown > .btn,
.sidebar-account-btn {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--c-text); text-align: left; font-size: var(--t-callout);
}
.sidebar-account-btn:hover { background: var(--c-hover); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: var(--c-accent-bg); color: var(--c-accent);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.sidebar-account-name { font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-sub  { font-size: var(--t-footnote); color: var(--c-text-3); }
.sidebar-ver { font-size: var(--t-eyebrow); color: var(--c-text-3); padding: 0 var(--s-2) var(--s-1); }

/* Legacy (portali): pulsanti account icona */
.sidebar-actions { flex-shrink: 0; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--c-border); display: flex; gap: var(--s-1); }
.sidebar-action-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm);
  color: var(--c-text-2); text-decoration: none; font-size: 1rem;
}
.sidebar-action-link:hover { color: var(--c-text); background: var(--c-hover); }
.sidebar-action-danger { color: var(--c-danger) !important; }
.sidebar-action-danger:hover { background: var(--c-danger-bg) !important; }

.main-content {
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  padding: var(--s-5) var(--s-6) var(--s-6);
  scroll-padding-top: 4rem;
}
.main-content:focus { outline: none; }
.content-wrap { max-width: 1680px; margin: 0 auto; }

/* Drawer mobile */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--c-overlay); z-index: 1040; }
.sidebar-overlay.open { display: block; }

.sidebar-mobile-toggle {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 1029;
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--e-1);
  font-size: 1.25rem;
}
.sidebar-mobile-toggle:hover { background: var(--c-sunken); color: var(--c-text); }

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed; top: 0; left: 0;
    height: 100dvh; width: min(84vw, 300px);
    z-index: 1045;
    transform: translateX(-100%);
    /* Chiuso: fuori dall'ordine di tabulazione e dall'albero di accessibilità
       (visibility si spegne solo a fine animazione) */
    visibility: hidden;
    transition: transform var(--motion-med) ease, visibility 0s linear var(--motion-med);
    box-shadow: var(--e-3);
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform var(--motion-med) ease; }
  .main-content { padding: 4.25rem var(--s-4) var(--s-5); }
}
@media (min-width: 992px) {
  #sidebarToggle { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  :root { --sidebar-w: 216px; }
  .main-content { padding: var(--s-5) var(--s-5) var(--s-6); }
}

/* ===========================
   5. COMPONENTI
   =========================== */

/* --- Page header --- */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.page-header-left { min-width: 0; flex: 1 1 auto; }
.page-title {
  font-size: var(--t-title-1); font-weight: 650;
  color: var(--c-text);
  margin: 0;
  display: flex; align-items: center; gap: var(--s-2);
  line-height: 1.25;
}
.page-title-icon { color: var(--c-text-3); font-size: 1.125rem; }
.page-subtitle { margin: var(--s-1) 0 0; color: var(--c-text-2); font-size: var(--t-callout); }
.page-header-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.page-header .breadcrumb { margin-bottom: var(--s-1); }

/* --- Breadcrumb --- */
.breadcrumb { --bs-breadcrumb-divider-color: var(--c-text-3); --bs-breadcrumb-item-active-color: var(--c-text-2); font-size: var(--t-callout); margin-bottom: var(--s-2); }
.breadcrumb-item > a { color: var(--c-text-2); text-decoration: none; }
.breadcrumb-item > a:hover { color: var(--c-accent); text-decoration: underline; }

/* --- Card --- */
.card, .glass-card {
  --bs-card-bg: var(--c-surface);
  --bs-card-border-color: var(--c-border);
  --bs-card-cap-bg: var(--c-surface);
  --bs-card-color: var(--c-text);
  --bs-card-border-radius: var(--r-md);
  --bs-card-inner-border-radius: calc(var(--r-md) - 1px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  color: var(--c-text);
}
.glass-card { overflow: hidden; }
.glass-card:has(.dropdown-menu.show) { overflow: visible; }
.card-header, .glass-card-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--t-callout);
}
.glass-card-header {
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.card-footer { background: var(--c-surface); border-top: 1px solid var(--c-border); }
.card-title { color: var(--c-text); font-weight: 600; }

.bg-white, .bg-body { background-color: var(--c-surface) !important; color: var(--c-text) !important; }
.bg-light, .bg-body-tertiary, .bg-body-secondary { background-color: var(--c-sunken) !important; color: var(--c-text) !important; }
.border { border-color: var(--c-border) !important; }
.shadow-sm, .shadow { box-shadow: var(--e-1) !important; }

/* --- Section labels (eyebrow) --- */
.section-label,
.section-heading {
  font-size: var(--t-eyebrow) !important;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--s-3);
}
.section-label { padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-border); }
.section-label .bi { color: var(--c-text-3); }
.section-heading { display: flex; align-items: center; gap: var(--s-2); }
.section-heading::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }

/* --- Pulsanti --- */
.btn {
  --bs-btn-font-size: var(--t-callout);
  --bs-btn-font-weight: 550;
  --bs-btn-padding-y: .4375rem;
  --bs-btn-padding-x: .875rem;
  --bs-btn-border-radius: var(--r-sm);
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: .5;
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-height: var(--control-h);
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
  white-space: nowrap;
}
.btn > .bi { font-size: 1em; }
.btn .me-1, .btn .me-2 { margin-right: 0 !important; }
.btn-sm {
  --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: var(--t-footnote);
  min-height: var(--control-h-sm);
}
.btn-lg { --bs-btn-font-size: var(--t-body); min-height: 2.75rem; }

.btn-primary, .btn-search {
  --bs-btn-color: var(--c-on-accent); --bs-btn-bg: var(--c-accent); --bs-btn-border-color: var(--c-accent);
  --bs-btn-hover-color: var(--c-on-accent); --bs-btn-hover-bg: var(--c-accent-hover); --bs-btn-hover-border-color: var(--c-accent-hover);
  --bs-btn-active-color: var(--c-on-accent); --bs-btn-active-bg: var(--c-accent-hover); --bs-btn-active-border-color: var(--c-accent-hover);
  --bs-btn-disabled-color: var(--c-on-accent); --bs-btn-disabled-bg: var(--c-accent); --bs-btn-disabled-border-color: var(--c-accent);
}
/* Le azioni di creazione/salvataggio hanno sempre l'aspetto primario
   (prima alcune pagine usavano verde, altre indaco). */
.btn-success {
  --bs-btn-color: var(--c-on-fill); --bs-btn-bg: var(--c-success); --bs-btn-border-color: var(--c-success);
  --bs-btn-hover-color: var(--c-on-fill); --bs-btn-hover-bg: color-mix(in srgb, var(--c-success) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--c-success) 85%, #000);
  --bs-btn-active-color: var(--c-on-fill); --bs-btn-active-bg: color-mix(in srgb, var(--c-success) 80%, #000);
  --bs-btn-disabled-color: var(--c-on-fill); --bs-btn-disabled-bg: var(--c-success); --bs-btn-disabled-border-color: var(--c-success);
}
.btn-danger {
  --bs-btn-color: var(--c-on-fill); --bs-btn-bg: var(--c-danger); --bs-btn-border-color: var(--c-danger);
  --bs-btn-hover-color: var(--c-on-fill); --bs-btn-hover-bg: var(--c-danger-hover); --bs-btn-hover-border-color: var(--c-danger-hover);
  --bs-btn-active-color: var(--c-on-fill); --bs-btn-active-bg: var(--c-danger-hover);
  --bs-btn-disabled-color: var(--c-on-fill); --bs-btn-disabled-bg: var(--c-danger); --bs-btn-disabled-border-color: var(--c-danger);
}
.btn-warning {
  --bs-btn-color: var(--c-on-fill); --bs-btn-bg: var(--c-warning); --bs-btn-border-color: var(--c-warning);
  --bs-btn-hover-color: var(--c-on-fill); --bs-btn-hover-bg: color-mix(in srgb, var(--c-warning) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--c-warning) 85%, #000);
  --bs-btn-active-color: var(--c-on-fill); --bs-btn-active-bg: color-mix(in srgb, var(--c-warning) 80%, #000);
}
.btn-info {
  --bs-btn-color: var(--c-on-accent); --bs-btn-bg: var(--c-accent); --bs-btn-border-color: var(--c-accent);
  --bs-btn-hover-color: var(--c-on-accent); --bs-btn-hover-bg: var(--c-accent-hover); --bs-btn-hover-border-color: var(--c-accent-hover);
}
.btn-secondary, .btn-light, .btn-dark, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  --bs-btn-color: var(--c-text); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-control);
  --bs-btn-hover-color: var(--c-text); --bs-btn-hover-bg: var(--c-sunken); --bs-btn-hover-border-color: var(--c-control);
  --bs-btn-active-color: var(--c-text); --bs-btn-active-bg: var(--c-sunken); --bs-btn-active-border-color: var(--c-text-3);
  --bs-btn-disabled-color: var(--c-text-3); --bs-btn-disabled-bg: var(--c-surface); --bs-btn-disabled-border-color: var(--c-border);
}
.btn-outline-primary, .btn-outline-info {
  --bs-btn-color: var(--c-accent); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-accent);
  --bs-btn-hover-color: var(--c-accent); --bs-btn-hover-bg: var(--c-accent-bg); --bs-btn-hover-border-color: var(--c-accent);
  --bs-btn-active-color: var(--c-accent); --bs-btn-active-bg: var(--c-accent-bg); --bs-btn-active-border-color: var(--c-accent);
  --bs-btn-disabled-color: var(--c-text-3); --bs-btn-disabled-border-color: var(--c-border);
}
.btn-outline-success {
  --bs-btn-color: var(--c-success); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-success);
  --bs-btn-hover-color: var(--c-success); --bs-btn-hover-bg: var(--c-success-bg); --bs-btn-hover-border-color: var(--c-success);
  --bs-btn-active-color: var(--c-success); --bs-btn-active-bg: var(--c-success-bg); --bs-btn-active-border-color: var(--c-success);
}
.btn-outline-danger {
  --bs-btn-color: var(--c-danger); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-danger);
  --bs-btn-hover-color: var(--c-danger); --bs-btn-hover-bg: var(--c-danger-bg); --bs-btn-hover-border-color: var(--c-danger);
  --bs-btn-active-color: var(--c-danger); --bs-btn-active-bg: var(--c-danger-bg); --bs-btn-active-border-color: var(--c-danger);
}
.btn-outline-warning {
  --bs-btn-color: var(--c-warning); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-warning);
  --bs-btn-hover-color: var(--c-warning); --bs-btn-hover-bg: var(--c-warning-bg); --bs-btn-hover-border-color: var(--c-warning);
  --bs-btn-active-color: var(--c-warning); --bs-btn-active-bg: var(--c-warning-bg); --bs-btn-active-border-color: var(--c-warning);
}
.btn-link {
  --bs-btn-color: var(--c-accent); --bs-btn-hover-color: var(--c-accent-hover); --bs-btn-active-color: var(--c-accent-hover);
  --bs-btn-disabled-color: var(--c-text-3);
}
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-primary { background: var(--c-accent-bg); color: var(--c-accent); border-color: var(--c-accent); }

/* Bottone "in corso" (aria-busy): spinner al posto dell'icona */
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ''; position: absolute; width: 1rem; height: 1rem; inset: 0; margin: auto;
  border: 2px solid currentColor; border-color: var(--bs-btn-color, var(--c-text)) transparent var(--bs-btn-color, var(--c-text)) var(--bs-btn-color, var(--c-text));
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-close { --bs-btn-close-focus-shadow: none; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.btn-close-white { filter: none; }
[data-bs-theme="light"] .btn-close-white { filter: none; }

.btn-group > .btn { box-shadow: none; }

/* Pulsanti icona (azioni di riga) */
.btn-icon, .btn-icon-del {
  --bs-btn-padding-x: .4375rem; --bs-btn-padding-y: .25rem;
  min-width: var(--control-h-sm); min-height: var(--control-h-sm);
  --bs-btn-color: var(--c-text-2); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-border);
  --bs-btn-hover-color: var(--c-text); --bs-btn-hover-bg: var(--c-sunken); --bs-btn-hover-border-color: var(--c-control);
  --bs-btn-active-color: var(--c-text); --bs-btn-active-bg: var(--c-sunken); --bs-btn-active-border-color: var(--c-control);
}
.btn-icon-del { --bs-btn-color: var(--c-danger); --bs-btn-hover-color: var(--c-danger); --bs-btn-hover-bg: var(--c-danger-bg); --bs-btn-hover-border-color: var(--c-danger); }

/* Gruppo di azioni di riga come blocco unico */
.btn-group-seamless {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface);
}
.btn-group-seamless > .btn,
.btn-group-seamless > form > .btn { border: 0 !important; border-radius: 0 !important; }
.btn-group-seamless > .btn:not(:last-child),
.btn-group-seamless > form:not(:last-child) > .btn { border-right: 1px solid var(--c-border) !important; }
.btn-group-seamless > form { display: inline-flex; margin: 0; }

/* --- Form --- */
.form-label {
  color: var(--c-text-2);
  font-size: var(--t-callout);
  font-weight: 550;
  margin-bottom: .3125rem;
}
.form-label-sm { font-size: var(--t-footnote); }
.form-text { color: var(--c-text-3); font-size: var(--t-footnote); margin-top: .3125rem; }
.form-control, .form-select {
  --bs-body-bg: var(--c-surface);
  background-color: var(--c-surface);
  border: 1px solid var(--c-control);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--t-body);
  min-height: var(--control-h);
  padding: .4375rem .75rem;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { min-height: var(--control-h-sm); padding-top: .25rem; padding-bottom: .25rem; font-size: var(--t-callout); }
.form-control::placeholder { color: var(--c-text-3); opacity: 1; }
.text-uppercase::placeholder { text-transform: none; }  /* il valore resta maiuscolo, il suggerimento no */
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--c-text-3); }
.form-control:focus, .form-select:focus {
  background-color: var(--c-surface);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
  color: var(--c-text);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--c-sunken); color: var(--c-text-2); border-color: var(--c-border); }
textarea.form-control { min-height: 5rem; }
.form-control[type=file] { padding: .3125rem .5rem; }
.form-control[type=file]::file-selector-button {
  background: var(--c-sunken); color: var(--c-text); border: 0; border-right: 1px solid var(--c-border);
  padding: .25rem .75rem; margin: -.3125rem .75rem -.3125rem -.5rem; font-weight: 550;
}
.form-control[type=file]:hover::file-selector-button { background: var(--c-hover); }
[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b3b9c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background: var(--c-surface); color: var(--c-text); }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { font-variant-numeric: tabular-nums; }
[data-bs-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(.85); }

.form-check-input {
  --bs-form-check-bg: var(--c-surface);
  border: 1px solid var(--c-control);
  width: 1.0625rem; height: 1.0625rem; margin-top: .15rem;
}
.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
.form-check-input:focus { box-shadow: none; border-color: var(--c-accent); }
.form-switch .form-check-input { width: 2.125rem; }
.form-check-label { color: var(--c-text); }
.form-check { min-height: 1.5rem; }

.input-group-text {
  background: var(--c-sunken);
  border: 1px solid var(--c-control);
  color: var(--c-text-2);
  font-size: var(--t-callout);
}
.input-group > .btn { min-height: auto; }
.input-group-sm > .btn { min-height: var(--control-h-sm); }

/* Validazione */
.invalid-feedback { color: var(--c-danger); font-size: var(--t-footnote); font-weight: 500; }
.valid-feedback { color: var(--c-success); font-size: var(--t-footnote); }
.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated .form-select:invalid, .form-select.is-invalid { border-color: var(--c-danger); }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--c-control); background-image: none; padding-right: .75rem; }
.required-mark, .form-label .text-danger { color: var(--c-danger) !important; }

/* Ricerca (campo + pulsante) */
.search-input { border-right: 0; }
.search-input:focus { position: relative; z-index: 3; }
.btn-search { white-space: nowrap; }

/* Footer dei form e barra azioni sticky */
.form-footer {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.form-footer > :first-child:not(:only-child) { margin-right: auto; }
.sticky-actions {
  position: sticky; top: calc(-1 * var(--s-5)); z-index: 20;
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-6)) var(--s-5);
  padding: var(--s-3) var(--s-6);
  /* Livello funzionale sopra il contenuto che scorre: unico uso del materiale */
  background: color-mix(in srgb, var(--c-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--c-border);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sticky-actions { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-surface); }
}

/* --- Tabelle --- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text);
  --bs-table-border-color: var(--c-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--c-sunken) 60%, transparent);
  --bs-table-striped-color: var(--c-text);
  --bs-table-hover-bg: var(--c-hover);
  --bs-table-hover-color: var(--c-text);
  --bs-table-active-bg: var(--c-selected);
  font-size: var(--t-body);
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th,
.table > thead th,
.table th {
  background: var(--c-sunken);
  color: var(--c-text-2);
  font-size: var(--t-footnote);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.table > tbody > tr > th { background: transparent; color: var(--c-text); font-size: var(--t-body); }
.table td {
  padding: .5rem .75rem;
  height: var(--row-h);
  vertical-align: middle;
  border-color: var(--c-border);
}
.table-sm td { padding: .3125rem .5rem; height: auto; }
.table-sm th { padding: .4375rem .5rem; }
.table > :last-child > tr:last-child > td { border-bottom: 0; }
.table-light, .table-dark { --bs-table-bg: var(--c-sunken); --bs-table-color: var(--c-text); --bs-table-border-color: var(--c-border); }
.table-light th, .table-dark th { background: var(--c-sunken); }

/* Righe di stato: una barra laterale e lo sfondo tenue, non l'intera riga satura */
.table-danger  { --bs-table-bg: var(--c-danger-bg);  --bs-table-color: var(--c-text); --bs-table-hover-bg: var(--c-danger-bg);  --bs-table-striped-bg: var(--c-danger-bg); }
.table-warning { --bs-table-bg: var(--c-warning-bg); --bs-table-color: var(--c-text); --bs-table-hover-bg: var(--c-warning-bg); --bs-table-striped-bg: var(--c-warning-bg); }
.table-success { --bs-table-bg: var(--c-success-bg); --bs-table-color: var(--c-text); --bs-table-hover-bg: var(--c-success-bg); --bs-table-striped-bg: var(--c-success-bg); }
.table-info, .table-primary { --bs-table-bg: var(--c-accent-bg); --bs-table-color: var(--c-text); }
.table-secondary { --bs-table-bg: var(--c-sunken); --bs-table-color: var(--c-text); }
tr.table-danger > td:first-child  { box-shadow: inset 3px 0 0 var(--c-danger); }
tr.table-warning > td:first-child { box-shadow: inset 3px 0 0 var(--c-warning); }
tr.table-success > td:first-child { box-shadow: inset 3px 0 0 var(--c-success); }

/* Colonna azioni: sempre a destra e visibile anche quando la tabella scorre */
.table th.col-actions,
.table td.col-actions {
  position: sticky; right: 0; z-index: 1;
  text-align: right !important; white-space: nowrap; width: 1%;
}
.table td.col-actions { background: var(--c-surface); }
.table-hover > tbody > tr:hover > td.col-actions { background: color-mix(in srgb, var(--c-text) 4%, var(--c-surface)); }
.table td.col-actions .btn,
.table td.col-actions form { vertical-align: middle; }
.table td.col-actions > form, .table td.col-actions > .btn, .table td.col-actions > a { margin-left: var(--s-1); }

/* Righe cliccabili */
.clickable-row { cursor: pointer; }
.clickable-row:hover > * { --bs-table-bg-state: var(--c-hover); }

/* Contenitore tabella: scroll orizzontale contenuto nella card */
.table-responsive { scrollbar-gutter: stable; }
.glass-card > .table-responsive > .table,
.glass-card > .table,
.card > .table-responsive > .table { margin: 0; }

/* Ordinamento intestazioni (link con aria-sort sul <th>) */
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.th-sort:hover { color: var(--c-text); }
th[aria-sort] .th-sort { color: var(--c-text); }

/* --- Paginazione --- */
.pagination {
  --bs-pagination-color: var(--c-text-2);
  --bs-pagination-bg: var(--c-surface);
  --bs-pagination-border-color: var(--c-border);
  --bs-pagination-hover-color: var(--c-text);
  --bs-pagination-hover-bg: var(--c-sunken);
  --bs-pagination-hover-border-color: var(--c-border);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--c-on-accent);
  --bs-pagination-active-bg: var(--c-accent);
  --bs-pagination-active-border-color: var(--c-accent);
  --bs-pagination-disabled-color: var(--c-text-3);
  --bs-pagination-disabled-bg: var(--c-surface);
  --bs-pagination-disabled-border-color: var(--c-border);
  --bs-pagination-font-size: var(--t-callout);
  --bs-pagination-border-radius: var(--r-sm);
  gap: 0;
}
.pagination .page-link { min-width: 2.125rem; min-height: 2.125rem; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }

/* --- Badge --- */
.badge {
  --badge-fg: var(--c-text-2);
  --badge-bg: var(--c-neutral-bg);
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5rem;
  border-radius: var(--r-sm);
  font-size: var(--t-footnote);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  vertical-align: middle;
  color: var(--badge-fg) !important;
  background: var(--badge-bg) !important;
  border: 1px solid color-mix(in srgb, var(--badge-fg) 22%, transparent);
}
.badge.bg-primary, .badge.text-bg-primary, .badge.bg-info, .badge.text-bg-info, .badge.bg-primary-subtle, .badge.bg-info-subtle { --badge-fg: var(--c-accent); --badge-bg: var(--c-accent-bg); }
.badge.bg-success, .badge.text-bg-success, .badge.bg-success-subtle { --badge-fg: var(--c-success); --badge-bg: var(--c-success-bg); }
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning-subtle { --badge-fg: var(--c-warning); --badge-bg: var(--c-warning-bg); }
.badge.bg-danger, .badge.text-bg-danger, .badge.bg-danger-subtle { --badge-fg: var(--c-danger); --badge-bg: var(--c-danger-bg); }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-dark, .badge.text-bg-dark, .badge.bg-light, .badge.text-bg-light, .badge.bg-secondary-subtle { --badge-fg: var(--c-text-2); --badge-bg: var(--c-neutral-bg); }
.badge.rounded-pill { border-radius: var(--r-pill); }
/* Pallino di stato (per colori che arrivano dal DB: mai testo sopra il colore) */
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-dot { --badge-fg: var(--c-text); --badge-bg: var(--c-neutral-bg); }

.bg-primary:not(.badge):not(.btn) { background-color: var(--c-accent) !important; }
.bg-success:not(.badge):not(.btn) { background-color: var(--c-success) !important; }
.bg-danger:not(.badge):not(.btn)  { background-color: var(--c-danger) !important; }
.bg-warning:not(.badge):not(.btn) { background-color: var(--c-warning) !important; }
.bg-info:not(.badge):not(.btn)    { background-color: var(--c-accent) !important; }
.bg-secondary:not(.badge):not(.btn) { background-color: var(--c-text-3) !important; }
.border-primary-subtle   { border-color: color-mix(in srgb, var(--c-accent) 35%, transparent) !important; }
.border-success-subtle   { border-color: color-mix(in srgb, var(--c-success) 35%, transparent) !important; }
.border-danger-subtle    { border-color: color-mix(in srgb, var(--c-danger) 35%, transparent) !important; }
.border-warning-subtle   { border-color: color-mix(in srgb, var(--c-warning) 35%, transparent) !important; }
.border-secondary-subtle { border-color: var(--c-border) !important; }
.bg-primary-subtle:not(.badge) { background-color: var(--c-accent-bg) !important; }
.bg-success-subtle:not(.badge) { background-color: var(--c-success-bg) !important; }
.bg-danger-subtle:not(.badge)  { background-color: var(--c-danger-bg) !important; }
.bg-warning-subtle:not(.badge) { background-color: var(--c-warning-bg) !important; }
.bg-secondary-subtle:not(.badge) { background-color: var(--c-sunken) !important; }

/* Badge di scadenza (giorni): elemento firma del sistema */
.scad-badge, .badge-scaduta {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--t-footnote); font-weight: 650;
  border-radius: var(--r-sm);
  padding: .125rem .5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.scad-danger, .badge-scaduta { color: var(--c-danger);  background: var(--c-danger-bg);  border-color: color-mix(in srgb, var(--c-danger) 25%, transparent); }
.scad-warn   { color: var(--c-warning); background: var(--c-warning-bg); border-color: color-mix(in srgb, var(--c-warning) 25%, transparent); }
.scad-ok     { color: var(--c-success); background: var(--c-success-bg); border-color: color-mix(in srgb, var(--c-success) 25%, transparent); }
.scad-danger::before, .badge-scaduta::before { content: "\F33A"; font-family: bootstrap-icons; font-weight: 400; font-size: .85em; }
/* Ogni soglia ha anche una forma, non solo un colore */
.scad-warn::before { content: "\F293"; font-family: bootstrap-icons; font-weight: 400; font-size: .85em; }

/* --- Alert / banner --- */
.alert {
  --bs-alert-border-radius: var(--r-md);
  --bs-alert-padding-y: .75rem;
  --bs-alert-padding-x: 1rem;
  font-size: var(--t-body);
  border: 1px solid;
}
.alert-danger    { --bs-alert-bg: var(--c-danger-bg);  --bs-alert-border-color: color-mix(in srgb, var(--c-danger) 30%, transparent);  --bs-alert-color: var(--c-text); --bs-alert-link-color: var(--c-danger); }
.alert-success   { --bs-alert-bg: var(--c-success-bg); --bs-alert-border-color: color-mix(in srgb, var(--c-success) 30%, transparent); --bs-alert-color: var(--c-text); --bs-alert-link-color: var(--c-success); }
.alert-warning   { --bs-alert-bg: var(--c-warning-bg); --bs-alert-border-color: color-mix(in srgb, var(--c-warning) 30%, transparent); --bs-alert-color: var(--c-text); --bs-alert-link-color: var(--c-warning); }
.alert-info, .alert-primary { --bs-alert-bg: var(--c-accent-bg); --bs-alert-border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); --bs-alert-color: var(--c-text); --bs-alert-link-color: var(--c-accent); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-bg: var(--c-sunken); --bs-alert-border-color: var(--c-border); --bs-alert-color: var(--c-text); }
.alert-danger  > .bi:first-child, .alert-danger  .alert-icon { color: var(--c-danger); }
.alert-success > .bi:first-child, .alert-success .alert-icon { color: var(--c-success); }
.alert-warning > .bi:first-child, .alert-warning .alert-icon { color: var(--c-warning); }
.alert-info    > .bi:first-child, .alert-info    .alert-icon { color: var(--c-accent); }
.alert-heading { color: inherit; font-size: var(--t-title-3); }

/* --- Dropdown / menu --- */
.dropdown-menu {
  --bs-dropdown-bg: var(--c-raised);
  --bs-dropdown-color: var(--c-text);
  --bs-dropdown-border-color: var(--c-border);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--c-text);
  --bs-dropdown-link-hover-color: var(--c-text);
  --bs-dropdown-link-hover-bg: var(--c-hover);
  --bs-dropdown-link-active-color: var(--c-accent);
  --bs-dropdown-link-active-bg: var(--c-accent-bg);
  --bs-dropdown-divider-bg: var(--c-border);
  --bs-dropdown-header-color: var(--c-text-3);
  --bs-dropdown-font-size: var(--t-callout);
  --bs-dropdown-padding-y: .25rem;
  box-shadow: var(--e-3);
  min-width: 12rem;
}
.dropdown-item { border-radius: 4px; margin: 0 .25rem; width: calc(100% - .5rem); padding: .4375rem .625rem; display: flex; align-items: center; gap: .5rem; }
.dropdown-item .bi { color: var(--c-text-3); width: 1rem; text-align: center; }
.dropdown-item.text-danger, .dropdown-item.text-danger .bi { color: var(--c-danger) !important; }
.dropdown-item.text-danger:hover { background: var(--c-danger-bg); }
.dropdown-header { font-size: var(--t-eyebrow); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }

/* --- Modali e dialog --- */
.modal {
  --bs-modal-bg: var(--c-raised);
  --bs-modal-color: var(--c-text);
  --bs-modal-border-color: var(--c-border);
  --bs-modal-border-radius: var(--r-lg);
  --bs-modal-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-modal-header-border-color: var(--c-border);
  --bs-modal-footer-border-color: var(--c-border);
  --bs-modal-box-shadow: var(--e-3);
}
.modal-backdrop { --bs-backdrop-bg: #0E1014; --bs-backdrop-opacity: .45; }
.modal-content { box-shadow: var(--e-3); }
.modal-title { font-size: var(--t-title-2); font-weight: 600; }
.modal-header.bg-danger, .modal-header.bg-warning, .modal-header.bg-success, .modal-header.bg-primary {
  background: var(--c-surface) !important; color: var(--c-text) !important;
}
.modal-header.bg-danger .modal-title { color: var(--c-danger) !important; }
.modal-header.bg-danger .btn-close-white, .modal-header .btn-close-white { filter: none; }
[data-bs-theme="dark"] .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }
.modal-header.text-white { color: var(--c-text) !important; }
.modal-footer { gap: var(--s-2); }
.modal-footer > * { margin: 0; }

/* Dialog di conferma nativo (<dialog>, actions.js) */
.app-dialog {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-raised);
  color: var(--c-text);
  padding: 0;
  width: min(440px, calc(100vw - 2rem));
  box-shadow: var(--e-3);
}
.app-dialog::backdrop { background: var(--c-overlay); }
.app-dialog-body { padding: var(--s-5) var(--s-5) var(--s-4); display: flex; gap: var(--s-3); }
.app-dialog-icon { font-size: 1.375rem; line-height: 1; color: var(--c-accent); flex-shrink: 0; }
.app-dialog.is-danger .app-dialog-icon { color: var(--c-danger); }
.app-dialog-title { font-size: var(--t-title-2); font-weight: 600; margin: 0 0 var(--s-1); }
.app-dialog-text { color: var(--c-text-2); margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); }

/* --- Accordion / list group / tabs --- */
.accordion {
  --bs-accordion-bg: var(--c-surface);
  --bs-accordion-color: var(--c-text);
  --bs-accordion-border-color: var(--c-border);
  --bs-accordion-btn-color: var(--c-text);
  --bs-accordion-btn-bg: var(--c-surface);
  --bs-accordion-active-color: var(--c-text);
  --bs-accordion-active-bg: var(--c-sunken);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-radius: var(--r-md);
  --bs-accordion-inner-border-radius: calc(var(--r-md) - 1px);
}
.accordion-button { font-weight: 600; font-size: var(--t-body); }
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.4); }

.list-group {
  --bs-list-group-bg: var(--c-surface);
  --bs-list-group-color: var(--c-text);
  --bs-list-group-border-color: var(--c-border);
  --bs-list-group-action-hover-bg: var(--c-hover);
  --bs-list-group-action-hover-color: var(--c-text);
  --bs-list-group-active-bg: var(--c-accent-bg);
  --bs-list-group-active-color: var(--c-accent);
  --bs-list-group-active-border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
  --bs-list-group-border-radius: var(--r-md);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--c-border);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--c-text);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-link-color: var(--c-text-2);
  --bs-nav-link-hover-color: var(--c-text);
  --bs-nav-link-font-size: var(--t-callout);
  --bs-nav-link-font-weight: 550;
  gap: var(--s-1);
}
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .5rem .75rem; }
.nav-tabs .nav-link.active { border-bottom-color: var(--c-accent); }
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--c-accent-bg);
  --bs-nav-pills-link-active-color: var(--c-accent);
  --bs-nav-link-color: var(--c-text-2);
  --bs-nav-link-hover-color: var(--c-text);
  --bs-nav-pills-border-radius: var(--r-sm);
  --bs-nav-link-font-size: var(--t-callout);
  --bs-nav-link-font-weight: 550;
}

/* Segmented control (tab di impostazioni, filtri a scelta singola) */
.cat-tabs, .segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  padding: 3px;
  background: var(--c-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.cat-tab, .segmented > .btn, .segmented > a {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .375rem .875rem;
  min-height: 2rem;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--t-callout); font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}
.cat-tab i { font-size: 1rem; }
.cat-tab:hover, .segmented > a:hover { color: var(--c-text); }
.cat-tab.active, .cat-tab[aria-selected="true"], .segmented > .active {
  background: var(--c-surface); color: var(--c-text);
  box-shadow: var(--e-1);
}

/* Chip di filtro */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.filter-chips .btn-check + .btn {
  --bs-btn-bg: var(--c-surface); --bs-btn-color: var(--c-text-2); --bs-btn-border-color: var(--c-border);
  border-radius: var(--r-pill); min-height: 2rem; font-size: var(--t-footnote);
}
.filter-chips .btn-check:checked + .btn { background: var(--c-accent-bg); color: var(--c-accent); border-color: var(--c-accent); }

/* Toolbar filtri sopra le liste */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

/* --- Toast --- */
.toast-region {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 1090;
  display: flex; flex-direction: column; gap: var(--s-2);
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--c-raised);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  font-size: var(--t-body);
  animation: toast-in var(--motion-med) ease-out;
}
.app-toast.is-success { border-left-color: var(--c-success); }
.app-toast.is-danger  { border-left-color: var(--c-danger); }
.app-toast.is-warning { border-left-color: var(--c-warning); }
.app-toast .toast-icon { font-size: 1.0625rem; line-height: 1.3; color: var(--c-accent); }
.app-toast.is-success .toast-icon { color: var(--c-success); }
.app-toast.is-danger  .toast-icon { color: var(--c-danger); }
.app-toast.is-warning .toast-icon { color: var(--c-warning); }
.app-toast .toast-msg { flex: 1; padding-top: .0625rem; overflow-wrap: anywhere; }
.app-toast .btn-close { font-size: .65rem; margin-top: .25rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) { .toast-region { right: var(--s-3); left: var(--s-3); bottom: var(--s-3); width: auto; } }

/* --- Empty state --- */
.empty-state, .dash-empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--c-text-2);
}
.empty-state .bi, .dash-empty .bi { font-size: 1.75rem; display: block; margin-bottom: var(--s-2); color: var(--c-text-3); }
.empty-state-title { font-weight: 600; color: var(--c-text); margin-bottom: var(--s-1); }
.empty-state p, .dash-empty p { margin: 0; font-size: var(--t-callout); }

/* --- Spinner / loading --- */
.spinner-border { --bs-spinner-border-width: .15em; color: var(--c-accent); }
.progress { --bs-progress-bg: var(--c-sunken); --bs-progress-bar-bg: var(--c-accent); --bs-progress-border-radius: var(--r-pill); }

/* --- Tooltip / popover --- */
.tooltip { --bs-tooltip-bg: var(--c-text); --bs-tooltip-color: var(--c-surface); --bs-tooltip-font-size: var(--t-footnote); --bs-tooltip-border-radius: var(--r-sm); }
.popover { --bs-popover-bg: var(--c-raised); --bs-popover-border-color: var(--c-border); --bs-popover-body-color: var(--c-text); --bs-popover-header-bg: var(--c-sunken); }

/* --- Command palette (Ctrl+K) --- */
.cmdk {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 0;
  width: min(640px, calc(100vw - 2rem));
  margin-top: 12vh;
  /* Livello funzionale transitorio: materiale "regular" */
  background: color-mix(in srgb, var(--c-raised) 94%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  color: var(--c-text);
  box-shadow: var(--e-3);
}
.cmdk::backdrop { background: var(--c-overlay); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .cmdk { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-raised); }
}
.cmdk-input-wrap { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
.cmdk-input-wrap .bi { color: var(--c-text-3); font-size: 1.0625rem; }
.cmdk-input { flex: 1; border: 0; background: transparent; color: var(--c-text); font-size: 1rem; padding: var(--s-2) 0; outline: none; }
.cmdk-input:focus-visible { outline: none !important; }
.cmdk-list { list-style: none; margin: 0; padding: var(--s-2); max-height: min(420px, 60vh); overflow-y: auto; }
.cmdk-group { font-size: var(--t-eyebrow); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-3); padding: var(--s-2) var(--s-3) var(--s-1); }
.cmdk-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: .5rem var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-text); text-decoration: none; cursor: pointer;
}
.cmdk-item .bi { color: var(--c-text-3); width: 1.125rem; text-align: center; }
.cmdk-item-sub { color: var(--c-text-3); font-size: var(--t-footnote); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cmdk-item[aria-selected="true"] { background: var(--c-accent-bg); color: var(--c-text); }
.cmdk-item[aria-selected="true"] .bi { color: var(--c-accent); }
.cmdk-empty { padding: var(--s-5); text-align: center; color: var(--c-text-2); }
.cmdk-foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--c-border); color: var(--c-text-3); font-size: var(--t-footnote); }

/* ===========================
   6. PATTERN DI MODULO
   =========================== */

/* Dashboard */
.dash-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.dash-title  { font-size: var(--t-title-1); font-weight: 650; color: var(--c-text); line-height: 1.2; margin: 0; }
.dash-sub    { font-size: var(--t-callout); color: var(--c-text-2); margin: var(--s-1) 0 0; }
.dash-search { flex: 0 1 420px; min-width: 240px; width: 100%; }
.page-header-actions .dash-search { width: auto; flex: 1 1 340px; max-width: 440px; }

.welcome-card {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.welcome-title { font-size: var(--t-title-1); font-weight: 650; color: var(--c-text); line-height: 1.2; margin: 0; }
.welcome-name { color: inherit; }
.welcome-sub  { font-size: var(--t-callout); color: var(--c-text-2); margin: var(--s-1) 0 0; }

/* Barra delle scadenze (elemento firma) */
.due-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.due-strip-label { font-size: var(--t-eyebrow); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); margin-right: var(--s-1); }
.due-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .3125rem .75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--t-callout); font-weight: 550;
  text-decoration: none;
}
.due-pill:hover { border-color: var(--c-control); color: var(--c-text); }
.due-pill b { font-variant-numeric: tabular-nums; }
.due-pill.is-danger  b { color: var(--c-danger); }
.due-pill.is-warning b { color: var(--c-warning); }
.due-pill.is-ok      b { color: var(--c-success); }

.dash-widget .glass-card-header { font-size: var(--t-body); }
.dash-widget .glass-card-header > span > .bi:first-child { color: var(--c-text-3) !important; }
.dash-widget-link { font-size: var(--t-footnote); font-weight: 600; color: var(--c-accent); text-decoration: none; white-space: nowrap; }
.dash-widget-link:hover { text-decoration: underline; }
.dash-list { display: flex; flex-direction: column; }
.dash-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .625rem var(--s-4);
  border-bottom: 1px solid var(--c-border);
  color: inherit; text-decoration: none;
}
.dash-list-item:last-child { border-bottom: 0; }
a.dash-list-item:hover, .dash-list-link:hover { background: var(--c-hover); color: inherit; }
.dash-list-main { min-width: 0; }
.dash-list-title { font-size: var(--t-body); font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-sub { font-size: var(--t-footnote); color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-end { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.dash-list-date { font-size: var(--t-footnote); color: var(--c-text-2); }
/* Elenco record al posto della tabella su schermi stretti (portali): ul semantica,
   testo a capo invece che troncato, stato in alto a destra */
.record-list { list-style: none; margin: 0; padding: 0; }
.record-list .dash-list-item { align-items: flex-start; padding: var(--s-3) var(--s-4); }
.record-list .dash-list-main { flex: 1 1 auto; }
.record-list .dash-list-title,
.record-list .dash-list-sub { white-space: normal; overflow-wrap: anywhere; }
.record-list .dash-list-sub + .dash-list-sub { margin-top: 2px; }
.record-list .dash-list-end { flex-direction: column; align-items: flex-end; gap: var(--s-2); }
/* voci-link dentro <li> (o <li><form>): separatore tra le righe, non dopo l'ultima */
.record-list > li:not(:last-child) > .dash-list-item,
.record-list > li:not(:last-child) > form > .dash-list-item { border-bottom: 1px solid var(--c-border); }
.record-list .dash-list-link { align-items: center; }
.form-narrow { max-width: 420px; }
.prev-num {
  display: inline-block; font-size: var(--t-footnote); font-weight: 650;
  color: var(--c-accent); background: var(--c-accent-bg);
  border-radius: 4px; padding: 0 .375rem; margin-right: .375rem;
  font-variant-numeric: tabular-nums;
}

/* Griglia dei riquadri: si adatta allo spazio (1 colonna su laptop stretti, 3 su 1920) */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--s-4);
  align-items: start;
}
.widget-grid-full { grid-column: 1 / -1; }
.dash-search .form-control { min-width: 0; }

/* KPI (riquadro riepilogo) */
.dash-big-number { font-size: 2.5rem; font-weight: 650; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.dash-stat-card {
  flex: 1; min-width: 110px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  text-decoration: none; color: var(--c-text);
  background: var(--c-surface);
}
.dash-stat-card:hover { border-color: var(--c-control); color: var(--c-text); }
.dash-stat-value { font-size: 1.5rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-stat-label { font-size: var(--t-footnote); color: var(--c-text-2); margin-top: var(--s-1); display: flex; align-items: center; gap: .3rem; }

/* Pannello "Personalizza la home" */
#customizePanel { width: min(380px, 100vw); }
.customize-section-title { font-size: var(--t-eyebrow); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.customize-list { list-style: none; margin: 0; padding: var(--s-1) var(--s-3) var(--s-2); }
.customize-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  margin-bottom: var(--s-1);
  background: var(--c-surface);
}
.customize-item:hover { border-color: var(--c-control); }
.customize-ghost { opacity: .5; background: var(--c-accent-bg) !important; }
.customize-drag { cursor: grab; color: var(--c-text-3); font-size: 1rem; padding: 0 .125rem; }
.customize-icon { color: var(--c-text-3); }
.customize-label { flex: 1; font-size: var(--t-callout); }
.customize-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 0; border-radius: var(--r-sm);
  background: none; font-size: 1.125rem; cursor: pointer;
}
.customize-toggle:hover { background: var(--c-hover); }
.cust-add { color: var(--c-accent); }
.cust-remove { color: var(--c-danger); }
.customize-empty { color: var(--c-text-2); font-size: var(--t-callout); padding: var(--s-2); }

/* Archivio */
.arch-year { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
.arch-year:last-child { border-bottom: 0; }
.arch-year-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.arch-year-label { font-weight: 650; color: var(--c-text); font-size: var(--t-title-3); }
.arch-links { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.btn-arch { --bs-btn-font-size: var(--t-footnote); --bs-btn-padding-y: .125rem; --bs-btn-padding-x: .5rem; min-height: 1.875rem; }
.arch-count { display: inline-block; background: var(--c-accent-bg); color: var(--c-accent); border-radius: 4px; font-size: .6875rem; font-weight: 650; padding: 0 .3rem; margin-left: .25rem; }

/* Fogli ore */
.ore-table td, .ore-table th { text-align: center; padding: .375rem .25rem; height: auto; }
.ore-table td:first-child, .ore-table th:first-child { text-align: left; padding-left: .75rem; }
.ore-input { width: 4.5rem; text-align: center; display: block; margin: 0 auto; }
.ore-input[type="time"] { width: 7rem; }
.ore-row-domenica > td { background: var(--c-sunken) !important; color: var(--c-text-3) !important; }
.ore-row-domenica .form-control:disabled { background: transparent; border-color: var(--c-border); }

/* Stepper: fasi di un documento (RDA, DDT) */
.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-1); padding: 0; margin: 0 0 var(--s-5); counter-reset: none; }
.stepper-step { display: flex; align-items: center; gap: var(--s-2); color: var(--c-text-3); font-size: var(--t-callout); font-weight: 550; }
.stepper-step:not(:last-child)::after { content: ""; width: 1.5rem; height: 1px; background: var(--c-border); margin: 0 var(--s-1); }
.stepper-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--c-control); color: var(--c-text-3);
  font-size: var(--t-footnote); font-variant-numeric: tabular-nums; background: var(--c-surface);
}
.stepper-step.is-done { color: var(--c-text-2); }
.stepper-step.is-done .stepper-dot { background: var(--c-success-bg); border-color: var(--c-success); color: var(--c-success); }
.stepper-step.is-current { color: var(--c-text); font-weight: 650; }
.stepper-step.is-current .stepper-dot { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
@media (max-width: 575.98px) { .stepper-step:not(.is-current) .stepper-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Calendario ferie: "in attesa" riconoscibile senza colore (tratteggio + bordo tratteggiato) */
.fp-cal-cell { width: 1.25rem; height: 1.25rem; border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent); }
.fp-cal-legend { width: .875rem; height: .875rem; vertical-align: -1px; margin-right: .25rem; }
.fp-cal-pending {
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-surface) 70%, transparent) 0 2px, transparent 2px 5px);
  border: 1px dashed var(--c-text-2);
}

/* Righe info nelle card mobile */
.info-row { display: flex; gap: var(--s-2); color: var(--c-text-2); font-size: var(--t-callout); line-height: 1.7; }
.info-label { color: var(--c-text-3); flex-shrink: 0; }
.record-card { padding: var(--s-4); }
.record-card-title { font-weight: 600; color: var(--c-text); }
.record-card-meta { color: var(--c-text-2); font-size: var(--t-callout); }
.record-card-meta .info-label, .record-card .text-3 { color: var(--c-text-3); }

/* VIES */
@keyframes vies-flash { 0% { background-color: var(--c-accent-bg); } 100% { background-color: var(--c-surface); } }
.vies-filled { animation: vies-flash 1.6s ease-out forwards; }
.vies-msg { font-size: var(--t-footnote); }

/* Stato attivo/ritirato (cassoni ecc.) */
.row-state-active > td:first-child { box-shadow: inset 3px 0 0 var(--c-success); }
.row-state-closed > td { color: var(--c-text-2); }

/* Bootstrap-select (se usato) */
.bootstrap-select > .btn, .bootstrap-select .btn.dropdown-toggle { background: var(--c-surface) !important; border: 1px solid var(--c-control) !important; color: var(--c-text) !important; }
.bootstrap-select .filter-option-inner-inner { color: var(--c-text) !important; }

/* Offcanvas */
.offcanvas {
  --bs-offcanvas-bg: var(--c-raised);
  --bs-offcanvas-color: var(--c-text);
  --bs-offcanvas-border-color: var(--c-border);
}

.min-w-0 { min-width: 0; }

/* Classi della scala tipografica (sostituiscono i font-size inline) */
.text-footnote { font-size: var(--t-footnote) !important; }
.text-callout  { font-size: var(--t-callout) !important; }
.text-title-3  { font-size: var(--t-title-3) !important; }
.text-display  { font-size: 1.5rem !important; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-eyebrow); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.icon-lg { font-size: 1.375rem !important; line-height: 1; }
.icon-xl { font-size: 2rem !important; line-height: 1; }

/* Portali: nome del portale e barra inferiore su mobile (navigazione a una mano) */
.portal-name { font-size: var(--t-eyebrow); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; justify-content: space-around;
  padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--c-border);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .bottom-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-surface); }
}
.bottom-nav:empty { display: none !important; }
.bottom-nav-link {
  flex: 1 1 0; max-width: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 3rem;
  border-radius: var(--r-sm);
  color: var(--c-text-2); text-decoration: none;
  font-size: .6875rem; font-weight: 600;
}
.bottom-nav-link .bi { font-size: 1.25rem; }
.bottom-nav-link.active { color: var(--c-accent); }
.bottom-nav-link:hover { color: var(--c-text); }
@media (max-width: 991.98px) {
  body.portal .main-content { padding-bottom: 5.5rem; }
  body.portal .toast-region { bottom: 5rem; }
  body.has-tabbar #sidebarToggle { display: none !important; }
  body.has-tabbar .main-content { padding-top: var(--s-5); }
}

/* Pagine di accesso (login, OTP, registrazione, portali) e pagine di stato
   (errori, offline): niente sidebar, scroll normale. */
html.auth-html, html.auth-html body { overflow: auto; height: auto; min-height: 100%; }
.auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--c-canvas);
}
.auth-brand {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-7) var(--s-7) var(--s-6);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
}
.auth-brand-logo { max-width: 180px; height: auto; }
[data-bs-theme="dark"] .auth-brand-logo, [data-bs-theme="dark"] .auth-logo-sm { filter: brightness(1.25) saturate(1.1); }
.auth-brand-title { font-size: 1.75rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 var(--s-2); color: var(--c-text); }
.auth-brand-sub { color: var(--c-text-2); font-size: var(--t-body); margin: 0; max-width: 34ch; }
.auth-brand-foot { color: var(--c-text-3); font-size: var(--t-footnote); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo-sm { display: none; max-width: 120px; margin-bottom: var(--s-5); }
.auth-title { font-size: var(--t-title-1); font-weight: 650; margin: 0 0 var(--s-1); }
.auth-sub { color: var(--c-text-2); margin: 0 0 var(--s-5); }
.auth-card .form-control { min-height: 2.75rem; font-size: 1rem; }
.auth-card .input-group > .btn { min-height: 2.75rem; }
.auth-card .btn-lg, .auth-submit { width: 100%; min-height: 2.75rem; font-size: var(--t-body); }
.auth-note {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--c-sunken);
  color: var(--c-text-2);
  font-size: var(--t-callout);
  margin-bottom: var(--s-4);
}
.auth-note .bi { color: var(--c-text-3); margin-top: .125rem; }
.auth-caps { color: var(--c-warning); font-size: var(--t-footnote); margin-top: var(--s-1); display: flex; gap: .3rem; align-items: center; }
.auth-links { margin-top: var(--s-5); font-size: var(--t-callout); color: var(--c-text-2); text-align: center; }
.otp-input { font-family: var(--font-mono); font-size: 1.5rem !important; letter-spacing: .5em; text-align: center; }
@media (max-width: 899.98px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-logo-sm { display: block; }
  .auth-main { align-items: flex-start; padding-top: var(--s-7); }
}

.status-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--s-5); background: var(--c-canvas); }
.status-page.is-inline { min-height: 65vh; background: transparent; }
.status-card { max-width: 480px; text-align: center; }
.status-code { font-size: var(--t-footnote); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-3); }
.status-icon { font-size: 2.5rem; color: var(--c-text-3); display: block; margin-bottom: var(--s-3); }
.status-card h1 { margin: var(--s-2) 0; }
.status-card p { color: var(--c-text-2); }
.status-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); }

/* ===========================
   7. RESPONSIVE
   =========================== */
@media (max-width: 767.98px) {
  .page-header { align-items: stretch; flex-direction: column; margin-bottom: var(--s-4); }
  .page-header-actions { width: 100%; }
  .page-header-actions > form, .page-header-actions > .input-group, .page-header-actions .dash-search { flex: 1 1 100%; max-width: none; }
  .page-header-actions .input-group { flex-wrap: nowrap; width: 100%; }
  .page-header-actions .input-group > .form-control { flex: 1 1 auto; width: 1% !important; min-width: 0 !important; max-width: none !important; }
  .page-header-actions > .form-control, .page-header-actions > form > .form-control { width: 100% !important; min-width: 0 !important; }
  .dash-header, .welcome-card { flex-direction: column; align-items: stretch; }
  .dash-search { flex: none; min-width: 0; }
  .sticky-actions { margin: -4.25rem calc(-1 * var(--s-4)) var(--s-4); padding: var(--s-3) var(--s-4) var(--s-3) 4rem; top: -4.25rem; }
}
/* Bersagli touch: dipendono dal puntatore, non dalla larghezza
   (telefono in orizzontale e tablet compresi) */
@media (pointer: coarse) {
  .btn { min-height: 2.75rem; }
  .btn-sm { min-height: 2.375rem; }
  .btn-icon, .btn-icon-del { min-width: 2.375rem; min-height: 2.375rem; }
  .form-control, .form-select { min-height: 2.75rem; font-size: 1rem; } /* 16px: niente zoom su iOS */
  .pagination .page-link { min-width: 2.5rem; min-height: 2.5rem; }
  .sidebar-link { min-height: 2.75rem; }
  .sidebar-search { height: 2.75rem; }
  /* "Tutte le …" nelle card: 44 px di bersaglio senza alzare l'header (margine negativo) */
  .dash-widget-link {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding: 0 var(--s-2); margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-2));
  }
  /* Portali su touch: corpo 16 px e note 13 px (default iOS 17 pt), letti spesso all'aperto */
  body.portal { --t-body: 1rem; --t-footnote: .8125rem; }
}
/* Portali su iOS: la radice segue Dynamic Type (Impostazioni › Schermo e luminosità › Dimensioni testo);
   la scala è in rem, quindi tutto il testo segue. Solo touch: su macOS il body di sistema è 13 px. */
@media (pointer: coarse) {
  @supports (font: -apple-system-body) {
    html.portal-html { font: -apple-system-body; font-family: var(--font-sans); line-height: 1.45; }
  }
}
@media (max-width: 575.98px) {
  .form-footer { flex-direction: column-reverse; align-items: stretch; }
  .form-footer > * { width: 100%; margin: 0 !important; }
  .form-footer .btn { width: 100%; }
  .table td { white-space: normal; }
}

/* Stampa */
@media print {
  html, body { overflow: visible !important; height: auto !important; background: #fff !important; }
  .sidebar, .sidebar-mobile-toggle, .sidebar-overlay, .toast-region, .sticky-actions, .page-header-actions, .no-print { display: none !important; }
  .main-content { padding: 0 !important; overflow: visible !important; }
  .card, .glass-card { box-shadow: none !important; }
}