/* Grafica dei siti Margherita uguale all'app Etichette (7/10/2026): fondo carta,
   schede bianche arrotondate, beige sabbia, blu notte; tema scuro automatico.
   Caricato da ogni pagina dopo il suo stile: qui ci sono i colori (variabili
   usate anche dalle pagine) e le regole che cambiano l'aspetto. */
/* Dal 7/10/2026 il tema scuro e' quello di base (chiesto da Roberto); il chiaro
   si sceglie dal pulsante "Tema chiaro" nel menu e resta salvato sul dispositivo
   (attributo data-theme="light" sulla pagina). */
:root {
  --ground: #131417; --surface: #1E2026; --ink: #ECE8E1; --navy: #2A2F39;
  --line: #262930; --border: #3A3D44; --card-border: #2B2E35;
  --muted: #A3A9B3; --faint: #6F757F; --accent: #D9B98C;
  --sand: #D9C4A3; --sand-hover: #E6D3B3; --on-sand: #1B2333; --sand-soft: #3B3327; --sand-text: #E3CBA4;
  --chip: #2A2D33; --on-navy-muted: #A9B2C3;
  --ok-bg: #1F3A2B; --ok-fg: #93D4AE; --warn-bg: #3E2E14; --warn-fg: #F0C27D;
  --bad-bg: #45221C; --bad-fg: #F4A08F; --info-bg: #1A3734; --info-fg: #8FD0C6;
  --green: #5CC48A; --red: #F08A7E; --amber: #F0C27D;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #F6F5F2; --surface: #FFFFFF; --ink: #1B2333; --navy: #1B2333;
  --line: #EFECE6; --border: #E2DED6; --card-border: #ECE9E3;
  --muted: #626B7A; --faint: #9AA0AA; --accent: #8C6239;
  --sand-hover: #CDB48D; --sand-soft: #EFE4D2; --sand-text: #7A5A2E; --chip: #F2F0EB;
  --ok-bg: #E4F2E9; --ok-fg: #1F6B41; --warn-bg: #FDF1DE; --warn-fg: #8A4A00;
  --bad-bg: #FCE7E2; --bad-fg: #A3301B; --info-bg: #DFECEA; --info-fg: #2C5E58;
  --green: #1E8E4E; --red: #C0362C; --amber: #C77A12;
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font) !important; background: var(--ground) !important; background-image: none !important;
  color: var(--ink) !important; font-size: 15px; line-height: 1.5;
}
h1 { font-family: var(--font) !important; font-size: 2rem !important; font-weight: 800 !important;
  letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 0.35rem !important; color: var(--ink); text-wrap: balance; }
h2, h3 { font-family: var(--font) !important; }
.sub { color: var(--muted) !important; font-size: 0.95rem !important; }
a { color: var(--accent); }
code, pre, .mono, .value, table.cfg td.val, .bar-value { font-family: var(--mono) !important; }
.value, .bar-value { font-family: var(--font) !important; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schede */
.card, .box {
  background: var(--surface) !important; border: 1px solid var(--card-border) !important; border-radius: 18px !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important;
}
.card:hover { border-color: var(--card-border) !important; box-shadow: none !important; }
.card h2 { font-family: var(--font) !important; font-size: 0.72rem !important; letter-spacing: 0.09em !important;
  color: var(--muted) !important; font-weight: 600 !important; }
.row, table.cfg td, .field-row { border-color: var(--line) !important; }
.label { color: var(--muted) !important; }

/* Stato: pallini senza bagliore */
.dot { width: 9px !important; height: 9px !important; box-shadow: none !important; animation: none !important; }
.up { background: var(--green) !important; }
.down { background: var(--red) !important; }
.warn:not(.pill):not(.stat):not(.badge) { background: var(--amber); }
.bar-bg { background: var(--chip) !important; border-radius: 99px !important; }
.bar-fg { background: var(--accent) !important; border-radius: 99px !important; }

/* Pulsanti */
a.pdf-btn, button.pdf-btn, button.action-btn, .box button, form.search button[type="submit"] {
  background: var(--sand) !important; color: var(--on-sand) !important; border: 1px solid transparent !important;
  border-radius: 14px !important; font-family: var(--font) !important; font-weight: 700 !important;
  min-height: 44px; padding: 0.6rem 1.2rem !important; box-shadow: none !important;
}
a.pdf-btn:hover, button.pdf-btn:hover, button.action-btn:hover, .box button:hover { background: var(--sand-hover) !important; }
a.pdf-btn[style*="var(--chip)"], button.pdf-btn[style*="var(--chip)"], form.search button:not([type="submit"]) {
  background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; font-weight: 600 !important;
}
button.action-btn-danger, .pdf-btn.danger {
  background: var(--bad-bg) !important; color: var(--bad-fg) !important; border: 1px solid transparent !important;
  border-radius: 14px !important; font-weight: 700 !important;
}

/* Campi */
input, select, textarea {
  font-family: var(--font) !important; background: var(--surface) !important; color: var(--ink) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); border-radius: 4px !important; }

/* Tabelle */
table th { color: var(--faint) !important; font-family: var(--font) !important; }
table td { border-color: var(--line) !important; }
tr:hover td { background: var(--chip) !important; }

/* Menu laterale */
nav.topnav {
  background: var(--surface); border-right: 1px solid var(--card-border) !important;
  border-radius: 18px; padding: 1.1rem 0.75rem !important; width: 236px !important;
  margin-right: 1.75rem !important; align-self: flex-start !important; position: sticky; top: 1.5rem;
}
nav.topnav .brand { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.5rem 1rem; text-decoration: none; color: var(--ink); }
nav.topnav .brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--sand); color: var(--on-sand);
  display: grid; place-items: center; flex: none; }
nav.topnav .brand-mark svg { width: 22px; height: 22px; }
nav.topnav .brand-name { font-weight: 800; font-size: 1rem; line-height: 1.15; letter-spacing: -0.01em; }
nav.topnav .topnav-logo { display: none !important; }
nav.topnav .nav-group-label { font-family: var(--font) !important; color: var(--muted) !important;
  font-size: 0.68rem !important; letter-spacing: 0.09em !important; font-weight: 600 !important; margin: 1rem 0.75rem 0.35rem !important; }
nav.topnav a { font-family: var(--font) !important; color: var(--ink) !important; font-weight: 500 !important;
  font-size: 0.95rem !important; padding: 0.6rem 0.75rem !important; border-radius: 12px !important; }
nav.topnav a svg { width: 19px !important; height: 19px !important; color: var(--muted); opacity: 1 !important; }
nav.topnav a:hover { background: var(--chip) !important; }
nav.topnav a.active { background: var(--sand-soft) !important; color: var(--ink) !important; font-weight: 700 !important; }
nav.topnav a.active svg { color: var(--accent) !important; }
nav.topnav a.switch-site { border: 1px solid var(--border); margin: 0 0.25rem 0.5rem; font-weight: 600 !important; font-size: 0.88rem !important; }
.logout-btn { border-top: 1px solid var(--line) !important; color: var(--bad-fg) !important; font-family: var(--font) !important; }
nav.topnav .coming-soon, nav.topnav .coming-soon .tag { color: var(--faint) !important; background: none !important; border-color: var(--line) !important; }

/* Barra blu notte sul telefono (al posto del solo pulsante tondo) */
.mobilebar { display: none; }
@media (max-width: 720px) {
  body:has(.layout) { margin: 0 auto !important; padding: 0 !important; }
  main.content { padding: 1.25rem 1rem 2.5rem !important; width: 100%; max-width: 100vw; box-sizing: border-box; min-width: 0; }
  .layout { align-items: stretch !important; }
  .mobilebar {
    display: flex; align-self: stretch; width: 100%; box-sizing: border-box; align-items: center; gap: 0.75rem; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
    background: var(--navy); color: #fff; padding: 0.7rem 1rem; padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
    margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  }
  .mobilebar-title { font-weight: 700; font-size: 1rem; }
  .mobilebar-title small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--on-navy-muted); }
  .nav-toggle {
    position: static !important; flex: none; width: 40px !important; height: 40px !important; border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.12) !important; border: 0 !important; color: #fff !important;
  }
  nav.topnav { position: fixed !important; top: 0 !important; border-radius: 0 !important; width: 280px !important;
    padding: 1.4rem 0.75rem !important; padding-top: calc(1.4rem + env(safe-area-inset-top, 0px)) !important;
    box-shadow: none; }
  nav.topnav.nav-open { box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
  .nav-overlay { background: rgba(0, 0, 0, 0.35) !important; }
  h1 { font-size: 1.7rem !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Scelte attive (giorno dell'etichetta a mano, filtri): come i chip dell'app,
   blu notte con scritta bianca di giorno, sabbia con scritta scura di notte. */
.day-chip.on, .day-chip.on span { background: var(--sand) !important; border-color: var(--sand) !important; color: var(--on-sand) !important; }
:root[data-theme="light"] .day-chip.on, :root[data-theme="light"] .day-chip.on span { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.day-chip { background: var(--surface); border-color: var(--border); color: var(--ink); }
.box h1 { font-size: 1.6rem !important; }

/* Pulsante per cambiare tema, in fondo al menu */
.theme-toggle { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-top: 0.4rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: 12px; background: none; color: var(--ink); font: inherit;
  font-family: var(--font); font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: left; }
.theme-toggle:hover { background: var(--chip); }
.theme-toggle svg { width: 18px; height: 18px; color: var(--muted); flex: none; }

/* Sotto-voci del menu (anni delle Fatture) */
nav.topnav a.nav-sub { padding: 0.38rem 0.75rem 0.38rem 2.75rem !important; font-size: 0.88rem !important; color: var(--muted) !important; }
nav.topnav a.nav-sub.active-sub { color: var(--ink) !important; font-weight: 700 !important; background: var(--chip) !important; }