/* ══════════════════════════════════════════════
   ZUM Dashboard — design system v4
   ══════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --page:     #eeebe5;
  --surface:  #ffffff;
  --surface-2:#f8f6f3;
  --border:   rgba(0,0,0,0.07);
  --border-md:rgba(0,0,0,0.13);
  --border-strong:rgba(0,0,0,0.20);
  --text-1:   #181816;
  --text-2:   #666662;
  --text-3:   #9e9e99;
  --green:    #16a37a;
  --red:      #dc4a49;
  --amber:    #e8971f;
  --sidebar:  #141412;
  --row-hover:rgba(20,20,18,0.045);
  --r:        11px;
  --r-sm:     7px;
  --r-xs:     5px;
  --font:     -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

[data-theme="dark"] {
  --page:     #111110;
  --surface:  #1a1a18;
  --surface-2:#222220;
  --border:   rgba(255,255,255,0.07);
  --border-md:rgba(255,255,255,0.13);
  --border-strong:rgba(255,255,255,0.20);
  --text-1:   #ebebea;
  --text-2:   #9e9e99;
  --text-3:   #666662;
  --row-hover:rgba(255,255,255,0.05);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font);background:var(--page);color:var(--text-1);line-height:1.5;min-height:100vh;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font);cursor:pointer;}
input,select,textarea{font-family:var(--font);}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}

/* ── Shell layout ── */
.shell{display:flex;min-height:100vh;}
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:24px 28px;gap:20px;}

/* ── Sidebar ── */
.sidebar{
  width:216px;
  flex-shrink:0;
  background:var(--sidebar);
  display:flex;
  flex-direction:column;
  padding:16px 12px;
  gap:4px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar-top{display:flex;flex-direction:column;flex:1;gap:2px;}
.sidebar-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 16px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.9);
}
.sidebar-logo-mark{
  width:26px;height:26px;
  background:#fff;
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#141412;
  flex-shrink:0;
}
.nav-section-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.25);
  padding:10px 8px 4px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  font-size:13px;
  font-weight:450;
  color:rgba(255,255,255,0.55);
  transition:background 0.12s,color 0.12s;
}
.nav-item:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.85);}
.nav-item.active{background:rgba(255,255,255,0.1);color:#fff;}
.nav-item svg{flex-shrink:0;opacity:0.7;}
.nav-item.active svg{opacity:1;}
.sidebar-footer{padding-top:8px;border-top:1px solid rgba(255,255,255,0.07);}
.logout-btn{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:8px 10px;
  border:none;border-radius:var(--r-sm);
  background:none;
  font-size:13px;font-weight:450;
  color:rgba(255,255,255,0.35);
  transition:background 0.12s,color 0.12s;
}
.logout-btn:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.7);}

/* ── Page header ── */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.page-header h1{font-size:18px;font-weight:600;color:var(--text-1);letter-spacing:-0.01em;}

/* ── Topbar (inside .main) ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.topbar-right{display:flex;align-items:center;gap:8px;}


/* ── Theme toggle ── */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border:0.5px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:none;
  color:var(--text-2);
  transition:background 0.1s;
}
.theme-toggle:hover{background:var(--surface-2);}

/* ── Mobile menu button ── */
#mobile-menu-btn{display:none;}

/* ── Cards ── */
.card{
  background:var(--surface);
  border:0.5px solid var(--border-md);
  border-radius:var(--r);
  padding:20px;
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.card-title{font-size:13px;font-weight:600;color:var(--text-1);}

/* ── KPI grid ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.kpi-grid-3{grid-template-columns:repeat(3,1fr);}
.kpi{
  background:var(--surface);
  border:0.5px solid var(--border-md);
  border-radius:var(--r);
  padding:18px 20px;
}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.kpi-label{font-size:12px;font-weight:500;color:var(--text-2);}
.kpi-icon{
  width:30px;height:30px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:0.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);
  flex-shrink:0;
}
.kpi-value{font-size:22px;font-weight:650;color:var(--text-1);letter-spacing:-0.02em;line-height:1.1;}
.kpi-value .unit{font-size:12px;font-weight:500;color:var(--text-3);margin-left:2px;}
.kpi-sub{font-size:11px;margin-top:6px;color:var(--text-3);}
.kpi-sub.up{color:var(--green);}
.kpi-sub.down{color:var(--red);}

/* ── Two column ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}

/* ── Tabs ── */
.tabs{
  display:inline-flex;
  position:relative;
  background:var(--surface-2);
  border:0.5px solid var(--border-md);
  border-radius:var(--r-sm);
  padding:3px;
  gap:1px;
}
.tab{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;
  height:28px;padding:0 12px;
  border-radius:var(--r-xs);
  font-size:12px;font-weight:500;
  color:var(--text-2);
  transition:color 0.15s;
  white-space:nowrap;
  text-decoration:none;
  border:none;background:none;cursor:pointer;
}
.tab:hover{color:var(--text-1);}
.tab.active{color:var(--text-1);}
.tab-pill{
  position:absolute;
  top:3px;left:3px;
  height:28px;
  background:var(--surface);
  border-radius:var(--r-xs);
  border:0.5px solid var(--border-md);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  transition:left 0.22s cubic-bezier(0.34,1.3,0.64,1),width 0.22s cubic-bezier(0.34,1.3,0.64,1);
  pointer-events:none;
}
/* Tabs inside modals are toggled directly (no sliding pill) — give the
   active tab a solid background so the selected mode is always clear. */
.modal .tabs .tab.active{
  background:var(--surface);
  border:0.5px solid var(--border-md);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.modal .tabs .tab-pill{display:none;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;
  border-radius:var(--r-sm);
  font-size:13px;font-weight:500;
  border:none;cursor:pointer;
  transition:opacity 0.15s,background 0.15s;
  white-space:nowrap;
}
.btn:hover{opacity:0.88;}
.btn-primary{background:var(--text-1);color:#fff;}
[data-theme="dark"] .btn-primary{background:#fff;color:#111;}
.btn-ghost{background:none;border:0.5px solid var(--border-strong);color:var(--text-1);}
.btn-ghost:hover{background:var(--surface-2);opacity:1;}
.btn-danger{background:var(--red);color:#fff;}
.btn-sm{height:28px;padding:0 10px;font-size:12px;}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--r-sm);
  border:0.5px solid var(--border-strong);
  background:none;
  color:var(--text-2);
  transition:background 0.12s,color 0.12s;
}
.btn-icon:hover{background:var(--surface-2);color:var(--text-1);}

/* ── Form inputs ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea{
  width:100%;
  height:36px;
  padding:0 10px;
  background:var(--surface);
  border:0.5px solid var(--border-strong);
  border-radius:var(--r-sm);
  font-size:13px;
  color:var(--text-1);
  outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
  appearance:none;
  -webkit-appearance:none;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0.4;
  cursor:pointer;
  filter:var(--date-icon-filter,none);
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--text-1);
  box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
  border-color:rgba(255,255,255,0.4);
  box-shadow:0 0 0 3px rgba(255,255,255,0.06);
}
textarea{height:auto;padding:8px 10px;resize:vertical;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-2);display:block;margin-bottom:5px;}
.form-group{margin-bottom:14px;}

/* ── Modal form layout ── */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-field{margin-bottom:0;}
.form-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-2);display:block;margin-bottom:6px;}
.form-input{width:100%;}

/* ── File input ── */
.file-input{
  width:100%;
  font-size:13px;
  color:var(--text-2);
  cursor:pointer;
}
.file-input::file-selector-button{
  margin-right:12px;
  height:32px;
  padding:0 14px;
  border:0.5px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--text-1);
  font-family:var(--font);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background 0.12s;
}
.file-input::file-selector-button:hover{background:var(--border);}

/* ── Search bar ── */
.search-bar{
  position:relative;display:flex;align-items:center;
}
.search-bar svg{
  position:absolute;left:10px;
  pointer-events:none;
  color:var(--text-3);
}
.search-bar input{
  padding-left:32px;
}

/* ── Tables ── */
.table-wrap{
  border-radius:16px;
  border:0.5px solid var(--border-md);
  overflow:hidden;
  background:var(--surface);
}
.table-wrap > div{overflow-x:auto;}
.table-wrap table{width:100%;border-collapse:collapse;}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--surface-2);}
th{
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-2);
  padding:13px 24px;
  border-bottom:0.5px solid var(--border-md);
  text-align:left;
  white-space:nowrap;
}
td{
  font-size:13px;
  color:var(--text-1);
  padding:15px 24px;
  vertical-align:middle;
  border-bottom:0.5px solid var(--border);
}
/* zebra striping — klairo style */
tbody tr:nth-child(even){background:var(--surface-2);}
tbody tr:nth-child(odd){background:var(--surface);}
tbody tr{transition:background 0.12s;}
tbody tr:hover{background:var(--row-hover);}
tbody tr:last-child td{border-bottom:none;}
tfoot tr{background:var(--surface-2);border-top:0.5px solid var(--border-md);}
tfoot td{border-bottom:none;}

/* avatar chip for name cells */
.cell-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--sidebar);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#fff;
  flex-shrink:0;text-transform:uppercase;
}

/* ── Status dots ── */
.dot-red,.dot-amber,.dot-green{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.dot-red   {background:var(--red);}
.dot-amber {background:var(--amber);}
.dot-green {background:var(--green);}

/* ── Badges ── */
.badge-green,.badge-red,.badge-amber,.badge-mute{
  display:inline-flex;align-items:center;
  height:20px;padding:0 7px;
  border-radius:99px;
  font-size:11px;font-weight:500;
}
.badge-green{background:rgba(22,163,122,0.12);color:var(--green);}
.badge-red  {background:rgba(220,74,73,0.12);color:var(--red);}
.badge-amber{background:rgba(232,151,31,0.12);color:var(--amber);}
.badge-mute {background:var(--surface-2);color:var(--text-3);}

/* ── List ── */
.list{display:flex;flex-direction:column;}
.list-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:0.5px solid var(--border);
}
.list-item:last-child{border-bottom:none;}
.list-item-label{font-size:13px;color:var(--text-1);font-weight:500;}
.list-item-sub{font-size:11px;color:var(--text-3);margin-top:1px;}
.list-item-val{font-size:13px;font-weight:500;color:var(--text-1);flex-shrink:0;}

/* ── Chart box ── */
.chart-box{height:220px;position:relative;width:100%;}
.chart-box canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;}

/* ── Size selector ── */
.size-grid{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.size-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:8px;
  border:0.5px solid var(--border-md);background:var(--surface);
  font-size:12px;font-weight:600;color:var(--text-1);
  cursor:pointer;transition:border-color .14s,background .14s,transform .1s;user-select:none;
}
.size-btn .size-stock{font-size:9px;font-weight:400;color:var(--text-3);margin-top:2px;}
.size-btn:hover:not(.disabled){border-color:var(--text-1);background:var(--surface-2);}
.size-btn.selected{background:var(--text-1);color:#fff;border-color:var(--text-1);}
.size-btn.selected .size-stock{color:rgba(255,255,255,0.5);}
.size-btn.disabled{opacity:0.32;cursor:not-allowed;text-decoration:line-through;}
.size-btn:active:not(.disabled){transform:scale(0.95);}

/* ── Color palette (form) ── */
.color-palette{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
.color-swatch{
  width:32px;height:32px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;position:relative;transition:transform .13s,border-color .13s;flex-shrink:0;
}
.color-swatch:hover{transform:scale(1.15);}
.color-swatch.selected{border-color:var(--text-1);transform:scale(1.15);}
.color-swatch[data-color="white"]{border-color:var(--border-md);}
.color-swatch.selected::after{
  content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(255,255,255,0.5);
}
.color-swatch.selected[data-dark]::after{background:rgba(255,255,255,0.35);}

/* ── Size stepper (add product form) ── */
.sz-stepper-btn:hover{background:var(--surface-2);color:var(--text-1);}
.sz-stepper-btn:active{background:var(--border-md);}

/* ── Style card grid (sell page) ── */
.style-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.style-card{
  border:0.5px solid var(--border-md);
  border-radius:var(--r);
  background:var(--surface);
  padding:12px;
  cursor:pointer;
  transition:border-color .15s,transform .12s,background .12s;
  user-select:none;
}
.style-card:hover{border-color:var(--text-2);transform:translateY(-1px);}
.style-card.selected{
  border-color:var(--text-1);
  border-width:1.5px;
  background:var(--surface-2);
}
.style-card.out-of-stock{opacity:.4;pointer-events:none;}
.style-code{
  font-size:15px;font-weight:700;
  letter-spacing:.05em;
  color:var(--text-1);
  margin-bottom:3px;
}
.style-name{
  font-size:11px;
  color:var(--text-3);
  margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.style-price{
  font-size:13px;font-weight:600;
  color:var(--text-1);
  margin-bottom:6px;
}
.style-colors{
  display:flex;gap:4px;flex-wrap:wrap;
}
.style-color-dot{
  width:11px;height:11px;border-radius:50%;
  border:0.5px solid rgba(0,0,0,0.12);
  flex-shrink:0;
}

/* ── Sell page 2-column layout ── */
.sell-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:12px;
  align-items:start;
}
@media(max-width:840px){
  .sell-layout{grid-template-columns:1fr;}
}

/* ── Sell step panels ── */
.sell-panel{
  background:var(--surface);
  border:0.5px solid var(--border-md);
  border-radius:var(--r);
  padding:14px;
}
.sell-step-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-3);margin-bottom:10px;
}

/* ── Color variant swatches (sell step 2) ── */
.variant-swatch{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-radius:var(--r-sm);
  border:0.5px solid var(--border-md);
  cursor:pointer;
  background:var(--surface);
  transition:border-color .12s,background .12s;
}
.variant-swatch:hover{border-color:var(--text-2);}
.variant-swatch.selected{border-color:var(--text-1);background:var(--surface-2);}
.variant-swatch.no-stock{opacity:.35;pointer-events:none;}

/* ── Size buttons (sell step 3) ── */
.size-btn{
  padding:7px 12px;
  border:0.5px solid var(--border-md);
  border-radius:var(--r-sm);
  background:var(--surface);
  font-size:12px;font-weight:700;
  color:var(--text-1);
  cursor:pointer;
  transition:border-color .12s,background .12s;
}
.size-btn:hover{border-color:var(--text-2);}
.size-btn.selected{border-color:var(--text-1);background:var(--surface-2);}
.size-btn.out-of-stock{opacity:.3;pointer-events:none;text-decoration:line-through;}

/* ── Cart panel ── */
.cart-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;
  border-bottom:0.5px solid var(--border);
}
.cart-item:last-child{border-bottom:none;}
.cart-qty-stepper{
  display:flex;align-items:center;
  border:0.5px solid var(--border-strong);
  border-radius:var(--r-xs);
  overflow:hidden;
  flex-shrink:0;
}
.cart-qty-stepper button{
  width:26px;height:26px;border:none;background:none;
  font-size:14px;color:var(--text-2);cursor:pointer;
}
.cart-qty-stepper button:hover{background:var(--surface-2);}
.cart-qty-num{
  width:28px;text-align:center;font-size:12px;font-weight:700;
  color:var(--text-1);
}

/* ── Color dot (inline) ── */
.color-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:0.5px solid rgba(0,0,0,0.12);vertical-align:middle;margin-right:5px;
}

/* ── Color filter row ── */
.color-filter-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;}
.color-filter-swatch:hover{transform:scale(1.2);}

/* ── Filter bar (date range) ── */
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}

/* ── Activity log rows ── */
.activity-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:12px 0;border-bottom:0.5px solid var(--border);
}
.activity-row:last-child{border-bottom:none;}
.activity-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.activity-body{flex:1;min-width:0;}
.activity-desc{font-size:13px;color:var(--text-1);line-height:1.4;}
.activity-time{font-size:11px;color:var(--text-3);margin-top:3px;}
.activity-meta{font-size:11px;color:var(--text-3);margin-top:2px;}

/* ── Pulse amber ── */
@keyframes pulse-amber{0%,100%{opacity:1;}50%{opacity:0.35;}}
.dot-amber.pulse{animation:pulse-amber 1.6s ease infinite;}

/* ── Pending payment card ── */
.pending-sale-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:0.5px solid var(--border);flex-wrap:wrap;
}
.pending-sale-row:last-child{border-bottom:none;}

/* ── Toast ── */
#toast-root{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:8px;z-index:9999;pointer-events:none;
}
.toast{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:var(--text-1);
  color:#fff;
  border-radius:99px;
  font-size:13px;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  animation:toast-in 200ms cubic-bezier(0.34,1.3,0.64,1);
  pointer-events:auto;
  white-space:nowrap;
}
[data-theme="dark"] .toast{background:#fff;color:#111;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(0.95);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(4px) scale(0.97);}}
.toast svg{flex-shrink:0;}

/* ── Empty state ── */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  padding:48px 20px;
  color:var(--text-3);
  font-size:13px;
  text-align:center;
}
.empty svg{opacity:0.4;}

/* ── Modal ── */
.modal-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.35);
  z-index:1000;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--surface);
  border:0.5px solid var(--border-md);
  border-radius:var(--r);
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:0.5px solid var(--border);
}
.modal-title{font-size:14px;font-weight:600;}
.modal-close{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border:none;background:none;
  color:var(--text-2);cursor:pointer;border-radius:var(--r-xs);
}
.modal-close:hover{background:var(--surface-2);}
.modal-body{padding:20px;}
.modal-footer{
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;padding:14px 20px;
  border-top:0.5px solid var(--border);
}

/* ── Login ── */
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}
.login-card{
  background:var(--surface);
  border:0.5px solid var(--border-strong);
  border-radius:var(--r);
  padding:32px 36px;
  width:100%;max-width:380px;
}
.login-wordmark{font-size:14px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:4px;color:var(--text-1);}
.login-sub{font-size:13px;color:var(--text-3);margin-bottom:28px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-2);margin-bottom:6px;}
.login-err{
  border:0.5px solid var(--red);
  border-radius:var(--r-sm);
  padding:9px 12px;font-size:12px;color:var(--red);
  margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.login-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:36px;
  background:var(--text-1);color:#fff;
  border:none;border-radius:var(--r-sm);
  font-family:var(--font);font-size:13px;font-weight:500;
  cursor:pointer;margin-top:20px;
  transition:opacity 0.15s;
}
.login-btn:hover{opacity:0.85;}
.login-btn:disabled{opacity:0.4;cursor:not-allowed;}
.login-spinner{
  display:none;width:12px;height:12px;
  border:1.5px solid rgba(255,255,255,0.25);
  border-top-color:currentColor;
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Animations ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:none;}
}
.kpi,.card,.table-wrap{animation:fadeUp 0.25s ease both;}

@keyframes pulse-red{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}
.dot-red.pulse{animation:pulse-red 1.6s ease infinite;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ── Responsive ── */
/* ── Product grid (default desktop) ── */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;
}

/* ── Split main + aside layout ── */
.split-main{
  display:grid;
  grid-template-columns:1fr var(--aside,240px);
  gap:12px;
  align-items:start;
}

@media (max-width:900px){
  .sidebar{
    position:fixed;left:-260px;top:0;height:100%;z-index:100;width:240px;
    transition:left 0.25s ease;
  }
  .sidebar.mobile-open{left:0;box-shadow:0 0 40px rgba(0,0,0,0.3);}
  #sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:99;
  }
  #sidebar-overlay.visible{display:block;}
  #mobile-menu-btn{display:flex!important;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .two-col{grid-template-columns:1fr;}
  .main{padding:16px;gap:16px;}

  /* stacked side panels (expenses / top_products / activity sidebars) */
  .split-main{grid-template-columns:1fr;}

  /* product cards: 2 per row on tablets/phones */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;}

  /* page headers wrap & breathe */
  .page-header{gap:10px;}
  .page-header h1{font-size:16px;}

  /* tabs scroll horizontally instead of overflowing */
  .tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tabs::-webkit-scrollbar{display:none;}

  /* tighten table padding so it fits narrow screens */
  th{padding:11px 14px;}
  td{padding:13px 14px;}
  .cell-avatar{width:32px;height:32px;font-size:12px;}
}

@media (max-width:640px){
  .main{padding:12px;gap:14px;}

  /* full-bleed tables: let them scroll, card stays edge-to-edge */
  .table-wrap{border-radius:12px;}

  /* KPI cards single-up gets cramped — keep 2 but shrink type */
  .kpi{padding:14px 16px;}
  .kpi-value{font-size:19px;}

  /* modals fill the screen comfortably */
  .modal-backdrop{padding:12px;align-items:flex-end;}
  .modal{max-width:100%!important;border-radius:16px 16px 0 0;}
  .modal-body{padding:16px;}
  .modal-header{padding:14px 16px;}
  .modal-footer{padding:12px 16px;}

  /* two-column form fields stack */
  .form-grid-2{grid-template-columns:1fr!important;}

  /* topbar: keep title + controls tidy */
  .topbar h1{font-size:15px;}
  .theme-toggle{flex-shrink:0;}

  /* toolbar filters: search full width, selects share a row */
  .search-bar{flex:1 1 100%!important;max-width:100%!important;min-width:0!important;}
  .main select{flex:1 1 calc(50% - 4px);min-width:0;}
}

@media (max-width:400px){
  /* very small phones: still 2 product cards but tighter gap */
  .product-grid{gap:8px;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
}