/* Base Styles */
:root {
    --primary-color: #007bff; /* Blu per i bottoni e highlight */
    --text-color: #333;       /* Grigio scuro per il testo */
    --background-color: #f8f9fa; /* Bianco sporco / Grigio chiaro per lo sfondo */
    --white-color: #fff;      /* Bianco puro */
    --border-color: #dee2e6;  /* Colore per i bordi sottili */
    --sidebar-width-desktop: 250px; /* Larghezza fissa della sidebar su desktop */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Impedisce lo scroll globale */
}

/* Contenitore generale per centrare il contenuto */
.container {
    max-width: 1200px;
    margin: 0 auto; /* Questo centra il contenuto all'interno del suo genitore */
    padding: 20px;
}

/*
.container.content-area {
    margin-top: 100px;     
    margin-bottom: 50px;   
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 110px); 
}*/

.info-banner {
  background: #fff8e1;
  border-left: 4px solid #ffca28;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  border-radius: 6px;
  color: #333;
}

.figlio-row span[title] { margin-left: 6px; }

.testo-giustificato {
  text-align: justify;
  text-align-last: justify; /* Funziona in molti browser moderni */
  text-align-last: left;
}
.container.content-area {
  margin-top: 90px;             /* distacco dall'header */
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - 110px);    /* altezza calcolata */
  padding-bottom: 40px;           /* spazio per il footer */
}


/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;                /* inizialmente da sinistra */
    width: 100%;            /* larghezza piena */
    z-index: 1000;
    background: transparent;
    pointer-events: none;
    padding: 0;
}

.header-content {
    background-color: var(--white-color); /* ✅ torna qui */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;  /* ✅ qui regoli l’altezza visiva */
    box-sizing: border-box;
    pointer-events: auto;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}

.header-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.logo img {
    height: 50px;
    vertical-align: middle;
}

h1, h2, h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Hamburger Menu (Mobile) */
.hamburger-menu {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: 0.4s;
}

/* Sidebar Navigation (Mobile) */
.sidebar {
    height: 100%;
    width: 0; /* Inizialmente nascosta */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: var(--white-color);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li a {
    padding: 15px 25px;
    text-decoration: none;
    font-size: 18px;
    color: var(--text-color);
    display: block;
    transition: 0.3s;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.sidebar ul li.nav-separator {
    border-top: 1px solid #e0e0e0;
    margin: 6px 16px;
    padding: 0;
    list-style: none;
}

.sidebar ul li.nav-role-label {
    padding: 14px 25px 10px;
}
.nav-role-badge {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
}
.nav-username {
    display: block;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-top: 2px;
}
.nav-sessione {
    display: block;
    margin-top: 10px;
    font-size: 0.75rem;
    color: #666;
}
.nav-sessione select {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 4px 6px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Quando la sidebar è aperta su mobile */
body.sidebar-open .sidebar {
    width: 250px;
}

/* Contenuto principale (Mobile) */
.content-wrapper { /* Nuovo contenitore per main e footer */
    flex-grow: 1; /* Permette al wrapper di occupare lo spazio rimanente */
    transition: margin-left 0.5s; /* Animazione per lo spostamento del contenuto */
}

body.sidebar-open .content-wrapper {
    margin-left: 250px; /* Sposta il wrapper per far spazio alla sidebar */
}


.form-row {
    display: grid;
    align-items: center;
    margin-bottom: 1em;
}

.form-row label {
    width: 160px; /* stessa larghezza per tutte le etichette */
    margin-right: 10px;
    font-weight: bold;
}

.form-row input {
    flex: 1;
    font-size: 1em;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

select {
    font-size: 1em;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
textarea {
    font-size: 1em;
    font-family: inherit;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    max-width: 600px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 6px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.btn-primary:hover {
    background-color: #0056b3;
}

.nav-link.admin-only {
    display: none; /* Nasconde il link Area Gestione per default */
}

/* Sezioni dell'app */
.app-section {
/*    padding: 20px; /* Spazio interno alle sezioni */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-top: 20px;
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
/* Assicurati che le sezioni app-section abbiano un padding per non far attaccare il contenuto ai bordi 
.app-section {
    padding: 20px;
    box-sizing: border-box;
}
*/

/*
.app-section.admin-only {
    display: none;
}
.app-section:not(.active) {
    display: none;
}
*/
/* Footer */
footer {
    text-align: center;
    padding: 5px 0;
    margin-top: 0;
    background-color: transparent; /* ✅ lo sfondo trasparente resta */
    color: var(--white-color);
    font-size: 14px;
    width: 100%;
    line-height: 1.2;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
/*    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);*/
}


footer .container {
    background-color: transparent; /* 🔁 Ora inutile, può essere rimosso */
    color: var(--white-color);
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    height: 100%;
    width: 100%;
}

/* Stile specifico per il paragrafo nel footer per rimuovere margini extra */
footer p {
    margin: 0; /* NUOVO/VERIFICA: Rimuove il margine superiore e inferiore predefinito del paragrafo */
    padding: 0; /* NUOVO/VERIFICA: Assicurati che non ci siano padding sul paragrafo stesso */
}

/* Pill di stato per Baby/Campus */
.pill {
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:.85rem; line-height:1; white-space:nowrap;
}
.pill.ok { background:#e9f8ee; color:#137a3a; border:1px solid #bfe7cc; }
.pill.warn { background:#fff8e6; color:#8a6b00; border:1px solid #f3df9a; }
.pill.no { background:#fdeaea; color:#8a1f1f; border:1px solid #f1b3b3; }
.pill.non-attiva { background:#e8e8e8; color:#aaa; border:1px solid #d0d0d0; }

/* Lista figli con badge */
.figli-col { display:flex; flex-direction:column; gap:6px; }
.figlio-row { display:flex; align-items:center; gap:10px; }
.figlio-row input[type="checkbox"] { transform: translateY(1px); }

.badge {
  display:inline-block; font-size:.75rem; padding:2px 6px; border-radius:6px;
  border:1px solid transparent; color:#555; background:#f2f2f2;
}
.badge.baby   { background:#f5f7ff; border-color:#dfe6ff; color:#2746aa; }
.badge.campus { background:#eef8ff; border-color:#cfe9ff; color:#1f5f99; }
.badge.ibrido { background:#fff7e6; border-color:#ffe2a8; color:#8a6b00; }

/* Quando non modificabile: stile "solo lettura" */
.readonly .figlio-row input[type="checkbox"] { pointer-events:none; opacity:.6; }

/* Settimana non attiva (disabilitata dall'admin) */
.settimana-non-attiva td { background-color: #f0f0f0; color: #999; }
.settimana-non-attiva input[type="checkbox"] { pointer-events: none; }

button[disabled],
.btn-submit[disabled] {
  cursor: not-allowed !important;
  opacity: 0.6;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.admin-table th,
.admin-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

.admin-table th {
  background-color: #f4f4f4;
  font-weight: 600;
}

.admin-table tr:nth-child(even) {
  background-color: #fafafa;
}

.admin-table tr:hover {
  background-color: #f0f8ff; /* leggero effetto hover */
}

.admin-table code {
  background: #f7f7f7;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Sfondo righe per stato prenotazione */
.admin-table tr.stato-in_attesa  { background-color: #fffde7; }
.admin-table tr.stato-attiva     { background-color: #ffffff; }
.admin-table tr.stato-confermata { background-color: #e8f5e9; }
.admin-table tr.stato-annullata  { background-color: #fde8e8; }
.admin-table tr.stato-completata { background-color: #f0f0f0; }

.admin-table tr.stato-in_attesa:hover  { background-color: #fff9c4; }
.admin-table tr.stato-attiva:hover     { background-color: #f0f8ff; }
.admin-table tr.stato-confermata:hover { background-color: #c8e6c9; }
.admin-table tr.stato-annullata:hover  { background-color: #f8bbd0; }
.admin-table tr.stato-completata:hover { background-color: #e0e0e0; }

.nascita-desktop {
  color: #888;
  font-size: 0.85em;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .nascita-desktop { display: none; }
}

/* Legenda stati */
.legenda-stati {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin: 0.75rem 0 0.25rem;
  flex-wrap: wrap;
}

.legenda-item {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #ccc;
}

.legenda-item.stato-in_attesa  { background-color: #fffde7; }
.legenda-item.stato-attiva     { background-color: #ffffff; }
.legenda-item.stato-confermata { background-color: #e8f5e9; }
.legenda-item.stato-annullata  { background-color: #fde8e8; }
.legenda-item.stato-completata { background-color: #f0f0f0; }

/* Responsive Design (Desktop) */
/*@media (min-width: 1025px) {*/
/*@media not all and (hover: none) and (pointer: coarse) { */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    body {
        flex-direction: row;
        padding-bottom: 0;
        height: 100vh;
        overflow-y: hidden;
    }

    .hamburger-menu {
        display: none;
    }

    .sidebar {
        width: var(--sidebar-width-desktop);
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;
        padding-top: 20px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    .content-wrapper {
        /*margin-left: 0;*/
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        overflow-y: auto;
        background: transparent;  /* non copre i corner */
        padding-bottom: 30px; /* = altezza footer: 50px */
        box-sizing: border-box;

        left: var(--sidebar-width-desktop);
        width: calc(100% - var(--sidebar-width-desktop));
    }

    header {
        top: 0;
        height: 60px;
    }

    header,
    footer {
        position: fixed;
        left: var(--sidebar-width-desktop);
        width: calc(100% - var(--sidebar-width-desktop));
        z-index: 1000;
    }

    footer {
        bottom: 0;
        height: 50px;
        padding: 0;
        background-color: transparent; /* <-- rimettilo trasparente */
        display: flex;
        justify-content: center;
    }


    footer .container {
        background-color: var(--text-color);
/*        color: var(--white-color);*/
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    main {
        width: 100%;
        max-width: 1200px;
        flex-grow: 1;
    }

    .header-text .line1 {
        font-size: 1.8em;
    }

    .header-text .line2 {
        font-size: 1.4em;
    }

    .logo {
        margin-left: 0;
    }

    .header-content {
        box-sizing: border-box;
    }
}


/* --- Stili per il Form di Login (spostati da ex login.php) --- */
.login-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin: 20px auto; /* Centra il container e aggiunge un po' di spazio */
}
.login-container h1 {
    margin-bottom: 20px;
    color: #333;
}
.login-form label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
}
.login-form input[type="text"],
.login-form input[type="password"] {
    width: calc(100% - 20px); /* Tieni conto del padding */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Assicura che padding e border siano inclusi nella larghezza */
}
.login-form button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}
.login-form button:hover {
    background-color: #0056b3;
}
.error-message {
    color: red;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* --- Fine Stili Form di Login --- */

.header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.1;
    text-align: right;
}

.header-text .line1 {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--primary-color);
}

.header-text .line2 {
    font-size: 1.1em;
    font-weight: normal;
    color: var(--primary-color);
}

/* ——— Layout base: label a sinistra, input a destra ——— */
#form-prenotazione .form-row,
#form-prenotazione-senior .form-row {
  display: grid;
  grid-template-columns: 180px 1fr; /* label fissa + input fluido */
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
}

#form-prenotazione .form-row label,
#form-prenotazione-senior .form-row label {
  text-align: left;
  justify-self: start;
}

#form-prenotazione .form-row input,
#form-prenotazione-senior .form-row input {
  justify-self: stretch;
  text-align: left;
  min-width: 0;           /* <- chiave nella grid */
  width: 100%;            /* riempi la colonna */
  box-sizing: border-box; /* includi padding/bordi nel 100% */
}

/* Extra prudenza per l'email (Safari/placeholder/lunghi valori) */
#form-prenotazione input[type="email"],
#form-prenotazione-senior input[type="email"] {
  min-width: 0;
  width: 100%;
  overflow: hidden;       /* evita bleed oltre il box */
  text-overflow: ellipsis;/* se mai venisse mostrato il testo troppo lungo */
}

/* iOS Safari: forza l'allineamento a sinistra per il campo data */
#form-prenotazione input[type="date"]::-webkit-date-and-time-value,
#form-prenotazione-senior input[type="date"]::-webkit-date-and-time-value { text-align: left; }
#form-prenotazione input[type="date"]::-webkit-datetime-edit,
#form-prenotazione-senior input[type="date"]::-webkit-datetime-edit       { text-align: left; }

/* Mobile e tablet (touch) */
/*@media (hover: none) and (pointer: coarse) {*/
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  #form-prenotazione .form-row,
  #form-prenotazione-senior .form-row {
    grid-template-columns: 1fr; /* label sopra, input sotto */
  }
  #form-prenotazione .form-row label,
  #form-prenotazione-senior .form-row label {
    margin-bottom: 4px;
  }
}

/* ——— Stili specifici per la UI della sezione Prenota ——— */
#form-prenotazione .card,
#form-prenotazione-senior .card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0;
  margin: 12px 0;
  background: #fff;
}

#form-prenotazione details > summary,
#form-prenotazione-senior details > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#form-prenotazione details[open] > summary,
#form-prenotazione-senior details[open] > summary {
  border-bottom: 1px solid #eee;
}

#form-prenotazione .content,
#form-prenotazione-senior .content {
  padding: 14px 16px;
}

/* Pulsanti e azioni */
#form-prenotazione .actions,
#form-prenotazione-senior .actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

#form-prenotazione .space-between,
#form-prenotazione-senior .space-between {
  justify-content: space-between;
}

#form-prenotazione .summary-right,
#form-prenotazione-senior .summary-right {
  color: #666;
  font-weight: 500;
  font-size: 0.95em;
}

#form-prenotazione .bambino,
#form-prenotazione-senior .bambino {
  border: 1px dashed #ddd;
  border-radius: 8px;
  margin: 10px 0;
}

#form-prenotazione .form-actions,
#form-prenotazione-senior .form-actions {
  text-align: right;
  margin-top: 16px;
}

/* Bottoni */
#form-prenotazione .btn-primary,
#form-prenotazione .btn-secondary,
#form-prenotazione .btn-danger,
#form-prenotazione .btn-submit,
#form-prenotazione-senior .btn-primary,
#form-prenotazione-senior .btn-secondary,
#form-prenotazione-senior .btn-danger,
#form-prenotazione-senior .btn-submit {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

#form-prenotazione textarea,
#form-prenotazione-senior textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.6em;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
}


#form-prenotazione .btn-primary,
#form-prenotazione-senior .btn-primary { background: #0d6efd; color: #fff; }
#form-prenotazione .btn-secondary,
#form-prenotazione-senior .btn-secondary { background: #f1f3f5; }
#form-prenotazione .btn-danger,
#form-prenotazione-senior .btn-danger { background: #dc3545; color: #fff; }
#form-prenotazione .btn-submit,
#form-prenotazione-senior .btn-submit { background: #198754; color: #fff; }

/* Bottoni verdi compatti SOLO in area admin */
.admin-row .btn-submit-verde {
  padding: 6px 10px;      /* ↓ altezza */
  font-size: 0.9rem;     /* leggermente più piccolo */
  line-height: 1;
}
.admin-row {
  margin-bottom: 10px;
}

.btn-submit-verde {
  background: #198754;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.btn-secondary {
  background: #e9ecef;
  color: #333;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.btn-secondary:hover { background: #d3d8de; }

.btn-danger {
  background: #dc3545;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.btn-danger:hover { background: #b02a37; }

.btn-warning {
  background: #e67e22;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.btn-warning:hover { background: #ca6f1e; }

#ui-settimane {
  margin-top: 10px;
}

.tabella-settimane {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.95em;
}

.tabella-settimane th,
.tabella-settimane td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.tabella-settimane th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.tabella-settimane tr:nth-child(even) {
  background-color: #fdfdfd;
}

.tabella-settimane tr:hover {
  background-color: #f1f1f1;
}


/*@media (max-width: 1024px) {*/
/*@media (hover: none) and (pointer: coarse) {*/
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .sidebar {
        position: fixed;
        z-index: 1002;
        width: 250px;
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.4s ease;
        background-color: var(--sidebar-background-color);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        opacity: 1;
    }

    #menu-toggle {
        display: block !important;
    }

    html, body {
        height: 100%;
        overflow: hidden; /* blocca scroll globale */
    }

    header,
    footer {
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    .content-wrapper {
        min-height: 100vh; /* copre tutta l'altezza */
        position: relative; /* riferimento per elementi interni */
    }

    .container {
        padding: 10;
    }
    .container.content-area {
        height: calc(100vh - 100px - 110px); /* header 100, footer 110 */
        overflow-y: auto; /* scroll solo qui */
        padding-bottom: 20px; /* aria extra */
        padding-left: 0px;
        padding-right: 0px;
    }

    .login-container {
        max-width: 250px;
        margin: 10px auto; /* Centra il container e aggiunge un po' di spazio */
    }

    header {
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 1000;
        top: 0;
        height: 60px;
    /* Fai “scorrere” anche l’header quando il menu è aperto */
        transition: left 0.5s ease, width 0.5s ease;
    }

    footer {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999; /* sopra al contenuto */
        background: #333; /* colore footer */
    }
    /* La sidebar deve stare sopra l'header */
    .sidebar { z-index: 1002; }

    body.sidebar-open header {
        left: 250px;                      /* stessa larghezza della sidebar */
        width: calc(100% - 250px);
    }


    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-row label {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.4em;
    }

    .form-row input {
        width: 100%;
    }
    input[type="date"] {
        display: block;
        width: 180px;
        font-size: 1em;
        font-family: inherit;
        padding: 0.4em 0.6em;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;  /* elimina sfondo grigio iOS */
        text-align: left;        /* evita testo centrato */
    }
    
    /* Safari iOS workaround (può aiutare anche Chrome Android) */
    input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
    }


    #form-prenotazione .form-row,
    #form-prenotazione-senior .form-row {
        grid-template-columns: 1fr; /* una colonna: label sopra, input sotto */
    }

    #form-prenotazione .form-row label,
    #form-prenotazione-senior .form-row label {
        margin-bottom: 4px;
    }

    /* 1) Vinci qualsiasi regola generica solo dentro il form */
    #form-prenotazione input[type="date"],
    #form-prenotazione-senior input[type="date"] {
        text-align: left !important;  /* forza l’input, non solo il pseudo-element */
        justify-self: stretch;        /* evita centrature dovute al grid */
    }

    /* 2) Evita eredità di centering dal contenitore della riga */
    #form-prenotazione .form-row,
    #form-prenotazione-senior .form-row {
        text-align: initial;          /* reset di text-align ereditato */
        align-items: start;           /* se usi flex/grid, niente centratura verticale */
    }
    
    /* Nascondi numero settimana */
    #tabella-settimane th:nth-child(1),
    #tabella-settimane td:nth-child(1) {
        display: none;
    }

    /* Nascondi colonne disponibilità */
    #tabella-settimane th:nth-child(3),
    #tabella-settimane td:nth-child(3),
    #tabella-settimane th:nth-child(4),
    #tabella-settimane td:nth-child(4) {
        display: none;
    }
}

/* Admin Settimane — input posti disponibili */
.posti-input {
  width: 64px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
}
.posti-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}
.posti-input.modified { border-color: #ff9800; background: #fff8e1; }
.posti-input.saved    { border-color: #4caf50; background: #f1fff1; }
.btn-salva-posti {
  padding: 5px 14px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-salva-posti:hover:not(:disabled) { background: #0056b3; }
.btn-salva-posti:disabled { background: #aaa; cursor: not-allowed; }
.salva-feedback {
  font-size: 0.85rem;
  margin-left: 6px;
  min-width: 70px;
  display: inline-block;
}
.btn-attesa {
  padding: 3px 10px;
  background: #fff8e1;
  border: 1px solid #ffca28;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-attesa:hover { background: #fff0b3; }
.btn-rimuovi-attesa {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 0.9rem;
  padding: 0 4px;
}
.btn-rimuovi-attesa:hover { color: #c00; }
.label-in-attesa {
  font-size: 0.85rem;
  color: #e65100;
  font-style: italic;
}

/* Lista Genitori */
.lg-table .lg-tel-cell { white-space: nowrap; }
.lg-tel { color: #1a73e8; text-decoration: none; }
.lg-tel:hover { text-decoration: underline; }
.lg-email { color: #1a73e8; text-decoration: none; }

/* Riepilogo stati prenotazioni (admin) */
.rie-sep  { margin: 0 0.6rem; color: #ccc; }
.rie-br   { display: block; }
@media (hover: none) and (pointer: coarse) {
  .rie-sep { display: none; }
  .rie-br  { display: none; }
  .rie-item { display: block; }
}
.lg-email:hover { text-decoration: underline; }

/* === MODULISTICA === */
.badge-moduli {
  display: inline-flex; align-items: center; gap: 3px;
  background: #eaf2ff; border: 1px solid #c0d8f5; border-radius: 20px;
  padding: 2px 8px; cursor: pointer; font-size: 0.8rem; color: #2c6fad;
  user-select: none;
}
.badge-moduli.completo { background: #e6f4ea; border-color: #a8d5b0; color: #2d7a3a; }
.badge-moduli.vuoto    { background: #f5f5f5; border-color: #ccc; color: #888; }
.badge-mod-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.badge-mod-dot.ok { background: #34a853; }
.badge-mod-dot.no { background: #ccc; }
.badge-stagione { font-size: 0.7rem; color: #888; background: #eee; border-radius: 10px; padding: 1px 5px; margin-left: 3px; }

.pannello-moduli-td { padding: 0 !important; }
.pannello-moduli-inner {
  padding: 10px 14px 12px;
  background: #f8fbff;
  border-top: 1px solid #dce8f5;
}
.modulo-riga {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: #fff; border-radius: 5px;
  border: 1px solid #e0e8f0; margin-bottom: 5px; font-size: 0.87rem;
}
.modulo-riga:last-of-type { margin-bottom: 0; }
.modulo-riga input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #4a90d9; flex-shrink: 0; }
.modulo-riga label { flex: 1; cursor: pointer; }
.modulo-delega-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }
.btn-upload-delega {
  font-size: 0.76rem; padding: 2px 8px;
  background: #fff; border: 1px solid #4a90d9; color: #4a90d9;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.btn-upload-delega:hover { background: #eaf2ff; }
.link-delega { font-size: 0.78rem; color: #4a90d9; text-decoration: none; white-space: nowrap; }
.link-delega:hover { text-decoration: underline; }
.note-moduli { margin-top: 8px; font-size: 0.74rem; color: #aaa; font-style: italic; }
/* === Stato connessione (js/main.js: _netShowOffline / netToast) === */
.net-banner {
  max-width: 1200px;
  width: calc(100% - 24px);
  margin: 8px auto 0;
  box-sizing: border-box;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #fff;
  background: #3d3d3d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.net-banner.online { background: #1f7a4d; }
/* Fallback se la pagina non ha l'header */
body > .net-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
}
.net-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1100;
  max-width: calc(100% - 32px);
  width: max-content;
  box-sizing: border-box;
  padding: 11px 18px;
  border-radius: 8px;
  background: #b0141b;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.net-banner[hidden], .net-toast[hidden] { display: none; }