/* Stile Globale (da lwsi-software) */
:root {
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22c55e;
  --accent-2:#3b82f6;
  --danger:#ef4444;
  --border:#1f2937;
  --input-disabled-bg: #1e40af;
  --accent-3:var(--text);
  
  /* --- VARIABILI STAMPA DINAMICA (Default) --- */
  --print-row-height: 40px; 
  --print-font-size: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  background: var(--bg);
  color: var(--text);
}

main { max-width: 1300px; margin: 0 auto; padding: 16px; width: 100%; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 12px 0; }
.card.sub { background: #0b1220; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.error { color: var(--danger); display: none; } 

/* Contenitori Pagina */
.page-container { display: none; }
.page-container.active { display: block; }

/* ======== APP PRINCIPALE ======== */
/* Header */
/* Header (Senza linea inferiore per unire visivamente ai bottoni) */
.topbar {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px;
    margin-bottom: 0 !important; /* Toglie lo spazio sotto il titolo */
    padding: 12px 16px; 
    background: var(--card); 
    border-bottom: none !important; /* <--- RIMUOVE LA RIGA DIVISORIA */
    width: 100%; 
    max-width: 1300px; 
    margin-left: auto; 
    margin-right: auto;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h2 { margin: 0; color: var(--accent-2); }
.right { display: flex; align-items: center; gap: 10px; }
.chip { background: #0b1220; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; font-size: .9rem; color: var(--muted); }

/* ============================================================
   --- STILE TABS WMS PULITO (INTEGRATO CON HEADER) ---
   ============================================================ */

/* Barra contenitore: attaccata all'header */
.tabs-bar {
    display: flex;
    justify-content: center;
    margin: 0 0 20px 0; /* Margin-top 0 per attaccarlo all'header */
    padding-top: 10px;  /* Un po' di aria interna */
    background: transparent;
    border-bottom: none !important;
    position: sticky;
    top: 0;
    z-index: 99;
}

/* Gruppo bottoni */
.mode-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Bottone INATTIVO: Senza bordo bianco visibile */
.mode-switch .tab {
    background-color: #1f2937;
    color: #9ca3af;
    border: 1px solid transparent !important; /* <--- TOGLIE IL BORDO BIANCO */
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

/* Hover */
.mode-switch .tab:hover {
    background-color: #374151;
    color: white;
}

/* Bottone ATTIVO: Blu Pieno */
.mode-switch .tab.active {
    background-color: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

/* Adattamento Mobile */
@media screen and (max-width: 900px) {
    .tabs-bar {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    .mode-switch {
        flex-wrap: nowrap;
    }
    .mode-switch .tab {
        white-space: nowrap;
    }
}

/* Contenuto Pagina */
.page-content { display: none; }
.page-content.active { display: block; }

/* ======== Stazione Timbratura (Kiosk) ======== */
.kiosk-mode { text-align: center; padding-top: 15vh; }
.kiosk-mode h1 { font-size: 2.5em; font-weight: 300; color: var(--text); }
.kiosk-mode #kiosk-feedback { font-size: 1.5em; min-height: 2em; display: block; }
#kiosk-feedback.success { color: var(--accent); display: block; }
#kiosk-feedback.error { color: var(--danger); display: block; }

/* --- STILE BOTTONE KIOSK --- */
.kiosk-print-action {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    padding: 15px 30px; font-size: 1.2rem; background-color: #374151; color: #e5e7eb;
    border: 1px solid #4b5563; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    opacity: 0.7; transition: opacity 0.3s; z-index: 100;
}
.kiosk-print-action:hover { opacity: 1; background-color: #1f2937; }

/* --- CONTROLLI ADMIN IN TIMBRATURA (NUOVO) --- */
#kiosk-admin-controls {
    display: none; /* Nascosto di default */
}
.admin-mode-active #kiosk-admin-controls {
    display: block !important; /* Mostra solo se admin */
}

/* ======== Elementi Form e Bottoni ======== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], select, textarea {
    width: 100%; padding: 8px 10px; background: #0b1220; border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 1rem;
}
input:disabled, select:disabled, textarea:disabled { background: #1f2937; opacity: 0.7; cursor: not-allowed; }
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

button {
    padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border);
    cursor: pointer; font-size: 0.95rem; font-weight: 600;
}
button.primary { background: var(--accent); color: #000; border-color: var(--accent); }
button.secondary { background: #374151; color: var(--text); border-color: #4b5563; }
button.danger { background-color: var(--danger); color: white; border-color: #b91c1c; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ======== Stili Header Pagina ======== */
.header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.header-bar h2 { margin: 0; }
.header-bar button { width: auto; font-size: 0.9rem; }

/* ============================================================
   --- STILE BASE TABELLA (COMUNE A TUTTE) ---
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: middle; }
.data-table th { background-color: #1f2937; }
.data-table tbody tr:hover { background-color: #1a2438; }
.data-table .status-attivo { color: var(--accent); font-weight: 600; }
.data-table .status-disattivato { color: var(--muted); font-style: italic; }
.data-table button { padding: 4px 8px; font-size: 0.85rem; margin-right: 5px; }

/* ============================================================
   --- 1. CONFIGURAZIONE TABELLE DIPENDENTI & SISTEMA (7 Colonne) ---
   ID: #dipendenti-table, #system-users-table
   ============================================================ */
#dipendenti-table, #system-users-table { table-layout: fixed; width: 100%; }

/* 1. Nome Cognome */
#dipendenti-table th:nth-child(1), #dipendenti-table td:nth-child(1),
#system-users-table th:nth-child(1), #system-users-table td:nth-child(1) { 
    width: 20%; min-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}
/* 2. Email */
#dipendenti-table th:nth-child(2), #dipendenti-table td:nth-child(2),
#system-users-table th:nth-child(2), #system-users-table td:nth-child(2) { 
    width: 22%; min-width: 150px; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}
/* 3. Badge ID */
#dipendenti-table th:nth-child(3), #dipendenti-table td:nth-child(3),
#system-users-table th:nth-child(3), #system-users-table td:nth-child(3) { width: 90px; text-align: center; }

/* 4. Contratto */
#dipendenti-table th:nth-child(4), #dipendenti-table td:nth-child(4),
#system-users-table th:nth-child(4), #system-users-table td:nth-child(4) { width: 90px; text-align: center; font-size: 0.85rem; }

/* 5. Ruolo */
#dipendenti-table th:nth-child(5), #dipendenti-table td:nth-child(5),
#system-users-table th:nth-child(5), #system-users-table td:nth-child(5) { width: 100px; text-align: center; }

/* 6. Stato */
#dipendenti-table th:nth-child(6), #dipendenti-table td:nth-child(6),
#system-users-table th:nth-child(6), #system-users-table td:nth-child(6) { width: 80px; text-align: center; }

/* 7. Azioni */
#dipendenti-table th:last-child, #dipendenti-table td:last-child,
#system-users-table th:last-child, #system-users-table td:last-child { 
    width: auto; 
    min-width: 260px; 
    text-align: center; 
    padding: 4px 2px; 
    vertical-align: middle; 
}

/* Gestione allineamento bottoni */
#dipendenti-table td:last-child, #system-users-table td:last-child { white-space: nowrap; }
#dipendenti-table td:last-child button, #system-users-table td:last-child button {
    padding: 6px 8px;
    font-size: 0.8rem;
    margin: 0 2px;
}

/* ============================================================
   --- 2. CONFIGURAZIONE TABELLA VOTI (3 Colonne) ---
   ID: #voti-table
   ============================================================ */
#voti-table { table-layout: fixed; width: 100%; max-width: 600px; margin: 0 auto; }

/* 1. Dipendente */
#voti-table th:nth-child(1), #voti-table td:nth-child(1) { width: auto; text-align: left; padding-left: 15px; }
/* 2. Media Voti */
#voti-table th:nth-child(2), #voti-table td:nth-child(2) { 
    width: 130px; text-align: center; font-weight: 600; color: var(--accent-2); border-left: 1px solid var(--border); 
}
/* 3. Azione */
#voti-table th:nth-child(3), #voti-table td:nth-child(3) { width: 140px; text-align: center; }
#voti-table td:nth-child(3) button { width: 100%; max-width: 130px; margin: 0 auto; display: block; }

/* ======== Stili Graduatoria Annuale (Scroll) ======== */
#ranking-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ranking-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; }
.ranking-table th, .ranking-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: center; vertical-align: middle; min-width: 90px; }

/* Colonna Nome (Sticky a Sinistra) */
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) {
    min-width: 180px; text-align: left; position: sticky; left: 49px; background: var(--card);
    z-index: 2; border-left: none; border-right: none; box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}
/* Colonna Posizione (Sticky a Sinistra) */
.ranking-table th:first-child, .ranking-table td:first-child {
     min-width: 50px; max-width: 50px; font-weight: 700; position: sticky; left: 0;
     background: var(--card); z-index: 3; border-left: none;
}
/* Header sticky in alto */
.ranking-table thead th { background-color: #1f2937; position: sticky; top: 0; z-index: 1; font-size: 0.85rem; }
.ranking-table thead th:first-child { z-index: 4; }
.ranking-table thead th:nth-child(2) { z-index: 4; }

/* --- Colonne Scorrevoli --- */
.ranking-table .col-q { font-weight: 500; color: var(--muted); background: #152238; }
.ranking-table .col-avg-trim { color: var(--accent-2); font-weight: 700; font-size: 1.1rem; background: #1f2937; }
/* --- Colonna Fissa DESTRA (Totale Annuo) --- */
.ranking-table .col-total-score { 
    color: var(--accent); font-weight: 700; font-size: 1.2rem; background: #1f2937; 
    position: sticky; right: 0; z-index: 2; border-left: 2px solid var(--border); 
}
.ranking-table thead th:last-child { position: sticky; right: 0; z-index: 4; }

.ranking-table tbody tr[data-rank="1"] td:first-child { color: #FFD700; } 
.ranking-table tbody tr[data-rank="2"] td:first-child { color: #C0C0C0; } 
.ranking-table tbody tr[data-rank="3"] td:first-child { color: #CD7F32; } 
.ranking-table tbody tr[data-rank="1"] td:nth-child(2) { color: #FFD770; } 

/* ======== Stili Modal (Pop-up) ======== */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 1000;
}
.modal-overlay.active { display: flex; }
.modal-content { width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.modal-content h3 { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.modal-actions button { width: auto; }


/* ======== Stili Pianificazione Orario (COMPATTO 100% SCHERMO) ======== */
.week-selector { display: flex; align-items: center; gap: 0.5rem; }
.week-selector h3 { margin: 0; font-size: 1.2rem; color: var(--text); width: 300px; text-align: center; }
.week-selector button { width: 40px; height: 40px; font-size: 1rem; padding: 0; line-height: 0; }

.schedule-card { padding: 0; overflow-x: auto; }

/* 1. TABELLA FISSA (KEY FIX) */
.schedule-table { 
    width: 100%; 
    table-layout: fixed; /* FONDAMENTALE: Obbliga la tabella a stare nello schermo */
    border-collapse: collapse; 
    font-size: 0.85rem; /* Font leggermente ridotto */
    white-space: normal; /* Permette al testo di andare a capo */
}

/* 2. CELLE GENERICHE */
.schedule-table th, .schedule-table td { 
    border: 1px solid var(--border); 
    padding: 4px 2px; /* Padding ridotto per guadagnare spazio */
    text-align: center; 
    vertical-align: top; 
    height: auto; /* Altezza automatica in base al contenuto */
}

/* 3. GESTIONE LARGHEZZE COLONNE (Totale ~100%) */

/* A. Nome Dipendente (14%) */
.schedule-table tbody th,
.schedule-table thead th:first-child { 
    width: 14%; 
    min-width: 110px; /* Minimo sindacale per leggere il nome */
    background-color: #111827; 
    font-weight: 600; 
    position: sticky; 
    left: 0; 
    z-index: 10; 
    text-align: left; 
    padding-left: 8px;
    overflow: hidden; text-overflow: ellipsis;
}
.schedule-table tbody th .contract-type { font-size: 0.75rem; color: var(--muted); font-weight: 400; display: block; }

/* B. Giorni della Settimana (9.5% x 7 = 66.5%) */
.schedule-table thead th:nth-child(n+2):nth-child(-n+8),
.schedule-table tbody td:nth-child(n+2):nth-child(-n+8) {
    width: 9.5%;
}

/* C. Colonne Totali (4.8% x 4 = ~19.2%) */
/* Rimuoviamo min-width: 60px/70px che causavano lo scroll */
.schedule-table .total-hours-cell, 
.schedule-table .total-spezzati-cell, 
.schedule-table .total-deroga-cell,
.schedule-table .total-pause-cell {
    width: 4.8%; 
    min-width: 0; 
    text-align: center !important; 
    vertical-align: middle !important; 
    font-weight: bold; 
    background: #1f2937;
    font-size: 0.75rem;
    padding: 0 1px;
}
.schedule-table .total-hours-cell.deficit { color: var(--danger); }
.schedule-table .total-hours-cell.surplus { color: var(--accent); }
.schedule-table .total-deroga-cell.has-deroga-value { color: var(--danger); }

/* 4. HEADER TABELLA */
.schedule-table thead th { 
    background-color: #1f2937; 
    padding: 8px 2px; 
    font-size: 0.8rem;
    white-space: nowrap; /* Header su una riga (Lun 19...) */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. STILE CELLE E TAG (Compattati) */
.schedule-cell { vertical-align: top; }
.admin-mode-active .schedule-cell, .employee-mode-active .schedule-cell { cursor: pointer; }
.admin-mode-active .schedule-cell:hover { background-color: #1f2937; }

.schedule-cell.is-riposo { background-color: #1f2937; color: var(--muted); font-style: italic; font-size: 0.8rem; }
.schedule-cell.has-deroga { background-color: rgba(239, 68, 68, 0.15); border: 1px dashed var(--danger); }

/* Etichette Turno (Ora vanno a capo) */
.shift-tag { 
    display: block; 
    background: var(--accent-2); 
    color: white; 
    font-weight: 600; 
    border-radius: 4px; 
    padding: 2px 1px; /* Molto compatto */
    font-size: 0.75rem; /* Font piccolo */
    margin-bottom: 2px; 
    white-space: normal; /* FONDAMENTALE: Permette di andare a capo */
    line-height: 1.1;
}
.shift-tag.is-spezzato { background: var(--accent); color: #000; }
.shift-tag.has-deroga { border: 2px solid var(--danger); }
.shift-tag.is-approved { background-color: #8b5cf6; color: white; }
.shift-riposo { color: var(--muted); font-size: 0.8rem; }

/* Bilanci */
.schedule-balance-tag { font-size: 0.7rem; font-weight: 700; display: inline-block; padding: 1px 4px; border-radius: 3px; margin-top: 2px; cursor: pointer; }
.schedule-balance-tag.balance-positive { color: var(--accent); background: rgba(34, 197, 94, 0.1); }
.schedule-balance-tag.balance-negative { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.schedule-balance-tag.balance-zero { color: var(--muted); }

/* Footer */
.schedule-table tfoot td { background-color: #111827; font-weight: bold; text-align: center; vertical-align: middle; font-size: 0.8rem; }
.schedule-table tfoot td:first-child { text-align: right; padding-right: 1rem; }

.time-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.time-grid span { text-align: center; color: var(--muted); }
#schedule-modal-info { margin: -1rem 0 1rem 0; font-size: 1.1rem; font-weight: 500; color: var(--text); }

/* 5. Tabs (Se le usi ancora) - TIENI */
#report-tabs-bar { margin-top: 0; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.report-tab-content { display: none; }
.report-tab-content.active { display: block; }

/* --- TUTTO IL RESTO È STATO RIMOSSO PERCHÉ VA IN CONFLITTO --- */
/* Le regole per #spezzati-table, #deroga-table e i margini vecchi */
/* sono ora gestite dal blocco "FIX DEFINITIVO" in fondo al file. */

/* ======== Stili Modalità Kiosk/Admin/Dipendente ======== */
.kiosk-mode-active .tabs-bar, 
.kiosk-mode-active main > .page-content:not(#timbratura-content) { display: none !important; }
.kiosk-mode-active .topbar { 
    display: flex !important;
    justify-content: space-between; 
}
.kiosk-mode-active #timbratura-content { display: block !important; padding-top: 25vh; }
.kiosk-mode-active main { padding: 0; max-width: none; }

.employee-mode-active .tab[data-page="timbratura"], .employee-mode-active .tab[data-page="voti"], .employee-mode-active .tab[data-page="dipendenti"] { display: none !important; }
.employee-mode-active #timbratura-content, .employee-mode-active #voti-content, .employee-mode-active #dipendenti-content { display: none !important; }
.employee-mode-active .report-tab-admin, .employee-mode-active .schedule-balance-tag { display: none !important; }

/* NUOVO: Elementi nascosti ai non admin */
.admin-only-content { display: none !important; }
.admin-mode-active .admin-only-content { display: flex !important; }

.app-footer { text-align: center; opacity: 0.6; margin-top: 40px; margin-bottom: 20px; padding: 10px; }
.app-footer img { width: 100px; height: auto; }

/* ======== Stili Dashboard ======== */
.today-shift-list { list-style: none; padding: 0; margin: 1rem 0 0 0; }
.today-shift-list li { padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 1rem; display: flex; justify-content: space-between; align-items: center; }
.today-shift-list li:last-child { border-bottom: none; }
.today-shift-list li strong { color: var(--text); font-weight: 600; }
.today-shift-list li span { color: var(--accent-2); font-weight: 600; }

/* ======== Stili Pagina Valutazioni ======== */
#voti-content .header-bar .input-group { width: 260px; }
.period-closed-warning { text-align: center; font-style: italic; background-color: #1f2937; color: var(--muted); }
.period-closed-warning strong { color: var(--danger); }
#voti-table .voto-totale-trimestre { font-weight: 600; font-size: 1.1rem; text-align: center; }
#voti-table .btn-edit-voto { padding: 6px 10px; }

/* ======== Stili Modal (Voti) ======== */
#voti-modal .modal-content { max-width: 850px; }
#voti-modal-info { margin: -1rem 0 1rem 0; font-size: 1.1rem; font-weight: 500; color: var(--text); }
.voti-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-height: 60vh; overflow-y: auto; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.voti-form-grid fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.voti-form-grid fieldset legend { font-size: 1.1rem; font-weight: 600; color: var(--accent-2); margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); width: 100%; padding-bottom: 5px; }
.voto-item { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.75rem; }
.voto-item label { font-size: 0.95rem; color: var(--text); font-weight: 500; grid-column: 1; }
.voto-item .voto-desc { font-size: 0.8rem; color: var(--muted); font-style: italic; margin: -5px 0 0 0; grid-column: 1; }
.voto-item .voto-input { width: 60px; padding: 6px 8px; font-size: 0.95rem; text-align: center; grid-column: 2; grid-row: 1 / span 2; }
.voto-item.simple { grid-template-columns: 1fr auto; margin-bottom: 0; grid-template-rows: 1fr; }
.voto-item.simple label { grid-row: 1; }
.voto-item.simple .voto-desc { display: none; }
.voto-item.simple .voto-input { grid-row: 1; }
.dynamic-container { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.voto-dynamic-item { display: grid; grid-template-columns: 1fr 70px 40px; gap: 0.5rem; align-items: center; }
.voto-dynamic-item .voto-dynamic-nome { font-size: 0.95rem; padding: 6px 8px; }
.voto-dynamic-item .voto-dynamic-voto { width: 100%; padding: 6px 8px; font-size: 0.95rem; text-align: center; }
.voto-dynamic-item .btn-remove-subcat { padding: 6px; font-size: 0.8rem; width: 100%; line-height: 1; }
.btn-add-subcat { width: 100%; font-size: 0.9rem; padding: 6px; }
#voto-note-globali { width: 100%; }

/* --- Stili Richieste e Correzioni --- */
.schedule-cell.is-pending { background-color: rgba(234, 179, 8, 0.15); border: 1px dashed #eab308; cursor: pointer; }
.admin-mode-active .schedule-cell.is-pending:hover { background-color: rgba(234, 179, 8, 0.3); }
.employee-mode-active .schedule-cell.is-pending:hover { background-color: rgba(234, 179, 8, 0.3); }
.schedule-cell.is-leave { background-color: rgba(253, 224, 71, 0.1); border: 1px solid #fde047; }
.shift-tag.is-leave { display: block; background-color: #fde047; color: #1f2937; font-style: italic; font-weight: 600; border-radius: 4px; padding: 4px 6px; font-size: 0.9rem; margin-bottom: 4px; }
#schedule-modal-actions-request { display: none; }

/* --- STILI GRIGLIA 3 RIGHE (Visibili solo per struttura, trasparenti a schermo) --- */
.day-grid-container { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    height: 100%; 
    justify-content: center;
}
.day-row { display: block; min-height: 14px; } /* Altezza minima per le righe ruolo */
.day-row:empty { display: none; }
.day-row.role { font-size: 0.75rem; color: var(--muted); min-height: 0; }
.day-row.role-morning { font-size: 0.75rem; color: var(--accent-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-row.role-afternoon { font-size: 0.75rem; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Stile per la colonna Pause a video */
.schedule-table .total-pause-cell {
    text-align: center !important; 
    vertical-align: middle !important; 
    font-weight: bold; 
    background: #1f2937;
}

@media screen and (max-width: 650px) {
    .data-table, .schedule-table, .ranking-table { font-size: 0.75rem; }
    .schedule-table th, .schedule-table td { padding: 4px 6px; min-width: 40px; height: auto; }
    #dipendenti-content .card { overflow-x: auto; }
    #dipendenti-table { min-width: 600px; }
    .schedule-table thead th { min-width: 80px; font-size: 0.7rem !important; }
    .schedule-table tbody th { min-width: 120px; font-size: 0.8rem; position: static; left: 0; z-index: 1; }
    .ranking-table th:nth-child(2), .ranking-table td:nth-child(2), .ranking-table th:first-child, .ranking-table td:first-child { position: static; }
    .schedule-table tbody th .contract-type { display: none; }
    .shift-tag { font-size: 0.7rem; padding: 2px 4px; margin-bottom: 2px; }
    #spezzati-table th:nth-child(n+4):nth-child(-n+10), #spezzati-table td:nth-child(n+4):nth-child(-n+10) { display: none; }
}

@media screen and (max-width: 480px) {
    .week-selector h3 { width: 150px; font-size: 1rem; }
    .week-selector button { width: 30px; height: 30px; }
    .schedule-table th:nth-last-child(-n+3), .schedule-table td:nth-last-child(-n+3) { display: none !important; }
}


/* --- STILI TOGGLE SWITCH (PUBBLICAZIONE ORARIO) --- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1f2937;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.toggle-switch-container label {
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* --- MESSAGGIO ORARIO NON PUBBLICATO --- */
.unpublished-notice {
    text-align: center;
    padding: 40px 20px;
    background-color: #1f2937;
    border: 1px dashed var(--muted);
    border-radius: 8px;
    color: var(--muted);
    font-style: italic;
    font-size: 1.1rem;
}

/* =========================================================
   --- NOTIFICHE (Nuovo) ---
   Stili per campanella, badge e menu a tendina
   ========================================================= */
#notification-container { position: relative; }

.icon-btn { 
    background: transparent; border: none; font-size: 1.5rem; cursor: pointer; 
    position: relative; padding: 5px; transition: transform 0.2s; color: var(--text);
}
.icon-btn:hover { transform: scale(1.1); color: white; }

.badge { 
    position: absolute; top: 0; right: 0; background-color: var(--danger); 
    color: white; border-radius: 50%; padding: 2px 5px; font-size: 0.7rem; 
    font-weight: bold; min-width: 18px; text-align: center; border: 1px solid var(--bg); 
}

.dropdown-menu {
    display: none; position: absolute; top: 50px; right: 0; width: 320px;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 2000; overflow: hidden;
}
.dropdown-menu.show { display: block; animation: fadeIn 0.2s; }

.dropdown-header { 
    padding: 10px 15px; background: #1f2937; border-bottom: 1px solid var(--border); 
    display: flex; justify-content: space-between; align-items: center; 
    font-weight: 600; font-size: 0.95rem; color: var(--text);
}

.text-btn { 
    background: none; border: none; color: var(--accent-2); cursor: pointer; 
    font-size: 0.8rem; text-decoration: underline; padding: 0; 
}
.text-btn:hover { color: var(--text); }

#notification-list { list-style: none; margin: 0; padding: 0; max-height: 350px; overflow-y: auto; }

.notification-item { 
    padding: 12px 15px; border-bottom: 1px solid var(--border); cursor: pointer; 
    transition: background 0.2s; display: flex; flex-direction: column; gap: 4px; 
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background-color: #1f2937; }
.notification-item.unread { 
    background-color: rgba(59, 130, 246, 0.1); border-left: 3px solid var(--accent-2); 
}

.notification-text { font-size: 0.9rem; color: var(--text); line-height: 1.4; }
.notification-time { font-size: 0.75rem; color: var(--muted); }

.empty-state { padding: 20px; text-align: center; color: var(--muted); font-style: italic; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- LOGIN SCREEN IDENTICO WMS+ --- */

/* Centramento totale e sfondo radiale */
.full-page-center {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    z-index: 10000;
}

.login-container {
    width: 100%;
    max-width: 400px;
    background: #1e293b; /* Colore card scura */
    border: 1px solid #1f2937;
    border-top: 5px solid #b8c522; /* Barra blu superiore distintiva */
    border-radius: 12px;
    padding: 40px 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.login-brand {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    max-width: 100px;
    height: auto;
    /* Rende il logo fluido e integrato */
}

.app-subtitle {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
    margin: 0;
}

.login-form .input-group {
    text-align: left;
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Input stile WMS+ (Sfondo scuro) */
/* Applichiamo lo stile a tutti gli input dentro il form di login */
#login-form input {
    width: 100%;
    /* Definiamo un'altezza esatta per garantire l'uniformità */
    height: 50px; 
    /* Il padding interno mantiene il testo centrato verticalmente */
    padding: 0 15px; 
    background: #0b1220;
    border: 1px solid #1f2937;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    /* Importante per far sì che padding e border non aumentino l'altezza totale */
    box-sizing: border-box; 
    margin-bottom: 15px;
}

/* Rimuoviamo eventuali differenze di colore viste negli screenshot */
#login-form input[type="email"], 
#login-form input[type="password"] {
    background-color: #0b1220 !important;
}

.login-form input:focus {
    border-color: #3b82f6;
    outline: none;
}

/* Bottone identico */
#btn-login {
    width: 100%;
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
}

.login-footer {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid #1f2937;
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.5;
}

.version-tag {
    color: #22c55e;
    font-weight: bold;
}

.error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 10px;
    font-weight: 600;
}

/* Classe helper per nascondere */
.hidden {
    display: none !important;
}

.app-footer {
    padding: 20px;
    text-align: center;
    background-color: #0f172a; /* Coerente con il manifest */
    color: #64748b; /* Grigio tenue per non distrarre */
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 40px;
}

.version-tag {
    font-weight: bold;
    color: var(--accent, #3b82f6);
    margin-top: 5px;
}

.legal-notice {
    font-style: italic;
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Se il login-card non ha la classe active, deve sparire categoricamente */
#login-card:not(.active) {
    display: none !important;
}

/* Lista Ruoli Opzioni */
.role-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px; border-bottom: 1px solid var(--border); background: #1f2937; margin-bottom: 4px; border-radius: 4px;
}
.role-list-item span { font-weight: 500; }
.role-list-item button { padding: 2px 6px; font-size: 0.8rem; }

/* ============================================================
   STILI BADGE DIPENDENTE (80mm x 40mm - Bianco e Nero)
   ============================================================ */
#badge-print-container {
display: none;
}

.badge-card {
width: 80mm;  /* Larghezza 8 cm */
height: 40mm; /* Altezza 4 cm */
border: 1px solid #000; /* Bordo nero sottile per il taglio */
border-radius: 0; /* Angoli vivi o poco arrotondati */
padding: 2mm 4mm;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-family: 'Helvetica', Arial, sans-serif;
background: white;
color: black;
position: relative;
overflow: hidden;
}

/* Header: Logo a sinistra, Brand a destra */
.badge-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #000; /* Linea nera semplice */
padding-bottom: 1mm;
margin-bottom: 1mm;
}

.badge-logo { 
height: 8mm; /* Logo piccolo proporzionato */
width: auto; 
filter: grayscale(100%); /* Forza B/N se l'immagine è colorata */
}

.badge-brand { 
font-weight: 800; 
font-size: 9pt; 
color: #000; 
}

/* Corpo centrale */
.badge-body {
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1mm;
width: 100%;
}

#badge-print-name {
margin: 0;
font-size: 11pt; /* Font leggibile */
font-weight: 900;
text-transform: uppercase;
line-height: 1;
}

.badge-info-row {
font-size: 8pt;
color: #000;
text-transform: uppercase;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Footer con Barcode */
.badge-footer {
width: 100%;
text-align: center;
height: 9mm;
overflow: hidden;
}

#badge-barcode {
width: 100%;
height: 100%;
}

/* --- STILE BADGE DIGITALE (DASHBOARD) --- */
.digital-badge-card {
    background: white;
    color: black;
    border-radius: 10px;
    padding: 15px;
    margin: 10px auto;
    max-width: 300px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border-top: 5px solid #3b82f6; /* Fascia blu in alto */
}

.db-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 10px;
}

.db-brand {
    font-weight: 800; color: #3b82f6; font-size: 0.9rem;
}

#db-name {
    margin: 0; font-size: 1.2rem; font-weight: 800; text-transform: uppercase;
}

#db-role {
    margin: 0 0 10px 0; font-size: 0.8rem; color: #666; text-transform: uppercase; font-weight: 600;
}

#db-barcode {
    width: 100%; height: 60px; /* Abbastanza grande per essere letto */
}

/* Stile specifico per il contenitore QR */
#db-qrcode {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: white; /* Il QR deve avere sfondo bianco per contrasto */
}

#db-qrcode img {
    border: 4px solid white; /* Bordo bianco extra per sicurezza lettura */
}

/* ==========================================================================
   MOBILE OPTIMIZATION PACK (FINAL VERSION)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- LAYOUT GENERALE --- */
    main { padding: 10px !important; width: 100% !important; overflow-x: hidden; }
    .card { padding: 12px !important; margin: 10px 0 !important; width: 100% !important; }

    /* --- HEADER E TASTI CENTRATI --- */
    .topbar { flex-direction: column !important; align-items: center !important; gap: 10px !important; padding: 10px !important; height: auto !important; }
    .topbar .brand { width: 100%; justify-content: center; margin-bottom: 2px; }
    .topbar .right { width: 100%; justify-content: center !important; gap: 10px; }
    .tabs-bar { justify-content: center !important; margin-top: 10px; }
    .mode-switch { flex-wrap: wrap !important; justify-content: center; }

    /* --- FIX NOTIFICHE (MODALE CENTRALE SU MOBILE) --- */
    .dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 350px !important;
        max-height: 50vh !important;
        box-shadow: 0 0 0 1000px rgba(0,0,0,0.7) !important; /* Oscura lo sfondo */
        z-index: 9999 !important;
    }
    /* Quando si apre, l'animazione deve rispettare il translate */
    .dropdown-menu.show { display: block; animation: none !important; } 

    /* --- BADGE DIGITALE CENTRATO --- */
    #digital-badge-container { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .digital-badge-card { margin: 0 auto !important; width: 100%; max-width: 320px; }

    /* --- TRASFORMAZIONE TABELLE (SCHEDE VERTICALI) --- */
    /* Applica a .schedule-table (Orario) e .mobile-transform (Report Annuali) */
    .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td,
    .mobile-transform, .mobile-transform tbody, .mobile-transform tr, .mobile-transform td {
        display: block !important; width: 100% !important;
    }
    
    .schedule-table thead, .mobile-transform thead { display: none !important; }
    .schedule-table tbody th, .mobile-transform tbody th { display: none !important; }

    .schedule-table tr, .mobile-transform tr {
        margin-bottom: 15px; border: 1px solid #374151; border-radius: 12px; background: #111827; overflow: hidden;
    }

    .schedule-table td, .mobile-transform td {
        display: flex !important; justify-content: space-between; align-items: center;
        padding: 12px 15px !important; border: none !important; border-bottom: 1px solid #1f2937 !important;
        text-align: right !important; min-height: 50px;
    }
    .schedule-table td:last-child, .mobile-transform td:last-child { border-bottom: none !important; }

    /* --- COLORI ETICHETTE MOBILE (FIX PUNTO 4) --- */
    .schedule-table td::before, .mobile-transform td::before {
        content: attr(data-label);
        font-weight: 700; 
        color: white; /* BIANCO DI DEFAULT (Giorni della settimana) */
        font-size: 0.85rem; text-transform: uppercase;
    }

    /* Eccezioni per Totali (Blu) */
    .schedule-table .total-hours-cell::before,
    .schedule-table .total-spezzati-cell::before,
    .schedule-table .total-deroga-cell::before,
    .mobile-transform .total-col-annual::before {
        color: var(--accent-2) !important; /* BLU */
    }

    /* --- REPORT A SCOMPARSA (ACCORDION PER TUTTI) --- */
    #report-tabs-bar { display: none !important; } 
    
    .report-tab-content { 
        display: block !important; 
        margin-bottom: 15px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; 
    }

    .report-tab-content .header-bar {
        background: #1f2937; padding: 15px; margin: 0; cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
    }
    .report-tab-content .header-bar::after { content: '▼'; font-size: 0.8rem; color: var(--muted); transition: transform 0.3s; }

    .report-tab-content .card { display: none; margin: 0 !important; border: none; }
    .report-tab-content.open .card { display: block; }
    .report-tab-content.open .header-bar::after { transform: rotate(180deg); }
}

/* --- AGGIUNTE PER OPZIONI DI STAMPA --- */

/* 1. VISUALIZZAZIONE CONTRATTO SOTTO IL NOME */
/* Di base nascosto in stampa */
body.printing-schedule .contract-type {
    display: none !important;
}
/* Se attivato il check, diventa visibile */
body.show-contract .contract-type {
    display: block !important;
    font-size: 8px !important;
    font-style: italic;
    margin-top: 2px;
    color: #444;
}

/* --- AGGIUNTE PER STAMPA --- */

/* 1. NASCONDI COLONNA TOTALI A VIDEO (Così non scorri) */
.col-totals { display: none; }


/* --- STILE SWITCH MODERN --- */
.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px; width: 14px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider { background-color: var(--accent-2); }
input:focus + .slider { box-shadow: 0 0 1px var(--accent-2); }
input:checked + .slider:before { transform: translateX(14px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.switch-label { font-size: 0.85rem; color: var(--text); font-weight: 500; }

/* --- LISTA ORDINAMENTO (OPZIONI) --- */
.sort-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.sort-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: #1f2937;
}

.sort-item:last-child { border-bottom: none; }

.sort-controls button {
    padding: 2px 8px;
    margin-left: 5px;
    font-size: 0.8rem;
    background: #374151;
}

.sort-item.highlight {
    background-color: rgba(59, 130, 246, 0.2); /* Luce blu quando si muove */
}

/* ============================================================
   MODALITÀ DIPENDENTE DISATTIVATO (Solo Report)
   ============================================================ */

/* 1. Nascondi TUTTE le tab tranne 'Report' */
.deactivated-mode-active .tab:not([data-page="report"]) {
    display: none !important;
}

/* 2. Nascondi tutti i contenuti tranne 'Report' */
.deactivated-mode-active .page-content:not(#report-content) {
    display: none !important;
}

/* 3. Nascondi elementi sensibili dentro il report (es. bilancio futuro se c'è) */
.deactivated-mode-active .report-tab[data-report-tab="bilancio"] {
    display: none !important; /* Opzionale: se non vuoi fargli vedere il bilancio */
}

/* 4. Feedback visivo (Opzionale: sfondo grigio o avviso) */
.deactivated-mode-active .topbar {
    background-color: #374151; /* Grigio scuro per indicare stato inattivo */
}

/* ============================================================
   RIFINITURE GRAFICHE FINALI (Stampa & Disattivato)
   Aggiungi in fondo a styles.css
   ============================================================ */

/* 1. NASCONDI IL TASTO STAMPA REPORT (Se non sei Admin) */
/* Questa regola vince su tutto: se nel body non c'è "admin-mode-active", il tasto sparisce */
body:not(.admin-mode-active) #print-report-btn {
    display: none !important;
}

/* 2. STILE SPECIALE PER UTENTE DISATTIVATO */
/* Cambia il colore della barra in alto per far capire che è in modalità limitata */
body.deactivated-mode-active .topbar {
    background-color: #2d3748 !important; /* Grigio scuro serio */
    border-bottom: 3px solid #ef4444 !important; /* Linea Rossa */
}

/* Evidenzia il nome utente in Rosso */
body.deactivated-mode-active #user-email-chip {
    background-color: #ef4444 !important; /* Rosso */
    color: white !important;
    border: none !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 4px 10px;
}

/* Nascondi il badge notifiche e logout secondario se disattivato (pulizia) */
body.deactivated-mode-active #notification-container {
    display: none !important;
}

/* 3. CENTRATURA TAB QUANDO CE N'È UNA SOLA */
/* Se l'utente è disattivato, la tab "Report" è l'unica. Centriamola bene. */
body.deactivated-mode-active .tabs-bar {
    justify-content: center !important;
    margin-top: 20px !important;
}

body.deactivated-mode-active .tab {
    background-color: #374151 !important; /* Tab più scura */
    color: #fff !important;
    border: 1px solid #4b5563 !important;
    padding: 10px 30px !important; /* Più larga */
    font-size: 1.1rem !important; /* Testo più grande */
    pointer-events: none; /* Non cliccabile (è già attiva) */
}

/* ==========================================================================
   1. STILI SOLO PER LO SCHERMO (MOBILE, TABLET & ORIZZONTALE)
   Queste regole valgono SOLO a video e vengono IGNORATE dalla stampante.
   ========================================================================== */
@media screen and (max-width: 1024px) {

    /* --- LAYOUT GENERALE COMPATTO --- */
    main { padding: 5px !important; width: 100% !important; overflow-x: hidden; }
    .card { padding: 8px !important; margin: 5px 0 !important; width: 100% !important; }
    .header-bar h2 { font-size: 1.2rem; margin: 0; }
    .header-bar { margin-bottom: 5px; }

    /* --- HEADER E TASTI (Adattivi) --- */
    .topbar { padding: 5px 10px !important; min-height: 50px; }
    
    /* Gestione Orizzontale (Landscape) */
    @media (orientation: landscape) {
        .topbar { flex-direction: row !important; justify-content: space-between !important; }
        .topbar .brand { width: auto; margin: 0; }
        .topbar .right { width: auto; }
        #user-email-chip { display: none; } 
    }

    /* --- TAB PIANIFICAZIONE: SCROLL ORIZZONTALE (STICKY) --- */
    #orario-content .schedule-table, 
    #orario-content .schedule-table tbody, 
    #orario-content .schedule-table tr {
        display: table !important; width: 100% !important; table-layout: auto !important;
    }
    #orario-content .schedule-table thead { display: table-header-group !important; }

    #orario-content .schedule-table th, 
    #orario-content .schedule-table td {
        display: table-cell !important;
        min-width: 100px; 
        text-align: center !important;
        border: 1px solid #374151 !important;
        padding: 2px !important; font-size: 0.8rem;
    }
    #orario-content .schedule-table td::before { display: none !important; }

    /* COLONNA NOME FISSA (SOLO SU SCHERMO) - SFONDO SCURO */
    #orario-content .schedule-table tbody th {
        position: sticky !important; left: 0; z-index: 20;
        background-color: #111827 !important; 
        min-width: 120px !important; max-width: 120px !important;
        border-right: 2px solid #4b5563 !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    }
    #orario-content .schedule-table thead th:first-child {
        position: sticky !important; left: 0; z-index: 21;
        background-color: #1f2937 !important;
        border-right: 2px solid #4b5563 !important;
    }

    #orario-content .schedule-table .day-grid-container { min-height: 80px !important; height: auto !important; }
    #orario-content .day-row { font-size: 0.75rem !important; line-height: 1.1; }
    #orario-content .contract-type { display: none; }

    /* --- ALTRE TABELLE (REPORT ECC) --- */
    .mobile-transform, .mobile-transform tbody, .mobile-transform tr, .mobile-transform td {
        display: block !important; width: 100% !important;
    }
    .mobile-transform thead { display: none !important; }
    .mobile-transform tr { margin-bottom: 10px; border: 1px solid #374151; background: #111827; }
    .mobile-transform td {
        display: flex !important; justify-content: space-between; padding: 8px 10px !important; border-bottom: 1px solid #1f2937 !important; text-align: right !important;
    }
    .mobile-transform td::before { content: attr(data-label); font-weight: 700; color: white; float: left; }
    
    /* FIX SETTIMANA */
    .week-selector { width: 100% !important; display: flex !important; gap: 5px !important; }
    .week-selector h3 { width: auto !important; flex: 1 !important; font-size: 0.9rem !important; white-space: normal !important; text-align: center; }
    .week-selector button { flex-shrink: 0 !important; width: 35px; height: 35px; }
}

/* --- BACHECA --- */
.announcement-item {
    background: #1f2937;
    border-left: 3px solid var(--accent);
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    position: relative;
}
.announcement-item.personal { border-left-color: #ef4444; } /* Rosso per messaggi privati */
.announcement-meta { font-size: 0.7rem; color: #9ca3af; display: block; margin-top: 5px; }
.btn-delete-ann { 
    position: absolute; top: 5px; right: 5px; 
    background: transparent; color: #666; border: none; 
    font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.btn-delete-ann:hover { color: #ef4444; }

/* --- DOCUMENTI --- */
.doc-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px; border-bottom: 1px solid #374151;
    font-size: 0.85rem; background: rgba(255,255,255,0.05); margin-bottom: 4px; radius: 4px;
}
.doc-item a { color: var(--accent-2); text-decoration: none; font-weight: 500; }
.doc-item a:hover { text-decoration: underline; }

/* ============================================================
   STILI MODALE DIPENDENTE (2 COLONNE)
   ============================================================ */

/* Layout a griglia per Desktop */
.modal-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% e 50% */
    gap: 20px;
}

/* Gestione Mobile: torna a una colonna se lo schermo è piccolo */
@media screen and (max-width: 768px) {
    .modal-split-layout {
        display: flex;
        flex-direction: column;
    }
    
    .modal-col-right {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid var(--border);
        padding-top: 20px;
        margin-top: 20px;
    }
    
    /* Riduce un po' il padding della modale su mobile */
    #dipendente-modal .modal-content {
        width: 98% !important;
        padding: 10px !important;
    }
}

/* ============================================================
   ACCORDION & BADGE STYLES
   ============================================================ */

/* Stile Intestazione Cliccabile */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 5px 0;
    user-select: none;
}

.accordion-header:hover h3 {
    color: var(--accent);
}

/* Freccia che ruota */
.accordion-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: var(--muted);
}

/* Classe per ruotare la freccia quando chiuso */
.accordion-header.collapsed .accordion-arrow {
    transform: rotate(-90deg);
}

/* Contenuto che si apre/chiude */
.accordion-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    opacity: 1;
}

/* Classe per nascondere il contenuto */
.accordion-content.collapsed {
    display: none; /* Metodo brutale ma efficace per non occupare spazio */
}

/* Badge Rosso Contatore */
.notification-badge {
    background-color: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}

/* Tasto piccolo per Admin */
.small-btn {
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    height: auto !important;
}

/* Tasto "Segna come letto" */
.btn-read-confirm {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
    display: flex; 
    align-items: center; 
    gap: 5px;
}
.btn-read-confirm:hover {
    background: var(--accent);
    color: white;
}

/* Info Admin sulle letture */
.read-stats {
    font-size: 0.7rem;
    color: #10b981; /* Verde */
    margin-top: 5px;
    font-style: italic;
    display: block;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ============================================================
   STILI NUOVI: BADGE HEADER & CUSTOM ALERTS
   ============================================================ */

/* Animazione Bottone Header */
#header-badge-btn {
    transition: transform 0.2s;
}
#header-badge-btn:active {
    transform: scale(0.9);
}

/* Effetto Luminosità Massima (Simulato) */
.brightness-boost {
    filter: brightness(1.3) contrast(1.1);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
}

/* Overlay scuro extra per le modali di sistema */
#custom-alert-modal, #custom-confirm-modal {
    background: rgba(0, 0, 0, 0.85); /* Più scuro per focus */
}

/* Stili specifici per il QR nella modale */
#badge-modal #db-qrcode img {
    border: 5px solid white; /* Cornice bianca per aiutare la lettura */
    display: block;
}

/* --- GESTIONE VISIBILITÀ RUOLI --- */

/* Classi generiche di nascondimento */
.admin-only-tab, .admin-only-content { display: none !important; }
.manager-access-tab, .manager-access-content { display: none !important; }

/* 1. ADMIN: Vede TUTTO */
.admin-mode-active .admin-only-tab, 
.admin-mode-active .admin-only-content,
.admin-mode-active .manager-access-tab,
.admin-mode-active .manager-access-content { 
    display: block !important; /* O flex a seconda dell'elemento */
}
/* Fix specifico per elementi flex (come i gruppi di bottoni) */
.admin-mode-active div.admin-only-content,
.admin-mode-active div.manager-access-content { display: flex !important; }


/* 2. RESPONSABILE: Vede Manager Access, MA NON Admin Only */
.responsabile-mode-active .manager-access-tab,
.responsabile-mode-active .manager-access-content { 
    display: block !important; 
}
.responsabile-mode-active div.manager-access-content { display: flex !important; }

/* Il Responsabile NON deve vedere tab e contenuti Admin */
.responsabile-mode-active .admin-only-tab, 
.responsabile-mode-active .admin-only-content { 
    display: none !important; 
}

/* 3. DIPENDENTE: Non vede nulla di speciale */
.employee-mode-active .admin-only-tab, .employee-mode-active .manager-access-tab { display: none !important; }

/* --- RIGA INTESTAZIONE SETTORE (Pianificazione) --- */
.sector-header-row td {
    background-color: #1e293b !important; /* Blu scuro diverso */
    color: #f59e0b !important; /* Arancione per risaltare */
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 15px !important;
    font-size: 1rem;
    border-top: 2px solid var(--border);
    letter-spacing: 1px;
}

/* Stile checkbox settori nella modale */
#responsabile-sectors-list label { 
    font-size: 0.9rem; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}
#responsabile-sectors-list label:hover { background: rgba(255,255,255,0.1); }


/* ============================================================
   FIX DEFINITIVO REPORT (CSS SBLOCCATO)
   ============================================================ */

/* 1. Layout Verticale */
.report-section {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 50px;
}
.report-section .header-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* 2. Wrapper Scroll */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0;
}

/* 3. Tabella Unificata */
table.unified-report-table {
    border-collapse: separate; 
    border-spacing: 0;
    width: 100%;
}

/* Header */
table.unified-report-table thead th {
    background-color: #1f2937;
    color: #e5e7eb;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 15px 10px;
    border-bottom: 1px solid #374151;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 50px;
    vertical-align: middle;
}
table.unified-report-table thead th:first-child { text-align: left; padding-left: 15px; z-index: 20; }
table.unified-report-table thead th:not(:first-child) { text-align: center; }

/* --- CELLE CORPO (LA PARTE FONDAMENTALE) --- */
/* 2. Cella Report: SBLOCCATA */
table.unified-report-table tbody td,

table.unified-report-table td:last-child { border-right: none; }

/* Colonna Nome (Sticky) */
table.unified-report-table tbody th,
table.unified-report-table tbody td:first-child { 
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: #111827; 
    border-right: 1px solid #374151;
    text-align: left !important;
    padding-left: 15px !important;
    min-width: 200px;
    font-weight: 600;
    vertical-align: middle !important;
}

/* 3. Contenitore Righe (T e E) */
.time-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 4px;
    width: 100%;
}

/* Totale e Bilancio */
.report-day-total {
    font-size: 1rem; font-weight: 800; color: white; margin-top: 8px; display: block;
    border-top: 1px solid #374151; padding-top: 4px;
}
.report-day-balance {
    font-size: 0.8rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; display: inline-block; margin-top: 4px;
}

/* Intestazione Settore */
.sector-header-row td, 
table.unified-report-table tr.sector-header-row td {
    background-color: #1e293b !important; 
    color: #f59e0b !important; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border);
}

/* Zebra Striping */
table.unified-report-table tbody tr:not(.sector-header-row):nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.03);
}
table.unified-report-table tbody tr:not(.sector-header-row):nth-child(even) th,
table.unified-report-table tbody tr:not(.sector-header-row):nth-child(even) td:first-child {
    background-color: #162032; 
}
table.unified-report-table thead th:first-child {
    left: 0; z-index: 30; background-color: #1f2937; border-right: 1px solid #374151;
}

/* ============================================================
   FIX VISIBILITÀ REPORT T (CORRETTO)
   Da incollare alla FINE ASSOLUTA di styles.css
   ============================================================ */

/* Assicura che il contenitore della riga oraria sia flessibile e visibile */
.time-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 30px !important; /* Forza altezza minima */
}


/* Stile per l'etichetta "T:" */
.t-label {
    font-weight: 800 !important;
    color: #93c5fd !important;
    margin-right: 4px !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}


/* ============================================================
CENTRAMENTO DATI TABELLE ANNUALI (Bilancio, Spezzati, Deroga)
============================================================ */

/* 1. Centra le intestazioni delle colonne (Gen, Feb, Tot, ecc.) tranne la prima (Dipendente) */
#bilancio-table thead th:not(:first-child),
#spezzati-table thead th:not(:first-child),
#deroga-table thead th:not(:first-child) {
    text-align: center !important;
}

/* 2. Centra tutte le celle dati (i numeri) del corpo tabella */
/* Nota: I nomi sono <th> quindi non vengono toccati da questa regola e restano a sinistra */
#bilancio-table tbody td,
#spezzati-table tbody td,
#deroga-table tbody td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ==========================================================================
    MASTER PRINT SUITE - FIX DEFINITIVO (Pianificazione & Report)
    ========================================================================== */
@media print {


    /* --- 1. SETTING GLOBALI --- */
    @page {
    size: landscape;
    margin: 10mm;
    }

    /* 2. Sblocca l'area di stampa */
    #print-area {
    display: block !important;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important; /* <--- SBLOCCA ALTEZZA */
    overflow: visible !important; /* <--- MOSTRA TUTTO */
    }

    /* Questo assicura che il contenuto iniettato (Tabella + Copertina) sia visibile */
    #report-cover-page { display: block; }

    /* Assicurati che il contenuto tabelle sia visibile */
    #print-content {
    display: block !important;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    }

    /* Quando usiamo la NUOVA stampa report (con copertina), nascondiamo il VECCHIO div report per evitare doppioni */
    body.printing-report-mode #report-content { display: none !important; }

    /* 1. FONDAMENTALE: Sblocca l'altezza del documento */
    html, body {
    height: auto !important; /* <--- ERA 100%, ORA AUTO */
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important; /* <--- FONDAMENTALE PER VEDERE OLTRE PAG 1 */
    background: white !important;
    color: black !important;
    width: 100% !important;
    }

    /* QUESTA REGOLA FORZA TUTTI I TESTI A ESSERE NERI */
    * {
    color: #000000 !important;
    text-shadow: none !important;
    }

    /* Nascondi interfaccia Web */
    .topbar, .tabs-bar, .app-footer, .header-bar, .report-controls-bar,
    .week-selector button, .chip, button, .schedule-balance-tag, .card.sub,
    .modal-overlay, .data-table button, .input-group, .brand, #login-page,
    #dashboard-content, #dipendenti-content, #voti-content,
    #kiosk-print-btn, .kiosk-mode h1, .kiosk-mode p,
    #kiosk-admin-controls, .toggle-switch-container,
    .unpublished-notice, #opzioni-content, #digital-badge-container,
    .print-options-container, select, input {
    display: none !important;
    }

    /* Header di Stampa */
    #print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    margin-bottom: 10px; padding-bottom: 5px;
    width: 100%;
    }

    #print-header-title { font-size: 14pt !important; margin: 0; text-transform: uppercase; font-weight: 800; color: black !important; }
    /* (PUNTO 1) Nascondi sottotitolo SOLO nel REPORT */
    body.printing-report #print-subtitle { display: none !important; }
    /* Nella pianificazione lo lasciamo */
    body.printing-schedule #print-subtitle { display: block !important; font-size: 10pt !important; margin: 0; color: #333 !important; }

    /* Reset Contenitori */
    main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; width: 100%; display: block !important; }
    .card { border: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; display: block !important; width: 100% !important; }
    .table-scroll-wrapper { overflow: visible !important; display: block !important; border: none !important; }

    /* ##########################################################################
    SCENARIO A: PIANIFICAZIONE ORARIO (.printing-schedule)
    ########################################################################## */

    body.printing-schedule #orario-content { display: block !important; }
    body.printing-schedule #report-content, body.printing-schedule #timbratura-content { display: none !important; }

    /* RESET TABELLA */
    body.printing-schedule .schedule-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: none !important;
    margin-bottom: 0 !important;
    }

    body.printing-schedule .schedule-table thead { display: table-header-group !important; }
    body.printing-schedule .schedule-table tbody { display: table-row-group !important; }
    body.printing-schedule .schedule-table tr {
    display: table-row !important;
    page-break-inside: avoid !important;
    }

    /* CELLE GENERICHE */
    body.printing-schedule .schedule-table th,
    body.printing-schedule .schedule-table td {
    display: table-cell !important;
    border: 1px solid #000 !important;
    padding: 3px 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    background-color: white !important;
    color: black !important;
    font-size: 8pt !important;
    line-height: 1.1 !important;
    }

    /* INTESTAZIONI DATE (Centrate) */
    body.printing-schedule .schedule-table thead th,
    body.printing-schedule .schedule-table tbody tr.inner-header-row th {
    text-align: center !important;
    background-color: #ddd !important;
    font-weight: bold !important;
    height: 25px !important;
    vertical-align: middle !important;
    }

    /* --- GESTIONE LARGHEZZE INTELLIGENTE --- */
    /* 1. NOME DIPENDENTE (Fisso) */

    body.printing-schedule .schedule-table tbody th:first-child,
    body.printing-schedule .schedule-table thead th:first-child {
    width: 18% !important; /* Base larga */
    text-align: left !important;
    padding-left: 5px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    }


    /* 2. GIORNI SETTIMANA (Elastici)
    Usiamo 'auto' così si adattano al colspan modificato dal JS.
    Se colspan=8 (no totali), si allargano. Se colspan=12 (si totali), si stringono.
    */

    body.printing-schedule .schedule-table thead th:nth-child(n+2):nth-child(-n+8),

    body.printing-schedule .schedule-table tbody th:nth-child(n+2):nth-child(-n+8),

    body.printing-schedule .schedule-table tbody td:nth-child(n+2):nth-child(-n+8) {

    width: auto !important;
    text-align: center !important;
    }

    /* --- GESTIONE SETTORI --- */
    body.printing-schedule tr.sector-header-row {
    page-break-before: always !important;
    break-before: page !important;
    display: table-row !important;
    height: 30px !important;
    }

    body.printing-schedule tr.sector-header-row[data-first-sector="true"] {

    page-break-before: auto !important;
    break-before: auto !important;
    margin-top: 0 !important;
    }

    body.printing-schedule tr.sector-header-row td {

    background-color: #eee !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    border: 2px solid #000 !important;
    padding: 5px !important;
    text-align: center !important;
    font-size: 10pt !important;
    }

    /* --- VISIBILITÀ TOTALI --- */
    /* DEFAULT: NASCOSTI */
    body.printing-schedule .schedule-table .total-hours-cell,
    body.printing-schedule .schedule-table .total-spezzati-cell,
    body.printing-schedule .schedule-table .total-deroga-cell,
    body.printing-schedule .schedule-table .total-pause-cell,
    body.printing-schedule tfoot {
    display: none !important;
    }

    /* SE ATTIVI (.show-totals): VISIBILI */
    body.printing-schedule.show-totals .schedule-table .total-hours-cell,
    body.printing-schedule.show-totals .schedule-table .total-spezzati-cell,
    body.printing-schedule.show-totals .schedule-table .total-deroga-cell,
    body.printing-schedule.show-totals .schedule-table .total-pause-cell {
    display: table-cell !important;
    width: 6% !important; /* Larghezza Totali */
    background-color: #f9f9f9 !important;
    border: 1px solid #000 !important;
    text-align: center !important;
    }

    /* Se ci sono i totali, stringo un po' il nome per fare spazio */
    body.printing-schedule.show-totals .schedule-table tbody th:first-child,
    body.printing-schedule.show-totals .schedule-table thead th:first-child {
    width: 15% !important;
    }

    body.printing-schedule.show-totals tfoot { display: table-footer-group !important; }
    body.printing-schedule.show-totals tfoot td {
    display: table-cell !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    border-top: 2px solid #000 !important;
    text-align: center !important;
    }

    body.printing-schedule td::before { display: none !important; }
    body.printing-schedule .contract-type { display: none !important; }
    body.printing-schedule.show-contract .contract-type { display: block !important; font-size: 7pt !important; font-style: italic; margin-top: 2px; }

    /* ##########################################################################
    SCENARIO B: REPORT COMPLETO - CORREZIONE TOTALE
    ########################################################################## */

    /* 1. LAYOUT & RESET PAGINA */
    body.printing-report {
    background: white !important;
    color: #000 !important;
    font-family: 'Helvetica', Arial, sans-serif !important;
    margin: 0 !important; padding: 0 !important;
    }

    body.printing-report #report-content,
    body.printing-report .report-tab-content,
    body.printing-report .report-section { display: block !important; width: 100% !important; }

    /* FIX "TABELLA DISTRUTTA": Forziamo display TABLE esplicito (revert a volte fallisce e usa block/mobile) */
    body.printing-report table {
    display: table !important; width: 100% !important;
    border-collapse: collapse !important; table-layout: fixed !important;
    margin-bottom: 10px !important;
    }

    body.printing-report tbody { display: table-row-group !important; }

    body.printing-report tr { display: table-row !important; }

    body.printing-report td, body.printing-report th { display: table-cell !important; }


    /* Nascondi l'header WEB e mostra quello STAMPA */

    body.printing-report thead { display: none !important; }

    body.printing-report tr.print-only-row { display: table-row !important; }

    body.printing-report td::before { display: none !important; }

    /* 2. TITOLI SEZIONI (FIX PAGINA BIANCA) */
    body.printing-report .header-bar { display: block !important; border: none !important; }
    body.printing-report .header-bar h2 {
    display: block !important;
    color: #000 !important;
    font-size: 16pt !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    margin-top: 20px !important;
    margin-bottom: 5px !important;
    border-bottom: 2px solid #000 !important;

    /* (PUNTO 4) Evita che il titolo forzi una pagina nuova subito all'inizio */
    page-break-before: auto !important;
    break-before: auto !important;
    }

    /* (PUNTO 4) Il primissimo titolo assoluto si attacca in alto */
    body.printing-report .report-tab-content:first-child .header-bar:first-child h2,
    body.printing-report .report-section:first-child h2 {
    margin-top: 0 !important;
    }

    /* 3. STILE SETTORI (PUNTO 3: BIANCO E NERO FORZATO) */
    body.printing-report table tr.sector-header-row td {
    background: #ffffff !important; /* Shorthand 'background' vince su tutto */
    background-color: #ffffff !important;
    color: #000000 !important; /* Nero */
    font-size: 11pt !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 5px !important;
    border: 2px solid #000 !important; /* Bordo Nero */
    text-align: left !important;
    page-break-before: always !important;
    break-before: page !important;
    }

    /* (PUNTO 4) ECCEZIONE: Il primo settore stampato NON salta pagina */
    body.printing-report tr.sector-header-row[data-first-sector="true"] td {
    page-break-before: auto !important;
    break-before: auto !important;
    margin-top: 5px !important;
    }

    /* 4. INTESTAZIONI COLONNE INTERNE (Date / Mesi) */
    body.printing-report tr.sector-dates-row td,
    body.printing-report tr.annual-months-row td,
    body.printing-report tr.sector-dates-row th,
    body.printing-report tr.annual-months-row th {
    background-color: #f0f0f0 !important; /* Grigio chiaro per distinguere le intestazioni */
    color: #000 !important;
    font-weight: bold !important;
    border: 1px solid #000 !important;
    text-align: center !important;
    font-size: 8pt !important;
    height: 20px !important;
    padding: 2px !important;
    }

    /* 5. CELLE DATI GENERICHE (PUNTO 2: NERO E CENTRATO) */
    body.printing-report td, body.printing-report th {
    border: 1px solid #666 !important;
    padding: 2px !important;
    vertical-align: middle !important; /* Centrato Verticale */
    text-align: center !important; /* Centrato Orizzontale */
    background: #fff !important;
    font-size: 8pt !important;
    color: #000000 !important; /* Nero */
    }

    /* 6. LARGHEZZE REPORT SETTIMANALE */
    /* Nome (14%) */
    body.printing-report #report-table tbody th,
    body.printing-report .sector-dates-row td:first-child {
    width: 14% !important;
    text-align: center !important; /* (PUNTO 2) Anche il nome centrato */
    background: #fff !important;
    }

    /* Giorni (10%) */
    body.printing-report #report-table td[data-label],
    body.printing-report .sector-dates-row td:nth-child(n+2):nth-child(-n+8) {
    width: 10% !important;
    }

    /* Totali (8%) */
    body.printing-report .total-cell,
    body.printing-report .total-col,
    body.printing-report .sector-dates-row td:nth-last-child(-n+2) {
    width: 8% !important; background: #f0f0f0 !important; font-weight: bold !important; text-align: center !important;
    }

    /* Contenuti Cella (T/E) - Cleanup Colori */
    body.printing-report .time-raw {
    display: block !important; font-style: italic !important; font-size: 6.5pt !important;
    border-bottom: 1px dotted #999; color: #000 !important; /* Nero */
    margin-bottom: 1px; text-align: center !important;
    }

    body.printing-report .time-eff {
    display: block !important; font-weight: 800 !important; font-size: 8pt !important;
    color: #000 !important; text-align: center !important;
    }

    body.printing-report .report-day-total {
    display: block !important; background: #f0f0f0 !important; font-size: 7pt !important;
    border-top: 1px solid #000; margin-top: 2px; font-weight: bold; color: #000 !important;
    }
    body.printing-report .report-day-balance {
    display: inline-block !important; border: 1px solid #000; font-size: 7pt !important;
    padding: 0 3px; margin-top: 1px; color: #000 !important;
    }

    /* 7. TABELLE ANNUALI (Bilancio, Spezzati, Deroga) */
    body.printing-report #bilancio-table,
    body.printing-report #spezzati-table,
    body.printing-report #mensa-table,
    body.printing-report #deroga-table {
    margin-top: 10px !important;
    font-size: 7pt !important;
    width: 100% !important;
    }

    /* Larghezze Annuali */
    body.printing-report #bilancio-table tbody th { width: 14% !important; text-align: center !important; }
    body.printing-report #bilancio-table td:nth-child(n+2):nth-child(-n+13) { width: 5.5% !important; }
    body.printing-report #spezzati-table tbody th { width: 16% !important; text-align: center !important; }
    body.printing-report #spezzati-table td:nth-child(n+2):nth-child(-n+13) { width: 6% !important; }
    body.printing-report #mensa-table tbody th { width: 16% !important; text-align: center !important; }
    body.printing-report #mensa-table td:nth-child(n+2):nth-child(-n+13) { width: 6% !important; }
    body.printing-report #deroga-table tbody th { width: 70% !important; text-align: center !important; }
    body.printing-report #deroga-table td { width: 30% !important; }

    /* ##########################################################################
    SCENARIO C: KIOSK (.printing-kiosk)
    ########################################################################## */

    /* MODIFICA: Nascondiamo l'interfaccia timbratura (Orologio, Badge, Bottoni) */
    body.printing-kiosk #timbratura-content {
    display: none !important;
    }

    /* Mostriamo solo il container di stampa e l'header */
    body.printing-kiosk #kiosk-print-container {
    display: block !important;
    margin-top: 0 !important;
    width: 100% !important;
    }

    body.printing-kiosk #orario-content, body.printing-kiosk #report-content { display: none !important; }
    body.printing-kiosk table { width: 100%; border-collapse: collapse; margin-top: 10px; display: table !important; }
    body.printing-kiosk th, body.printing-kiosk td { border: 1px solid #000; padding: 5px; text-align: center; color: black; display: table-cell !important; }

    /* ##########################################################################
    SCENARIO D: BADGE
    ########################################################################## */

    body.printing-badge > *:not(#badge-print-container) { display: none !important; }
    body.printing-badge #badge-print-container { display: flex !important; justify-content: center; align-items: center; height: 100vh; width: 100%; position: absolute; top: 0; left: 0; }

    /* #########################################################################
    SCENARIO E: STAMPA REPORT CON COPERTINA (.printing-report-mode)
    ########################################################################## */
    
    /* Gestione Visibilità */
    body.printing-report-mode #print-header { display: none !important; } /* Via header standard */
    body.printing-report-mode #report-cover-page { display: flex !important; } /* Si copertina */
    body.printing-report-mode #report-content { display: none !important; } /* Via contenuto duplicato */

    /* Layout Copertina */
    #report-cover-page {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 90vh !important;
        page-break-after: always !important;
        break-after: page !important;
    }

    /* Layout Contenuto Tabella */
    body.printing-report-mode #print-content {
        display: block !important;
        margin-top: 0 !important;
        width: 100%;
    }

    /* --- RECUPERO STILI GRAFICI TABELLA (Dallo Scenario Vecchio) --- */
    /* Fondamentale perché abbiamo spento la classe vecchia nel JS */
    
    body.printing-report-mode table { 
        width: 100% !important; 
        border-collapse: collapse !important; 
        margin-bottom: 20px;
        display: table !important;
    }
    
    body.printing-report-mode th, body.printing-report-mode td { 
        border: 1px solid #000 !important; 
        padding: 4px; 
        font-size: 9pt; 
        vertical-align: middle; 
        text-align: center;
        color: black !important;
    }
    
    /* Header Settori */
    body.printing-report-mode .sector-header-row td { 
        background-color: #fff !important; 
        border: 2px solid #000 !important; 
        text-align: left !important; 
        font-weight: 900; 
        font-size: 12pt;
        text-transform: uppercase;
        page-break-before: always;
        margin-top: 20px;
    }
    /* Eccezione primo settore */
    body.printing-report-mode .sector-header-row[data-first-sector="true"] td { 
        page-break-before: auto !important; 
    }

    /* Colori Totali e Intestazioni */
    body.printing-report-mode thead th,
    body.printing-report-mode .annual-months-row td,
    body.printing-report-mode .sector-dates-row td,
    body.printing-report-mode .total-cell {
        background-color: #e5e7eb !important; /* Grigio */
        font-weight: bold !important;
    }

   /* ========================================================
       FIX DEFINITIVI (Da mettere alla fine di @media print)
       ======================================================== */

    /* 1. FIX COLORE NERO (Vince sugli stili inline dell'HTML) */
    body.printing-report-mode h3,
    body.printing-report-mode table,
    body.printing-report-mode th,
    body.printing-report-mode td,
    body.printing-report-mode span {
        color: #000000 !important; 
        fill: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }

    /* 2. SBLOCCO SCORRIMENTO (PER VEDERE TUTTE LE TABELLE) */
    /* Applichiamo height auto a tutta la catena dei genitori quando siamo in Report Mode */
    body.printing-report-mode,
    body.printing-report-mode html,
    body.printing-report-mode main,
    body.printing-report-mode #print-area,
    body.printing-report-mode #print-content {
        height: auto !important; 
        overflow: visible !important;
        display: block !important;
    }

    /* 3. FIX MATRIOSKA (Nasconde il resto dell'app) */
    main > *:not(#print-area) {
        display: none !important;
    }

}
/* ==========================================================================
    11. STILE SPECIFICO PER TABELLE ANNUALI (Bilancio, Spezzati, Deroga)
========================================================================== */

body.printing-report #bilancio-table,
body.printing-report #spezzati-table,
body.printing-report #mensa-table,
body.printing-report #deroga-table {
    margin-top: 10px !important;
    font-size: 7pt !important;
    table-layout: fixed !important;
    width: 100% !important;
    page-break-inside: auto !important;
    border-collapse: collapse !important;
}

/* 1. NASCONDI IL VECCHIO HEADER (Quello sopra il settore) */
body.printing-report #bilancio-table thead,
body.printing-report #spezzati-table thead,
body.printing-report #mensa-table thead,
body.printing-report #deroga-table thead {
    display: none !important;
}

/* 2. FORMATTA IL NUOVO HEADER MESI (Quello creato via JS sotto il settore) */
body.printing-report tr.annual-months-row td,
body.printing-report tr.annual-months-row th {
    background-color: #ddd !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 3px 1px !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 7pt !important;
    height: 20px !important;
}

/* 3. FIX PAGINA BIANCA SUI TITOLI (H2) */
body.printing-report .header-bar h2 {
    page-break-before: always !important; /* Di base salta sempre prima del titolo */
    margin-top: 30px !important;
}

/* ECCEZIONE: Se è il PRIMO titolo del contenuto report, NON saltare pagina */
body.printing-report .report-tab-content:first-child .header-bar:first-child h2,
body.printing-report .report-section:first-child h2 {
    page-break-before: auto !important;
    margin-top: 0 !important;
}

/* 4. CELLE DATI */
body.printing-report #bilancio-table td,
body.printing-report #spezzati-table td,
body.printing-report #mensa-table td,
body.printing-report #deroga-table td {
    border: 1px solid #666 !important;
    color: #000 !important; /* Forza Nero */
    padding: 3px 1px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.printing-report #bilancio-table tbody th,
body.printing-report #spezzati-table tbody th,
body.printing-report #mensa-table tbody th,
body.printing-report #deroga-table tbody th {
    text-align: left !important;
    padding-left: 5px !important;
    background-color: #f5f5f5 !important;
    width: 16% !important; /* Nome Dipendente */
}

/* --- LARGHEZZE COLONNE --- */

/* BILANCIO (15 Colonne) */
/* Mesi (colonne 2-13) */
body.printing-report #bilancio-table tr.annual-months-row td:nth-child(n+2):nth-child(-n+13),
body.printing-report #bilancio-table td:nth-child(n+2):nth-child(-n+13) { width: 5.5% !important; }
/* Totali */
body.printing-report #bilancio-table tr.annual-months-row td:nth-last-child(-n+2),
body.printing-report #bilancio-table td:nth-last-child(-n+2) { width: 9% !important; background: #e0e0e0 !important; font-weight: bold !important; }

/* SPEZZATI (14 Colonne) */
/* Mesi */
body.printing-report #spezzati-table tr.annual-months-row td:nth-child(n+2):nth-child(-n+13),
body.printing-report #spezzati-table td:nth-child(n+2):nth-child(-n+13) { width: 6% !important; }
/* Totale */
body.printing-report #spezzati-table tr.annual-months-row td:last-child,
body.printing-report #spezzati-table td:last-child { width: 12% !important; background: #e0e0e0 !important; font-weight: bold !important; }

/* MENSA (14 Colonne) */
/* Mesi */
body.printing-report #mensa-table tr.annual-months-row td:nth-child(n+2):nth-child(-n+13),
body.printing-report #mensa-table td:nth-child(n+2):nth-child(-n+13) { width: 6% !important; }
/* Totale */
body.printing-report #spezzati-table tr.annual-months-row td:last-child,
body.printing-report #spezzati-table td:last-child { width: 12% !important; background: #e0e0e0 !important; font-weight: bold !important; }


/* DEROGA (2 Colonne) */
body.printing-report #deroga-table tbody th { width: 70% !important; }
body.printing-report #deroga-table td { width: 30% !important; font-size: 9pt !important; font-weight: bold !important; }

/* ======== Stili Pagina Report (VERSIONE COMPATTA WEB) ======== */

/* 1. Tabella Generale */
#report-table {
    width: 100%;
    table-layout: fixed; /* FONDAMENTALE: Costringe la tabella a stare nella pagina */
    border-collapse: collapse;
}

/* 2. Celle del Report */
#report-table .report-cell {
    font-size: 0.75rem !important; /* Font piccolo */
    padding: 4px 2px !important;    /* Padding laterale minimo per risparmiare spazio */
    vertical-align: middle !important;
    text-align: center;
    white-space: normal !important; /* Manda a capo il testo se serve */
    height: auto !important;
    min-height: 0 !important;       /* RIMOSSO IL 70px CHE CREAVA SPAZIO VUOTO */
    line-height: 1.2 !important;
    cursor: pointer;
}

/* Hover Effect */
.admin-mode-active #report-table .report-cell:hover { background-color: #1f2937; }

/* 3. Stile Timbrature Interne (T / E / P) */

/* T: Timbratura Grezza (Blu) */
.time-raw {
    display: block !important;
    color: #60a5fa !important;
    font-size: 0.7rem !important; /* Molto compatto */
    font-style: italic !important;
    margin-bottom: 1px !important;
    line-height: 1.1;
}

/* E: Effettivo (Bianco) */
.time-eff {
    display: block !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    line-height: 1.1;
}

/* P: Pausa (Grigio) */
.time-pause {
    font-size: 0.7rem;
    color: #9ca3af;
    font-style: italic;
}

/* 4. Colori e Stati */
#report-table .report-day-balance.balance-positive { color: var(--accent); background: rgba(34, 197, 94, 0.1); }
#report-table .report-day-balance.balance-negative { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
#report-table .report-day-balance.balance-zero { color: var(--muted); }

/* Stati Speciali */
#report-table .report-cell.status-riposo { color: var(--muted); font-style: italic; font-size: 0.8rem; }
#report-table .report-cell.status-incompleto { background: rgba(239, 68, 68, 0.1); border: 1px dashed var(--danger); }
#report-table .report-cell.is-corrected { background: rgba(234, 179, 8, 0.15); border: 1px dashed #eab308; }

/* 5. Totali (Colonne a destra sticky) */
#report-table .total-cell {
    text-align: center;
    font-weight: bold;
    background: #1f2937;
    vertical-align: middle;
    font-size: 0.8rem;
    position: sticky; 
    right: 0; 
    z-index: 1;
}
#report-table thead th:nth-last-child(1), 
#report-table thead th:nth-last-child(2) { 
    position: sticky; 
    right: 0; 
    z-index: 2; 
    background: #111827; /* Copre quando scorri se necessario */
}

#report-table tr.sector-header-row td { text-align: center !important; }

/* FIX SPECIFICO PER COLONNA NOME REPORT */
#report-table .col-name {
    text-align: left !important;      /* Nomi allineati a sinistra */
    white-space: nowrap !important;   /* MAI andare a capo */
    overflow: hidden !important;      /* Taglia se troppo lungo */
    text-overflow: ellipsis !important; /* Mette i puntini (...) */
    padding-left: 8px !important;
    font-weight: bold;
    color:  #ffffff; /* Colore arancione per risaltare */
}

/* ============================================================
   FIX FOTOCAMERA KIOSK (Globale - Vale per tutti i dispositivi)
   Rimuove doppi bordi e adatta il video al riquadro
   ============================================================ */

/* Forza il video a riempire il contenitore senza deformarsi */
#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Risolve lo schiacciamento verticale */
    border-radius: 12px !important;
}

/* Nasconde il canvas di sovrapposizione che crea l'effetto "doppio" o fantasma */
#qr-reader canvas {
    display: none !important; 
}

/* Rimuove i bordi e sfondi di default della libreria */
#qr-reader {
    border: none !important;
    background: black;
}

/* ============================================================
   RESPONSIVE KIOSK (TABLET & MOBILE) - BLOCCO UNICO PULITO
   Applica regole solo su schermi piccoli (< 1024px o bassi < 800px)
   ============================================================ */
@media screen and (max-width: 1024px), screen and (max-height: 800px) {

    /* 1. LAYOUT: Applica SOLO se la pagina è attiva (.active) */
    /* Questo risolve il problema del Kiosk visibile in Dashboard */
    #timbratura-content.active {
        display: flex !important;       
        flex-direction: column !important;
        justify-content: flex-start !important; /* Spinge tutto in alto */
        padding: 10px !important;
        padding-top: 50px !important;           /* Margine superiore per non tagliare l'ora */
        height: 100vh !important;
        overflow: hidden !important;            /* Niente scroll */
    }

    /* 2. SICUREZZA: Se NON è attivo, forza nascondi su mobile */
    /* Questa regola uccide il "fantasma" nella dashboard */
    #timbratura-content:not(.active) {
        display: none !important;
    }

    /* 3. Orologio: Ridimensionato per mobile */
    #kiosk-clock-container {
        margin-bottom: 20px !important; 
        margin-top: 0 !important;
    }
    #kiosk-time {
        font-size: 5rem !important;     
        letter-spacing: -2px !important;
        line-height: 1 !important;
    }
    #kiosk-date {
        font-size: 1.3rem !important;   
        margin-bottom: 5px !important;
        opacity: 0.8;
    }

    /* 4. Istruzioni (AVVICINA BADGE) */
    #kiosk-instruction {
        font-size: 1.6rem !important;   
        margin-top: 10px !important;
    }
    #kiosk-sub-instruction {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }

    /* Nascondiamo lo status box se ingombra troppo */
    #kiosk-status-box {
        margin-bottom: 15px !important; 
        padding: 10px !important;
    }

    /* 5. Bottoni Grandi (Scansione / Pausa) */
    #timbratura-content button {
        padding: 20px !important;       
        font-size: 1.1rem !important;     
        border-radius: 12px !important;
    }
    
    /* Gestione larghezza bottoni */
    #timbratura-content > div[style*="max-width: 400px"] {
        width: 85% !important;          
        max-width: 500px !important;
        gap: 15px !important;           
        margin-top: 10px !important;
    }

    /* 6. Bottone Stampa (Piccolo in basso) */
    #btn-kiosk-open-print {
        padding: 10px 30px !important;
        font-size: 0.9rem !important;
        margin-top: auto !important; 
        margin-bottom: 20px !important;
    }

    /* 7. Modale Camera */
    .modal-content.card {
        max-width: 90% !important;
    }
}

/* FIX EXTRA PER SMARTPHONE MOLTO PICCOLI (Width < 480px) */
@media screen and (max-width: 480px) {
    #kiosk-time { font-size: 3.5rem !important; }
    #kiosk-instruction { font-size: 1.2rem !important; }
}

/* ============================================================
   NASCONDI TAB TIMBRATURA A CHI NON SERVE
   (Admin e Responsabili usano il Kiosk o gestiscono, non timbrano qui)
   ============================================================ */
.admin-mode-active .tab[data-page="timbratura"],
.responsabile-mode-active .tab[data-page="timbratura"] {
    display: none !important;
}

#nav-btn-timbratura {
    display: none;
}

/* ============================================================
   STILI UNIFICATI COLONNE TOTALI E BILANCIO (Tutte le tabelle)
   ============================================================ */
.total-cell {
    background-color: #1f2937 !important; /* Sfondo Scuro (come Report) */
    color: #ffffff;
    font-weight: bold;
    text-align: center !important;
    vertical-align: middle !important;
    border-left: 1px solid #374151; /* Separatore sottile */
}

/* Colori Testo Bilancio */
.balance-positive { color: #4ade80 !important; } /* Verde Smeraldo */
.balance-negative { color: #ef4444 !important; } /* Rosso */
.balance-zero { color: #9ca3af !important; }     /* Grigio */

/* Assicuriamoci che anche gli header di queste colonne siano scuri */
th.total-col-header {
    background-color: #111827 !important;
    color: #f59e0b !important; /* Arancione/Oro per il titolo */
    text-align: center !important;
}

/* --- STILE PILLOLA KIOSK --- */
.kiosk-pill {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 50px; /* Molto rotondo */
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    background-color: #374151; /* Colore default */
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- FIX TABELLA MENSA --- */

/* 1. Centra il nome del settore (es. RISTORAZIONE) */
#mensa-table .sector-header-row td {
    text-align: center !important;
}

/* 2. Assicura che i numeri totali (ultima colonna) siano bianchi e ben leggibili */
#mensa-table .total-cell {
    color: #ffffff !important;
    background-color: #1f2937 !important;
}

/* --- WIDGET DASHBOARD COLLAPSIBLE --- */
.widget-collapsible {
    transition: all 0.3s ease;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-bottom: 0; /* Reset */
}

.widget-collapsible.collapsed .widget-header {
    border-bottom: none; /* Rimuovi riga se chiuso */
}

.widget-collapsible:not(.collapsed) .widget-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.widget-chevron {
    font-size: 0.8rem;
    color: var(--muted);
    transition: transform 0.3s ease;
}

/* Ruota la freccia se aperto */
.widget-collapsible:not(.collapsed) .widget-chevron {
    transform: rotate(180deg);
}

.widget-body {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   MOBILE RESPONSIVE: PIANIFICAZIONE VERTICALE 
   (APPLICA SOLO AL DIPENDENTE - Admin e Resp vedono la tabella)
   ============================================================ */

@media screen and (max-width: 768px) {

    /* --- 1. NASCONDI ELEMENTI SUPERFLUI (SOLO DIPENDENTE) --- */
    body.role-dipendente #schedule-controls,
    body.role-dipendente #btn-save-schedule,
    body.role-dipendente .schedule-legend,
    body.role-dipendente .input-group label,
    body.role-dipendente .unpublished-notice,
    body.role-dipendente #btn-open-template-menu,
    body.role-dipendente .print-options-container,
    body.role-dipendente .toggle-switch-container,
    body.role-dipendente #publish-container 
    {
        display: none !important;
    }

    /* --- 2. LAYOUT GRIGLIA FLUIDA (SOLO DIPENDENTE) --- */
    
    body.role-dipendente #orario-content .schedule-table, 
    body.role-dipendente #orario-content .schedule-table tbody, 
    body.role-dipendente #orario-content .schedule-table td {
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Nascondi header standard */
    body.role-dipendente #orario-content .schedule-table thead {
        display: none !important; 
    }

    /* Nascondi intestazioni JS */
    body.role-dipendente #orario-content .schedule-table tbody .inner-header-row,
    body.role-dipendente #orario-content .schedule-table tbody .sector-header-row {
        display: none !important;
    }

    /* RIGA CARD */
    body.role-dipendente #orario-content .schedule-table tbody tr:not(.inner-header-row):not(.sector-header-row) {
        display: flex !important;
        flex-flow: row wrap !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
        border: none !important;
        background: transparent !important;
    }

    /* Nascondi nome (prima colonna) */
    body.role-dipendente #orario-content .schedule-table tbody tr:not(.inner-header-row):not(.sector-header-row) > th:first-child {
        display: none !important; 
    }

    /* CELLA GIORNO (CARD) */
    body.role-dipendente #orario-content .schedule-table td.schedule-cell {
        width: 100% !important; 
        background: var(--card) !important;
        
        /* Bordo colorato e Ombra */
        border: 2px solid var(--accent-2) !important; 
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
        
        border-radius: 12px !important;
        padding: 15px !important;
        position: relative !important;
        text-align: left !important;
        margin-bottom: 15px !important;
    }

    /* Header Data (lun 27/10) */
    body.role-dipendente #orario-content .schedule-table td.schedule-cell::before {
        content: attr(data-label);
        display: block !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: var(--accent-2) !important;
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* Contenuti Interni */
    body.role-dipendente .day-grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    body.role-dipendente .shift-tag {
        font-size: 1.1rem !important;
        padding: 10px !important;
        text-align: center !important;
        border-radius: 8px !important;
        width: 100% !important;
        display: block !important;
    }
    body.role-dipendente .day-row.role-morning, 
    body.role-dipendente .day-row.role-afternoon {
        text-align: center !important;
        font-style: italic !important;
        color: #94a3b8 !important;
    }
    body.role-dipendente .shift-riposo {
        text-align: center !important;
        padding: 10px !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px dashed #555 !important;
        border-radius: 8px !important;
    }

    /* BLOCCHI TOTALI (GRIGLIA 2x2) */
    body.role-dipendente #orario-content .schedule-table .total-hours-cell, 
    body.role-dipendente #orario-content .schedule-table .total-spezzati-cell, 
    body.role-dipendente #orario-content .schedule-table .total-deroga-cell, 
    body.role-dipendente #orario-content .schedule-table .total-pause-cell {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 48% !important;
        margin: 0 !important;
        background: #1f2937 !important;
        border: 1px solid #374151 !important;
        border-radius: 10px !important;
        padding: 15px 5px !important;
        min-height: 90px !important;
        font-size: 1.3rem !important;
        font-weight: bold !important;
        color: white !important;
    }

    /* Etichette Forzate */
    body.role-dipendente #orario-content .schedule-table .total-hours-cell::before { content: "ORE TOTALI" !important; }
    body.role-dipendente #orario-content .schedule-table .total-spezzati-cell::before { content: "SPEZZATI" !important; }
    body.role-dipendente #orario-content .schedule-table .total-deroga-cell::before { content: "DEROGHE" !important; }
    body.role-dipendente #orario-content .schedule-table .total-pause-cell::before { content: "PAUSE" !important; }

    /* Stile Etichette */
    body.role-dipendente #orario-content .schedule-table .total-hours-cell::before,
    body.role-dipendente #orario-content .schedule-table .total-spezzati-cell::before,
    body.role-dipendente #orario-content .schedule-table .total-deroga-cell::before,
    body.role-dipendente #orario-content .schedule-table .total-pause-cell::before {
        display: block !important;
        font-size: 0.7rem !important;
        color: #94a3b8 !important;
        margin-bottom: 5px !important;
        font-weight: normal !important;
        letter-spacing: 1px !important;
    }
}

/* ============================================================
   MOBILE RESPONSIVE: REPORT SETTIMANALE
   ============================================================ */

@media screen and (max-width: 768px) {

    /* --- 1. FIX GLOBALE: CENTRATURA FRECCE SETTIMANA --- */
    .week-selector {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 15px !important;
        margin: 15px 0 !important;
    }
    .week-selector h3 {
        flex: 0 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        font-size: 1rem !important;
        text-align: center !important;
    }
    .week-selector button {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #374151 !important;
        border-radius: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- 2. REPORT SETTIMANALE: GRIGLIA 4-3-2 --- */
    
    /* Pulizia Interfaccia */
    #btn-print-report, #btn-export-excel, #btn-export-csv, 
    .report-legend, .report-summary-box, 
    #report-table thead, #report-table colgroup {
        display: none !important;
    }

    #report-content .header-bar .input-group {
        width: 100% !important; margin-bottom: 10px !important;
    }

    /* Reset Tabella */
    #report-table, #report-table tbody {
        display: block !important; width: 100% !important;
    }

    /* --- FIX IMPORTANTE: NASCONDI RIGHE INTESTAZIONE JS --- */
    /* Nasconde le righe create dal JS per il desktop (Giorni, Settori) */
    #report-table tbody .sector-header-row,
    #report-table tbody .sector-dates-row {
        display: none !important;
    }

    /* Riga Dati Settimana (Contenitore Griglia) */
    /* Applichiamo lo stile solo alle righe che NON sono intestazioni */
    #report-table tbody tr:not(.sector-header-row):not(.sector-dates-row) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        background: transparent !important;
        border: 1px solid #374151 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        margin-bottom: 30px !important;
    }

    /* --- 3. NASCONDI LA COLONNA 1 (NOME DIPENDENTE) --- */
    /* Usiamo nth-child(1) per essere sicuri di prendere la prima colonna assoluta */
    #report-table tbody tr > *:nth-child(1) {
        display: none !important; 
    }

    /* --- 4. CELLE GIORNI E TOTALI (Dalla 2 in poi) --- */
    #report-table tbody td {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: var(--card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        padding: 5px 2px !important;
        min-height: 85px !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }

    /* ETICHETTE GIORNI (Stile Base) */
    #report-table tbody td::before {
        display: block !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        color: var(--accent-2) !important;
        margin-bottom: 5px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100%;
        text-align: center;
    }

    /* --- GRIGLIA PERFETTA --- */

    /* RIGA 1: Lun(2), Mar(3), Mer(4), Gio(5) -> 25% */
    #report-table tbody td:nth-child(2) { width: calc(25% - 4px) !important; }
    #report-table tbody td:nth-child(2)::before { content: "LUN"; }

    #report-table tbody td:nth-child(3) { width: calc(25% - 4px) !important; }
    #report-table tbody td:nth-child(3)::before { content: "MAR"; }

    #report-table tbody td:nth-child(4) { width: calc(25% - 4px) !important; }
    #report-table tbody td:nth-child(4)::before { content: "MER"; }

    #report-table tbody td:nth-child(5) { width: calc(25% - 4px) !important; }
    #report-table tbody td:nth-child(5)::before { content: "GIO"; }


    /* RIGA 2: Ven(6), Sab(7), Dom(8) -> 33% */
    #report-table tbody td:nth-child(6) { width: calc(33.33% - 4px) !important; }
    #report-table tbody td:nth-child(6)::before { content: "VEN"; }

    #report-table tbody td:nth-child(7) { width: calc(33.33% - 4px) !important; }
    #report-table tbody td:nth-child(7)::before { content: "SAB"; }

    #report-table tbody td:nth-child(8) { width: calc(33.33% - 4px) !important; }
    #report-table tbody td:nth-child(8)::before { content: "DOM"; }


    /* RIGA 3: Tot Ore(9), Bilancio(10) -> 50% */
    #report-table tbody td:nth-child(9),
    #report-table tbody td:nth-child(10) {
        width: calc(50% - 4px) !important;
        background: #1f2937 !important;
        min-height: 60px !important;
        justify-content: center !important;
    }

    /* Totale Ore (Colonna 9) */
    #report-table tbody td:nth-child(9)::before { 
        content: "TOT ORE"; color: #94a3b8; font-weight: normal; font-size: 0.65rem !important; border:none; margin-bottom:0;
    }
    #report-table tbody td:nth-child(9) { 
        color: var(--accent) !important; font-weight: bold; font-size: 1.1rem !important; 
    }

    /* Bilancio (Colonna 10) */
    #report-table tbody td:nth-child(10)::before { 
        content: "BILANCIO"; color: #94a3b8; font-weight: normal; font-size: 0.65rem !important; border:none; margin-bottom:0; 
    }
    #report-table tbody td:nth-child(10) { 
        font-weight: bold; font-size: 1rem !important; 
    }

    /* Fix Contenuti Interni */
    #report-table tbody td div { width: 100%; text-align: center; overflow: hidden; }
    .time-raw, .time-eff { font-size: 0.6rem !important; margin: 0 !important; }
    
    #report-table .status-assente {
        background: rgba(239, 68, 68, 0.15) !important;
        border: 1px dashed rgba(239, 68, 68, 0.4) !important;
        border-radius: 4px;
        width: 100%;
    }
}

/* ============================================================
   MOBILE RESPONSIVE: TABELLE ANNUALI (Bilancio, Spezzati, Mensa, Deroga)
   ============================================================ */

@media screen and (max-width: 768px) {

    /* --- 1. SETUP GENERALE (Tabelle a Blocchi) --- */
    #bilancio-table, #spezzati-table, #mensa-table, #deroga-table,
    #bilancio-table tbody, #spezzati-table tbody, #mensa-table tbody, #deroga-table tbody {
        display: block !important; width: 100% !important;
    }

    /* Nascondi le intestazioni della tabella standard (thead) */
    #bilancio-table thead, #spezzati-table thead, #mensa-table thead, #deroga-table thead {
        display: none !important;
    }

    /* --- FIX IMPORTANTE: NASCONDI RIGHE INTESTAZIONE JS --- */
    /* Nasconde le righe create dal JS (Mesi, Settori) su Mobile */
    .sector-header-row, 
    .annual-months-row {
        display: none !important;
    }

    /* La riga (TR) diventa il contenitore della griglia */
    /* Escludiamo le classi header per sicurezza */
    #bilancio-table tbody tr:not(.sector-header-row):not(.annual-months-row), 
    #spezzati-table tbody tr:not(.sector-header-row):not(.annual-months-row), 
    #mensa-table tbody tr:not(.sector-header-row):not(.annual-months-row),
    #deroga-table tbody tr:not(.sector-header-row):not(.annual-months-row) {
        display: flex !important;
        flex-wrap: wrap !important;
        background: transparent !important;
        border: 1px solid #374151 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        margin-bottom: 25px !important;
        gap: 4px !important;
        position: relative;
    }

    /* --- 2. NASCONDI IL NOME (Richiesta Utente) --- */
    /* Nascondiamo la prima cella (che sia TH o TD) su TUTTE le tabelle */
    #bilancio-table tbody tr > :first-child,
    #spezzati-table tbody tr > :first-child,
    #mensa-table tbody tr > :first-child,
    #deroga-table tbody tr > :first-child {
        display: none !important;
    }

    /* --- 3. GRIGLIA MESI (Solo per Bilancio, Spezzati, Mensa) --- */
    /* Selezioniamo dalla 2a alla 13a colonna (Gennaio -> Dicembre) */
    
    #bilancio-table tbody tr > td:nth-child(n+2):nth-child(-n+13),
    #spezzati-table tbody tr > td:nth-child(n+2):nth-child(-n+13),
    #mensa-table tbody tr > td:nth-child(n+2):nth-child(-n+13) {
        width: calc(33.33% - 4px) !important; /* 3 colonne per riga */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        
        background: var(--card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        padding: 5px 2px !important;
        min-height: 55px !important;
        
        font-size: 0.9rem !important;
        font-weight: bold !important;
    }

    /* --- 4. ETICHETTE MESI (Content CSS) --- */
    #bilancio-table tbody tr > td:nth-child(n+2):nth-child(-n+13)::before,
    #spezzati-table tbody tr > td:nth-child(n+2):nth-child(-n+13)::before,
    #mensa-table tbody tr > td:nth-child(n+2):nth-child(-n+13)::before {
        display: block; font-size: 0.65rem; color: #94a3b8; margin-bottom: 2px; font-weight: normal; text-transform: uppercase;
    }

    /* Mapping esatto dei mesi (Gennaio è il child n.2 perché il n.1 è il Nome nascosto) */
    tbody tr > td:nth-child(2)::before { content: "GEN"; }
    tbody tr > td:nth-child(3)::before { content: "FEB"; }
    tbody tr > td:nth-child(4)::before { content: "MAR"; }
    tbody tr > td:nth-child(5)::before { content: "APR"; }
    tbody tr > td:nth-child(6)::before { content: "MAG"; }
    tbody tr > td:nth-child(7)::before { content: "GIU"; }
    tbody tr > td:nth-child(8)::before { content: "LUG"; }
    tbody tr > td:nth-child(9)::before { content: "AGO"; }
    tbody tr > td:nth-child(10)::before { content: "SET"; }
    tbody tr > td:nth-child(11)::before { content: "OTT"; }
    tbody tr > td:nth-child(12)::before { content: "NOV"; }
    tbody tr > td:nth-child(13)::before { content: "DIC"; }


    /* --- 5. GESTIONE TOTALI (Footer della griglia) --- */

    /* A. SPEZZATI & MENSA (Hanno 1 solo totale alla fine: colonna 14) */
    #spezzati-table tbody tr > td:last-child,
    #mensa-table tbody tr > td:last-child {
        width: 100% !important;
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        background: #1f2937 !important; color: var(--accent) !important;
        font-size: 1.1rem !important; font-weight: 800 !important;
        padding: 12px 15px !important; border-radius: 6px !important; margin-top: 5px !important;
        border: 1px solid #374151;
    }
    #spezzati-table tbody tr > td:last-child::before,
    #mensa-table tbody tr > td:last-child::before {
        content: "TOTALE ANNUO"; font-size: 0.8rem; color: #e5e7eb; font-weight: normal;
    }

    /* B. BILANCIO (Ha 2 totali: Lavorato + Bilancio) */
    
    /* Totale Lavorato (Penultimo elemento) */
    #bilancio-table tbody tr > td:nth-last-child(2) {
        width: calc(50% - 4px) !important;
        display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
        background: #1f2937 !important; color: white !important;
        font-size: 1rem !important; font-weight: bold !important;
        padding: 10px !important; border-radius: 6px !important; margin-top: 5px !important;
    }
    #bilancio-table tbody tr > td:nth-last-child(2)::before {
        content: "TOT ORE"; font-size: 0.65rem; color: #94a3b8; font-weight: normal; margin-bottom: 2px;
    }

    /* Bilancio (Ultimo elemento) */
    #bilancio-table tbody tr > td:last-child {
        width: calc(50% - 4px) !important;
        display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
        background: #1f2937 !important;
        font-size: 1rem !important; font-weight: bold !important;
        padding: 10px !important; border-radius: 6px !important; margin-top: 5px !important;
    }
    #bilancio-table tbody tr > td:last-child::before {
        content: "BILANCIO"; font-size: 0.65rem; color: #94a3b8; font-weight: normal; margin-bottom: 2px;
    }


    /* --- 6. TABELLA DEROGA (Speciale) --- */
    
    #deroga-table tbody tr:not(.sector-header-row):not(.annual-months-row) {
        background: rgba(239, 68, 68, 0.1) !important;
        border: 1px solid var(--danger) !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px !important;
    }

    #deroga-table tbody tr > td:last-child {
        font-size: 1.5rem !important;
        color: #fca5a5 !important;
        font-weight: 800 !important;
        text-align: center !important;
        width: 100% !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
        border: none !important;
    }

    #deroga-table tbody tr > td:last-child::before {
        content: "DEROGHE 11H REGISTRATE";
        font-size: 0.8rem !important;
        color: #fca5a5 !important;
        font-weight: normal !important;
        margin-bottom: 5px !important;
        opacity: 0.8;
    }
    
    /* Messaggio se vuoto */
    #deroga-table tbody:empty {
        display: block;
        padding: 20px;
        text-align: center;
        color: #94a3b8;
        font-style: italic;
    }
    #deroga-table tbody:empty::after { content: "Nessuna deroga."; }
}

/* ============================================================
   REGOLE SPECIFICHE PER DIPENDENTI (PC & MOBILE)
   Nascondono controlli e bottoni non necessari
   Richiede: <body class="role-dipendente">
   ============================================================ */

body.role-dipendente #schedule-controls,
body.role-dipendente #btn-save-schedule,
body.role-dipendente #btn-print-schedule,
body.role-dipendente #btn-manage-templates,
body.role-dipendente #btn-open-template-menu, /* Tasto Modelli (nuovo) */
body.role-dipendente #schedule-sector-filter,
body.role-dipendente label[for="schedule-sector-filter"],
body.role-dipendente #btn-auto-schedule,
body.role-dipendente .print-options-container, /* Container Stampa */
body.role-dipendente .toggle-switch-container, /* Switch Pubblica */
body.role-dipendente .schedule-legend,         /* Legenda */
body.role-dipendente #publish-container {        /* Container Pubblica */
    display: none !important;
}

/* Nascondi anche eventuali bottoni template dentro menu a tendina */
body.role-dipendente .template-menu-btn {
    display: none !important;
}

/* ============================================================
   REGOLE SPECIFICHE PER RESPONSABILE
   (Nasconde funzioni riservate all'Ufficio Personale/Admin)
   ============================================================ */

/* Nascondi esportazione Excel e CSV */
body.responsabile-mode-active #btn-export-excel,
body.responsabile-mode-active #btn-export-csv {
    display: none !important;
}

body.responsabile-mode-active .admin-only-card {
    display: none !important;
}