/* ============================================================
   Deloa Smart System — Material 3 Expressive (token + componenti)
   Colori del brand Deloa adattati ai ruoli-colore M3 di Google.
   Linkato da comparatore, login e admin per coerenza totale.
   ============================================================ */
:root{
  /* --- seed brand Deloa (verde foglia fresco) --- */
  --brand-green:#1f7a45; --brand-lime:#7fd49a; --brand-gold:#caa53d;
  --brand-cream:#f6faf6; --brand-black:#0d120e;

  /* --- M3 color roles (light) · verde Deloa fresco su bianco (pulito, professionale) --- */
  --md-primary:#1f7a45; --md-on-primary:#ffffff;
  --md-primary-container:#c7ecd0; --md-on-primary-container:#06371f;
  --md-secondary:#4b6353; --md-on-secondary:#ffffff;
  --md-secondary-container:#dcebe0; --md-on-secondary-container:#0c241a;
  --md-tertiary:#7c5f10; --md-on-tertiary:#ffffff;
  --md-tertiary-container:#f0e1b4; --md-on-tertiary-container:#2b2000;
  --md-error:#b3261e; --md-on-error:#ffffff; --md-error-container:#f9dedc; --md-on-error-container:#410002;

  /* --- stati pipeline (set canonico, colori solidi AA >=4.6:1 con testo bianco) ---
     usati sia come sfondo dei badge di stato sia come colore degli archi del donut. */
  --md-status-proposta:#6c776f; --md-status-attesa:#946f16; --md-status-firma:#b55c23;
  --md-status-sottoscritto:#2d844d; --md-status-attivazione:#237a44; --md-status-attivo:#1f7a45;
  --md-status-disdetto:#c0392b; --md-status-perso:#6f7266; --md-on-status:#ffffff;

  --md-surface:#f4f8f5; --md-surface-dim:#e3eae5; --md-surface-bright:#ffffff;
  --md-surface-container-lowest:#ffffff; --md-surface-container-low:#fbfdfb;
  --md-surface-container:#f0f5f1; --md-surface-container-high:#e9efea; --md-surface-container-highest:#e2e9e4;
  --md-on-surface:#191c19; --md-on-surface-variant:#414941;
  --md-outline:#717a72; --md-outline-variant:#d4ddd6;
  --md-inverse-surface:#2d322e; --md-inverse-on-surface:#eef2ee; --md-inverse-primary:#8fd6a3;

  /* --- superfici scure (nav/hero/splash): solo i token realmente usati (no dark-theme morto) --- */
  --md-surface-dark:#0d130f; --md-primary-dark:#8fd6a3;

  /* --- shape scale (Expressive: angoli morbidi, pillole sui controlli) --- */
  --md-r-xs:6px; --md-r-sm:10px; --md-r-md:12px; --md-r-lg:16px; --md-r-xl:24px; --md-r-full:999px;
  --md-r-pill:999px;   /* switch/avatar/controlli realmente circolari */

  /* --- elevation (Expressive: ombre morbide e leggermente calde, piu' profondita') --- */
  --md-e1:0 2px 8px rgba(17,40,25,.06), 0 1px 2px rgba(17,18,20,.04);
  --md-e2:0 4px 14px rgba(17,40,25,.07), 0 1px 3px rgba(17,18,20,.05);
  --md-e3:0 16px 40px rgba(17,40,25,.12), 0 3px 10px rgba(17,18,20,.06);

  /* --- motion (expressive) --- */
  --md-ease-emph:cubic-bezier(.2,0,0,1);
  --md-ease-emph-decel:cubic-bezier(.05,.7,.1,1);
  --md-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --md-dur-1:120ms; --md-dur-2:200ms; --md-dur-3:350ms;

  /* --- type families (Material: Roboto / Roboto Flex) --- */
  --md-font-brand:'Roboto Flex','Roboto',system-ui,sans-serif;   /* display/headline */
  --md-font:'Roboto','Roboto Flex',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}

/* ===== Type scale (Material) ===== */
.md-display-l{font-family:var(--md-font-brand);font-weight:600;font-size:44px;line-height:1.08;letter-spacing:-.5px}
.md-display-m{font-family:var(--md-font-brand);font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-.25px}
.md-headline-l{font-family:var(--md-font-brand);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.1px}
.md-headline-m{font-family:var(--md-font-brand);font-weight:600;font-size:23px;line-height:1.2;letter-spacing:0}
.md-title-l{font-family:var(--md-font);font-size:20px;font-weight:600;line-height:1.4}
.md-title-m{font-family:var(--md-font);font-size:16px;font-weight:600;letter-spacing:.1px}
.md-body-l{font-family:var(--md-font);font-size:16px;line-height:1.5}
.md-body-m{font-family:var(--md-font);font-size:14px;line-height:1.45}
.md-label-l{font-family:var(--md-font);font-size:14px;font-weight:600;letter-spacing:.1px}
.md-label-m{font-family:var(--md-font);font-size:12px;font-weight:600;letter-spacing:.4px}

/* ===== Bottoni M3 (radius controllato, profondità sul primario, press springy) ===== */
.md-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font-family:var(--md-font);font-size:14px;font-weight:600;letter-spacing:.15px;
  height:44px;padding:0 22px;border-radius:var(--md-r-md);overflow:hidden;
  transition:box-shadow var(--md-dur-2) var(--md-ease-emph), background var(--md-dur-2), transform var(--md-dur-1) var(--md-ease-spring);
  background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--md-e1)}
.md-btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--md-dur-2)}
.md-btn:hover::after{opacity:.06} .md-btn:focus-visible::after{opacity:.1} .md-btn:active::after{opacity:.12}
.md-btn:hover{box-shadow:var(--md-e2)} .md-btn:active{transform:scale(.985);box-shadow:var(--md-e1)}
.md-btn:focus-visible{outline:3px solid var(--md-primary-container);outline-offset:2px}
/* varianti non riempite: piatte, senza ombra a riposo/hover */
.md-btn.tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none}
.md-btn.outlined{background:transparent;color:var(--md-primary);border:1px solid var(--md-outline);box-shadow:none}
.md-btn.text{background:transparent;color:var(--md-primary);height:44px;padding:0 16px;box-shadow:none}
.md-btn.tonal:hover,.md-btn.outlined:hover,.md-btn.text:hover{box-shadow:none}
.md-btn.elevated{background:var(--md-surface-container-lowest);color:var(--md-primary);box-shadow:var(--md-e1);border:1px solid var(--md-outline-variant)}
.md-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.md-btn.full{width:100%}

/* ===== FAB ===== */
.md-fab{position:relative;display:inline-grid;place-items:center;width:56px;height:56px;border:0;cursor:pointer;
  border-radius:var(--md-r-lg);background:var(--md-primary-container);color:var(--md-on-primary-container);
  box-shadow:var(--md-e2);transition:transform var(--md-dur-1) var(--md-ease-spring),box-shadow var(--md-dur-2)}
.md-fab:active{transform:scale(.94)}

/* ===== Card M3 (filled/elevated/outlined) ===== */
.md-card{background:var(--md-surface-container-low);border-radius:var(--md-r-lg);padding:20px}
.md-card.elevated{background:var(--md-surface-container-lowest);border:1px solid var(--md-outline-variant);box-shadow:var(--md-e1)}
.md-card.outlined{background:var(--md-surface);border:1px solid var(--md-outline-variant)}

/* ===== Text field outlined M3 (perimetro chiaro + focus ring, look professionale) ===== */
.md-field{position:relative;display:flex;flex-direction:column}
.md-field>label{font-size:11.5px;font-weight:600;color:var(--md-on-surface-variant);margin:0 0 6px;letter-spacing:.3px;text-transform:uppercase}
.md-field>input,.md-field>select{font-family:var(--md-font);font-size:15px;color:var(--md-on-surface);
  background:var(--md-surface-container-lowest);border:1px solid var(--md-outline);
  border-radius:var(--md-r-sm);padding:11px 14px;outline:none;transition:border-color var(--md-dur-2),box-shadow var(--md-dur-2)}
.md-field>input:hover,.md-field>select:hover{border-color:var(--md-on-surface-variant)}
.md-field>input:focus,.md-field>select:focus{border-color:var(--md-primary);box-shadow:0 0 0 3px var(--md-primary-container)}
.md-field>input::placeholder{color:var(--md-on-surface-variant);opacity:.7}

/* ===== Segmented button ===== */
.md-segmented{display:inline-flex;border:1px solid var(--md-outline);border-radius:var(--md-r-full);overflow:hidden}
.md-segmented button{border:0;background:transparent;color:var(--md-on-surface-variant);font-family:var(--md-font);
  font-weight:600;font-size:13px;padding:9px 18px;cursor:pointer;transition:background var(--md-dur-2)}
.md-segmented button.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}

/* ===== Chip ===== */
.md-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--md-r-sm);
  font-size:12.5px;font-weight:600;background:var(--md-surface-container-high);color:var(--md-on-surface-variant);border:1px solid var(--md-outline-variant)}
.md-chip.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent}

/* ===== Dialog ===== */
.md-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(3px);z-index:70}
.md-dialog{background:var(--md-surface-container-high);border-radius:var(--md-r-xl);box-shadow:var(--md-e3)}

/* ===== Switch M3 ===== */
.md-switch{position:relative;width:52px;height:32px;border-radius:var(--md-r-pill);background:var(--md-surface-container-highest);
  border:2px solid var(--md-outline);cursor:pointer;transition:background var(--md-dur-2),border-color var(--md-dur-2)}
.md-switch::after{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;border-radius:var(--md-r-pill);
  background:var(--md-outline);transition:all var(--md-dur-2) var(--md-ease-spring)}
.md-switch.on{background:var(--md-primary);border-color:var(--md-primary)}
.md-switch.on::after{left:26px;top:6px;width:20px;height:20px;background:var(--md-on-primary)}

/* checkbox / radio nativi → colore primary M3 (niente più blu di sistema) */
input[type=checkbox],input[type=radio]{accent-color:var(--md-primary)}

/* autofill: mantiene il riempimento/colore MD3 (no velo azzurro di Chrome) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--md-surface-container-lowest) inset;
  -webkit-text-fill-color:var(--md-on-surface);
  caret-color:var(--md-on-surface);transition:background-color 99999s ease-in-out 0s}

/* utility state-layer per elementi custom */
.md-state{position:relative;overflow:hidden}
.md-state::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--md-dur-2);pointer-events:none}
.md-state:hover::after{opacity:.08} .md-state:active::after{opacity:.12}

/* ===== Progress indicators M3 ===== */
/* circolare indeterminato: arco primary che ruota e pulsa (expressive) */
.md-circular{width:52px;height:52px;border-radius:50%;
  background:conic-gradient(var(--md-primary) var(--a,90deg), transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
  animation:md-rot .9s linear infinite, md-arc 1.4s var(--md-ease-emph) infinite}
.md-circular.sm{width:24px;height:24px}
.md-circular.sm:after{}
@keyframes md-rot{to{transform:rotate(360deg)}}
@keyframes md-arc{0%{--a:40deg}50%{--a:230deg}100%{--a:40deg}}
@property --a{syntax:'<angle>';inherits:false;initial-value:90deg}
/* lineare M3 (determinato via >i width; indeterminato con .indet) */
.md-linear{position:relative;height:6px;border-radius:var(--md-r-full);background:var(--md-surface-container-highest);overflow:hidden}
.md-linear>i{display:block;height:100%;width:0;border-radius:var(--md-r-full);background:var(--md-primary);transition:width .45s var(--md-ease-emph)}
.md-linear.indet>i{width:40%;animation:md-lin 1.25s var(--md-ease-emph) infinite}
@keyframes md-lin{0%{margin-left:-40%}100%{margin-left:100%}}

/* ===== Overlay loader riusabile (scrim + card M3) ===== */
.md-loader-ov{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(20,24,10,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.md-loader-ov.on{display:flex;animation:md-fade .22s var(--md-ease-emph)}
@keyframes md-fade{from{opacity:0}to{opacity:1}}
.md-loader-card{width:min(360px,90vw);background:var(--md-surface-container-high);color:var(--md-on-surface);
  border-radius:var(--md-r-xl);box-shadow:var(--md-e3);padding:32px 28px 26px;text-align:center;
  animation:md-rise .3s var(--md-ease-emph-decel) both}
@keyframes md-rise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.md-loader-card .spin{display:grid;place-items:center;height:64px;margin-bottom:16px}
.md-loader-card h4{font-family:var(--md-font);font-size:20px;font-weight:600;line-height:1.3;margin:0 0 6px;letter-spacing:.1px}
.md-loader-card p{font-family:var(--md-font);font-size:13.5px;color:var(--md-on-surface-variant);margin:0 0 18px;min-height:20px;transition:opacity var(--md-dur-2)}
.md-loader-card .md-linear{margin-top:2px}

/* spunta di completamento (cerchio primary + check disegnato) */
.md-check{width:52px;height:52px;border-radius:50%;background:var(--md-primary);display:grid;place-items:center;
  animation:md-pop .35s var(--md-ease-spring) both}
.md-check svg{width:28px;height:28px;stroke:var(--md-on-primary);stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:md-draw .35s .12s var(--md-ease-emph) forwards}
@keyframes md-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes md-draw{to{stroke-dashoffset:0}}

/* ============================================================
   Consolidamento (audit grafico) — solo aggiunte/aggiustamenti sicuri:
   accessibilita' da tastiera, reduced-motion, gradini type-scale,
   stati campo, e componenti condivisi (tabella/tabs/callout/badge)
   che sostituiscono le reimplementazioni locali nelle pagine.
   ============================================================ */

/* ===== Focus-visible su TUTTI i controlli (WCAG 2.4.7) =====
   :where() ha specificita' 0 -> i ring dedicati (.md-btn:focus-visible) vincono. */
:where(a[href],area[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid var(--md-primary);outline-offset:2px}
.md-fab:focus-visible{outline:3px solid var(--md-primary);outline-offset:3px}

/* ===== Reduced motion (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .md-circular{animation:md-rot 1.4s linear infinite !important}   /* unico spin lento consentito */
}

/* ===== Gradini "small" della type scale (stop ai micro-testi <11px) ===== */
.md-title-s{font-family:var(--md-font);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.1px}
.md-body-s{font-family:var(--md-font);font-size:12px;line-height:1.4}
.md-label-s{font-family:var(--md-font);font-size:11px;font-weight:600;letter-spacing:.4px}

/* ===== md-field: stato errore + disabled + helper ===== */
.md-field.error>input,.md-field.error>select{border-color:var(--md-error)}
.md-field.error>input:focus,.md-field.error>select:focus{box-shadow:0 0 0 3px var(--md-error-container)}
.md-field .md-field-error{font-size:12px;color:var(--md-error);margin-top:6px}
.md-field>input:disabled,.md-field>select:disabled{opacity:.55;cursor:not-allowed}

/* ===== Card outlined: bordo leggibile (WCAG 1.4.11) =====
   quando il bordo e' l'unico confine su una superficie simile serve >=3:1. */
.md-card.outlined{border-color:var(--md-outline)}

/* ===== Tabella condivisa (sostituisce i vari stili tabella locali) ===== */
.md-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.md-table{width:100%;border-collapse:collapse;font-family:var(--md-font);font-variant-numeric:tabular-nums}
.md-table th{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--md-on-surface-variant);text-align:left;padding:10px 12px;border-bottom:1px solid var(--md-outline)}
.md-table td{font-size:13px;color:var(--md-on-surface);padding:10px 12px;border-bottom:1px solid var(--md-outline-variant)}
.md-table tbody tr:hover{background:var(--md-surface-container)}
.md-table tbody tr:last-child td{border-bottom:0}

/* ===== Tabs (indicatore underline) ===== */
.md-tabs{display:flex;gap:2px;border-bottom:1px solid var(--md-outline-variant)}
.md-tabs button{position:relative;border:0;background:transparent;cursor:pointer;font-family:var(--md-font);
  font-size:14px;font-weight:600;color:var(--md-on-surface-variant);padding:12px 16px;transition:color var(--md-dur-2)}
.md-tabs button:hover{color:var(--md-on-surface)}
.md-tabs button.on{color:var(--md-primary)}
.md-tabs button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:var(--md-primary)}

/* ===== Callout / avviso (accento brand: info/warn = oro tertiary, mai blu) ===== */
.md-callout{border-radius:var(--md-r-md);padding:12px 16px;font-size:13.5px;line-height:1.5;
  background:var(--md-surface-container);color:var(--md-on-surface-variant);border:1px solid var(--md-outline-variant)}
.md-callout.info,.md-callout.warn{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);border-color:transparent}
.md-callout.ok{background:var(--md-primary-container);color:var(--md-on-primary-container);border-color:transparent}
.md-callout.err{background:var(--md-error-container);color:var(--md-on-error-container);border-color:transparent}

/* ===== Badge / pill di stato (accento brand, niente blu/viola) ===== */
.md-badge{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 10px;border-radius:var(--md-r-full);
  font-size:11px;font-weight:700;letter-spacing:.2px;background:var(--md-surface-container-high);color:var(--md-on-surface-variant)}
.md-badge.success{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.md-badge.warning,.md-badge.info{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.md-badge.error{background:var(--md-error-container);color:var(--md-on-error-container)}
.md-badge.neutral{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}