/* ═══════════════════════════════════════════════════════════════════════════
theme-light.css — Tema CHIARO del gestionale.
───────────────────────────────────────────────────────────────────────────
Si attiva SOLO con data-theme="light" sull'elemento , impostato da
public/js/init.js a partire da branding.theme della config runtime.
Senza quell'attributo il file e' inerte: il tema scuro resta il default.
Caricato per ULTIMO in index.html (dopo bundle/theme/main/faro-pro/
owner-gate) per vincere sulla cascata senza riscrivere quei fogli.
Per disattivarlo del tutto basta togliere il .
── Come e' organizzato ────────────────────────────────────────────────────
§1 Token — ribalta le variabili. Copre da solo la maggior parte della UI,
perche' faro-pro.css deriva tutti i token del design system dai --fp-*.
§2 Fondali — i gradient hardcoded che terrebbero nera la pagina.
§3 Velature — rgba(255,255,255,x) invertite: su chiaro sparirebbero.
§4 Overlay e modali.
§5 Superfici hardcoded (fatturazione, registratore, planimetria).
§6 Testi chiari rimasti tali.
§7 Stati e categorie.
§8 Ombre.
NOTA sui nomi: nel tema scuro --nero e' lo sfondo e --crema il testo. Qui i
RUOLI restano, i valori si invertono: --nero diventa chiaro, --crema scuro.
I nomi sono storici, conta il ruolo.
Contrasti verificati WCAG 2.1: tutte le combinazioni testo/sfondo >= AA.
L'oro brand #D5B36F su bianco da' 2.00:1 (illeggibile), per questo nel
tema chiaro diventa #1e40af (8.7:1) per accenti/denaro e #8a5a12 (oro
brunito) dove il testo deve restare "oro".
PALETTE: pagina #f5f8fd · superfici #ffffff / #f0f5fc · bordi #d5deea ·
testo #0f1b2d · secondario #34435c · muted #5a6a84 · accento #1e40af ·
successo #157a3f · warning #b45309 · pericolo #b91c1c · info #1d4ed8.
Superfici di stato: fondi tenui (#e6f4ea/#fde8e8/#e8f0fe/#fff4d6) con
testo scuro e bordo del colore pieno.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ §1 TOKEN ═══════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
/* ── faro-pro.css:4-79 — sorgente di tutti i token del design system.
Ribaltare qui significa ribaltare a cascata --bg-*, --text-*,
--border-*, --accent* senza toccare quel file. ─────────────────── */
--fp-bg: #f5f8fd; /* sfondo base pagina (near-white, velo azzurro) */
--fp-canvas: #e9f0fa; /* fascia centrale del gradient body (azzurro tenue) */
--fp-surface: #ffffff; /* card / pannelli (bianco puro) */
--fp-surface-2: #f0f5fc; /* input / card elevata (azzurro tenue) */
--fp-surface-3: #e2ecf9; /* hover / focus (azzurro piu carico) */
--fp-line: rgba(15, 27, 45, 0.12);
--fp-line-strong: rgba(37, 99, 235, 0.34);
--fp-text: #0f1b2d;
--fp-text-2: #34435c;
--fp-muted: #5a6a84;
--fp-dim: #8090a8;
/* Enfasi/denaro: blu profondo per coerenza "bianco + blu" (era oro). */
--fp-gold: #1e40af;
--fp-gold-2: #1e3a8a;
--fp-bordeaux: #2563eb; /* ex rosso brand -> blu primario */
--fp-bordeaux-2: #1d4ed8; /* hover/forte -> blu-700 */
--fp-green: #157a3f;
--fp-rose: #2563eb;
/* Nel tema scuro --fp-blue/--fp-cyan non sono blu/ciano: valgono grigi
caldi usati come testo tenue. Sul chiaro diventano slate scuri,
altrimenti il corpo testo perde leggibilita. */
--fp-blue: #34435c;
--fp-cyan: #5a6a84;
--fp-amber: #8a6410;
--fp-shadow: 0 10px 28px rgba(15, 27, 45, 0.10);
--fp-shadow-soft: 0 4px 12px rgba(15, 27, 45, 0.07);
/* ── theme.css — token semantici (ridichiarati per i casi in cui
faro-pro non e' caricato, es. pagine standalone). ──────────────── */
--bg-0: #f5f8fd;
--bg-1: #ffffff;
--bg-2: #f0f5fc;
--bg-3: #e2ecf9;
--text-primary: #0f1b2d;
--text-secondary: #34435c;
--text-muted: #5a6a84;
--text-inverse: #ffffff;
--border-soft: rgba(15, 27, 45, 0.12);
--border-strong: rgba(37, 99, 235, 0.34);
--accent: #2563eb;
--accent-hover: #1d4ed8;
--accent-2: #1e40af;
--accent-2-hover: #1e3a8a;
--success: #157a3f; --success-bg: rgba(21, 122, 63, 0.12);
--warning: #8a6410; --warning-bg: rgba(138, 100, 16, 0.14);
--danger: #c62828; --danger-bg: rgba(198, 40, 40, 0.10);
--info: #1e5fd6; --info-bg: rgba(30, 95, 214, 0.10);
/* Sfumature "rosso" storiche -> blu (accento brand, non danger). */
--rosso-soft-08: rgba(37, 99, 235, 0.08);
--rosso-soft-30: rgba(37, 99, 235, 0.30);
--rosso-scuro: #1d4ed8;
--shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.42), 0 18px 44px rgba(30, 64, 175, 0.24);
/* ── main.css — le 16 variabili storiche. ────────────────────────────── */
--nero: #f5f8fd;
--nero2: #ffffff;
--nero3: #f0f5fc;
--crema: #0f1b2d;
--crema2: #34435c;
--bordo: #d3e0f0;
--bordo2: #bcd0ec;
--muted: #5a6a84;
--bordeaux: #2563eb;
--bord2: #1d4ed8;
--blu2: #2563eb;
--tab-bg: #ffffff;
--tab-border: #d3e0f0;
--tab-text: #5a6a84;
--tab-active: #2563eb;
/* Accenti di sezione. */
--menu-category-accent: #34506f;
--sala-accent: #2563eb;
--sala-choice: #2563eb;
--cr-accent: #2563eb;
--cr-accent-soft: rgba(37, 99, 235, 0.12);
color-scheme: light;
}
/* ═══ §2 FONDALI ═════════════════════════════════════════════════════════ */
/* faro-pro.css:103-113 ha il gradient del body con colori hardcoded, e le
pagine standalone (page-*.css) dipingono body con var(--nero)/#0…: senza
questo override lo sfondo sotto il contenuto resta nero. Vale per TUTTE le
pagine che caricano questo foglio (html[data-theme] è l'elemento root). */
html[data-theme="light"],
:root[data-theme="light"] body,
:root[data-theme="light"] body.faro-pro-ui {
background: #f5f8fd;
color: #0f1b2d;
}
:root[data-theme="light"] .panel {
background-image: none;
}
/* ═══ §3 VELATURE ════════════════════════════════════════════════════════ */
/* Bordi e separatori sono rgba(255,255,255,x): su fondo chiaro spariscono.
Si invertono in nero traslucido mantenendo la stessa intensita' visiva. */
:root[data-theme="light"] .comanda-product-card,
:root[data-theme="light"] .cr-cart-row,
:root[data-theme="light"] .cr-cart-card,
:root[data-theme="light"] .hub-card,
:root[data-theme="light"] .hub-btn,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .modal-box,
:root[data-theme="light"] .cr-modal {
border-color: rgba(15, 27, 45, 0.14);
}
/* Highlight 3D in cima ai tasti: inset bianco su chiaro non si vede. */
:root[data-theme="light"] .cr-register-key,
:root[data-theme="light"] .cr-keypad button,
:root[data-theme="light"] .cr-category-btn {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 2px rgba(15, 27, 45, 0.10);
}
/* Planimetria sala: la griglia era rgba(255,255,255,.03), invisibile
sul chiaro (main.css:3564-3566). */
:root[data-theme="light"] .planimetria,
:root[data-theme="light"] .mappa-inner,
:root[data-theme="light"] .mappa-wrap {
background-image:
repeating-linear-gradient(0deg, rgba(15, 27, 45, 0.06) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(15, 27, 45, 0.06) 0 1px, transparent 1px 40px);
background-color: #eef3fa;
}
/* ═══ §4 OVERLAY E MODALI ════════════════════════════════════════════════ */
/* Gli overlay quasi-neri su una UI chiara sono l'incoerenza piu' visibile. */
:root[data-theme="light"] .modal-overlay,
:root[data-theme="light"] .cr-modal-overlay,
:root[data-theme="light"] .owner-gate-overlay {
background: rgba(15, 27, 45, 0.42) !important;
}
:root[data-theme="light"] .modal-box,
:root[data-theme="light"] .cr-modal,
:root[data-theme="light"] .owner-gate-shell {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
box-shadow: 0 20px 60px rgba(15, 27, 45, 0.18) !important;
}
:root[data-theme="light"] .modal-title,
:root[data-theme="light"] .cr-modal-head,
:root[data-theme="light"] .owner-gate-head {
color: var(--fp-text) !important;
}
/* Tastierino owner: i tasti numerici hanno un gradient nero (owner-gate.css:146)
che sul guscio chiaro resta nero. Si portano a fondo chiaro + testo scuro. */
:root[data-theme="light"] .owner-gate-key {
background: #f5f8fd !important;
background-image: none !important;
color: var(--fp-text) !important;
border-color: rgba(15, 27, 45, 0.18) !important;
}
:root[data-theme="light"] .owner-gate-key:hover { border-color: rgba(37, 99, 235, 0.55) !important; }
:root[data-theme="light"] .owner-gate-key:active { background: #dbe6f5 !important; }
:root[data-theme="light"] .owner-gate-key--utility { color: var(--fp-text-2) !important; }
/* Display PIN: era rgba(0,0,0,.3) (grigio sporco sul chiaro). */
:root[data-theme="light"] .owner-gate-pin-display {
background: #f0f5fc !important;
border: 1px solid rgba(15, 27, 45, 0.14) !important;
}
/* ═══ RESOCONTO SERATA (owner-gate report) ═══════════════════════════════
La vista .owner-gate-shell--report usa testo chiaro/crema (tema scuro) che
sul guscio bianco spariva (contrasto ~1.0-2.5:1). Qui si scurisce tutto. */
/* Kicker "ACCESSO RISERVATO": usa var(--og-gold)=#d5b36f ridefinita sull'overlay
(le CSS var locali vincono sull'ereditarietà da :root) → override diretto. */
:root[data-theme="light"] .owner-gate-kicker { color: #1e40af !important; }
:root[data-theme="light"] .owner-gate-title,
:root[data-theme="light"] .owner-report-kpi strong,
:root[data-theme="light"] .owner-report-section__head h3 { color: var(--fp-text) !important; }
:root[data-theme="light"] .owner-gate-subtitle,
:root[data-theme="light"] .owner-report-toolbar,
:root[data-theme="light"] .owner-report-kpi span,
:root[data-theme="light"] .owner-report-kpi small,
:root[data-theme="light"] .owner-report-section__head span,
:root[data-theme="light"] .owner-report-table td::before { color: var(--fp-muted) !important; }
:root[data-theme="light"] .owner-gate-close,
:root[data-theme="light"] .owner-gate-back,
:root[data-theme="light"] .owner-gate-refresh { color: var(--fp-text) !important; }
:root[data-theme="light"] .owner-report-table th { color: var(--fp-text-2) !important; }
:root[data-theme="light"] .owner-report-table td {
color: var(--fp-text) !important;
border-top-color: rgba(15, 27, 45, 0.10) !important;
}
:root[data-theme="light"] .owner-report-table td.is-money { color: #1e40af !important; }
:root[data-theme="light"] .owner-report-table td.is-danger,
:root[data-theme="light"] .owner-report-badge.is-danger { color: #c62828 !important; }
:root[data-theme="light"] .owner-report-badge.is-good { color: #1f7a45 !important; }
:root[data-theme="light"] .owner-report-badge { color: var(--fp-text) !important; }
:root[data-theme="light"] .owner-report-alert { color: var(--fp-text) !important; }
/* Pulsante "Storna scontrino" nel Resoconto serata */
:root[data-theme="light"] .owner-report-storna {
color: #1e40af !important;
border-color: rgba(37, 99, 235, 0.40) !important;
}
:root[data-theme="light"] .owner-report-storna:hover { border-color: #1e40af !important; }
/* Selezione tavoli (codice chiusura senza fiscale): card con testo chiaro. */
:root[data-theme="light"] .owner-gate-table-card__name { color: var(--fp-text) !important; }
:root[data-theme="light"] .owner-gate-table-card__meta { color: var(--fp-muted) !important; }
:root[data-theme="light"] .owner-gate-table-card__total { color: #1e40af !important; }
/* ═══ REGIA (dashboard owner) ════════════════════════════════════════════
faro-pro.css dipinge le card della Regia con fondi quasi neri hardcoded
(rgba(17,16,20,.9x) !important) e bordi bianchi (invisibili sul chiaro).
Qui si portano a card chiare con testo scuro; i valori con colori troppo
chiari (oro/ambra/lime) vengono scuriti per restare leggibili su bianco. */
:root[data-theme="light"] .dash-card,
:root[data-theme="light"] .faro-dashboard-modal .dash-card,
:root[data-theme="light"] .faro-brief,
:root[data-theme="light"] .faro-dashboard-hero,
:root[data-theme="light"] .faro-dashboard-focus {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border-color: rgba(15, 27, 45, 0.14) !important;
}
:root[data-theme="light"] .faro-brief-item,
:root[data-theme="light"] .faro-brief__head {
background: #f5f8fd !important;
background-image: none !important;
}
:root[data-theme="light"] .dash-label,
:root[data-theme="light"] .faro-kicker,
:root[data-theme="light"] .faro-brief-item span,
:root[data-theme="light"] .faro-dashboard-hero span,
:root[data-theme="light"] .faro-dashboard-focus span { color: var(--fp-muted) !important; }
:root[data-theme="light"] .faro-brief__head h3,
:root[data-theme="light"] .faro-brief-item strong,
:root[data-theme="light"] .faro-dashboard-hero strong,
:root[data-theme="light"] .faro-dashboard-focus strong { color: var(--fp-text) !important; }
/* Valori/etichette con colori CHIARI inline (dashboard.js) → tinte scure
leggibili su card bianche. Selettore ampio: alcuni sono su semplici,
non solo su .dash-val. Coperti tutti i colori usati nel modulo Regia. */
:root[data-theme="light"] #modal-dashboard [style*="D5B36F"],
:root[data-theme="light"] #modal-dashboard [style*="F0D79C"],
:root[data-theme="light"] #modal-dashboard [style*="f0d79c"],
:root[data-theme="light"] #modal-dashboard [style*="e8c870"],
:root[data-theme="light"] #modal-dashboard [style*="fbbf24"] { color: #1e40af !important; }
:root[data-theme="light"] #modal-dashboard [style*="a3e635"] { color: #4d7c0f !important; }
:root[data-theme="light"] #modal-dashboard [style*="f87171"] { color: #c62828 !important; }
:root[data-theme="light"] #modal-dashboard [style*="86efac"],
:root[data-theme="light"] #modal-dashboard [style*="3FAE6B"],
:root[data-theme="light"] #modal-dashboard [style*="3fae6b"] { color: #1f7a45 !important; }
/* Banner "food cost critici": testo rosso chiaro #f87171 inline (~2.4:1 sul
chiaro) → rosso brand scuro leggibile. */
:root[data-theme="light"] #allerte-fc-badge {
background: rgba(198, 40, 40, 0.10) !important;
border-color: rgba(198, 40, 40, 0.45) !important;
color: #c62828 !important;
}
/* Display Cassa Veloce: etichetta e simbolo € erano troppo tenui sul chiaro. */
:root[data-theme="light"] .cr-register-display #cr-price-label,
:root[data-theme="light"] .cr-register-display small,
:root[data-theme="light"] #cr-price-hint {
color: var(--fp-text-2) !important;
}
:root[data-theme="light"] .cr-register-display b { color: #1e40af !important; }
/* ═══ §5 SUPERFICI HARDCODED ═════════════════════════════════════════════ */
/* Fatturazione cliente (faro-pro.css:82-101): il blocco meno tematizzato,
~90 colori scritti a mano in 20 righe minificate. Si copre per famiglia
invece che regola per regola. */
:root[data-theme="light"] .fc-layout,
:root[data-theme="light"] .fc-hero,
:root[data-theme="light"] .fc-card,
:root[data-theme="light"] .fc-client-card,
:root[data-theme="light"] .fc-client-list,
:root[data-theme="light"] .fc-draft-list,
:root[data-theme="light"] .fc-draft-row,
:root[data-theme="light"] .fc-document-detail,
:root[data-theme="light"] .fc-document-rows,
:root[data-theme="light"] .fc-form-grid,
:root[data-theme="light"] .fc-config,
:root[data-theme="light"] .fc-payment,
:root[data-theme="light"] .fc-discount,
:root[data-theme="light"] .fc-actions,
:root[data-theme="light"] .fc-empty,
:root[data-theme="light"] .fc-kicker {
background-color: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border-color: rgba(15, 27, 45, 0.14) !important;
}
/* Registratore cassa rapida (main.css:4367-4660): display e tasti neri. */
:root[data-theme="light"] .cr-sale-shell,
:root[data-theme="light"] .cr-register-column,
:root[data-theme="light"] .cr-register-keypad {
background: #f0f5fc !important;
background-image: none !important;
box-shadow: inset 0 0 20px rgba(15, 27, 45, 0.06) !important;
}
:root[data-theme="light"] .cr-register-display {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .cr-register-title,
:root[data-theme="light"] .cr-register-tip {
color: var(--fp-text-2) !important;
}
:root[data-theme="light"] .cr-register-key,
:root[data-theme="light"] .cr-keypad button,
:root[data-theme="light"] .cr-key-back,
:root[data-theme="light"] .cr-key-clear,
:root[data-theme="light"] .cr-key-cancel {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .cr-register-key:active,
:root[data-theme="light"] .cr-keypad button:active {
background: #dbe6f5 !important;
}
/* Pulsanti pagamento (main.css:2882-2883). */
:root[data-theme="light"] .cr-cash,
:root[data-theme="light"] .cr-card {
background-image: none !important;
background-color: #ffffff !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.18) !important;
}
/* ═══ §6 TESTI CHIARI RIMASTI ════════════════════════════════════════════ */
/* main.css ha 28 `color:#fff` su elementi il cui sfondo ora e' chiaro.
Si riportano al testo scuro, tranne dove il fondo resta scuro/colorato. */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .menu-header,
:root[data-theme="light"] .header-mappa,
:root[data-theme="light"] .comanda-product-card,
:root[data-theme="light"] .cr-cart-row,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .hub-card {
color: var(--fp-text);
}
/* Il testo bianco resta bianco solo sopra superfici piene di brand. */
:root[data-theme="light"] .cr-cart-btn:active,
:root[data-theme="light"] .tab-btn.active,
:root[data-theme="light"] .header-sq-btn.active {
color: #ffffff;
}
/* Titoli in oro chiaro (main.css:976,1072,1542,1870,1921): sul chiaro
passano all'oro brunito. */
:root[data-theme="light"] .menu-header h2,
:root[data-theme="light"] .modal-title {
color: var(--fp-gold);
}
/* owner-gate.css: meta' dei colori del file e' testo crema/grigio chiaro. */
:root[data-theme="light"] .owner-gate-shell,
:root[data-theme="light"] .owner-gate-head,
:root[data-theme="light"] .owner-gate-body,
:root[data-theme="light"] .owner-gate-table-card,
:root[data-theme="light"] .owner-gate-empty,
:root[data-theme="light"] .owner-report-toolbar {
color: var(--fp-text) !important;
}
:root[data-theme="light"] .owner-gate-table-card,
:root[data-theme="light"] .owner-report-toolbar {
background: #f0f5fc !important;
background-image: none !important;
border-color: rgba(15, 27, 45, 0.14) !important;
}
:root[data-theme="light"] .owner-gate-error {
color: #b91c1c !important;
}
/* ═══ §7 STATI E CATEGORIE ═══════════════════════════════════════════════ */
/* I colori di stato erano tarati sul fondo scuro (contrasto 1.5-2.5:1 sul
bianco). Qui si scuriscono mantenendo la stessa semantica cromatica. */
:root[data-theme="light"] .stat-card.verde { color: #15803d; }
:root[data-theme="light"] .stat-card.rosso { color: #b91c1c; }
:root[data-theme="light"] .stat-card.giallo { color: #a16207; }
:root[data-theme="light"] .stat-card.blu { color: #3a55a0; }
/* Categorie menu (main.css:1054-1093): 27 colori in 9 righe, pensati come
fondi scuri saturi. Sul chiaro diventano tinte tenui con testo scuro,
conservando la distinzione cromatica fra categorie. */
:root[data-theme="light"] .item-cucina,
:root[data-theme="light"] .item-food,
:root[data-theme="light"] .item-bevande,
:root[data-theme="light"] .item-acqua,
:root[data-theme="light"] .item-iba,
:root[data-theme="light"] .item-drinklist,
:root[data-theme="light"] .item-spirit,
:root[data-theme="light"] .item-birre,
:root[data-theme="light"] .item-beer,
:root[data-theme="light"] .item-bianchi,
:root[data-theme="light"] .item-bollicine,
:root[data-theme="light"] .item-rossi,
:root[data-theme="light"] .item-wine {
color: var(--fp-text) !important;
border-color: rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .item-cucina,
:root[data-theme="light"] .item-food { background: #eef4ee !important; }
:root[data-theme="light"] .item-bevande,
:root[data-theme="light"] .item-acqua { background: #eaf0f6 !important; }
:root[data-theme="light"] .item-iba { background: #f3eef6 !important; }
:root[data-theme="light"] .item-drinklist,
:root[data-theme="light"] .item-spirit { background: #f6f0ea !important; }
:root[data-theme="light"] .item-birre,
:root[data-theme="light"] .item-beer { background: #f8f2e2 !important; }
:root[data-theme="light"] .item-bianchi { background: #f7f4e6 !important; }
:root[data-theme="light"] .item-bollicine { background: #f5f1e4 !important; }
:root[data-theme="light"] .item-rossi,
:root[data-theme="light"] .item-wine { background: #f6ebec !important; }
/* Prodotto esaurito: deve restare distinguibile anche sul chiaro. */
:root[data-theme="light"] .item-esaurito {
background: #e9edf3 !important;
color: #8b8189 !important;
}
/* ═══ §8 OMBRE ═══════════════════════════════════════════════════════════ */
/* Le ombre del tema scuro arrivano a rgba(0,0,0,.8): sul chiaro sono
macchie. Si riportano a valori tenui. */
:root[data-theme="light"] .toast,
:root[data-theme="light"] .hub-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .comanda-product-card,
:root[data-theme="light"] .cr-cart-card {
box-shadow: 0 4px 14px rgba(15, 27, 45, 0.10);
}
/* ═══ §9 GRADIENT SCURI HARDCODED (faro-pro.css) ═════════════════════════
faro-pro.css dipinge header, barra inferiore, card tavoli, pannelli hub e
login-box con gradient QUASI NERI marcati `!important`. Il §6 sopra aveva
già portato il TESTO allo scuro, ma senza ribaltare anche questi FONDI il
risultato era testo scuro su fondo nero = illeggibile. Qui si ribaltano i
fondi (serve `!important` per battere quelli di faro-pro) e il nero sparisce.
Riferimenti riga faro-pro.css: header 268, tavolo 823-865, hub-card 949,
tab-bar 1063, menu-header 1119, login-box 182. */
/* ── Barra superiore (header planimetria) e testata comanda ───────────────
Il logo è un PNG chiaro: su fondo chiaro sparirebbe → lo si scurisce con un
filtro così resta leggibile senza reintrodurre una barra nera. */
:root[data-theme="light"] .header-mappa,
:root[data-theme="light"] .menu-header,
:root[data-theme="light"] .header,
:root[data-theme="light"] .top-bar {
background: #f0f5fc !important;
background-image: none !important;
color: var(--fp-text) !important;
border-bottom: 1px solid rgba(15, 27, 45, 0.14) !important;
box-shadow: 0 2px 10px rgba(15, 27, 45, 0.06) !important;
}
:root[data-theme="light"] .faro-brand-logo,
:root[data-theme="light"] #faro-brand-logo-main,
:root[data-theme="light"] #faro-brand-logo {
/* Nel tema scuro il logo usa mix-blend-mode:screen (glow su fondo nero):
su fondo chiaro rende trasparenti i pixel scuri → logo invisibile.
Va riportato a `normal` perché il filtro sotto abbia effetto. */
mix-blend-mode: normal !important;
/* Logo PNG chiaro → bordeaux brand SCURO e leggibile su crema.
brightness(0) azzera a nero, poi lo si ricolora; il brightness(0.55)
finale garantisce che resti scuro (le ricette senza freno finale lo
lasciavano lavato/quasi invisibile). */
filter: brightness(0) saturate(100%) invert(14%) sepia(93%)
saturate(3200%) hue-rotate(332deg) brightness(0.55) contrast(1.1) !important;
}
/* Bottone "schermo intero" (e altri quadrati header) restati scuri. */
:root[data-theme="light"] #fullscreen-toggle,
:root[data-theme="light"] .fullscreen-toggle,
:root[data-theme="light"] .header-sq-btn:not(.active) {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
/* ── Barra di navigazione inferiore ───────────────────────────────────── */
:root[data-theme="light"] .tab-bar {
background: #f0f5fc !important;
background-image: none !important;
border-top: 1px solid rgba(15, 27, 45, 0.14) !important;
box-shadow: 0 -2px 10px rgba(15, 27, 45, 0.06) !important;
}
:root[data-theme="light"] .tab-btn:not(.active) {
color: var(--fp-text-2) !important;
}
/* ── Schermata di login (fondo, box, campi) ───────────────────────────── */
:root[data-theme="light"] #login-screen {
background: linear-gradient(180deg, #f5f8fd 0%, #e2ecf9 55%, #f5f8fd 100%) !important;
}
:root[data-theme="light"] .login-box {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.14) !important;
box-shadow: 0 20px 60px rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .cassa-input,
:root[data-theme="light"] #login-user,
:root[data-theme="light"] #login-pass {
background: #f0f5fc !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .cassa-input::placeholder { color: var(--fp-muted) !important; }
/* ── Pannelli hub (Nuovo Asporto, Uscita di Cassa, HACCP, …) ──────────────
Fondo chiaro, il bordo-accento sinistro colorato resta com'è. */
:root[data-theme="light"] .hub-card {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
}
:root[data-theme="light"] .hub-btn {
background: #f5f8fd !important;
background-image: none !important;
color: var(--fp-text) !important;
}
:root[data-theme="light"] .hub-btn:hover {
background: #e2ecf9 !important;
}
:root[data-theme="light"] .hub-btn-label { color: var(--fp-text) !important; }
:root[data-theme="light"] .hub-btn-desc { color: var(--fp-muted) !important; }
/* ── Card tavoli — un colore chiaro per stato, testo scuro leggibile ──────
Si conserva la SEMANTICA del colore (verde=libero, oro=prenotato,
rosso=occupato, ambra=conto aperto, grigio=staff) ma su tinte chiare. */
:root[data-theme="light"] .tavolo {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .tavolo.libero {
background: #e6f4ea !important;
border-color: #157a3f !important;
}
:root[data-theme="light"] .tavolo.attesa,
:root[data-theme="light"] .tavolo.prenotato {
background: #fff4d6 !important;
border-color: #b45309 !important;
}
:root[data-theme="light"] .tavolo.occupato {
background: #e8f0fe !important;
border-color: #2563eb !important;
}
:root[data-theme="light"] .tavolo.occupato.conto-aperto {
background: #ffe9c2 !important;
border-color: #b45309 !important;
}
:root[data-theme="light"] .tavolo.occupato.staff {
background: #eceff4 !important;
border-color: #5a6a84 !important;
}
:root[data-theme="light"] .tavolo .t-num,
:root[data-theme="light"] .tavolo .t-nome,
:root[data-theme="light"] .tavolo .t-info { color: var(--fp-text) !important; }
:root[data-theme="light"] .tavolo.occupato .t-tot { color: #1e40af !important; }
/* ── /direzione: isole scure hardcoded di page-direzione.css (solo LIGHT) ── */
:root[data-theme="light"] .hero-card {
background: linear-gradient(155deg, #ffffff, #f0f5fc) !important;
color: var(--fp-text) !important;
border: 1px solid var(--fp-line) !important;
}
:root[data-theme="light"] .rep .tag-a {
background: rgba(21, 122, 63, 0.12) !important; color: #157a3f !important;
border: 1px solid rgba(21, 122, 63, 0.35) !important;
}
:root[data-theme="light"] .rep .tag-c {
background: var(--bg-2) !important; color: var(--fp-muted) !important;
border: 1px solid var(--fp-line) !important;
}
:root[data-theme="light"] .rep .tag-cucina {
background: rgba(37, 99, 235, 0.12) !important; color: #1e40af !important;
border: 1px solid rgba(37, 99, 235, 0.34) !important;
}
/* ── Cassa Veloce: catalogo, prodotti, display prezzo e scontrino vuoto ────
main.css dipinge queste superfici con fondi quasi neri hardcoded (non da
variabile), quindi il ribaltamento dei token non le tocca. Il testo usa già
var(--crema)=scuro: basta schiarire i fondi e torna tutto leggibile. */
:root[data-theme="light"] .cr-catalog-column {
background: #ffffff !important;
background-image: none !important;
border-color: rgba(15, 27, 45, 0.14) !important;
}
:root[data-theme="light"] .cr-product-btn {
background: #f5f8fd !important;
background-image: none !important;
color: var(--fp-text) !important;
border-color: #c4d0e2 !important;
}
:root[data-theme="light"] .cr-product-btn:hover {
background: #e2ecf9 !important;
}
:root[data-theme="light"] .cr-product-price { color: #1e40af !important; }
/* Display digitale "TOTALE VENDITA" */
:root[data-theme="light"] #cr-price-input {
background: #f0f5fc !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
/* Scontrino vuoto */
:root[data-theme="light"] .cr-cart-card.is-empty,
:root[data-theme="light"] .cr-cart-card.is-empty .cr-cart-empty {
background: #ffffff !important;
background-image: none !important;
}
/* Riquadri numerici "display" scuri (coperti tavolo, % sconto): stesso fondo
quasi nero hardcoded degli input cassa → li si porta a stile chiaro. */
:root[data-theme="light"] #coperti-input,
:root[data-theme="light"] #table-discount-percent {
background: #f0f5fc !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
/* ═══ §10 COMANDA (presa ordini al tavolo) ═══════════════════════════════
Entrando nel tavolo per ordinare, main.css dipinge testata categorie,
ricerca, box "ordinato", barra invia e i pannelli sezione con fondi quasi
neri/grigi hardcoded (rgba(10,8,16), #0c0a10, var(--nero) sovrascritto,
#1a0c0c…). Il testo è già scuro nel tema chiaro: basta schiarire i fondi. */
/* Testata sticky: filtro categorie + barra ricerca */
:root[data-theme="light"] #menu-sticky-head,
:root[data-theme="light"] #menu #search-bar,
:root[data-theme="light"] .search-bar,
:root[data-theme="light"] .menu-category-filter-wrap {
background: #f0f5fc !important;
background-image: none !important;
border-color: rgba(15, 27, 45, 0.14) !important;
box-shadow: 0 6px 16px rgba(15, 27, 45, 0.07) !important;
}
:root[data-theme="light"] #search-input,
:root[data-theme="light"] .search-bar input {
background: #ffffff !important;
background-image: none !important;
color: var(--fp-text) !important;
border: 1px solid rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] .search-bar input::placeholder { color: var(--fp-muted) !important; }
/* Box carrello COMANDA, "ORDINATO/inviato", storico, righe/totale cassa.
faro-pro.css:1235 li raggruppa con background rgba(17,16,20,.92)!important:
qui li si riporta al chiaro (il testo interno è già scuro). */
:root[data-theme="light"] .cart-box,
:root[data-theme="light"] .sent-box,
:root[data-theme="light"] .storico-box,
:root[data-theme="light"] .cr-cart-rows,
:root[data-theme="light"] .cr-total {
background: #ffffff !important;
background-image: none !important;
border: 1px solid rgba(15, 27, 45, 0.14) !important;
color: var(--fp-text) !important;
}
/* Pulsanti quantità +/−: faro-pro.css:1262 li rende bianco-trasparente su nero
(border bianco invisibile su chiaro) → fondo tenue + bordo scuro visibile. */
:root[data-theme="light"] .qty-btn {
background: #e2ecf9 !important;
border: 1px solid rgba(15, 27, 45, 0.22) !important;
color: var(--fp-text) !important;
}
:root[data-theme="light"] .qty-btn:active { background: #dbe6f5 !important; }
:root[data-theme="light"] .cart-nome,
:root[data-theme="light"] .qty-num { color: var(--fp-text) !important; }
/* Barra inferiore (dietro INVIA COMANDA); il bottone resta accento oro/rosso */
:root[data-theme="light"] .bottom-bar {
background: #f0f5fc !important;
background-image: none !important;
border-top: 1px solid rgba(15, 27, 45, 0.14) !important;
box-shadow: 0 -2px 10px rgba(15, 27, 45, 0.06) !important;
}
/* Pannelli sezione (colonna cucina/bar) e loro intestazioni */
:root[data-theme="light"] .split-section,
:root[data-theme="light"] #split-cucina,
:root[data-theme="light"] #split-bar,
:root[data-theme="light"] .split-col {
background: #ffffff !important;
background-image: none !important;
}
/* La griglia interna ha un velo scuro rgba(8,8,11,.34) che sul bianco diventa
grigio: va reso trasparente (ambito #menu per non toccare altre griglie). */
:root[data-theme="light"] #menu .split-grid,
:root[data-theme="light"] #menu .item-grid,
:root[data-theme="light"] #menu #grid-cucina,
:root[data-theme="light"] #menu #grid-bar {
background: transparent !important;
background-image: none !important;
}
:root[data-theme="light"] .split-hdr,
:root[data-theme="light"] .split-hdr--cucina,
:root[data-theme="light"] .split-hdr--bar {
background: #e2ecf9 !important;
background-image: none !important;
border-color: rgba(15, 27, 45, 0.14) !important;
color: var(--fp-text) !important;
}
/* Tessere prodotto della comanda: via il grigio, fondo chiaro + testo scuro.
Ambito ristretto a #menu per non toccare altre griglie .item dell'app. */
:root[data-theme="light"] #menu .comanda-product-card__main,
:root[data-theme="light"] #menu .prods-flat .item,
:root[data-theme="light"] #menu .split-grid .item {
background: #f5f8fd !important;
background-image: none !important;
color: var(--fp-text) !important;
border-color: rgba(15, 27, 45, 0.16) !important;
}
:root[data-theme="light"] #menu .comanda-product-card__main:active,
:root[data-theme="light"] #menu .prods-flat .item:active { background: #e2ecf9 !important; }
:root[data-theme="light"] #menu .comanda-product-card__name { color: var(--fp-text) !important; }
:root[data-theme="light"] #menu .comanda-product-card__price { color: #1e40af !important; opacity: 1 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
§11 RESIDUI — chiusura dei punti ancora illeggibili in tema chiaro.
Fonte: audit automatico (Playwright) su 30 schermate che misura il contrasto
WCAG di ogni testo visibile. Qui stanno SOLO le coppie rimaste sotto 3:1.
Regola d'ingaggio: !important perche' molti di questi colori arrivano da
style="" inline nel markup o nei template JS, che altrimenti vincono sempre.
Palette: fondo #f5f8fd · superfici #ffffff/#f0f5fc · bordi #d5deea ·
testo #0f1b2d · secondario #34435c · accento #1e40af · ok #157a3f ·
warning #b45309 · pericolo #b91c1c.
═══════════════════════════════════════════════════════════════════════════ */
/* Token del branding cliente: customer-theme.css e' caricato DOPO questo file
e rimette i valori scuri. Qui vincono per specificita' (:root[data-theme]). */
:root[data-theme="light"] {
--surface: #ffffff;
--background: #f5f8fd;
--text: #0f1b2d;
--primary: #1e40af;
/* KDS (page-cucina.css): fondi di stato tenui al posto dei verdi/rossi scuri */
--verde-bg: #e6f4ea;
--giallo-bg: #fff4d6;
--rosso-bg: #fde8e8;
--verde: #157a3f;
--giallo: #b45309;
--rosso: #b91c1c;
--cucina-col:#b45309;
}
/* ── Testi rossi/verdi "da tema scuro" su fondo bianco ─────────────────── */
:root[data-theme="light"] .scorta-esaurito,
:root[data-theme="light"] .sent-info button,
:root[data-theme="light"] .spese-item button { color: #b91c1c !important; }
:root[data-theme="light"] .tavolo.libero .t-stato { color: #0f5c30 !important; }
:root[data-theme="light"] .t-cam,
:root[data-theme="light"] .t-coperti { color: #34435c !important; }
/* ── Pastiglie contatore: erano nere semitrasparenti su bottone chiaro ─── */
:root[data-theme="light"] .menu-category-filter-count,
:root[data-theme="light"] .sala-filter-count {
background: rgba(15, 27, 45, 0.08) !important;
color: #34435c !important;
}
:root[data-theme="light"] .sala-filter-count strong { color: #0f1b2d !important; }
:root[data-theme="light"] .sale-filter-wrap { background: #ffffff !important; border-color: #d5deea !important; }
:root[data-theme="light"] .sale-filter-kicker,
:root[data-theme="light"] .sale-filter-help { color: #34435c !important; }
/* ── Agenda prenotazioni: il calendario restava nero ───────────────────── */
:root[data-theme="light"] .cal-day {
background: #ffffff !important;
color: #0f1b2d !important;
border-color: #d5deea !important;
}
:root[data-theme="light"] .cal-day.has-prenotazioni { background: #e8f0fe !important; border-color: #1d4ed8 !important; }
:root[data-theme="light"] .cal-day.has-evento { background: #ede9fe !important; border-color: #6d28d9 !important; }
:root[data-theme="light"] .cal-day.selected { background: #dbe6f5 !important; border-color: #1e40af !important; }
:root[data-theme="light"] .cal-nav { background: #ffffff !important; border-color: #d5deea !important; }
:root[data-theme="light"] .cal-month,
:root[data-theme="light"] .cal-nav button { color: #0f1b2d !important; }
:root[data-theme="light"] #pren-giorno-titolo { color: #0f1b2d !important; }
/* ── Pulsanti primari: il fondo oro diventa blu, il testo deve schiarire ── */
:root[data-theme="light"] .btn-cassa,
:root[data-theme="light"] .btn-invia,
:root[data-theme="light"] .modal-confirm,
:root[data-theme="light"] .login-submit,
:root[data-theme="light"] .faro-btn--primary,
:root[data-theme="light"] .btn-cassa span,
:root[data-theme="light"] .btn-invia span,
:root[data-theme="light"] .modal-confirm span,
:root[data-theme="light"] #btn-invia-label { color: #ffffff !important; }
/* ── Barra "Indietro" e pulsanti di pannello ───────────────────────────── */
:root[data-theme="light"] .faro-back-btn,
:root[data-theme="light"] .haccp-btn {
background: #ffffff !important;
color: #0f1b2d !important;
border-color: #d5deea !important;
}
:root[data-theme="light"] .faro-back-btn > span[aria-hidden="true"] { color: #1e40af !important; }
/* ── Modale Cassa: totale, sconto, anteprima ───────────────────────────── */
:root[data-theme="light"] #cassa-tot-orig,
:root[data-theme="light"] [style*="ECD3A0" i] { color: #1e3a8a !important; }
:root[data-theme="light"] .faro-discount-preview { background: #f0f5fc !important; border-color: #d5deea !important; }
:root[data-theme="light"] .faro-discount-preview > div { background: #ffffff !important; }
:root[data-theme="light"] .faro-discount-preview span { color: #34435c !important; }
:root[data-theme="light"] .faro-discount-preview strong { color: #0f1b2d !important; }
:root[data-theme="light"] .faro-discount-preview .faro-discount-preview-total { background: #e8f0fe !important; border-color: #1d4ed8 !important; }
:root[data-theme="light"] .faro-discount-preview-total strong { color: #1e3a8a !important; }
:root[data-theme="light"] .faro-discount-reset { background: #fde8e8 !important; color: #b91c1c !important; border-color: #b91c1c !important; }
:root[data-theme="light"] .faro-discount-mode button.active,
:root[data-theme="light"] .faro-discount-scope button.active,
:root[data-theme="light"] .table-discount-presets button.selected,
:root[data-theme="light"] .table-discount-scopes button.selected {
background: #1e40af !important;
color: #ffffff !important;
border-color: #1e3a8a !important;
}
:root[data-theme="light"] .faro-discount-presets button { color: #1e40af !important; }
:root[data-theme="light"] .faro-discount-input-wrap { background: #ffffff !important; }
:root[data-theme="light"] #cassa-sconto-input-prefix { color: #1e40af !important; }
:root[data-theme="light"] #cassa-riepilogo-sconto,
:root[data-theme="light"] #table-discount-summary { color: #34435c !important; }
:root[data-theme="light"] .table-discount-card__head label span { color: #1e40af !important; }
/* ── Card e badge del pannello Gestione ────────────────────────────────── */
:root[data-theme="light"] .hub-card-header > div,
:root[data-theme="light"] .hub-card-icon { background: #e8f0fe !important; color: #1e3a8a !important; }
:root[data-theme="light"] #allerte-fc-badge { background: #fde8e8 !important; color: #b91c1c !important; border-color: #b91c1c !important; }
:root[data-theme="light"] .aruba-sync-card { background: #ffffff !important; border-color: #d5deea !important; }
:root[data-theme="light"] .aruba-sync-card__title { color: #0f1b2d !important; }
:root[data-theme="light"] .aruba-sync-card__sub,
:root[data-theme="light"] .aruba-sync-card__status,
:root[data-theme="light"] .t-mute { color: #34435c !important; }
/* ── Campi di inserimento: molti hanno fondo scuro nello style inline ──── */
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="time"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
background: #ffffff !important;
color: #0f1b2d !important;
border-color: #d5deea !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #5a6a84 !important; }
/* ── Colori accesi scritti a mano nei template JS/HTML ─────────────────── */
:root[data-theme="light"] [style*="color:#4ade80" i],
:root[data-theme="light"] [style*="color: #4ade80" i],
:root[data-theme="light"] [style*="color:#6ee7a0" i],
:root[data-theme="light"] [style*="color: #6ee7a0" i],
:root[data-theme="light"] [style*="color:#6ee7b7" i],
:root[data-theme="light"] [style*="color: #6ee7b7" i] { color: #0f5c30 !important; }
:root[data-theme="light"] [style*="color:#fbbf24" i],
:root[data-theme="light"] [style*="color: #fbbf24" i] { color: #b45309 !important; }
:root[data-theme="light"] [style*="color:#f87171" i],
:root[data-theme="light"] [style*="color: #f87171" i] { color: #b91c1c !important; }
:root[data-theme="light"] [style*="color:#c4b5fd" i],
:root[data-theme="light"] [style*="color: #c4b5fd" i] { color: #5b21b6 !important; }
:root[data-theme="light"] [style*="color:#9FCF9C" i],
:root[data-theme="light"] [style*="color: #9FCF9C" i] { color: #0f5c30 !important; }
:root[data-theme="light"] [style*="color:#A8C0D4" i],
:root[data-theme="light"] [style*="color: #A8C0D4" i] { color: #1e3a8a !important; }
/* riquadri verdi scuri scritti inline (inventario, scorte, senza fiscale) */
:root[data-theme="light"] [style*="#0f2a1a" i],
:root[data-theme="light"] [style*="#0a1a14" i],
:root[data-theme="light"] [style*="#064e3b" i] {
background: #e6f4ea !important;
color: #0f5c30 !important;
border-color: #157a3f !important;
}
/* ── KDS cucina/attese: testate di card e pulsanti "pronto" ────────────── */
:root[data-theme="light"] .card-tavolo,
:root[data-theme="light"] .card-coperti,
:root[data-theme="light"] .card-max-wait strong { color: #0f1b2d !important; }
:root[data-theme="light"] .card-cam,
:root[data-theme="light"] .card-max-wait small { color: #34435c !important; }
:root[data-theme="light"] .portata-ready { background: #e6f4ea !important; color: #0f5c30 !important; border-color: #157a3f !important; }
:root[data-theme="light"] .portata-ready.is-bar { background: #e8f0fe !important; color: #1e3a8a !important; border-color: #1d4ed8 !important; }
:root[data-theme="light"] .item-done-btn { background: #f0f5fc !important; color: #0f5c30 !important; border-color: #157a3f !important; }
/* il lampeggio del ritardo resta, ma fra due rossi chiari */
@keyframes flash-bg-light { 0%, 100% { background: #fde8e8; } 50% { background: #f8c9c9; } }
:root[data-theme="light"] .comanda-card.rosso .card-header { animation-name: flash-bg-light !important; }
/* ── Ultimi residui (secondo giro di audit) ────────────────────────────── */
/* Filtro sale: il bottone attivo era bianco su bianco */
:root[data-theme="light"] .sala-filter-btn.active,
:root[data-theme="light"] .sale-filter .sala-filter-btn.active {
background: #1e40af !important;
border-color: #1e3a8a !important;
}
:root[data-theme="light"] .sala-filter-btn.active .sala-filter-label { color: #ffffff !important; }
:root[data-theme="light"] .sala-filter-btn.active .sala-filter-count {
background: rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
/* Pulsante "Imposta evento" e badge di sincronizzazione in errore */
:root[data-theme="light"] .evento-empty__btn { color: #5b21b6 !important; border-color: #5b21b6 !important; }
:root[data-theme="light"] .aruba-sync-badge--err { color: #b91c1c !important; }
/* Rosa "coperto" dei KPI di Direzione: scritto inline da page-report.js */
:root[data-theme="light"] [style*="#F0A0AD" i],
:root[data-theme="light"] [style*="#F0A0AD" i] .kpi-val { color: #a3184a !important; }
/* ═══════════════════════════════════════════════════════════════════════════
§12 PRENOTAZIONI, EVENTI E SCHEDE — il caso segnalato dall'utente:
"nel calendario delle prenotazioni una prenotazione inserita e' illeggibile".
Due cause distinte, entrambe invisibili a un audit su archivio vuoto:
1) faro-pro.css:1501-1513 forza .pren-card / .evento-card e le altre schede a
background rgba(17,16,20,.92) !important — fondo NERO — mentre il testo usa
var(--text-primary), che nel tema chiaro e' scuro: scritta scura su nero.
2) l'ora e il badge tavolo usano --brass-300 (#F0D79C), un oro chiarissimo
pensato per il fondo nero: su bianco e' praticamente invisibile.
═══════════════════════════════════════════════════════════════════════════ */
/* Token ottone: 8 usi su 9 sono testo, quindi vanno scuriti; i --brass-700 sono
solo bordi e restano tenui. L'unico uso come sfondo (.compare-bar) e' coperto sotto. */
:root[data-theme="light"] {
--brass-300: #8a5a12;
--brass-400: #8a5a12;
--brass-500: #7a4f10;
--brass-700: #c9a86a;
}
/* Schede su fondo chiaro (prenotazioni, eventi, dashboard, magazzino, categorie) */
:root[data-theme="light"] .pren-card,
:root[data-theme="light"] .pren-list,
:root[data-theme="light"] .pren-empty,
:root[data-theme="light"] .evento-card,
:root[data-theme="light"] .evento-empty,
:root[data-theme="light"] .dash-card,
:root[data-theme="light"] .giornata-card,
:root[data-theme="light"] .mag-item,
:root[data-theme="light"] .cat-item {
background: #ffffff !important;
border-color: #d5deea !important;
}
:root[data-theme="light"] .pren-card:hover,
:root[data-theme="light"] .mag-item:hover,
:root[data-theme="light"] .cat-item:hover { border-color: #1d4ed8 !important; }
/* Testi delle schede prenotazione */
:root[data-theme="light"] .pren-card__nome,
:root[data-theme="light"] .evento-card__title { color: #0f1b2d !important; }
:root[data-theme="light"] .pren-card__note,
:root[data-theme="light"] .evento-card__desc { color: #34435c !important; }
:root[data-theme="light"] .pren-card__ora,
:root[data-theme="light"] .pren-banner__ora { color: #1e3a8a !important; }
:root[data-theme="light"] .pren-card__persone,
:root[data-theme="light"] .pren-alert__label,
:root[data-theme="light"] .pren-banner__cop,
:root[data-theme="light"] .pren-banner__title { color: #34435c !important; }
:root[data-theme="light"] .pren-card__tavolo,
:root[data-theme="light"] .pren-banner__tav {
background: #fff4d6 !important;
color: #7a4f10 !important;
border-color: #b08a3c !important;
}
:root[data-theme="light"] .pren-card__tel { color: #1e40af !important; }
:root[data-theme="light"] .evento-card__kicker { color: #5b21b6 !important; }
/* Banner "Prenotazioni oggi" sulla mappa tavoli */
:root[data-theme="light"] .pren-banner {
background: #ffffff !important;
border-color: #d5deea !important;
}
:root[data-theme="light"] .pren-banner__chip {
background: #f0f5fc !important;
border-color: #d5deea !important;
color: #0f1b2d !important;
}
:root[data-theme="light"] .pren-banner__nome { color: #0f1b2d !important; }
:root[data-theme="light"] .pren-banner__count,
:root[data-theme="light"] .pren-banner__totale {
background: #e8f0fe !important;
color: #1e3a8a !important;
border-color: #1d4ed8 !important;
}
/* Totale coperti, pulsanti riga e interruttore avviso */
:root[data-theme="light"] .pren-totale {
background: #f0f5fc !important;
border-color: #d5deea !important;
}
:root[data-theme="light"] .pren-totale__label { color: #34435c !important; }
:root[data-theme="light"] .pren-totale__val { color: #1e3a8a !important; }
:root[data-theme="light"] .pren-btn {
background: #ffffff !important;
border-color: #d5deea !important;
color: #34435c !important;
}
:root[data-theme="light"] .pren-btn--del:hover { color: #b91c1c !important; border-color: #b91c1c !important; }
:root[data-theme="light"] .pren-btn--edit:hover { color: #1e40af !important; border-color: #1e40af !important; }
:root[data-theme="light"] .slider { background: #c9d4e4 !important; }
:root[data-theme="light"] .switch input:checked + .slider { background: #157a3f !important; }
:root[data-theme="light"] .cal-dot { background: #1d4ed8 !important; }
:root[data-theme="light"] .cal-dot-evento { background: #6d28d9 !important; }
/* Barra "Ricavi" del P&L: gradient con testo scuro sopra, ora schiarito */
:root[data-theme="light"] .compare-bar,
:root[data-theme="light"] .compare-bar.ricavi,
:root[data-theme="light"] .compare-bar.costi { color: #ffffff !important; }
/* ── Ultimi effetti del ribaltamento dell'ottone (usato anche come SFONDO) ── */
/* Bottone vista attivo e selettore modalita' conto separato: fondo oro brunito,
quindi il testo deve schiarire. Serve !important perche' main.css:551 e lo
stile inline di cassa.js:744 arrivano dopo per specificita'/inline. */
:root[data-theme="light"] .header-sq-btn.active,
:root[data-theme="light"] .header-sq-btn.active svg,
:root[data-theme="light"] #sep-modalita-bar [aria-selected="true"] { color: #ffffff !important; }
/* Etichetta "evento" della scheda giornata (nome reale: __eyebrow) */
:root[data-theme="light"] .evento-card__eyebrow { color: #5b21b6 !important; }
/* Badge di stato della card Sync PEC/Aruba: fondo scuro residuo */
:root[data-theme="light"] .aruba-sync-card__badge {
background: #f0f5fc !important;
color: #1e3a8a !important;
border-color: #d5deea !important;
}