/* ==========================================================================
   Palette del tema Alise (proposta del grafico approvata da Alessandro l'8/10/2026,
   design/palette/2026-10-08-palette.png): il blu resta il colore principale, ogni sezione ha un accento tenue.
   Ogni tinta ha tre versioni: piena (icone, barre, pallini), chiara (sfondi), scura (testi e pulsanti).
   ========================================================================== */
:root {
  --blu: #187F9D;       --blu-chiaro: #E8F2F5;      --blu-scuro: #176F87;
  --salvia: #6B9080;    --salvia-chiaro: #E7F0EB;   --salvia-scuro: #45705F;
  --tortora: #A49677;   --tortora-chiaro: #F3EFE6;  --tortora-scuro: #76683F;
  --glicine: #9188B5;   --glicine-chiaro: #EFECF6;  --glicine-scuro: #5D5486;
  --cipria: #C68F86;    --cipria-chiaro: #F8EBE8;   --cipria-scuro: #9C4B42;
  --azzurro: #7D9CC0;   --azzurro-chiaro: #EAF0F7;  --azzurro-scuro: #46658A;
  --miele: #C09F67;     --miele-chiaro: #F7EFDF;    --miele-scuro: #7E5E22;
  --sabbia: #E6E3DE;    --sabbia-chiaro: #F4F1EA;   --sabbia-scuro: #5E6A74;
  /* accento della sezione aperta: di base il blu */
  --acc: var(--blu); --acc-chiaro: var(--blu-chiaro); --acc-scuro: var(--blu-scuro);
}
body[data-sezione="vendite"], body[data-sezione="ricevute"] { --acc: var(--salvia); --acc-chiaro: var(--salvia-chiaro); --acc-scuro: var(--salvia-scuro); }
body[data-sezione="acquisti"] { --acc: var(--tortora); --acc-chiaro: var(--tortora-chiaro); --acc-scuro: var(--tortora-scuro); }
body[data-sezione="royalty"] { --acc: var(--glicine); --acc-chiaro: var(--glicine-chiaro); --acc-scuro: var(--glicine-scuro); }
body[data-sezione="f24"] { --acc: var(--cipria); --acc-chiaro: var(--cipria-chiaro); --acc-scuro: var(--cipria-scuro); }
body[data-sezione="banca"] { --acc: var(--azzurro); --acc-chiaro: var(--azzurro-chiaro); --acc-scuro: var(--azzurro-scuro); }
body[data-sezione="scadenze"] { --acc: var(--miele); --acc-chiaro: var(--miele-chiaro); --acc-scuro: var(--miele-scuro); }

/* barra laterale: icone come prima (le tessere colorate tolte su richiesta di Alessandro, 8/10/2026) */

/* ---- accento della sezione: scheda attiva e pulsante "+" */
.tab.active::after { }
.nuovo-btn, .nuovo-menu > summary.nuovo-btn { background: var(--acc-scuro); }

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  /* ---- stati: pagata salvia, aperta blu, scaduta cipria, parziale/in attesa miele, da verificare sabbia */
  :root {
    --pos: var(--salvia-scuro);   --pos-bg: var(--salvia-chiaro);
    --info: var(--blu-scuro);     --info-bg: var(--blu-chiaro);
    --neg: var(--cipria-scuro);   --neg-bg: var(--cipria-chiaro);
    --warn: var(--miele-scuro);   --warn-bg: var(--miele-chiaro);
    --neutral: var(--sabbia-scuro); --neutral-bg: var(--sabbia-chiaro);
  }
  /* ---- riquadri dei mesi: sabbia chiara; mese corrente blu pieno; mese scelto salvia chiaro con anello salvia */
  .mese-box { background: var(--sabbia-chiaro); border-color: var(--sabbia-chiaro); }
  .mese-box:hover { background: var(--sabbia); border-color: var(--sabbia); }
  .mese-box.corrente { background: var(--blu); border-color: var(--blu); }
  .mese-box.attivo { background: var(--salvia-chiaro); border-color: var(--salvia); color: var(--salvia-scuro); box-shadow: inset 0 0 0 1px var(--salvia); }
  .mese-box.attivo .mese-nome { color: var(--salvia-scuro); font-weight: 700; }
  .mese-box.attivo:hover { background: #DCE9E1; border-color: var(--salvia); }
  /* ---- card: bordo caldo e angoli più morbidi, come nell'anteprima */
  .card { border-color: #ECEAE6; }
}

/* ==========================================================================
   Pagine (come nell'anteprima del grafico, design/palette/2026-10-08-anteprima-gestionale.png)
   ========================================================================== */
/* tinta di un elemento: di base l'accento della sezione aperta, oppure una tinta scelta con .tinta-* */
.kpi, .timeline li { --t: var(--acc); --t-chiaro: var(--acc-chiaro); --t-scuro: var(--acc-scuro); }
.tinta-blu     { --t: var(--blu);     --t-chiaro: var(--blu-chiaro);     --t-scuro: var(--blu-scuro); }
.tinta-salvia, .timeline li.sez-vendite   { --t: var(--salvia);  --t-chiaro: var(--salvia-chiaro);  --t-scuro: var(--salvia-scuro); }
.tinta-tortora, .timeline li.sez-acquisti { --t: var(--tortora); --t-chiaro: var(--tortora-chiaro); --t-scuro: var(--tortora-scuro); }
.tinta-glicine, .timeline li.sez-royalty  { --t: var(--glicine); --t-chiaro: var(--glicine-chiaro); --t-scuro: var(--glicine-scuro); }
.tinta-cipria, .timeline li.sez-f24       { --t: var(--cipria);  --t-chiaro: var(--cipria-chiaro);  --t-scuro: var(--cipria-scuro); }
.tinta-azzurro, .timeline li.sez-banca    { --t: var(--azzurro); --t-chiaro: var(--azzurro-chiaro); --t-scuro: var(--azzurro-scuro); }
.tinta-miele, .timeline li.sez-scadenze   { --t: var(--miele);   --t-chiaro: var(--miele-chiaro);   --t-scuro: var(--miele-scuro); }

/* ---- KPI: tessera con l'icona, pillola a destra, barra in fondo nel colore della tinta */
.kpi-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.kpi-tile { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-chiaro); color: var(--t-scuro); flex: none; }
.kpi-tile .ico, .kpi-tile svg { width: 20px; height: 20px; display: block; }
.kpi-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--t-chiaro); color: var(--t-scuro); white-space: nowrap; }
.kpi-pill.neg { background: var(--cipria-chiaro); color: var(--cipria-scuro); }
.kpi.accent .kpi-tile, .kpi.accent .kpi-pill { background: rgba(255, 255, 255, .16); color: #fff; }
.card.kpi[class*="tinta-"]::after {
  content: ""; display: block; height: 5px; border-radius: 5px; margin-top: auto;
  background: linear-gradient(90deg, var(--t) var(--pct, 100%), var(--t-chiaro) var(--pct, 100%));
}
.card.kpi[class*="tinta-"] .kpi-sub { margin-bottom: 10px; }

/* ---- scadenze: la casella della data prende il colore della sezione; scadute in cipria */
.timeline li .tl-date { background: var(--t-chiaro); }
.timeline li .tl-date b, .timeline li .tl-date span { color: var(--t-scuro); }
.timeline li .tl-date b { font-weight: 700; }
.timeline li.overdue .tl-date { background: var(--cipria-chiaro); }
.timeline li.overdue .tl-date b, .timeline li.overdue .tl-date span { color: var(--cipria-scuro); }
.leggenda-sez { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 11.5px; color: var(--ink-3); }
.leggenda-sez span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--t); }
.leggenda-sez .sez-vendite { --t: var(--salvia); } .leggenda-sez .sez-acquisti { --t: var(--tortora); }
.leggenda-sez .sez-royalty { --t: var(--glicine); } .leggenda-sez .sez-f24 { --t: var(--cipria); }
.leggenda-sez .sez-scadenze { --t: var(--miele); }

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  /* ---- KPI senza tinta propria: etichetta nel colore della sezione */
  .card.kpi:not(.accent) .kpi-label { color: var(--t-scuro); }
  /* ---- card e riquadri più morbidi */
  .card { border-radius: 16px; }
  /* ---- filtri (chip): fondo sabbia, quello scelto nel colore della sezione invece dell'antracite */
  .chip { background: var(--sabbia-chiaro); border-color: var(--sabbia-chiaro); color: var(--ink-2); }
  .chip:hover { background: var(--sabbia); border-color: var(--sabbia); color: var(--ink); }
  .chip.active, .chip.active:hover { background: var(--acc-scuro); border-color: var(--acc-scuro); color: #fff; }
  /* ---- pulsanti secondari in alto: tortora chiaro */
  .page-actions .btn.ghost, .page-actions .btn:not(.primary):not(.campanella-btn) { background: var(--tortora-chiaro); border-color: var(--tortora-chiaro); color: var(--tortora-scuro); }
  .page-actions .btn.ghost:hover, .page-actions .btn:not(.primary):not(.campanella-btn):hover { background: #EAE3D3; border-color: #EAE3D3; }
  /* ---- elenchi: riga sotto il mouse sabbia chiarissima */
  .table tbody tr.clickable:hover > td { background: #FAF8F3; }
  /* ---- grafici: entrate salvia, uscite cipria, saldo blu; serie nelle tinte della palette */
  :root {
    --chart-1: #187F9D; --chart-2: #6B9080; --chart-3: #A49677; --chart-4: #9188B5; --chart-5: #C09F67; --chart-6: #7D9CC0;
    --chart-pos: #6B9080; --chart-neg: #D4A9A1; --chart-line: #176F87;
  }
  .bar-list .bl-bar > i, .bar-list li:nth-child(n+2) .bl-bar > i { background: var(--acc); }
  .bar-list li:nth-child(n+2) .bl-bar > i { opacity: .7; }
}

/* ---- riquadri dei mesi: piccola barra col peso del mese, nel colore della sezione (bianca sul mese corrente) */
.mese-barra { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: var(--sabbia); overflow: hidden; }
.mese-barra > i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.mese-box.corrente .mese-barra { background: rgba(255, 255, 255, .25); }
.mese-box.corrente .mese-barra > i { background: #fff; }
.mese-box.futuro .mese-barra { visibility: hidden; }

/* stato "contestata": documento contestato al fornitore, non è un debito */
.badge.contestata { background: var(--glicine-chiaro); color: var(--glicine-scuro); }

/* anno e campanella in alto a destra: niente bordo né ombra, solo il fondo tenue */
.page-actions .anno-sel select, .page-actions .campanella-btn { border: 0; box-shadow: none; }
.page-actions .anno-sel select:focus-visible, .page-actions .campanella-btn:focus-visible { box-shadow: 0 0 0 2px var(--acc); }

/* ==========================================================================
   Controlli dell'intestazione: tutti alti 40 px, stessi tondi, icone a 20 px e centrate (controllo dell'8/10/2026).
   Freccia indietro, anno, aggiorna, campanella e "+" stanno sulla stessa linea e hanno la stessa misura.
   ========================================================================== */
.page-head .page-actions .anno-sel select,
.doc-pagina .page-head .page-actions .anno-sel select {
  height: 40px; line-height: 40px; padding: 0 32px 0 16px; border-radius: 20px; font-size: 14px;
  background-position: right 13px center;
}
.page-head .page-actions .campanella-btn,
.doc-pagina .page-head .page-actions .campanella-btn,
.page-head .nuovo-btn, .page-head a.doc-indietro {
  width: 40px; height: 40px; min-width: 40px; padding: 0; display: grid; place-items: center;
}
.page-head .page-actions .campanella-btn svg, .page-head .nuovo-btn svg { width: 20px; height: 20px; display: block; }
.page-head .page-actions .btn, .doc-pagina .page-head .page-actions .btn { height: 40px; border-radius: 20px; padding: 0 16px; }
.page-head .page-actions { align-items: center; gap: 10px; }
.page-head .page-actions > form, .page-head .page-actions > .anno-sel, .page-head .page-actions > .campanella { display: flex; align-items: center; }
.campanella-n { top: -3px; right: -3px; }
/* pillole accanto al titolo (N., Data, Allegati, Modifica…): alte 30 px, icone a 14 px */
.doc-titolo .pillola { height: 30px; }
.doc-titolo .pillola svg { width: 14px; height: 14px; flex: none; }
/* titolo della pagina alto quanto i controlli (40 px): tutto sulla stessa linea */
.page-head h1 { line-height: 40px; min-height: 40px; }
.doc-titolo { flex-wrap: nowrap; }
.doc-titolo > * { flex: none; }
.doc-titolo h1 { white-space: nowrap; }
/* pillola SdI: pallino colorato con l'esito, il dettaglio nel suggerimento */
.pillola-sdi { gap: 6px; cursor: help; color: var(--ink-2); }
.pillola-sdi i { width: 8px; height: 8px; border-radius: 50%; background: var(--sabbia-scuro); }
.pillola-sdi.ok i { background: #4E9A6F; }
.pillola-sdi.info i { background: var(--blu); }
.pillola-sdi.warn i { background: var(--miele); }
.pillola-sdi.danger i { background: #C0473B; }
.pillola-sdi.danger { color: var(--cipria-scuro); }

/* schede-filtro (Tutte, Fatture, Ricevute, Non pagate…): più grandi; non scelte nell'oro di Alleluya, la scelta in nero */
.tabs { gap: 28px; }
.tab { font-size: 16px; font-weight: 600; color: #A49677; padding: 10px 0 12px; }
.tab:hover { color: #857756; }
.tab.active, .tab.active:hover { color: #13131D; font-weight: 700; }
.tab.active::after { background: #13131D; height: 2.5px; }
.tab .count { color: inherit; opacity: .75; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tab.active, :root:not([data-theme="light"]) .tab.active:hover { color: #F2F0EA; }
  :root:not([data-theme="light"]) .tab.active::after { background: #F2F0EA; }
}