/* ======================================================
   COLORI GLOBALI
====================================================== */

:root {
    --ferie: #c6efce;
    --ferie_prec: #ffeb9c;
    --legge104: #9fd5ff;
    --malattia: #ffc7ce;
    --festivita: #d9c2f0;
    --smart: #bdd7ee;
    --altro: #d9d9d9;
    --straordinario: #b6d7a8;
    --permesso: #f4b183;
    --sospensione: #fff2f2;
    --assemblea: #ffe599;
}

/* ======================================================
   BASE
====================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
}

/* ======================================================
   NAVBAR
====================================================== */

.navbar {
    background: #2c3e50;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* riga 1 */
.navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* logo */
.logo {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
}

/* riga 2 menu */
.menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.15);
    /* Scorrimento orizzontale sempre attivo (non solo sotto 1024px):
       a qualunque larghezza di finestra, se le voci non ci stanno più
       il menu scorre invece di "rompersi" o restare bloccato.
       Niente touch-action/-webkit-overflow-scrolling qui: su Safari
       iOS quella combinazione blocca il riconoscimento del tap sui
       link dentro il contenitore — l'overflow-x:auto di base basta
       da solo, iOS gestisce già lo scroll a inerzia automaticamente. */
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.menu a {
    flex: 0 0 auto;
    color: white;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    transition: .2s;
    cursor: pointer;
}

.menu a:hover {
    background: rgba(255,255,255,.12);
}

.menu a.active {
    background: #f39c12;
}

.dropbtn.active {
    background: #f39c12;
    color: #fff;
}

/* Scrollbar del menu: visibile e sottile su desktop (mouse), dove è
   l'unico indizio che ci siano altre voci fuori vista; nascosta su
   touch (iPad/telefono), dove lo swipe è già intuitivo da solo. */
@media (hover: hover) and (pointer: fine) {
    .menu {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.4) transparent;
    }
    .menu::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .menu::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.4);
        border-radius: 3px;
    }
    .menu::-webkit-scrollbar-track {
        background: transparent;
    }
}

@media (hover: none) {
    .menu {
        scrollbar-width: none;
    }
    .menu::-webkit-scrollbar {
        display: none;
    }
}

/* ======================================================
   UTENTE
====================================================== */

.utente-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.utente-box .utente {
    background: #e8f4ff;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
}

.utente-box a {
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.utente-box .anagrafica {
    background: #f1f8ff;
    color: #0d6efd;
}

.utente-box .password {
    background: #fff3cd;
    color: #856404;
}

.utente-box .logout {
    background: #dc3545;
    color: white;
}

/* ======================================================
   DROPDOWN ADMIN FIX
====================================================== */

.dropdown {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    z-index: 20000;
}

.dropbtn {
    background: #34495e;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    z-index: 20001;
}

.dropbtn:hover {
    background: #3d566e;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: white;
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.20);
    z-index: 30000;
    overflow: visible;
    pointer-events: auto;
}

.dropdown-content.aperto {
    display: block !important;
}

.dropdown-content a {
    display: block;
    padding: 12px 15px;
    color: #2c3e50 !important;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 30001;
}

.dropdown-content a:hover {
    background: #f4f6f8;
}

/* Rimossa regola :focus-within che entrava in conflitto con il toggle JS */

/* ======================================================
   BADGE NOTIFICHE (Messaggi, Richieste, Online) E LORO MINI-TENDINE
====================================================== */

.badge-notifica {
    display: inline-block;
    color: white;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 4px;
}

.notifica-content {
    min-width: 260px;
    max-width: 320px;
    padding: 6px 0;
}

.notifica-riga {
    display: block;
    padding: 10px 15px !important;
    border-bottom: 1px solid #f2f2f2;
}

.notifica-riga:last-of-type {
    border-bottom: none;
}

.notifica-riga-statica {
    cursor: default;
}

.notifica-titolo {
    font-weight: bold;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notifica-anteprima {
    color: #777;
    font-size: 12.5px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notifica-badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    border-radius: 10px;
    padding: 0px 7px;
    font-size: 11px;
    font-weight: bold;
}

.notifica-vuoto {
    padding: 14px 15px;
    color: #999;
    font-size: 13px;
    text-align: center;
}

.notifica-footer {
    display: block;
    padding: 10px 15px !important;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #2c3e50 !important;
    border-top: 1px solid #eee;
    margin-top: 4px;
}

/* ======================================================
   CONTAINER
====================================================== */

.container {
    padding: 20px;
    margin-top: 145px;
}

/* ======================================================
   CARD
====================================================== */

.box,
.card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ======================================================
   STATISTICHE ESPANDIBILI (Dashboard Admin)
====================================================== */

.stat-espandibile {
    border-bottom: 1px solid #eee;
    padding: 8px 4px;
}

.stat-espandibile:last-of-type {
    border-bottom: none;
}

.stat-espandibile summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 6px;
    border-radius: 6px;
    user-select: none;
}

.stat-espandibile summary::-webkit-details-marker {
    display: none;
}

.stat-espandibile summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    font-size: 11px;
    color: #888;
    transition: transform 0.15s ease;
}

.stat-espandibile[open] summary::before {
    transform: rotate(90deg);
}

.stat-espandibile summary:hover {
    background: #f5f6f7;
}

.stat-espandibile ul {
    margin: 8px 0 4px 28px;
    padding: 0;
}

.stat-espandibile li {
    list-style: disc;
    padding: 2px 0;
    color: #333;
    font-size: 14px;
}

.stat-espandibile .conteggio-mini {
    color: #888;
    font-size: 12px;
}

.stat-espandibile a {
    margin-left: 28px;
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
}

/* ======================================================
   FORM
====================================================== */

input,
select {
    padding: 8px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* ======================================================
   BOTTONI
====================================================== */

button {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.add {
    background: #27ae60;
    color: white;
}

.save {
    background: #3498db;
    color: white;
}

.del {
    background: #e74c3c;
    color: white;
}

.clear {
    background: #7f8c8d;
    color: white;
}

/* ======================================================
   TABELLE
====================================================== */

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #2c3e50;
    color: white;
    padding: 10px;
}

td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

/* ======================================================
   CALENDARI
====================================================== */

#calendar,
#calendarPermessi,
#calendarSituazione {
    background: white;
    padding: 10px;
    border-radius: 10px;
}

.fc-event {
    cursor: pointer;
    color: #000 !important;
    border: 1px solid rgba(0,0,0,.10) !important;
}

/* ======================================================
   COLORI RIGHE
====================================================== */

.tipo-straordinario {
    background: var(--straordinario) !important;
}

.tipo-permesso {
    background: var(--permesso) !important;
}

tr.tipo-ferie {
    background: var(--ferie) !important;
}

tr.tipo-ferie-prec {
    background: var(--ferie_prec) !important;
}

tr.tipo-104 {
    background: var(--legge104) !important;
}

tr.tipo-malattia {
    background: var(--malattia) !important;
}

tr.tipo-festivita {
    background: var(--festivita) !important;
}

tr.tipo-smart {
    background: var(--smart) !important;
}

tr.tipo-sospensione {
    background: var(--sospensione) !important;
}

tr.tipo-assemblea {
    background: var(--assemblea) !important;
}

tr.tipo-altro {
    background: var(--altro) !important;
}

/* ======================================================
   MOBILE
====================================================== */

/* ======================================================
   TABLET (es. iPad) — il menu ha troppe voci per stare su una riga
   a schermi di questa larghezza: niente wrap "a capo" (diventerebbe
   altissimo), invece scorre orizzontalmente come già succede sotto i
   768px. Sopra i 768px la regola normale non scattava, e su iPad il
   menu restava "bloccato" (in overflow ma senza modo di scorrerlo).
====================================================== */

@media (max-width: 1024px) {

    .menu {
        gap: 6px;
    }

}

@media (max-width: 768px) {

    /* --- Navbar --- */
    .navbar {
        padding: 10px 14px;
    }

    .navbar-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .logo {
        font-size: 17px;
    }

    /* Utente: icone compatte senza testo */
    .utente-box {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .utente-box .utente {
        font-size: 12px;
        padding: 4px 10px;
    }

    .utente-box a {
        font-size: 12px;
        padding: 5px 10px;
    }

    /* Menu: a questa larghezza restano solo gli aggiustamenti di
       spaziatura/font — lo scorrimento orizzontale è già attivo di
       base (vedi regola .menu principale più sopra). */
    .menu {
        width: 100%;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .menu a {
        font-size: 13px;
        padding: 7px 12px;
    }

    /* Container */
    .container {
        margin-top: 195px;
        padding: 12px;
    }

    /* Card */
    .card, .box {
        padding: 12px;
        margin-bottom: 14px;
    }

    /* Tabelle scrollabili (esclude le tabelle interne di FullCalendar,
       che hanno bisogno del vero layout a tabella per la vista Mese) */
    table:not(.fc-scrollgrid):not(.fc-scrollgrid-sync-table):not(.fc-list-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form: input a larghezza piena */
    input, select {
        width: 100%;
        margin: 4px 0;
        font-size: 16px; /* evita zoom automatico iOS */
    }

    /* Bottoni più grandi (touch-friendly) */
    button {
        padding: 12px 16px;
        font-size: 15px;
        width: 100%;
        margin: 4px 0;
    }

    /* Dropdown admin */
    .dropbtn {
        font-size: 13px;
        padding: 7px 12px;
    }

    .dropdown-content {
        min-width: 150px;
    }
}

/* ======================================================
   FULLCALENDAR — BASE
====================================================== */

.fc {
    width: 100%;
}

.fc-scroller {
    overflow: visible !important;
}

.fc-view-harness {
    min-height: 400px !important;
}

/* ======================================================
   FULLCALENDAR — MOBILE
====================================================== */

@media (max-width: 768px) {

    /* Toolbar: titolo e bottoni più piccoli */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem !important;
    }

    .fc .fc-button {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    /* Vista mese: celle minime leggibili */
    .fc .fc-daygrid-day-number {
        font-size: 12px;
        padding: 2px 4px;
    }

    .fc .fc-col-header-cell-cushion {
        font-size: 11px;
        padding: 4px 2px;
    }

    /* Eventi nella vista mese: solo titolo troncato */
    .fc-daygrid-event {
        font-size: 10px !important;
        padding: 1px 3px !important;
    }

    /* Vista lista: più spazio e leggibile */
    .fc-list-day-cushion {
        font-size: 13px;
        padding: 8px 10px;
    }

    .fc-list-event td {
        font-size: 13px;
        padding: 8px 6px;
    }

    .fc-view-harness {
        min-height: 300px !important;
    }
}

/* LISTA CALENDARIO */
.fc-list-day-cushion {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 12px;
}

.fc-list-day-side-text,
.fc-list-day-text {
    color: #ffffff !important;
}

.fc-list-event-time {
    color: #333 !important;
    font-size: 13px;
}

.fc-list-event-title {
    color: #111 !important;
    font-size: 14px;
    font-weight: 500;
    white-space: normal !important;
    word-break: break-word !important;
}

.fc-list-table td {
    color: #111 !important;
    padding: 10px 8px !important;
}

.fc-list-event:hover td {
    background-color: #f0f4f8 !important;
}

/* ======================================================
   EVIDENZIAZIONE DOMENICHE NEL CALENDARIO
====================================================== */

.fc .fc-day-sun {
    background-color: #fff2f2 !important; /* Sfondo rosso pastello molto tenue */
}

.fc .fc-day-sun .fc-daygrid-day-number,
.fc .fc-day-sun .fc-col-header-cell-cushion {
    color: #ba1a1a !important; /* Testo del numero e del giorno in rosso scuro */
    font-weight: bold;
}

/* ======================================================
   ETICHETTA FESTIVITÀ ALLINEATA
====================================================== */

.fc-daygrid-day[data-festa]::after {
    content: attr(data-festa);
    display: block;
    font-size: 11px;
    color: #ba1a1a;
    font-weight: bold;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    /* Su schermi stretti l'etichetta va a capo invece di essere tagliata */
    .fc-daygrid-day[data-festa]::after {
        font-size: 8px;
        padding: 1px 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
}

/* ======================================================
   LAMPEGGIO RIGA TABELLA (arrivo da calendario Home/Agenda/Permessi)
====================================================== */
/* Nota: le righe hanno un colore di sfondo con !important (in base al
   tipo: Straordinario, Ferie, ecc.), che vince sempre su qualsiasi
   animazione dello sfondo. Per questo il lampeggio usa invece un
   bagliore (box-shadow) attorno alle celle, sempre visibile sopra
   qualunque colore di riga. */

@keyframes lampeggio-riga {
    0%   { box-shadow: inset 0 0 0 9999px rgba(255, 196, 0, 0); }
    50%  { box-shadow: inset 0 0 0 9999px rgba(255, 196, 0, 0.55); }
    100% { box-shadow: inset 0 0 0 9999px rgba(255, 196, 0, 0); }
}

.riga-lampeggio td {
    animation: lampeggio-riga 1.7s ease-in-out 3;
    cursor: pointer;
}