/* Portale web di Industrial DataHub 4.0: accesso, elenco degli impianti, amministrazione.
   Gli stessi colori della pagina del programma, chiari e scuri. */
:root {
  color-scheme: light;
  --sfondo: #f3f4f1; --carta: #ffffff; --testo: #1c2420; --tenue: #5d6a63; --bordo: #d5dad5; --griglia: #e6e9e5;
  --accento: #1f6f50; --accento-testo: #ffffff; --campo: #ffffff;
  --rosso: #c0392b; --rosso-sfondo: #fbe9e6; --verde: #1f8a4c; --verde-sfondo: #e4f4ea;
  --grigio-sfondo: #e8ebe8; --ambra: #a56a00; --ambra-sfondo: #fdf1d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --sfondo: #151a17; --carta: #1e2521; --testo: #e6ebe7; --tenue: #9aa79f; --bordo: #35403a; --griglia: #2b342f;
    --accento: #4fb489; --accento-testo: #0c1611; --campo: #161c19;
    --rosso: #ff8a7a; --rosso-sfondo: #46211c; --verde: #6fd39a; --verde-sfondo: #1c3a29;
    --grigio-sfondo: #2a332e; --ambra: #f1c063; --ambra-sfondo: #44360f;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
a { color: var(--accento); }
header { background: var(--carta); border-bottom: 1px solid var(--bordo); }
.barra { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { background: #fff; border-radius: 6px; padding: 3px 6px; display: flex; }
.logo img { height: 40px; width: auto; display: block; }
h1 { font-size: 19px; margin: 0; letter-spacing: .2px; }
h1 span { color: var(--tenue); font-weight: 400; }
.spazio { flex: 1; }
.utente { color: var(--tenue); font-size: 14px; }
main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }
section { background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h2 span { color: var(--tenue); font-weight: 400; }
label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 4px; }
input[type=text], input[type=password], select {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--testo); background: var(--campo); border: 1px solid var(--bordo); border-radius: 6px; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
button, .bottone { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--bordo); background: var(--carta); color: var(--testo);
  cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; }
button:hover:not(:disabled), .bottone:hover { border-color: var(--accento); }
button:disabled { opacity: .5; cursor: default; }
button.primario { background: var(--accento); border-color: var(--accento); color: var(--accento-testo); font-weight: 600; }
button.pericolo { color: var(--rosso); }
button.mini { padding: 3px 9px; font-size: 13px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.azioni { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.esito { font-size: 14px; }
.esito.ok { color: var(--verde); } .esito.ko { color: var(--rosso); }
.aiuto { color: var(--tenue); font-size: 13.5px; margin: 10px 0 0; }
.fascia { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.fascia.ambra { background: var(--ambra-sfondo); color: var(--ambra); }
.fascia.rossa { background: var(--rosso-sfondo); color: var(--rosso); }
.pillola { display: inline-block; padding: 3px 11px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.p-verde { background: var(--verde-sfondo); color: var(--verde); }
.p-rosso { background: var(--rosso-sfondo); color: var(--rosso); }
.p-grigio { background: var(--grigio-sfondo); color: var(--tenue); }
.p-ambra { background: var(--ambra-sfondo); color: var(--ambra); }
.spunta { display: flex; gap: 8px; align-items: center; color: var(--testo); font-size: 15px; margin: 0; }
.spunta input { width: 18px; height: 18px; margin: 0; }
.scorri { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue); padding: 0 12px 6px 0; white-space: nowrap; border-bottom: 1px solid var(--bordo); }
td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--griglia); vertical-align: middle; }
td.azioni-riga { white-space: nowrap; text-align: right; }
td.azioni-riga button { margin-left: 4px; }
.tenue { color: var(--tenue); }

/* accesso */
.accesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.scheda-accesso { width: 100%; max-width: 380px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 26px 24px; }
.scheda-accesso .logo { width: fit-content; margin-bottom: 16px; }
.scheda-accesso h1 { margin-bottom: 4px; }
.scheda-accesso p { color: var(--tenue); margin: 0 0 18px; font-size: 14px; }
.scheda-accesso .campo { margin-bottom: 12px; }
.scheda-accesso button.primario { width: 100%; padding: 10px; margin-top: 6px; }

/* elenco degli impianti */
.impianti { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.impianto { display: block; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 14px 16px; color: var(--testo); text-decoration: none; }
.impianto:hover { border-color: var(--accento); }
.impianto.allarme { border-color: var(--rosso); }
.impianto h3 { margin: 0 0 8px; font-size: 16px; }
.impianto .riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.impianto .dove { color: var(--tenue); font-size: 13px; overflow-wrap: anywhere; }
.vuoto { color: var(--tenue); }

/* chiave appena creata */
.chiave { font: 14px/1.4 Consolas, "Cascadia Mono", monospace; background: var(--grigio-sfondo); padding: 10px 12px; border-radius: 6px; overflow-wrap: anywhere; user-select: all; }
.impianti-scelta { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin-top: 6px; }
@media (max-width: 600px) { .solo-largo { display: none; } }