/*
 * Il foglio di stile dell'applicazione di gestione.
 *
 * Stava dentro app.html, che ha un tetto di 1000 righe: 127 se le prendeva il
 * blocco <style>, e la pagina era arrivata a 998. Non si alza il tetto, si
 * separa cio' che e' separabile, come e' gia' stato fatto per i moduli JS.
 * Servito dalla stessa lista bianca esplicita, non da una cartella.
 */
:root { --bg:#f5f6f8; --panel:#fff; --ink:#1c2430; --muted:#6b7686; --accent:#0f766e;
      --accent-ink:#fff; --line:#e3e7ee; --ok:#15803d; --err:#b91c1c; --warn:#b45309;
        --glow:rgba(15,118,110,.10); --shadow:rgba(16,24,40,.16); }
  @media (prefers-color-scheme: dark) {
:root { --bg:#12161d; --panel:#1a2029; --ink:#e8ecf2; --muted:#8b96a5; --accent:#14b8a6;
        --accent-ink:#06211e; --line:#2a3340; --ok:#4ade80; --err:#f87171; --warn:#fbbf24;
          --glow:rgba(20,184,166,.14); --shadow:rgba(0,0,0,.45); } }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
  header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 20px;
       background:var(--panel); border-bottom:1px solid var(--line); }
  header h1 { font-size:17px; margin:0 12px 0 0; }
/* Il marchio accanto al titolo. Incorporato e non <img>, cosi' `currentColor`
   lo tiene in tinta con l'accento anche quando il tema cambia. */
.brandline { display:flex; align-items:center; gap:8px; }
.brandline .brand { width:22px; height:22px; color:var(--accent); flex:0 0 auto; display:block; }
  header label { display:block; font-size:11px; color:var(--muted); }
  nav { display:flex; flex-wrap:wrap; gap:4px; padding:8px 20px 0; background:var(--panel);
    border-bottom:1px solid var(--line); overflow-x:auto; }
  nav button { border:0; background:none; color:var(--muted); font:inherit; font-weight:600;
           padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
  nav button.active { color:var(--accent); border-bottom-color:var(--accent); }
  main { max-width:1150px; margin:0 auto; padding:20px; }
  .tab { display:none; } .tab.active { display:block; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
  section { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
  section h2 { margin:0 0 10px; font-size:15px; }
  label { display:block; font-size:12px; color:var(--muted); margin:8px 0 2px; }
  input, select, textarea { width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px;
      background:var(--bg); color:var(--ink); font:inherit; }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
  button.act { margin-top:10px; padding:8px 14px; border:0; border-radius:6px; background:var(--accent);
           color:var(--accent-ink); font:inherit; font-weight:600; cursor:pointer; }
  button.mini { padding:7px 11px; margin:2px; font-size:12px; min-height:34px; border-radius:5px;
            border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; }
  .row { display:flex; gap:10px; } .row > div { flex:1; }
  .out { margin-top:12px; font-size:13px; overflow-x:auto; }
  .ok { color:var(--ok); } .err { color:var(--err); } .warn { color:var(--warn); }
  .muted { color:var(--muted); }
  /* Module switches. The checkbox needs width:auto or the global
 `input{width:100%}` stretches it across the row and shoves the label — which
 is exactly what it did. */
  .mods { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
  .mod { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline;
     padding:7px 0; border-bottom:1px solid var(--line); margin:0; font-size:13px; color:var(--ink); }
  .mod:last-child { border-bottom:0; }
  .mod input { width:auto; margin:0; grid-row:1 / span 2; align-self:center; }
  .mod b { font-weight:600; }
  .mod .why { grid-column:2; font-size:12px; color:var(--muted); }
  /* the signed-in person's own second factor, next to their name */
  .hint { font-size:12px; color:var(--muted); margin:0 0 4px; }
  .chip { font-size:12px; color:var(--muted); }
  .chip button { font:inherit; padding:2px 8px; }
  /* Master–detail. Three panels stacked and all visible meant nothing was ever
 in focus: you searched at the top, the result appeared at the bottom, and a
 create form you were not using sat between them. One view at a time, with
 an explicit way back. */
  [data-view] { display:none; }
  [data-view].on { display:block; }
  [data-view].on.grid { display:grid; }
  .viewbar { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
  .viewbar h3 { margin:0; font-size:15px; }
  .viewbar .spacer { margin-left:auto; }
  /* first level carries the weight, second level is the choice within it */
  #nav-groups { padding-bottom:0; border-bottom:0; }
  #nav-groups button { font-size:15px; }
  #nav-groups button.active { color:var(--accent); border-bottom-color:var(--accent); }
  #nav button[data-tab] { font-size:13px; font-weight:500; }
  .slip { border:1px dashed var(--muted); border-radius:8px; padding:12px; margin-top:10px; text-align:center; }
  .slip .serial { font:700 20px/1.3 ui-monospace,Menlo,monospace; letter-spacing:1px; }
  .slip .pin { font:600 16px ui-monospace,Menlo,monospace; color:var(--warn); }
  .slip .bal { font-size:14px; color:var(--muted); }
  table { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
  th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); }
  th { color:var(--muted); font-weight:600; }
  .mono { font-family:ui-monospace,Menlo,monospace; }
  .stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
  .stat { flex:1 1 120px; background:var(--bg); border-radius:8px; padding:10px 12px; }
  .stat .v { font-size:18px; font-weight:700; } .stat .k { font-size:11px; color:var(--muted); }
  .badge { display:inline-block; font-size:11px; padding:1px 8px; border-radius:10px; background:var(--bg);
       border:1px solid var(--line); }
  .state-active,.st-paid { color:var(--ok); } .state-suspended,.state-inactive,.st-draft,.st-sent { color:var(--warn); }
  .state-expired,.st-cancelled { color:var(--err); }
  tr.click { cursor:pointer; } tr.click:hover td { background:var(--bg); }
  tr.click:focus { outline:2px solid var(--accent); outline-offset:-2px; }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px;
margin-bottom:16px; overflow:hidden; }
  .panel > header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg);
border-bottom:1px solid var(--line); }
  .panel > header h3 { margin:0; font-size:14px; } .panel > header .spacer { margin-left:auto; }
  .panel > .body { padding:4px 14px 14px; }
  .panel .when { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
margin:14px 0 0; font-weight:700; }
  .kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:12px; }
  .kpi .c { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .kpi .c .v { font-size:22px; font-weight:800; line-height:1.2; }
  .kpi .c .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
  .kpi .c .s { font-size:12px; color:var(--muted); margin-top:4px; }
  .bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--bg); margin-top:8px; }
  .bar i { display:block; }
  .legend { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--muted); margin-top:6px; }
  .legend b { color:var(--ink); font-weight:600; }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
  footer { text-align:center; color:var(--muted); font-size:12px; padding:10px 0 26px; }
  .step { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
padding:12px 14px; margin:14px 0; background:var(--bg); }
  .step-h { font-weight:700; font-size:13px; margin-bottom:2px; }
  .step .act { margin-top:10px; }
  .done { border:1px solid var(--ok); border-radius:8px; padding:12px 14px; margin-top:12px;
background:color-mix(in srgb, var(--ok) 7%, var(--panel)); }
  .done-h { font-weight:700; font-size:14px; }
  .done-act { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .done-act button { margin:0; }
  .dlg-back { position:fixed; inset:0; background:rgba(15,20,28,.55); display:flex;
align-items:center; justify-content:center; z-index:80; padding:20px; }
  .dlg { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px;
max-width:440px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.28); }
  .dlg h3 { margin:0 0 8px; font-size:15px; }
  .dlg h3:empty { display:none; }
  .dlg .dlg-msg { margin:0 0 12px; font-size:13.5px; color:var(--ink); white-space:normal; }
  .dlg input, .dlg textarea { margin-bottom:4px; }
  .dlg-act { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:14px; }
  .dlg-act button { margin:0; }
  .dlg-danger { background:var(--err); }
  /* If it acts on a click, it says so under the mouse. Each page used to list
 the selectors that happened to be clickable — button.act here, nav button
 there — so anything outside those patterns looked inert. */
  button, summary, [role="button"], .click, .mod, .amt,
  input[type=checkbox], input[type=radio] { cursor:pointer; }
  label:has(> input[type=checkbox]) { cursor:pointer; }
  button:disabled { cursor:not-allowed; }

/* --- Accesso ---------------------------------------------------------------
   E' la prima cosa che si vede del prodotto, ed era un rettangolo grigio con un
   titolo dentro. Resta sobrio di proposito: e' la console di chi lavora, non
   una pagina di vendita. Il marchio e' incorporato nella pagina invece che
   caricato come immagine, perche' solo cosi' `currentColor` lo fa cambiare
   colore col tema; il file servito a parte serve da icona nella scheda.
   `--glow` e `--shadow` sono dichiarati in ENTRAMBI i temi: un colore definito
   solo dentro la media query non esiste nell'altro. */
.login-bg { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
            z-index:50; background:var(--bg); padding:24px; overflow:auto; }
.login-bg::before { content:""; position:absolute; inset:0; pointer-events:none;
            background:radial-gradient(56rem 34rem at 50% -8%, var(--glow), transparent 68%); }
.login-card { position:relative; background:var(--panel); border:1px solid var(--line);
            border-radius:16px; padding:30px 30px 24px; width:min(392px,100%);
            box-shadow:0 1px 2px var(--shadow), 0 18px 40px -22px var(--shadow); }
.login-mark { display:flex; align-items:center; gap:11px; margin:0 0 20px; }
.login-mark svg { width:32px; height:32px; color:var(--accent); flex:0 0 auto; display:block; }
.login-mark b { font-size:18px; font-weight:650; letter-spacing:-.015em; }
.login-card h2 { margin:0 0 3px; font-size:16px; }
.login-card > p.sub { color:var(--muted); font-size:13px; margin:0 0 16px; }
.login-card label { margin-top:12px; }
.login-card button.act { margin-top:18px; width:100%; padding:10px 14px; }
.login-foot { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
            display:flex; justify-content:space-between; align-items:baseline; gap:10px;
            font-size:12px; color:var(--muted); }
.login-foot a { color:var(--accent); text-decoration:none; }
.login-foot a:hover { text-decoration:underline; }