* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f1f3f5;
    color: #212529;
}

/* Barra superiore */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px;
    background: #1f6feb; color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.brand { font-weight: 700; font-size: 18px; }
.nav { display: flex; align-items: center; gap: 8px; }
.month-picker { display: flex; gap: 6px; margin: 0; }
.month-picker select {
    padding: 6px 8px; border-radius: 6px; border: none; font-size: 14px;
}
.btn {
    display: inline-block; padding: 6px 12px; border-radius: 6px;
    background: rgba(255,255,255,.18); color: #fff; text-decoration: none;
    font-size: 14px; font-weight: 600;
}
.btn:hover { background: rgba(255,255,255,.32); }
.btn.today { background: #fff; color: #1f6feb; }
.status { margin-left: auto; font-size: 13px; min-height: 18px; }
#saveStatus.ok { color: #b7f5c2; }
#saveStatus.err { color: #ffd0d0; }

.account { display: flex; gap: 8px; }

/* Pagina login / cambia password */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: #1f6feb;
}
.login-box {
    background: #fff; padding: 32px 28px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); width: 320px;
    display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.login-logo { font-size: 22px; font-weight: 700; }
.login-sub { margin: 0 0 4px; color: #666; font-size: 14px; }
.login-box input {
    padding: 11px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px;
}
.login-box button {
    padding: 11px; border: none; border-radius: 8px; background: #1f6feb;
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.login-box button:hover { background: #1a5fd0; }
.login-err { background: #ffe3e3; color: #c92a2a; padding: 9px; border-radius: 8px; font-size: 14px; }
.login-ok  { background: #d3f9d8; color: #2b8a3e; padding: 9px; border-radius: 8px; font-size: 14px; }
.login-link { color: #1f6feb; text-decoration: none; font-size: 14px; margin-top: 4px; }

.alert {
    margin: 20px; padding: 16px; background: #fff3cd; border: 1px solid #ffe69c;
    border-radius: 8px;
}
.alert a { color: #1f6feb; }

/* Griglia */
.grid-wrap { overflow: auto; max-height: calc(100vh - 92px); padding: 0; }
table.grid { border-collapse: collapse; width: 100%; table-layout: fixed; background: #fff; }
.grid th, .grid td {
    border: 1px solid #c9ccd1; padding: 0; vertical-align: top;
}
.grid thead th {
    position: sticky; top: 0; z-index: 20;
    background: #343a40; color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 2px; min-width: 0; text-align: center;
    white-space: normal; word-break: break-word;
}
.grid thead th.appt { font-size: 10px; }
.grid thead th.corner {
    left: 0; z-index: 25; background: #212529;
    min-width: 44px; width: 44px; font-size: 11px; padding: 4px 2px;
    white-space: normal; line-height: 1.1;
}
.grid th.daycell {
    position: sticky; left: 0; z-index: 15;
    background: #e9ecef; min-width: 44px; width: 44px; padding: 3px 2px;
    text-align: center; font-weight: 600;
}
tr.weekend th.daycell { background: #ffe3e3; }
.daylabel { font-size: 12px; margin-bottom: 2px; white-space: nowrap; }
textarea.daynote {
    font-size: 10px; color: #555; min-height: 18px; min-width: 0; width: 100%;
    background: transparent; text-align: left;
}

.cell-body { display: flex; flex-direction: column; width: 100%; min-width: 0; }

select.cell-stato {
    width: 100%; border: none; background: transparent;
    font-size: 9px; font-weight: 700; color: #495057;
    padding: 2px 2px 0; cursor: pointer;
}

textarea.cell {
    width: 100%; min-width: 0; border: none; resize: none;
    font-family: inherit; font-size: 11px; line-height: 1.25;
    padding: 3px 3px; background: transparent; overflow: hidden;
    min-height: 26px; word-break: break-word;
}
.grid td textarea.cell { min-width: 0; }
textarea.cell:focus { outline: 2px solid #1f6feb; background: #fff; }
textarea.cell.filled { background: #eef1f4; }
textarea.cell.dirty { background: #fff3bf !important; }

/* Stato prenotazione: colora l'intera cella */
td.stato-non_pagato { background: #ffd8d8; }
td.stato-arrivato_non_pagato { background: #fff3bf; }
td.stato-pagato { background: #d8f3dc; }
td.stato-arrivato_pagato { background: #d0ebff; }
tr.weekend td.stato-non_pagato { background: #ffc2c2; }
tr.weekend td.stato-arrivato_non_pagato { background: #ffe066; }
tr.weekend td.stato-pagato { background: #c5ead0; }
tr.weekend td.stato-arrivato_pagato { background: #bcdfff; }

.foot {
    padding: 10px 16px; font-size: 13px; color: #666; background: #fff;
    border-top: 1px solid #dee2e6;
}
.foot a { color: #1f6feb; }

/* Barra navigazione giorno (solo mobile) */
.mobilebar { display: none; }

/* ============== MOBILE ============== */
@media (max-width: 820px) {
    .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
    .brand { font-size: 16px; }
    .nav { flex-wrap: wrap; }
    .month-picker select { padding: 8px; font-size: 15px; }
    .btn { padding: 8px 12px; }
    .status { order: 5; width: 100%; margin-left: 0; text-align: right; }
    .account { margin-left: auto; }

    /* Barra giorno */
    .mobilebar {
        display: flex; align-items: center; gap: 8px;
        position: sticky; top: 0; z-index: 25;
        background: #343a40; padding: 8px 10px;
    }
    .mobilebar .mbtn {
        flex: 0 0 auto; width: 46px; height: 42px; font-size: 18px;
        border: none; border-radius: 8px; background: #1f6feb; color: #fff; cursor: pointer;
    }
    .mobilebar #daySelect {
        flex: 1 1 auto; height: 42px; font-size: 16px; font-weight: 700;
        border: none; border-radius: 8px; padding: 0 10px; text-align: center;
    }

    /* La tabella diventa elenco verticale: solo il giorno attivo è visibile */
    .grid-wrap { max-height: none; overflow: visible; }
    table.grid, .grid thead, .grid tbody, .grid tr, .grid th, .grid td {
        display: block; width: auto;
    }
    .grid thead { display: none; }
    .grid tr { display: none; border-bottom: 3px solid #1f6feb; margin-bottom: 8px; }
    .grid tr.mobile-active { display: block; }

    .grid th.daycell {
        position: static; min-width: 0; width: auto;
        background: #e9ecef; padding: 10px 12px;
    }
    tr.weekend th.daycell { background: #ffe3e3; }
    .daylabel { font-size: 17px; font-weight: 700; }
    textarea.daynote { font-size: 13px; width: 100%; min-width: 0; }

    .grid td {
        display: flex; align-items: stretch; gap: 8px;
        border: none; border-bottom: 1px solid #e3e6ea; padding: 4px 8px;
    }
    .grid td:before {
        content: attr(data-label);
        flex: 0 0 64px; display: flex; align-items: center;
        font-size: 12px; font-weight: 700; color: #555;
    }
    .cell-body { flex: 1 1 auto; min-width: 0; gap: 4px; }
    select.cell-stato {
        font-size: 14px; padding: 6px 8px; border: 1px solid #d0d4d9;
        border-radius: 6px; background: #fff;
    }
    textarea.cell {
        min-width: 0; width: 100%; font-size: 16px; min-height: 40px;
        border: 1px solid #d0d4d9; border-radius: 6px;
    }
    .grid td textarea.cell { min-width: 0; }
}