/* style.css - Legatoria Venturini - Timbrature
   Tema chiaro, mobile-first, palette ripresa dal banner aziendale */

:root {
    --color-primary-dark: #16314c;
    --color-primary: #2f5580;
    --color-primary-light: #6f93b9;
    --color-accent-stop: #c0392b;
    --color-accent-ok: #2e7d32;
    --color-bg: #f4f6f9;
    --color-card-bg: #ffffff;
    --color-border: #d3dbe4;
    --color-text: #1c2733;
    --color-text-muted: #5b6b7c;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-primary);
}

.app-header {
    background: var(--color-primary-dark);
    width: 100%;
    line-height: 0;
}

.app-header img {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: cover;
    display: block;
}

.app-main {
    flex: 1;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}

.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(22, 49, 76, 0.08);
}

.card-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* --- Alert successo/errore --- */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

.alert-successo {
    background: #e3f3e6;
    color: var(--color-accent-ok);
    border: 1px solid #b7ddbd;
}

.alert-errore {
    background: #fbe6e4;
    color: var(--color-accent-stop);
    border: 1px solid #f0c1bc;
}

/* --- Form / campi --- */
.campo {
    margin-bottom: 16px;
}

.campo label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"] {
    width: 100%;
    padding: 14px;
    font-size: 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    text-align: center;
    letter-spacing: 2px;
}

.campo input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.campo input:disabled {
    background: #eef2f7;
    color: var(--color-text-muted);
}

/* --- Bottoni --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    font-size: 1.15rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

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

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

.btn-start {
    background: var(--color-accent-ok);
    color: #fff;
}

.btn-stop {
    background: #fff;
    color: var(--color-accent-stop);
    border: 2px solid var(--color-accent-stop);
}

.btn-secondary {
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light);
}

.btn-small {
    width: auto;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: 8px;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* --- Riga utente / intestazione operazioni --- */
.riga-utente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.riga-utente .nome-utente {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* --- Dati inizio/fine --- */
.riga-date {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.riga-date .blocco-data {
    flex: 1;
    min-width: 140px;
}

.riga-date label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.riga-date .valore-data {
    background: #eef2f7;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    font-size: 1rem;
    text-align: center;
}

/* --- Riepilogo tempo (grande, leggibile) --- */
.riepilogo-tempo {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.riepilogo-blocco {
    flex: 1;
    min-width: 140px;
}

.riepilogo-blocco label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.riepilogo-valore {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
}

/* --- Filtri collassabili --- */
.filtri {
    margin-bottom: 16px;
}

.filtri summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-primary-dark);
    padding: 10px 0;
}

.filtri .filtri-contenuto {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.filtri .filtri-contenuto .campo {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}

/* --- Elenco tempi: schede impilate su mobile --- */
.elenco-riga {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
}

.elenco-riga-in-corso {
    background: #e3f3e6;
    border-color: #b7ddbd;
}

.elenco-riga .elenco-date {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.elenco-riga .elenco-corpo {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.elenco-riga .campo-minuti {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 220px;
    margin-bottom: 0;
}

.elenco-riga .campo-minuti .campo {
    flex: 1;
    min-width: 90px;
    margin-bottom: 0;
}

/* Larghezza fissa per le caselle Commessa, Minuti e h.m nell'elenco */
.campo-100,
.elenco-riga .campo-minuti .campo-100 {
    flex: 0 0 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Casella Minuti piu' stretta (circa meta' delle altre) */
.elenco-riga .campo-minuti .campo-num {
    flex: 0 0 55px;
    min-width: 55px;
    max-width: 55px;
}

.valore-hm {
    background: #eef2f7;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stessa altezza e padding compatto per le caselle Commessa, Minuti e h.m nell'elenco */
.elenco-riga .campo-100 input[type="number"],
.elenco-riga .campo-100 select,
.elenco-riga .campo-100 .valore-hm {
    height: 38px;
    box-sizing: border-box;
    padding: 2px 4px;
}

/* Casella Commessa: font piu' piccolo per contenere le etichette */
.campo-commessa select,
.campo-commessa .valore-hm {
    font-size: 0.95rem;
    letter-spacing: 0;
}

/* Form unico della riga: wrapper neutro, non occupa spazio nel layout */
.form-riga {
    display: contents;
}

/* Campo Note (record non confermati) */
.campo-note {
    flex: 1 1 100%;
    margin-bottom: 0;
}

/* Nota accanto ad h.m: circa meta' larghezza, altezza compatta come le altre caselle */
.elenco-riga .campo-minuti .campo-nota-inline {
    flex: 0 0 200px;
    min-width: 140px;
    max-width: 200px;
    margin-bottom: 0;
}

.campo-nota-inline .input-note {
    height: 38px;
    min-height: 38px;
    padding: 4px 6px;
}

.campo-nota-inline .valore-note {
    padding: 4px 6px;
    min-height: 38px;
}

.campo-note .input-note {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.campo-note .input-note:focus {
    outline: none;
    border-color: var(--color-primary);
}

.campo-note .input-note:disabled {
    background: #eef2f7;
    color: var(--color-text-muted);
}

.campo-note .valore-note {
    background: #eef2f7;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* Editor data/ora di inizio (record non confermati) */
.campo-inizio {
    margin-bottom: 0;
}

.inizio-riga {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.campo-inizio .input-inizio {
    width: auto;
    padding: 6px 8px;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    box-sizing: border-box;
}

/* Rimuove l'icona/pulsante che apre il calendario: modifica solo digitando */
.campo-inizio .input-inizio::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.campo-inizio .input-inizio:focus {
    outline: none;
    border-color: var(--color-primary);
}

.campo-inizio .input-inizio:disabled {
    background: #eef2f7;
    color: var(--color-text-muted);
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.badge-confermato {
    background: #e3f3e6;
    color: var(--color-accent-ok);
}

.badge-importato {
    background: #d6e6fb;
    color: #14509b;
}

.badge-non-confermato {
    background: #fdf2e0;
    color: #a3690a;
}

.badge-modificato {
    background: #fdece0;
    color: #b3541e;
}

.badge-in-corso {
    background: #dce8f5;
    color: var(--color-primary);
}

.form-start {
    margin-bottom: 16px;
}

/* --- Selettore commessa --- */
.campo select {
    width: 100%;
    padding: 14px;
    font-size: 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    text-align: center;
}

.campo select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.campo select:disabled {
    background: #eef2f7;
    color: var(--color-text-muted);
}

.form-start-commesse {
    display: flex;
    gap: 12px;
}

.form-start-commesse .btn-start {
    flex: 1;
}

.vuoto {
    text-align: center;
    color: var(--color-text-muted);
    padding: 30px 10px;
}

.paginazione {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
}

.paginazione .btn {
    width: auto;
    flex: 1;
}

/* Intestazione colonne, visibile solo nel layout desktop a elenco */
.elenco-intestazione {
    display: none;
}

@media (min-width: 640px) {
    .app-main {
        padding: 24px;
    }
}

/* --- Da tablet largo in su: l'elenco si estende in orizzontale come una lista, non come schede --- */
@media (min-width: 900px) {
    .app-main-elenco {
        max-width: 1100px;
    }

    .elenco-intestazione {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 6px 18px;
        margin-bottom: 4px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--color-text-muted);
        border-bottom: 2px solid var(--color-border);
    }

    .elenco-riga {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 20px;
        padding: 10px 18px;
        margin-bottom: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .elenco-riga + .elenco-riga {
        border-top: none;
    }

    .elenco-col {
        margin-bottom: 0;
    }

    .elenco-col-date {
        flex: 0 0 184px;
    }

    .elenco-riga .elenco-col-date {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        margin-bottom: 0;
    }

    .elenco-col-stato {
        flex: 0 0 160px;
    }

    .elenco-riga .elenco-col-stato {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 0;
    }

    .elenco-col-azioni {
        flex: 1;
        min-width: 0;
    }

    .elenco-riga .elenco-col-azioni {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .elenco-riga .campo-minuti {
        min-width: 0;
        align-items: center;
    }

    .elenco-col-azioni .campo label {
        font-size: 0.7rem;
        margin-bottom: 3px;
    }

    .elenco-col-azioni input[type="number"] {
        font-size: 1rem;
        padding: 8px;
        letter-spacing: 0;
    }

    .valore-hm {
        padding: 7px;
        font-size: 0.95rem;
    }

    .elenco-riga .campo-100 input[type="number"],
    .elenco-riga .campo-100 select,
    .elenco-riga .campo-100 .valore-hm {
        height: 36px;
    }

    .elenco-col-azioni .btn-small {
        white-space: nowrap;
    }
}