/* Colore: ogni sezione ha il suo colore, ripreso nella barra laterale, nello sfondo della pagina,
   nelle intestazioni e nei riquadri. Il giallo del cartellino resta riservato alle offerte sotto soglia. */
:root {
  --c-adesso: #e07a00;
  --c-prodotti: #2f63e8;
  --c-notifiche: #cf3a7d;
  --c-radar: #0b9a94;
  --c-motore: #179a57;
  --c-impostazioni: #6b7a90;
  --c-catalogo: #2f63e8;
  --tint: 9%;
  --sec: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-adesso: #ffa53d;
    --c-prodotti: #7b97ff;
    --c-notifiche: #ff74b0;
    --c-radar: #3fd3c9;
    --c-motore: #3cc583;
    --c-impostazioni: #9aa7ba;
    --c-catalogo: #7b97ff;
    --tint: 9%;
  }
}
:root[data-theme="dark"] {
  --c-adesso: #ffa53d;
  --c-prodotti: #7b97ff;
  --c-notifiche: #ff74b0;
  --c-radar: #3fd3c9;
  --c-motore: #3cc583;
  --c-impostazioni: #9aa7ba;
  --c-catalogo: #7b97ff;
  --tint: 9%;
}

/* Colore della sezione aperta */
.shell:has(.main[data-view="adesso"]) { --sec: var(--c-adesso); }
.shell:has(.main[data-view="prodotti"]) { --sec: var(--c-prodotti); }
.shell:has(.main[data-view="notifiche"]) { --sec: var(--c-notifiche); }
.shell:has(.main[data-view="radar"]) { --sec: var(--c-radar); }
.shell:has(.main[data-view="motore"]) { --sec: var(--c-motore); }
.shell:has(.main[data-view="impostazioni"]) { --sec: var(--c-impostazioni); }

/* Sfondo della pagina appena tinto del colore della sezione, e filo colorato sotto la barra in alto */
.shell { background: color-mix(in srgb, var(--sec) var(--tint), var(--paper)); transition: background-color .25s; }
.now-lead { color: color-mix(in srgb, var(--sec) 22%, var(--ink)); }
.bar { border-bottom: 3px solid var(--sec); }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }

/* Barra laterale: icone su tessera colorata, piena per la sezione aperta */
.rail-item[data-view="adesso"] { --c: var(--c-adesso); }
.rail-item[data-view="prodotti"] { --c: var(--c-prodotti); }
.rail-item[data-view="notifiche"] { --c: var(--c-notifiche); }
.rail-item[data-view="radar"] { --c: var(--c-radar); }
.rail-item[data-view="motore"] { --c: var(--c-motore); }
.rail-item[data-view="impostazioni"] { --c: var(--c-impostazioni); }
.rail-item .i {
  width: 30px; height: 30px; padding: 6px; border-radius: 8px;
  color: color-mix(in srgb, var(--c) 75%, #fff); background: color-mix(in srgb, var(--c) 30%, transparent);
}
.rail-item:hover .i { background: color-mix(in srgb, var(--c) 45%, transparent); color: #fff; }
.rail-item { padding-top: 6px; padding-bottom: 6px; }
.rail-item.on { box-shadow: inset 3px 0 0 var(--c); }
.rail-item.on .i { color: #fff; background: var(--c); }
@media (max-width: 860px) {
  .rail-item .i { width: 28px; height: 28px; padding: 5px; }
  .rail-item.on { box-shadow: inset 0 3px 0 var(--c); }
}
@media (min-width: 1900px) {
  .rail-item .i { width: 32px; height: 32px; padding: 6.5px; }
}

/* Intestazioni: titolo con segno colorato, sottosezioni nel colore della sezione */
.head { border-bottom-color: color-mix(in srgb, var(--sec) 35%, var(--line-strong)); }
.head h1 { display: flex; align-items: center; gap: 12px; }
.head h1::before { content: ''; width: 6px; height: .9em; border-radius: 3px; background: var(--sec); flex: none; }
.section-head h2::before { background: var(--sec); }
.calm { border-color: color-mix(in srgb, var(--sec) 45%, var(--line-strong)); background: color-mix(in srgb, var(--sec) 5%, var(--surface)); }

/* Riquadri di lato in Adesso: ognuno con il colore della sezione a cui porta */
.card:has(.side-title a[href="#motore"]) { --c: var(--c-motore); }
.card:has(.side-title a[href="#prodotti"]) { --c: var(--c-catalogo); }
.card:has(.side-title a[href="#notifiche"]) { --c: var(--c-notifiche); }
.card:has(.side-title) { border-top: 3px solid var(--c, var(--line)); }
.side-title a { color: var(--c, var(--accent)); }

/* Numeri in evidenza: nel colore della sezione (non a rotazione, così un rosso non sembra un allarme) */
.kpi { border-left: 4px solid var(--sec); background: color-mix(in srgb, var(--sec) 6%, var(--surface)); }
.kpi b { color: color-mix(in srgb, var(--sec) 70%, var(--ink)); }

/* Movimenti: filo colorato a sinistra secondo il tipo */
.mv-row:has(.mv-kind.drop) { box-shadow: inset 3px 0 0 var(--ok); }
.mv-row:has(.mv-kind.appeared) { box-shadow: inset 3px 0 0 var(--wh); }
.mv-row:has(.mv-kind.blip) { box-shadow: inset 3px 0 0 var(--warn); }

/* Motore: il lato che sta leggendo prende il verde del motore */
.turn-side.active { background: color-mix(in srgb, var(--c-motore) 12%, var(--surface)); }
.turn-bar i { background: var(--c-motore); }

/* Gruppi della tabella prodotti e schede delle impostazioni nel colore della sezione */
.ghead { box-shadow: inset 4px 0 0 var(--sec); }
.settings-nav button.on { box-shadow: var(--shadow-card), inset 3px 0 0 var(--sec); }
.panel-tabs button.on { border-bottom-color: var(--sec); }