/* ================================================================
   ZWD-BASE.CSS — SISTEMA DI DESIGN ZWDYNAMIC
   ZWD Living AG · Versione unificata
   File: wwwroot/css/zwd-base.css
   ================================================================

   PREMESSA
   --------
   Questo è l'UNICO file CSS di riferimento per tutto il sistema
   ZwDynamic. Ogni componente visivo ricorrente — pulsanti, tabelle,
   badge, valute, modali, toast, filtri — è definito qui UNA VOLTA
   SOLA e usato in tutte le pagine tramite classi del catalogo.

   REGOLA FONDAMENTALE
   -------------------
   Non scrivere MAI stili inline nelle pagine Razor (.cshtml).
   Non ridefinire MAI colori con valori hex nelle pagine.
   Se manca una classe → aggiungila qui, non nel file della pagina.

   FILE CSS NEL SISTEMA
   --------------------
   zwd-base.css       ← QUESTO FILE — tutto il catalogo componenti
   zwd-dashboard.css  ← card reparti, tab navigation, layout dashboard
   zwd-workspace.css  ← pagine di lavoro complesse (GestioneCommesse)

   File eliminati (assorbiti qui):
   zwd-modules.css    → rimpiazzato da sezione CATALOGO UI
   zwd-calc-righe.css → rimpiazzato da sezione CALC RIGHE MODAL

   ORDINE DI CARICAMENTO NELLE PAGINE
   -----------------------------------
   1. zwd-base.css        (via _LayoutZwD.cshtml, sempre)
   2. zwd-dashboard.css   (solo pagine con card reparti / tab)
   3. zwd-workspace.css   (solo GestioneCommesse e simili)

   INDICE SEZIONI
   --------------
   1.  VARIABILI             :root — colori, sfondi, tipografia, spaziature
   2.  VARIABILI STATO       --stato-* per righe, badge, bordi
   3.  RESET + BODY          box-sizing, font, sfondo globale
   4.  TIPOGRAFIA            h1–h6, p, label
   5.  LAYOUT                card, header, breadcrumb, container
   6.  TABELLA BOREALE       .zwd-table (stile aurora, per pagine speciali)
   7.  PULSANTI BASE         .btn, .btn-action
   8.  PULSANTI ZWD          .zwd-btn + varianti semantiche salva/elimina/ecc.
   9.  PULSANTI RIGA         .zwd-row-btn + .success/.warning/.danger
   10. CATALOGO UI           componenti riutilizzabili:
       · Badge stato          .zwd-stato-*
       · Badge categoria      .zwd-badge-label
       · Valute testo         .zwd-valuta-chf/eur · .zwd-chf/eur
       · Importi              .zwd-importo-positivo/negativo
       · Tabella dati         .zwd-data-table + .zwd-td-codice/data/numero
       · Tabella compatta     .zwd-data-table-compact
       · Righe per stato      .zwd-row-bozza/lok/sospeso/annullato
       · Badge stato (bordo)  .badge-stato .badge-attivo/bozza/lok/ecc.
       · Filtri               .zwd-filter-input/select · .zwd-filters-row
       · Statistiche          .zwd-stats-grid · .zwd-stat-card/value/label
       · Summary importi      .zwd-summary-grid · .zwd-summary-value.chf/eur
       · Modal                .zwd-modal-overlay · .zwd-modal · header/body/footer
       · Detail grid          .zwd-detail-grid · .zwd-detail-item/label/value
       · Toast                .zwd-toast.success/error/warning/info
       · Empty state          .zwd-empty-state
   11. ALIAS RETROCOMPAT.    .filter-box · .valuta-chf/eur · .row-* · .zwd-action-btn
   12. CALC RIGHE MODAL      #calcRigheModal
   13. FORM                  .form-control, .form-select, .zwd-input, .zwd-select
   14. MATRICE PERMESSI      .matrice-*
   15. GESTIONE PROGETTI     .zwd-data-table colonne, stats

   VARIABILI COLORE PRINCIPALI
   ---------------------------
   Sfondi:    --bg-primary · --bg-secondary · --bg-card · --bg-input
   Testo:     --text-primary · --text-muted · --text-dim
   Accenti:   --cyan-primary · --accent-blue · --accent-red · --accent-amber
   Verde:     --green-primary · --green-secondary
   Reparti:   --inst-l1/l2 · --prog-l1/l2 · --amm-l1/l2 · --acq-l1/l2 · ecc.
   Glow:      --glow-cyan · --glow-green · --glow-blue · --glow-red

   CONVENZIONI CLASSI
   ------------------
   .zwd-*        → componenti del catalogo (nuovi, da usare sempre)
   .btn-*        → Bootstrap override (mantenuti per compatibilità)
   .badge-*      → badge stato con bordo soft (workspace)
   .row-*        → righe tabella colorate per stato
   .valuta-*     → colore testo valuta inline
   --stato-*     → variabili CSS per sfondi/bordi stato

   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap');

:root {
    /* ============================================================
       SFONDI
       ============================================================ */
    --bg-primary: #0a0e1a; /* sfondo pagina (body) */
    --bg-secondary: #12182b; /* sfondo card principale */
    --bg-card: #1a2332; /* card, pannelli */
    --bg-input: #12182b; /* input, select */
    --bg-hover: #1e2a3a; /* hover righe, elementi interattivi */
    --bg-dark: #0a0e1a; /* alias --bg-primary per compatibilità */
    /* Alias per createbatch / zwd-modules */
    --grigio-scuro: #1a2332; /* → --bg-card */
    --grigio-medio: #4a5568; /* → bordi e testi muted vecchio stile */
    /* ============================================================
       BORDI
       ============================================================ */
    --border-width: 1px;
    --border-color: rgba(0, 212, 255, 0.2); /* cyan semitrasparente */
    --border-glow: rgba(0, 212, 255, 0.5);
    --border: rgba(0, 212, 255, 0.15); /* alias più leggero */
    --border-mid: rgba(0, 212, 255, 0.2); /* alias medio */
    --border-focus: #00d4ff; /* focus input */
    /* ============================================================
       COLORI TESTO
       ============================================================ */
    --text-primary: #ffffff;
    --text: #ffffff; /* alias */
    --text-secondary: #8b95a7;
    --text-muted: #8b95a7; /* alias */
    --text-dim: #5a6478;
    /* ============================================================
       ACCENTI / COLORI FUNZIONALI
       ============================================================ */
    --cyan-primary: #00d4ff;
    --cyan-secondary: #00a6cc;
    --accent-cyan: #00d4ff; /* alias */
    --accent-blue: #0099ff;
    --blue-primary: #0099ff; /* alias */
    --blu-accent: #0099ff; /* alias per createbatch/modules */

    --green-primary: #00ff88;
    --green-secondary: #00cc6a;
    --accent-green: #00ff88; /* alias */

    --orange-warning: #ff9500;
    --accent-amber: #ff9500; /* alias */

    --accent-red: #ef4444;
    --accent-purple: #6366f1;
    /* ============================================================
       TIPOGRAFIA
       ============================================================ */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-thin: 100;
    --font-light: 200;
    --font-regular: 300;
    --font-medium: 400;
    --font-semibold: 500;
    --font-bold: 600;
    /* ============================================================
       SPAZIATURE
       ============================================================ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    /* ============================================================
       PALETTE REPARTI — gerarchia cromatica L1→L4
       L1: Dashboard madre (pastello base)
       L2: Dashboard reparto (vivace)
       L3: Sottopagine (scuro/saturo)
       L4: Badge / elementi (tenue/chiaro)
       ============================================================ */
    /* Installazioni */
    --inst-l1: #FF6B6B;
    --inst-l2: #FF3D3D;
    --inst-l3: #CC1F1F;
    --inst-l4: #FFAAAA;
    /* Progettazione */
    --prog-l1: #D4A0A0;
    --prog-l2: #C47070;
    --prog-l3: #A03030;
    --prog-l4: #EDD0D0;
    /* Anagrafica */
    --anag-l1: #E87EA1;
    --anag-l2: #E8489A;
    --anag-l3: #B5186B;
    --anag-l4: #F9C0D8;
    /* Commerciale */
    --comm-l1: #FFB347;
    --comm-l2: #FF8C00;
    --comm-l3: #CC5500;
    --comm-l4: #FFD9A0;
    /* Logistica */
    --log-l1: #6BB5FF;
    --log-l2: #1E88FF;
    --log-l3: #0055CC;
    --log-l4: #B8D9FF;
    /* Amministrazione */
    --amm-l1: #A89FD4;
    --amm-l2: #7B6EC0;
    --amm-l3: #4A3A99;
    --amm-l4: #D4CFEE;
    /* Acquisti */
    --acq-l1: #6BFFB8;
    --acq-l2: #00E87A;
    --acq-l3: #00994D;
    --acq-l4: #AAFFD8;
    /* Sistema */
    --sis-l1: #C8F57A;
    --sis-l2: #A0E000;
    --sis-l3: #6A9900;
    --sis-l4: #E2FFBB;
}

/* ================================================================
   RESET BASE
   ================================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-width: 0.5px; /* linee sottili ZwDynamic */
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-regular);
    color: var(--text-primary);
    background: url('/images/Login.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    line-height: 1.6;
}


    /* Tutto il contenuto sopra l'overlay */
    body > * {
        position: relative;
        z-index: 1;
    }

/* ================================================================
   ELEMENTI BASE COMUNI
   ================================================================ */

/* Input e select standard */
input, select, textarea {
    font-family: var(--font-family);
    font-weight: var(--font-regular);
    background: var(--bg-input);
    border: var(--border-width) solid var(--border-mid);
    color: var(--text-primary);
    font-size: 13px;
}

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--border-focus);
    }

    input::placeholder, textarea::placeholder {
        color: var(--text-dim);
    }

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-mid);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-dim);
    }

/* ================================================================
   TABELLA DI MAPPATURA (commento di riferimento per sviluppatori)
   ================================================================
   
   VECCHIO → NUOVO
   ─────────────────────────────────────────────────────
   #0a0e27 / #0a0e1a    → var(--bg-primary)
   #0f172a / #12182b    → var(--bg-secondary)
   #1a2332 / #1e293b    → var(--bg-card)
   #1e2a3a / #334155    → var(--bg-hover)
   #e5e7eb / #ffffff    → var(--text-primary)
   #94a3b8 / #8b95a7    → var(--text-muted)
   #64748b / #5a6478    → var(--text-dim)
   #10b981 / #00ff88    → var(--accent-green) / var(--green-primary)
   #3b82f6 / #0099ff    → var(--accent-blue)  / var(--blue-primary)
   #00d4ff              → var(--cyan-primary)
   #f59e0b / #ff9500    → var(--accent-amber) / var(--orange-warning)
   #ef4444              → var(--accent-red)
   rgba(0,212,255,0.2)  → var(--border-color)
   
   --grigio-scuro       → var(--bg-card)
   --grigio-medio       → var(--grigio-medio) [mantenuto per compatibilità]
   --blu-accent         → var(--accent-blue)
   ================================================================ */

/* ================================================================
   EFFETTI BOREALI — identità visiva ZwDynamic
   Glow, animazioni, pulsanti outline con hover illuminato
   ================================================================ */

/* --- GLOW VARIABLES --- */
:root {
    --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.5);
    --glow-green: 0 0 20px rgba(0, 255, 136, 0.5);
    --glow-blue: 0 0 20px rgba(0, 153, 255, 0.5);
    --glow-red: 0 0 20px rgba(239, 68, 68, 0.5);
    --glow-amber: 0 0 20px rgba(255, 149, 0, 0.5);
    --glow-card: 0 0 40px rgba(0, 212, 255, 0.15), inset 0 0 30px rgba(0,0,0,0.5);
}

/* --- PULSANTI BOREALI --- */
/* Stile base: trasparente con bordo cyan + glow hover */
.zwd-btn {
    background: transparent;
    border: var(--border-width) solid var(--cyan-primary);
    color: var(--cyan-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

    .zwd-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--cyan-primary);
        transition: all 0.3s ease;
        transform: translate(-50%, -50%);
    }

    .zwd-btn:hover::before {
        width: 100%;
        height: 100%;
    }

    .zwd-btn:hover {
        color: var(--bg-primary);
        box-shadow: var(--glow-cyan);
        border-color: var(--cyan-primary);
        z-index: 1;
    }

    .zwd-btn span, .zwd-btn i {
        position: relative;
        z-index: 2;
    }

.zwd-btn-green {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

    .zwd-btn-green::before {
        background: var(--green-primary);
    }

    .zwd-btn-green:hover {
        box-shadow: var(--glow-green);
        color: var(--bg-primary);
    }

.zwd-btn-blue {
    border-color: var(--blue-primary);
    color: var(--blue-primary);
}

    .zwd-btn-blue::before {
        background: var(--blue-primary);
    }

    .zwd-btn-blue:hover {
        box-shadow: var(--glow-blue);
        color: var(--bg-primary);
    }

.zwd-btn-red {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

    .zwd-btn-red::before {
        background: var(--accent-red);
    }

    .zwd-btn-red:hover {
        box-shadow: var(--glow-red);
        color: #fff;
    }

.zwd-btn-amber {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}

    .zwd-btn-amber::before {
        background: var(--accent-amber);
    }

    .zwd-btn-amber:hover {
        box-shadow: var(--glow-amber);
        color: var(--bg-primary);
    }

.zwd-btn:disabled, .zwd-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- CARD BOREALE --- */
.zwd-card {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    transition: all 0.3s ease;
}

    .zwd-card:hover {
        border-color: var(--border-glow);
        box-shadow: var(--glow-card);
        transform: translateY(-2px);
    }

/* --- INPUT BOREALE --- */
.zwd-input, .zwd-select, .zwd-textarea {
    width: 100%;
    background: var(--bg-input);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-regular);
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .zwd-input:focus, .zwd-select:focus, .zwd-textarea:focus {
        outline: none;
        border-color: var(--cyan-primary);
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.25);
    }

.zwd-textarea {
    resize: vertical;
    min-height: 80px;
}

.zwd-select option {
    background: var(--bg-secondary);
}

/* --- BADGE BOREALI --- */
.zwd-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zwd-badge-cyan {
    background: rgba(0,212,255,0.15);
    color: var(--cyan-primary);
    border: 1px solid rgba(0,212,255,0.3);
}

.zwd-badge-green {
    background: rgba(0,255,136,0.15);
    color: var(--green-primary);
    border: 1px solid rgba(0,255,136,0.3);
}

.zwd-badge-amber {
    background: rgba(255,149,0,0.15);
    color: var(--accent-amber);
    border: 1px solid rgba(255,149,0,0.3);
}

.zwd-badge-red {
    background: rgba(239,68,68,0.15);
    color: var(--accent-red);
    border: 1px solid rgba(239,68,68,0.3);
}

.zwd-badge-blue {
    background: rgba(0,153,255,0.15);
    color: var(--blue-primary);
    border: 1px solid rgba(0,153,255,0.3);
}

/* --- LINEA ANIMATA BOREALE (header, separatori) --- */
.zwd-glow-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-primary), transparent);
    animation: zwd-glow-line 3s ease-in-out infinite;
}

@keyframes zwd-glow-line {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* --- TESTI COLORATI --- */
.text-cyan {
    color: var(--cyan-primary) !important;
}

.text-green {
    color: var(--green-primary) !important;
}

.text-blue {
    color: var(--blue-primary) !important;
}

.text-amber {
    color: var(--accent-amber) !important;
}

.text-red {
    color: var(--accent-red) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-dim {
    color: var(--text-dim) !important;
}

/* --- CODICI MONOSPACE --- */
.zwd-code {
    font-family: 'Courier New', monospace;
    color: var(--cyan-primary);
    font-weight: var(--font-thin);
    letter-spacing: 2px;
}

/* ================================================================
   SFONDI FUMÈ — vetro scuro semitrasparente ZwDynamic
   ================================================================ */
:root {
    --fumè-dark: rgba(8, 12, 20, 0.75); /* sfondo card principale */
    --fumè-medium: rgba(10, 15, 25, 0.78); /* sfondo corpo card */
    --fumè-light: rgba(15, 22, 35, 0.78); /* sfondo righe alternate */
    --fumè-hover: rgba(0, 212, 255, 0.05); /* hover riga tabella */
    --fumè-hover2: rgba(0, 212, 255, 0.08); /* hover più marcato */
    --fumè-input: rgba(8, 12, 20, 0.75); /* sfondo input */
    --fumè-cyan: rgba(0, 212, 255, 0.1); /* sfondo badge/codice cyan */
    --fumè-green: rgba(0, 255, 136, 0.1); /* sfondo badge green */
    --fumè-amber: rgba(255,149, 0, 0.1); /* sfondo badge amber */
    --fumè-red: rgba(239, 68, 68, 0.1); /* sfondo badge red */
}

/* Classi sfondo fumè */
.fumè {
    background: var(--fumè-dark) !important;
}

.fumè-medium {
    background: var(--fumè-medium) !important;
}

.fumè-input {
    background: var(--fumè-input) !important;
}

.fumè-cyan {
    background: var(--fumè-cyan) !important;
}

.fumè-green {
    background: var(--fumè-green) !important;
}

/* Panel / sezione con bordo cyan e sfondo fumè */
.zwd-panel {
    background: var(--fumè-medium);
    border: var(--border-width) solid var(--border-color);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.08), inset 0 0 30px rgba(0, 0, 0, 0.4);
}

.zwd-panel-header {
    background: var(--fumè-dark);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ================================================================
   BORDI CROMATICI — linee colorate e animate
   ================================================================ */

/* Divisore statico degradante */
.zwd-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: var(--spacing-md) 0;
}

/* Linea cyan animata (pulsa) */
.zwd-glow-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-primary), transparent);
    animation: zwd-glow-line 3s ease-in-out infinite;
}

@keyframes zwd-glow-line {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Linea che scorre da sinistra a destra */
.zwd-scan-line {
    height: 1px;
    position: relative;
    overflow: hidden;
    background: var(--border-color);
}

    .zwd-scan-line::after {
        content: '';
        position: absolute;
        top: 0;
        left: -30%;
        width: 30%;
        height: 100%;
        background: linear-gradient(90deg, transparent, var(--cyan-primary), transparent);
        animation: zwd-scan 2.5s linear infinite;
    }

@keyframes zwd-scan {
    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }
}

/* Bordo cromatico che cambia colore (arcobaleno boreale) */
.zwd-border-aurora {
    border: 1px solid transparent;
    animation: zwd-aurora-border 6s linear infinite;
}

@keyframes zwd-aurora-border {
    0% {
        border-color: rgba(0, 212, 255, 0.6);
    }
    /* cyan */
    25% {
        border-color: rgba(0, 255, 136, 0.6);
    }
    /* verde */
    50% {
        border-color: rgba(153, 69, 255, 0.6);
    }
    /* viola */
    75% {
        border-color: rgba(0, 153, 255, 0.6);
    }
    /* blu */
    100% {
        border-color: rgba(0, 212, 255, 0.6);
    }
    /* cyan */
}

/* Pulse glow sul bordo — solo cyan */
.zwd-pulse {
    animation: zwd-pulse-glow 2s ease-in-out infinite;
}

@keyframes zwd-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.5);
    }
}

/* ================================================================
   TABELLA BOREALE — fumè + bordi cromatici sottili
   ================================================================ */
.zwd-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fumè-medium);
}

    .zwd-table thead {
        background: var(--fumè-dark);
    }

        .zwd-table thead th {
            padding: var(--spacing-sm);
            font-size: 10px;
            font-weight: var(--font-semibold);
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-primary);
            border-bottom: var(--border-width) solid var(--cyan-primary);
        }

    .zwd-table tbody td {
        padding: var(--spacing-sm);
        font-size: 12px;
        color: var(--text-primary);
        font-weight: var(--font-light);
        border-bottom: var(--border-width) solid rgba(0, 212, 255, 0.1);
        background: var(--fumè-medium);
    }

    .zwd-table tbody tr:hover td {
        background: var(--fumè-hover2) !important;
    }


/* ================================================================
   TEMA GLOBALE ZWD — migrato da stile.css
   ================================================================ */

/* =================================================================
   ZWD LIVING AG - ZWDYNAMIC.1 - DARK GLOW THEME
   VERSIONE CON SFONDI QUASI OPACHI (0.98-0.99)
   ================================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: var(--font-light);
    color: var(--text-primary);
    background: url('/images/Login.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-thin);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.875rem;
}

h6 {
    font-size: 0.75rem;
}

p, span, div, li, td, th {
    color: var(--text-primary);
    font-weight: var(--font-light);
}

.text-muted {
    color: var(--text-secondary) !important;
}

.text-cyan {
    color: var(--cyan-primary) !important;
}

.zwg-header {
    background: rgba(8, 12, 20, 0.75) !important;
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md) 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

    .zwg-header .brand-title {
        font-size: 1.25rem;
        font-weight: var(--font-thin);
        letter-spacing: 4px;
        color: var(--text-primary);
        text-transform: uppercase;
    }

    .zwg-header .brand-subtitle {
        font-size: 0.75rem;
        font-weight: var(--font-light);
        letter-spacing: 2px;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

.card, .project-card {
    background: rgba(10, 15, 25, 0.78) !important;
    border: var(--border-width) solid var(--border-color);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), inset 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--cyan-primary), transparent);
        animation: glow-line 3s ease-in-out infinite;
    }

@keyframes glow-line {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.card-header {
    background: rgba(8, 12, 20, 0.75) !important;
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    color: var(--text-primary) !important;
}

.card-body {
    padding: var(--spacing-md);
    background: rgba(10, 15, 25, 0.78) !important;
}

.card-footer {
    background: rgba(8, 12, 20, 0.75) !important;
    border-top: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    color: var(--text-secondary) !important;
}

.area-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(8, 12, 20, 0.75) !important;
    border: var(--border-width) solid var(--border-color);
}

.area-code {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    color: var(--cyan-primary);
    font-weight: var(--font-thin);
    letter-spacing: 2px;
}

.area-name {
    font-size: 1.5rem;
    font-weight: var(--font-thin);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.area-info {
    display: flex;
    gap: var(--spacing-xl);
    margin-left: auto;
}

.area-info-item {
    text-align: center;
}

.area-info-label {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.area-info-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: var(--font-light);
}

/* BTN BASE — neutro, override possibile da pagine figlie */
.btn, .btn-action {
    background: rgba(8,12,20,0.5);
    border: 0.5px solid rgba(0,212,255,0.2);
    color: rgba(255,255,255,0.65);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.625rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .btn:hover, .btn-action:hover {
        background: rgba(0,212,255,0.05);
        border-color: rgba(0,212,255,0.35);
        color: rgba(255,255,255,0.9);
    }

    .btn span {
        position: relative;
    }

.btn-success {
    border-color: rgba(107,255,184,0.3);
    color: rgba(107,255,184,0.8);
}

    .btn-success:hover {
        background: rgba(107,255,184,0.06);
        border-color: rgba(107,255,184,0.5);
        color: #6BFFB8;
    }

.btn-danger {
    border-color: rgba(239,68,68,0.3);
    color: rgba(239,68,68,0.7);
}

    .btn-danger:hover {
        background: rgba(239,68,68,0.06);
        border-color: rgba(239,68,68,0.5);
        color: #ef4444;
    }

.btn-primary {
    border-color: rgba(0,212,255,0.3);
    color: rgba(0,212,255,0.8);
    background: rgba(8,12,20,0.5);
}

    .btn-primary:hover {
        background: rgba(0,212,255,0.06);
        border-color: rgba(0,212,255,0.5);
        color: #00d4ff;
    }

/* BTN DASHBOARD — fill effect, solo dentro .zwd-dashboard */
.zwd-dashboard .btn, .zwd-dashboard .btn-action {
    border: var(--border-width) solid var(--cyan-primary);
    color: var(--cyan-primary);
    background: transparent;
    position: relative;
    overflow: hidden;
}

    .zwd-dashboard .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--cyan-primary);
        transition: all 0.3s ease;
        transform: translate(-50%, -50%);
    }

    .zwd-dashboard .btn:hover::before {
        width: 100%;
        height: 100%;
    }

    .zwd-dashboard .btn:hover {
        color: var(--bg-primary);
        box-shadow: 0 0 20px var(--cyan-primary);
    }

.zwd-dashboard .btn-success {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

    .zwd-dashboard .btn-success::before {
        background: var(--green-primary);
    }

    .zwd-dashboard .btn-success:hover {
        box-shadow: 0 0 20px var(--green-primary);
    }

.zwd-dashboard .btn-primary {
    background: var(--cyan-primary);
    border-color: var(--cyan-primary);
    color: var(--bg-primary);
}

    .zwd-dashboard .btn-primary:hover {
        background: var(--cyan-secondary);
    }

.btn-header {
    padding: 6px 12px;
    font-size: 0.625rem;
    background: transparent;
    color: var(--cyan-primary);
    border: 1px solid var(--cyan-primary);
}

.btn-outline-primary {
    color: var(--cyan-primary) !important;
    border-color: var(--cyan-primary) !important;
    background: transparent !important;
}

    .btn-outline-primary:hover {
        background: var(--cyan-primary) !important;
        color: var(--bg-primary) !important;
    }

.btn-outline-secondary {
    color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
    background: transparent !important;
}

    .btn-outline-secondary:hover {
        background: var(--text-secondary) !important;
        color: var(--bg-primary) !important;
    }

.btn-outline-danger {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
    background: transparent !important;
}

    .btn-outline-danger:hover {
        background: #ef4444 !important;
        color: white !important;
    }


.order-item {
    background: rgba(10, 15, 25, 0.78) !important;
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    position: relative;
    transition: all 0.3s ease;
}

    .order-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: all 0.3s ease;
    }

    .order-item.active::before, .order-item:hover::before {
        background: var(--cyan-primary);
        box-shadow: 0 0 10px var(--cyan-primary);
    }

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.order-code {
    background: rgba(0, 212, 255, 0.1);
    border: var(--border-width) solid var(--cyan-primary);
    color: var(--cyan-primary);
    padding: 2px 8px;
    font-size: 0.625rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.order-status {
    padding: 2px 8px;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--font-medium);
}

.status-preparazione {
    background: var(--green-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 10px var(--green-primary);
}

.status-modifica {
    border: var(--border-width) solid var(--cyan-primary);
    color: var(--cyan-primary);
    background: transparent;
}

.order-title {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-light);
}

.order-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(10, 15, 25, 0.78) !important;
}

    .table thead {
        background: rgba(8, 12, 20, 0.90) !important;
    }

        .table thead th {
            padding: var(--spacing-sm);
            text-align: left;
            font-size: 0.625rem;
            font-weight: var(--font-medium);
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 2px;
            border-bottom: var(--border-width) solid var(--cyan-primary);
            background: rgba(8, 12, 20, 0.90) !important;
        }

    .table tbody td {
        padding: var(--spacing-sm);
        font-size: 0.75rem;
        color: var(--text-primary);
        border-bottom: var(--border-width) solid rgba(0, 212, 255, 0.1);
        font-weight: var(--font-light);
        background: rgba(10, 15, 25, 0.78) !important;
    }

    .table tbody tr {
        transition: all 0.3s ease;
    }

        .table tbody tr:hover {
            background: rgba(0, 212, 255, 0.05);
        }

            .table tbody tr:hover td {
                background: rgba(0, 212, 255, 0.08) !important;
            }

    .table tfoot {
        background: rgba(8, 12, 20, 0.90) !important;
    }

        .table tfoot td, .table tfoot th {
            background: rgba(8, 12, 20, 0.90) !important;
            color: var(--text-primary) !important;
            font-weight: var(--font-medium);
        }

.table-dark {
    background: rgba(8, 12, 20, 0.90) !important;
}

    .table-dark th, .table-dark td {
        background: rgba(8, 12, 20, 0.90) !important;
        color: var(--text-primary) !important;
    }

.table-light td, .table-light th {
    background: rgba(30, 42, 58, 0.78) !important;
    color: var(--text-primary) !important;
}

.table-secondary td, .table-secondary th {
    background: rgba(40, 52, 68, 0.78) !important;
    color: var(--text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(15, 22, 35, 0.78) !important;
}

.table-hover > tbody > tr:hover > td {
    background: rgba(0, 212, 255, 0.08) !important;
}

.form-control, .form-select, input, select, textarea {
    background: rgba(8, 12, 20, 0.75) !important;
    border: var(--border-width) solid var(--border-color);
    color: var(--text-primary) !important;
    padding: var(--spacing-sm);
    font-size: 0.875rem;
    font-weight: var(--font-light);
    transition: all 0.3s ease;
}

    .form-control:focus, .form-select:focus {
        outline: none;
        border-color: var(--cyan-primary);
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
        background: rgba(10, 15, 25, 0.78) !important;
    }

.form-label {
    font-size: 0.625rem;
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.form-check-label {
    color: var(--text-primary) !important;
}

.search-input {
    background: rgba(8, 12, 20, 0.75) !important;
    border: var(--border-width) solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: var(--spacing-sm) !important;
    font-size: 0.875rem !important;
    font-weight: var(--font-light) !important;
    transition: all 0.3s ease !important;
}

    .search-input:focus {
        outline: none !important;
        border-color: var(--cyan-primary) !important;
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
        background: rgba(10, 15, 25, 0.78) !important;
    }

    .search-input::placeholder {
        color: var(--text-secondary) !important;
        opacity: 0.6 !important;
    }

.badge {
    padding: 4px 8px;
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
}

.badge-success, .badge-preparazione {
    background: var(--green-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 10px var(--green-primary);
}

.badge-info {
    background: var(--cyan-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 10px var(--cyan-primary);
}

.badge-warning {
    background: var(--orange-warning);
    color: var(--bg-primary);
    box-shadow: 0 0 10px var(--orange-warning);
}

.status-line {
    width: 4px;
    height: 100%;
    background: var(--green-primary);
    box-shadow: 0 0 15px var(--green-primary);
    position: absolute;
    left: 0;
    top: 0;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: var(--spacing-md) 0;
}

.nav-tabs {
    border-bottom: var(--border-width) solid var(--border-color);
    display: flex;
    gap: 2px;
}

.nav-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

    .nav-tab::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: transparent;
        transition: all 0.3s ease;
    }

    .nav-tab:hover {
        color: #ffffff !important;
    }

    .nav-tab.active {
        color: var(--cyan-primary);
    }

        .nav-tab.active::after {
            background: var(--cyan-primary);
            box-shadow: 0 0 10px var(--cyan-primary);
        }

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
    }
}

.pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--bg-card);
    }

.text-green {
    color: var(--green-primary) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.bg-dark {
    background: var(--bg-primary) !important;
}

.bg-card {
    background: var(--bg-card) !important;
}

.border-cyan {
    border-color: var(--cyan-primary) !important;
}

.border-green {
    border-color: var(--green-primary) !important;
}

.glow-cyan {
    box-shadow: 0 0 20px var(--cyan-primary) !important;
}

.glow-green {
    box-shadow: 0 0 20px var(--green-primary) !important;
}

@media (max-width: 768px) {
    html {
        font-size: 12px;
    }

    .area-header {
        flex-direction: column;
        text-align: center;
    }

    .area-info {
        margin: var(--spacing-md) 0 0 0;
    }

    .btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.5rem;
    }
}

.container, .container-fluid {
    background: transparent !important;
}

.search-section, .tab-content > .row {
    background: rgba(8, 12, 20, 0.75) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    padding: 20px;
    margin-bottom: 20px;
}

.contact-item, .card, .panel, .box {
    background: rgba(10, 15, 25, 0.78) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px);
}

    .contact-item .contact-item, .card .card, .search-section .contact-item {
        background: rgba(15, 20, 32, 0.78) !important;
        border: 1px solid rgba(0, 212, 255, 0.3) !important;
    }

    .contact-item:hover, .card:hover {
        background: rgba(20, 28, 42, 0.78) !important;
        border-color: rgba(0, 212, 255, 0.5) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px);
    }

.search-section {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.contact-item {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.tab-content {
    background: rgba(5, 8, 15, 0.75) !important;
    padding: 20px;
    border: 1px solid rgba(0, 212, 255, 0.05) !important;
}

body:has(.logo-main) .search-section:first-of-type {
    background: rgba(8, 12, 20, 0.75) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 212, 255, 0.1), inset 0 0 40px rgba(0, 212, 255, 0.05) !important;
}

.logo-main {
    filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.5));
    animation: pulse-glow-logo 3s ease-in-out infinite;
}

@keyframes pulse-glow-logo {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(0, 212, 255, 0.6));
    }
}

.quick-access-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 140px;
    padding: 20px;
    background: rgba(10, 15, 25, 0.78) !important;
    border: 1px solid rgba(0, 212, 255, 0.2);
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(5px);
}

    .quick-access-box i {
        font-size: 2.5rem !important;
        margin-bottom: 12px !important;
        transition: all 0.3s ease;
    }

    .quick-access-box span {
        color: rgba(255, 255, 255, 0.9) !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.8rem;
        font-weight: 300;
        text-align: center;
    }

    .quick-access-box:nth-of-type(1) i {
        color: #00d4ff !important;
    }

    .quick-access-box:nth-of-type(2) i {
        color: #9945ff !important;
    }

    .quick-access-box:nth-of-type(3) i {
        color: #00ff88 !important;
    }

    .quick-access-box:hover {
        transform: translateY(-5px);
        background: rgba(20, 28, 42, 0.78) !important;
        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    }

    .quick-access-box:nth-of-type(1):hover {
        border-color: #00d4ff;
        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
    }

    .quick-access-box:nth-of-type(2):hover {
        border-color: #9945ff;
        box-shadow: 0 10px 30px rgba(153, 69, 255, 0.4);
    }

    .quick-access-box:nth-of-type(3):hover {
        border-color: #00ff88;
        box-shadow: 0 10px 30px rgba(0, 255, 136, 0.4);
    }

    .quick-access-box:hover i {
        transform: scale(1.15);
        filter: drop-shadow(0 0 15px currentColor);
    }

@media (max-width: 768px) {
    .d-flex.gap-4 {
        flex-direction: column;
        align-items: center;
    }

    .quick-access-box {
        width: 220px;
    }
}

.navigation-arrows button, button[onclick*="history"] {
    background: transparent !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--cyan-primary) !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .navigation-arrows button:hover, button[onclick*="history"]:hover {
        background: rgba(0, 212, 255, 0.1) !important;
        border-color: var(--cyan-primary) !important;
        color: var(--cyan-primary) !important;
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
    }

.navigation-arrows .fas {
    color: var(--cyan-primary) !important;
}

body:has(.logo-main) .nav-bar-link, body:has(.logo-main) div:has(.nav-bar-link) {
    display: none !important;
}

.logo-main {
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

img[alt="ZWD Living AG"] {
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    object-fit: contain;
}

@media (max-width: 768px) {
    .logo-main, img[alt="ZWD Living AG"] {
        max-width: 150px !important;
    }
}

.alert-danger {
    background: rgba(40, 10, 10, 0.99) !important;
    border: 1px solid rgba(255, 69, 69, 0.5) !important;
    color: #ff9999 !important;
}

.alert-info {
    background: rgba(10, 24, 40, 0.99) !important;
    border: 1px solid rgba(0, 212, 255, 0.5) !important;
    color: #99ddff !important;
}

.alert-warning {
    background: rgba(40, 24, 10, 0.99) !important;
    border: 1px solid rgba(255, 204, 0, 0.5) !important;
    color: #ffcc66 !important;
}

.alert-success {
    background: rgba(10, 40, 24, 0.99) !important;
    border: 1px solid rgba(0, 255, 136, 0.5) !important;
    color: #66ff99 !important;
}

input {
    color: white !important;
}

.card .card-header {
    color: white !important;
}

/* =================================================================
   FIX CONTABILITÀ - LIST GROUP, BREADCRUMB, MODAL, CODE
   ================================================================= */

.list-group-item {
    background: rgba(10, 15, 25, 0.78) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

    .list-group-item:hover {
        background: rgba(0, 212, 255, 0.1) !important;
        color: var(--cyan-primary) !important;
    }

.list-group-item-action:focus {
    background: rgba(0, 212, 255, 0.15) !important;
}

.breadcrumb {
    background: transparent !important;
}

.breadcrumb-item a {
    color: var(--cyan-primary) !important;
}

.breadcrumb-item.active {
    color: var(--text-secondary) !important;
}

.modal-content {
    background: rgba(10, 15, 25, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
    background: rgba(8, 12, 20, 0.90) !important;
}

.modal-footer {
    border-top-color: var(--border-color) !important;
    background: rgba(8, 12, 20, 0.90) !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.btn-close {
    filter: invert(1) !important;
}

code {
    color: var(--cyan-primary) !important;
    background: rgba(0, 212, 255, 0.1) !important;
    padding: 2px 6px;
    border-radius: 3px;
}

h2 i {
    color: var(--cyan-primary) !important;
}

/* =====================================================
   REGISTRAZIONE RAPIDA — pagina /Work/RegistrazioneRapida
   ===================================================== */
body {
    background: url('/images/Login.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* ===========================
       LAYOUT PAGINA
       =========================== */
.rapida-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 12px 120px;
}

.rapida-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0,0,0,0.2);
    border: 0.5px solid rgba(0,212,255,0.12);
    margin-bottom: 16px;
}

.rapida-title {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(107,255,184,0.85);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .rapida-title i {
        color: #FFB347;
    }

.rapida-back {
    background: transparent;
    border: 0.5px solid rgba(0,212,255,0.2);
    color: rgba(0,212,255,0.7);
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

    .rapida-back:hover {
        background: rgba(0,212,255,0.08);
        color: #fff;
    }

/* ===========================
       SEZIONE RECENTI
       =========================== */
.recenti-section {
    margin-bottom: 20px;
}

.recenti-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.32);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recenti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.recenti-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recenti-nav-btn {
    background: rgba(0,0,0,0.2);
    border: 0.5px solid rgba(0,212,255,0.15);
    color: rgba(0,212,255,0.7);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .recenti-nav-btn:hover:not(:disabled) {
        background: rgba(0,212,255,0.08);
        color: #fff;
    }

    .recenti-nav-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

.recenti-page {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    min-width: 16px;
    text-align: center;
}

.recente-card {
    background: rgba(0,0,0,0.25);
    border: 0.5px solid rgba(0,212,255,0.12);
    display: flex;
    transition: all 0.2s;
    cursor: pointer;
}

    .recente-card:hover {
        border-color: rgba(0,212,255,0.35);
        background: rgba(0,0,0,0.3);
    }

.recente-card-content {
    flex: 1;
    padding: 12px 14px;
}

.recente-nome-progetto {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.88);
    margin-bottom: 4px;
}

.recente-categoria-small {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    margin-bottom: 6px;
}

.recente-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.recente-ore {
    background: rgba(107,255,184,0.1);
    color: rgba(107,255,184,0.85);
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 8px;
}

.recente-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* SUPER FAST */
.btn-super-fast {
    background: rgba(255,179,71,0.1);
    border: none;
    border-left: 0.5px solid rgba(255,179,71,0.2);
    color: #FFB347;
    width: 44px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .btn-super-fast:hover {
        background: rgba(255,179,71,0.2);
    }

/* ===========================
       DIVIDER
       =========================== */
.wizard-divider {
    text-align: center;
    padding: 14px 0;
    color: rgba(255,255,255,0.25);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

    .wizard-divider::before,
    .wizard-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 42%;
        height: 1px;
        background: rgba(0,212,255,0.1);
    }

    .wizard-divider::before {
        left: 0;
    }

    .wizard-divider::after {
        right: 0;
    }

/* ===========================
       FORM NUOVA REGISTRAZIONE
       =========================== */
.nuovo-section {
    background: rgba(0,0,0,0.2);
    border: 0.5px solid rgba(0,212,255,0.12);
    padding: 20px;
}

.form-field-wiz {
    margin-bottom: 16px;
}

.form-label-wiz {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.32);
    margin-bottom: 6px;
}

.form-input-wiz,
.form-select-wiz {
    width: 100%;
    background: rgba(0,0,0,0.25);
    border: 0.5px solid rgba(0,212,255,0.12);
    padding: 10px 12px;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    border-radius: 0;
}

    .form-input-wiz:focus,
    .form-select-wiz:focus {
        outline: none;
        border-color: rgba(0,212,255,0.4);
    }

    .form-select-wiz:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.ore-input-wiz {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    color: rgba(107,255,184,0.85);
}

.ore-stepper {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.stepper-btn-wiz {
    flex: 1;
    padding: 10px;
    border: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    transition: all 0.15s;
}

    .stepper-btn-wiz.minus {
        background: rgba(239,68,68,0.7);
    }

        .stepper-btn-wiz.minus:hover {
            background: #ef4444;
        }

    .stepper-btn-wiz.plus {
        background: rgba(107,255,184,0.5);
    }

        .stepper-btn-wiz.plus:hover {
            background: rgba(107,255,184,0.7);
        }

.ore-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.ore-preset {
    flex: 1;
    padding: 7px;
    background: rgba(0,0,0,0.2);
    border: 0.5px solid rgba(0,212,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .ore-preset:hover {
        background: rgba(0,212,255,0.08);
        color: rgba(255,255,255,0.88);
    }

/* GERARCHIA COLLASSABILE */
.gerarchia-toggle {
    background: rgba(0,0,0,0.2);
    border: 0.5px solid rgba(0,212,255,0.1);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    transition: all 0.2s;
}

    .gerarchia-toggle:hover {
        background: rgba(0,0,0,0.3);
        color: rgba(255,255,255,0.7);
    }

    .gerarchia-toggle i {
        transition: transform 0.2s;
    }

    .gerarchia-toggle.expanded i {
        transform: rotate(180deg);
    }

.gerarchia-fields {
    display: none;
    padding-top: 10px;
}

    .gerarchia-fields.show {
        display: block;
    }

/* OPE SELECTOR */
.ope-selector-section {
    background: rgba(0,212,255,0.04);
    border: 0.5px solid rgba(0,212,255,0.2);
    padding: 14px;
    margin-bottom: 16px;
}

.ope-selector-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(0,212,255,0.6);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ope-selector-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ope-btn {
    background: rgba(0,0,0,0.25);
    border: 0.5px solid rgba(0,212,255,0.1);
    color: rgba(255,255,255,0.5);
    padding: 7px 12px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

    .ope-btn:hover {
        background: rgba(0,0,0,0.35);
        color: rgba(255,255,255,0.85);
    }

    .ope-btn.active {
        background: rgba(107,255,184,0.12);
        border-color: rgba(107,255,184,0.4);
        color: #fff;
    }

.ope-abbr {
    background: rgba(255,255,255,0.08);
    padding: 2px 5px;
    font-weight: 600;
    font-size: 10px;
}

/* ===========================
       FOOTER FISSO SALVA
       =========================== */
.rapida-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 16px;
    background: rgba(0,0,0,0.5);
    border-top: 0.5px solid rgba(0,212,255,0.12);
}

.btn-salva-rapida {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(107,255,184,0.08);
    border: 0.5px solid rgba(107,255,184,0.3);
    color: rgba(107,255,184,0.85);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-salva-rapida:hover {
        background: rgba(107,255,184,0.15);
        color: #fff;
    }

    .btn-salva-rapida:disabled {
        background: rgba(0,0,0,0.2);
        color: rgba(255,255,255,0.2);
        cursor: wait;
    }

/* ===========================
       SUPER FAST MODAL
       =========================== */
.super-fast-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

    .super-fast-modal.show {
        display: flex;
    }

.super-fast-content {
    background: rgba(10,12,20,0.97);
    border: 0.5px solid rgba(255,179,71,0.3);
    width: 100%;
    max-width: 360px;
    overflow: hidden;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.super-fast-header {
    background: rgba(255,179,71,0.06);
    border-bottom: 0.5px solid rgba(255,179,71,0.2);
    padding: 12px 16px;
    text-align: center;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,179,71,0.85);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.super-fast-body {
    padding: 20px;
    text-align: center;
}

.super-fast-progetto {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,255,255,0.88);
    margin-bottom: 10px;
    line-height: 1.4;
}

.super-fast-ore-display {
    font-size: 40px;
    font-weight: 600;
    color: rgba(107,255,184,0.85);
    margin-bottom: 8px;
}

.super-fast-data {
    font-size: 12px;
    color: rgba(255,255,255,0.32);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .super-fast-data i {
        color: #00d4ff;
    }

.super-fast-ope-section {
    background: rgba(0,0,0,0.25);
    padding: 10px;
    margin-bottom: 14px;
    text-align: left;
}

.super-fast-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.3);
    display: block;
    margin-bottom: 5px;
}

.super-fast-select {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 0.5px solid rgba(0,212,255,0.12);
    padding: 9px;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    border-radius: 0;
}

.super-fast-ore-edit {
    background: rgba(0,0,0,0.25);
    padding: 10px;
    text-align: left;
}

.super-fast-ore-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.sf-stepper-btn {
    width: 42px;
    height: 42px;
    border: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

    .sf-stepper-btn.minus {
        background: rgba(239,68,68,0.7);
        color: #fff;
    }

        .sf-stepper-btn.minus:hover {
            background: #ef4444;
        }

    .sf-stepper-btn.plus {
        background: rgba(107,255,184,0.5);
        color: #fff;
    }

        .sf-stepper-btn.plus:hover {
            background: rgba(107,255,184,0.7);
        }

.sf-ore-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 0.5px solid rgba(0,212,255,0.12);
    padding: 8px;
    color: rgba(107,255,184,0.85);
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    border-radius: 0;
}

    .sf-ore-input:focus {
        outline: none;
        border-color: rgba(107,255,184,0.5);
    }

.super-fast-actions {
    display: flex;
}

.btn-sf-cancel, .btn-sf-confirm {
    flex: 1;
    padding: 14px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-sf-cancel {
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.45);
}

    .btn-sf-cancel:hover {
        background: rgba(0,0,0,0.45);
        color: rgba(255,255,255,0.7);
    }

.btn-sf-confirm {
    background: rgba(107,255,184,0.12);
    color: rgba(107,255,184,0.9);
}

    .btn-sf-confirm:hover {
        background: rgba(107,255,184,0.2);
        color: #fff;
    }

    .btn-sf-confirm:disabled {
        background: rgba(0,0,0,0.2);
        color: rgba(255,255,255,0.2);
        cursor: wait;
    }

/* ===========================
       LOADING / TOAST
       =========================== */
.wizard-loading-text {
    text-align: center;
    padding: 30px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}

.toast-success {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    background: rgba(0,0,0,0.5);
    border: 0.5px solid rgba(107,255,184,0.5);
    color: rgba(107,255,184,0.9);
    padding: 12px 22px;
    font-size: 13px;
    z-index: 5000;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

    .toast-success.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

@media (max-width: 600px) {
    .recenti-grid {
        grid-template-columns: 1fr;
    }

    .ope-selector-buttons {
        flex-direction: column;
    }
}

/* ===========================
   RAPPORTO LAVORO
   =========================== */

.tab-btn-rap {
    flex: 1;
    padding: 9px 8px;
    background: rgba(0,0,0,0.25);
    border: 0.5px solid rgba(0,212,255,0.15);
    border-bottom: none;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
    transition: all 0.2s;
}

    .tab-btn-rap:hover {
        background: rgba(0,212,255,0.04);
        color: rgba(255,255,255,0.7);
    }

    .tab-btn-rap.active {
        background: rgba(0,0,0,0.15);
        color: #00d4ff;
        border-color: rgba(0,212,255,0.3);
        border-bottom: 2px solid #00d4ff;
    }

.rap-panel {
    display: none;
}

    .rap-panel.active {
        display: block;
    }

.templates-grid-rap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.template-card-rap {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,212,255,0.12);
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .template-card-rap:hover {
        background: rgba(0,212,255,0.04);
        border-color: rgba(0,212,255,0.3);
    }

    .template-card-rap.selected {
        background: rgba(0,212,255,0.06);
        border-color: rgba(0,212,255,0.4);
    }

.manual-panel-rap {
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(0,212,255,0.12);
    padding: 14px;
    margin-bottom: 10px;
}

.section-label-rap {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.3);
    margin-bottom: 8px;
}

/* ================================================================
   MATRICE PERMESSI — Pages/Security/MatricePermessi
   ================================================================ */

.matrice-container {
    max-width: 100%;
    margin: 1rem auto;
    padding: var(--spacing-md);
    font-family: var(--font-family);
}

.matrice-header {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.matrice-title {
    color: var(--text-primary);
    font-weight: var(--font-thin);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-size: 1.8rem;
}

.matrice-subtitle {
    color: var(--text-muted);
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-weight: var(--font-light);
}

.matrice-controls {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.matrice-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.matrice-user-select {
    flex: 1;
    max-width: 400px;
}

.matrice-user-select label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    margin-bottom: var(--spacing-xs);
    display: block;
    font-weight: var(--font-light);
}

.matrice-legend {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    gap: 4rem;
    justify-content: center;
}

.matrice-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-light);
}

.matrice-role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.matrice-role-dot.inactive {
    background: var(--accent-red);
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

.matrice-role-dot.active {
    background: var(--green-primary);
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.matrice-section-label {
    background: var(--bg-card);
    color: var(--text-muted);
    padding: 0.8rem var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    margin-bottom: 0.5rem;
    border: var(--border-width) solid var(--border-color);
    border-left: 3px solid var(--accent-blue);
    font-weight: var(--font-light);
}

.matrice-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 2rem 0;
}

.matrice-wrapper {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

table.matrice-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.matrice-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 6px 2px;
    text-align: center;
    font-size: 8px;
    font-weight: var(--font-light);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: var(--border-width) solid var(--border-color);
    white-space: nowrap;
}

table.matrice-table th:first-child {
    text-align: left;
    padding-left: 10px;
    width: 18%;
}

table.matrice-table th:not(:first-child) {
    width: calc(82% / 11);
}

table.matrice-table td {
    padding: 6px 2px;
    text-align: center;
    border: var(--border-width) solid var(--border-color);
    background: var(--bg-card);
}

table.matrice-table td:first-child {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: var(--font-light);
    text-align: left;
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
}

table.matrice-table tr:hover td {
    background: var(--bg-hover);
}

table.matrice-table tr:hover td:first-child {
    background: var(--fumè-hover2);
}

.matrice-permission-cell {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.matrice-permission-cell:hover {
    background: var(--bg-hover) !important;
}

.matrice-role-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.matrice-role-circle.inactive {
    background: var(--accent-red);
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

.matrice-role-circle.active {
    background: var(--green-primary);
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.matrice-permission-cell:hover .matrice-role-circle {
    transform: scale(1.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.matrice-role-id-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.matrice-role-id {
    background: var(--text-dim);
    color: var(--text-primary);
    padding: 2px 6px;
    font-size: 9px;
    margin-right: 5px;
    flex-shrink: 0;
    font-weight: var(--font-light);
}

.matrice-role-name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-light);
    color: var(--text-primary);
}

.matrice-role-info-icon {
    color: var(--accent-blue);
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    margin-left: auto;
    margin-right: 5px;
}

.matrice-role-info-icon:hover {
    opacity: 1;
    transform: scale(1.2);
    color: var(--text-primary);
}

.matrice-footer {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.matrice-btn-save {
    background: rgba(0, 255, 136, 0.1);
    border: var(--border-width) solid var(--green-primary);
    color: var(--green-primary);
    padding: 0.8rem 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family);
    font-weight: var(--font-light);
}

.matrice-btn-save:hover {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: var(--glow-green);
    color: var(--bg-primary);
}

.matrice-btn-reset {
    background: transparent;
    border: var(--border-width) solid var(--border-color);
    color: var(--text-muted);
    padding: 0.8rem 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family);
    font-weight: var(--font-light);
}

.matrice-btn-reset:hover {
    color: var(--text-primary);
    border-color: var(--cyan-primary);
    background: var(--fumè-hover);
}

.matrice-modal-inner {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    width: 900px;
    max-width: 95%;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
}

.matrice-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.matrice-modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-light);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1rem;
}

.matrice-modal-subtitle {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: var(--spacing-md);
}

.matrice-modal-list {
    border: var(--border-width) solid var(--border-color);
    background: var(--bg-secondary);
    padding: var(--spacing-sm);
}

.matrice-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (max-width: 768px) {
    .matrice-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    .matrice-user-select {
        max-width: 100%;
        margin-bottom: var(--spacing-md);
    }
    .matrice-legend {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    .matrice-btn-save,
    .matrice-btn-reset {
        padding: 0.6rem var(--spacing-md);
        font-size: 11px;
    }
}

/* ================================================================
   SUMMARY GRID — riepilogo importi (fatture, acquisti, ecc.)
   Uso: <div class="zwd-summary-grid">
            <div class="zwd-summary-item">
                <div class="zwd-summary-label">Imponibile</div>
                <div class="zwd-summary-value chf">CHF 1'200.00</div>
            </div>
        </div>
   ================================================================ */
.zwd-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.zwd-summary-item {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    text-align: center;
}

.zwd-summary-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.zwd-summary-value {
    font-size: 18px;
    font-weight: var(--font-bold);
    font-family: 'Courier New', monospace;
    line-height: 1.4;
}

.zwd-summary-value.chf { color: var(--accent-red); }
.zwd-summary-value.eur { color: var(--accent-blue); }
.zwd-summary-value.usd { color: var(--green-primary); }
.zwd-summary-value.gbp { color: var(--accent-amber); }

/* ================================================================
   BADGE CONTABILI — stato fatture, valute, contabilizzazione
   ================================================================ */

/* Valuta */
.zwd-badge-chf  { background: rgba(239,68,68,0.15);  color: #fca5a5; padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-eur  { background: rgba(59,130,246,0.15); color: #93c5fd; padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-usd  { background: rgba(16,185,129,0.15); color: #6ee7b7; padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-gbp  { background: rgba(245,158,11,0.15); color: #fcd34d; padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }

/* Stato fattura */
.zwd-badge-bozza      { background: rgba(100,116,139,0.2); color: var(--text-muted);   padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-emessa     { background: rgba(16,185,129,0.15); color: #6ee7b7;             padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-pagata     { background: rgba(59,130,246,0.15); color: #93c5fd;             padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-annullata  { background: rgba(239,68,68,0.15);  color: #fca5a5;             padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-lok        { background: rgba(234,88,12,0.15);  color: #fdba74;             padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.zwd-badge-contab     { background: rgba(13,148,136,0.15); color: #5eead4;             padding: 3px 8px; font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }

/* ================================================================
   MODAL — overlay + contenuto
   Uso: <div class="zwd-modal-overlay" id="myModal">
            <div class="zwd-modal">
                <div class="zwd-modal-header">...</div>
                <div class="zwd-modal-body">...</div>
                <div class="zwd-modal-footer">...</div>
            </div>
        </div>
   ================================================================ */
.zwd-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.zwd-modal-overlay.active {
    display: flex;
}

.zwd-modal {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

.zwd-modal-sm  { max-width: 460px; }
.zwd-modal-lg  { max-width: 960px; }

.zwd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: var(--border-width) solid var(--border-color);
}

.zwd-modal-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zwd-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.zwd-modal-close:hover {
    color: var(--text-primary);
}

.zwd-modal-body {
    padding: var(--spacing-lg);
}

.zwd-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: var(--border-width) solid var(--border-color);
}

/* Griglia dettaglio nel modal */
.zwd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.zwd-detail-item {
    margin-bottom: var(--spacing-sm);
}

.zwd-detail-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}

.zwd-detail-value {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: var(--font-light);
}

.zwd-detail-value.highlight {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.zwd-detail-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: var(--border-width) solid var(--border-color);
}

.zwd-detail-section-title {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}

/* ================================================================
   TOAST — notifiche temporanee
   Uso: <div id="toast" class="zwd-toast"></div>
        JS: showToast('Salvato', 'success')
   ================================================================ */
.zwd-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-primary);
    font-size: 12px;
    z-index: 2000;
    display: none;
    align-items: center;
    gap: var(--spacing-sm);
    border: var(--border-width) solid transparent;
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.zwd-toast.show {
    display: flex;
}

.zwd-toast.success {
    background: rgba(6,95,70,0.95);
    border-color: var(--green-primary);
}

.zwd-toast.error {
    background: rgba(153,27,27,0.95);
    border-color: var(--accent-red);
}

.zwd-toast.warning {
    background: rgba(120,80,0,0.95);
    border-color: var(--accent-amber);
}

.zwd-toast.info {
    background: rgba(30,64,175,0.95);
    border-color: var(--accent-blue);
}

/* ================================================================
   FILTRI RIGA — layout orizzontale con label sopra
   Uso: <div class="zwd-filters-row">
            <div class="zwd-filter-group">
                <label class="zwd-filter-label">Anno</label>
                <select class="zwd-filter-select">...</select>
            </div>
        </div>
   ================================================================ */
.zwd-filters-row {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    align-items: flex-end;
}

.zwd-filter-group {
    display: flex;
    flex-direction: column;
    min-width: 110px;
}

.zwd-filter-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

/* zwd-filter-input e zwd-filter-select già definiti sopra nel CATALOGO UI */

/* ================================================================
   EMPTY STATE — nessun dato trovato
   ================================================================ */
.zwd-empty-state {
    text-align: center;
    padding: 50px var(--spacing-lg);
    color: var(--text-muted);
}

.zwd-empty-state i {
    font-size: 36px;
    margin-bottom: var(--spacing-md);
    opacity: 0.4;
    display: block;
    color: var(--text-dim);
}

.zwd-empty-state p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================================================================
   VARIABILI STATO — usate da righe, badge, bordi
   Definite qui una volta, usate ovunque
   ================================================================ */
:root {
    /* Colori stato — testo e bordo */
    --stato-attivo:    var(--green-primary);
    --stato-bozza:     var(--accent-amber);
    --stato-lok:       var(--accent-red);
    --stato-sospeso:   var(--text-muted);
    --stato-annullato: var(--text-dim);
    --stato-inviato:   var(--cyan-primary);
    --stato-approvato: var(--green-primary);
    --stato-rifiutato: var(--accent-red);

    /* Sfondi stato — per righe tabella */
    --stato-attivo-bg:    rgba(16, 185, 129, 0.06);
    --stato-bozza-bg:     rgba(234, 179, 8,  0.08);
    --stato-bozza-border: rgba(234, 179, 8,  0.35);
    --stato-lok-bg:       rgba(239, 68,  68, 0.08);
    --stato-sospeso-bg:   rgba(100, 116, 139, 0.08);
    --stato-annullato-bg: rgba(71,  85,  105, 0.06);
}

/* ================================================================
   VALUTE — classi inline per testo colorato
   Uso: <span class="zwd-valuta-chf">1'200.00</span>
        <td class="zwd-valuta-eur">980.00</td>
   ================================================================ */
.zwd-valuta-chf,
.valuta-chf { color: var(--accent-red)   !important; }

.zwd-valuta-eur,
.valuta-eur { color: var(--accent-blue)  !important; }

.zwd-valuta-usd { color: var(--green-primary) !important; }

.zwd-valuta-other,
.valuta-other { color: var(--accent-amber) !important; }

/* ================================================================
   RIGHE TABELLA COLORATE PER STATO
   Uso: <tr class="zwd-row-attivo"> / <tr class="row-attivo">
   Compatibili con i nomi vecchi (row-*) e nuovi (zwd-row-*)
   ================================================================ */
.zwd-row-attivo,    .row-attivo    { /* stato normale, nessun override */ }

.zwd-row-bozza,     .row-bozza {
    background: var(--stato-bozza-bg)    !important;
    border-left: 2px solid var(--stato-bozza) !important;
}
.zwd-row-bozza:hover, .row-bozza:hover {
    background: rgba(234, 179, 8, 0.14)  !important;
}

.zwd-row-lok,       .row-lok {
    background: var(--stato-lok-bg)      !important;
    border-left: 2px solid var(--stato-lok)   !important;
}
.zwd-row-lok td { opacity: 0.8; }

.zwd-row-sospeso,   .row-sospeso {
    background: var(--stato-sospeso-bg)  !important;
    border-left: 2px solid var(--stato-sospeso) !important;
    opacity: 0.7;
}

.zwd-row-annullato, .row-annullato {
    background: var(--stato-annullato-bg) !important;
    border-left: 2px solid var(--stato-annullato) !important;
    opacity: 0.55;
}

/* ================================================================
   BADGE STATO — versione workspace (bordo + sfondo soft)
   Compatibili con .badge-* vecchi e .zwd-stato-* nuovi
   Uso: <span class="badge-stato badge-attivo">Attivo</span>
   ================================================================ */
.badge-stato {
    display: inline-block;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: var(--border-width) solid transparent;
}

.badge-attivo, .badge-ok {
    background: var(--stato-attivo-bg);
    color: var(--stato-attivo);
    border-color: var(--stato-attivo);
}

.badge-bozza {
    background: var(--stato-bozza-bg);
    color: var(--stato-bozza);
    border-color: var(--stato-bozza-border);
}

.badge-lok {
    background: var(--stato-lok-bg);
    color: var(--stato-lok);
    border-color: var(--stato-lok);
}

.badge-sospeso {
    background: var(--stato-sospeso-bg);
    color: var(--stato-sospeso);
    border-color: var(--stato-sospeso);
}

.badge-annullato {
    background: var(--stato-annullato-bg);
    color: var(--stato-annullato);
    border-color: var(--stato-annullato);
}

.badge-warn, .badge-var {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-amber);
    border-color: var(--accent-amber);
}

/* ================================================================
   DATA TABLE COMPATTA — stile Fatture/Acquisti
   Più densa di .zwd-data-table, per pagine con molte colonne
   Uso: <div class="zwd-data-table zwd-data-table-compact">
   ================================================================ */
.zwd-data-table-compact th {
    padding: 8px 6px;
    font-size: 9px;
}

.zwd-data-table-compact td {
    padding: 8px 6px;
    font-size: 11px;
}

.zwd-data-table-compact tbody tr:hover td {
    background: rgba(59, 130, 246, 0.05) !important;
}

/* Riga cliccabile */
.zwd-data-table tbody tr.clickable,
.zwd-data-table-compact tr.clickable { cursor: pointer; }

/* ================================================================
   CORREZIONE CONFLITTI zwd-modules.css
   .zwd-table, .zwd-stats-grid, .zwd-stat-* già in zwd-base.css
   Alias per retrocompatibilità con classi vecchie senza prefisso
   ================================================================ */

/* .filter-box → alias di .zwd-filter-input */
.filter-box {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 15px;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-family: var(--font-family);
    transition: border-color 0.2s;
}
.filter-box:focus {
    outline: none;
    border-color: var(--cyan-primary);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
}

/* .zwd-action-btn → alias di .zwd-row-btn */
.zwd-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    background: transparent;
    border: var(--border-width) solid var(--border-color);
    color: var(--text-muted);
    font-size: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.zwd-action-btn:hover,
.zwd-action-btn:hover { border-color: var(--cyan-primary); color: var(--cyan-primary); }
.zwd-action-btn.delete:hover { border-color: var(--accent-red); color: var(--accent-red); }

.zwd-actions { display: flex; gap: 2px; justify-content: center; }

/* .progetto-info-box */
.progetto-info-box {
    background: var(--bg-card);
    border: var(--border-width) solid var(--accent-blue);
    padding: 10px 15px;
    margin-bottom: 10px;
}
.progetto-info-title {
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.progetto-info-details {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: var(--font-light);
}

/* ================================================================
   CALC RIGHE MODAL — stili calcolatrice
   Porta zwd_calc-righe.css dentro il catalogo
   ================================================================ */
#calcRigheModal .modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

#calcRigheModal .modal-header,
#calcRigheModal .modal-footer {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

#calcRigheModal .table {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
#calcRigheModal .table thead { background-color: var(--bg-secondary) !important; }
#calcRigheModal .table tbody tr { background-color: var(--fumè-medium) !important; }

#calcRigheModal .form-control,
#calcRigheModal .form-select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: var(--border-width) solid var(--border-color) !important;
}

#calcRigheModal .btn-outline-info {
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}
#calcRigheModal .btn-outline-info:hover {
    background-color: var(--accent-blue) !important;
    color: var(--bg-primary) !important;
}

#calcRigheModal .btn-outline-danger {
    border-color: var(--accent-red) !important;
    color: var(--accent-red) !important;
}
#calcRigheModal .btn-outline-danger:hover {
    background-color: var(--accent-red) !important;
    color: var(--text-primary) !important;
}

#calcRigheModal .form-check-input:checked {
    background-color: var(--green-primary) !important;
    border-color: var(--green-primary) !important;
}
/* ================================================================
   STATISTICHE — .zwd-stats-grid / .zwd-stat-card / .zwd-stat-value
   ================================================================ */
.zwd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.zwd-stat-card {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-md);
    text-align: center;
    transition: border-color 0.2s;
}

    .zwd-stat-card:hover {
        border-color: var(--border-glow);
    }

.zwd-stat-value {
    font-size: 2rem;
    font-weight: var(--font-light);
    letter-spacing: 2px;
    line-height: 1.2;
    color: var(--text-primary);
}

    /* Varianti colore .zwd-stat-value */
    .zwd-stat-value.cyan {
        color: var(--cyan-primary);
    }

    .zwd-stat-value.green {
        color: var(--green-primary);
    }

    .zwd-stat-value.amber {
        color: var(--accent-amber);
    }

    .zwd-stat-value.red {
        color: var(--accent-red);
    }

    .zwd-stat-value.blue {
        color: var(--accent-blue);
    }

    .zwd-stat-value.prog {
        color: var(--prog-l1);
    }

    .zwd-stat-value.amm {
        color: var(--amm-l1);
    }

    .zwd-stat-value.acq {
        color: var(--acq-l1);
    }

.zwd-stat-label {
    margin-top: var(--spacing-xs);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: var(--font-regular);
}

/* ================================================================
   DATA TABLE — .zwd-data-table
   ================================================================ */
.zwd-data-table {
    width: 100%;
    border-collapse: collapse;
}

    .zwd-data-table thead tr {
        background: var(--fumè-dark);
    }

    .zwd-data-table thead th {
        padding: 10px 8px;
        font-size: 9px;
        font-weight: var(--font-semibold);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--text-muted);
        border-bottom: var(--border-width) solid var(--cyan-primary);
        white-space: nowrap;
        text-align: left;
    }

    .zwd-data-table tbody td {
        padding: 10px 8px;
        font-size: 12px;
        color: var(--text-primary);
        font-weight: var(--font-light);
        border-bottom: var(--border-width) solid rgba(0, 212, 255, 0.08);
        background: var(--fumè-medium);
        vertical-align: middle;
    }

    .zwd-data-table tbody tr:hover td {
        background: var(--fumè-hover2) !important;
    }

/* Colonne tipizzate */
.zwd-td-codice {
    font-family: 'Courier New', monospace;
    color: var(--cyan-primary);
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.zwd-td-data {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.zwd-td-numero {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.zwd-td-trunc {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================
   PULSANTI RIGA — .zwd-row-btn
   ================================================================ */
.zwd-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    background: transparent;
    border: var(--border-width) solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

    .zwd-row-btn:hover {
        border-color: var(--cyan-primary);
        color: var(--cyan-primary);
    }

    .zwd-row-btn.success {
        border-color: rgba(0,255,136,0.3);
        color: var(--green-primary);
    }

        .zwd-row-btn.success:hover {
            background: rgba(0,255,136,0.08);
            border-color: var(--green-primary);
        }

    .zwd-row-btn.warning {
        border-color: rgba(255,149,0,0.3);
        color: var(--accent-amber);
    }

        .zwd-row-btn.warning:hover {
            background: rgba(255,149,0,0.08);
            border-color: var(--accent-amber);
        }

    .zwd-row-btn.danger {
        border-color: rgba(239,68,68,0.3);
        color: var(--accent-red);
    }

        .zwd-row-btn.danger:hover {
            background: rgba(239,68,68,0.08);
            border-color: var(--accent-red);
        }

.zwd-row-btn-group {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* ================================================================
   FILTRI INPUT/SELECT — .zwd-filter-input / .zwd-filter-select
   ================================================================ */
.zwd-filter-input,
.zwd-filter-select {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-family);
    font-weight: var(--font-light);
    transition: border-color 0.2s;
    width: 100%;
}

    .zwd-filter-input:focus,
    .zwd-filter-select:focus {
        outline: none;
        border-color: var(--cyan-primary);
        box-shadow: 0 0 6px rgba(0, 212, 255, 0.2);
    }

    .zwd-filter-input::placeholder {
        color: var(--text-dim);
    }

    .zwd-filter-select option {
        background: var(--bg-secondary);
    }

/* ================================================================
   BADGE STATO GENERICO — .zwd-stato-*
   ================================================================ */
.zwd-stato {
    display: inline-block;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zwd-stato-attivo {
    color: var(--stato-attivo);
    background: var(--stato-attivo-bg);
}

.zwd-stato-bozza {
    color: var(--stato-bozza);
    background: var(--stato-bozza-bg);
}

.zwd-stato-lok {
    color: var(--stato-lok);
    background: var(--stato-lok-bg);
}

.zwd-stato-sospeso {
    color: var(--stato-sospeso);
    background: var(--stato-sospeso-bg);
}

.zwd-stato-annullato {
    color: var(--stato-annullato);
    background: var(--stato-annullato-bg);
}

.zwd-stato-inviato {
    color: var(--stato-inviato);
    background: rgba(0,212,255,0.08);
}

.zwd-stato-approvato {
    color: var(--stato-approvato);
    background: var(--stato-attivo-bg);
}

.zwd-stato-rifiutato {
    color: var(--stato-rifiutato);
    background: var(--stato-lok-bg);
}

/* ================================================================
   BADGE CATEGORIA / ETICHETTA GENERICA — .zwd-badge-label
   ================================================================ */
.zwd-badge-label {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 212, 255, 0.08);
    color: var(--text-muted);
    border: var(--border-width) solid var(--border-color);
}

/* ================================================================
   IMPORTI — .zwd-importo-positivo / negativo / neutro
   ================================================================ */
.zwd-importo-positivo {
    color: var(--green-primary) !important;
}

.zwd-importo-negativo {
    color: var(--accent-red) !important;
}

.zwd-importo-neutro {
    color: var(--text-muted) !important;
}

/* Alias diretti .zwd-chf / .zwd-eur */
.zwd-chf {
    color: var(--accent-red) !important;
}

.zwd-eur {
    color: var(--accent-blue) !important;
}

.zwd-usd {
    color: var(--green-primary) !important;
}

.zwd-gbp {
    color: var(--accent-amber) !important;
}