/* STILI GENERALI PER L'INTERO PROGRAMMA */

/* ============================================================
   DESIGN TOKENS - palette e valori riutilizzati in tutto il file
   ============================================================ */
:root {
    --ac-primary: #2b6cb0;
    --ac-primary-soft: #ebf4fb;
    --ac-primary-border: rgba(43, 108, 176, 0.18);

    --ac-accent: #a9823f;
    --ac-accent-soft: #f8f0dd;
    --ac-accent-border: rgba(169, 130, 63, 0.22);

    --ac-warning: #b7791f;
    --ac-warning-soft: #fdf3d9;
    --ac-warning-border: rgba(183, 121, 31, 0.22);

    --ac-danger: #c53030;
    --ac-danger-soft: #fbeaea;
    --ac-danger-border: rgba(197, 48, 48, 0.2);

    --ac-success: #2f855a;
    --ac-success-soft: #e9f6ee;

    --ac-ink: #1a202c;
    --ac-muted: #718096;
    --ac-border: #e6e9ee;

    --ac-radius-sm: 8px;
    --ac-radius-md: 12px;
    --ac-radius-lg: 18px;

    --ac-shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.06);
}

/* Riga di pulsanti Sì/No nei popup di conferma (es. camera non chiusa) */
.ac-modal-confirm-actions {
    display: flex;
    gap: 12px;
}

.ac-modal-confirm-actions .action-btn {
    flex: 1;
}

/* ============================================================
   POPUP MODERNO E COMPATTO (mobile-friendly) - riusato da qualsiasi popup
   del plugin che non necessiti delle dimensioni grandi della modale generica
   .ac-modal-content (pensata per form più grandi)
   ============================================================ */
.ac-modal-moderno {
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px !important;
}

/* Il popup "Crea Dipendente" ha più campi degli altri popup (anagrafica +
   ruolo + strutture + contratto): rinforziamo esplicitamente il limite di
   altezza per garantire lo scroll anche su schermi più piccoli. */
#ac-modal-dipendente-crea .ac-modal-content,
#ac-modal-dipendente-azioni .ac-modal-content {
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ac-modal-moderno .ac-modal-header h3 {
    font-size: 1.05rem !important;
}

.ac-modal-moderno .ac-form-group {
    margin-bottom: 14px;
    text-align: left;
}

.ac-modal-moderno label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--ac-muted);
    font-size: 12.5px;
    text-transform: none !important; /* la regola generica .ac-modal-content label mette tutto maiuscolo: qui è troppo per un popup così piccolo */
    letter-spacing: normal !important;
}

.ac-modal-moderno input[type="text"],
.ac-modal-moderno input[type="date"],
.ac-modal-moderno textarea,
.ac-modal-moderno select {
    width: 100%;
    padding: 9px 12px !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

/* Chrome mostra una freccetta nativa per gli input collegati a un <datalist>,
   ma senza un vero menu a tendina non ha senso mostrarla (i suggerimenti
   appaiono comunque digitando) */
.ac-modal-moderno input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* Larghezza specifica per il popup di segnalazione manutenzione */
.ac-manutenzione-modal {
    max-width: 400px;
}

.ac-form-static-value {
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid var(--ac-border);
    border-radius: 8px;
    font-weight: 700;
    color: var(--ac-ink);
    font-size: 14px;
}

/* Link testuale discreto sotto al form/lista (es. "Visualizza manutenzioni", "Torna alla segnalazione") */
.ac-manutenzione-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    background: none;
    border: none;
    border-top: 1px solid var(--ac-border);
    color: var(--ac-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ac-manutenzione-link-btn:hover {
    color: #1a4971;
}

/* Elenco manutenzioni in attesa dentro il popup */
.ac-manutenzione-item {
    border: 1px solid var(--ac-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    text-align: left;
}

.ac-manutenzione-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ac-manutenzione-item-camera {
    font-weight: 800;
    color: var(--ac-ink);
    font-size: 14px;
}

.ac-manutenzione-item-desc {
    font-size: 13px;
    color: var(--ac-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.ac-manutenzione-item-meta {
    font-size: 11.5px;
    color: #a0aec0;
    margin-bottom: 6px;
}

.ac-manutenzione-item-stato {
    margin-bottom: 12px;
}

.ac-manutenzione-item .action-btn {
    width: 100%;
    padding: 9px;
    font-size: 12.5px;
    margin-top: 2px;
}

@media (max-width: 480px) {
    /* Esteso a .ac-modal-content generico (non solo .ac-modal-moderno):
       alcuni popup (piscine, un modal di housekeeping) non avevano questa
       classe e restavano senza margine laterale su mobile. */
    .ac-modal-content {
        width: calc(100% - 10px) !important; /* Esattamente 5px per lato */
        margin: 0 5px !important;
        box-sizing: border-box;
    }
    .ac-modal-moderno {
        max-height: 90vh;
        padding: 16px !important;
    }
    .ac-modal-moderno .ac-modal-header h3 {
        font-size: 1rem !important;
    }
    .ac-modal-moderno .ac-modal-header {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
}

/* Badge priorità (usati nel popup e nella dashboard) */
.badge-priorita {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.priorita-alta  { background: var(--ac-danger-soft);  color: var(--ac-danger); }
.priorita-media { background: var(--ac-warning-soft); color: var(--ac-warning); }
.priorita-bassa { background: var(--ac-primary-soft); color: var(--ac-primary); }

/* Riga "manutenzione risolta" nella tabella della dashboard: resta visibile 12h, in verde */
/* Toggle di visibilità Desktop / Mobile (modulo Manutenzioni dashboard) */
.ac-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .ac-desktop-only {
        display: none;
    }
    .ac-mobile-only {
        display: block;
    }
}

/* Card mobile per le Manutenzioni: niente scroll orizzontale, un blocco per
   segnalazione, descrizione in fondo con accordion se supera le 2 righe */
.ac-manutenzione-card-mobile {
    background: #ffffff;
    border: 1px solid var(--ac-border);
    border-left: 4px solid #dd6b20; /* colore di default, sovrascritto sotto in base a priorità/stato */
    border-radius: var(--ac-radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--ac-shadow-soft);
}

.ac-manutenzione-card-mobile[data-priorita="Bassa"] { border-left-color: #ecc94b; }
.ac-manutenzione-card-mobile[data-priorita="Media"] { border-left-color: #dd6b20; }
.ac-manutenzione-card-mobile[data-priorita="Alta"]  { border-left-color: #c53030; }
.ac-manutenzione-card-mobile.risolta { border-left-color: #38a169; }

.ac-manutenzione-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.ac-manutenzione-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--ac-ink);
    margin-bottom: 12px;
}

.ac-manutenzione-card-meta span:not(:first-child):not(:last-child) {
    color: #cbd5e0;
}

.ac-manutenzione-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--ac-border);
}

/* Descrizione in fondo al blocco, con accordion se supera le 2 righe */
.ac-manutenzione-card-descrizione {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ac-border);
}

.ac-descrizione-testo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: var(--ac-muted);
    line-height: 1.45;
    margin: 0;
}

.ac-descrizione-testo.espansa {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
}

.ac-descrizione-toggle {
    display: none; /* mostrato via JS solo se il testo è realmente troncato oltre 2 righe */
    background: none;
    border: none;
    color: var(--ac-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 0 0 0;
    cursor: pointer;
}

/* Tabella "Manutenzioni in corso" (dashboard): la barra laterale del numero
   camera cambia colore in base a priorità/stato, invece del generico blu.
   Scoperto SOLO su questa tabella (id specifico), il resto del plugin
   mantiene la barra blu di default (.ac-manager-table tbody td strong). */
#tabella-manutenzioni-dashboard tr[data-priorita="Bassa"] td strong {
    border-left-color: #ecc94b !important; /* Giallo */
}
#tabella-manutenzioni-dashboard tr[data-priorita="Media"] td strong {
    border-left-color: #dd6b20 !important; /* Arancione */
}
#tabella-manutenzioni-dashboard tr[data-priorita="Alta"] td strong {
    border-left-color: #c53030 !important; /* Rosso */
}
#tabella-manutenzioni-dashboard tr.riga-manutenzione-risolta td strong {
    border-left-color: #38a169 !important; /* Verde: manutenzione eseguita, a prescindere dalla priorità */
}

/* Padding responsive per le card dashboard: nel markup PHP è impostato inline
   a 25px, che su mobile lascia troppo poco spazio utile alle tabelle.
   !important necessario per vincere sull'inline style. */
@media (max-width: 768px) {
    .ac-card {
        padding: 18px !important;
    }
}

@media (max-width: 480px) {
    .ac-card {
        padding: 14px !important;
    }
}

/* Colonna Descrizione (tabella Manutenzioni dashboard): a differenza delle altre
   celle (nowrap globale), questa deve andare a capo con un limite di larghezza,
   altrimenti una descrizione lunga allarga la tabella all'infinito in orizzontale
   (specialmente fastidioso su mobile, dove lo scroll non finisce più) */
.ac-manager-table td.ac-col-descrizione {
    white-space: normal !important;
    max-width: 220px;
    word-break: break-word;
}

@media (max-width: 480px) {
    .ac-manager-table td.ac-col-descrizione {
        max-width: 150px;
    }
}

/* Cella data/ora nelle tabelle dashboard: ORA grande sopra, data piccola sotto
   (volutamente l'opposto del modulo piscine, che mostra la data grande e l'ora piccola) */
.ac-cell-datetime {
    white-space: nowrap;
}
.ac-ora-grande {
    font-size: 14px;
    font-weight: 700;
    color: var(--ac-ink);
}
.ac-data-piccola {
    font-size: 11px;
    color: var(--ac-muted);
}

/* Tabella "Housekeeping" (dashboard): barra laterale colorata in base allo stato,
   stesso pattern già usato per la tabella Manutenzioni */
#tabella-housekeeping-dashboard tr[data-status="In pulizia"] td strong {
    border-left-color: #ecc94b !important; /* Giallo: inizio pulizia */
}
#tabella-housekeeping-dashboard tr[data-status="Non Disturbare"] td strong {
    border-left-color: #805ad5 !important; /* Viola: non disturbare */
}
#tabella-housekeeping-dashboard tr[data-status="Pronta"] td strong {
    border-left-color: #38a169 !important; /* Verde: pronta */
}

/* Colonna nascosta su mobile (es. "Stato Pulizia": ridondante con il colore della barra laterale) */
@media (max-width: 768px) {
    .ac-col-hide-mobile {
        display: none;
    }
}

/* Campo "Presa in carico da X" / "Risolta da X" */
/* Badge di stato + eventuale campo "gestito da": sempre impilati in colonna,
   anche dentro contenitori flex (dove un semplice <br> viene ignorato) */
.ac-stato-e-gestito {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Pulsanti azione manutenzione (risolvi/prendi in carico + elimina): sempre
   vicini tra loro, anche dentro un footer flex con space-between (che
   altrimenti li tratterebbe come elementi separati e li allontanerebbe) */
.ac-manutenzione-azioni-gruppo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ac-gestito-da {
    display: inline-block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
}

.ac-gestito-da.presa-in-carico {
    color: #975a16;
}

.ac-gestito-da.risolta {
    color: var(--ac-success);
}

/* Pulsante "manutenzione eseguita": tre stati, sia in versione icona
   (.action-icon, usato nelle tabelle/card) che in versione testo
   (.action-btn, usato nella lista del popup housekeeping) */
.action-icon.stato-presa-in-carico,
.action-btn.stato-presa-in-carico {
    background: #fefcbf !important;
    color: #975a16 !important;
    border-color: #ecc94b !important;
}

.action-icon.stato-presa-in-carico:hover,
.action-btn.stato-presa-in-carico:hover {
    background: #fbe98a !important;
}

.action-icon.stato-risolta,
.action-btn.stato-risolta {
    background: var(--ac-success-soft) !important;
    color: var(--ac-success) !important;
    border-color: #9ae6b4 !important;
}

.ac-manutenzione-item-stato {
    margin: 8px 0;
}

/* Header dei contenitori dashboard (titolo + pulsante "Visualizza tutto") */
.ac-card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.ac-card-header-flex h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ac-ink);
}

/* Tab moderne di filtro (modulo Turni: Mansione / Struttura) */
/* Nasconde visivamente gli input file "trigger" mantenendoli interagibili via
   script: display:none può impedire .trigger('click') su alcuni browser mobili
   (in particolare iOS Safari), questa tecnica invece funziona ovunque. */
.ac-input-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   FOTO MANUTENZIONE - anteprima nel form, widget desktop (popover), riga
   mobile (quadratino + pulsante), e lightbox condiviso
   ============================================================ */

/* Miniature multiple nel form di segnalazione (una per ogni foto aggiunta) */
.ac-manutenzione-foto-form-riga {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#manutenzione-foto-lista {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ac-foto-form-thumb-wrap {
    position: relative;
    width: 48px;
    height: 48px;
}

.ac-foto-form-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--ac-border);
    display: block;
}

.ac-foto-form-thumb-rimuovi {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #c53030;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* --- DESKTOP: icona fotocamera + popover a fumetto al hover --- */
.ac-foto-widget {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.ac-foto-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e0; /* Grigio: nessuna foto */
    padding: 4px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.ac-foto-trigger svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    vertical-align: middle;
}

.ac-foto-trigger.ha-foto {
    color: var(--ac-primary); /* Blu: ci sono foto */
}

/* position:fixed (non absolute): così il popover è un elemento isolato,
   posizionato via JS in base alla posizione reale dell'icona sullo schermo.
   Non influenza mai la larghezza della tabella e non viene tagliato dallo
   scroll orizzontale/verticale dei contenitori (.ac-table-responsive-wrapper /
   .ac-scroll-box), a differenza di un position:absolute annidato lì dentro. */
.ac-foto-popover {
    display: none;
    position: fixed;
    background: #ffffff;
    border: 1px solid var(--ac-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 16px; /* Più margine rispetto alle miniature */
    z-index: 1000000;
    width: max-content;
    max-width: 260px;
    text-align: center;
}

.ac-foto-popover.visible {
    display: block;
}

.ac-foto-popover::before {
    /* Freccetta a fumetto, ora rivolta verso sinistra (il popover si apre a destra) */
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #ffffff;
}

.ac-foto-popover-grid {
    display: flex;
    flex-wrap: nowrap; /* Sempre in riga: max 3 foto + slot, mai a capo */
    gap: 8px;
    justify-content: center;
}

.ac-foto-popover-grid img {
    width: 53px; /* +20% rispetto ai 44px originali */
    height: 53px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--ac-border);
    flex-shrink: 0;
}

/* Lo slot "aggiungi foto": stessa dimensione delle miniature, occupa un
   posto nella riga invece di stare sotto come pulsante separato */
.ac-foto-popover-grid .ac-foto-aggiungi-btn {
    width: 53px;
    height: 53px;
    border-radius: 6px;
    background: var(--ac-primary-soft);
    color: var(--ac-primary);
    border: 1px dashed var(--ac-primary-border);
    flex-shrink: 0;
}

.ac-foto-popover-grid .ac-foto-aggiungi-btn:hover {
    background: var(--ac-primary);
    color: #ffffff;
}

.ac-foto-aggiungi-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ac-primary-soft);
    color: var(--ac-primary);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ac-foto-aggiungi-btn svg,
.ac-foto-aggiungi-btn i {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.ac-foto-aggiungi-btn:hover {
    background: var(--ac-primary);
    color: #ffffff;
}

.ac-foto-aggiungi-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- MOBILE: quadratino con l'ultima foto + pulsante fotocamera accanto --- */
.ac-manutenzione-foto-riga-mobile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px 0;
}

.ac-foto-quadratino {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--ac-border);
}

/* Lightbox/slider condiviso (ac-core.js) */
.ac-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
    box-sizing: border-box;
}

.ac-lightbox-overlay.active {
    opacity: 1;
}

/* "Palco": freccia - immagine - freccia, sempre vicine tra loro invece che
   ancorate ai bordi dello schermo (così funziona a qualsiasi dimensione
   dell'immagine, piccola o grande) */
.ac-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 900px;
}

.ac-lightbox-img-wrap {
    position: relative;
    flex: 1 1 auto;
    max-width: 640px; /* Più piccolo su desktop, come richiesto */
    min-width: 0;
}

/* Pulsante elimina foto: in basso a destra della foto stessa */
.ac-lightbox-elimina-foto {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(197, 48, 48, 0.85);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ac-lightbox-elimina-foto:hover:not(:disabled) {
    background: #c53030;
    transform: scale(1.08);
}

.ac-lightbox-elimina-foto:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ac-lightbox-img-wrap img {
    width: 100%;
    max-height: 75vh;
    object-fit: cover;
    border-radius: 22px; /* Molto arrotondato, come il riferimento */
    display: block;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.ac-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
}

/* Frecce: cerchi chiari inset, come nel riferimento (non ai bordi schermo,
   ma appena fuori dall'immagine) */
.ac-lightbox-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #333333;
    border: none;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ac-lightbox-nav:hover {
    background: #ffffff;
    transform: scale(1.05);
}

@media (max-width: 600px) {
    .ac-lightbox-stage {
        gap: 8px;
    }
    .ac-lightbox-nav {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .ac-lightbox-img-wrap img {
        border-radius: 16px;
    }
}

/* Riga ricerca + filtro (SOLO per la pagina Dipendenti: non tocca .ac-search-container,
   che resta identica a quella del modulo Targhe) */
.ac-search-filtro-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 25px 0;
}

.ac-search-filtro-riga .ac-search-container {
    margin: 0; /* La riga gestisce già lo spazio, non serve il margine di default */
    max-width: 40%; /* Desktop: barra di ricerca limitata al 40%, come richiesto */
}

@media (max-width: 768px) {
    .ac-search-filtro-riga .ac-search-container {
        max-width: none; /* Mobile: piena larghezza */
    }
}

.ac-filtro-widget {
    position: relative;
    flex-shrink: 0;
}

.ac-filtro-trigger {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.ac-filtro-trigger:hover {
    border-color: var(--ac-primary-border);
    color: var(--ac-primary);
}

.ac-filtro-popover {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid var(--ac-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 18px;
    z-index: 500;
    width: 240px;
    max-height: 420px;
    overflow-y: auto;
}

.ac-filtro-popover.visible {
    display: block;
}

.ac-filtro-gruppo {
    margin-bottom: 16px;
}

.ac-filtro-gruppo-titolo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ac-muted);
    margin-bottom: 8px;
}

.ac-filtro-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ac-ink);
    margin-bottom: 7px;
    cursor: pointer;
}

.ac-filtro-checkbox:last-child {
    margin-bottom: 0;
}

.ac-filtro-reset {
    width: 100%;
    padding: 9px;
    background: var(--ac-primary-soft);
    color: var(--ac-primary);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}

.ac-filtro-reset:hover {
    background: var(--ac-primary);
    color: #ffffff;
}

/* Schede (tab) del popup "Azioni dipendente" */
.ac-tabs-moderne {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    border-bottom: 2px solid var(--ac-border);
    margin-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ac-tabs-moderne::-webkit-scrollbar {
    display: none;
}

.ac-tab-btn {
    background: none;
    border: none;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ac-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ac-tab-btn:hover {
    color: var(--ac-primary);
}

.ac-tab-btn.active {
    color: var(--ac-primary);
    border-bottom-color: var(--ac-primary);
}

.ac-tab-pannello {
    display: none;
}

.ac-tab-pannello.active {
    display: block;
}

.ac-tab-hint {
    font-size: 12px;
    color: var(--ac-muted);
    margin: 0 0 12px 0;
}

/* Lista strutture con checkbox (scheda Associazione, Crea Dipendente): le
   label usano la classe .ac-filtro-checkbox, stesso stile compatto della
   tendina filtro, come richiesto. */
.ac-checkbox-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    margin-bottom: 20px; /* Margine verso i pulsanti footer del popup */
}

/* "Seleziona tutto" e il separatore occupano l'intera riga, per forzare
   le chip delle strutture ad andare a capo sotto di loro */
.ac-checkbox-lista .ac-filtro-seleziona-tutto-riga,
.ac-checkbox-lista .ac-filtro-separatore {
    flex-basis: 100%;
    width: 100%;
}

.ac-checkbox-lista .ac-filtro-separatore {
    margin-bottom: 4px;
}

/* Le strutture diventano "chip" compatte, una dopo l'altra e a capo in base
   allo spazio disponibile, invece di un elenco verticale con scroll */
.ac-checkbox-lista .dip-struttura-checkbox,
.ac-checkbox-lista input[name="strutture_id[]"] {
    margin: 0;
}

.ac-checkbox-lista label.ac-filtro-checkbox:not(.ac-filtro-seleziona-tutto-riga) {
    flex: 0 0 auto;
    background: #f7f6f3;
    border: 1px solid #e6e3dd;
    border-radius: 20px;
    padding: 6px 14px;
    margin-bottom: 0;
    font-size: 12.5px;
    transition: all 0.2s ease;
}

.ac-checkbox-lista label.ac-filtro-checkbox:hover {
    border-color: var(--ac-primary-border);
}

/* Riga "Seleziona tutto" (filtro e liste strutture) + separatore leggero */
.ac-filtro-seleziona-tutto-riga {
    margin-bottom: 8px !important;
}

.ac-filtro-separatore {
    border: none;
    border-top: 1px solid var(--ac-border);
    margin: 0 0 12px 0;
}

/* Scheda "Turni" nel popup Azioni dipendente */
.ac-dip-turni-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-dip-turno-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}

.ac-dip-turno-giorno {
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-ink);
    flex-shrink: 0;
}

.ac-dip-turno-riga .ac-dip-turno-select {
    flex: 1;
    max-width: 200px;
}

/* ============================================================
   PAGINA DIPENDENTI - griglia di card, stesso linguaggio visivo di Manutenzioni
   ============================================================ */
.ac-dipendenti-conteggio {
    color: var(--ac-muted);
    font-weight: 600;
    font-size: 0.75em;
}

.ac-dipendenti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.ac-dipendente-card {
    background: #ffffff;
    border: 1px solid var(--ac-border);
    border-left: 4px solid #a0aec0; /* Colore di default, sovrascritto sotto */
    border-radius: var(--ac-radius-md);
    padding: 16px;
    box-shadow: var(--ac-shadow-soft);
}

.ac-dipendente-indeterminato {
    border-left-color: #805ad5; /* Viola */
}

.ac-dipendente-determinato {
    border-left-color: #ecc94b; /* Giallo */
}

.ac-dipendente-scaduto {
    border-left-color: #c53030; /* Rosso */
}

.ac-dipendente-prossimo-inizio {
    border-left-color: #2f855a; /* Verde */
}

.ac-dipendente-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.ac-dipendente-card-header strong {
    font-size: 17px;
    font-weight: 700;
    color: var(--ac-ink);
}

.ac-dipendente-badge-scaduto {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ac-danger-soft);
    color: var(--ac-danger);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.ac-dipendente-badge-prossimo {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ac-success-soft);
    color: var(--ac-success);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.ac-dipendente-card-info {
    margin-bottom: 14px;
}

.ac-dipendente-card-info p {
    margin: 0 0 10px 0;
    font-size: 14.5px;
    color: var(--ac-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ac-dipendente-card-info p:last-child {
    margin-bottom: 0;
}

.ac-dipendente-icona-muta {
    width: 17px;
    font-size: 16px;
    color: #cbd5e0; /* Icona neutra quando non c'è un recapito cliccabile */
}

/* Icone di azione rapida: WhatsApp e Mail, senza sfondo, solo icona colorata
   a sinistra del recapito. Tonalità più scura al passaggio del mouse. */
.ac-dipendente-icona-contatto {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ac-dipendente-icona-contatto svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.ac-icona-whatsapp {
    color: #25d366; /* Verde WhatsApp */
}

.ac-icona-whatsapp:hover {
    color: #1da851; /* Tonalità più scura */
}

.ac-icona-mail {
    color: var(--ac-primary); /* Blu, coerente col resto del plugin */
}

.ac-icona-mail:hover {
    color: #1a4971; /* Tonalità più scura */
}

.ac-dipendente-card-footer {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--ac-border);
}

.ac-dipendente-card-footer .action-btn,
.ac-dipendente-card-footer .action-icon {
    height: 40px;
    box-sizing: border-box;
}

.ac-dipendente-card-footer .import-btn {
    flex: 1;
    justify-content: center;
    text-decoration: none;
}

/* ============================================================
   MODULO TURNI - select moderne colorate + lista a card dipendente
   ============================================================ */


/* Select del turno: via l'aspetto di sistema, pillola colorata con freccia custom */
.ac-turno-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: auto;
    max-width: 100%;
    min-width: 120px;
    padding: 9px 26px 9px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0aec0' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
}

.ac-turno-select:hover {
    box-shadow: var(--ac-shadow-soft);
}

.ac-turno-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}

.ac-turno-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ac-turno-select.ac-turno-vuoto {
    background-color: #f7fafc;
    color: #a0aec0;
}

.ac-turno-select.ac-turno-lavoro {
    background-color: var(--ac-success-soft);
    color: var(--ac-success);
}

.ac-turno-select.ac-turno-ferie {
    background-color: #f3e8ff;
    color: #6b46c1;
}

.ac-turno-select.ac-turno-riposo {
    background-color: var(--ac-warning-soft);
    color: var(--ac-warning);
}

/* Lista a card per la vista di sola lettura del dipendente (invece della
   tabella a 2 colonne, il cui testo usciva dalla cella) */
.ac-turni-dipendente-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ac-turni-giorno-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-md);
    box-shadow: var(--ac-shadow-soft);
    flex-wrap: wrap;
}

.ac-turni-giorno-card.oggi {
    border-left: 4px solid var(--ac-primary);
    background: var(--ac-primary-soft);
}

.ac-turni-giorno-info {
    display: flex;
    flex-direction: column;
}

.ac-turni-giorno-nome {
    font-weight: 700;
    font-size: 15px;
    color: var(--ac-ink);
}

.ac-turni-giorno-data {
    font-size: 12px;
    color: var(--ac-muted);
}

@media (max-width: 768px) {
    /* Tabella Turni: i nomi dei dipendenti sulla colonna fissa occupavano
       troppo spazio su mobile. Qui, e solo qui, riduciamo il font e permettiamo
       l'a capo invece del nowrap generico ereditato dalla colonna sticky. */
    #tabella-turni-editor td:first-child,
    #tabella-turni-editor th:first-child {
        white-space: normal;
        min-width: 70px;
        max-width: 90px;
    }

    #tabella-turni-editor td:first-child strong {
        font-size: 11.5px;
        line-height: 1.25;
        font-weight: 700;
    }

    #tabella-turni-editor th:first-child {
        font-size: 10.5px;
    }
}

/* ============================================================
   MODULO TURNI - editor mobile (tab per giorno, niente scroll orizzontale)
   ============================================================ */
.ac-turni-mobile-editor {
    width: 100%;
}

.ac-turni-giorno-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE legacy */
}

.ac-turni-giorno-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge Chromium */
}

.ac-turni-giorno-radio {
    /* Nascosto ma resta accessibile via tastiera/tap sulla label collegata */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ac-turni-giorno-tab-label {
    display: inline-flex;
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 50px;
    background: #f7f6f3;
    border: 1px solid #e6e3dd;
    color: var(--ac-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ac-turni-giorno-radio:checked + .ac-turni-giorno-tab-label {
    background: var(--ac-primary);
    border-color: var(--ac-primary);
    color: #ffffff;
}

/* Pannelli: nascosti di default, il JS mostra quello del giorno selezionato
   aggiungendo/togliendo la classe .active (radio e pannelli ora sono in due
   contenitori diversi, quindi il trucco CSS puro ~ non è più applicabile). */
.ac-turni-giorno-pannello {
    display: none;
    width: 100%;
}

.ac-turni-giorno-pannello.active {
    display: block;
}

.ac-turni-mobile-riga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ac-border);
}

.ac-turni-mobile-riga:last-child {
    border-bottom: none;
}

.ac-turni-mobile-nome {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ac-ink);
    flex: 0 0 38%;
    line-height: 1.3;
}

.ac-turni-mobile-riga .ac-turno-select {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: 60%;
}

/* Widget "a orario" (mansione Manutenzione): un'unica "pillola" coesa che
   contiene select + orari, colorata secondo lo stato — compatta e in riga,
   stessa altezza delle altre celle della tabella */
.ac-turno-orario-widget {
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px;
    background: #f7fafc;
    color: #a0aec0;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ac-turno-orario-widget.ac-turno-lavoro {
    background: var(--ac-success-soft);
    color: var(--ac-success);
}

.ac-turno-orario-widget.ac-turno-ferie {
    background: #f3e8ff;
    color: #6b46c1;
}

.ac-turno-orario-widget.ac-turno-riposo {
    background: var(--ac-warning-soft);
    color: var(--ac-warning);
}

.ac-turno-orario-widget .ac-turno-orario-tipo {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 9px 8px 9px 14px !important;
    font-weight: 700 !important;
    min-width: 0 !important;
    flex-shrink: 0;
}

.ac-turno-orario-campi {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 14px 0 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.ac-turno-ora-input {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 12.5px;
    font-weight: 700;
    width: 92px;
    min-width: 92px;
    font-family: inherit;
}

.ac-turno-ora-input::-webkit-calendar-picker-indicator {
    padding: 0;
    margin-left: 2px;
    opacity: 0.7;
}

.ac-turno-orario-separatore {
    opacity: 0.5;
    font-size: 11px;
    padding: 0 1px;
}

/* Su mobile il widget resta orizzontale (è già compatto), ma occupa tutta
   la larghezza disponibile della riga */
.ac-turni-mobile-riga-orario .ac-turno-orario-widget {
    width: 100%;
    justify-content: space-between;
}

.ac-turni-mobile-riga-orario .ac-turno-select {
    max-width: 100%;
}

/* ============================================================
   COPIA / INCOLLA SETTIMANALE + "APPLICA A TUTTA LA SETTIMANA"
   ============================================================ */

/* Colonna "Dipendente": nome + i due pulsanti Copia/Incolla sotto */
.ac-turni-dipendente-cella {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.ac-turni-copia-incolla {
    display: flex;
    gap: 6px;
}

.ac-turni-copia-btn,
.ac-turni-incolla-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--ac-border);
    background: #f8fafc;
    color: var(--ac-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ac-turni-copia-btn svg,
.ac-turni-incolla-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.ac-turni-copia-btn:hover,
.ac-turni-incolla-btn:hover {
    background: var(--ac-primary);
    border-color: var(--ac-primary);
    color: #ffffff;
}

.ac-turni-incolla-btn.ac-turni-incolla-disabilitato {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Wrapper di ogni cella-giorno: isola lo spazio per il pulsante "applica a
   tutta la settimana", che compare solo al passaggio del mouse (o sempre su
   mobile, dove non esiste l'hover) */
.ac-turno-cella-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ac-turno-applica-settimana {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #eef2f7;
    color: var(--ac-primary);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Su desktop compare solo al passaggio del mouse sulla cella (comportamento
   discreto, non affolla la tabella quando non serve) */
.ac-desktop-only .ac-turno-cella-wrapper:hover .ac-turno-applica-settimana {
    opacity: 1;
    transform: scale(1);
}

.ac-turno-applica-settimana:hover {
    background: var(--ac-primary);
    color: #ffffff;
}

/* Su mobile non esiste l'hover: il pulsante resta sempre visibile ma discreto */
.ac-mobile-only .ac-turno-applica-settimana {
    opacity: 0.6;
    transform: scale(1);
}

.ac-mobile-only .ac-turno-applica-settimana:hover,
.ac-mobile-only .ac-turno-applica-settimana:active {
    opacity: 1;
}

/* Layout mobile ristrutturato: nome+Copia/Incolla sopra, widget+applica sotto */
.ac-turni-mobile-riga-full {
    padding: 12px 0;
    border-bottom: 1px solid var(--ac-border);
}

.ac-turni-mobile-riga-full:last-child {
    border-bottom: none;
}

.ac-turni-mobile-header-riga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ac-turni-mobile-riga-full .ac-turno-cella-wrapper {
    width: 100%;
    justify-content: space-between;
}

.ac-turni-mobile-riga-full .ac-turno-orario-widget,
.ac-turni-mobile-riga-full .ac-turno-select {
    flex: 1;
    min-width: 0;
    max-width: none;
}

/* ============================================================
   TOAST DI CONFERMA (copia/incolla/applica settimana)
   ============================================================ */
.ac-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a202c;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    opacity: 0;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ac-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ac-toast.ac-toast-errore {
    background: #c53030;
}

/* Su mobile i messaggi più lunghi (es. copia/incolla turni) uscivano dai
   bordi dello schermo perché il toast non andava mai a capo: ora ha una
   larghezza vincolata ai bordi e il testo si dispone su più righe se serve */
@media (max-width: 480px) {
    .ac-toast {
        left: 16px;
        right: 16px;
        bottom: 20px;
        transform: translateY(20px);
        width: auto;
        white-space: normal;
        border-radius: 16px;
        align-items: flex-start;
        text-align: left;
    }

    .ac-toast.visible {
        transform: translateY(0);
    }
}


.ac-filter-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE legacy */
}

.ac-filter-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge Chromium */
}

.ac-filter-tab {
    padding: 7px 16px;
    border-radius: 50px;
    background: #f7f6f3;
    flex-shrink: 0; /* Mantiene la larghezza originale, non si stringe mai */
    white-space: nowrap;
    border: 1px solid #e6e3dd;
    color: var(--ac-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ac-filter-tab:hover:not(.ac-filter-tab-locked):not(.ac-ordinamento-trigger):not(.active) {
    border-color: var(--ac-primary-border);
    color: var(--ac-primary);
}

.ac-filter-tab.active {
    background: var(--ac-primary);
    border-color: var(--ac-primary);
    color: #ffffff;
    font-weight: 400;
}

.ac-filter-tab.active:hover {
    color: #ffffff !important;
    border-color: var(--ac-primary) !important;
}

/* Tab "bloccata" (Ultime 24h, dashboard Manutentori): stesso aspetto della
   tab attiva ma non cliccabile, sempre selezionata. Niente hover diverso e
   niente interazione: resta bianca e non succede nulla al passaggio del mouse */
.ac-filter-tab-locked {
    background: var(--ac-primary);
    border-color: var(--ac-primary);
    color: #ffffff;
    cursor: default;
    flex-shrink: 0;
    pointer-events: none;
}

/* Widget "Ordinamento"/"Visualizza"/"Mostra": pulsante + tendina a comparsa,
   stesso colore del pulsante (blu) come richiesto. position:fixed calcolato
   via JS (non un semplice :hover in CSS): altrimenti la tendina finiva
   "sotto" la tabella, tagliata dall'overflow degli scroll-box, esattamente
   come già successo col popover delle foto.
   display:contents: il wrapper "sparisce" dal layout (serve solo per il
   raggruppamento DOM usato da .siblings() in JS), eliminando qualsiasi
   disallineamento verticale rispetto alle tab sorelle nella stessa riga. */
.ac-ordinamento-widget {
    display: contents;
}

.ac-ordinamento-trigger {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ac-ordinamento-trigger:hover {
    color: #ffffff !important;
    border-color: var(--ac-primary) !important;
}

.ac-ordinamento-dropdown {
    display: none;
    position: fixed;
    background: var(--ac-primary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 8px;
    z-index: 1000000;
    min-width: 150px;
}

.ac-ordinamento-dropdown.visible {
    display: block;
}

.ac-ordinamento-dropdown a,
.ac-ordinamento-dropdown button.ac-filtro-opzione,
.ac-ordinamento-dropdown label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.ac-ordinamento-dropdown a:hover,
.ac-ordinamento-dropdown button.ac-filtro-opzione:hover,
.ac-ordinamento-dropdown label:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.ac-ordinamento-dropdown a.attivo,
.ac-ordinamento-dropdown button.ac-filtro-opzione.attivo {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.ac-ordinamento-dropdown hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 6px 4px;
}

.ac-ordinamento-dropdown input[type="checkbox"] {
    accent-color: #ffffff;
}

.ac-btn-visualizza-tutto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--ac-primary-soft);
    border: 1px solid var(--ac-primary-border);
    border-radius: 50px;
    color: var(--ac-primary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ac-btn-visualizza-tutto:hover {
    background: #ddebf7;
    color: var(--ac-primary);
}

/* Contenitore con altezza ridotta e scroll verticale (dashboard: Manutenzioni e Housekeeping) */
.ac-scroll-box {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Su mobile le card devono estendersi naturalmente ed essere scrollate dalla
   pagina intera, non schiacciate in un riquadro con scroll interno: altrimenti
   restava un contenitore troppo piccolo con un vuoto enorme sotto */
@media (max-width: 768px) {
    #manutenzioni-mobile-container-pagina.ac-scroll-box {
        max-height: none;
        overflow-y: visible;
        -webkit-overflow-scrolling: auto;
    }
}

.ac-scroll-box table.ac-manager-table thead th {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 3;
}

/* La cella d'angolo (sticky sia in alto CHE a sinistra, es. "Data e ora") deve
   stare sopra a TUTTO: senza questa regola più specifica, ereditava lo stesso
   z-index:3 della riga sopra e le intestazioni successive (Camera, Stato...)
   le passavano sopra durante lo scroll orizzontale (bug tabella Housekeeping). */
.ac-scroll-box table.ac-manager-table thead th:first-child {
    z-index: 6;
}

/* MODAL POP-UP */

/* Sfondo scuro della modale (Overlay) */
.ac-modal-overlay {
    display: none; /* Diventa 'flex' via JS */
    position: fixed !important;
    z-index: 999999 !important;
    
    /* Forza le coordinate sull'intero schermo */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* 100% della larghezza della finestra browser */
    height: 100vh !important; /* 100% dell'altezza della finestra browser */
    
    /* Reset totale di eventuali margini del tema */
    transform: none !important; 
    margin: 0 !important;
    padding: 0 !important;
    
    background-color: rgba(0, 0, 0, 0.7) !important;
    
    /* Centramento perfetto del contenuto bianco */
    align-items: center;
    justify-content: center;
}

.ac-modal-header {
    display: flex;
    justify-content: space-between; /* Spinge i due elementi ai lati opposti */
    align-items: center;           /* Li allinea perfettamente sulla linea mediana orizzontale */
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* Contenitore bianco della modale (Content) */
.ac-modal-content {
    background: #ffffff;
    padding: 30px;
    width: 90%;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
}

/* Container della Modale */
.ac-modal-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    max-width: 500px;
    width: 95%;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Header della Modale */
.ac-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.ac-modal-header h3 {
    font-size: 1.4rem;
    color: #1a1a1a;
    font-weight: 700;
    margin: 0;
}

.ac-modal-header h3 span {
    color: #3498db; /* Colore d'accento per il nome vasca */
}

/* Stile delle Label */
.ac-modal-content label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stile degli Input e Textarea */
.ac-modal-content input[type="text"],
.ac-modal-content input[type="number"],
.ac-modal-content input[type="email"],
.ac-modal-content input[type="password"],
.ac-modal-content input[type="tel"],
.ac-modal-content input[type="date"],
.ac-modal-content select,
.ac-modal-content textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #edf2f7;
    border-radius: 10px;
    background-color: #f8fafc;
    color: #2d3748;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Importante per il padding */
}

.ac-modal-content input:focus,
.ac-modal-content textarea:focus {
    outline: none;
    border-color: #3498db;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

.ac-modal-content input:hover,
.ac-modal-content textarea:hover {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(52, 152, 219, 0.1);
}

/* Placeholder */
.ac-modal-content ::placeholder {
    color: #a0aec0;
    font-size: 0.9rem;
}

/* Griglia dei campi */
.ac-modal-content div[style*="grid"] {
    gap: 20px !important; /* Aumentiamo un po' lo spazio */
}

/* Textarea specifica */
.ac-modal-content textarea {
    resize: none;
    min-height: 80px;
}

/* Rende l'icona del calendario più pulita (Chrome/Edge/Safari) */
.ac-modal-content input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.4); /* Rende l'icona grigia scura per abbinarsi al testo */
    padding: 2px;
}

/* La classe specifica del pulsante chiudi */
.close-modal {
    background: #e53e3e;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(229, 62, 62, 0.4);
    font-size: 18px;
}

.close-modal:hover {
    background: #c53030;
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.6);
}

/* ============================================================
   ICONE USATE NELLE PAGINE
   ============================================================ */

.ac-icon-page {
    width: 50px;
    height: 50px;
    fill: #2b6cb0;
    vertical-align: middle;
    margin-right: 10px;
    display: inline-block;
}

.ac-icon-hotel {
    width: 18px;
    height: 18px;
    fill: #a0aec0;
    vertical-align: middle;
    display: inline-block;
}

.ac-icon-accordion {
    width: 18px;
    height: 18px;
    fill: #262728;
    vertical-align: middle;
    display: inline-block;
}

.ac-icon-btn {
    width: 22px;
    height: 22px;
    fill: currentColor;
    vertical-align: middle;
    display: inline-block;
}



/* ============================================================
   CONTAINER PRINCIPALE DEI MODULI
   ============================================================ */

.ac-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    max-width: 1180px;
    margin: 20px auto;
    background: #ffffff;
    padding: 25px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-soft);
    box-sizing: border-box;
}

/* Su mobile il contenitore principale non è più una "card" flottante,
   ma occupa tutta la larghezza e almeno tutta l'altezza dello schermo,
   sfondo bianco a tutto campo (niente più margine/ombra/angoli arrotondati) */
@media (max-width: 768px) {
    .ac-container {
        width: 100%;
        min-height: 100vh;
        max-width: 100%;
        margin: 0; /* Nessun margine con l'header sopra */
        padding: 20px 16px 16px; /* 20px solo in alto, come richiesto */
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
    }
}

@media (max-width: 480px) {
    .ac-container {
        padding: 20px 12px 12px;
    }
}

.ac-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.ac-title-section h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ac-subtitle {
    margin: 5px 0 0 0;
    color: #718096;
    font-size: 14px;
}

/* Actions e Selettore Struttura */
.ac-actions-section {
    display: flex;
    gap: 15px;
    align-items: center;
}

.ac-structure-pill {
    background: #f7f6f3; /* Bianco sporco, niente più azzurrino */
    border: 1px solid #e6e3dd;
    padding: 6px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

/* Full width SOLO da mobile, come richiesto (su desktop resta a grandezza naturale) */
@media (max-width: 768px) {
    .ac-actions-section {
        width: 100%;
        flex-direction: column;
    }
    .ac-structure-pill {
        width: 100%;
        box-sizing: border-box;
        order: 1;
    }
    .ac-structure-pill select {
        flex: 1;
        width: 100%;
    }
    /* Il pulsante Check-Mode va SOTTO la pill struttura, a piena larghezza */
    .ac-check-mode-toggle {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-top: 0;
    }
}

.ac-structure-pill:hover {
    box-shadow: var(--ac-shadow-soft);
}


.ac-structure-pill select {
    border: none !important;
    background: transparent !important;
    padding: 5px 25px 5px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ac-primary) !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}



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


.accordion-header {
    background: #ffffff;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-md);
    margin-bottom: 12px;
    transition: all 0.2s ease;
    box-shadow: var(--ac-shadow-soft);
}

.accordion-header:hover {
    border-color: var(--ac-primary-border);
    transform: translateY(-1px);
}

.accordion-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ac-ink);
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Icona della vasca/camera dentro un badge circolare colorato: il segno distintivo dell'header */
.accordion-header h2 .ac-icon-accordion {
    background: var(--ac-primary-soft);
    fill: var(--ac-primary);
    padding: 9px;
    border-radius: 50%;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
}

.accordion-header .icon {
    color: #3182ce;
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* Quando l'accordion è aperto (classe 'active' aggiunta via JS) */
.accordion-header.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    margin-bottom: 0px;
}

.accordion-header.active .icon {
    transform: rotate(180deg);
}

/* Contenitore delle azioni (Bottone + Icona) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;                     /* Spazio tra il tasto Nuova e la freccia */
    flex-shrink: 0;                /* IMPEDISCE a questo blocco di rimpicciolirsi o andare a capo */
    white-space: nowrap;           /* Rinforza l'obbligo di stare su una riga */
}

/* L'icona della freccia */
.accordion-header .icon {
    display: inline-block;
    min-width: 20px;               /* Riserva uno spazio fisso per l'icona */
    text-align: center;
    flex-shrink: 0;
}

/* Contenuto Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden; /* PRIMA: overflow-y:hidden + overflow-x:auto sullo stesso elemento
                          causava un conflitto di rendering su mobile (soprattutto iOS/Safari):
                          il contenitore chiuso lasciava intravedere un pezzetto del bottone
                          sottostante. Lo scroll orizzontale della tabella ora è gestito solo
                          da .ac-table-responsive-wrapper qui sotto. */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0 15px; /* Inizialmente 0 */
}

.accordion-content.active {
    max-height: 5000px; /* Valore grande per mostrare il contenuto */
    padding: 0px;
    margin-bottom: 25px;
    border-top: none;
}

/* Griglia dei pulsanti azione dentro ogni accordion (Nuova Rilevazione / Nuova Azione / Storico) */
.ac-accordion-actions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrati come gruppo */
    align-items: center;
    gap: 14px; /* Respiro giusto tra un pulsante e l'altro, senza esagerare */
    padding: 18px 0;
}

.ac-accordion-actions-grid .action-btn {
    flex: 0 1 auto; /* Larghezza naturale del contenuto, non stiracchiati a riempire */
    border-radius: 10px;
}

.ac-accordion-actions-grid .action-btn:hover {
    transform: translateY(-2px); /* Piccolo sollevamento moderno all'hover */
}

/* Bottone centrale "Nuova Azione": prima NON aveva nessuno stile associato
   (esisteva solo .action-icon.warning-action-btn, per l'icona piccola in tabella)
   quindi risultava completamente trasparente. */
.action-btn.warning-action-btn {
    background: var(--ac-warning-soft);
    border: 1px solid var(--ac-warning-border);
    color: var(--ac-warning) !important;
    box-shadow: none;
}

.action-btn.warning-action-btn:hover {
    background: #fbe8b8;
    box-shadow: var(--ac-shadow-soft);
}

@media (max-width: 600px) {
    .ac-accordion-actions-grid {
        flex-direction: column;
    }
    .ac-accordion-actions-grid .action-btn {
        width: 100%;
    }
}

/* Wrapper dedicato allo scroll orizzontale della tabella (larga min. 800px) */
.ac-table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll fluido su iOS */
    will-change: scroll-position; /* aiuta il browser a preparare un layer dedicato, riduce i micro-scatti */
}



/* ============================================================
   BARRA DI RICERCA
   ============================================================ */

.ac-search-container {
    margin: 15px 0 25px 0;
    max-width: 500px; /* Impedisce alla barra di allungarsi troppo */
    width: 100%;
}

.ac-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 15px; /* Padding laterale fisso */
    height: 45px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.ac-search-wrapper:hover {
    border-color: var(--ac-primary-border);
    box-shadow: var(--ac-shadow-soft);
}

.ac-search-wrapper:focus-within {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.12);
}

.search-icon,
.ac-search-wrapper svg {
    color: #94a3b8;
    fill: #94a3b8;
    margin-right: 12px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.ac-search-wrapper input[type="text"],
.ac-search-wrapper input[type="search"] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 15px;
    color: #333;
    background: transparent;
}

#ac-search-clear {
    cursor: pointer;
    color: #9e9e9e;
    padding: 5px;
}

#ac-search-clear:hover {
    color: #333;
}


/* ============================================================
   STILE PER LE TABELLE
   ============================================================ */

.ac-manager-table {
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
}

@media (hover: hover) {
    .ac-manager-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .ac-manager-table tbody tr:hover {
        background-color: #fafbfc;
    }

    .ac-manager-table tbody tr:hover td:first-child {
        background-color: #fafbfc !important;
    }
}

.ac-manager-table th, 
.ac-manager-table td {
    white-space: nowrap !important; /* Impedisce l'invio a capo ovunque */
    padding: 12px 15px;
    vertical-align: middle;
}

.ac-manager-table td:first-child {
    background: #ffffff !important;
}

.ac-manager-table th:first-child,
.ac-manager-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #ffffff;
    background-clip: padding-box;
    min-width: 100px; /* pavimento minimo, ma cresce liberamente in base al contenuto (nomi lunghi, date...) */
    white-space: nowrap;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12); /* separatore visivo, tipico delle colonne "congelate" */
    will-change: transform;
}

/* L'header "CAMERA" eredita background:transparent dalla regola generale .ac-manager-table thead th,
   ma essendo sticky deve avere uno sfondo opaco, altrimenti durante lo scroll orizzontale
   le scritte delle altre colonne si vedono sovrapposte dietro di lui. */
.ac-manager-table thead th:first-child {
    background: #ffffff;
}

/* Limite massimo SOLO per le tabelle il cui primo campo è una data/ora
   (2 righe corte: "15:32" / "09/07/2026"): senza un tetto, la colonna
   cresceva a dismisura. Scoperto per ID per non toccare Turni, che ha
   bisogno di spazio libero per i nomi lunghi dei dipendenti. */
#tabella-manutenzioni-dashboard th:first-child,
#tabella-manutenzioni-dashboard td:first-child,
#tabella-manutenzioni-pagina th:first-child,
#tabella-manutenzioni-pagina td:first-child,
#tabella-housekeeping-dashboard th:first-child,
#tabella-housekeeping-dashboard td:first-child,
#ac-targhe-table th:first-child,
#ac-targhe-table td:first-child {
    max-width: 110px;
    width: 110px;
}

.ac-manager-table thead th {
    background: transparent;
    color: var(--ac-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 12px 15px;
    border-bottom: 2px solid var(--ac-border);
    text-align: left;
}

.ac-manager-table tbody td {
    padding: 15px;
    border-bottom: 1px solid var(--ac-border);
    vertical-align: middle;
    color: #4a5568;
    font-size: 14px;
}

/* Numero Camera */
.ac-manager-table tbody td strong {
    background: transparent;
    color: #2d3748;
    font-size: 16px;
    font-weight: 800;
    padding-left: 12px;
    border-left: 3px solid var(--ac-primary);
    display: inline-block;
    line-height: 1;
    font-family: inherit; /* Rimuove il monospace */
}

/* Valori fuori/dentro range: un puntino di stato invece del testo colorato pieno */
table.ac-manager-table td.table-valore-errato,
table.ac-manager-table td.table-valore-corretto {
    padding: 15px;
    border-bottom: 1px solid var(--ac-border);
    vertical-align: middle;
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-ink);
}

table.ac-manager-table td.table-valore-errato::before,
table.ac-manager-table td.table-valore-corretto::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

table.ac-manager-table td.table-valore-errato::before {
    background: var(--ac-danger);
}

table.ac-manager-table td.table-valore-corretto::before {
    background: var(--ac-success);
}

/* Container Tabella come card */
.ac-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #edf2f7;
}

/* ============================================================
   BOTTONI AZIONI (USATI AD ES. PER STATUS PRONTA - IN PULIZIA IN MODULO HOUSEKEEPING)
   ============================================================ */

.action-icon {
    width: 35px;
    height: 35px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #4a5568 !important;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

.action-icon:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Pulsante "Manutenzione" nella colonna Azioni: hover scuro con icona bianca */
.action-icon.action-maintenance:hover:not(:disabled) {
    background: #2d3748 !important;
    border-color: #2d3748 !important;
    color: #ffffff !important;
}

/* ROSSO = Ultima rilevazione con errori (da correggere) */
.action-icon.danger-action-btn {
    background: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
}

.action-icon.danger-action-btn:hover:not(:disabled) {
    background: #dc2626 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* GIALLO = Azione correttiva già registrata (rimane cliccabile) */
.action-icon.warning-action-btn {
    background: #eab308 !important;
    color: #1f2937 !important;
    border-color: #eab308 !important;
}

.action-icon.warning-action-btn:hover:not(:disabled) {
    background: #ca8a04 !important;
    box-shadow: 0 6px 16px rgba(234, 179, 8, 0.35);
}

/* STATO DISABILITATO - mantiene il colore */
.action-icon:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.action-icon.danger-action-btn:disabled {
    background: #f87171 !important;
    border-color: #f87171 !important;
}

.action-icon.warning-action-btn:disabled {
    background: #fcd34d !important;
    border-color: #fcd34d !important;
}


/* ============================================================
   STILE PER I BOTTONI
   ============================================================ */

/* Stile per il contenitore del pulsante */
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: relative;
  z-index: 10;
}

/* Container principale dei pulsanti */
.actions-grid {
    display: flex;
    flex-direction: row;      /* Forza l'allineamento sulla stessa riga */
    flex-wrap: nowrap;        /* Impedisce di andare a capo (rimangono affiancati) */
    gap: 10px;                /* Spazio tra i bottoni */
    justify-content: space-between; /* Distribuisce lo spazio uniformemente */
    align-items: stretch;     /* Li rende tutti alti uguali */
    margin-top: 25px;
    padding: 15px;
    width: 100%;              /* Occupa tutta la larghezza disponibile */
    box-sizing: border-box;
}

/* Regola universale per tutti i 4 pulsanti */
.actions-grid .action-btn {
    flex: 1;                  /* Forza ogni bottone a occupare la stessa porzione di spazio */
    min-width: 0;             /* Permette al flex di rimpicciolirli se necessario */
    padding: 12px 10px;       /* Padding interno ridotto per evitare che escano fuori */
    white-space: nowrap;      /* Evita che il testo vada su due righe */
    font-size: 13px;          /* Dimensione font leggermente ridotta per farli stare tutti */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Rimuovi eventuali margini che spingono i pulsanti */
.primary-action-btn {
    margin-top: 0 !important; 
    margin-left: 0 !important;
}

/* Responsive: Solo su mobile li mettiamo in colonna */
@media (max-width: 768px) {
    .actions-grid {
        flex-wrap: wrap;      /* Qui possono andare a capo */
    }
    .actions-grid .action-btn {
        flex: 1 1 45%;        /* Due per riga su tablet */
    }
}

@media (max-width: 480px) {
    .actions-grid .action-btn {
        flex: 1 1 100%;       /* Uno per riga su cellulare */
    }
}

/* Adattamento Mobile (Se si vuole una singola colonna su schermi molto stretti) */
@media screen and (max-width: 500px) {
    .action-btn:nth-child(1),
    .action-btn:nth-child(2),
    .action-btn:nth-child(3) {
        width: 100%;
    }
}

.action-btn {
    /* Stack di font moderni: San Francisco (Apple), Segoe UI (Windows), Roboto (Android) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    
    /* Grandezza e stile */
    font-size: 13px !important;       /* Leggermente più piccolo per essere più elegante */
    font-weight: 700 !important;      /* Bello grassetto per la leggibilità */
    text-transform: uppercase !important; /* Tutto maiuscolo per un look professionale */
    letter-spacing: 0.8px !important;  /* Un po' di spazio tra le lettere per il respiro */
    
    /* Correzione allineamento testo */
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Altri dettagli per la pulizia */
    text-shadow: none !important;     /* Rimuove ombre del testo che sporcano il font */
    -webkit-font-smoothing: antialiased; /* Rende il font più nitido su Mac/iOS */
    /* Stile di base per tutti i pulsanti */
    padding: 15px 10px; 
    font-size: 1em;
    font-weight: 600;
    color: white; /* Testo bianco */
    border: none;
    border-radius: 8px; /* Bordi arrotondati moderni */
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* ICONA: Spazio tra icona e testo */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ombra ed Effetto 3D Elegante per tutti i pulsanti */
.action-btn {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    /* Effetto quando premuto */
    transform: translateY(0);
}

.action-btn:active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 12px; /* Angoli arrotondati moderni */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombra profonda */
    position: relative;
    overflow: hidden;
    outline: none;
}

.action-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Base comune per i pulsanti azione */
.maintenance-btn {
    background: linear-gradient(145deg, #444444 0%, #333333 100%); 
    border: 1px solid #555555;
}

.maintenance-btn:hover {
    background: linear-gradient(145deg, #555555 0%, #444444 100%);
}

.reset-btn {
    background: linear-gradient(145deg, #7c7c7c 0%, #606060 100%);
    border: 1px solid #888888;
    color: white !important; 
}

.reset-btn:hover {
    background: linear-gradient(145deg, #8a8a8a 0%, #707070 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.import-btn {
    background: var(--ac-primary-soft);
    border: 1px solid var(--ac-primary-border);
    color: var(--ac-primary) !important;
    box-shadow: none;
}

.import-btn:hover {
    background: #ddebf7;
    box-shadow: var(--ac-shadow-soft);
}

.primary-action-btn {
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-border);
    color: var(--ac-accent) !important;
    margin-top: 5px;
    box-shadow: none;
}

.primary-action-btn:hover {
    background: #f2e6c8;
    box-shadow: var(--ac-shadow-soft);
}

/* Layout della griglia dei bottoni */
.actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-end; /* Allinea a destra come Plate */
    margin-top: 25px;
    padding: 20px;
    
}

/* Regole per il layout mobile */
@media screen and (max-width: 768px) {
        /* Blocca lo scorrimento orizzontale sull'intera pagina mobile */
    body {
        overflow-x: hidden !important;
    }
    
    /* Manteniamo la tabella nella sua larghezza fissa (800px) ma la nascondiamo oltre lo schermo */
    .ac-manager-table {
        min-width: 800px;
        /* Rimuovi float e aggiusta i margini se necessario */
    }
    .div_tabella {
        max-height: 500px;
    }
    .button-container {
        width: 100%;
        text-align: center;
    }
    #mainActionButton {
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
    }
}

/* === OTTIMIZZAZIONE FULL WIDTH PER DISPOSITIVI MOBILI === */

@media (max-width: 600px) {
    #ac-manager-frontend-app {
        width: 100%; /* Rimuove il limite di 1400px */
        max-width: 100%;
        box-sizing: border-box; /* Evita overflow orizzontale con il padding qui sotto */
        margin: 10px auto; /* Un minimo di margine verticale, niente margine negativo */
        padding: 16px; /* Margine laterale minimo garantito (prima era 5px, troppo stretto) */
        border-radius: 8px; /* Manteniamo angoli leggermente smussati anche su mobile */
    }
    
    /* Riduce leggermente il padding dell'accordion per schermi molto piccoli */
    .accordion-content {
        padding: 8px; 
    }
}



/* ============================================================
   PERSONALIZZAZIONI PER MODULO HOUSEKEEPING
   ============================================================ */

#ac-manager-frontend-app {
    max-width: 1200px; /* Più centrato e leggibile */
    margin: 30px auto;
    padding: 10 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Trasformiamo l'intestazione in una sezione distinta */
#ac-manager-frontend-app h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #1a202c; /* Nero Slate molto moderno */
    margin: 0;
    text-transform: uppercase;
}

#ac-manager-frontend-app p {
    font-size: 15px;
    color: #718096; /* Grigio acciaio */
    margin-top: 4px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Enfatizza il nome della struttura con una "Pill" */
#ac-manager-frontend-app p strong {
    background: #ebf8ff; /* Blu chiarissimo */
    color: #3182ce;    /* Blu Plate */
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #bee3f8;
}

/* OPZIONALE: Aggiunge una linea di separazione morbida sotto l'header */
#ac-manager-frontend-app h1::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: #3182ce;
    margin-top: 8px;
    border-radius: 10px;
}

/* Select Ripreparazione */
.ripreparazione-status {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f7fafc;
    font-size: 13px;
    color: #2d3748;
    cursor: pointer;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pronta { background: #c6f6d5; color: #22543d; }
.status-in-pulizia { background: #feebc8; color: #744210; }
.status-non-pronta { background: #fed7d7; color: #822727; }
.status-non-disturbare { background: #e9d8fd; color: #44337a; }
.status-manutenzione { background: #edf2f7; color: #4a5568; }
.status-attesa-manutenzione { background: #feebc8; color: #744210; }
.status-presa-in-carico { background: #fefcbf; color: #744210; border: 1px solid #ecc94b; }
.status-risolta { background: #c6f6d5; color: #22543d; }

/* Bottoni Colorati Specifici */
.action-start-cleaning:hover:not(:disabled) {
    background: #c19f5e !important;
    color: #ffffff !important;
}

.action-finish-cleaning:hover:not(:disabled) {
    background: #38a169 !important; /* Verde */
    color: #ffffff !important;
}

.action-not-disturb:hover:not(:disabled) {
    background: #805ad5 !important; /* Viola */
    color: #ffffff !important;
}

.action-manutenzione:hover:not(:disabled) {
    background: #e53e3e !important; /* Rosso */
    color: #ffffff !important;
}





/* ============================================================
   PERSONALIZZAZIONI PER MODULO TARGHE
   ============================================================ */

/* Header + ricerca in un unico contenitore flex, per poter controllare
   l'ordine di visualizzazione (specialmente su mobile) con "order" */
.ac-targhe-header-flex {
    flex-wrap: wrap;
}

.ac-targhe-header-flex .ac-title-section {
    order: 1;
    flex: 1 1 auto;
}

.ac-targhe-header-flex .ac-actions-section {
    order: 2;
}

.ac-targhe-header-flex .ac-search-container {
    order: 3;
    flex-basis: 100%;
    margin: 15px 0 0 0;
    max-width: none;
}

.ac-targhe-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 600px) {
    .ac-targhe-header-flex .ac-actions-section {
        order: 3; /* Scende sotto la ricerca */
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    .ac-targhe-header-flex .ac-search-container {
        order: 2; /* Ricerca subito dopo il titolo, prima dei pulsanti */
        width: 100%;
    }

    /* Riga pulsanti: "Nuova Targa" all'80%, il cestino piccolo accanto */
    .ac-targhe-header-actions {
        width: 100%;
    }
    .ac-targhe-header-actions #btn-open-modal {
        flex: 1 1 80%;
    }
    .ac-targhe-header-actions #btn-purge-db {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 0;
    }
}



/* ============================================================
   PERSONALIZZAZIONI PER MODULO PISCINE
   ============================================================ */


/* ============================================================
   HOUSEKEEPING - "CHECK-MODE" (verifica camere pronte da parte di
   Housekeeper Manager / Supervisore)
   ============================================================ */

.ac-check-mode-banner {
    background: var(--ac-success-soft);
    color: var(--ac-success);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin: 15px 0;
}

/* Il pulsante toggle, quando attivo, resta evidenziato (uguale su desktop e mobile) */
.ac-check-mode-toggle-attivo {
    background: var(--ac-primary) !important;
    color: #ffffff !important;
}

/* --- Sfondo scuro (non nero puro) dietro al contenuto, sia desktop che
   mobile. Su desktop è il contenitore .ac-container a restare bianco; su
   mobile (dove il contenitore è la pagina intera) è lui a scurirsi, ma
   l'accordion con la tabella resta bianco e con i colori invariati. --- */
body.ac-check-mode-attivo {
    background-color: #2d3748 !important;
    transition: background-color 0.3s ease;
}

#ac-manager-frontend-app.ac-check-mode-attivo {
    background: #ffffff;
}

@media (max-width: 768px) {
    #ac-manager-frontend-app.ac-check-mode-attivo {
        background: #2d3748 !important;
    }

    /* Titolo e sottotitolo, ora su sfondo scuro, restano leggibili */
    #ac-manager-frontend-app.ac-check-mode-attivo .ac-title-section h2,
    #ac-manager-frontend-app.ac-check-mode-attivo .ac-subtitle {
        color: #f7fafc !important;
    }

    /* L'accordion (intestazione + contenuto + tabella) resta bianco e con i
       colori normali, esattamente come nella vista non-check-mode */
    #ac-manager-frontend-app.ac-check-mode-attivo .accordion-header,
    #ac-manager-frontend-app.ac-check-mode-attivo .accordion-content.active {
        background: #ffffff !important;
    }
}

/* --- Spunta di verifica: sempre visibile (in entrambe le modalità) quando
   la camera è pronta, posizionata dentro la cella del numero camera --- */
.ac-check-mode-spunta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #eef2f7;
    color: #a0aec0;
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.ac-check-mode-spunta:hover:not(:disabled):not(.ac-spunta-fissa) {
    background: var(--ac-success-soft);
    color: var(--ac-success);
}

.ac-check-mode-spunta:disabled {
    background: var(--ac-success);
    color: #ffffff;
    cursor: default;
}

.ac-check-mode-spunta svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

/* Il numero camera ha già un bordo blu a sinistra (regola generale delle
   tabelle): quando la camera è verificata, diventa semplicemente verde,
   invece di aggiungere un elemento nuovo */
tr.ac-camera-verificata td strong {
    border-left-color: var(--ac-success) !important;
}

/* In Check-Mode nascondiamo i 3 pulsanti di stato, ma il pulsante
   "Manutenzione" (ora fuori da .ac-azioni-normali) resta sempre visibile */
/* Il div era block di default, mandando il pulsante "Manutenzione" (fratello
   successivo, fuori dal div) a capo su una riga propria. Con display:contents
   il div "sparisce" come contenitore: i suoi pulsanti diventano fratelli
   diretti della cella, che gestisce lei il gap in modo uniforme su tutti e 4. */
.ac-azioni-cella {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.ac-azioni-normali {
    display: contents;
}

.ac-check-mode-attivo .ac-azioni-normali {
    display: none;
}

.ac-camera-verificata-indicatore {
    font-size: 11px;
    font-weight: 700;
    color: var(--ac-success);
}

.ac-carica-altro-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/* Nome struttura, mostrato sotto camera/area in ogni card di manutenzione */
.ac-manutenzione-struttura-riga {
    font-size: 11.5px;
    font-weight: 300;
    color: var(--ac-muted);
    margin-top: 2px;
    margin-bottom: 16px;
}

/* Variante "fissa" del pallino di verifica: usata nella dashboard come puro
   indicatore (non un pulsante), quindi non può sfruttare :disabled per il
   colore verde (che funziona solo sugli elementi di form) */
.ac-spunta-fissa {
    background: var(--ac-success) !important;
    color: #ffffff !important;
    cursor: default;
}