@media (max-width: 768px) {
   .sidebar {
      transform: translateX(-100%);
      position: fixed;
   }
   .sidebar.active {
      transform: translateX(0);
   }
   .main-content {
      margin-left: 0 !important;
      width: 100%;
   }
}

/* Optional: Improve table responsiveness on mobile */
.table {
   min-width: 0;
   width: 100%;
}
.table-container {
   overflow-x: auto;
}
/* --- Mobile fix: prevent select dropdown overflow in filters --- */
@media (max-width: 600px) {
   .filters select.form-control,
   .filter-group select.form-control {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
   }
   .filters,
   .filter-group {
      overflow: visible !important;
      position: relative;
   }
}
/* ==========================================================================
   InventoryPro — style.css
   Mobile-first | Dark default | Light theme via html.light-mode
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   1. CSS TOKENS — dark theme defaults
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:           #0b0f1a;
  --bg-2:         #111827;
  --bg-3:         #1a2235;
  --bg-card:      #151e2e;
  --bg-hover:     #1e293b;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-light: rgba(255,255,255,0.12);

  /* Brand colours */
  --primary:      #0ea5e9;
  --primary-dim:  rgba(14,165,233,0.15);
  --primary-glow: rgba(14,165,233,0.35);
  --accent:       #06b6d4;
  --accent-2:     #8b5cf6;

  /* Semantic */
  --success:      #10b981;  --success-dim:  rgba(16,185,129,0.15);
  --warning:      #f59e0b;  --warning-dim:  rgba(245,158,11,0.15);
  --danger:       #ef4444;  --danger-dim:   rgba(239,68,68,0.15);

  /* Text */
  --fg:           #f1f5f9;
  --fg-2:         #cbd5e1;
  --muted:        #64748b;
  --muted-light:  #94a3b8;

  /* Typography */
  --font:         'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Layout */
  --sidebar-w:    240px;
  --topbar-h:     56px;

  /* Shape */
  --radius:       10px;
  --radius-lg:    16px;
  --radius-sm:    6px;

  /* Effects */
  --shadow:       0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.5);
  --transition:   0.18s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. LIGHT THEME — overrides via html.light-mode
   ══════════════════════════════════════════════════════════════════════════ */
html.light-mode {
  --bg:           #f0f4f8;
  --bg-2:         #ffffff;
  --bg-3:         #e8edf3;
  --bg-card:      #ffffff;
  --bg-hover:     #eaf0f8;
  --border:       rgba(0,0,0,0.09);
  --border-light: rgba(0,0,0,0.14);
  --primary:      #0284c7;
  --primary-dim:  rgba(2,132,199,0.10);
  --primary-glow: rgba(2,132,199,0.25);
  --accent:       #0891b2;
  --accent-2:     #7c3aed;
  --success:      #059669;  --success-dim:  rgba(5,150,105,0.12);
  --warning:      #d97706;  --warning-dim:  rgba(217,119,6,0.12);
  --danger:       #dc2626;  --danger-dim:   rgba(220,38,38,0.12);
  --fg:           #0f172a;
  --fg-2:         #334155;
  --muted:        #64748b;
  --muted-light:  #475569;
  --shadow:       0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.14);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. RESET & BASE
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; }
body {
  font-family:var(--font); background:var(--bg); color:var(--fg);
  line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}
a { color:var(--primary); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--accent); }
img { max-width:100%; display:block; }
::selection { background:var(--primary-dim); color:var(--primary); }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--bg-hover); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   4. LAYOUT — mobile-first (sidebar hidden, topbar shown)
   ══════════════════════════════════════════════════════════════════════════ */
.container { display:flex; flex-direction:column; min-height:100vh; }

.sidebar {
  display:none;
  width:var(--sidebar-w); min-height:100vh;
  background:var(--bg-card); border-right:1px solid var(--border);
  flex-direction:column; position:fixed; top:0; left:0;
  z-index:300; overflow-y:auto;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.sidebar .logo { padding:22px 20px 18px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.sidebar .logo h2 { font-size:17px; font-weight:700; letter-spacing:-0.3px; color:var(--fg); display:flex; align-items:center; gap:10px; }
.sidebar .logo h2 i { color:var(--primary); font-size:20px; }
.sidebar .logo p { font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-top:4px; padding-left:30px; }

.nav-menu { list-style:none; padding:8px 12px; flex:1; display:flex; flex-direction:column; }
.nav-item a, .nav-item button {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:var(--radius-sm); color:var(--muted-light); font-size:14px;
  font-weight:500; transition:all var(--transition); margin-bottom:2px;
  background:none; border:none; cursor:pointer; font-family:var(--font); width:100%;
}
.nav-item a i, .nav-item button i { width:18px; text-align:center; font-size:15px; flex-shrink:0; }
.nav-item a:hover, .nav-item button:hover { background:var(--bg-hover); color:var(--fg); }
.nav-item.active a { background:var(--primary-dim); color:var(--primary); }
.nav-item.active a i { color:var(--primary); }

/* Sidebar footer */
.sidebar-footer { padding:14px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.sidebar-user { display:flex; align-items:center; gap:10px; min-width:0; }
.sidebar-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.sidebar-user-info { min-width:0; }
.sidebar-user-name { font-size:13px; font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-role { font-size:11px; color:var(--muted); text-transform:capitalize; }
.sidebar-logout { width:32px; height:32px; border-radius:var(--radius-sm); background:transparent; border:1px solid var(--border); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:all var(--transition); text-decoration:none; }
.sidebar-logout:hover { background:var(--danger-dim); color:var(--danger); border-color:var(--danger); }

/* Sidebar overlay (mobile) */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); z-index:149; opacity:0; transition:opacity 0.25s ease; }
.sidebar-overlay.show { display:block; opacity:1; }

/* Main content: mobile base — offset for topbar only */
.main-content {
  margin-left:0; flex:1; padding:16px 14px;
  padding-top:calc(var(--topbar-h) + 16px); min-width:0;
  transition: margin-left 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. MOBILE TOPBAR
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-topbar {
  display:flex; align-items:center; gap:10px;
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  background:var(--bg-card); border-bottom:1px solid var(--border);
  padding:0 14px; z-index:200;
  transition:box-shadow 0.2s ease, background 0.25s ease, border-color 0.25s ease;
}
.mobile-topbar.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.35); }

.hamburger {
  width:38px; height:38px; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:var(--radius-sm); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  cursor:pointer; padding:0; flex-shrink:0; transition:all var(--transition);
}
.hamburger:hover, .hamburger.open { background:var(--primary-dim); border-color:var(--primary); }
.hamburger span { display:block; width:16px; height:2px; background:var(--fg-2); border-radius:2px; transition:all 0.25s ease; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--fg); flex:1; min-width:0; }
.mobile-brand i { color:var(--primary); font-size:18px; flex-shrink:0; }
.mobile-brand span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Theme toggle pill — topbar */
.mobile-theme-btn {
  flex-shrink:0; width:36px; height:36px;
  background:var(--bg-hover); border:1px solid var(--border-light);
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  color:var(--fg-2); font-size:15px; cursor:pointer; transition:all var(--transition);
}
.mobile-theme-btn:hover { background:var(--primary-dim); border-color:var(--primary); color:var(--primary); }

/* ══════════════════════════════════════════════════════════════════════════
   6. MOBILE NAV DROPDOWN
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-nav-dropdown {
  display:block; position:fixed; top:var(--topbar-h); left:0; right:0;
  background:var(--bg-card); border-bottom:1px solid var(--border-light);
  z-index:199; transform:translateY(-10px); opacity:0; visibility:hidden;
  pointer-events:none; max-height:calc(100dvh - var(--topbar-h)); overflow-y:auto;
  transition:transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
}
.mobile-nav-dropdown.open {
  transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0s;
}
.mobile-nav-header { padding:16px; border-bottom:1px solid var(--border); background:var(--bg-2); }
.mobile-nav-user { display:flex; align-items:center; gap:12px; }
.mobile-nav-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; }
.mobile-nav-name { font-size:15px; font-weight:600; color:var(--fg); }
.mobile-nav-role { font-size:12px; color:var(--muted); margin-top:2px; }
.mobile-nav-links { padding:8px 10px; }
.mobile-nav-item {
  display:flex; align-items:center; gap:14px; padding:13px 14px;
  border-radius:var(--radius-sm); color:var(--fg-2); font-size:15px; font-weight:500;
  text-decoration:none; transition:all var(--transition); margin-bottom:2px; border:1px solid transparent;
}
.mobile-nav-item i { width:20px; text-align:center; font-size:16px; color:var(--muted); transition:color var(--transition); flex-shrink:0; }
.mobile-nav-item:hover, .mobile-nav-item.active { background:var(--primary-dim); border-color:rgba(14,165,233,0.2); color:var(--primary); }
.mobile-nav-item:hover i, .mobile-nav-item.active i { color:var(--primary); }
.mobile-theme-row { font-family:var(--font); color:var(--fg-2); }
.mobile-nav-footer { padding:12px 20px 18px; border-top:1px solid var(--border); }
.mobile-logout-btn { display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; background:var(--danger-dim); border:1px solid rgba(239,68,68,0.25); border-radius:var(--radius-sm); color:var(--danger); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:all var(--transition); }
.mobile-logout-btn:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

/* Page header */
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.header h1 { font-size:17px; font-weight:700; letter-spacing:-0.4px; display:flex; align-items:center; gap:10px; color:var(--fg); }
.header h1 i { color:var(--primary); font-size:20px; }
.header .user-menu { display:none; }

.user-menu { display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; background:var(--bg-card); border:1px solid var(--border); border-radius:40px; font-size:13px; font-weight:500; color:var(--fg-2); }
.user-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════════════
   7. CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:20px; transition:background 0.25s ease, border-color 0.25s ease; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.card-header h3 { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; color:var(--fg); }
.card-header h3 i { color:var(--primary); }

/* ══════════════════════════════════════════════════════════════════════════
   8. STATS GRID — 1 col mobile, scales up
   ══════════════════════════════════════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; position:relative; overflow:hidden;
  transition:transform var(--transition), border-color var(--transition), background 0.25s ease;
  display:flex; align-items:center; gap:12px;
}
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:0; transition:opacity var(--transition); }
.stat-card:hover { transform:translateY(-2px); border-color:var(--border-light); }
.stat-card:hover::before { opacity:1; }
.stat-icon { width:38px; height:38px; background:var(--primary-dim); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:15px; flex-shrink:0; }
.stat-value { font-size:18px; font-weight:700; letter-spacing:-0.5px; color:var(--fg); line-height:1.1; margin-bottom:3px; }
.stat-label { font-size:11px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.stat-trend { position:absolute; top:14px; right:14px; font-size:12px; }
.trend-up { color:var(--success); } .trend-down { color:var(--danger); }

/* ══════════════════════════════════════════════════════════════════════════
   9. BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; transition:all var(--transition); white-space:nowrap; text-decoration:none; line-height:1; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.btn:hover { background:var(--accent); transform:translateY(-1px); box-shadow:0 4px 14px var(--primary-glow); }
.btn:active { transform:translateY(0); }
.btn-secondary { background:var(--bg-hover); color:var(--fg-2); border:1px solid var(--border-light); }
.btn-secondary:hover { background:var(--bg-3); color:var(--fg); box-shadow:none; }
.btn-success { background:var(--success); }
.btn-success:hover { background:#0da271; box-shadow:0 4px 14px rgba(16,185,129,.35); }
.btn-danger  { background:var(--danger); }
.btn-danger:hover  { background:#dc2626; box-shadow:0 4px 14px rgba(239,68,68,.35); }
.btn-warning { background:var(--warning); color:#000; }
.btn-warning:hover { background:#d97706; box-shadow:0 4px 14px rgba(245,158,11,.35); }
.btn-outline { background:transparent; color:var(--primary); border:1px solid var(--primary); }
.btn-outline:hover { background:var(--primary-dim); }
.btn-sm  { padding:8px 12px; font-size:12px; }
.btn-large { padding:14px 24px; font-size:15px; width:100%; justify-content:center; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--bg-hover); border:1px solid var(--border); color:var(--muted-light); cursor:pointer; transition:all var(--transition); font-size:13px; }
.btn-icon:hover { background:var(--primary-dim); color:var(--primary); border-color:var(--primary); }
.btn-icon.delete:hover { background:var(--danger-dim); color:var(--danger); border-color:var(--danger); }
.action-buttons { display:flex; flex-direction:column; gap:8px; }
.action-buttons .btn { justify-content:center; }

/* ══════════════════════════════════════════════════════════════════════════
   10. FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin-bottom:7px; letter-spacing:0.2px; }
.form-label.required::after { content:' *'; color:var(--danger); }
.form-control {
  width:100%; padding:12px 14px; background:var(--bg-2);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--fg); font-family:var(--font); font-size:16px; /* 16px prevents iOS zoom */
  transition:border-color var(--transition), box-shadow var(--transition), background 0.25s ease; appearance:none;
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-dim); }
.form-control::placeholder { color:var(--muted); }
textarea.form-control { resize:vertical; min-height:90px; line-height:1.5; }
select.form-control { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; cursor:pointer; }
.form-row,.form-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.help-text { font-size:12px; color:var(--muted); margin-top:5px; display:block; }
.form-hint { font-size:12px; color:var(--muted); margin-top:4px; }
.password-strength { height:3px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
.password-strength-bar { height:100%; border-radius:2px; transition:width 0.3s,background 0.3s; width:0; }
.password-strength-weak   { width:30%; background:var(--danger); }
.password-strength-medium { width:65%; background:var(--warning); }
.password-strength-strong { width:100%; background:var(--success); }

/* ══════════════════════════════════════════════════════════════════════════
   11. TABLES
   ══════════════════════════════════════════════════════════════════════════ */
.table-container,.table-responsive { overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--border); -webkit-overflow-scrolling:touch; }
table,.table,.reports-table,.data-table { width:100%; border-collapse:collapse; font-size:13px; min-width:540px; }
th { background:var(--bg-2); color:var(--muted-light); font-size:11px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; transition:background 0.25s ease; }
td { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--fg-2); vertical-align:middle; font-size:13px; transition:color 0.25s ease; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:var(--bg-hover); }
.hide-mobile { display:none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   12. BADGES & STATUS
   ══════════════════════════════════════════════════════════════════════════ */
.badge,.status-badge,.type-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:0.3px; white-space:nowrap; }
.status-in_stock,.badge-success    { background:var(--success-dim); color:var(--success); }
.status-low_stock,.badge-warning   { background:var(--warning-dim); color:var(--warning); }
.status-out_of_stock,.badge-danger { background:var(--danger-dim);  color:var(--danger);  }
.status-active   { background:var(--success-dim); color:var(--success); }
.status-inactive { background:var(--bg-hover); color:var(--muted); }
.status-suspended{ background:var(--danger-dim); color:var(--danger); }
.type-in  { background:var(--success-dim); color:var(--success); }
.type-out { background:var(--danger-dim);  color:var(--danger);  }
.type-adjustment { background:var(--warning-dim); color:var(--warning); }
.type-sale { background:var(--primary-dim); color:var(--primary); }
.serial-badge { display:inline-flex; align-items:center; gap:5px; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px 8px; font-family:var(--font-mono); font-size:12px; color:var(--fg-2); }
.no-serial { color:var(--muted); font-size:12px; font-style:italic; }

/* ══════════════════════════════════════════════════════════════════════════
   13. NOTIFICATIONS & ALERTS
   ══════════════════════════════════════════════════════════════════════════ */
.notification { display:none; align-items:center; gap:10px; padding:13px 18px; border-radius:var(--radius); font-size:14px; font-weight:500; position:fixed; bottom:16px; right:16px; left:16px; z-index:9999; box-shadow:var(--shadow-lg); animation:slideInRight 0.25s ease; }
.notification.show { display:flex; }
.notification.success { background:var(--bg-card); border:1px solid var(--success); color:var(--success); }
.notification.error   { background:var(--bg-card); border:1px solid var(--danger);  color:var(--danger); }
.notification.info    { background:var(--bg-card); border:1px solid var(--primary); color:var(--primary); }
.notification.warning { background:var(--bg-card); border:1px solid var(--warning); color:var(--warning); }
@keyframes slideInRight { from { transform:translateX(20px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.alert { display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:var(--radius); font-size:14px; margin-bottom:20px; }
.alert-success { background:var(--success-dim); border:1px solid var(--success); color:var(--success); }
.alert-error   { background:var(--danger-dim);  border:1px solid var(--danger);  color:var(--danger);  }
.alert-warning { background:var(--warning-dim); border:1px solid var(--warning); color:var(--warning); }

/* ══════════════════════════════════════════════════════════════════════════
   14. MODALS — bottom-sheet on mobile
   ══════════════════════════════════════════════════════════════════════════ */
.modal-overlay,.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:500; align-items:flex-end; justify-content:center; padding:0; animation:fadeIn 0.2s ease; }
.modal-overlay.active,.modal.active,.modal-overlay[style*="flex"],.modal[style*="flex"] { display:flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal-content { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%; max-width:600px; max-height:92dvh; overflow-y:auto; animation:slideUpSheet 0.28s ease; box-shadow:var(--shadow-lg); transition:background 0.25s ease; }
.modal-content.modal-lg { max-width:800px; }
@keyframes slideUpSheet { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.modal-title,.modal-header h3 { font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; color:var(--fg); }
.modal-title i,.modal-header h3 i { color:var(--primary); }
.modal-body { padding:16px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 16px; border-top:1px solid var(--border); }
.close-modal,.modal-close { background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1; padding:2px; transition:color var(--transition); }
.close-modal:hover,.modal-close:hover { color:var(--fg); }

/* ══════════════════════════════════════════════════════════════════════════
   15. FILTERS BAR
   ══════════════════════════════════════════════════════════════════════════ */
.filters,.filters-grid { display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-bottom:18px; }
.filter-group,.filter-section { flex:1; }
.filter-label { font-size:12px; font-weight:600; color:var(--muted-light); margin-bottom:6px; display:block; letter-spacing:0.3px; }
.filter-input { width:100%; }
.filter-actions { display:flex; gap:10px; align-items:flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
   16. PRODUCT GRID
   ══════════════════════════════════════════════════════════════════════════ */
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.product-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition); }
.product-card:hover { border-color:var(--border-light); transform:translateY(-2px); box-shadow:var(--shadow); }
.product-image { background:var(--bg-hover); height:70px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:24px; border-bottom:1px solid var(--border); }
.product-info { padding:12px; }
.product-info h4 { font-size:13px; font-weight:600; color:var(--fg); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-code { font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:8px; }
.product-price { font-size:16px; font-weight:700; color:var(--primary); margin-bottom:10px; letter-spacing:-0.3px; }
.product-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:6px; }
.item-count { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; }

/* ══════════════════════════════════════════════════════════════════════════
   17. SALES / POS
   ══════════════════════════════════════════════════════════════════════════ */
.sales-container { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.product-item { background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius); padding:12px; cursor:pointer; transition:all var(--transition); user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.product-item:hover { border-color:var(--primary); background:var(--bg-hover); }
.product-item.selected { border-color:var(--primary); background:var(--primary-dim); }
.product-item .product-name { font-size:12px; font-weight:600; color:var(--fg); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-item .product-price { font-size:13px; font-weight:700; color:var(--primary); margin-bottom:3px; }
.product-item .product-stock { font-size:10px; color:var(--muted); }

.cart-container { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.cart-container h3 { font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; color:var(--fg); }
.cart-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); gap:8px; }
.cart-item:last-child { border-bottom:none; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-info h4 { font-size:13px; font-weight:600; color:var(--fg); }
.cart-item-info p  { font-size:11px; color:var(--muted); margin-top:2px; }
.cart-item-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.quantity-control { display:flex; align-items:center; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.qty-btn { width:30px; height:30px; background:none; border:none; color:var(--muted-light); cursor:pointer; font-size:16px; transition:all var(--transition); display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
.qty-btn:hover { background:var(--primary-dim); color:var(--primary); }
.qty-input { width:34px; text-align:center; background:none; border:none; color:var(--fg); font-family:var(--font-mono); font-size:13px; padding:0; }
.qty-input:focus { outline:none; }
.remove-item { width:26px; height:26px; background:none; border:none; color:var(--muted); cursor:pointer; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:13px; transition:all var(--transition); }
.remove-item:hover { background:var(--danger-dim); color:var(--danger); }
.empty-cart { text-align:center; padding:32px 16px; color:var(--muted); }
.empty-cart i { font-size:36px; margin-bottom:10px; display:block; opacity:0.4; }
.empty-cart h3 { font-size:14px; font-weight:600; color:var(--muted-light); }
.empty-cart p  { font-size:12px; margin-top:4px; }
.cart-total { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin:14px 0; }
.total-row { display:flex; justify-content:space-between; font-size:13px; color:var(--fg-2); padding:3px 0; }
.total-row.grand-total { font-size:16px; font-weight:700; color:var(--fg); padding-top:10px; margin-top:6px; border-top:1px solid var(--border); }
.customer-info { margin-bottom:14px; }
.customer-info h4 { font-size:12px; font-weight:600; color:var(--muted-light); margin-bottom:10px; letter-spacing:0.5px; text-transform:uppercase; }
.input-group { margin-bottom:8px; }
.input-group label { font-size:12px; color:var(--muted); margin-bottom:4px; display:block; }
.payment-methods { display:flex; gap:8px; margin-top:6px; }
.payment-btn { flex:1; padding:10px 6px; background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--muted-light); font-family:var(--font); font-size:12px; font-weight:600; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:5px; }
.payment-btn:hover,.payment-btn.active { border-color:var(--primary); color:var(--primary); background:var(--primary-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   18. RECEIPT MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.receipt-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:600; align-items:center; justify-content:center; padding:16px; }
.receipt-modal.active { display:flex; }
.receipt-container { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg); width:100%; max-width:420px; overflow:hidden; box-shadow:var(--shadow-lg); animation:slideUpSheet 0.3s ease; max-height:92dvh; overflow-y:auto; }
.receipt-header { background:linear-gradient(135deg,var(--primary),var(--accent-2)); padding:24px 20px 18px; text-align:center; color:#fff; }
.receipt-header h2 { font-size:19px; font-weight:700; margin-bottom:4px; }
.receipt-header p  { font-size:13px; opacity:0.85; }
.transaction-code { display:inline-block; background:rgba(255,255,255,0.2); border-radius:var(--radius-sm); padding:4px 14px; font-family:var(--font-mono); font-size:12px; margin-top:10px; letter-spacing:1px; }
.receipt-body { padding:18px 20px; }
.receipt-row { display:flex; justify-content:space-between; font-size:13px; color:var(--fg-2); padding:6px 0; border-bottom:1px solid var(--border); }
.receipt-row:last-child { border-bottom:none; }
.receipt-row.header { font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; }
.receipt-total { background:var(--bg-2); border-radius:var(--radius); padding:14px; margin-top:14px; font-weight:700; font-size:16px; color:var(--fg); }
.receipt-footer { padding:16px 20px 18px; text-align:center; border-top:1px solid var(--border); }
.receipt-footer p { font-size:12px; color:var(--muted); margin-bottom:3px; }
.receipt-actions { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.btn-print,.btn-new,.btn-close { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:var(--radius-sm); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition); width:100%; justify-content:center; }
.btn-print { background:var(--bg-hover); color:var(--fg-2); border:1px solid var(--border); }
.btn-print:hover { background:var(--bg-3); }
.btn-new   { background:var(--success); color:#fff; border:none; }
.btn-new:hover { background:#0da271; }
.btn-close { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-close:hover { background:var(--bg-hover); }

/* ══════════════════════════════════════════════════════════════════════════
   19. CHARTS
   ══════════════════════════════════════════════════════════════════════════ */
.charts-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px; }
.chart-container { position:relative; height:200px; }

/* ══════════════════════════════════════════════════════════════════════════
   20. QUICK ACTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.action-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); color:var(--fg-2); text-decoration:none; transition:all var(--transition); cursor:pointer; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.action-btn:hover { background:var(--primary-dim); border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.action-icon { width:36px; height:36px; background:var(--bg-hover); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:15px; transition:background var(--transition); }
.action-btn:hover .action-icon { background:var(--primary-dim); }
.action-label { font-size:12px; font-weight:600; text-align:center; }

/* ══════════════════════════════════════════════════════════════════════════
   21. RECENT LISTS
   ══════════════════════════════════════════════════════════════════════════ */
.recent-items,.recent-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px; }
.recent-list { list-style:none; }
.recent-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.recent-item:last-child { border-bottom:none; }
.recent-icon { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.recent-info h4 { font-size:13px; font-weight:600; color:var(--fg); margin-bottom:2px; }
.recent-info p  { font-size:12px; color:var(--muted); line-height:1.5; }
.view-all { font-size:12px; font-weight:600; color:var(--primary); text-decoration:none; }
.view-all:hover { color:var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   22. STOCK PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.stock-level { height:4px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; width:70px; }
.stock-level-fill { height:100%; border-radius:2px; transition:width 0.4s ease; }
.stock-level-high   { background:var(--success); }
.stock-level-medium { background:var(--warning); }
.stock-level-low    { background:var(--danger);  }
.stock-level-empty  { background:var(--muted);   }
.stock-in    { font-size:26px; font-weight:700; color:var(--success); }
.stock-low   { font-size:26px; font-weight:700; color:var(--warning); }
.stock-out   { font-size:26px; font-weight:700; color:var(--danger);  }
.stock-total { font-size:26px; font-weight:700; color:var(--primary); }
.adjust-type-buttons { display:flex; gap:8px; margin-bottom:16px; }
.adjust-type-btn { flex:1; padding:10px; background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--muted-light); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:6px; }
.adjust-type-btn:hover { border-color:var(--primary); color:var(--primary); }
.adjust-type-btn.active { border-color:var(--primary); background:var(--primary-dim); color:var(--primary); }

/* ══════════════════════════════════════════════════════════════════════════
   23. REPORTS
   ══════════════════════════════════════════════════════════════════════════ */
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.summary-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; transition:transform var(--transition),background 0.25s ease; }
.summary-card:hover { transform:translateY(-2px); }
.summary-icon { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:2px; }
.summary-icon.in      { background:var(--success-dim); color:var(--success); }
.summary-icon.out     { background:var(--danger-dim);  color:var(--danger);  }
.summary-icon.product { background:var(--primary-dim); color:var(--primary); }
.summary-icon.agent   { background:var(--warning-dim); color:var(--warning); }
.summary-value { font-size:24px; font-weight:700; letter-spacing:-0.5px; color:var(--fg); }
.summary-label { font-size:11px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.6px; }
.filter-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:20px; transition:background 0.25s ease; }
.filter-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
.filter-group .date-range-wrapper { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.filter-group .date-range-wrapper input[type="date"] { flex:1; min-width:0; font-size:14px; }
.filter-group .date-range-wrapper span { flex-shrink:0; font-size:13px; }
.reports-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:20px; transition:background 0.25s ease; }
.reports-card .card-header { padding:16px; border-bottom:1px solid var(--border); margin-bottom:0; }
.export-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:20px; }
.export-options { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pagination { display:flex; gap:5px; justify-content:center; padding:16px; flex-wrap:wrap; align-items:center; }
.page-btn,.page-link { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--muted-light); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition); text-decoration:none; font-family:var(--font); }
.page-btn:hover,.page-link:hover { border-color:var(--primary); color:var(--primary); }
.page-btn.active,.page-link.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.page-btn:disabled { opacity:0.4; cursor:default; }

/* ══════════════════════════════════════════════════════════════════════════
   24. SERIAL / ITEMS MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.items-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.items-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.items-section-header h4 { font-size:14px; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:6px; }
.items-count { font-size:12px; color:var(--muted); background:var(--bg-hover); padding:3px 8px; border-radius:12px; }
.items-list { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.items-header { display:grid; grid-template-columns:1fr 100px 120px 120px; background:var(--bg-2); padding:8px 12px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.item-row { display:grid; grid-template-columns:1fr 100px 120px 120px; padding:10px 12px; border-top:1px solid var(--border); font-size:13px; color:var(--fg-2); align-items:center; transition:background var(--transition); }
.item-row:hover { background:var(--bg-hover); }
.add-items-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.add-items-header h5 { font-size:14px; font-weight:600; color:var(--fg); }
.item-instruction { font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.5; background:var(--bg-2); padding:10px 12px; border-radius:var(--radius-sm); border-left:3px solid var(--warning); }
.item-entries { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.item-entry { display:flex; align-items:center; gap:8px; }
.serial-input { flex:1; padding:9px 12px; background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--fg); font-family:var(--font-mono); font-size:13px; transition:border-color var(--transition); }
.serial-input:focus { outline:none; border-color:var(--primary); }
.add-another-btn { width:100%; padding:8px; background:var(--bg-hover); border:1.5px dashed var(--border-light); border-radius:var(--radius-sm); color:var(--muted-light); font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:6px; }
.add-another-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   25. WELCOME BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.welcome-banner { background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-3) 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:20px; position:relative; overflow:hidden; }
.welcome-banner::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background:radial-gradient(circle,var(--primary-glow),transparent 70%); pointer-events:none; }
.welcome-content { display:flex; flex-direction:column; gap:12px; position:relative; }
.welcome-text h2 { font-size:18px; font-weight:700; color:var(--fg); margin-bottom:3px; letter-spacing:-0.3px; }
.welcome-text p { font-size:13px; color:var(--muted-light); }
.agent-badge { display:inline-flex; align-items:center; gap:6px; background:var(--primary-dim); color:var(--primary); font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; }

/* ══════════════════════════════════════════════════════════════════════════
   26. UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.scan-barcode { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; margin-top:14px; background:var(--bg-2); border:1.5px dashed var(--border-light); border-radius:var(--radius); color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition); text-decoration:none; }
.scan-barcode:hover { border-color:var(--accent); color:var(--accent); }
.empty-state { text-align:center; padding:40px 16px; color:var(--muted); }
.empty-state i { font-size:40px; margin-bottom:14px; display:block; opacity:0.3; }
.empty-state h3 { font-size:15px; font-weight:600; color:var(--muted-light); margin-bottom:5px; }
.empty-state p { font-size:13px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.gap-20 { gap:20px; } .mt-15 { margin-top:15px; } .mb-5 { margin-bottom:5px; }
.muted { color:var(--muted); } .small { font-size:12px; } .fw-600 { font-weight:600; } .text-center { text-align:center; }

/* Change Password */
.change-password-section { margin-top:0; }
.password-strength { height:4px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden; }
.password-strength-bar { height:100%; border-radius:2px; transition:width 0.3s,background 0.3s; width:0; }
.password-strength-weak   { width:30%; background:var(--danger); }
.password-strength-medium { width:65%; background:var(--warning); }
.password-strength-strong { width:100%; background:var(--success); }

/* ══════════════════════════════════════════════════════════════════════════
   27. BREAKPOINT 481px+ — slightly wider mobile / small tablet
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:481px) {
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .receipt-actions { flex-direction:row; }
  .btn-print,.btn-new,.btn-close { width:auto; }
  .action-buttons { flex-direction:row; }
  .action-buttons .btn { width:auto; }
  .filters,.filters-grid { flex-direction:row; align-items:flex-end; flex-wrap:wrap; }
  .filter-group,.filter-section { min-width:150px; width:auto; }
  .notification { right:20px; left:auto; min-width:280px; }
  .stat-card { flex-direction:column; align-items:flex-start; gap:0; }
  .stat-icon { margin-bottom:12px; }
  .stat-value { font-size:22px; }
  .stat-card::before { display:block; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   28. BREAKPOINT 769px+ — Tablet: icon-only sidebar
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  .sidebar { display:flex; width:64px; }
  .sidebar .logo span,.sidebar .logo p,.sidebar .nav-item a span,.sidebar .nav-item button span,
  .sidebar-user-info,.sidebar-logout { display:none; }
  .sidebar .logo { padding:18px 0; text-align:center; }
  .sidebar .logo h2 { justify-content:center; }
  .sidebar .logo h2 i { margin:0; font-size:22px; }
  .nav-item a,.nav-item button { justify-content:center; padding:12px; border-radius:8px; }
  .nav-item a i,.nav-item button i { width:auto; font-size:18px; }
  .sidebar-footer { justify-content:center; padding:12px 0; }
  .sidebar-avatar { width:36px; height:36px; font-size:13px; }

  .main-content { margin-left:64px; padding:24px 20px; padding-top:24px; }
  .mobile-topbar { display:none; }
  .mobile-nav-dropdown { display:none !important; }
  .header .user-menu { display:flex; }
  .header { margin-bottom:24px; }
  .header h1 { font-size:20px; }

  .card { padding:20px; }
  .modal-overlay,.modal { align-items:center; padding:20px; }
  .modal-content { border-radius:var(--radius-lg); max-height:90vh; animation:slideUp 0.25s ease; }
  @keyframes slideUp { from { transform:translateY(16px); opacity:0; } to { transform:translateY(0); opacity:1; } }
  .modal-header { padding:20px 24px; }
  .modal-body   { padding:24px; }
  .modal-footer { padding:16px 24px; }

  .hide-mobile { display:table-cell !important; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .charts-grid { grid-template-columns:1fr; }
  .recent-items,.recent-grid { grid-template-columns:1fr; }
  .sales-container { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .filter-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .quick-actions { grid-template-columns:repeat(3,1fr); }
  .welcome-content { flex-direction:row; justify-content:space-between; align-items:flex-start; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .notification { bottom:24px; right:24px; left:auto; max-width:380px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   29. BREAKPOINT 1101px+ — Desktop: full sidebar
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1101px) {
  .sidebar { display:flex; width:var(--sidebar-w); }
  .sidebar .logo { padding:24px 20px 20px; text-align:left; }
  .sidebar .logo h2 { justify-content:flex-start; }
  .sidebar .logo h2 i { font-size:20px; }
  .sidebar .logo span,.sidebar .logo p { display:unset; }
  .sidebar .nav-item a span,.sidebar .nav-item button span { display:unset; }
  .sidebar-user-info { display:block; }
  .sidebar-logout { display:flex; }
  .nav-item a,.nav-item button { justify-content:flex-start; padding:10px 12px; border-radius:var(--radius-sm); }
  .nav-item a i,.nav-item button i { width:18px; font-size:15px; }
  .sidebar-footer { justify-content:space-between; padding:14px 16px; }
  .sidebar-avatar { width:32px; height:32px; font-size:12px; }

  .main-content { margin-left:var(--sidebar-w); padding:28px 32px; max-width:1400px; }
  .header { margin-bottom:28px; }
  .header h1 { font-size:22px; }
  .card { padding:24px; border-radius:var(--radius-lg); }

  .stats-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
  .stat-card { padding:20px; }
  .stat-value { font-size:26px; }
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
  .summary-grid { grid-template-columns:repeat(4,1fr); gap:16px; }
  .charts-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .recent-items,.recent-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .sales-container { grid-template-columns:1fr 360px; }
  .cart-container { position:sticky; top:20px; }
  .products-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .quick-actions { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
  .action-btn { padding:18px 12px; }
  .action-icon { width:44px; height:44px; font-size:18px; }
  .form-row,.form-grid { grid-template-columns:1fr 1fr; }
  .form-control { font-size:14px; }
  th { padding:12px 16px; }
  td { padding:13px 16px; font-size:14px; }
  .btn { padding:9px 18px; }
  .btn-sm { padding:6px 12px; }
  .notification { bottom:28px; right:28px; max-width:400px; }
  .filter-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .chart-container { height:240px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   30. PRINT
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  .sidebar,.mobile-topbar,.header,.filter-section,.export-section,.pagination,.btn:not(.print-only),.nav-menu,.user-menu { display:none !important; }
  .main-content { margin-left:0 !important; padding:0 !important; }
  body,.card,.reports-card { background:#fff !important; color:#000 !important; border:none !important; }
  th { background:#f0f0f0 !important; color:#333 !important; }
  td { color:#333 !important; border-color:#ddd !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   31. CATEGORY SIDEBAR (Sales)
   ══════════════════════════════════════════════════════════════════════════ */
.cat-btn {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
.cat-btn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cat-btn.active {
  background: var(--primary-dim, rgba(99,102,241,0.15));
  color: var(--primary);
  border-color: rgba(99,102,241,0.3);
  font-weight: 600;
}