/* Infobi - pannello di amministrazione
   Palette costruita sui grigi freddi del marchio.
   L'accento e' un segnaposto: cambiare --accento per allinearlo al brand. */

:root {
    --grafite:      #23272b;
    --grafite-alto: #2e3338;
    --bordo:        #d6d9dc;
    --bordo-tenue:  #e8eaec;
    --fondo:        #f4f5f6;
    --carta:        #ffffff;
    --testo:        #24282c;
    --testo-tenue:  #6b7278;
    --accento:      #2b6cb0;
    --positivo:     #3f9142;
    --attenzione:   #b4801f;

    --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--testo);
    background: var(--fondo);
}

/* ---------- Testata ---------- */

.testata {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.25rem;
    height: 52px;
    background: var(--grafite);
    color: #e8eaec;
}

.marchio {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.navigazione {
    display: flex;
    gap: .25rem;
    margin-right: auto;
}

.navigazione a {
    padding: .35rem .75rem;
    border-radius: 3px;
    color: #b9bec3;
    text-decoration: none;
}

.navigazione a:hover { background: var(--grafite-alto); color: #fff; }
.navigazione a.corrente { background: var(--grafite-alto); color: #fff; }

.sessione {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .875rem;
    color: #9aa0a6;
}

.sessione a { color: #b9bec3; text-decoration: none; }
.sessione a:hover { color: #fff; text-decoration: underline; }

/* ---------- Contenuto ---------- */

.contenuto {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

h1 {
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    font-weight: 600;
}

h2 {
    margin: 2rem 0 .6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--testo-tenue);
}

/* ---------- Tabelle ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 4px;
}

th, td {
    padding: .55rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--bordo-tenue);
    vertical-align: top;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: none; }

thead th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--testo-tenue);
    background: #fafbfb;
}

.numero { text-align: right; font-variant-numeric: tabular-nums; }
.valore, .dettaglio { font-family: var(--mono); font-size: .85rem; }
.quando { color: var(--testo-tenue); font-size: .85rem; white-space: nowrap; }

/* ---------- Indicatori di stato ---------- */

.stato .indicatore { width: 1.6rem; padding-right: 0; }

.pallino {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--attenzione);
}

.pallino.attivo { background: var(--positivo); }
.pallino.inattivo { background: var(--attenzione); }

.stato th { font-weight: 500; white-space: nowrap; }

/* ---------- Impostazioni ---------- */

.impostazioni th { width: 40%; font-weight: 500; }

.impostazioni label { display: block; font-family: var(--mono); font-size: .85rem; }

.nota {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    font-weight: 400;
    color: var(--testo-tenue);
}

.impostazioni input {
    width: 100%;
    padding: .35rem .5rem;
    font-family: var(--mono);
    font-size: .85rem;
    color: var(--testo);
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 3px;
}

.impostazioni input:focus {
    outline: 2px solid var(--accento);
    outline-offset: -1px;
    border-color: var(--accento);
}

.protetto {
    display: inline-block;
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--testo-tenue);
}

.nota-form {
    margin: 1rem 0;
    font-size: .875rem;
    color: var(--testo-tenue);
}

/* ---------- Comandi ---------- */

button {
    padding: .45rem 1.1rem;
    font: inherit;
    font-weight: 500;
    color: #fff;
    background: var(--accento);
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover { background: #245c96; }
button:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }

/* ---------- Messaggi ---------- */

.avviso {
    padding: .55rem .8rem;
    margin: 0 0 1.25rem;
    background: #eef6ee;
    border-left: 3px solid var(--positivo);
    border-radius: 0 3px 3px 0;
}

.errore {
    padding: .55rem .8rem;
    margin: 0 0 1rem;
    color: #8c2f2f;
    background: #fbeeee;
    border-left: 3px solid #b44242;
    border-radius: 0 3px 3px 0;
}

.vuoto {
    padding: 1.25rem;
    color: var(--testo-tenue);
    background: var(--carta);
    border: 1px dashed var(--bordo);
    border-radius: 4px;
}

/* ---------- Accesso ---------- */

.pagina-accesso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--grafite);
}

.accesso {
    width: 20rem;
    padding: 2rem;
    background: var(--carta);
    border-radius: 5px;
}

.accesso img { display: block; margin: 0 auto .75rem; }

.accesso h1 {
    margin: 0 0 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.accesso label {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    color: var(--testo-tenue);
}

.accesso input {
    width: 100%;
    padding: .45rem .6rem;
    margin-bottom: 1rem;
    font: inherit;
    border: 1px solid var(--bordo);
    border-radius: 3px;
}

.accesso input:focus {
    outline: 2px solid var(--accento);
    outline-offset: -1px;
    border-color: var(--accento);
}

.accesso button { width: 100%; }

/* ---------- Chiusura ---------- */

.chiusura {
    display: flex;
    justify-content: space-between;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1rem 1.25rem 2rem;
    font-size: .8rem;
    color: var(--testo-tenue);
    border-top: 1px solid var(--bordo);
}

/* ---------- Adattamento ---------- */

@media (max-width: 40rem) {
    .testata { gap: 1rem; padding: 0 .75rem; }
    .marchio span { display: none; }
    .sessione span { display: none; }
    .contenuto { padding: 1.25rem .75rem 2rem; }
    .impostazioni th { width: auto; }
    .impostazioni, .impostazioni tbody, .impostazioni tr, .impostazioni th, .impostazioni td {
        display: block;
    }
    .impostazioni th { border-bottom: none; padding-bottom: .2rem; }
    .quando { padding-top: 0; }
}

.pallino.errore { background: #b44242; }

.errore-inline {
    color: #8c2f2f;
    font-size: .85rem;
}

.pallino.errore { background: #b44242; }

.errore-inline {
    color: #8c2f2f;
    font-size: .85rem;
}