@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700&family=Montserrat:wght@400;500&display=swap');

/* ── VARIABLES ─────────────────────────────────────── */
:root {
  --primary:    #0F172A;
  --secondary:  #111827;
  --accent:     #FF7A00;
  --accent-red: #EF4444;
  --accent-yel: #FFC107;
  --success:    #22C55E;
  --warning:    #F59E0B;
  --bg:         #F8FAFC;
  --card:       #FFFFFF;
  --border:     #E2E8F0;
  --text:       #111827;
  --muted:      #64748B;
  --sidebar-w:  240px;
  --topbar-h:   60px;
  --radius:     14px;
  --shadow:     0 2px 8px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--text);
       background: var(--bg); min-height: 100vh; }
h1,h2,h3,h4,h5,h6,.jost { font-family: 'Jost', sans-serif; }
a { text-decoration: none; color: inherit; }

/* Custom Premium Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,0.3) transparent; }

/* ── LAYOUT ─────────────────────────────────────────── */
.sb-wrapper { display: flex; min-height: 100vh; }
.sb-sidebar  { width: var(--sidebar-w); background: var(--primary); position: fixed;
               top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 1000;
               display: flex; flex-direction: column; transition: transform .25s ease;
               transform: translateX(0); /* Visible by default on desktop */
               -ms-overflow-style: none; scrollbar-width: none; }
.sb-sidebar::-webkit-scrollbar { display: none; }
.sb-main     { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; transition: margin-left .25s ease; }

/* Collapsed state on desktop */
body.sidebar-collapsed .sb-sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .sb-main { margin-left: 0; }
.sb-topbar   { height: var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--border);
               padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
               position: sticky; top: 0; z-index: 900; box-shadow: var(--shadow); }
.sb-content  { padding: 24px; flex: 1; }

/* Mobile sidebar overlay backdrop */
.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1999; }
@media (max-width: 768px) {
  body.sidebar-open .sb-overlay { display: block; }
}


/* ── SIDEBAR ─────────────────────────────────────────── */
/* Logo wrapper — black container, 10px padding, full sidebar width */
.sb-logo-wrap {
  background: #000;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  width: 100%;
  flex-shrink: 0;
}
.sb-logo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 80px;
}
/* Fallback text brand (when no logo is set) */
.sb-brand-text { padding: 10px 10px 6px; }
.sb-brand-text .brand-name { font-family:'Jost',sans-serif; font-weight:700; font-size:20px;
                         color:#fff; display:flex; align-items:center; gap:8px; }
.sb-brand-text .brand-name .spark { color: var(--accent); }
.sb-brand-text .brand-tag  { font-size:10px; color:rgba(255,255,255,.4); margin-top:2px; letter-spacing:.5px; text-transform:uppercase; }
/* Legacy .sb-brand if still used anywhere */
.sb-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-brand .brand-name { font-family:'Jost',sans-serif; font-weight:700; font-size:20px;
                         color:#fff; display:flex; align-items:center; gap:8px; }
.sb-brand .brand-name .spark { color: var(--accent); }
.sb-brand .brand-tag  { font-size:10px; color:rgba(255,255,255,.4); margin-top:2px; letter-spacing:.5px; text-transform:uppercase; }
.sb-nav  { padding: 12px 0; flex: 1; }
.sb-nav .nav-section { font-size:10px; color:rgba(255,255,255,.3); letter-spacing:.8px; text-transform:uppercase;
                        padding: 12px 20px 4px; font-family:'Jost',sans-serif; font-weight:600; }
.sb-nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:rgba(255,255,255,.65);
             font-family:'Jost',sans-serif; font-weight:500; font-size:14px; border-left:3px solid transparent;
             transition:all .2s; }
.sb-nav a:hover, .sb-nav a.active { color:#fff; background:rgba(255,255,255,.07); border-left-color:var(--accent); }
.sb-nav a i { font-size:16px; width:20px; flex-shrink:0; }
.sb-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); }
.sb-footer .admin-info { display:flex; align-items:center; gap:10px; }
.sb-footer .avatar { width:36px; height:36px; border-radius:50%; background:var(--accent);
                      display:flex; align-items:center; justify-content:center; color:#fff;
                      font-family:'Jost',sans-serif; font-weight:700; font-size:14px; flex-shrink:0; }
.sb-footer .admin-name { font-family:'Jost',sans-serif; font-weight:600; font-size:13px; color:#fff; }
.sb-footer .admin-role { font-size:11px; color:rgba(255,255,255,.4); }


/* ── TOPBAR ─────────────────────────────────────────── */
.topbar-title { font-family:'Jost',sans-serif; font-weight:600; font-size:18px; color:var(--text); display:inline-flex; align-items:center; white-space:nowrap; gap:6px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.btn-topbar { background:none; border:none; cursor:pointer; padding:6px 10px;
              color:var(--muted); border-radius:8px; font-size:22px; transition:all .2s;
              display:flex; align-items:center; justify-content:center; }
.btn-topbar:hover { background:var(--bg); color:var(--text); }
.topbar-search { max-width:280px; width:100%; }
@media (max-width:576px) { .topbar-search { display:none; } }

/* ── DATE PILL & DROPDOWN ──────────────────────────── */
.topbar-date-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-date-pill:hover {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(255,122,0,.08);
}
.topbar-date-pill i {
  color: var(--accent);
  font-size: 14px;
}
.topbar-date-pill .date-chevron {
  color: var(--muted);
  font-size: 11px;
  transition: transform .2s ease;
}
.topbar-date-pill.active .date-chevron {
  transform: rotate(180deg);
}

.date-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 220px;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideDown .2s ease;
}
.topbar-date-pill.active .date-dropdown {
  display: flex;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.date-dropdown .dropdown-header {
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.date-dropdown .dropdown-title {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.date-dropdown .live-time {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}
.date-dropdown .dropdown-body {
  padding: 12px;
  display: flex;
  justify-content: center;
  background: var(--bg);
}
.calendar-mini-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.calendar-mini-card .cal-month {
  background: var(--accent);
  color: #fff;
  padding: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.calendar-mini-card .cal-day {
  font-size: 38px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  padding: 8px 0 2px;
}
.calendar-mini-card .cal-weekday {
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 8px;
}

/* ── STAT CARDS ─────────────────────────────────────── */
.stat-card { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
              border:1px solid var(--border); display:flex; align-items:center; gap:16px; transition:box-shadow .2s; }
.stat-card:hover { box-shadow:var(--shadow-md); }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
              font-size:22px; flex-shrink:0; }
.stat-icon.orange { background:rgba(255,122,0,.12); color:var(--accent); }
.stat-icon.blue   { background:rgba(59,130,246,.12); color:#3B82F6; }
.stat-icon.red    { background:rgba(239,68,68,.12);  color:var(--accent-red); }
.stat-icon.green  { background:rgba(34,197,94,.12);  color:var(--success); }
.stat-icon.yellow { background:rgba(255,193,7,.12);  color:var(--accent-yel); }
.stat-val  { font-family:'Jost',sans-serif; font-weight:700; font-size:26px; color:var(--text); line-height:1; }
.stat-lbl  { font-size:12px; color:var(--muted); margin-top:3px; }

/* ── CARDS ─────────────────────────────────────────── */
.card-sb { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
            border:1px solid var(--border); }
.card-sb .card-header { padding:16px 20px; border-bottom:1px solid var(--border);
                          display:flex; align-items:center; justify-content:space-between; }
.card-sb .card-title  { font-family:'Jost',sans-serif; font-weight:600; font-size:15px; color:var(--text); }
.card-sb .card-body   { padding:20px; }

/* ── TABLES ─────────────────────────────────────────── */
.table-sb { width:100%; border-collapse:collapse; font-size:13px; }
.table-sb thead th { padding:10px 14px; background:#F8FAFC; border-bottom:2px solid var(--border);
                      font-family:'Jost',sans-serif; font-weight:600; font-size:12px;
                      color:var(--muted); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.table-sb tbody td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.table-sb tbody tr:hover { background:#FAFBFC; }
.table-sb tbody tr:last-child td { border-bottom:none; }
.table-wrapper { overflow-x:auto; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary-sb { background:var(--accent); color:#fff; border:none; border-radius:10px;
                   height:42px; padding:0 20px; font-family:'Jost',sans-serif; font-weight:600;
                   font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
                   transition:all .2s; white-space:nowrap; }
.btn-primary-sb:hover { background:#e06d00; box-shadow:0 4px 12px rgba(255,122,0,.3); }
.btn-secondary-sb { background:var(--primary); color:#fff; border:none; border-radius:10px;
                     height:42px; padding:0 20px; font-family:'Jost',sans-serif; font-weight:600;
                     font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
                     transition:all .2s; }
.btn-outline-sb { background:none; color:var(--text); border:1px solid var(--border); border-radius:10px;
                   height:42px; padding:0 16px; font-family:'Jost',sans-serif; font-weight:500;
                   font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
                   transition:all .2s; }
.btn-outline-sb:hover { border-color:var(--accent); color:var(--accent); }
.btn-icon { width:36px; height:36px; border:none; border-radius:8px; cursor:pointer;
             display:inline-flex; align-items:center; justify-content:center; font-size:15px;
             transition:all .2s; background:var(--bg); color:var(--muted); }
.btn-icon:hover { background:var(--accent); color:#fff; }
.btn-icon.danger:hover { background:var(--accent-red); color:#fff; }
.btn-icon.success:hover { background:var(--success); color:#fff; }

/* ── FORMS ─────────────────────────────────────────── */
.form-label-sb { font-family:'Jost',sans-serif; font-weight:600; font-size:13px;
                  color:var(--text); display:block; margin-bottom:6px; }
.form-input-sb { height:44px; width:100%; border:1px solid var(--border); border-radius:10px;
                  padding:0 14px; font-family:'Montserrat',sans-serif; font-size:14px;
                  color:var(--text); background:var(--card); outline:none; transition:border .2s; }
.form-input-sb:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,0,.12); }
.form-textarea-sb { width:100%; border:1px solid var(--border); border-radius:10px;
                     padding:10px 14px; font-family:'Montserrat',sans-serif; font-size:14px;
                     color:var(--text); background:var(--card); outline:none; transition:border .2s;
                     resize:vertical; min-height:80px; }
.form-textarea-sb:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,0,.12); }
.form-select-sb { height:44px; width:100%; border:1px solid var(--border); border-radius:10px;
                   padding:0 14px; font-family:'Montserrat',sans-serif; font-size:14px;
                   color:var(--text); background:var(--card); outline:none; cursor:pointer;
                   transition:border .2s; appearance:none;
                   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748B' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
                   background-repeat:no-repeat; background-position:right 12px center; background-size:14px; }
.form-select-sb:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,0,.12); }
.form-group { margin-bottom:16px; }

/* ── BADGES ─────────────────────────────────────────── */
.badge-sb { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px;
             font-family:'Jost',sans-serif; font-weight:600; font-size:11px; }
.badge-success { background:rgba(34,197,94,.12); color:#16A34A; }
.badge-danger  { background:rgba(239,68,68,.12);  color:#DC2626; }
.badge-warning { background:rgba(245,158,11,.12); color:#D97706; }
.badge-info    { background:rgba(59,130,246,.12);  color:#2563EB; }
.badge-muted   { background:rgba(100,116,139,.12); color:#475569; }
.badge-orange  { background:rgba(255,122,0,.12);   color:var(--accent); }

/* ── SEARCH BAR ─────────────────────────────────────── */
.search-bar { position:relative; }
.search-bar input { height:40px; padding-left:38px; padding-right:14px; border:1px solid var(--border);
                     border-radius:10px; font-size:13px; width:260px; outline:none;
                     font-family:'Montserrat',sans-serif; transition:all .2s; background:var(--bg); }
.search-bar input:focus { border-color:var(--accent); background:var(--card); width:300px; box-shadow:0 0 0 3px rgba(255,122,0,.10); }
.search-bar i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; }

/* ── FLASH TOAST ─────────────────────────────────────── */
.toast-container { position:fixed; top:80px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast-sb { padding:12px 20px; border-radius:10px; font-family:'Jost',sans-serif; font-weight:600; font-size:13px;
             box-shadow:var(--shadow-md); animation:slideIn .3s ease; display:flex; align-items:center; gap:8px; min-width:260px; }
.toast-success { background:var(--success); color:#fff; }
.toast-danger  { background:var(--accent-red); color:#fff; }
.toast-warning { background:var(--warning); color:#fff; }
@keyframes slideIn { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── MODALS ─────────────────────────────────────────── */
.modal-backdrop-sb { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:2000;
                      display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop-sb.show { display:flex; }
.modal-sb { background:var(--card); border-radius:var(--radius); width:100%; max-width:560px;
             box-shadow:0 20px 60px rgba(0,0,0,.15); animation:modalIn .25s ease; }
.modal-sb .modal-head { padding:18px 24px; border-bottom:1px solid var(--border);
                          display:flex; align-items:center; justify-content:space-between; }
.modal-sb .modal-title { font-family:'Jost',sans-serif; font-weight:700; font-size:17px; }
.modal-sb .modal-body  { padding:24px; }
.modal-sb .modal-foot  { padding:16px 24px; border-top:1px solid var(--border);
                           display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.modal-close { background:none; border:none; cursor:pointer; font-size:20px; color:var(--muted); padding:4px; }
.modal-close:hover { color:var(--text); }
@keyframes modalIn { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }

/* ── PRODUCT CARDS (BILLING) ─────────────────────────── */
.product-card { background:var(--card); border-radius:12px; border:2px solid var(--border);
                 cursor:pointer; transition:all .2s; overflow:hidden; position:relative; }
.product-card:hover { border-color:var(--accent); box-shadow:0 4px 16px rgba(255,122,0,.15); transform:translateY(-2px); }
.product-card.out-of-stock { opacity:.5; cursor:not-allowed; }
.product-card .pc-img { width:100%; aspect-ratio:1; object-fit:cover; background:#f1f5f9;
                          display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--muted); }
.product-card .pc-img img { width:100%; height:100%; object-fit:cover; }
.product-card .pc-body { padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.product-card .pc-brand { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); }
.product-card .pc-name { font-family:'Jost',sans-serif; font-weight:600; font-size:13px; color:var(--text); line-height:1.35; height:34px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:2px; }
.pc-meta-row { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:4px; }
.pc-price-tag { font-family:'Jost',sans-serif; font-weight:700; font-size:13px; color:var(--accent); background:rgba(255,122,0,.08); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.pc-stock-tag { font-family:'Jost',sans-serif; font-weight:600; font-size:11px; padding:3px 8px; border-radius:6px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.pc-stock-tag.in-stock { background:rgba(34,197,94,.1); color:#16a34a; }
.pc-stock-tag.low-stock { background:rgba(245,158,11,.1); color:#d97706; }
.pc-stock-tag.out-of-stock { background:rgba(239,68,68,.1); color:#dc2626; }
.product-card .pc-badge { position:absolute; top:8px; right:8px; z-index:10; }

/* ── BILLING LAYOUT ─────────────────────────────────── */
.billing-wrap  { display:grid; grid-template-columns:1fr 380px; gap:0; height:calc(100vh - var(--topbar-h)); overflow:hidden; }
.bill-cats     { display:flex; gap:8px; overflow-x:auto; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--border); white-space:nowrap; -ms-overflow-style:none; scrollbar-width:none; }
.bill-cats::-webkit-scrollbar { display:none; }
.bill-cats .bill-cat-link { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--bg); color:var(--muted); border:1px solid var(--border); border-radius:20px; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; transition:all .2s ease; text-decoration:none; cursor:pointer; }
.bill-cats .bill-cat-link:hover { color:var(--text); border-color:var(--text); background:var(--card); }
.bill-cats .bill-cat-link.active { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 4px 10px rgba(255,122,0,.25); }
.bill-cats .bill-cat-link i { font-size:14px; }
.bill-products { display:flex; flex-direction:column; overflow:hidden; background:var(--bg); height:100%; }
.bill-products .top-bar { display:flex; gap:10px; padding:12px 16px; align-items:center; border-bottom:1px solid var(--border); background:var(--card); }
.bill-products .products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); grid-auto-rows:max-content; align-content:start; gap:12px; padding:16px; overflow-y:auto; flex:1; }
.bill-cart     { background:var(--card); border-left:1px solid var(--border); display:flex; flex-direction:column; height:100%; overflow:hidden; }
.bill-cart .cart-head { padding:14px 16px; border-bottom:1px solid var(--border); }
.bill-cart .cart-title { font-family:'Jost',sans-serif; font-weight:700; font-size:16px; }
.bill-cart .cart-customer { padding:12px 16px; border-bottom:1px solid var(--border); }
.bill-cart .cart-items { flex:1; overflow-y:auto; padding:12px 16px; }
.cart-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }
.ci-name  { font-family:'Jost',sans-serif; font-weight:600; font-size:12px; flex:1; }
.ci-qty   { display:flex; align-items:center; gap:4px; }
.ci-qty button { width:26px; height:26px; border:1px solid var(--border); background:var(--bg);
                   border-radius:6px; cursor:pointer; font-size:14px; font-weight:600;
                   display:flex; align-items:center; justify-content:center; transition:all .2s; }
.ci-qty button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.ci-qty input { width:42px; height:26px; text-align:center; border:1px solid var(--border); border-radius:6px;
                 font-size:13px; font-family:'Jost',sans-serif; font-weight:600; }
.ci-total { font-family:'Jost',sans-serif; font-weight:700; font-size:12px; color:var(--accent); min-width:52px; text-align:right; }
.ci-del   { background:none; border:none; cursor:pointer; color:var(--muted); font-size:14px; padding:2px; }
.ci-del:hover { color:var(--accent-red); }
.cart-totals { padding:14px 16px; border-top:1px solid var(--border); }
.cart-row    { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; }
.cart-row.grand { font-family:'Jost',sans-serif; font-weight:700; font-size:16px; padding-top:8px;
                   border-top:2px solid var(--border); margin-top:6px; }
.cart-actions { padding:12px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }

/* ── LIST VIEW ─────────────────────────────────────── */
.btn-view-toggle.active { background:var(--bg) !important; color:var(--accent) !important; }
.products-grid.list-view { display:flex; flex-direction:column; gap:8px; }
.product-row-item { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--card); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all .2s ease; }
.product-row-item:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow); }
.product-row-item.out-of-stock { opacity:0.6; cursor:not-allowed; }
.product-row-item .pri-img { width:40px; height:40px; background:var(--bg); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.product-row-item .pri-img img { width:100%; height:100%; object-fit:cover; }
.product-row-item .pri-img i { font-size:20px; color:var(--accent); }
.product-row-item .pri-info { flex:1; min-width:0; }
.product-row-item .pri-name { font-family:'Jost',sans-serif; font-weight:600; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-row-item .pri-brand { font-size:11px; color:var(--muted); margin-top:1px; }
.product-row-item .pri-price { font-family:'Jost',sans-serif; font-weight:700; font-size:14px; color:var(--accent); min-width:80px; }
.product-row-item .pri-stock { font-size:12px; color:var(--muted); min-width:120px; }
.product-row-item .pri-action { width:32px; height:32px; border-radius:50%; background:var(--bg); color:var(--text); display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.product-row-item:hover .pri-action { background:var(--accent); color:#fff; }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 24px; color:var(--muted); }
.empty-state i { font-size:48px; margin-bottom:12px; opacity:.4; display:block; }
.empty-state p { font-size:14px; }

/* ── PAGINATION ─────────────────────────────────────── */
.pagination-sb { display:flex; gap:4px; align-items:center; justify-content:center; margin-top:16px; }
.pagination-sb a,.pagination-sb span { width:34px; height:34px; display:flex; align-items:center; justify-content:center;
                                         border-radius:8px; font-family:'Jost',sans-serif; font-weight:600; font-size:13px;
                                         border:1px solid var(--border); color:var(--text); transition:all .2s; }
.pagination-sb a:hover { border-color:var(--accent); color:var(--accent); }
.pagination-sb span.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── STATUS TOGGLE ─────────────────────────────────── */
.toggle-sb { position:relative; display:inline-block; width:40px; height:22px; }
.toggle-sb input { opacity:0; width:0; height:0; }
.toggle-sb .slider { position:absolute; inset:0; background:#cbd5e1; border-radius:22px; cursor:pointer; transition:.3s; }
.toggle-sb .slider::before { content:''; position:absolute; width:16px; height:16px;
                               left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
.toggle-sb input:checked + .slider { background:var(--success); }
.toggle-sb input:checked + .slider::before { transform:translateX(18px); }

/* ── PAGE HEADER ─────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h1 { font-family:'Jost',sans-serif; font-weight:700; font-size:22px; color:var(--text); }
.page-header .sub { font-size:13px; color:var(--muted); margin-top:2px; }

/* ── INVOICE PRINT ─────────────────────────────────── */
@media print {
  .sb-sidebar,.sb-topbar,.no-print { display:none !important; }
  .sb-main { margin-left:0 !important; }
  body { background:#fff; }
}

/* ── RESPONSIVE ─────────────────────────────────────── */
.mobile-cart-bar {
  display: none;
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: var(--primary);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 99;
  animation: slideUp 0.3s ease;
}
.mobile-cart-bar .mcb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-cart-bar .mcb-icon {
  position: relative;
  font-size: 18px;
}
.mobile-cart-bar .mcb-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  line-height: 1;
}
.mobile-cart-bar .mcb-total {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.mobile-cart-bar .mcb-right {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 1023px) {
  .billing-wrap {
    display: block;
    position: relative;
  }
  .bill-products {
    width: 100% !important;
    height: 100% !important;
  }
  .bill-cart {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2010;
    border-left: none;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bill-cart.active {
    transform: translateX(0);
  }
  .btn-close-cart {
    display: inline-flex !important;
  }
  .mobile-cart-bar.visible {
    display: flex;
  }
  .bill-products.has-mobile-bar .products-grid {
    padding-bottom: 80px;
  }
}

@media (max-width:768px) {
  .sb-sidebar {
    transform: translateX(-100%) !important;
    z-index: 2000 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  body.sidebar-open .sb-sidebar { transform: translateX(0) !important; }
  .sb-main { margin-left: 0 !important; }
  .sb-topbar { padding:0 16px; }
  .sb-content { padding:16px; }
  .bill-cats { padding: 10px 12px; }
  .search-bar input { width:100%; }
  .topbar-date-pill { display: none !important; }
  .topbar-title { font-size: 15px !important; }
  .hide-mobile { display: none !important; }
}

/* ── NEW RESPONSIVE RULES ─────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.invoice-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-grid .card-sb {
    grid-column: span 1 !important;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
  .form-grid-2 .form-group {
    grid-column: span 1 !important;
  }
  .invoice-header-grid {
    grid-template-columns: 1fr;
  }
  .invoice-header-grid div {
    text-align: left !important;
  }
}

@media (max-width: 576px) {

  /* ── GLOBAL: no horizontal overflow anywhere ── */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* ── LAYOUT: sidebar as overlay ── */
  .sb-sidebar {
    transform: translateX(-100%);
    z-index: 2000;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  body.sidebar-open .sb-sidebar { transform: translateX(0); }
  .sb-main { margin-left: 0 !important; width: 100vw; max-width: 100vw; overflow-x: hidden; }
  .sb-content { padding: 12px !important; overflow-x: hidden; }

  /* ── TOPBAR ── */
  .topbar-title { font-size: 15px !important; }
  .topbar-date-pill { display: none !important; }
  .topbar-search { display: none !important; }

  /* ── PAGE HEADER ── */
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-header .btn-primary-sb,
  .page-header .btn-outline-sb { width: 100%; justify-content: center; }

  /* ── GRIDS ── */
  .dashboard-grid,
  .settings-grid,
  .form-grid-2,
  .invoice-header-grid { grid-template-columns: 1fr !important; }
  .settings-grid .card-sb,
  .form-grid-2 .form-group { grid-column: span 1 !important; }

  /* ── CARDS ── */
  .card-sb .card-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── FILTER FORMS ── */
  .card-body form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .card-body form .search-bar,
  .card-body form select,
  .card-body form input,
  .card-body form button,
  .card-body form a { width: 100% !important; max-width: 100% !important; }
  .search-bar input { width: 100% !important; }

  /* ── MODALS ── */
  .modal-sb { margin: 10px; max-width: calc(100% - 20px) !important; }
  .modal-sb .modal-body { padding: 14px; }
  .modal-sb .modal-head,
  .modal-sb .modal-foot { padding: 12px 14px; }
  .modal-sb .modal-body div[style*="display:grid"] { grid-template-columns: 1fr !important; }

  /* ── HIDE NON-ESSENTIAL TABLE COLUMNS ── */
  .hide-table-mobile { display: none !important; }

  /* ── TABLE-WRAPPER: no scroll on card-transform pages ── */
  .page-products .table-wrapper,
  .page-categories .table-wrapper,
  .page-brands .table-wrapper,
  .page-stock .table-wrapper,
  .page-invoices .table-wrapper { overflow-x: visible !important; overflow-x: unset !important; }

  /* ══ CARD-STACK TABLE TRANSFORM (all data pages) ══════ */

  /* Common base for all transforming tables */
  .page-products .table-sb,
  .page-categories .table-sb,
  .page-brands .table-sb,
  .page-stock .table-sb,
  .page-invoices .table-sb { width: 100% !important; display: block !important; }

  .page-products .table-sb thead,
  .page-categories .table-sb thead,
  .page-brands .table-sb thead,
  .page-stock .table-sb thead,
  .page-invoices .table-sb thead { display: none !important; }

  .page-products .table-sb tbody,
  .page-categories .table-sb tbody,
  .page-brands .table-sb tbody,
  .page-stock .table-sb tbody,
  .page-invoices .table-sb tbody { display: block !important; width: 100% !important; }

  .page-products .table-sb tbody tr,
  .page-categories .table-sb tbody tr,
  .page-brands .table-sb tbody tr,
  .page-stock .table-sb tbody tr,
  .page-invoices .table-sb tbody tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--card) !important;
    gap: 6px !important;
    position: relative;
  }
  .page-products .table-sb tbody tr:last-child td,
  .page-categories .table-sb tbody tr:last-child td,
  .page-brands .table-sb tbody tr:last-child td,
  .page-stock .table-sb tbody tr:last-child td,
  .page-invoices .table-sb tbody tr:last-child td { border-bottom: none !important; }

  .page-products .table-sb tbody td,
  .page-categories .table-sb tbody td,
  .page-brands .table-sb tbody td,
  .page-stock .table-sb tbody td,
  .page-invoices .table-sb tbody td {
    display: block !important;
    padding: 2px 0 !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    vertical-align: middle;
  }

  /* ── PRODUCTS: image pinned left, info stacked right ── */
  .page-products .table-sb tbody tr {
    padding-left: 66px !important;
    min-height: 70px;
  }
  .page-products .table-sb tbody tr td:nth-child(1) {
    position: absolute !important;
    left: 12px; top: 12px;
    width: 42px !important;
  }
  .page-products .table-sb tbody tr td:nth-child(5),
  .page-products .table-sb tbody tr td:nth-child(6) {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--border) !important;
    padding-top: 6px !important;
  }
  .page-products .table-sb tbody tr td:nth-child(5)::before { content: "Price:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-products .table-sb tbody tr td:nth-child(6)::before { content: "Stock:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-products .table-sb tbody tr td:nth-child(8) {
    display: flex !important; justify-content: flex-end; gap: 8px;
    border-top: 1px solid var(--border) !important; padding-top: 8px !important;
  }

  /* ── CATEGORIES: icon pinned left ── */
  .page-categories .table-sb tbody tr {
    padding-left: 50px !important;
    min-height: 60px;
  }
  .page-categories .table-sb tbody tr td:nth-child(1) {
    position: absolute !important;
    left: 12px; top: 12px; width: 26px !important;
  }
  .page-categories .table-sb tbody tr td:nth-child(5) {
    display: flex !important; justify-content: space-between; align-items: center;
    border-top: 1px dashed var(--border) !important; padding-top: 6px !important;
  }
  .page-categories .table-sb tbody tr td:nth-child(5)::before { content: "Status:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-categories .table-sb tbody tr td:nth-child(6) {
    display: flex !important; justify-content: flex-end; gap: 8px;
    border-top: 1px solid var(--border) !important; padding-top: 8px !important;
  }

  /* ── BRANDS: logo pinned left ── */
  .page-brands .table-sb tbody tr {
    padding-left: 64px !important;
    min-height: 64px;
  }
  .page-brands .table-sb tbody tr td:nth-child(1) {
    position: absolute !important;
    left: 12px; top: 12px; width: 40px !important;
  }
  .page-brands .table-sb tbody tr td:nth-child(4) {
    display: flex !important; justify-content: space-between; align-items: center;
    border-top: 1px dashed var(--border) !important; padding-top: 6px !important;
  }
  .page-brands .table-sb tbody tr td:nth-child(4)::before { content: "Status:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-brands .table-sb tbody tr td:nth-child(5) {
    display: flex !important; justify-content: flex-end; gap: 8px;
    border-top: 1px solid var(--border) !important; padding-top: 8px !important;
  }

  /* ── STOCK ALERTS ── */
  .page-stock .low-stock-table tbody tr td:nth-child(3) {
    display: flex !important; justify-content: space-between; align-items: center;
    border-top: 1px dashed var(--border) !important; padding-top: 6px !important;
  }
  .page-stock .low-stock-table tbody tr td:nth-child(3)::before { content: "Stock:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-stock .low-stock-table tbody tr td:nth-child(6) {
    display: flex !important; justify-content: flex-end;
    border-top: 1px solid var(--border) !important; padding-top: 8px !important;
  }
  /* ── STOCK LOGS ── */
  .page-stock .stock-logs-table tbody tr td:nth-child(2),
  .page-stock .stock-logs-table tbody tr td:nth-child(3) {
    display: flex !important; justify-content: space-between; align-items: center;
    border-top: 1px dashed var(--border) !important; padding-top: 6px !important;
  }
  .page-stock .stock-logs-table tbody tr td:nth-child(2)::before { content: "Type:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-stock .stock-logs-table tbody tr td:nth-child(3)::before { content: "Qty:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }

  /* ── INVOICES ── */
  .page-invoices .table-sb tbody tr td:nth-child(1) { font-size: 15px; font-weight: 700; }
  .page-invoices .table-sb tbody tr td:nth-child(6) {
    display: flex !important; justify-content: space-between; align-items: center;
    border-top: 1px dashed var(--border) !important; padding-top: 6px !important;
  }
  .page-invoices .table-sb tbody tr td:nth-child(6)::before { content: "Total:"; color: var(--muted); font-weight: 600; font-family: 'Jost',sans-serif; }
  .page-invoices .table-sb tbody tr td:nth-child(9) {
    display: flex !important; justify-content: flex-end; gap: 8px;
    border-top: 1px solid var(--border) !important; padding-top: 8px !important;
  }

  /* ── DASHBOARD stat cards ── */
  .stat-card { gap: 12px; }
  .stat-val { font-size: 22px !important; }
}