/* ================================================================
   PALETTE REPARTI — Opzione A (boreale)
   Modifica qui per cambiare i colori di tutti i reparti
   ================================================================ */
:root {
    --reparto-installazioni: var(--inst-l1); /* #FF6B6B rosso corallo */
    --reparto-progettazione: var(--prog-l1); /* #D4A0A0 rosa antico */
    --reparto-anagrafica: var(--anag-l1); /* #E87EA1 fucsia soft */
    --reparto-commerciale: var(--comm-l1); /* #FFB347 ambra pesca */
    --reparto-logistica: var(--log-l1); /* #6BB5FF azzurro cielo */
    --reparto-amministrazione: var(--amm-l1); /* #A89FD4 lilla */
    --reparto-acquisti: var(--acq-l1); /* #6BFFB8 verde menta */
    --reparto-sistema: var(--sis-l1); /* #C8F57A verde lime */
}

/* ================================================================
   ZWD-DASHBOARD.CSS — Stili comuni per tutte le Dashboard
   File: wwwroot/css/zwd-dashboard.css
   Richiede: zwd-base.css caricato prima (via _Layout.cshtml)
   ================================================================ */

/* ================================================================
   SFONDO — eredita da zwd-base.css (body già impostato)
   Aggiunge solo override per pagine che passano dal Layout
   ================================================================ */
body {
    background: url('/images/Login.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
}

/* ================================================================
   CARD REPARTI / MODULI
   ================================================================ */
.contact-item {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(10, 15, 25, 0.78);
    border: 0.5px solid rgba(0, 212, 255, 0.15);
    padding: 20px;
    transition: all 0.3s ease;
}

    .contact-item:hover {
        border-color: rgba(0, 212, 255, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .contact-item.opacity-50 {
        opacity: 0.5;
        pointer-events: none;
    }

.contact-main {
    flex-shrink: 0;
}

.contact-details {
    flex-grow: 1;
    display: flex;
    align-items: center;
    min-height: 50px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.contact-info {
    padding: 10px 0;
    border-top: 0.5px solid rgba(0, 212, 255, 0.1);
    margin-top: auto;
}

.contact-name {
    font-size: 1.1rem;
    font-weight: var(--font-regular);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-primary);
}

/* ================================================================
   PULSANTI AZIONE CARD
   ================================================================ */
.action-buttons {
    margin-top: auto;
    padding-top: 10px;
}

    .action-buttons form {
        margin: 0;
    }

    .action-buttons .btn-action {
        width: 100% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px !important;
        font-size: 0.75rem !important;
        font-family: var(--font-family);
        text-align: center;
        min-height: 44px;
        box-sizing: border-box;
        background: transparent !important;
        color: var(--text-primary);
        border: 0.5px solid rgba(0, 212, 255, 0.2) !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        text-decoration: none;
        cursor: pointer;
    }

        .action-buttons .btn-action:hover:not(:disabled) {
            background: rgba(0, 212, 255, 0.06) !important;
            border-color: rgba(0, 212, 255, 0.45) !important;
            box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
            color: var(--text-primary);
        }

        .action-buttons .btn-action:disabled {
            background: transparent !important;
            border-color: rgba(0, 212, 255, 0.08) !important;
            cursor: not-allowed;
            opacity: 0.35;
        }

/* ================================================================
   TAB NAVIGATION
   ================================================================ */
.tab-navigation {
    display: flex;
    gap: 10px;
    border-bottom: 0.5px solid rgba(0, 212, 255, 0.2);
    padding-bottom: 0;
    margin-bottom: 16px;
}

.tab-item {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 12px 20px;
    font-size: 0.8rem;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tab-item:hover {
        color: var(--cyan-primary);
    }

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

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

.tab-count {
    background: rgba(0, 212, 255, 0.12);
    color: var(--cyan-primary);
    border: 0.5px solid rgba(0, 212, 255, 0.3);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
}

/* ================================================================
   SEZIONI E PANNELLI
   ================================================================ */
.search-section {
    background: rgba(10, 15, 25, 0.78);
    border: 0.5px solid rgba(0, 212, 255, 0.15);
}

.section-title {
    font-weight: var(--font-thin);
    letter-spacing: 3px;
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    letter-spacing: 1px;
}

.search-title {
    font-size: 1rem;
    font-weight: var(--font-regular);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 15px;
    border-bottom: 0.5px solid rgba(0, 212, 255, 0.15);
    margin-bottom: 20px;
    color: var(--text-muted);
}

/* ================================================================
   TABELLE
   ================================================================ */
.table {
    color: var(--text-primary);
}

    .table thead th {
        border-bottom: 1px solid var(--cyan-primary);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: var(--font-regular);
        color: var(--text-muted);
        font-size: 0.75rem;
        background: rgba(8, 12, 20, 0.9) !important;
    }

    .table tbody td {
        border-bottom: 0.5px solid rgba(0, 212, 255, 0.1);
        background: rgba(10, 15, 25, 0.78) !important;
        font-size: 0.85rem;
    }

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

/* ================================================================
   BADGE
   ================================================================ */
.badge {
    font-weight: var(--font-regular);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    font-size: 0.7rem;
}

/* ================================================================
   ALERT
   ================================================================ */
.alert-info {
    background: rgba(0, 153, 255, 0.08);
    border: 0.5px solid rgba(0, 212, 255, 0.3);
    color: var(--text-primary);
}

/* ================================================================
   LAYOUT GRID
   ================================================================ */
.row.mt-3 {
    display: flex;
    flex-wrap: wrap;
}

    .row.mt-3 > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@@media (max-width: 768px) {
    .tab-item {
        font-size: 0.75rem;
        padding: 10px 12px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .contact-item {
        min-height: 160px;
    }
}

/* ================================================================
   CLASSI REPARTO — bordo, icona, testo
   Modificare qui per cambiare i colori, mai nell'HTML
   Selettori specifici .dashboard-reparti per non interferire
   con le dashboard figlie
   ================================================================ */
/* ================================================================
   CLASSI REPARTO — bordo e icona
   Usano variabili CSS definite in zwd-base.css
   Per cambiare un colore: modifica solo zwd-base.css
   ================================================================ */
.reparto-installazioni {
    border-left: 3px solid var(--inst-l1) !important;
}

.reparto-progettazione {
    border-left: 3px solid var(--prog-l1) !important;
}

.reparto-anagrafica {
    border-left: 3px solid var(--anag-l1) !important;
}

.reparto-commerciale {
    border-left: 3px solid var(--comm-l1) !important;
}

.reparto-logistica {
    border-left: 3px solid var(--log-l1) !important;
}

.reparto-amministrazione {
    border-left: 3px solid var(--amm-l1) !important;
}

.reparto-acquisti {
    border-left: 3px solid var(--acq-l1) !important;
}

.reparto-sistema {
    border-left: 3px solid var(--sis-l1) !important;
}

/* Icone colorate */
.contact-item.reparto-installazioni .reparto-icon {
    color: var(--inst-l1) !important;
}

.contact-item.reparto-progettazione .reparto-icon {
    color: var(--prog-l1) !important;
}

.contact-item.reparto-anagrafica .reparto-icon {
    color: var(--anag-l1) !important;
}

.contact-item.reparto-commerciale .reparto-icon {
    color: var(--comm-l1) !important;
}

.contact-item.reparto-logistica .reparto-icon {
    color: var(--log-l1) !important;
}

.contact-item.reparto-amministrazione .reparto-icon {
    color: var(--amm-l1) !important;
}

.contact-item.reparto-acquisti .reparto-icon {
    color: var(--acq-l1) !important;
}

.contact-item.reparto-sistema .reparto-icon {
    color: var(--sis-l1) !important;
}

/* Testo titolo colorato — solo nella dashboard madre */
.dashboard-reparti .contact-item.reparto-installazioni .contact-name {
    color: var(--inst-l1) !important;
}

.dashboard-reparti .contact-item.reparto-progettazione .contact-name {
    color: var(--prog-l1) !important;
}

.dashboard-reparti .contact-item.reparto-anagrafica .contact-name {
    color: var(--anag-l1) !important;
}

.dashboard-reparti .contact-item.reparto-commerciale .contact-name {
    color: var(--comm-l1) !important;
}

.dashboard-reparti .contact-item.reparto-logistica .contact-name {
    color: var(--log-l1) !important;
}

.dashboard-reparti .contact-item.reparto-amministrazione .contact-name {
    color: var(--amm-l1) !important;
}

.dashboard-reparti .contact-item.reparto-acquisti .contact-name {
    color: var(--acq-l1) !important;
}

.dashboard-reparti .contact-item.reparto-sistema .contact-name {
    color: var(--sis-l1) !important;
}

/* Dashboard figlie — L2 per bordo e icona (vivace) */
.dashboard-figlia .contact-item.reparto-installazioni {
    border-left-color: var(--inst-l2) !important;
}

.dashboard-figlia .contact-item.reparto-progettazione {
    border-left-color: var(--prog-l2) !important;
}

.dashboard-figlia .contact-item.reparto-anagrafica {
    border-left-color: var(--anag-l2) !important;
}

.dashboard-figlia .contact-item.reparto-commerciale {
    border-left-color: var(--comm-l2) !important;
}

.dashboard-figlia .contact-item.reparto-logistica {
    border-left-color: var(--log-l2) !important;
}

.dashboard-figlia .contact-item.reparto-amministrazione {
    border-left-color: var(--amm-l2) !important;
}

.dashboard-figlia .contact-item.reparto-acquisti {
    border-left-color: var(--acq-l2) !important;
}

.dashboard-figlia .contact-item.reparto-sistema {
    border-left-color: var(--sis-l2) !important;
}

.dashboard-figlia .contact-item.reparto-installazioni .reparto-icon {
    color: var(--inst-l2) !important;
}

.dashboard-figlia .contact-item.reparto-progettazione .reparto-icon {
    color: var(--prog-l2) !important;
}

.dashboard-figlia .contact-item.reparto-anagrafica .reparto-icon {
    color: var(--anag-l2) !important;
}

.dashboard-figlia .contact-item.reparto-commerciale .reparto-icon {
    color: var(--comm-l2) !important;
}

.dashboard-figlia .contact-item.reparto-logistica .reparto-icon {
    color: var(--log-l2) !important;
}

.dashboard-figlia .contact-item.reparto-amministrazione .reparto-icon {
    color: var(--amm-l2) !important;
}

.dashboard-figlia .contact-item.reparto-acquisti .reparto-icon {
    color: var(--acq-l2) !important;
}

.dashboard-figlia .contact-item.reparto-sistema .reparto-icon {
    color: var(--sis-l2) !important;
}

/* ================================================================
   STATISTICHE RAPIDE — stat-value / stat-label
   Usate nelle sezioni riepilogo delle dashboard
   ================================================================ */
.stat-value {
    font-size: 2rem;
    font-weight: var(--font-light);
    letter-spacing: 2px;
}

.stat-label {
    margin-top: 5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-muted);
}