/* QTB Logbook: colonna stretta, pannello strumenti scuro per i risultati, navigazione in alto. */
:root {
  --bg: #eef0ee; --panel: #ffffff; --fg: #1b2420; --muted: #5d6a63; --line: #cdd4cf;
  --accent: #0f6b57; --accent-fg: #ffffff;
  --inst: #14201b; --inst-fg: #e7efe9; --inst-dim: #8fa398;
  --ok: #3ddc97; --warn: #f2b53c; --bad: #ff6b5e; --bad-txt: #b3261e; --warn-txt: #8a5a00;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-label: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1411; --panel: #17201c; --fg: #e4ebe6; --muted: #92a399; --line: #2c3933;
    --accent: #3fb79b; --accent-fg: #06130e; --inst: #0a0f0d; --inst-fg: #e7efe9; --inst-dim: #7f9288;
    --bad-txt: #ff8a80; --warn-txt: #f2b53c; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
[hidden] { display: none !important; }
h1 { font-family: var(--font-label); font-weight: 600; font-size: 1.8rem; margin: 0; }
h3 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--muted); margin: 22px 0 8px; font-weight: 500; }
.sub, .hint { color: var(--muted); }
.hint { font-size: .82rem; margin: 0; }
.err { color: var(--bad-txt); margin: 0; font-size: .9rem; }
.warn { color: var(--warn-txt); margin: 0; font-size: .88rem; }
.wide { grid-column: 1 / -1; }

#login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-block: 32px; }
.login-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }

#app { max-width: 640px; margin: 0 auto; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
#hdr { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; min-height: calc(165px + env(safe-area-inset-top, 0px)); padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 12px; margin: 0 -16px 12px; color: #fff; background: linear-gradient(to top, rgba(8,16,13,.88) 0%, rgba(8,16,13,.35) 55%, rgba(8,16,13,.08) 100%), #14201b url(/aereo-banner.jpg) center 70% / cover no-repeat; border-radius: 0 0 14px 14px; }
.hdr-id { display: flex; flex-direction: column; font-family: var(--font-label); line-height: 1.2; }
.hdr-id strong { font-size: 1.25rem; letter-spacing: .02em; }
.hdr-id span { color: #d5e0d9; font-size: .85rem; }
.hdr-id .hdr-k { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: #cfe0d6; }
#hdr .chip { background: rgba(8,16,13,.55); color: #e7efe9; border-color: rgba(255,255,255,.35); }
#hdr .chip.ok { color: #7fe3c8; border-color: #7fe3c8; }
#hdr .chip.wait { color: #f6c75a; border-color: #f6c75a; }
#hdr .chip.off { color: #ff9d94; border-color: #ff9d94; }
#hdr .link { color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#hdr .hdr-id strong { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.login-img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.hdr-r { display: flex; align-items: center; gap: 12px; }
.chip { font-family: var(--font-label); font-size: .78rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.chip.ok { color: var(--accent); border-color: var(--accent); }
.chip.wait { color: var(--warn-txt); border-color: var(--warn); }
.chip.off { color: var(--bad-txt); border-color: var(--bad); }
.link { background: none; border: 0; color: var(--accent); font: inherit; padding: 6px 2px; cursor: pointer; }
.banner { border: 1px solid var(--bad); background: var(--panel); padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; font-size: .88rem; display: flex; flex-direction: column; gap: 8px; }

.view { display: flex; flex-direction: column; gap: 16px; }
fieldset { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; margin: 0; padding: 14px 16px 16px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
legend { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; color: var(--muted); padding: 0 6px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
label { font-family: var(--font-label); font-weight: 500; font-size: .95rem; }
input, select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; min-width: 0; width: 100%; min-height: 42px; }
input[type="time"], input[type="date"] { font-family: var(--font-num); }
.inp { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.inp input { border: 0; background: transparent; font-family: var(--font-num); font-size: 1.15rem; font-weight: 500; outline: none; font-variant-numeric: tabular-nums; }
.inp span { display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-family: var(--font-label); font-size: .9rem; border-left: 1px solid var(--line); }
.inp:focus-within, input:focus-visible, select:focus-visible, .btn:focus-visible, nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn { font: inherit; font-family: var(--font-label); font-weight: 600; font-size: 1rem; border-radius: 4px; padding: 11px 16px; border: 1px solid var(--accent); background: none; color: var(--accent); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.big { width: 100%; min-height: 50px; font-size: 1.1rem; }
.btn:disabled { opacity: .55; }

.panel { background: var(--inst); color: var(--inst-fg); border-radius: 6px; padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 500; color: var(--inst-dim); }
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ffffff1c; border: 1px solid #ffffff1c; }
.ro { background: var(--inst); padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ro .k { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--inst-dim); }
.ro .v { font-family: var(--font-num); font-size: 1.7rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.ro .v small { font-size: .8rem; color: var(--inst-dim); font-weight: 400; margin-left: 4px; }
.ro .s { font-family: var(--font-num); font-size: .76rem; color: var(--inst-dim); }
.ro.ok .v { color: var(--ok); } .ro.warn .v { color: var(--warn); } .ro.bad .v { color: var(--bad); }
.panel-line { display: flex; justify-content: space-between; margin: 0; font-family: var(--font-label); color: var(--inst-dim); font-size: .9rem; }
.panel-line strong { font-family: var(--font-num); color: var(--inst-fg); font-weight: 500; }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rows li { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rows .l1 { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; }
.rows .l2 { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.rows .num { font-family: var(--font-num); white-space: nowrap; }
.tag { font-family: var(--font-label); font-size: .72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--warn); color: var(--warn-txt); align-self: flex-start; }
.pos { color: var(--accent); } .neg { color: var(--bad-txt); }
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { font-family: var(--font-label); font-weight: 500; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }

nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 14px; overflow: hidden; }
nav button { font: inherit; font-family: var(--font-label); font-size: .86rem; background: none; border: 0; color: var(--muted); padding: 12px 2px; cursor: pointer; border-bottom: 3px solid transparent; }
nav button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top, 0px)); background: var(--inst); color: var(--inst-fg); padding: 10px 16px; border-radius: 6px; font-size: .92rem; max-width: calc(100vw - 32px); text-align: center; z-index: 5; }
@media (max-width: 420px) { fieldset { grid-template-columns: 1fr 1fr; } .ro .v { font-size: 1.45rem; } nav button { font-size: .7rem; padding-left: 0; padding-right: 0; } }

.qtb-head { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: end; border-bottom: 2px solid var(--fg); padding-bottom: 10px; }
.qtb-head > div { display: flex; flex-direction: column; gap: 2px; }
.qtb-head .k { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--muted); }
.qtb-head strong { font-family: var(--font-label); font-size: 1.15rem; }
.qtb-head .foglio { width: 92px; }
.qtb-head .foglio input { font-family: var(--font-num); font-size: 1.1rem; }
textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; width: 100%; resize: vertical; }
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 420px) { .qtb-head { grid-template-columns: 1fr auto; } .qtb-head > div:first-child { grid-column: 1 / -1; } }

.lbl { font-family: var(--font-label); font-weight: 500; font-size: .95rem; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg label { position: relative; font-weight: 400; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 11px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-family: var(--font-label); font-size: .95rem; }
.seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.subgrid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 12px; border: 1px dashed var(--line); border-radius: 6px; }

.readouts.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.readouts.cols2 .rcol { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.outbox { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.outbox strong { font-family: var(--font-num); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.outbox small { color: var(--muted); font-size: .74rem; }

.rows li.tap { cursor: pointer; }
.rows li.tap:hover, .rows li.tap:focus { border-color: var(--accent); outline: none; }
.rows li.tap::after { content: "Apri il foglio ›"; color: var(--accent); font-size: .78rem; align-self: flex-end; }
.detail-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-weight: 600; }
.detail-bar .btn { white-space: nowrap; }
.ro-view input:disabled:not([type=radio]), .ro-view select:disabled, .ro-view textarea:disabled { opacity: 1; color: var(--fg); -webkit-text-fill-color: var(--fg); background: var(--bg); cursor: default; }
.ro-view .seg input:disabled { opacity: 0; }
.ro-view .seg input:disabled + span { cursor: default; }

nav button { line-height: 1.1; white-space: nowrap; }
.vtitle { margin: 0 0 10px; font-size: 1.15rem; }

.rows li.spesa { gap: 6px; }
.subrows { list-style: none; margin: 6px 0 0 18px; padding: 0 0 0 10px; border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.rows li.sub { border: 0; background: var(--bg); padding: 7px 10px; }
.rows li.spesa .ok { color: var(--ok, #1c7a4d); font-weight: 600; }
.rows li.spesa .neg { color: var(--bad, #b3261e); font-weight: 600; }

.seg.two { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.ctab > .hint:first-child { margin-top: 0; }

#c-tabs { margin-top: 0; }
h3.sep { margin: 26px 0 12px; padding-top: 14px; border-top: 2px solid var(--line); font-size: 1rem; }

input.calc { background: var(--bg); border-style: dashed; color: var(--muted); -webkit-text-fill-color: var(--muted); }

.edit-bar { background: #fff4d6; border: 1px solid #e0b64a; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.edit-bar .btn { align-self: flex-start; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 8px; }
.detail-actions .hint { flex-basis: 100%; }
.btn.danger { background: #b3261e; color: #fff; border-color: #b3261e; }
input.calc[readonly] { }