:root{
  --bg:#070b14;

  --panel:rgba(18,26,43,.86);
  --card:rgba(22,31,51,.90);
  --card-soft:rgba(27,38,68,.92);

  --text:#f5f8ff;
  --muted:#9aa8d1;
  --line:rgba(255,255,255,.12);

  --accent:#4f8cff;
  --accent2:#7c4dff;

  --green:#22c55e;
  --purple:#a855f7;
  --danger:#ef4444;
  --warn:#f59e0b;

  --glow:rgba(79,140,255,.35);
  --glow2:rgba(124,77,255,.25);

  --radius:22px;
  --radius2:26px;

  --shadow:0 24px 80px rgba(0,0,0,.55);
  --shadow2:0 40px 140px rgba(0,0,0,.75);
}

[data-theme="light"]{
  --bg:#f2f5fb;

  --panel:rgba(255,255,255,.90);
  --card:rgba(255,255,255,.95);
  --card-soft:rgba(243,246,251,.98);

  --text:#0f172a;
  --muted:#5b677f;
  --line:rgba(0,0,0,.08);

  --accent:#2563eb;
  --accent2:#7c3aed;

  --glow:rgba(37,99,235,.18);
  --glow2:rgba(124,58,237,.14);

  --shadow:0 18px 60px rgba(15,23,42,.12);
  --shadow2:0 30px 90px rgba(15,23,42,.18);
}

/* ================= RESET ================= */
*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(79,140,255,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(124,77,255,.12), transparent 60%),
    radial-gradient(900px 700px at 40% 120%, rgba(34,197,94,.08), transparent 55%),
    var(--bg);
}
button,input{ font:inherit; }
a{ color:inherit; }

/* ================= LAYOUT ================= */
.app{ display:flex; min-height:100vh; }

/* ================= SIDEBAR ================= */
.side{
  width:260px;
  padding:18px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    var(--panel);
  border-right:1px solid var(--line);
  backdrop-filter: blur(24px);
  position:sticky;
  top:0;
  height:100vh;
}
.side-foot{ display:none; }

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:6px 4px 16px;
  margin-bottom:10px;
}
.logo{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:1000;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 30px var(--glow);
}
.t1{ font-weight:950; letter-spacing:.2px; }
.t2{ font-size:12px; color:var(--muted); margin-top:2px; }

.nav{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }

.tab{
  width:100%;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  text-align:left;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.tab.active{
  background:linear-gradient(135deg, rgba(79,140,255,.42), rgba(124,77,255,.30));
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 18px 60px rgba(79,140,255,.18);
}

/* ================= MAIN ================= */
.main{
  flex:1;
  min-width:0;
  padding:24px 26px 34px;
}

/* ================= TOP BAR ================= */
.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}
h1{ margin:0; font-size:32px; letter-spacing:-.3px; }
.crumb{ font-size:12px; color:var(--muted); margin-top:6px; }

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ================= BUTTONS ================= */
.btn{
  padding:11px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  box-shadow:0 14px 50px rgba(0,0,0,.25);
}
.btn.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 28px var(--glow), 0 16px 60px rgba(124,77,255,.18);
}
.btn.primary:hover{
  box-shadow:0 0 34px var(--glow), 0 18px 70px rgba(124,77,255,.22);
}
.btn.ghost{
  background:transparent;
}
.btn:active{ transform:translateY(0px) scale(.99); }

/* ================= VIEWS ================= */
.view{ display:none; }
.view.active{ display:block; }

/* ================= GENERIC CARD ================= */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  backdrop-filter: blur(24px);
}
.card-pad{ padding:22px; }

/* ================= DASHBOARD: ACCOUNT HERO ================= */
.account-hero{
  padding:22px;
  border-radius:30px;
  background:
    radial-gradient(700px 180px at 20% 0%, rgba(79,140,255,.18), transparent 65%),
    radial-gradient(700px 180px at 90% 0%, rgba(124,77,255,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  backdrop-filter: blur(26px);
  margin-bottom:22px;
}

.account-hero-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.account-avatar{
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  font-size:26px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 28px var(--glow);
}
.account-name{ font-size:18px; font-weight:950; }
.account-status{ font-size:12px; color:var(--green); font-weight:900; margin-top:2px; }

.account-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.account-item{
  padding:16px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
}
.account-item span{
  display:block;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.account-item b{
  font-size:14px;
  font-weight:950;
}
.account-item .ok{ color:var(--green); }

/* ================= DASHBOARD: KPI ================= */
/* KPI GRID: ora regge 3, 4, 5 box senza sballare */
.dash-kpi {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* opzionale: per evitare altezze diverse */
.kpi-card {
  height: 100%;
}
.kpi-card{
  padding:18px 18px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter: blur(24px);
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.kpi-card::after{
  content:"";
  position:absolute;
  inset:-40% -50% auto -50%;
  height:120%;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
  pointer-events:none;
}
.kpi-icon{
  width:50px;height:50px;border-radius:18px;
  display:grid;place-items:center;
  font-size:24px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 22px var(--glow);
  flex:0 0 auto;
}
.kpi-text span{
  display:block;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.kpi-text b{
  font-size:30px;
  font-weight:1000;
  letter-spacing:-.4px;
}
.kpi-blue{ box-shadow:0 0 0 1px rgba(79,140,255,.28), var(--shadow); }
.kpi-green{ box-shadow:0 0 0 1px rgba(34,197,94,.24), var(--shadow); }
.kpi-purple{ box-shadow:0 0 0 1px rgba(168,85,247,.22), var(--shadow); }

/* ================= DASHBOARD: STATS BOX ================= */
.dash-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.stats-box{
  padding:18px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    var(--card-soft);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter: blur(22px);
}
.stats-h{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:14px;
}
/* STAT GRID: 3 o 4 voci senza rompere layout */
.stats-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}


.stats-grid div{
  padding:14px 12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  text-align:center;
}
.stats-grid b{
  display:block;
  font-size:20px;
  font-weight:1000;
  letter-spacing:-.3px;
}
.stats-grid span{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

/* ================= LISTS (CREDITI / ABBONAMENTI) ================= */
.section-title{
  font-weight:950;
  margin:18px 0 12px;
  letter-spacing:-.2px;
}

.list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(420px,1fr));
  gap:18px;
  margin-top:14px;
}

/* CARD CREDITI / ABBONAMENTI — REWORK TOTALE */
.item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:18px;
  align-items:center;
  padding:20px 22px;
  border-radius:26px;
  background:
    radial-gradient(520px 140px at 15% 0%, rgba(79,140,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    var(--card-soft);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter: blur(22px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow2);
}

/* ICONA A SINISTRA */
.item::before{
  content:"⚡";
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:24px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  box-shadow:0 0 26px var(--glow);
}

/* CONTENUTO CENTRALE */
.item b{
  display:block;
  font-size:16px;
  font-weight:1000;
  letter-spacing:-.2px;
}
.item .muted{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* COLONNA DESTRA */
.item-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  min-width:140px;
}

/* PREZZO */
.item-right .price{
  font-size:20px;
  font-weight:1000;
  letter-spacing:-.3px;
}

/* AZIONI */
.actions2{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.small{
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  color:var(--text);
  font-weight:950;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.small:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}

/* DELETE */
.small[data-del-sub],
.small[data-del-cred]{
  border-color:rgba(239,68,68,.45);
  color:#fecaca;
}
.small[data-del-sub]:hover,
.small[data-del-cred]:hover{
  background:rgba(239,68,68,.20);
}

/* ================= MOBILE ================= */
@media (max-width:760px){
  .list{
    grid-template-columns:1fr;
  }
  .item{
    grid-template-columns:1fr;
    gap:14px;
  }
  .item::before{
    margin-bottom:6px;
  }
  .item-right{
    align-items:flex-start;
    text-align:left;
  }
  .actions2{
    justify-content:flex-start;
  }
}


/* ================= MODAL (POPUP PRO) ================= */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,16,.70);
  backdrop-filter: blur(16px);
  z-index:9999;
}
.modal.hidden{ display:none; }

.modal-box{
  width:560px;
  max-width:94vw;
  border-radius:28px;
  border:1px solid var(--line);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(79,140,255,.20), transparent 60%),
    radial-gradient(700px 220px at 90% 0%, rgba(124,77,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    var(--panel);
  box-shadow:var(--shadow2);
  backdrop-filter: blur(26px);
  padding:22px 22px 20px;
  position:relative;
  animation:modalIn .22s ease;
}
@keyframes modalIn{
  from{ transform:translateY(16px) scale(.98); opacity:0; }
  to{ transform:none; opacity:1; }
}

.modal-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.modal-h h3{
  margin:0;
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.2px;
}

/* Close button: SOLO nei modal */
.modal .icon{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.modal .icon:hover{
  transform:rotate(90deg);
  background:rgba(255,255,255,.16);
}

/* ================= FORMS ================= */
.grid3{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

label{
  display:block;
  font-size:11px;
  font-weight:950;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}

input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  color:var(--text);
  outline:none;
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
input:focus{
  border-color:rgba(79,140,255,.45);
  box-shadow:0 0 0 4px rgba(79,140,255,.16);
  background:rgba(255,255,255,.12);
}

.row{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
  flex-wrap:wrap;
}

/* ================= SAFETY: niente X fantasma fuori dal modal ================= */
/* Non uccide la X nei modal, perché lì è .modal .icon (più specifico). */
.main > .icon,
.view > .icon{
  display:none !important;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .dash-kpi{ grid-template-columns:1fr; }
  .dash-stats{ grid-template-columns:1fr; }
  .account-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .side{ width:220px; }
}
@media (max-width: 760px){
  .app{ flex-direction:column; }
  .side{
    width:100%;
    height:auto;
    position:relative;
  }
  .top{ flex-direction:column; align-items:flex-start; }
  .top-actions{ justify-content:flex-start; }
  .item{
    grid-template-columns:1fr;
    gap:12px;
  }
  .item-right{
    min-width:0;
    text-align:left;
  }
  .actions2{ justify-content:flex-start; }
}
/* ================= FIX: RIMUOVE BOX ESTERNO LISTE ================= */
.view .card:has(.list){
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
}

.view .card:has(.list) .card-pad{
  padding:0;
}
/* OVERRIDE FORZATO stats grid (vince su regole precedenti) */
.dash-stats .stats-box .stats-grid {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  align-items: stretch !important;
}

/* Se i "quadretti" interni sono forzati a width fissa o flex */
.dash-stats .stats-box .stats-grid>div {
  width: auto !important;
  min-width: 0 !important;
}
.list-tools {
  margin: 12px 0 14px;
}

.search {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  outline: none;
}

.search::placeholder {
  color: rgba(255, 255, 255, .55);
}

.search:focus {
  border-color: rgba(99, 102, 241, .55);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .18);
}
/* ============================
   BM LAYOUT (NEW SIDEBAR+TOPBAR)
   incolla in fondo a theme.css
============================ */
.bm-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 260px 1fr;
  background: radial-gradient(1200px 600px at 30% 10%, rgba(99,102,241,.22), transparent 55%),
              radial-gradient(900px 500px at 80% 0%, rgba(168,85,247,.18), transparent 50%),
              #070b14;
}

/* Sidebar */
.bm-sidebar{
  position:sticky; top:0;
  height:100vh;
  padding:18px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-right:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bm-brand{ display:flex; gap:12px; align-items:center; padding:6px 8px; }
.bm-brand-logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color:#fff; font-weight:900;
  box-shadow: 0 10px 22px rgba(99,102,241,.25);
}
.bm-brand-name{ color:#fff; font-weight:800; letter-spacing:.2px; }
.bm-brand-sub{ color: rgba(255,255,255,.65); font-size:12px; margin-top:2px; }

.bm-profile{
  display:flex; gap:12px; align-items:center;
  padding:12px;
  border-radius:18px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}
.bm-profile-avatar{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(168,85,247,.20));
  border:1px solid rgba(255,255,255,.10);
}
.bm-profile-user{ color:#fff; font-weight:800; line-height:1.1; }
.bm-profile-badges{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.bm-badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}
.bm-badge-green{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
  color: #86efac;
}

.bm-menu{ display:flex; flex-direction:column; gap:10px; padding:0 6px; }
.bm-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  border-radius:16px;
  text-decoration:none;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.bm-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.bm-item.is-active{
  background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(168,85,247,.18));
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 12px 26px rgba(99,102,241,.18);
}
.bm-ico{ width:22px; display:inline-grid; place-items:center; opacity:.95; }
.bm-logout{ margin-top:6px; }
.bm-item-danger{
  width:100%;
  justify-content:flex-start;
  cursor:pointer;
  background: rgba(255,255,255,.04);
}
.bm-item-danger:hover{
  border-color: rgba(239,68,68,.35);
}

.bm-sidebar-foot{ margin-top:auto; padding:0 6px; }
.bm-pill{
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-weight:700;
  font-size:12px;
}

/* Main + topbar */
.bm-main{ padding:18px 20px; }
.bm-topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px;
  padding:6px 4px 14px;
}
.bm-title{
  margin:0;
  color:#fff;
  font-size:34px;
  letter-spacing:.2px;
}
.bm-sub{ color: rgba(255,255,255,.6); margin-top:4px; }
.bm-top-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.bm-content{ padding-top:10px; }

/* Responsive: sidebar collapsa */
@media (max-width: 980px){
  .bm-shell{ grid-template-columns: 1fr; }
  .bm-sidebar{
    position:relative; height:auto;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
}
/* --- Sidebar icons (modern svg) --- */
.bm-ico{
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  opacity:.95;
}
.bm-ico svg{
  width:20px;
  height:20px;
  fill: currentColor;
  display:block;
  opacity:.95;
}

/* rende le icone più “premium” nei pulsanti attivi */
.bm-item.is-active .bm-ico svg{
  opacity:1;
  filter: drop-shadow(0 8px 14px rgba(99,102,241,.25));
}
/* ===== DASH (central) – glass + layout stabile ===== */

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
}

/* Header centrale */
.dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  margin: 10px 0 16px;
}
.dash-head-left{display:flex;align-items:center;gap:14px;}
.dash-avatar{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(99,102,241,.9), rgba(139,92,246,.9));
  box-shadow: 0 10px 30px rgba(99,102,241,.25);
}
.dash-hello{font-size:16px;font-weight:700;line-height:1.1}
.dash-sub{opacity:.75;font-size:13px;margin-top:2px}
.dash-head-right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.dash-badge{
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  font-size:12px;font-weight:700;
}
.dash-badge.ok{color:#4ade80}
.dash-badge.soft{opacity:.85}

/* KPI grid – regge 4 senza “sballare” */
.dash-kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  margin: 8px 0 16px;
}
@media (max-width: 1100px){
  .dash-kpi-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .dash-kpi-grid{grid-template-columns: 1fr;}
}

/* KPI card coerenti */
.kpi-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  min-height: 86px;
}
.kpi-icon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-size:20px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.kpi-label{opacity:.78;font-size:13px;font-weight:700}
.kpi-value{font-size:20px;font-weight:900;margin-top:2px;letter-spacing:.2px}

/* (solo micro-accenti) */
.kpi-blue{box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.12);}
.kpi-green{box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(34,197,94,.10);}
.kpi-purple{box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(168,85,247,.12);}
.kpi-amber{box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(245,158,11,.12);}

/* Stats row */
.dash-stats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 980px){
  .dash-stats-grid{grid-template-columns: 1fr;}
}

.stats-box{padding:16px 16px}
.stats-h{
  font-size:12px;
  letter-spacing:.18em;
  opacity:.75;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:12px;
}

/* Tiles dentro stats: 4 elementi ordinati e “glass” light */
.stats-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px){
  .stats-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .stats-grid{grid-template-columns: 1fr;}
}

.stat-tile{
  padding:14px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-align:center;
}
.stat-tile b{
  display:block;
  font-size:18px;
  font-weight:900;
}
.stat-tile span{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.75;
}
/* =========================
   THEME TOKENS
========================= */
:root{
  --bg0:#060A14;
  --bg1:#070B18;
  --bg-grad: radial-gradient(1000px 600px at 20% 0%, rgba(99,102,241,.22), transparent 60%),
             radial-gradient(900px 500px at 80% 0%, rgba(168,85,247,.18), transparent 60%),
             radial-gradient(800px 500px at 60% 80%, rgba(34,211,238,.10), transparent 60%),
             linear-gradient(180deg, var(--bg0), var(--bg1));
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.68);

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --chip: rgba(255,255,255,.08);
  --chip-stroke: rgba(255,255,255,.10);

  --accent: #6D7CFF;
  --accent2:#A855F7;
}

/* LIGHT THEME */
html[data-theme="light"]{
  --bg0:#F6F7FB;
  --bg1:#EEF1F8;
  --bg-grad: radial-gradient(1100px 650px at 20% 0%, rgba(99,102,241,.18), transparent 60%),
             radial-gradient(900px 520px at 80% 0%, rgba(168,85,247,.12), transparent 60%),
             radial-gradient(800px 520px at 60% 85%, rgba(34,211,238,.10), transparent 60%),
             linear-gradient(180deg, var(--bg0), var(--bg1));
  --text:#0D1426;
  --muted:rgba(13,20,38,.62);

  --glass: rgba(255,255,255,.70);
  --glass2: rgba(255,255,255,.82);
  --stroke: rgba(13,20,38,.10);

  --shadow: 0 18px 50px rgba(13,20,38,.12);
  --shadow2: 0 10px 30px rgba(13,20,38,.10);

  --chip: rgba(13,20,38,.06);
  --chip-stroke: rgba(13,20,38,.10);
}

/* =========================
   APPLY TOKENS (GLOBAL)
========================= */
html, body{
  background: var(--bg-grad);
  color: var(--text);
}

/* testi secondari */
.muted, .crumb, .t2{
  color: var(--muted) !important;
}

/* glass panels */
.card, .side, .topbar, .account-hero, .kpi-card, .stats-box, .modal-box{
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}

/* pulsanti */
.btn{
  background: var(--chip);
  border: 1px solid var(--chip-stroke);
  color: var(--text);
}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 0;
  color: #fff;
}
.btn.ghost{
  background: transparent;
  border: 1px solid var(--chip-stroke);
  color: var(--text);
}

/* inputs (compresa search in light) */
input, .search{
  background: var(--glass2);
  border: 1px solid var(--stroke);
  color: var(--text);
}
input::placeholder, .search::placeholder{
  color: var(--muted);
}
/* ====== BASE / RESET ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* ====== THEME TOKENS ====== */
html[data-theme="dark"]{
  --bg0:#060a13;
  --bg1:rgba(10,14,28,.75);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --txt:#eaf0ff;
  --muted:rgba(234,240,255,.66);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.45);
  --accent1:#7c3aed;
  --accent2:#22d3ee;
  --ok:#4ade80;
  --warn:#f59e0b;
  --radius:22px;
}

html[data-theme="light"]{
  --bg0:#f3f6ff;
  --bg1:rgba(255,255,255,.75);
  --card:rgba(15,23,42,.06);
  --card2:rgba(15,23,42,.08);
  --stroke:rgba(15,23,42,.12);
  --stroke2:rgba(15,23,42,.18);
  --txt:#0b1220;
  --muted:rgba(11,18,32,.65);
  --shadow:0 18px 60px rgba(2,6,23,.12);
  --glow:0 0 0 1px rgba(2,6,23,.06), 0 12px 40px rgba(2,6,23,.10);
  --accent1:#6d28d9;
  --accent2:#0ea5e9;
  --ok:#16a34a;
  --warn:#b45309;
  --radius:22px;
}

/* ====== BACKGROUND ====== */
body{
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(34,211,238,.25), transparent 55%),
    radial-gradient(1000px 700px at 60% 85%, rgba(124,58,237,.12), transparent 60%),
    var(--bg0);
}

/* ====== LAYOUT ====== */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:280px;flex:0 0 280px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-right:1px solid var(--stroke);
  backdrop-filter: blur(14px);
}
.main{flex:1;min-width:0;padding:18px 22px 26px}

/* ====== SIDEBAR ====== */
.sb-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.sb-logo{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:white;font-weight:900;
  box-shadow:0 10px 30px rgba(124,58,237,.25);
}
.sb-title{font-weight:800;line-height:1.1}
.sb-sub{color:var(--muted);font-size:12px;margin-top:2px}

.sb-profile{
  display:flex;gap:12px;align-items:center;
  padding:12px;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--glow);
  margin:12px 0 14px;
}
.sb-avatar{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.18));
  border:1px solid var(--stroke);
}
.sb-user{font-weight:800}
.sb-meta{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.sb-meta-sep{color:var(--muted)}
.sb-pill{
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  font-size:12px;color:var(--txt);
}
.sb-pill.ok{
  border-color:rgba(74,222,128,.35);
  color:var(--ok);
  background:rgba(74,222,128,.10);
}
.sb-lic{margin-top:6px;color:var(--muted);font-size:12px}
.sb-lic b{color:var(--txt)}

.sb-nav{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.sb-item{
  width:100%;
  display:flex;gap:10px;align-items:center;
  padding:12px 12px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--stroke);
  color:var(--txt);
  text-decoration:none;
  box-shadow:var(--glow);
  cursor:pointer;
}
.sb-item:hover{border-color:var(--stroke2)}
.sb-item.active{
  background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(34,211,238,.12));
  border-color:rgba(124,58,237,.35);
}
.sb-ic{
  width:30px;height:30px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
}

.sb-logout{margin-top:4px}
.sb-logout .sb-item{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.20)}
.sb-logout .sb-item:hover{border-color:rgba(245,158,11,.35)}

.sb-foot{margin-top:auto;padding-top:12px}
.sb-foot-note{color:var(--muted);font-size:12px}

/* ====== HEADER (ATLANTIX-LIKE) ====== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
}
.topbar-title{font-size:38px;font-weight:900;letter-spacing:-.02em}
.topbar-sub{color:var(--muted);margin-top:2px;font-size:13px}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ====== BUTTONS ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--txt);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{border-color:var(--stroke2)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  border-color:transparent;
  color:white;
}
.btn.ghost{
  background:transparent;
  border-color:var(--stroke);
}

/* ====== MAIN BODY ====== */
.main-body{padding-top:16px}

/* ====== DASHBOARD CONTENT ====== */
.page{display:block}
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
.kpi-card{
  display:flex;gap:12px;align-items:center;
  padding:16px;
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  min-height:82px;
}
.kpi-ic{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.18));
  border:1px solid var(--stroke);
}
.kpi-label{color:var(--muted);font-size:13px;font-weight:700}
.kpi-value{font-size:22px;font-weight:900;margin-top:2px}

.stats-wrap{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* uguali */
  gap:14px;
  margin-top:14px;
}
.stats-box{
  padding:16px;
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
}
.stats-h{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:12px;
}
.stats-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items:stretch;
}
/* responsive: quando non ci sta, scende */
@media (max-width: 1100px){
  .stats-wrap{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns: 1fr; }
}
.stat{
  padding:14px;
  border-radius:18px;
  background:var(--card2);
  border:1px solid var(--stroke);
}
.stat b{display:block;font-size:20px;font-weight:900}
.stat span{display:block;color:var(--muted);margin-top:4px;font-size:12px}

/* ====== MODAL (lasciato compatibile col tuo JS) ====== */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:50}
.modal.hidden{display:none}
.modal-box{
  width:min(720px,92vw);
  border-radius:22px;
  background:var(--bg1);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  padding:16px;
}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.icon{background:transparent;border:1px solid var(--stroke);color:var(--txt);border-radius:12px;padding:8px 10px;cursor:pointer}

/* ====== RESPONSIVE ====== */
@media (max-width: 1100px){
  .kpi-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .stats-wrap{grid-template-columns: 1fr;}
}
@media (max-width: 860px){
  .sidebar{position:sticky;top:0}
  .topbar-title{font-size:30px}
}
.sb-ic svg{
  width:18px;
  height:18px;
  display:block;
}
.sb-ic{
  color:rgba(255,255,255,.92);
}
html[data-theme="light"] .sb-ic{
  color:rgba(11,18,32,.9);
}
.sb-ic{ display:inline-flex; align-items:center; justify-content:center; }
.sb-ic svg{ width:18px; height:18px; display:block; }
.select, .input {
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  outline:none;
}
[data-theme="light"] .select,
[data-theme="light"] .input{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}
/* ===== CLIENTI (layout CRM) ===== */
.clients-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 980px){
  .clients-grid{ grid-template-columns: 1fr; }
}

.list .client-row{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
html[data-theme="light"] .list .client-row{
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.list .client-row:hover{
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .list .client-row:hover{
  background: rgba(0,0,0,.06);
}
.list .client-row.active{
  outline: 2px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.10);
}

.client-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.client-meta b{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.client-meta .muted{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.client-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.client-actions .small{
  padding:8px 10px;
  border-radius:12px;
}

/* Modal form */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:720px){ .form-grid{ grid-template-columns: 1fr; } }

.form-row label{ display:block; font-size:12px; opacity:.85; margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%;
}

.form-sep{
  margin:14px 0;
  height:1px;
  background: rgba(255,255,255,.08);
}
html[data-theme="light"] .form-sep{
  background: rgba(0,0,0,.08);
}
/* ===== Clients page layout ===== */
.clients-page { padding-top: 6px; }

.clients-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 1100px){
  .clients-grid{ grid-template-columns: 1fr; }
}

.card.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  border-radius: 18px;
}

.card-h{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:16px 16px 10px;
}

.card-title{ font-size:18px; font-weight:800; letter-spacing:.2px; }
.card-sub{ font-size:12px; opacity:.75; margin-top:2px; }

.clients-search{ padding: 0 16px 12px; }
.clients-items{ padding: 0 10px 12px; }

.client-row{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  border-radius:14px;
  padding:12px 12px;
  margin:8px 6px;
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.client-row:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.client-row.active{
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 1px rgba(124,58,237,.35) inset, 0 18px 40px rgba(124,58,237,.12);
}

.cr-name{ font-weight:800; font-size:14px; }
.cr-sub{ margin-top:3px; font-size:12px; opacity:.72; }

.clients-detail .detail-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.client-card{
  padding: 6px 16px 14px;
}

.client-kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding-top: 8px;
}
@media (max-width: 900px){
  .client-kv{ grid-template-columns: 1fr; }
}

.kv .k{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:4px;
}
.kv .v{
  font-size:14px;
  font-weight:700;
}

.client-notes{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px){
  .client-notes{ grid-template-columns: 1fr; }
}

.note-box{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px;
}

/* ===== Modal form (better) ===== */
.modal-lg{ max-width: 860px; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
  padding: 6px 2px 0;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field.span-2{ grid-column: span 2; }

.field label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.65;
}

.textarea{
  width:100%;
  resize: vertical;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: inherit;
  outline: none;
  min-height: 110px;
}

.textarea:focus{
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,.16);
}

/* keep row buttons aligned */
.row-end{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 14px;
}
/* ===== Clients: lista leggibile ===== */
.clients-list .client-row{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 10px;
  color: rgba(255,255,255,.92);
  transition: .15s ease;
}

.clients-list .client-row:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

.clients-list .client-row .cr-name{
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
}

.clients-list .client-row .cr-sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.clients-list .client-row.is-active{
  background: rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 0 0 2px rgba(124,58,237,.18) inset;
}

/* ===== Storico vendite (mini card) ===== */
.hist-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.hist-val{ font-weight: 800; }

.hist-list{ display:flex; flex-direction:column; gap:10px; }

.hist-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
}

.hist-main{ font-weight: 700; }
.hist-price{ font-weight: 800; white-space:nowrap; }

/* layout pagina clienti */
.clients-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
}

@media (max-width: 1100px){
  .clients-grid{ grid-template-columns: 1fr; }
}
/* ===== Clients: storico vendite ===== */
.client-sales{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.client-sales .sales-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px){
  .client-sales .sales-grid{ grid-template-columns: 1fr; }
}

.sales-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

.sales-card .sales-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sales-card .sales-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.sales-card .sales-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}

.sales-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.sales-row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.06);
}

.sales-row:hover{
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.08);
}

.sales-row .sr-left{
  min-width: 0;
}

.sales-row .sr-main{
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-row .sr-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.sales-row .sr-right{
  text-align: right;
  flex-shrink: 0;
}

.sales-row .sr-price{
  font-weight: 800;
}

.sales-row .sr-date{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.sales-empty{
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.10);
  border: 1px dashed rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size: 13px;
}

/* rende più leggibile il testo "muted" dentro queste card */
.client-sales .muted{
  color: rgba(255,255,255,.75) !important;
}
/* ===== FIX: stacco tra scheda e storico ===== */
.client-sales{
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* griglia con spazio vero */
.client-sales .sales-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* più aria */
}

@media (max-width: 900px){
  .client-sales .sales-grid{ grid-template-columns: 1fr; }
}

/* card più “separate” dal box sopra */
.sales-card{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
}

/* titolo + badge più puliti */
.sales-card .sales-h{
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sales-card .sales-title{
  font-size: 14px;
  font-weight: 800;
}

.sales-card .sales-badge{
  opacity: .9;
}

/* empty state più elegante */
.sales-empty{
  margin-top: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  border: 1px dashed rgba(255,255,255,.18);
}
.client-sales{
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 16px !important;
}
.client-sales .sales-grid{ margin-top: 0; }
.client-sales .sales-grid{
  padding-left: 24px;
}
.client-sales{
  margin: 24px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
/* LIGHT MODE – testi storici e lista clienti */
[data-theme="light"] .clients-items .client-row,
[data-theme="light"] .client-sales,
[data-theme="light"] .client-sales h4,
[data-theme="light"] .client-sales .muted,
[data-theme="light"] .client-sales p {
  color: #111 !important;
  opacity: 1;
}
[data-theme="light"] .muted {
  color: #444 !important;
  opacity: 1;
}
/* LIGHT MODE – lista clienti (testi leggibili) */
[data-theme="light"] .clients-items .client-row {
  color: #111 !important;
  opacity: 1 !important;
}

[data-theme="light"] .clients-items .client-row .cr-name,
[data-theme="light"] .clients-items .client-row .cr-sub {
  color: #111 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* se vuoi il sottotesto un filo più soft */
[data-theme="light"] .clients-items .client-row .cr-sub {
  color: #444 !important;
}
.bm-table { width:100%; display:flex; flex-direction:column; gap:8px; padding:10px 2px; }
.bm-tr { display:grid; grid-template-columns: 140px 1fr 1fr 140px; gap:12px; padding:12px 14px; border-radius:14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.bm-th { font-weight:700; background: rgba(255,255,255,.06); }
.table-wrap { margin-top:10px; }
.bm-table { width:100%; display:flex; flex-direction:column; gap:8px; padding:10px 2px; }
.bm-tr {
  display:grid;
  grid-template-columns: 140px 1.2fr 1fr 140px 170px;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.bm-th { font-weight:700; background: rgba(255,255,255,.06); }

.bm-actions { display:flex; justify-content:flex-end; gap:8px; }

.btn.xs {
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1;
}
/* wrapper vendite */
.client-sales { margin-top: 18px; }
.sales-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px){ .sales-grid{ grid-template-columns: 1fr; } }

.sales-card{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

/* header */
.sales-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sales-title{ font-weight: 800; }
.sales-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  opacity: .95;
}

/* LISTA: altezza fissa + scroll */
.sales-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 220px;        /* <<< QUI controlli “quanto lunga” */
  overflow:auto;            /* scroll interno */
  padding-right: 6px;
}

/* scrollbar discreta */
.sales-list::-webkit-scrollbar { width: 8px; }
.sales-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.sales-list::-webkit-scrollbar-track { background: transparent; }

/* item riga */
.sale-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.sale-main{ display:flex; flex-direction:column; line-height: 1.2; }
.sale-top{ font-weight: 700; }
.sale-sub{ opacity: .85; font-size: 13px; margin-top: 3px; }

.sale-meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 88px;
}
.sale-price{ font-weight: 800; }
.sale-date{ opacity: .8; font-size: 12px; }

/* empty */
.sales-empty{ opacity:.75; padding: 8px 2px; }
/* lista vendite: già in colonna e con scroll interno */
.sales-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 220px;
  overflow:auto;
  padding-right: 6px;
}

.sale-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
}

.sale-main{ display:flex; flex-direction:column; line-height:1.2; }
.sale-top{ font-weight:800; }
.sale-sub{ opacity:.85; font-size:13px; margin-top:3px; }

.sale-meta{ display:flex; align-items:flex-end; }
.sale-price{ font-weight:900; }

/* empty */
.sales-empty{ opacity:.75; padding: 8px 2px; }
/* =========================
   FILTERS PAGE (Filtri)
========================= */
.filters-wrap .filters-card{
  padding: 16px;
}

.filters-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.filters-grid .field label{
  display:block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 6px;
}

.filters-grid .field .muted{
  font-size: 12px;
  opacity: .7;
}

.filters-grid .field.full{
  grid-column: span 2;
}
.filters-grid .field.wide{
  grid-column: span 2;
}

.filters-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  padding-top: 6px;
}

.filters-divider{
  height: 1px;
  opacity: .10;
  margin: 14px 0;
  background: currentColor;
}

@media (max-width: 1100px){
  .filters-grid{
    grid-template-columns: 1fr 1fr;
  }
  .filters-grid .field.full,
  .filters-grid .field.wide{
    grid-column: span 2;
  }
  .filters-actions{
    justify-content: stretch;
  }
  .filters-actions .btn{
    flex:1;
  }
}

/* Header risultati: pills più belle */
.result-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.result-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

[data-theme="light"] .pill{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

/* Tabella più leggibile */
.table-wrap{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .table-wrap{
  border: 1px solid rgba(0,0,0,.10);
}

.table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .table thead th{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
[data-theme="light"] .table tbody td{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.table tbody tr:hover{
  background: rgba(255,255,255,.04);
}
[data-theme="light"] .table tbody tr:hover{
  background: rgba(0,0,0,.03);
}

.btn.xs{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}
/* =========================
   FILTRI PAGE
========================= */
.filters-card{
  padding: 16px;
}

.filters-grid{
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.filters-grid .field label{
  display:block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 6px;
}

.filters-grid .field .hint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .70;
}

.filters-grid .field.span-3{ grid-column: span 3; }

.filters-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  grid-column: 1 / -1;
  padding-top: 6px;
}

/* Results */
.results-card{
  padding: 16px;
}

.result-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.result-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

[data-theme="light"] .pill{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

.table-wrap{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .table-wrap{
  border: 1px solid rgba(0,0,0,.10);
}

.table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .table thead th{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
[data-theme="light"] .table tbody td{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.table tbody tr:hover{ background: rgba(255,255,255,.04); }
[data-theme="light"] .table tbody tr:hover{ background: rgba(0,0,0,.03); }

.right{ text-align:right; }
.cell-main{ font-weight: 800; }

.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
[data-theme="light"] .tag{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

.result-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .result-footer{
  border-top: 1px solid rgba(0,0,0,.08);
}

.btn.xs{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}

@media (max-width: 1200px){
  .filters-grid{
    grid-template-columns: 1fr 1fr;
  }
  .filters-grid .field.span-3{ grid-column: span 2; }
  .filters-actions{
    justify-content: stretch;
  }
  .filters-actions .btn{ flex:1; }
}
/* ===== Fix SELECT / OPTION in dark mode (tutte le pagine) ===== */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .select {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
}

:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] .select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(120,140,255,.25);
  border-color: rgba(120,140,255,.55);
}

/* Opzioni dropdown (alcuni browser le rendono bianche se non specifichi) */
:root[data-theme="dark"] select option {
  background: #111622;
  color: rgba(255,255,255,.92);
}
/* === Filtri: allineamento box Tipo (stessa altezza e padding) === */
.filters-page .filters-grid .field {
  display: flex;
  flex-direction: column;
}
.filters-page .filters-grid .field label { margin-bottom: 8px; }
.filters-page .filters-grid .input,
.filters-page .filters-grid .select {
  height: 44px;           /* uniforma */
  border-radius: 14px;
}

/* === Fix select/option in dark mode (tutte le pagine) === */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .select {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
}
:root[data-theme="dark"] select option {
  background: #111622;
  color: rgba(255,255,255,.92);
}
/* === ALLINEAMENTO FILTRI (box Tipo) === */
.filters-page .filters-grid{
  align-items: end; /* tutti i campi alla stessa baseline */
  gap: 14px;
}

/* altezza uniforme */
.filters-page .filters-grid .input,
.filters-page .filters-grid .select{
  height: 46px;
  line-height: 46px;
}

/* label coerenti */
.filters-page .filters-grid label{
  display:block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

/* === select leggibili in dark (tutte le pagine) === */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .select{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] select option{
  background: #0f1420 !important;
  color: rgba(255,255,255,.92) !important;
}
.filters-page .filters-grid{
  align-items: end;
}

.filters-page .filters-grid .input,
.filters-page .filters-grid .select,
.filters-page .filters-grid select{
  height: 46px;
}
/* ===== FIX SELECT / OPTION (dark mode) ===== */
select.select, select, option {
  background-color: var(--card, #151a24);
  color: var(--text, #e9eefc);
}

select.select:focus, select:focus {
  outline: none;
  border-color: rgba(120, 140, 255, .55);
  box-shadow: 0 0 0 3px rgba(120, 140, 255, .18);
}

/* Alcuni browser ignorano option in dark: ma questa regola aiuta dove supportata */
option {
  background-color: var(--card, #151a24);
  color: var(--text, #e9eefc);
}
/* ===== Filters page ===== */
.filters-card .filters-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items:end; /* ALLINEAMENTO perfetto: “Tipo” non sballa */
}

.filters-card .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.filters-card .field label{
  font-size:12px;
  letter-spacing:.06em;
  opacity:.75;
  text-transform:uppercase;
}

.filters-card .hint{
  font-size:12px;
  opacity:.65;
  margin-top:-2px;
}

.filters-card .actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  grid-column: 1 / -1;
  padding-top: 4px;
}

.filters-card .span-2{ grid-column: span 2; }
.filters-card .span-3{ grid-column: span 3; }

.results-card .results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.results-card .pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.results-card .pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:600;
  font-size:13px;
}

.table-wrap{ overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.08); }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.07); white-space:nowrap; }
.table thead th{ font-size:12px; opacity:.8; text-transform:uppercase; letter-spacing:.06em; }
.td-actions{ display:flex; gap:8px; }

.btn.xs{ padding:7px 10px; border-radius:10px; font-size:13px; }

.results-foot{
  display:flex;
  justify-content:flex-end;
  padding-top:12px;
}

/* Responsive */
@media (max-width: 1100px){
  .filters-card .filters-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-card .span-2, .filters-card .span-3{ grid-column: span 2; }
  .filters-card .actions{ justify-content:stretch; }
  .filters-card .actions .btn{ flex:1; }
}
/* ===== Filters layout ===== */
.filters-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  align-items:end; /* <-- ALLINEA TUTTO (box Tipo incluso) */
}
.f-field{display:flex; flex-direction:column; gap:8px;}
.f-field label{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75;}
.f-field .muted{margin-top:0; font-size:.78rem; opacity:.65;}
.span-1{grid-column: span 1;}
.span-2{grid-column: span 2;}
.span-6{grid-column: span 6;}

.f-actions{
  display:flex; gap:10px; align-items:flex-end; justify-content:flex-end;
}

/* ===== Buttons nicer (Applica/Reset) ===== */
.btn.primary{
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(59,130,246,.95));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.btn.primary:hover{filter:brightness(1.05);}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.btn.mini{padding:.45rem .75rem; border-radius:999px;}

/* ===== Table alignment ===== */
.table-wrap{overflow:auto;}
.tbl{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;}
.tbl th, .tbl td{padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle;}
.tbl th{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75;}
.tbl td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tbl .td-strong{font-weight:700;}
.tr{text-align:right;}

/* ===== Dropdown in DARK: options leggibili ===== */
html[data-theme="dark"] select,
html[data-theme="dark"] option{
  background:#121826;
  color:#e5e7eb;
}
html[data-theme="light"] select,
html[data-theme="light"] option{
  background:#ffffff;
  color:#111827;
}

/* ===== Calendar icon white in DARK (tutti gli input date, anche nei popup) ===== */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .9;
}
html[data-theme="dark"] input[type="date"]{
  color-scheme: dark; /* aiuta su browser moderni */
}
/* Forza tema nativo dei controlli (icona calendario compresa) */
html[data-theme="dark"] input[type="date"] { color-scheme: dark; }
html[data-theme="light"] input[type="date"] { color-scheme: light; }

/* Chrome/Edge/Safari: rende l’icona visibilmente bianca in dark */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .9;
}

/* (opzionale) in light la lasciamo “normale” */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0);
  opacity: .75;
}
/* Allineamento righe/colonne perfetto */
#rTable{
  table-layout: fixed;
  width: 100%;
}

#rTable th, #rTable td{
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Larghezze colonne (coerenti tra header e righe) */
#rTable th:nth-child(1), #rTable td:nth-child(1){ width: 20%; } /* Cliente */
#rTable th:nth-child(2), #rTable td:nth-child(2){ width: 12%; } /* Tipo */
#rTable th:nth-child(3), #rTable td:nth-child(3){ width: 12%; } /* Dettaglio */
#rTable th:nth-child(4), #rTable td:nth-child(4){ width: 12%; } /* Attivazione */
#rTable th:nth-child(5), #rTable td:nth-child(5){ width: 12%; } /* Scadenza */
#rTable th:nth-child(6), #rTable td:nth-child(6){ width: 10%; } /* Importo */
#rTable th:nth-child(7), #rTable td:nth-child(7){ width: 10%; } /* Crediti */
#rTable th:nth-child(8), #rTable td:nth-child(8){ width: 12%; } /* Azioni */

/* Centra solo azioni e importo se vuoi più “pulito” */
#rTable th:nth-child(6), #rTable td:nth-child(6),
#rTable th:nth-child(8), #rTable td:nth-child(8){
  text-align: center;
}
/* Tema nativo controlli */
html[data-theme="dark"] input[type="date"] { color-scheme: dark; }
html[data-theme="light"] input[type="date"] { color-scheme: light; }

/* Chrome/Edge/Safari: icona calendario chiara in dark */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
  opacity: .95;
}

/* Se hai anche icone custom come <i class="calIcon"> o svg dentro input-wrap */
html[data-theme="dark"] .calIcon,
html[data-theme="dark"] .calendar-icon,
html[data-theme="dark"] .date-icon,
html[data-theme="dark"] .input-icon.calendar {
  filter: invert(1) brightness(1.2);
  opacity: .95;
}
/* ========= DATE ICON FIX (FORZATO) ========= */
html[data-theme="dark"] input[type="date"].dateInput{
  color-scheme: dark;
  /* icona custom bianca (SVG) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 44px;
}

/* nasconde l'icona nativa per evitare doppia icona */
html[data-theme="dark"] input[type="date"].dateInput::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

html[data-theme="light"] input[type="date"].dateInput{
  color-scheme: light;
  background-image: none;
  padding-right: 16px;
}
/* ===== FIX DEFINITIVO: ICONA CALENDARIO BIANCA IN DARK ===== */
html[data-theme="dark"] input[type="date"].dateInput{
  color-scheme: dark !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 44px;
}

/* nasconde l'icona nativa così NON la vedi mai nera */
html[data-theme="dark"] input[type="date"].dateInput::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  display: block;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
/* FIX: righe abbonamenti come button senza diventare nere */
#clientSubs .sale-item.sale-click {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  /* <-- evita nero */
  color: inherit;
  cursor: pointer;
  padding: 0;
  /* la card interna gestisce il padding */
}

/* la card già esistente (se hai .sale-item stile), non tocchiamo */
#clientSubs .sale-item.sale-click:focus {
  outline: none;
}

/* evidenzia selezione senza cambiare tema */
#clientSubs .sale-item.sale-click.active {
  outline: 2px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
}
/* ====== Subscription row (beautiful selectable card) ====== */
#clientSubs .sub-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

#clientSubs .sub-row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .14);
}

#clientSubs .sub-radio {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .25);
  position: relative;
  flex: 0 0 16px;
}

#clientSubs .sub-body {
  flex: 1;
  min-width: 0;
}

#clientSubs .sub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#clientSubs .sub-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#clientSubs .sub-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  font-size: 12px;
  opacity: .9;
}

#clientSubs .sub-bottom {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#clientSubs .sub-meta {
  font-size: 12px;
  opacity: .75;
}

#clientSubs .sub-meta .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#clientSubs .sub-price {
  font-weight: 800;
}

#clientSubs .sub-selected {
  display: none;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 200, 120, .12);
}

#clientSubs .sub-row.is-active {
  border-color: rgba(0, 200, 120, .35);
  background: rgba(0, 200, 120, .08);
}

#clientSubs .sub-row.is-active .sub-radio {
  border-color: rgba(0, 200, 120, .65);
}

#clientSubs .sub-row.is-active .sub-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: rgba(0, 200, 120, .95);
}

#clientSubs .sub-row.is-active .sub-selected {
  display: inline-flex;
}
/* ===== Subscriptions selectable rows (dark-friendly) ===== */
#clientSubs .bm-sub-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  margin-bottom: 10px;
}

#clientSubs .bm-sub-row:last-child {
  margin-bottom: 0;
}

#clientSubs .bm-sub-row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .14);
}

#clientSubs .bm-sub-title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
}

#clientSubs .bm-sub-date {
  margin-top: 4px;
  opacity: .75;
  font-weight: 600;
  font-size: 12px;
}

#clientSubs .bm-sub-price {
  font-weight: 900;
  font-size: 16px;
}

/* SELECTED STATE: chiaro e pulito (non “si vede male”) */
#clientSubs .bm-sub-row.is-selected {
  background: rgba(0, 200, 120, .10);
  border-color: rgba(0, 200, 120, .45);
  box-shadow: 0 0 0 3px rgba(0, 200, 120, .10);
}
/* ===== Sub selection (clear + toggleable) ===== */
#clientSubs .bm-sub {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  margin-bottom: 10px;
}

#clientSubs .bm-sub:last-child {
  margin-bottom: 0;
}

#clientSubs .bm-sub:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
}

#clientSubs .bm-sub-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
}

#clientSubs .bm-sub-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

#clientSubs .bm-sub-title {
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
}

#clientSubs .bm-sub-date {
  margin-top: 5px;
  font-size: 12px;
  opacity: .78;
  font-weight: 650;
}

#clientSubs .bm-sub-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

#clientSubs .bm-sub-price {
  font-weight: 950;
  font-size: 16px;
}

#clientSubs .bm-sub-badge {
  display: none;
  /* appare solo se selezionato */
  font-size: 11px;
  letter-spacing: .6px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 160, .28);
  background: rgba(0, 200, 120, .12);
  color: rgba(220, 255, 240, .95);
}

/* SELECTED: iper visibile */
#clientSubs .bm-sub.is-selected {
  background: linear-gradient(180deg, rgba(0, 200, 120, .14), rgba(0, 200, 120, .08));
  border-color: rgba(0, 200, 120, .50);
  box-shadow: 0 0 0 4px rgba(0, 200, 120, .12);
}

#clientSubs .bm-sub.is-selected .bm-sub-badge {
  display: inline-flex;
}

#clientSubs .bm-sub.is-selected .bm-sub-check {
  border-color: rgba(0, 200, 120, .75);
  background: rgba(0, 200, 120, .18);
  box-shadow: inset 0 0 0 2px rgba(0, 200, 120, .20);
}

#clientSubs .bm-sub.is-selected .bm-sub-check::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 200, 120, .95);
}
/* === AVVISO RINNOVO IMMINENTE === */
.sb-renew-alert {
  margin: 10px 14px 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: 14px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .35);

  box-shadow: 0 6px 20px rgba(245, 158, 11, .25);
}

.sb-renew-alert-ic {
  font-size: 18px;
}

.sb-renew-alert-title {
  font-weight: 900;
  font-size: 13px;
  color: #ffd7a1;
}

.sb-renew-alert-sub {
  font-size: 11px;
  opacity: .85;
}

.sb-renew-alert-btn {
  margin-left: auto;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  border-radius: 10px;

  color: #1f1400;
  background: linear-gradient(135deg, #f59e0b, #fb923c);
  text-decoration: none;

  transition: .2s ease;
}

.sb-renew-alert-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, .45);
}
.sb-renew-alert {
  margin: 8px 14px 14px;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: 12px;
  background: linear-gradient(180deg,
      rgba(245, 158, 11, .12),
      rgba(245, 158, 11, .08));

  border: 1px solid rgba(245, 158, 11, .28);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .12);
}
.sb-renew-alert-ic {
  font-size: 16px;
  opacity: .9;
}

.sb-renew-alert-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #ffd7a1;
}

.sb-renew-alert-sub {
  font-size: 11px;
  opacity: .8;
  line-height: 1.3;
}
.sb-renew-alert-btn {
  margin-left: auto;
  padding: 5px 10px;

  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;

  color: #1f1400;
  background: rgba(245, 158, 11, .9);
  text-decoration: none;

  box-shadow: none;
  transition: .2s ease;
}

.sb-renew-alert-btn:hover {
  background: #fbbf24;
}
.input.error {
  border-color: #e54848 !important;
  box-shadow: 0 0 0 2px rgba(229, 72, 72, .18);
}
.clients-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 12px 0 6px;
  flex-wrap: wrap;
}

.clients-pager .pg-btn {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: .15s ease;
}

.clients-pager .pg-btn:hover {
  transform: translateY(-1px);
}

.clients-pager .pg-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.clients-pager .pg-btn.active {
  background: rgba(79, 140, 255, .22);
  border-color: rgba(79, 140, 255, .55);
}

.clients-pager .pg-info {
  opacity: .75;
  font-size: .9em;
  padding: 0 4px;
}
/* ===== BM TABLE: layout stabile 6 colonne ===== */
.bm-table .bm-tr{
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: 140px 1.4fr 1fr 1.6fr 110px 170px;
}

/* header più pulito */
.bm-table .bm-th{
  font-weight: 700;
}

/* Prezzo e Azioni allineati bene */
.bm-table .bm-tr > :nth-child(5){
  text-align: right;
  white-space: nowrap;
}

/* Colonna note: non farla andare a capo infinito */
.bm-table .bm-tr > :nth-child(4){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Azioni sempre a destra, bottoni in riga */
.bm-table .bm-actions{
  justify-content: flex-end;
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

/* Mobile: stack “card” */
@media (max-width: 900px){
  .bm-table .bm-tr{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bm-table .bm-th{ display:none; }
  .bm-table .bm-tr{
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
  }
  .bm-table .bm-actions{
    justify-content: flex-start;
    margin-top: 6px;
  }
  .bm-table .bm-tr > :nth-child(4){
    white-space: normal; /* note multiline su mobile */
  }
}
.bm-sub-expired-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,70,70,.14);
}

.bm-sub.is-expired{
  opacity:.92;
}
.bm-badge-exp{
  display:inline-flex;
  align-items:center;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,70,70,.14);
}
/* ============================
   SUBSCRIPTIONS TABLE: 7 COLONNE (Attivazione, Cliente, Pacchetto, Scadenza, Note, Prezzo, Azioni)
   Forzato SOLO nella pagina abbonamenti
============================ */
.subs-page .bm-table .bm-tr,
.subs-page .bm-table .bm-tr.bm-th {
  display: grid !important;
  grid-template-columns:
    150px   /* Attivazione */
    1.4fr   /* Cliente */
    1fr     /* Pacchetto */
    150px   /* Scadenza */
    1.2fr   /* Note */
    110px   /* Prezzo */
    150px   /* Azioni */
  !important;

  align-items: center !important;
  gap: 12px !important;
}

/* evita che l'header vada a capo e sposti "Azioni" sotto */
.subs-page .bm-table .bm-tr.bm-th > div {
  white-space: nowrap;
}

/* allinea a destra prezzo + azioni */
.subs-page .bm-table .bm-tr > div:nth-child(6),
.subs-page .bm-table .bm-tr.bm-th > div:nth-child(6) {
  text-align: right !important;
}

.subs-page .bm-table .bm-tr > div:nth-child(7),
.subs-page .bm-table .bm-tr.bm-th > div:nth-child(7) {
  justify-self: end !important;
}

/* azioni in riga */
.subs-page .bm-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
/* ==========================
   POLISH - Total Month Card
========================== */

/* prende il contenitore che include il totale mese */
#k_inc_total_month{
  display:inline-block;
  position:relative;
  will-change: transform;
}

/* “shine” che passa sopra il box */
.bm-total-shine{
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  pointer-events:none;
  overflow:hidden;
}

.bm-total-shine:before{
  content:"";
  position:absolute;
  top:-40%;
  left:-35%;
  width:45%;
  height:220%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.10),
    transparent
  );
  transform: rotate(18deg);
  opacity:.0;
  animation: bmShine 7.5s ease-in-out infinite;
}

@keyframes bmShine{
  0%   { transform: translateX(-10%) rotate(18deg); opacity: 0; }
  12%  { opacity: .35; }
  40%  { opacity: .15; }
  100% { transform: translateX(240%) rotate(18deg); opacity: 0; }
}

/* “breathing glow” leggero (non aggressivo) */
.bm-total-glow{
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 18% 10%, rgba(125,95,255,.18), transparent 60%),
    radial-gradient(800px 220px at 85% 20%, rgba(56,189,248,.12), transparent 58%);
  filter: blur(0px);
  opacity: .85;
  animation: bmGlow 4.8s ease-in-out infinite;
}

@keyframes bmGlow{
  0%,100% { opacity:.70; transform: scale(1); }
  50%     { opacity:.95; transform: scale(1.01); }
}

/* numerone più “hero” */
#k_inc_total_month{
  font-weight: 1000;
  letter-spacing: .35px;
  text-shadow: 0 18px 55px rgba(0,0,0,.55);
  transform-origin: center;
}

/* pop piccolo quando aggiorna */
.bm-pop{
  animation: bmPop .28s ease-out;
}
@keyframes bmPop{
  0%   { transform: scale(.98); filter: brightness(1); }
  60%  { transform: scale(1.02); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
/* ==========================
   CRM PANEL (pro dashboard)
========================== */

.crm-panel{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.05fr 1.2fr .9fr;
  gap:16px;
}

@media (max-width: 1100px){
  .crm-panel{ grid-template-columns: 1fr; }
}

.crm-card{
  position:relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 20px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}

.crm-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 280px at 10% 0%, rgba(125,95,255,.18), transparent 60%),
    radial-gradient(800px 260px at 95% 10%, rgba(56,189,248,.12), transparent 58%);
  pointer-events:none;
  opacity:.9;
}

.crm-head{
  position:relative;
  z-index:1;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.crm-title{
  font-weight: 950;
  letter-spacing:.2px;
  font-size: 14px;
}
.crm-sub{
  margin-top:2px;
  font-size: 12px;
  opacity:.72;
}

.crm-link{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: inherit;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
  font-size: 12px;
}

.crm-list{ position:relative; z-index:1; padding: 12px 14px 14px; }

.crm-row{
  display:grid;
  grid-template-columns: 14px 1fr auto;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  margin-bottom: 10px;
}

.crm-row .lbl{ font-size: 13px; opacity:.9; }
.crm-row .val{ font-weight: 950; }
.crm-row .val.big{ font-size: 18px; }

.dot{
  width:10px; height:10px; border-radius: 50%;
  display:inline-block;
  box-shadow: 0 0 18px rgba(255,255,255,.08);
}
.dot-a{ background: rgba(125,95,255,.95); }
.dot-c{ background: rgba(56,189,248,.95); }
.dot-k{ background: rgba(34,197,94,.85); }
.dot-s{ background: rgba(245,158,11,.90); }

.crm-actions{
  display:flex;
  gap:10px;
  margin-top: 8px;
}

.crm-btn{
  flex:1;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: inherit;
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 900;
}
.crm-btn.primary{
  background: linear-gradient(90deg, rgba(125,95,255,.85), rgba(56,189,248,.55));
  border-color: rgba(255,255,255,.14);
}

.crm-tabs{ display:flex; gap:8px; }
.crm-tab{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: inherit;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  opacity:.85;
}
.crm-tab.is-active{ opacity:1; box-shadow: inset 0 0 0 1px rgba(125,95,255,.22); }

.crm-donut-wrap{
  position:relative;
  z-index:1;
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  place-items:center;
}

.crm-donut{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background:
    conic-gradient(
      rgba(125,95,255,.95) 0 calc(var(--pA)*1%),
      rgba(56,189,248,.90) calc(var(--pA)*1%) 100%
    );
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  position:relative;
  border: 1px solid rgba(255,255,255,.10);
}

.crm-donut:after{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 50%;
  background: rgba(8,12,18,.75);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.crm-donut-inner{
  position:relative;
  z-index:2;
  text-align:center;
}

.crm-donut-inner .t1{ font-size: 12px; opacity:.75; font-weight:800; }
.crm-donut-inner .t2{ font-size: 20px; font-weight: 1000; margin-top:6px; }
.crm-donut-inner .t3{ font-size: 12px; opacity:.7; margin-top:4px; }

.crm-legend{
  width: 100%;
  display:flex;
  justify-content: space-between;
  gap:12px;
  font-size: 13px;
}
.crm-legend .lg{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  flex:1;
  justify-content: space-between;
}

.crm-bubbles{
  position:relative;
  z-index:1;
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.bubble{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 12px;
  text-align:center;
}

.ring{
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display:grid;
  place-items:center;
  border: 3px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ring b{ font-weight: 1000; }

.ring.a{ outline: 2px solid rgba(125,95,255,.20); }
.ring.c{ outline: 2px solid rgba(56,189,248,.18); }
.ring.k{ outline: 2px solid rgba(34,197,94,.14); }
.ring.s{ outline: 2px solid rgba(245,158,11,.16); }

.cap{ font-size: 12px; opacity:.78; font-weight: 800; }

.bm-cal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bm-cal-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 380px;
  max-width: calc(100vw - 26px);
  z-index: 9999;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,20,.96);
  box-shadow: 0 26px 90px rgba(0,0,0,.68);
  overflow: hidden;
}
.hidden{ display:none !important; }

.bm-cal-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bm-cal-title{ font-weight: 950; font-size: 14px; }
.bm-cal-close{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: inherit;
  cursor: pointer;
}
.bm-cal-tabs{ display:flex; gap:8px; padding: 12px 14px 0; }
.bm-cal-tab{
  flex:1;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: inherit;
  font-weight: 900;
  cursor: pointer;
  opacity:.78;
}
.bm-cal-tab.is-active{
  opacity: 1;
  border-color: rgba(125,95,255,.40);
  background: linear-gradient(90deg, rgba(125,95,255,.85), rgba(56,189,248,.40));
}
.bm-cal-body{ padding: 12px 14px 14px; }

.bm-cal-label{ font-size: 11px; opacity: .74; margin: 0 2px 8px; }
.bm-cal-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: inherit;
  outline: none;
}
.bm-cal-preview{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.bm-cal-prevrow{
  display:flex; justify-content:space-between; gap:12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.bm-cal-prevrow:first-child{ border-top:0; }
.bm-cal-prevrow.big{ font-size: 14px; }
.bm-cal-prevrow.big b{ font-size: 16px; }

.bm-cal-actions{ display:flex; gap:10px; margin-top: 12px; }
.bm-cal-btn{
  flex:1;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: inherit;
  font-weight: 950;
  cursor: pointer;
}
.bm-cal-btn.primary{
  background: linear-gradient(90deg, rgba(125,95,255,.95), rgba(56,189,248,.65));
}
.bm-cal-hint{ margin-top: 10px; font-size: 12px; opacity: .70; line-height: 1.35; }
/* =========================================
   LIGHT MODE: TESTI DONUT INTERNI IN BIANCO
========================================= */

:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
#crm_donut .crm-donut-inner,
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
#crm_donut .crm-donut-inner .t1,
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
#crm_donut .crm-donut-inner .t2,
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
#crm_donut .crm-donut-inner .t3{
  color: #ffffff !important;
}

/* opzionale: migliora contrasto su fondi chiari/scuri */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
#crm_donut .crm-donut-inner{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* =========================================
   POPUP FILTRI / CALENDARIO - LIGHT FIX (FORZATO)
========================================= */

/* aggancio light (copre varianti) */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-modal, .crm-popup, .modal, .popup, .dialog, [role="dialog"]) {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.20) !important;
}

/* tutti i testi dentro il popup */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-modal, .crm-popup, .modal, .popup, .dialog, [role="dialog"])
  * {
  color: #111827 !important;
}

/* tabs Giorno/Mese/Anno */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-tab, .tab, .tabs button, .crm-tabs button) {
  background: #f3f4f6 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-tab.is-active, .tabs button.active, .crm-tabs button.is-active) {
  background: linear-gradient(90deg, #7a63ff, #35c7ff) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* input data */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-modal, .crm-popup, .modal, .popup, .dialog, [role="dialog"])
  input[type="date"],
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-modal, .crm-popup, .modal, .popup, .dialog, [role="dialog"])
  input {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}

/* bottone Applica */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-modal, .crm-popup, .modal, .popup, .dialog, [role="dialog"])
  :is(.btn-primary, .primary, #btnApply, button[type="submit"]) {
  background: linear-gradient(90deg, #7a63ff, #35c7ff) !important;
  color: #ffffff !important;
  border: none !important;
}

/* bottone Reset */
:is(html[data-theme="light"], body.light, body.theme-light, .theme-light)
  :is(.crm-modal, .crm-popup, .modal, .popup, .dialog, [role="dialog"])
  :is(.btn-ghost, .ghost, #btnReset) {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}
/* overlay */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  /* spazio ai bordi */
  z-index: 9999;
}

/* card */
.modal-card {
  width: min(720px, 100%);
  max-height: calc(100dvh - 32px);
  /* usa dvh: meglio su browser moderni */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* IMPORTANT: evita che il bottone “scappi” fuori */
  border-radius: 18px;
}

/* header (se ce l’hai) */
.modal-header {
  flex: 0 0 auto;
}

/* body scrollabile */
.modal-body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* footer sempre visibile */
.modal-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: 12px 16px;
  background: rgba(10, 12, 20, 0.85);
  /* o il tuo background */
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* piccolo extra per iPhone / safe-area */
@supports (padding: max(0px)) {
  .modal {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .modal-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* ===== INCASSI PAGE polish ===== */
.inc-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.inc-kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.inc-kpi{
  min-width: 170px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .inc-kpi{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.inc-kpi__val{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-top: 4px;
}

.inc-filters{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="light"] .inc-filters{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
}

.inc-filters__grid{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 0.8fr 0.8fr 0.7fr 0.7fr;
  gap: 12px;
  align-items:end;
}
.inc-filters .field label{
  display:block;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 6px;
}
.inc-filters__actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 1100px){
  .inc-filters__grid{ grid-template-columns: 1fr 1fr; }
}

.inc-bm-table .bm-tr{
  align-items:center;
}
.inc-pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
html[data-theme="light"] .inc-pill{
  border-color: rgba(0,0,0,0.10);
/* =========================================================
   BM PATCH - THEME + TOKENS COMPATIBILITY (INCOLLA IN FONDO)
   ========================================================= */

/* 1) Theme selector universale: html O body */
html[data-theme="light"], body[data-theme="light"]{
  color-scheme: light;
}
html[data-theme="dark"], body[data-theme="dark"]{
  color-scheme: dark;
}

/* 2) Compatibilità variabili: mappa --txt/--text e friends */
:root{
  /* se esiste uno dei due, l’altro si allinea */
  --txt: var(--text);
  --text: var(--txt);

  --muted: var(--muted);
  /* (se avevi varianti tipo --muted2 ecc. qui puoi mapparle) */
}

/* 3) Forza colori reali in base al tema (vale per html o body) */
html[data-theme="light"], body[data-theme="light"]{
  --text: #0f172a;
  --txt:  #0f172a;

  --muted: #5b677f;
  --line: rgba(0,0,0,.08);
  --stroke: rgba(13,20,38,.10);

  --card: rgba(255,255,255,.95);
  --panel: rgba(255,255,255,.90);

  --bg: #f2f5fb;
}
html[data-theme="dark"], body[data-theme="dark"]{
  --text: #f5f8ff;
  --txt:  #f5f8ff;

  --muted: #9aa8d1;
  --line: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.10);

  --card: rgba(22,31,51,.90);
  --panel: rgba(18,26,43,.86);

  --bg: #070b14;
}

/* 4) Applica bg/testo in modo definitivo */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* 5) Modal: alias classi (se markup usa .modal-box e non .modal-card) */
.modal-box{ 
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.modal-card{ 
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* se hai header/body/footer nel markup, questi nomi funzionano uguale */
.modal .modal-body,
.modal-body{
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
.modal-footer{
  position: sticky;
  bottom: 0;
}

/* 6) Input/search: placeholder leggibili anche in light */
input::placeholder, .search::placeholder{
  color: var(--muted) !important;
  opacity: 1 !important;
}
/* il toggle mobile non deve esistere su desktop */
.mobile-menu-toggle{
  display: none;
}

/* su mobile invece appare */
@media (max-width: 900px){
  .mobile-menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .mobile-menu-toggle svg{
    width: 22px;
    height: 22px;
  }
}