/* 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; }

/* ======== PAGINA DI LOGIN ======== */
.login-box { width: 1300px; margin: 100px auto; padding: 2rem; max-width: 500px; }
.login-box h1 { text-align: left; color: var(--accent-3); margin-top: 0; }
.login-box p { text-align: center; color: var(--muted); }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--muted); font-size: 0.9rem; }

/* ======== APP PRINCIPALE ======== */
/* Header */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 8px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--border);
    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); }

/* Barra Tab */
.tabs-bar {
    display: flex; justify-content: center; margin: 8px 0; background: var(--bg);
    border-bottom: 1px solid var(--border); width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto;
}
.mode-switch { display: inline-flex; padding: 2px; }
.mode-switch .tab {
    border: 0; background: transparent; padding: 10px 16px; border-radius: 8px; color: var(--muted);
    font-size: 0.95rem; font-weight: 500; cursor: pointer; border-bottom: 3px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
}
.mode-switch .tab:hover { color: var(--text); }
.mode-switch .tab.active { color: var(--accent); border-bottom: 3px solid var(--accent); }

/* 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 TABELLA DIPENDENTI (7 Colonne) ---
   ID: #dipendenti-table
   ============================================================ */
#dipendenti-table { table-layout: fixed; width: 100%; }

/* 1. Nome Cognome */
#dipendenti-table th:nth-child(1), #dipendenti-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) { 
    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) { width: 90px; text-align: center; }
/* 4. Contratto */
#dipendenti-table th:nth-child(4), #dipendenti-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) { width: 100px; text-align: center; }
/* 6. Stato */
#dipendenti-table th:nth-child(6), #dipendenti-table td:nth-child(6) { width: 80px; text-align: center; }
/* 7. Azioni */
#dipendenti-table th:last-child, #dipendenti-table td:last-child { 
    width: 180px; text-align: center; padding: 4px 8px; vertical-align: middle; 
}
/* Gestione allineamento bottoni */
#dipendenti-table td:last-child { white-space: nowrap; }
#dipendenti-table td:last-child button { display: inline-block; margin: 0 4px; float: none; }

/* ============================================================
   --- 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 ======== */
.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; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; }
.schedule-table th, .schedule-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; height: 60px; }

.schedule-table thead th { background-color: #1f2937; text-align: center; padding: 10px 8px; min-width: 90px; }
.schedule-table thead th:nth-last-child(1) { min-width: 60px; font-size: 0.8rem; }
.schedule-table thead th:nth-last-child(2) { min-width: 60px; font-size: 0.8rem; }
.schedule-table thead th:nth-last-child(3) { min-width: 60px; font-size: 0.8rem; }

.schedule-table tbody th { background-color: #111827; font-weight: 600; position: sticky; left: 0; min-width: 160px; z-index: 1; }
.schedule-table tbody th .contract-type { font-size: 0.8rem; color: var(--muted); font-weight: 400; }

.schedule-cell { text-align: center; vertical-align: middle; }
.admin-mode-active .schedule-cell { cursor: pointer; }
.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.85rem; }
.schedule-cell.has-deroga { background-color: rgba(239, 68, 68, 0.15); border: 1px dashed var(--danger); }

.schedule-balance-tag { font-size: 0.7rem; font-weight: 700; display: inline-block; padding: 2px 5px; border-radius: 4px; margin-top: 5px; 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); }

.shift-tag { display: block; background: var(--accent-2); color: white; font-weight: 600; border-radius: 4px; padding: 4px 6px; font-size: 0.9rem; margin-bottom: 4px; }
.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.9rem; }

.schedule-table .total-hours-cell, .schedule-table .total-spezzati-cell, .schedule-table .total-deroga-cell {
    text-align: center !important; vertical-align: middle !important; font-weight: bold; background: #1f2937;
}
.schedule-table .total-hours-cell { min-width: 70px; }
.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); }

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

.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); }

/* ======== Stili Pagina Report ======== */
.admin-mode-active #report-table .report-cell { cursor: pointer; }
.admin-mode-active #report-table .report-cell:hover { background-color: #1f2937; }

#report-table .report-cell { text-align: left; vertical-align: top; height: auto; min-height: 80px; padding: 6px 8px; font-size: 0.85rem; line-height: 1.4; }
#report-table .report-shift-raw { color: var(--muted); font-style: italic; }
#report-table .report-shift-eff { font-weight: 600; }
#report-table .report-shift-raw.shift-2 { margin-top: 4px; }
#report-table .report-day-total { font-size: 1.1em; font-weight: 600; display: block; margin-top: 5px; color: var(--text); }

#report-table .report-day-balance { font-size: 0.9em; font-weight: 500; display: inline-block; padding: 1px 4px; border-radius: 4px; }
#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); }

#report-table .report-cell.status-riposo { color: var(--muted); font-style: italic; font-size: 0.9em; text-align: center; vertical-align: middle; }
#report-table .report-cell.status-incompleto { background: rgba(239, 68, 68, 0.1); border: 1px dashed var(--danger); }
#report-table .report-cell.status-incompleto .report-shift-raw, #report-table .report-cell.status-incompleto .report-shift-eff { color: var(--danger); }

#report-table .total-cell { text-align: center; font-weight: bold; background: #1f2937; vertical-align: middle; }
#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; }

/* Stili per le nuove tabelle annuali */
#spezzati-table, #deroga-table { font-size: 0.85rem; white-space: nowrap; }
#spezzati-table th, #spezzati-table td, #deroga-table th, #deroga-table td { text-align: center; padding: 8px 10px; min-width: 60px; }
#spezzati-table th:first-child, #spezzati-table td:first-child, #deroga-table th:first-child, #deroga-table td:first-child {
    text-align: left; min-width: 160px; position: sticky; left: 0; background: var(--card); z-index: 1;
}
#spezzati-table thead th, #deroga-table thead th { position: sticky; top: 0; z-index: 2; }
#spezzati-table thead th:first-child, #deroga-table thead th:first-child { z-index: 3; }
#spezzati-table .total-col-annual, #deroga-table .total-col-annual {
    font-weight: 700; font-size: 1.1em; color: var(--accent); background: #1f2937; position: sticky; right: 0; z-index: 1;
}
#spezzati-table thead th:last-child, #deroga-table thead th:last-child { z-index: 3; }

/* ======== Stili Modalità Kiosk/Admin/Dipendente ======== */
.kiosk-mode-active .brand, .kiosk-mode-active .tabs-bar, .kiosk-mode-active main > .page-content:not(#timbratura-content) { display: none !important; }
.kiosk-mode-active .topbar { justify-content: flex-end; }
.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; }
#report-table .report-cell.is-corrected { background: rgba(234, 179, 8, 0.15); border: 1px dashed #eab308; }
#report-table .report-cell.is-corrected .report-shift-eff { color: #eab308; font-weight: 700; }
#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: 4px; }
.day-row { display: block; }
.day-row:empty { display: none; }
.day-row.role { font-size: 0.75rem; color: var(--muted); min-height: 0; }


/* ====================================================================
   [MEDIA QUERIES - OTTIMIZZAZIONE MOBILE]
   ==================================================================== */
@media (max-width: 900px) {
    main { max-width: none !important; padding: 8px !important; }
    .login-box { width: 95% !important; margin: 50px auto !important; max-width: 400px; padding: 1.5rem !important; }
    .topbar, .tabs-bar { max-width: none; margin-left: 0; margin-right: 0; }
    .topbar { padding: 8px 4px; flex-wrap: wrap; gap: 8px; }
    .topbar .right { gap: 5px; }
    .topbar .chip, .mode-switch .tab { font-size: 0.8rem; padding: 5px 8px; }
    .tabs-bar { overflow-x: auto; justify-content: center; }
    .mode-switch { min-width: fit-content; padding: 0; }
    .voti-form-grid { grid-template-columns: 1fr; max-height: 80vh; }
    .modal-content { width: 95%; }
    .header-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .header-bar > div { width: 100%; justify-content: space-between; }
    .header-bar .secondary[title="Stampa Report"], .header-bar .secondary[title="Stampa Orario"] { display: none !important; }
}

@media (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; }
    #report-table .report-cell { font-size: 0.7rem; padding: 4px 5px; }
    #report-table .total-cell { position: sticky; right: 0; z-index: 1; background: #1f2937; }
    #report-table thead th:nth-last-child(1), #report-table thead th:nth-last-child(2) { position: sticky; right: 0; z-index: 2; }
    #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 (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 DI STAMPA PDF (RIPRISTINATO + FIX REPORT)
================================================== */
@media print {
    /* 1. Impostazioni Pagina */
    @page { size: landscape; margin: 5mm 8mm; }
    
    body {
        background: white !important;
        color: black !important;
        font-family: 'Helvetica', Arial, sans-serif;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        /* Font base ereditato dalla variabile JS */
        font-size: var(--print-font-size) !important;
    }

    /* 2. NASCONDI ELEMENTI UI */
    .topbar, .tabs-bar, .app-footer, .header-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,
    /* Nascondi anche i controlli admin del Kiosk */
    #kiosk-admin-controls,
    /* Nascondi Toggle Pubblicazione */
    .toggle-switch-container {
        display: none !important;
    }
    
    /* Header di stampa compatto */
    #print-header { 
        display: flex !important; 
        justify-content: space-between;
        align-items: center; 
        padding: 5px 0 !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #000 !important; 
    }
    
    #print-header > div {
        text-align: center !important; /* FORZA CENTRAMENTO TESTO */
        flex-grow: 1; 
    }

    #print-header img { 
        height: 25px !important; 
        width: auto !important;
    }

    #print-header img:last-child {
        height: 45px !important; 
        background-color: white !important; 
        padding: 5px !important; 
        border-radius: 8px; 
    }
    
    #print-header-title { font-size: 1.1rem !important; margin: 0; }
    #print-subtitle { font-size: 0.9rem !important; margin: 2px 0 0 0; }

    main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; width: 100%; }
    .card { border: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; }

    /* --- SCENARIO A: STAMPA PIANIFICAZIONE (ORARIO) --- */
    body.printing-schedule #orario-content { display: block !important; }
    body.printing-schedule #report-content, 
    body.printing-schedule #timbratura-content { display: none !important; }
    
    /* Nascondi colonne extra e footer */
    body.printing-schedule .schedule-table th:nth-last-child(-n+3), 
    body.printing-schedule .schedule-table td:nth-last-child(-n+3),
    body.printing-schedule .schedule-table tfoot { display: none !important; }
    
    /* *** GRIGLIA FISSA DINAMICA (JS Calcola altezza) *** */
    body.printing-schedule .schedule-cell {
        padding: 0 !important; 
        vertical-align: top !important;
    }

    body.printing-schedule .day-grid-container {
        display: flex !important;
        flex-direction: column !important;
        /* ALTEZZA CALCOLATA DA JS */
        height: var(--print-row-height) !important; 
        border: none !important;
        gap: 0 !important; 
    }

    body.printing-schedule .day-row {
        border-bottom: 1px solid #ddd !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 33% !important; 
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
    
    body.printing-schedule .day-row:empty { display: flex !important; }
    body.printing-schedule .day-row:last-child { border-bottom: none !important; }
    
    /* Stile Shift Tag (Pillole) in stampa */
    body.printing-schedule .shift-tag {
        background: transparent !important;
        color: black !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        /* FONT CALCOLATO DA JS */
        font-size: var(--print-font-size) !important;
        font-weight: bold !important;
        display: inline !important;
    }
    
    body.printing-schedule .day-row.role {
        /* Ruolo ancora più piccolo */
        font-size: calc(var(--print-font-size) - 3px) !important;
        color: #666 !important;
    }
    
    body.printing-schedule .contract-type { display: none !important; }
    
    /* Tabella Generale */
    body.printing-schedule .schedule-table { 
        width: 100%; 
        border-collapse: collapse; 
        font-size: var(--print-font-size) !important; 
    }
    body.printing-schedule .schedule-table th, 
    body.printing-schedule .schedule-table td { 
        border: 1px solid #666 !important; 
        padding: 2px !important; 
        text-align: center !important; 
        vertical-align: middle !important; 
        color: black !important; 
        height: auto !important; 
    }
    body.printing-schedule .schedule-table thead th { 
        background-color: #eee !important; 
        font-weight: bold; 
        border-bottom: 1px solid #000 !important; 
        padding: 4px !important;
        font-size: 9px !important;
    }
    body.printing-schedule .schedule-table tbody th { 
        background-color: white !important; 
        color: black !important; 
        text-align: left !important; 
        padding-left: 4px !important; 
        width: 130px; 
        
        /* Nome leggermente più grande */
        font-size: calc(var(--print-font-size) + 1px) !important;
        
        white-space: normal; /* A capo se nome lungo */
        line-height: 1.1;
    }

    /* --- SCENARIO B: STAMPA REPORT (CON FIX COLORI) --- */
    body.printing-report #report-content { display: block !important; }
    body.printing-report #report-tab-timbrature { display: block !important; }
    body.printing-report #orario-content, 
    body.printing-report #timbratura-content,
    body.printing-report #report-tabs-bar { display: none !important; } 

    body.printing-report .schedule-table { width: 100%; border-collapse: collapse; font-size: 10px; }
    
    /* --- FIX COLORI REPORT --- */
    body.printing-report .schedule-table th,
    body.printing-report .schedule-table td { 
        border: 1px solid #444 !important; 
        padding: 2px !important; 
        vertical-align: top !important; 
        color: black !important; 
        background-color: white !important; /* Forza sfondo bianco per il corpo */
    }
    /* Intestazione (Header) grigio chiaro */
    body.printing-report .schedule-table thead th {
        background-color: #eee !important; 
        color: black !important;
        border-bottom: 2px solid #000 !important;
    }
    /* Prima colonna (Nomi) bianca */
    body.printing-report .schedule-table tbody th {
        background-color: white !important;
        color: black !important;
    }
    
    body.printing-report .report-cell { border: 1px solid #444 !important; font-size: 10px; padding: 2px !important; height: auto !important; min-height: 0 !important; }
    body.printing-report .report-shift-raw { display: none !important; } 
    body.printing-report .report-shift-eff { font-weight: bold; font-size: 11px; display: block; margin-bottom: 2px; }
    body.printing-report .report-day-total { font-size: 10px; margin-top: 2px; font-weight: bold; }
    body.printing-report .report-day-balance { border: 1px solid #ccc; padding: 0 2px; margin-top: 1px; font-size: 9px; background: transparent !important; color: black !important; }
    
    /* --- SCENARIO C: STAMPA KIOSK --- */
    body.printing-kiosk #timbratura-content { display: block !important; padding-top: 0 !important; }
    body.printing-kiosk #kiosk-print-container { display: block !important; margin-top: 20px; }
    body.printing-kiosk #orario-content, 
    body.printing-kiosk #report-content { display: none !important; }
    body.printing-kiosk .kiosk-mode { padding-top: 0 !important; }
    body.printing-kiosk .schedule-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 12px; }
    body.printing-kiosk .schedule-table th, 
    body.printing-kiosk .schedule-table td { border: 1px solid #000; padding: 8px; text-align: center; }
    body.printing-kiosk .schedule-table th { background-color: #eee; font-weight: bold; }
}

/* --- 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); } }