/* ═══════════════════════════════════════════════════════════════
   Design Tokens VLSGest — riferimento stilistico Pipedrive
   Carico per primo (00- prefix) cosi' i valori sono disponibili
   a tutti i componenti CSS che seguono.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Colori brand & semantica ─── */
    --c-primary:        #2563eb;   /* Blu VLS attuale */
    --c-primary-hover:  #1d4ed8;
    --c-primary-light:  #dbeafe;
    --c-primary-bg:     #eff6ff;

    --c-success:        #16a34a;
    --c-success-light:  #dcfce7;
    --c-success-bg:     #f0fdf4;

    --c-warning:        #d97706;
    --c-warning-light:  #fed7aa;
    --c-warning-bg:     #fff7ed;

    --c-danger:         #dc2626;
    --c-danger-light:   #fecaca;
    --c-danger-bg:      #fef2f2;

    --c-info:           #0891b2;
    --c-info-light:     #cffafe;
    --c-info-bg:        #ecfeff;

    /* ─── Stati riga servizi (NON TOCCARE — funzionali) ─── */
    --row-no-fornitore: #fff7ed;
    --row-no-fornitore-bar: #f97316;
    --row-rifiutato:    #fee2e2;
    --row-rifiutato-bar:#dc2626;
    --row-assigned:     #dcfce7;
    --row-inviato:      #dbeafe;
    --row-confermato:   #ffffff;
    --row-annullato:    #f1f5f9;

    /* ─── Grays — superficie & testo ─── */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ─── Backgrounds ─── */
    --bg-app:        #f4f6f9;       /* sfondo pagina */
    --bg-card:       #ffffff;       /* card / contenitori */
    --bg-hover:      #f8fafc;       /* hover su righe/items */
    --bg-active:     #eff6ff;       /* item nav attivo */

    /* ─── Sidebar ─── */
    --sidebar-bg:        #161f2e;
    --sidebar-bg-hover:  #1e2d42;
    --sidebar-text:      #cbd5e1;
    --sidebar-text-active: #ffffff;
    --sidebar-w:         220px;
    --sidebar-w-collapsed: 60px;

    /* ─── Borders ─── */
    --border-subtle:    #f1f5f9;    /* divisori interni tabelle */
    --border-default:   #e2e8f0;    /* bordo card/input */
    --border-strong:    #cbd5e1;    /* bordo input focus */

    /* ─── Spacing scale (4px base) ─── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ─── Typography scale ─── */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --text-xs:   11px;     /* etichette / metadata */
    --text-sm:   12px;     /* tabelle dense, badge */
    --text-base: 13px;     /* body / form (size attuale gestionale) */
    --text-md:   14px;     /* bottoni, label form */
    --text-lg:   16px;     /* titoli card */
    --text-xl:   18px;     /* sezione */
    --text-2xl:  22px;     /* page title */
    --text-3xl:  28px;     /* hero KPI */

    --leading-tight:  1.2;
    --leading-normal: 1.45;
    --leading-loose:  1.6;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ─── Radius ─── */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ─── Shadows (subtle, stile Pipedrive/Docker) ─── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
    --shadow:    0 2px 6px rgba(15, 23, 42, .08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, .14);
    --shadow-xl: 0 24px 60px rgba(15, 23, 42, .20);

    /* ─── Transitions ─── */
    --t-fast:   120ms ease;
    --t-normal: 180ms ease;
    --t-slow:   260ms cubic-bezier(.4, 0, .2, 1);

    /* ─── Z-index scale ─── */
    --z-base:    1;
    --z-sticky:  100;
    --z-overlay: 1000;
    --z-modal:   1100;
    --z-toast:   1200;
    --z-popover: 1300;

    /* ─── Compat: alias legacy usati dai componenti/moduli storici ───
       Prima esistevano DUE :root (qui + style.css) con valori divergenti.
       Unificati qui: questa e' l'UNICA fonte di verita'. I nomi sotto sono
       alias dei token canonici dove i valori coincidono, valore grezzo dove
       storicamente differivano (preservato 1:1 col render attuale, in cui
       questo file vinceva la cascade sui duplicati). */
    --primary:         var(--c-primary);
    --primary-dk:      var(--c-primary-hover);
    --danger:          var(--c-danger);
    --success:         var(--c-success);
    --warning:         #a16207;            /* storicamente diverso da --c-warning */
    --info:            var(--c-info);
    --bg:              var(--bg-app);
    --white:           var(--bg-card);
    --text:            #1a2233;            /* nessun grigio token coincide esattamente */
    --text-light:      var(--gray-500);
    --border:          var(--border-default);
    --transition-fast: .15s ease;
    --transition:      .2s ease;
    --transition-slow: .28s cubic-bezier(.4, 0, .2, 1);

    /* Accento oro sidebar (era definito solo in style.css) */
    --sidebar-accent:       #d4a574;
    --sidebar-accent-light: #fbbf77;
    --sidebar-divider:      #1e293b;
}

/* ─── Utility classes minime (uso opzionale) ─── */
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }