/* ---- THEME TOKENS (light) ---- */
    :root {
      --sidebar-w: 240px;
      --sb-bg: #1a2535;
      --sb-hover: #243042;
      --accent: #3b82f6;

      --bg:           #f1f5f9;
      --surface:      #ffffff;
      --surface2:     #f8fafc;
      --border:       #e2e8f0;
      --text:         #1e293b;
      --text-muted:   #475569;
      --row-hover:    #f8fafc;
      --month-tot-bg: #eff6ff;
      --month-tot-fg: #1d4ed8;
      --gpoz:         #f0fdf4;
      --gneg:         #fff1f2;
      --note-bg:      #fef9c3;
      --note-border:  #fde047;
      --hist-border:  #f1f5f9;

      --bp-bg: #dcfce7; --bp-fg: #166534;
      --bc-bg: #dbeafe; --bc-fg: #1e40af;
      --ba-bg: #ccfbf1; --ba-fg: #0f766e;
      --bl-bg: #fef3c7; --bl-fg: #92400e;
      --bk-bg: #ede9fe; --bk-fg: #5b21b6;
      --bi-bg: #e0f2fe; --bi-fg: #075985;
      --bo-bg: #f1f5f9; --bo-fg: #94a3b8;
    }

    /* ---- THEME TOKENS (dark) ---- */
    [data-bs-theme="dark"] {
      --bg:           #0f172a;
      --surface:      #1e293b;
      --surface2:     #243042;
      --border:       #334155;
      --text:         #e2e8f0;
      --text-muted:   #94a3b8;
      --row-hover:    #243042;
      --month-tot-bg: #1e3558;
      --month-tot-fg: #93c5fd;
      --gpoz:         #052e16;
      --gneg:         #3b0714;
      --note-bg:      #292306;
      --note-border:  #5a4100;
      --hist-border:  #334155;

      --bp-bg: #14532d; --bp-fg: #86efac;
      --bc-bg: #1e3a5f; --bc-fg: #93c5fd;
      --ba-bg: #042f2e; --ba-fg: #5eead4;
      --bl-bg: #451a03; --bl-fg: #fcd34d;
      --bk-bg: #2e1065; --bk-fg: #c4b5fd;
      --bi-bg: #082f49; --bi-fg: #7dd3fc;
      --bo-bg: #334155; --bo-fg: #94a3b8;
    }

    * { box-sizing: border-box; }
    body { background: var(--bg); font-family: 'Segoe UI', system-ui, sans-serif; margin: 0; overflow-x: hidden; color: var(--text); }

    /* ---- SIDEBAR ---- */
    #sidebar {
      width: var(--sidebar-w); min-height: 100vh;
      background: var(--sb-bg); position: fixed; top: 0; left: 0; z-index: 1000;
      display: flex; flex-direction: column;
    }
    #sidebar .logo { padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
    #sidebar .logo-title { color: #fff; font-weight: 700; font-size: 15px; margin: 0; }
    #sidebar .logo-sub { color: rgba(255,255,255,.4); font-size: 11px; }
    #sidebar nav a {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 16px; color: rgba(255,255,255,.6); text-decoration: none;
      font-size: 13.5px; border-left: 3px solid transparent; transition: all .15s;
    }
    #sidebar nav a:hover, #sidebar nav a.active {
      background: var(--sb-hover); color: #fff; border-left-color: var(--accent);
    }
    #sidebar nav a i { font-size: 15px; width: 18px; flex-shrink: 0; }
    #sidebar .sb-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); }
    #sidebar .sb-footer small { color: rgba(255,255,255,.3); font-size: 11px; }

    /* ---- MAIN ---- */
    #main { margin-left: var(--sidebar-w); min-height: 100vh; }
    .topbar {
      background: var(--surface); padding: 11px 24px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 100;
    }
    .topbar-title { font-weight: 600; font-size: 15px; color: var(--text); }
    .content { padding: 24px; }

    /* ---- CARDS ---- */
    .card-stat {
      background: var(--surface); border-radius: 12px; padding: 18px 20px;
      border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .card-stat .icon-wrap {
      width: 42px; height: 42px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .card-stat .big-num { font-size: 26px; font-weight: 700; line-height: 1.1; }

    /* ---- TABLE ---- */
    .table-wrap { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
    .table-wrap table { margin: 0; }
    .table-wrap table tr:last-child td { border-bottom: none; }
    .month-hdr td { background: var(--surface2) !important; font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
    .month-tot td { background: var(--month-tot-bg) !important; font-weight: 600; font-size: 12px; color: var(--month-tot-fg); }
    tr.ticket-row { cursor: pointer; }
    tr.ticket-row:hover td { background: var(--row-hover) !important; }

    /* ---- BADGES ---- */
    .badge-pagato    { background: var(--bp-bg); color: var(--bp-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-chiuso    { background: var(--bc-bg); color: var(--bc-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-aperto      { background: var(--ba-bg); color: var(--ba-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-lavorazione { background: var(--bl-bg); color: var(--bl-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-consegnato{ background: var(--bk-bg); color: var(--bk-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-incassato { background: var(--bi-bg); color: var(--bi-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-off       { background: var(--bo-bg); color: var(--bo-fg); font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }

    /* ---- TOTALI MESE CHIP ---- */
    .month-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
    .month-chip .chip-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
    .month-chip .chip-val   { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

    /* ---- FORM ---- */
    .form-card { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); padding: 20px 22px; }
    .section-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
    .guadagno-box { background: var(--gpoz); border-radius: 8px; padding: 12px 14px; }
    .guadagno-box.neg { background: var(--gneg); }

    /* ---- CHART WRAP ---- */
    .chart-card { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); padding: 20px; }

    /* ---- CUSTOM FIELDS ---- */
    .cf-row { display: flex; gap: 8px; margin-bottom: 8px; }

    /* ---- PROGRESS BAR (analisi) ---- */
    .progress { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
    .progress-bar { background: var(--accent); }

    /* ---- TOAST ---- */
    #toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
    .toast-msg { background:var(--surface2); color:var(--text); border:1px solid var(--border); padding:10px 16px; border-radius:8px; font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,.15); display:flex; align-items:center; gap:8px; animation:toastIn .2s ease; pointer-events:auto; }
    .toast-msg.success { border-left:4px solid #22c55e; }
    .toast-msg.error   { border-left:4px solid #ef4444; }
    @keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

    /* ---- TOPBAR SEARCH ---- */
    .topbar-search input { font-size:13px; }

    /* ---- STATUS TABS ---- */
    .stato-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
    .stato-tabs .btn { font-size:12px; padding:4px 10px; }

    /* ---- HISTORY ---- */
    .history-entry { border-bottom:1px solid var(--hist-border); padding:8px 0; }
    .history-entry:last-child { border-bottom:none; }

    /* ---- STATO BADGE TOGGLE ---- */
    .stato-toggle {
      border: none; cursor: pointer; font-weight: 600; font-size: 12px;
      padding: 5px 14px; border-radius: 20px; transition: filter .15s;
    }
    .stato-toggle:hover { filter: brightness(.88); }

    /* ---- MOBILE ---- */
    #sidebar-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.45); z-index: 999;
    }
    #sidebar-backdrop.show { display: block; }
    #hamburger { display: none; }

    @media (max-width: 768px) {
      #sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1000;
      }
      #sidebar.open { transform: translateX(0); }
      #main { margin-left: 0; }
      .content { padding: 12px; }
      #hamburger { display: flex; align-items: center; justify-content: center; }
      .topbar-search { display: none !important; }
      .topbar { padding: 10px 14px; gap: 8px; }
      .topbar-title { font-size: 14px; }
      .month-group-mobile {
        margin-bottom: 8px;
      }
      .cards-container {
        background: var(--surface2); border-radius: 12px; padding: 4px;
      }
      .ticket-card {
        background: var(--bs-body-bg); border-radius: 10px; border: 1px solid var(--border);
        padding: 12px 14px; margin: 6px; cursor: pointer; transition: background .1s;
      }
      .ticket-card:active { background: var(--row-hover); }
      .month-label-mobile {
        font-size: 11px; font-weight: 700; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px; padding: 8px 8px 6px;
      }
    }

    /* ---- LOGIN PAGE ---- */
    #login-page {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      background: var(--bg);
    }
    .login-card {
      background: var(--surface); border-radius: 16px; border: 1px solid var(--border);
      padding: 40px 36px; width: 100%; max-width: 380px;
      box-shadow: 0 4px 24px rgba(0,0,0,.08);
    }
    .login-card .logo-icon { font-size: 36px; color: #3b82f6; }

    /* ---- NOTE INTERNE ---- */
    .note-interne-box { background: var(--note-bg); border: 1px solid var(--note-border); border-radius: 8px; padding: 12px 14px; }

    /* ---- THEME TOGGLE ---- */
    #theme-btn { font-size: 11px; }

    /* ---- EURO ALIGNMENT ---- */
    .month-tot td.text-end,
    tr.ticket-row td.text-end {
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* ---- DARK MODE OVERRIDES ---- */
    [data-bs-theme="dark"] .table-light {
      --bs-table-color:         var(--text);
      --bs-table-bg:            var(--surface2);
      --bs-table-border-color:  var(--border);
      --bs-table-striped-color: var(--text);
      --bs-table-striped-bg:    var(--surface2);
      --bs-table-hover-color:   var(--text);
      --bs-table-hover-bg:      var(--row-hover);
      --bs-table-active-color:  var(--text);
      --bs-table-active-bg:     var(--row-hover);
    }