/* ==========================================================================
   1. VARIABILI GLOBAL & RESET (TEMA SHINY FINTECH)
   ========================================================================== */
:root {
    /* --- COLORI --- */
    --crm-primary: #2563eb;
    --crm-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); /* Gradiente Navbar */
    --crm-bg: #f1f5f9; /* Sfondo grigio ghiaccio */
    /* --- OMBRE & EFFETTI 3D --- */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-card: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Layout Base */
html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--crm-bg) !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    color: #334155;
    padding-top: 90px !important; /* Spazio per navbar fissa */
}

/* Contenitore Generale */
.container-fluid {
    padding-left: 30px !important;
    padding-right: 30px !important;
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   2. NAVBAR (FIX COLORE & GRADIENTE)
   ========================================================================== */
/* Forziamo il background image per vincere sui colori piatti di Bootstrap */
.navbar, nav.navbar, header .navbar {
    background-image: var(--crm-gradient) !important;
    background-color: #0f172a !important; /* Fallback */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    border: none !important;
    padding: 0.8rem 1.5rem !important;
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.5rem;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    padding: 8px 16px !important;
    border-radius: 8px;
    transition: var(--transition);
}

    .nav-link:hover {
        background: rgba(255,255,255,0.15);
        transform: translateY(-1px);
    }

/* Menu a Tendina */
.navbar-collapse, .container-fluid {
    overflow: visible !important;
}

.dropdown-menu {
    border: none !important;
    box-shadow: var(--shadow-hover) !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
}

/* ==========================================================================
   3. STATS GRID LAYOUT (IL FIX FONDAMENTALE)
   ========================================================================== */
/* Questa è la parte che mancava per mettere le card in riga */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Colonne uguali */
    gap: 24px; /* Spazio tra le card */
    margin-bottom: 30px;
    width: 100%;
}

/* Responsive: Se lo schermo è medio (tablet), fanne 2 per riga */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Responsive: Se lo schermo è piccolo (mobile), fanne 1 per riga */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   4. CARD DESIGN (SCINTILLANTE)
   ========================================================================== */
/* Stile comune a tutte le card */
.stat-card, .card, .white-panel {
    background: white !important;
    border: none !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
}

    /* Effetto Hover */
    .stat-card:hover, .card:hover {
        transform: translateY(-6px) !important;
        box-shadow: var(--shadow-hover) !important;
    }

/* STAT CARD (Quelle in alto coi numeri) */
.stat-card {
    padding: 25px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 6px solid #ccc; /* Default */
}

    /* Colori specifici dei bordi */
    .stat-card.blue {
        border-left-color: #2563eb !important;
    }

    .stat-card.green {
        border-left-color: #10b981 !important;
    }

    .stat-card.orange {
        border-left-color: #f59e0b !important;
    }

    .stat-card.red {
        border-left-color: #ef4444 !important;
    }

/* Numeri Grandi */
.stat-card-value {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 5px;
    line-height: 1.1;
}

/* Etichette */
.stat-card-label {
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* Icone sfumate sullo sfondo */
.stat-card-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3.5rem;
    opacity: 0.08;
    color: #1e293b;
    transform: rotate(-10deg);
}

/* ==========================================================================
   5. PULSANTI & UTILITY
   ========================================================================== */
.btn {
    border-radius: 50px !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.5rem !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-primary, .btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(37, 99, 235, 0.3);
    }

.btn-outline-primary {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    color: #64748b !important;
}

    .btn-outline-primary:hover {
        border-color: #2563eb !important;
        color: #2563eb !important;
        background: #eff6ff !important;
    }

/* Header Pagina */
.page-header {
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 20px;
    padding: 0 !important;
    border: none !important;
}

    .page-header h1 {
        font-size: 2rem;
        font-weight: 800;
        color: #1e293b;
    }

/* Liste e Tabelle */
.list-group-item, table tr {
    border-color: #f1f5f9 !important;
}

    .list-group-item:hover {
        background-color: #f8fafc !important;
    }

/* Area Upload */
.attachment-upload-area {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

    .attachment-upload-area:hover {
        border-color: #2563eb;
        background: #eff6ff;
    }

/* Email Styles */
.email-container {
    overflow: hidden;
}

.email-sidebar {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 15px;
}

.email-item {
    background: white;
    margin-bottom: 8px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* ==========================================================================
   OVERRIDE COLORI: NAVBAR E PULSANTI (BLU SCURO)
   Incolla questo blocco alla fine del tuo file CSS
   ========================================================================== */

/* 1. NAVBAR: Blu Scuro (Blu Notte) */
nav.navbar,
.navbar,
header .navbar,
.bg-primary {
    /* Sostituisce il celeste con un gradiente blu scuro elegante */
    background: linear-gradient(90deg, #0a2342 0%, #1e3a8a 100%) !important;
    background-color: #0a2342 !important; /* Colore solido di sicurezza */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: none !important;
}

    /* Testi della Navbar bianchi */
    .navbar-brand,
    .nav-link,
    .navbar a,
    .navbar i,
    .navbar span {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
        opacity: 1 !important;
    }

/* 2. PULSANTI PRINCIPALI: Blu Scuro */
/* Colpiamo solo i pulsanti "Primary" e "Info" per non rompere quelli rossi/verdi */
.btn-primary,
.btn-info {
    background: #1e3a8a !important; /* Blu scuro */
    border-color: #0a2342 !important;
    color: white !important;
}

    /* Effetto Hover sui pulsanti (quando passi il mouse) */
    .btn-primary:hover,
    .btn-info:hover {
        background: #0a2342 !important; /* Diventa ancora più scuro */
        box-shadow: 0 5px 15px rgba(30, 58, 138, 0.4) !important;
        transform: translateY(-2px);
    }

/* 3. PULSANTI "Vedi Tutti" (quelli piccoli nelle card) */
.btn-outline-primary {
    color: #1e3a8a !important;
    border-color: #1e3a8a !important;
}

    .btn-outline-primary:hover {
        background-color: #1e3a8a !important;
        color: white !important;
    }

/* ==========================================================================
   FIX URGENTE: MENU A TENDINA LEGGIBILE
   Incolla questo codice alla fine del tuo file CSS
   ========================================================================== */

/* 1. Colore del testo nel menu a tendina (Contatti, Liste, ecc.) */
.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu li a {
    color: #334155 !important; /* Grigio scuro molto leggibile */
    text-shadow: none !important; /* Rimuove l'alone bianco */
    font-weight: 500 !important;
}

    /* 2. Effetto quando passi il mouse sopra le voci del menu */
    .navbar .dropdown-menu a:hover,
    .navbar .dropdown-menu .dropdown-item:hover,
    .dropdown-menu li a:hover {
        background-color: #eff6ff !important; /* Sfondo azzurro chiarissimo */
        color: #2563eb !important; /* Testo blu scuro */
        transform: translateX(5px); /* Piccolo spostamento elegante a destra */
    }

/* 3. Assicuriamo che il box del menu sia bianco e solido */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Bordino sottile */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; /* Ombra per staccarlo dallo sfondo */
    padding: 8px 0 !important;
}

/* ==========================================================================
   FIX SPAZIATURA HEADER (RIDUZIONE GAP)
   ========================================================================== */

/* 1. Riduciamo il padding del body (era 90px, lo portiamo a 65px) */
body {
    padding-top: 65px !important;
}

/* 2. Rimuoviamo margini superflui dal contenitore del titolo */
.page-header {
    margin-top: 15px !important; /* Solo un piccolo respiro */
    margin-bottom: 15px !important;
    padding-top: 0 !important;
}

    /* 3. Rimuoviamo il margine superiore naturale del titolo H1 */
    .page-header h1 {
        margin-top: 0 !important;
        line-height: 1 !important; /* Rende il titolo più compatto verticalmente */
    }

/* 4. Se c'è un container che avvolge tutto, riduciamo anche il suo padding */
main.main-content,
.container-fluid {
    padding-top: 5px !important;
}

/* ==========================================================================
   MODERN LIST CARD DESIGN
   ========================================================================== */
.list-card {
    background: white;
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ombra leggera */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Per altezze uguali in griglia */
    border-left: 5px solid #2563eb; /* Default Blue Accent */
}

    /* Effetto Hover: la card sale e l'ombra aumenta */
    .list-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

/* Header della Card: Titolo e Badge */
.list-card-header {
    padding: 20px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.list-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.list-card-subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 5px;
    font-style: italic;
}

/* Corpo della Card: Metriche */
.list-card-body {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.list-metric {
    display: flex;
    flex-direction: column;
}

.list-metric-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2563eb; /* Blu Elettrico */
    line-height: 1;
}

.list-metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 4px;
}

/* Footer: Utente e Azioni */
.list-card-footer {
    padding: 15px 20px;
    background: #f8fafc; /* Sfondo leggermente diverso */
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Spinge il footer in basso */
}

/* Info Utente (Avatar + Email) */
.list-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

.user-avatar-small {
    width: 24px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.7rem;
}

/* Gruppo Pulsanti */
.list-actions {
    display: flex;
    gap: 8px;
}

/* Pulsante Modifica (Icona) */
.btn-icon-soft {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    transition: all 0.2s;
}

    .btn-icon-soft:hover {
        background: #2563eb;
        color: white;
        border-color: #2563eb;
    }

/* Pulsante Visualizza (Piccolo e Pillola) */
.btn-view-sm {
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50px;
    background: #eff6ff;
    color: #2563eb;
    border: none;
    transition: all 0.2s;
    text-transform: uppercase;
}

    .btn-view-sm:hover {
        background: #2563eb;
        color: white;
    }

/* ==========================================================================
   GESTIONE PROGETTI: MATRICE EISENHOWER & NAVIGAZIONE
   (Incolla in fondo a site.css)
   ========================================================================== */

/* 1. Navigazione a Pillola (Sostituisce i vecchi bottoni blu) */
.view-toggle {
    background: white;
    padding: 5px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    gap: 5px;
    margin-bottom: 20px;
}

    .view-toggle .btn {
        border-radius: 40px !important;
        border: none !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        padding: 8px 20px !important;
        color: #64748b;
        background: transparent !important;
        box-shadow: none !important;
        transition: all 0.2s ease;
    }

        .view-toggle .btn:hover {
            background-color: #f1f5f9 !important;
            color: #1e293b !important;
        }

        /* Stato attivo del bottone (simulato con classe o focus) */
        .view-toggle .btn:focus,
        .view-toggle .btn:active,
        .view-toggle .btn.active {
            background-color: var(--crm-primary) !important;
            color: white !important;
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
        }

    /* Bottone Kanban specifico */
    .view-toggle .btn-success {
        color: #10b981 !important;
    }

        .view-toggle .btn-success:hover,
        .view-toggle .btn-success:active {
            background-color: #10b981 !important;
            color: white !important;
        }

/* 2. Griglia Matrice */
.eisenhower-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: calc(100vh - 240px);
    min-height: 600px;
}

/* 3. Quadranti */
.matrix-quadrant {
    background: #f8fafc; /* Grigio ghiaccio */
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

    .matrix-quadrant:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

/* Header Quadranti */
.quadrant-header {
    padding: 12px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: white;
}

/* Colori Header */
.quadrant-urgent-important .quadrant-header {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.quadrant-noturgent-important .quadrant-header {
    background: linear-gradient(135deg, #10b981, #047857);
}

.quadrant-urgent-notimportant .quadrant-header {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

.quadrant-noturgent-notimportant .quadrant-header {
    background: linear-gradient(135deg, #64748b, #334155);
}

/* Area di Drop (Corpo) */
.drop-zone {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* 4. Nuova Task Card (quella generata via JS) */
.task-card {
    background: white;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    border-left: 4px solid transparent;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .task-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    }

/* Colori bordi laterali card */
.border-red {
    border-left-color: #ef4444 !important;
}

.border-green {
    border-left-color: #10b981 !important;
}

.border-orange {
    border-left-color: #f59e0b !important;
}

.border-gray {
    border-left-color: #64748b !important;
}

/* Stili interni card */
.task-card strong {
    color: #334155;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.task-card small {
    font-size: 0.75rem;
    color: #94a3b8;
}

.task-card .badge {
    font-weight: 500;
    font-size: 0.65rem;
    border-radius: 4px;
    padding: 4px 6px;
}

/* ==========================================================================
   DASHBOARD PROGETTI: LAYOUT COMPATTO
   ========================================================================== */

/* 1. Griglia Indicatori (4 in una riga) */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px; /* Spazio ridotto sotto */
}

/* 2. Card Statistica Compatta */
.stat-card-small {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Icona a destra, testo a sinistra */
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
    transition: transform 0.2s;
    height: 100px; /* Altezza fissa contenuta */
}

    .stat-card-small:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    }

/* Contenuto Testuale */
.stat-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

/* Icona (Cerchio colorato) */
.stat-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Colori Icone */
.icon-bg-red {
    background-color: #fee2e2;
    color: #ef4444;
}
/* Scaduti */
.icon-bg-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}
/* Oggi */
.icon-bg-green {
    background-color: #dcfce7;
    color: #10b981;
}
/* Prossimi */
.icon-bg-orange {
    background-color: #ffedd5;
    color: #f97316;
}
/* Attivi */

/* 3. Lista Task in Scadenza (Compatta) */
.task-due-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Spazio minimo tra i task */
}

.task-due-item {
    background: white;
    border-radius: 8px;
    padding: 12px 15px;
    border-left: 4px solid #ef4444; /* Linea rossa */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: background 0.2s;
}

    .task-due-item:hover {
        background-color: #fef2f2;
    }

.task-due-info h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}

.task-due-info small {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   STOP AI MOVIMENTI (NO HOVER MOTION)
   Incolla questo blocco alla fine del tuo file CSS
   ========================================================================== */

/* Seleziona tutte le card, i bottoni e gli elementi interattivi */
.card:hover,
.stat-card:hover,
.stat-card-small:hover,
.template-card-modern:hover,
.list-card:hover,
.matrix-task:hover,
.kanban-task:hover,
.btn:hover,
.btn-primary:hover,
.nav-link:hover,
.attachment-upload-area:hover,
.task-due-item:hover,
.matrix-quadrant:hover {
    /* Blocca qualsiasi spostamento fisico */
    transform: none !important;
}

/* ==========================================================================
   FIX PROGRESS BARS (Alta Visibilità)
   Incolla alla fine di site.css
   ========================================================================== */

/* Sfondo della barra (il "binario") deve essere grigio chiaro ma visibile */
.progress {
    background-color: #e2e8f0 !important; /* Grigio visibile */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Leggera profondità */
    overflow: hidden;
}

/* La barra colorata che si riempie */
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #3b82f6; /* Blu standard acceso */
    transition: width 0.6s ease;
    box-shadow: none;
}

/* Varianti colore più accese */
.bg-success {
    background-color: #10b981 !important;
}
/* Verde Smeraldo */
.bg-info {
    background-color: #06b6d4 !important;
}
/* Ciano */
.bg-warning {
    background-color: #f59e0b !important;
}
/* Ambra */
.bg-danger {
    background-color: #ef4444 !important;
}
/* Rosso */

/* ========================================
   FIX SIDEBAR PROGETTI - Testo visibile
   ======================================== */

/* Forza testo bianco nella sidebar progetti */
.projects-sidebar,
.projects-sidebar * {
    color: white !important;
}

    /* Elementi specifici della sidebar */
    .projects-sidebar .sidebar-header h2,
    .projects-sidebar .sidebar-content,
    .projects-sidebar .project-item,
    .projects-sidebar .project-item-content,
    .projects-sidebar .activity-item,
    .projects-sidebar .activity-item-content,
    .projects-sidebar .task-item,
    .projects-sidebar .task-content,
    .projects-sidebar .task-name,
    .projects-sidebar label,
    .projects-sidebar span,
    .projects-sidebar p {
        color: white !important;
    }

    /* Link nella sidebar */
    .projects-sidebar a,
    .projects-sidebar a:hover,
    .projects-sidebar a:visited {
        color: white !important;
    }

    /* Testo muted/secondario - renderlo grigio chiaro invece che scuro */
    .projects-sidebar .text-muted,
    .projects-sidebar small,
    .projects-sidebar .text-secondary {
        color: #adb5bd !important;
    }

    /* Icone */
    .projects-sidebar i,
    .projects-sidebar .fa,
    .projects-sidebar .fas,
    .projects-sidebar .far,
    .projects-sidebar .fab {
        color: white !important;
    }

    /* Fix per icone colorate che devono rimanere colorate */
    .projects-sidebar .text-success,
    .projects-sidebar .text-warning,
    .projects-sidebar .text-danger,
    .projects-sidebar .text-info {
        color: inherit !important;
    }

        .projects-sidebar .text-success i {
            color: #27ae60 !important;
        }

        .projects-sidebar .text-warning i {
            color: #f39c12 !important;
        }

        .projects-sidebar .text-danger i {
            color: #e74c3c !important;
        }

        .projects-sidebar .text-info i {
            color: #3498db !important;
        }

    /* Input fields nella sidebar - testo scuro su sfondo chiaro */
    .projects-sidebar input[type="text"],
    .projects-sidebar input[type="search"],
    .projects-sidebar textarea,
    .projects-sidebar select {
        color: #212529 !important;
        background-color: white !important;
    }

    .projects-sidebar input::placeholder {
        color: #6c757d !important;
    }

    /* Bottoni nella sidebar */
    .projects-sidebar .btn {
        color: white !important;
    }

    .projects-sidebar .btn-light,
    .projects-sidebar .btn-outline-light {
        color: #212529 !important;
    }

    /* Badge nella sidebar */
    .projects-sidebar .badge {
        color: white !important;
    }

        .projects-sidebar .badge.bg-light {
            color: #212529 !important;
        }

    /* Task badges */
    .projects-sidebar .task-badge {
        color: white !important;
    }

    /* Hover states */
    .projects-sidebar .project-item:hover,
    .projects-sidebar .activity-item:hover,
    .projects-sidebar .task-item:hover {
        color: white !important;
    }

    /* Active states */
    .projects-sidebar .project-item.active {
        color: white !important;
    }
/* ==========================================================================
   FIX MENU MOBILE SCROLLABILE
   Aggiungi questo CSS al progetto per sistemare la visualizzazione
   del menu su dispositivi mobile
   ========================================================================== */

/* Su mobile, rendi il menu scrollabile quando è aperto */
@media (max-width: 991.98px) {
    /* Container del menu quando è aperto */
    .navbar-collapse {
        position: fixed !important;
        top: 56px !important; /* Altezza della navbar */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
        padding: 20px !important;
        overflow-y: auto !important; /* CHIAVE: permette lo scroll verticale */
        max-height: calc(100vh - 56px) !important; /* Altezza massima = schermo - navbar */
        z-index: 1050 !important;
        -webkit-overflow-scrolling: touch; /* Scroll fluido su iOS */
    }

        /* Quando il menu NON è aperto, nascondi correttamente */
        .navbar-collapse:not(.show) {
            display: none !important;
        }

        /* Menu aperto: mostra con transizione */
        .navbar-collapse.show {
            display: block !important;
        }

    /* Voci del menu su mobile - più grandi e leggibili */
    .navbar-nav {
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 100px !important; /* Spazio extra in fondo per scroll completo */
    }

        .navbar-nav .nav-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .navbar-nav .nav-link {
            padding: 15px 10px !important;
            font-size: 1rem !important;
            display: block !important;
        }

        /* Dropdown menu su mobile - espandibile inline */
        .navbar-nav .dropdown-menu {
            position: static !important;
            float: none !important;
            width: 100% !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 0 0 15px !important; /* Indentazione sottovoci */
            border-radius: 0 !important;
        }

            .navbar-nav .dropdown-menu .dropdown-item {
                color: rgba(255, 255, 255, 0.9) !important;
                padding: 12px 15px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }

                .navbar-nav .dropdown-menu .dropdown-item:hover,
                .navbar-nav .dropdown-menu .dropdown-item:active {
                    background: rgba(255, 255, 255, 0.1) !important;
                    color: white !important;
                    transform: none !important; /* Rimuove animazioni problematiche su touch */
                }

    /* Assicuriamo che il body non si muova quando il menu è aperto */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* Fix per la navbar fissa su mobile */
    .navbar.fixed-top {
        position: fixed !important;
    }

    /* Hamburger menu più visibile */
    .navbar-toggler {
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        padding: 8px 12px !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* === Widget Task in Scadenza === */
.task-deadline-item {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

    .task-deadline-item:hover {
        border-left-color: #3b82f6;
        transform: translateX(3px);
    }

    .task-deadline-item .badge-overdue,
    .task-deadline-item .badge.bg-danger {
        animation: pulse-badge 1.5s infinite;
    }

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Fix aggiuntivo per schermi molto piccoli */
@media (max-width: 576px) {
    .navbar-collapse {
        top: 50px !important; /* Navbar leggermente più piccola su mobile */
        max-height: calc(100vh - 50px) !important;
    }

    .navbar-nav .nav-link {
        padding: 12px 8px !important;
        font-size: 0.95rem !important;
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }
}

/* ========================================
   COMPANY LOGO NELLA NAVBAR
   ======================================== */
.company-nav-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px;
}

.company-nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 12px;
}