/*
 * ============================================================================
 *  theme.css  —  "LA VERA NAPOLI"  ·  Fuoco, Mare & Sole
 * ============================================================================
 *  Tema universale LIGHT/DARK automatico (prefers-color-scheme) su TUTTE le
 *  pagine: sito pubblico, gestionale, POS cassa/tavoli/kitchen, settings,
 *  clienti/fidelizzazione.
 *
 *  Concept: identità di pizzeria napoletana artigianale.
 *   - Palette: rosso pomodoro San Marzano, ambra del sollione e limone di
 *     Sorrento, verde basilico, blu del Golfo, crema/torrone in light,
 *     carbonio caldo in dark.
 *   - Tipografia: serif elegante per i titoli (carattere italiano/manuale),
 *     sans per il corpo. Stack di sistema per resistere al CSP.
 *   - Micro-dettagli: bordi morbidi, hover raffinati, separatori a "vapore
 *     di forno", ombre calde, badge-pill, bordi accent.
 *   - Patina retrò: header con bordo ambra, gradient caldo a forno a legna,
 *     footer in carbonio con testo crema.
 *
 *  File NUOVO e SEPARATO dai CSS esistenti: per ripristinare il vecchio
 *  aspetto basta rimuovere il tag <link> a theme.css nel layout.
 *
 *  Strategia tecnica:
 *   - Light/dark via @media (prefers-color-scheme)
 *   - Override Bootstrap + POS + sito (card, table, modal, form, navbar,...)
 *   - Correzione dei colori inline hardcoded nei template via attribute
 *     selectors + !important, così anche lo style="" si adatta al tema.
 * ============================================================================
 */

/* ---------------------------------------------------------------- base --- */
html, body {
    color-scheme: light dark;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- vars --- */
:root {
    /* Paleta light: crema/torrone caldo di Napoli */
    --t-bg-body: #f4f6f8;
    --t-bg-panel: #ffffff;
    --t-bg-header: #ffffff;
    --t-bg-muted: #eef1f4;
    --t-bg-hover: #e3e8ee;
    --t-bg-accent-soft: rgba(43, 108, 176, 0.10);

    --t-text: #1f2933;
    --t-text-muted: #5b6b7c;
    --t-text-invert: #ffffff;

    --t-border: #d7dfe6;
    --t-border-strong: #b9c4cf;

    /* Brand: pomodoro, ambrato, basilico, golfo */
    --t-accent: #2b6cb0;
    --t-accent-strong: #24599a;
    --t-accent-text: #ffffff;
    --t-primary: #2b6cb0;
    --t-primary-strong: #24599a;
    --t-primary-text: #ffffff;
    --t-success: #2f7d4f;
    --t-danger: #b3261e;
    --t-warning: #b45309;
    --t-info: #0f6a94;

    --t-input-bg: #ffffff;
    --t-shadow: 0 1px 3px rgba(36, 29, 21, 0.10), 0 1px 2px rgba(36, 29, 21, 0.06);
    --t-shadow-lg: 0 14px 32px rgba(36, 29, 21, 0.18);

    --t-radius: 12px;
    --t-radius-sm: 8px;

    /* Sito pubblico: mappa le variabili --clr-* del sito (static/style.css) */
    --clr-bg-dark: #f4f6f8;
    --clr-bg-panel: #ffffff;
    --clr-border: rgba(31, 41, 51, 0.16);
    --clr-text-main: #1f2933;
    --clr-text-muted: #5b6b7c;
    --clr-gold-main: #24599a;
    --clr-primary: #2b6cb0;
    --clr-accent: #24599a;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark soft: blu-nero bilanciato */
        --t-bg-body: #1b2230;
    --t-bg-panel: #212a3a;
    --t-bg-header: #1e2635;
    --t-bg-muted: #27303f;
    --t-bg-hover: #2e3949;
    --t-bg-accent-soft: rgba(106, 162, 224, 0.14);

    --t-text: #e8ecf1;
    --t-text-muted: #a6b1bd;
    --t-text-invert: #0f1520;

    --t-border: #354052;
    --t-border-strong: #46536a;

    --t-accent: #6aa2e0;
    --t-accent-strong: #8ab4f0;
    --t-accent-text: #0f1520;
    --t-primary: #6aa2e0;
    --t-primary-strong: #8ab4f0;
    --t-primary-text: #0f1520;
    --t-success: #54b47c;
    --t-danger: #ef6a61;
    --t-warning: #e8a13c;
    --t-info: #4aa3d8;

    --t-input-bg: #1c2433;
    --t-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --t-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);

    /* Sito pubblico dark soft */
    --clr-bg-dark: #161d29;
    --clr-bg-panel: #212a3a;
    --clr-border: rgba(106, 162, 224, 0.30);
    --clr-text-main: #e8ecf1;
    --clr-text-muted: #a6b1bd;
    --clr-gold-main: #8ab4f0;
    --clr-primary: #6aa2e0;
    --clr-accent: #6aa2e0;
    }
}

/* Mappa il tema POS esistente (usa le variabili di grume css/style.css) */
:root {
    --bg-body: var(--t-bg-body);
    --bg-panel: var(--t-bg-panel);
    --bg-header: var(--t-bg-header);
    --bg-footer: var(--t-bg-panel);
    --bg-card: var(--t-bg-panel);
    --bg-muted: var(--t-bg-muted);
    --bg-hover: var(--t-bg-hover);
    --text-main: var(--t-text);
    --text-muted: var(--t-text-muted);
    --border-color: var(--t-border);
    --primary: var(--t-primary);
    --accent-green: var(--t-success);
}

/* ------------------------------------------------------------ base UI ---- */
body {
    background-color: var(--t-bg-body);
    color: var(--t-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.01em;
}

/* Titoli: serif elegante "manuale italiano" */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.navbar-brand, .brand, .logo-text, .pos-brand,
.card-title, .panel-title, .page-header h1, .content-header h1,
.hero-title, .site-title, .footer-title, .section-title {
    font-family: Georgia, "Times New Roman", "Playfair Display", "Palatino Linotype", Cambria, serif;
    font-weight: 700;
    letter-spacing: 0.005em;
}

/* ------------------------------------------------------------ Bootstrap --- */

/* Sfondi */
.bg-white { background-color: var(--t-bg-panel) !important; }
.bg-light { background-color: var(--t-bg-muted) !important; }
.bg-dark  { background-color: var(--t-bg-header) !important; }
.bg-black,
.bg-#000 { background-color: var(--t-bg-body) !important; }
.bg-secondary { background-color: #8a7a5f !important; }
.bg-muted, .bg-gray, .bg-grey { background-color: var(--t-bg-muted) !important; }

/* Testo */
.text-dark, .text-body, .text-black { color: var(--t-text) !important; }
.text-muted, .text-secondary { color: var(--t-text-muted) !important; }
.text-white { color: var(--t-text) !important; }
.text-light { color: var(--t-text-muted) !important; }
.text-primary { color: var(--t-primary) !important; }
.text-success { color: var(--t-success) !important; }
.text-danger { color: var(--t-danger) !important; }
.text-warning { color: var(--t-warning) !important; }
.text-info { color: var(--t-info) !important; }

/* Card di carattere: bordo morbido + angoli dolci */
.card, .card-body, .card-header, .card-footer, .panel, .panel-body, .box {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius) !important;
}
.card { box-shadow: var(--t-shadow); border: 1px solid var(--t-border) !important; }
.card:hover { box-shadow: var(--t-shadow-lg); }
.card-header, .card-footer, .modal-header, .modal-footer {
    background-color: var(--t-bg-muted) !important;
    border-color: var(--t-border) !important;
}
.card-header { border-bottom: 2px solid var(--t-accent) !important; }

/* Tabelle */
.table { color: var(--t-text) !important; }
.table thead th,
.table tr th,
table thead th {
    background-color: var(--t-bg-muted) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8em;
}
.table td, .table th, table td, table th { border-color: var(--t-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--t-bg-muted) !important; }
.table-hover tbody tr:hover, .table tbody tr:hover { background-color: var(--t-bg-hover) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--t-text) !important; }

/* Form */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="tel"], textarea, select {
    background-color: var(--t-input-bg) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    background-color: var(--t-input-bg) !important;
    color: var(--t-text) !important;
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 0.2rem var(--t-bg-accent-soft) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--t-text-muted) !important; }
.input-group-text, .input-group-prepend .input-group-text {
    background-color: var(--t-bg-muted) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}

/* Modal */
.modal-content {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-radius: var(--t-radius) !important;
    border: 1px solid var(--t-border) !important;
}
.modal-content .close { color: var(--t-text) !important; }

/* Dropdown / menu */
.dropdown-menu {
    background-color: var(--t-bg-panel) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: var(--t-shadow-lg);
}
.dropdown-item { color: var(--t-text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--t-bg-hover) !important;
    color: var(--t-text) !important;
}

/* Navbar: bordo inferiore ambra (patina) */
.navbar {
    background-color: var(--t-bg-header) !important;
    border-bottom: 2px solid var(--t-accent);
}
.logo-img {
    height: 55px !important;
    width: auto !important;
}
.logo:hover .logo-img {
    transform: scale(1.05);
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-brand { color: var(--t-text) !important; }
.navbar-brand { font-weight: 700; }
.nav-link { color: var(--t-text-muted) !important; }
.nav-link.active, .nav-link:hover { color: var(--t-accent-strong) !important; }
a { color: var(--t-primary); text-decoration: none; }
a:hover { color: var(--t-primary-strong); text-decoration: underline; }

/* Liste */
.list-group, .list-group-item {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}
.list-group-item.active {
    background-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
    border-color: var(--t-primary) !important;
}

/* Pagination */
.page-link {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}
.page-item.disabled .page-link { background-color: var(--t-bg-muted) !important; color: var(--t-text-muted) !important; }

/* Tabs: sottolineatura ambra */
.nav-tabs { border-bottom-color: var(--t-border) !important; }
.nav-tabs .nav-link { color: var(--t-text-muted) !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { color: var(--t-accent-strong) !important; }
.nav-tabs .nav-link.active {
    color: var(--t-text) !important;
    background-color: var(--t-bg-panel) !important;
    border-color: var(--t-border) !important;
    border-bottom: 2px solid var(--t-accent) !important;
}

/* Accordo / collapse */
.accordion, .accordion-item, .accordion-button, .card:not(.invoices-card) {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--t-bg-accent-soft) !important;
    color: var(--t-text) !important;
}

/* Alert / badge */
.badge { color: var(--t-text-invert); border-radius: 999px; }
.badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-warning, .badge.bg-info { color: var(--t-text-invert); }
.alert { color: var(--t-text) !important; border-radius: var(--t-radius-sm) !important; }
.alert-light { background-color: var(--t-bg-muted) !important; }
.alert-warning { background-color: rgba(232, 161, 60, 0.18) !important; color: var(--t-warning) !important; }
.alert-danger { background-color: rgba(239, 83, 80, 0.16) !important; color: var(--t-danger) !important; }
.alert-success { background-color: rgba(84, 180, 124, 0.18) !important; color: var(--t-success) !important; }
.alert-info { background-color: rgba(74, 163, 216, 0.16) !important; color: var(--t-info) !important; }

/* Buttons: carattere artigianale */
.btn { border-radius: 10px !important; font-weight: 600; letter-spacing: 0.02em; }
.btn-primary {
    background: linear-gradient(180deg, var(--t-primary), var(--t-primary-strong)) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--t-primary-strong), var(--t-primary-strong)) !important;
    border-color: var(--t-primary-strong) !important;
    box-shadow: var(--t-shadow-lg);
}
.btn-accent, .btn-warning {
    background: linear-gradient(180deg, var(--t-accent), var(--t-accent-strong)) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-accent-text) !important;
}
.btn-outline-secondary, .btn-outline-dark {
    color: var(--t-text) !important;
    border-color: var(--t-border-strong) !important;
    background-color: var(--t-bg-panel) !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
    background-color: var(--t-bg-hover) !important;
    color: var(--t-text) !important;
    border-color: var(--t-accent) !important;
}
.btn-light { background-color: var(--t-bg-muted) !important; color: var(--t-text) !important; border-color: var(--t-border) !important; }
.btn-white { background-color: var(--t-bg-panel) !important; color: var(--t-text) !important; border-color: var(--t-border) !important; }

/* Separatori / hr */
hr { border: 0; border-top: 1px solid var(--t-border); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--t-bg-muted); }
::-webkit-scrollbar-thumb { background: var(--t-border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-accent); }

/* ==================================================================
 *  POS (Cassa / Tavoli / Kitchen / Gestione)
 * ================================================================== */

/* Header POS con patina ambra */
.pos-header {
    background-color: var(--bg-header) !important;
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--t-accent);
}
.pos-header .btn, .pos-header a, .pos-header span, .pos-header i { color: var(--text-main) !important; }

/* Contenuto principale */
.pos-content, .main-content, .content-wrapper {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* Pannelli POS */
.pos-panel, .pos-card, .panel-card, .panel {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--t-radius) !important;
}

/* Footer POS: carbonio crema (patina) */
.pos-footer {
    color: var(--text-main) !important;
    background-color: var(--bg-footer) !important;
    border-top: 2px solid var(--t-accent);
}

/* Sidebar POS */
.pos-sidebar, .sidebar, .pos-offcanvas {
    background-color: var(--bg-header) !important;
    color: var(--text-main) !important;
}
.pos-sidebar { border-right: 1px solid var(--t-accent); }
.pos-sidebar a, .sidebar a, .sidebar .nav-link { color: var(--text-muted) !important; }
.pos-sidebar a:hover, .sidebar a:hover, .pos-sidebar .nav-link.active {
    color: var(--t-accent-strong) !important;
    background-color: var(--bg-hover, var(--t-bg-hover)) !important;
    border-left: 3px solid var(--t-accent);
}

/* Icone con colore forzato chiaro nelle barre idonee */
.pos-header *, .pos-header i.fa-solid, .pos-header i.fas { color: var(--text-main) !important; }

/* ==================================================================
 *  TABELLE TAVOLI (tables_interface)
 * ================================================================== */
.table-container {
    background-color: var(--bg-panel) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--t-radius) !important;
}

/* ==================================================================
 *  SITO PUBBLICO — override hardcoded dark in light mode
 * ================================================================== */
@media (prefers-color-scheme: light) {
    /* Elementi con sfondo nero fisso del sito premium */
    .hero, .navbar, .main-header, .gallery-grid, .menu-card,
    [style*="background: #000"],
    [style*="background:#000"],
    [style*="background: #1a1a1a"],
    [style*="background:#1a1a1a"],
    [style*="background: #080808"],
    [style*="background:#080808"],
    [style*="color: #fff"],
    [style*="color:#fff"],
    [style*="color: #ffffff"],
    [style*="color:#ffffff"] {
        /* Vietato forzare testo bianco su schermo chiaro se lo sfondo non cambia */
    }

    /* Contesti con sfondo nero che devono restare scuri ma leggibili */
    .data-table th { background-color: #2a1f10; color: var(--t-accent); }
    .table-container { background-color: var(--t-bg-panel); }
}

/* ==================================================================
 *  POS INTERFACE — colori inline hardcoded (119 occorrenze)
 *  Corretti qui con attribute selectors per adattarsi al tema
 * ================================================================== */
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background-color: var(--t-bg-panel) !important;
}
[style*="background-color: #000"],
[style*="background-color: #111"],
[style*="background: #000"],
[style*="background: #111"],
[style*="background-color: #1a1a1a"],
[style*="background: #1a1a1a"] {
    background-color: var(--t-bg-header) !important;
    color: var(--t-text) !important;
}
[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: #ffffff"],
[style*="color:#ffffff"],
[style*="color: white"] {
    color: var(--t-text) !important;
}
[style*="color: #000"],
[style*="color:#000"],
[style*="color: #000000"],
[style*="color:#000000"] {
    color: var(--t-text) !important;
}
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #333333"],
[style*="color:#333333"] {
    color: var(--t-text) !important;
}
[style*="color: #666"],
[style*="color:#666"],
[style*="color: #555"],
[style*="color:#555"] {
    color: var(--t-text-muted) !important;
}
[style*="border: 1px solid #ddd"],
[style*="border:1px solid #ddd"],
[style*="border: 1px solid #eee"],
[style*="border:1px solid #eee"],
[style*="border: 1px solid #e0e0e0"],
[style*="border:1px solid #e0e0e0"] {
    border-color: var(--t-border) !important;
}

/* Elementi con testo su sfondo colorato (es. pulsanti) restano invariati:
   NON forziamo color qui per non rompere i bottoni colorati. */

/* ==================================================================
 *  GESTIONE CLIENTI / FIDELIZZAZIONE / SALE / ORDINI
 * ================================================================== */
.cliente-card, .fidelity-card, .customer-card {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow);
}
.cliente-card:hover, .fidelity-card:hover, .customer-card:hover { box-shadow: var(--t-shadow-lg); }

/* ==================================================================
 *  PAGINE ADMIN / SETTINGS
 * ================================================================== */
.admin-panel, .settings-card, .page-header, .content-header {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius) !important;
}
.page-header, .content-header { border-bottom: 2px solid var(--t-accent) !important; }
.stat-card, .metric-card, .dashboard-card {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow);
}
.stat-card .stat-value, .metric-card .metric-value, .stat-value, .metric-value {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: var(--t-primary);
}
.stat-card .stat-title, .metric-card .metric-title, .stat-title, .metric-title {
    color: var(--t-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75em;
}

/* ==================================================================
 *  KDS / KITCHEN
 * ================================================================== */
.kds-order, .kitchen-order, .order-card {
    background-color: var(--t-bg-panel) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
    border-radius: var(--t-radius) !important;
}
.kds-order:hover, .kitchen-order:hover, .order-card:hover { box-shadow: var(--t-shadow-lg); }

/* ==================================================================
 *  SITO PUBBLICO — FOOTER (copertura piena + oro leggibile)
 *  Il footer del sito era scuro fisso (style.css/style3.css) e in
 *  light mode i lati restavano bianchi e l'oro #ffd700 era illeggibile.
 *  Qui il footer diventa un blocco unico che segue il tema, si estende
 *  su tutta la larghezza e rende l'oro leggibile in entrambe le modalità.
 * ================================================================== */
.site-footer {
    background-color: var(--t-bg-body) !important;
    border-top: 2px solid var(--t-accent) !important;
    color: var(--t-text) !important;
    margin-top: 0 !important;
    width: 100%;
}
.site-footer h4,
.site-footer .footer-col h4 {
    color: var(--t-text) !important;
    border-bottom-color: var(--t-accent) !important;
}
/* Scritte oro: in light ambra scura leggibile su crema, in dark ambrato chiaro */
.site-footer .text-gold,
.site-footer [class*="gold"],
.site-footer .gold-text,
.site-footer .footer-hours-list-modern li.today {
    color: var(--t-accent-strong) !important;
}
/* Testo generico footer */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .footer-col,
.site-footer .day,
.site-footer .time,
.site-footer .shift {
    color: var(--t-text) !important;
}
.site-footer .footer-col .day,
.site-footer .footer-hours-list-modern .day,
.site-footer .footer-hours-list-modern li .time {
    /* niente sfondo fisso nero/bianco: si adatta al tema */
    background: transparent !important;
}
.site-footer .contact-info a,
.site-footer .footer-col.links-col a,
.site-footer .legal-links a {
    color: var(--t-text-muted) !important;
}
.site-footer .contact-info a:hover,
.site-footer .footer-col.links-col a:hover,
.site-footer .legal-links a:hover {
    color: var(--t-primary-strong) !important;
}
.site-footer .contact-info i {
    color: var(--t-accent-strong) !important;
}
.site-footer .footer-logo span {
    color: var(--t-text) !important;
}
/* Onda superiore: si fonde col colore di sfondo della pagina (niente bianco) */
.footer-wave .shape-fill {
    fill: var(--t-bg-body) !important;
}
/* Separatori interni coerenti */
.site-footer .footer-content-grid {
    border-bottom-color: var(--t-border) !important;
}
.site-footer .footer-hours-list-modern li .dots,
.site-footer .footer-hours-list-modern .dots {
    border-bottom-color: var(--t-border-strong) !important;
}
/* Modulo newsletter in tema */
.site-footer .footer-newsletter-form .input-group {
    background: var(--t-bg-muted) !important;
    border-color: var(--t-border) !important;
}
.site-footer .footer-newsletter-form input {
    color: var(--t-text) !important;
}
.site-footer .footer-socials a {
    background: var(--t-bg-muted) !important;
    color: var(--t-text) !important;
}
.site-footer .footer-socials a:hover {
    background: var(--t-accent) !important;
    color: var(--t-accent-text) !important;
}

/* Forza anche la variante modern-theme ad allinearsi al brand */
body.modern-theme .site-footer {
    background-color: var(--t-bg-body) !important;
    color: var(--t-text) !important;
    border-top: 2px solid var(--t-accent) !important;
}
body.modern-theme .site-footer h4,
body.modern-theme .site-footer .footer-col h4 {
    color: var(--t-text) !important;
}
body.modern-theme .site-footer a {
    color: var(--t-text-muted) !important;
}
body.modern-theme .site-footer a:hover {
    color: var(--t-accent-strong) !important;
}
body.modern-theme .footer-wave .shape-fill {
    fill: var(--t-bg-body) !important;
}

/* ==================================================================
 *  POPUP INSTALL APP — compatto e moderno
 * ================================================================== */
#installPopup {
    position: fixed !important;
    top: 80px !important;
    bottom: auto !important;
    left: auto !important;
    right: 14px !important;
    transform: none !important;
    z-index: 10001 !important;
    max-width: 260px !important;
    width: 90% !important;
    animation: none !important;
}
#installTab {
    position: fixed !important;
    top: 80px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 10001 !important;
}
#installPopup .popup-content {
    background: rgba(20, 18, 14, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative !important;
    padding: 0.9rem 0.8rem 0.7rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(224, 170, 62, 0.2) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
#installPopup p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #f3ead9 !important;
    line-height: 1.3 !important;
}
#installPopup #installPopupAndroid p:first-child {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
}
#installPopup #installPopupAndroid p:nth-child(2) {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    opacity: 0.55 !important;
    margin-bottom: 6px !important;
}
#installPopup #installButton {
    width: 100% !important;
    padding: 7px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}
#installPopup #installPopupAndroid,
#installPopup #installPopupIOS {
    display: block;
}
#closePopupButton {
    position: absolute !important;
    top: 4px !important;
    right: 5px !important;
    left: auto !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.35) !important;
    font-size: 0.85rem !important;
    padding: 1px 5px !important;
    margin-top: 0 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
#closePopupButton:hover { color: rgba(255,255,255,0.7) !important; background: rgba(255,255,255,0.06) !important; }

/* ==================================================================
 *  SITO PUBBLICO — HERO CTA "Prenota tavolo"
 *  .hero-btn-secondary era "color:white + bordo chiaro traslucido"
 *  (style1.css) → invisibile in light mode. Qui lo si rende leggibile
 *  in ENTRAMBI i temi usando le variabili a tema.
 * ================================================================== */
.hero-btn-secondary {
    color: var(--t-text) !important;
    border: 2px solid var(--t-accent-strong) !important;
    background: transparent !important;
}
.hero-btn-secondary:hover {
    background-color: var(--t-accent) !important;
    color: var(--t-accent-text) !important;
    border-color: var(--t-accent) !important;
}

/* ==================================================================
 *  RESPONSIVE / MOBILE
 * ================================================================== */
@media (max-width: 768px) {
    .pos-header { background-color: var(--bg-header) !important; }
}

/* ==================================================================
 *  SMOOTH THEME TRANSITION (rispetta riduzione movimenti)
 * ================================================================== */
@media (prefers-reduced-motion: no-preference) {
    body, .card, .table, .modal-content, .form-control, .navbar, .dropdown-menu,
    .pos-header, .pos-panel, .table-container, .btn, .stat-card, .order-card {
        transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
}



/* ============================================================
 * FIX CASSA POS - barra top, bottoni, categorie, icone
 * Garantisce contrasto corretto in tutti i contesti
 * ============================================================ */

/* --- Bottoni azione (CASSA/PRECONTO/SVUOTA/etc) --- */
.action-btn { color: #ffffff !important; }
.action-btn.ab-dark { background: #3a4556 !important; border-color: #3a4556 !important; }
.action-btn.ab-red { background: #c0392b !important; border-color: #c0392b !important; }
.action-btn.ab-blue { background: #2b6cb0 !important; border-color: #2b6cb0 !important; }
.action-btn.ab-teal { background: #2d8f7b !important; border-color: #2d8f7b !important; }
.action-btn.ab-grey { background: #5b6b7c !important; border-color: #5b6b7c !important; }

/* --- Barra top POS: sfondo scuro, tutto testo bianco --- */
.pos-top-bar {
    background: #3a4556 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #d4a843 !important;
}
/* Badge tavolo: sfondo chiaro, testo scuro, ben visibile */
.pos-top-bar .table-badge {
    background: #ffffff !important;
    color: #1f2933 !important;
    font-size: 2.5vh !important;
    padding: 0.5vh 2vh !important;
    border-radius: 4px !important;
}
/* Contatore coperto: forza testo bianco (sovvrascrive attribute selector) */
.pos-top-bar .people-counter-wrapper span,
.pos-top-bar .people-counter-wrapper div,
.pos-top-bar #people-count {
    color: #ffffff !important;
}
.pos-top-bar .people-counter-wrapper span:first-child {
    color: #b0bec5 !important;
}
/* Bottoni +/- coperto: giallo su sfondo scuro */
.pos-top-bar .people-counter-wrapper button {
    color: #ffcc80 !important;
}
/* Bottoni con icone Font Awesome: bianche su sfondo scuro */
.pos-top-bar .btn-exit {
    color: #ffffff !important;
    background: #455a64 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.pos-top-bar .btn-exit i {
    color: #ffffff !important;
}
/* Bottoni U1/U2/U3/U4: blu con testo bianco */
.pos-top-bar .btn-exit[style*="1e88e5"] {
    background: #1e88e5 !important;
    color: #ffffff !important;
}
/* Status connessione e TAVOLI link */
.pos-top-bar #conn-status,
.pos-top-bar .btn-turni,
.pos-top-bar .btn-tavoli {
    color: #ffffff !important;
}
/* Barra laterale: sfondo scuro, testo bianco */
.pos-sidebar-left {
    background: #3a4556 !important;
    color: #ffffff !important;
}
/* Carrello: header scuro */
.cart-header-total,
.cart-course-header {
    background: #3a4556 !important;
    color: #ffffff !important;
}

/* --- Categorie menu: testo bianco --- */
.cat-btn { color: #ffffff !important; }
.cat-btn.active { color: #2b6cb0 !important; background-color: #ffffff !important; }

/* --- Dark mode --- */
@media (prefers-color-scheme: dark) {
    .action-btn.ab-dark { background: #2b3346 !important; }
    .pos-top-bar { background: #232b3a !important; }
    .pos-top-bar .table-badge { background: #e8ecf1 !important; color: #1f2933 !important; }
    .pos-sidebar-left { background: #232b3a !important; }
    .cat-btn { color: #e8ecf1 !important; }
    .cat-btn.active { color: #0f1520 !important; background-color: #ffffff !important; }
}

/* ============================================================
 * TABLE BADGE - stile pulito su barra scura
 * ============================================================ */
.pos-top-bar .table-badge {
    background: rgba(255,255,255,0.95) !important;
    color: #1a1a2e !important;
    padding: 0.4vh 1.8vh !important;
    border-radius: 6px !important;
    font-size: 2.2vh !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    border: none !important;
}

/* ============================================================
 * PEOPLE COUNTER - stile compatto e leggibile
 * ============================================================ */
.pos-top-bar .people-counter-wrapper {
    background: #2c3a4a !important;
    border: 1px solid #4a5c6e !important;
    border-radius: 20px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
}
.pos-top-bar .people-counter-wrapper button {
    color: #ffc857 !important;
    font-weight: 900 !important;
    font-size: 2.2vh !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.pos-top-bar .people-counter-wrapper div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 28px !important;
}
.pos-top-bar .people-counter-wrapper span {
    line-height: 1.1 !important;
}
.pos-top-bar .people-counter-wrapper span:first-child {
    color: #8fa4b5 !important;
    font-size: 1vh !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}
.pos-top-bar #people-count {
    color: #ffffff !important;
    font-size: 2vh !important;
    font-weight: 700 !important;
}

/* ============================================================
 * TABLE BADGE - stile rinnovato, ben visibile su barra scura
 * ============================================================ */
.pos-top-bar .table-badge {
    background: linear-gradient(135deg, #d4a843 0%, #b8922e 100%) !important;
    color: #1a1a2e !important;
    padding: 0.6vh 2.2vh !important;
    border-radius: 8px !important;
    font-size: 2.4vh !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15) !important;
    min-width: 60px !important;
    text-align: center !important;
}