/* ============================================
   Invenza — Inventory Management
   Core Stylesheet
   ============================================ */

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

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  color-scheme: light;

  /* Sora is listed first on purpose. It carries no Arabic glyphs, so Arabic
     text falls straight through to IBM Plex Sans Arabic while every digit
     (prices, totals, quantities, IDs) is drawn in Sora. Order is the feature. */
  --font-num: 'Sora', 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, sans-serif;
  --font-sans: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, sans-serif;

  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #EFF6FF;
  --background: #F5F7FB;
  --surface: #FFFFFF;
  --border: #E7EAF2;
  --text: #1F2937;
  --muted: #6B7280;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;

  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 14px rgba(15,23,42,0.07);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.10);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --heading-color: #0f172a;
  --body-text: #334155;
  --text-secondary: #475569;
  --muted-color: #64748b;
  --border-color: #e2e8f0;
  --subtle-bg: #f8fafc;

  /* Spacing scale. Every gap, padding and margin in the interface resolves to
     one of these steps so that two components built in different places still
     line up. Values that do not fit the scale (5px, 9px, 11px) came from
     one-off tuning and are what made cards, forms and tables disagree about
     their own rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shared rhythm for the repeating containers. */
  --card-padding: 24px;
  --card-gap: 16px;
  --section-gap: 28px;
}

.dark, html.dark, :root.dark {
  color-scheme: dark;
  --primary: #3B82F6;
  --primary-dark: #60A5FA;
  --background: #0F172A;
  --surface: #1E293B;
  --border: #334155;
  --text: #F1F5F9;
  --muted: #94A3B8;
  --primary-light: #172554;
  --heading-color: #F1F5F9;
  --body-text: #CBD5E1;
  --text-secondary: #94A3B8;
  --muted-color: #94A3B8;
  --border-color: #334155;
  --subtle-bg: #1E293B;
}

/* ============================================
   Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background-color: var(--background);
  color: var(--text);
}

/* The interface is one column at every width, so the page itself is never meant
   to pan sideways. The guard sits on the root element on purpose: a fixed
   element (a toast, the off-canvas drawer) is positioned against the viewport
   and is not clipped by body's overflow, so a body-only guard still left a
   phone able to drag the whole page sideways whenever one of those appeared.
   `clip` is preferred over `hidden` because hidden turns the root into a scroll
   container, which breaks the sticky header; `hidden` stays as the fallback. */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

body {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* `clip` rather than `hidden`: `hidden` would make the body itself a scroll
     container, and the sticky header inside it would then stick to a box that
     never scrolls — so the bar scrolled away with the page. `clip` trims the
     same overflow without becoming a scrollport. The guard above on the root
     covers browsers that do not know `clip`. */
  overflow-x: clip;
  min-height: 100vh;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(107,114,128,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(107,114,128,0.5); }
.dark ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); }

/* ============================================
   Layout System — Enhanced sidebar
   ============================================ */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 2px 0 8px rgba(0,0,0,0.02);
}

#sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
  opacity: 0.3;
}

#sidebar.collapsed { width: var(--sidebar-collapsed-width); }
#sidebar.collapsed .sidebar-label { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
#sidebar.collapsed .submenu { display: none !important; }
#sidebar.collapsed .nav-toggle-icon { display: none !important; }
#sidebar.collapsed .sidebar-section-label { opacity: 0; }
#sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
#sidebar.collapsed .submenu-item { display: none; }

.sidebar-label {
  transition: opacity 0.2s ease, width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

#main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
}

#main-wrapper.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); }

#app-header {
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  transition: box-shadow .2s ease, background-color .2s ease;
}

#app-header.is-scrolled { box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.dark #app-header.is-scrolled { box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* ============================================
   Navigation — Clean menu with +/- toggle icons
   ============================================ */
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary, var(--muted)); text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer; width: 100%;
  border: none; background: none;
  font-family: inherit;
  position: relative;
}
.nav-item:hover {
  background: var(--background);
  color: var(--text);
}
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

/* Toggle icon (+/-) on the right side */
.nav-toggle-icon {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.nav-toggle-icon svg {
  transition: transform 0.25s ease;
}

/* Submenu items with vertical tree connector */
.submenu {
  overflow: hidden; max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  padding-left: 20px;
}
.submenu.open { max-height: 600px; }

.submenu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 450;
  color: var(--text-secondary, var(--muted)); text-decoration: none;
  transition: all 0.15s ease;
  position: relative;
}
/* Vertical tree line */
.submenu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
  transition: background 0.2s ease;
}
/* Horizontal connector line */
.submenu-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
  transition: background 0.2s ease;
}
.submenu-item:hover {
  color: var(--text);
  background: var(--background);
}
.submenu-item:hover::before,
.submenu-item:hover::after {
  background: var(--primary);
}
.submenu-item.active {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 500;
}
.submenu-item.active::before,
.submenu-item.active::after {
  background: var(--primary);
}

/* Badge for menu items (e.g., "Hot") */
.nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.nav-badge-hot {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: white;
}
.nav-badge-info {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: white;
}

.sidebar-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--muted);
  padding: 16px 12px 6px; opacity: 1;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

/* ============================================
   Cards — Clean, professional styling
   ============================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  position: relative;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.stat-sub-card { }

/* ============================================
   Badges
   ============================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.2px;
}
.badge-success { background: #DCFCE7; color: #15803D; }
.badge-warning { background: #FEF3C7; color: #B45309; }
.badge-danger  { background: #FEE2E2; color: #B91C1C; }
.badge-info    { background: #DBEAFE; color: #1D4ED8; }
.badge-gray    { background: #F3F4F6; color: #374151; }
.badge-purple  { background: #F3E8FF; color: #7E22CE; }
.badge-orange  { background: #FFF7ED; color: #C2410C; }

.dark .badge-success { background: #14532D; color: #4ADE80; }
.dark .badge-warning { background: #451A03; color: #FCD34D; }
.dark .badge-danger  { background: #450A0A; color: #F87171; }
.dark .badge-info    { background: #1E3A5F; color: #60A5FA; }
.dark .badge-gray    { background: #374151; color: #D1D5DB; }
.dark .badge-purple  { background: #2E1065; color: #C084FC; }
.dark .badge-orange  { background: #431407; color: #FB923C; }

/* ============================================
   Tables — Clean, professional styling
   ============================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th {
  background: var(--background);
  color: var(--muted);
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.6px; padding: 12px 16px;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, background 0.2s ease;
}
.data-table thead th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.data-table thead th[data-sort]:hover {
  color: var(--primary);
  background: rgba(37,99,235,0.04);
}
.data-table thead th.sort-active {
  color: var(--primary);
  background: rgba(37,99,235,0.06);
}
.sort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 4px;
  border-radius: 4px;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.sort-icon svg {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sort-icon.active {
  color: var(--primary);
  background: rgba(37,99,235,0.1);
}
.sort-icon.active svg {
  transform: scale(1.1);
}
.sort-icon.desc svg {
  transform: rotate(180deg);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:hover {
  background: rgba(37,99,235,0.03);
}
.data-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
}
.data-table tbody tr:last-child { border-bottom: none; }
.dark .data-table thead th { background: rgba(255,255,255,0.04); }
.dark .data-table thead th[data-sort]:hover {
  background: rgba(37,99,235,0.08);
}
.dark .data-table thead th.sort-active {
  background: rgba(37,99,235,0.1);
}
.dark .data-table tbody tr:hover { background: rgba(255,255,255,0.04); }

/* ============================================
   Forms
   ============================================ */
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text); margin-bottom: 6px;
}
.form-label .required { color: var(--danger); margin-left: 2px; }

.form-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; font-family: inherit;
  background: var(--surface); color: var(--text);
  outline: none;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-input.error { border-color: var(--danger); }
.form-input::placeholder { color: var(--muted); }
.form-input:disabled { opacity: 0.6; cursor: not-allowed; }
.dark .form-input { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text); }

.form-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}
.dark .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
option {
  background: var(--surface);
  color: var(--text);
}
.form-textarea { resize: vertical; min-height: 100px; }

/* ============================================
   Buttons — Clean, professional styling
   ============================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  white-space: nowrap; line-height: 1.4;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not(:disabled):not(.btn-ghost) { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; gap: 6px; }
.btn-lg { padding: 12px 24px; font-size: 15px; border-radius: 12px; }
.btn-icon { padding: 8px; }
.btn-icon-sm { padding: 6px; }

.btn-primary {
  background: var(--primary);
  color: #fff; border-color: var(--primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-secondary {
  background: var(--background);
  color: var(--text); border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.dark .btn-secondary { background: rgba(255,255,255,0.07); border-color: var(--border); color: var(--text); }

.btn-outline {
  background: transparent; color: var(--primary); border-color: var(--primary);
}
.btn-outline:hover:not(:disabled) { background: var(--primary-light); }

.btn-danger {
  background: #EF4444; color: #fff; border-color: #EF4444;
}
.btn-danger:hover:not(:disabled) { background: #DC2626; }

.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--background); color: var(--text); }

.btn-success { background: #16A34A; color: #fff; border-color: #16A34A; }
.btn-warning { background: #F59E0B; color: #fff; border-color: #F59E0B; }

/* ============================================
   Modals
   ============================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn 0.15s ease;
  /* Keep the gutter scrollable if the dialog is ever taller than the screen. */
  overflow-y: auto;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius-xl);
  width: 100%; max-width: 520px;
  /* The box is a column so the header and footer can be pinned: only the body
     scrolls, so the close button and the action buttons never leave the
     screen. max-height is relative to the backdrop, which already reserves the
     gutter — sizing it in vh as well pushed the box past the viewport. */
  max-height: 100%;
  display: flex; flex-direction: column;
  animation: slideUp 0.2s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15);
}
.modal-box.modal-sm { max-width: 400px; }
.modal-box.modal-lg { max-width: 720px; }
.modal-box.modal-xl { max-width: 960px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
  flex-shrink: 0;
  /* Stacks the buttons once the box is narrower than their combined width, so
     they never spill out of the dialog. */
  flex-wrap: wrap;
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border: 1px solid var(--border);
  min-width: 300px; max-width: 380px;
  animation: slideUp 0.3s cubic-bezier(0.4,0,0.2,1);
  transition: opacity 0.3s, transform 0.3s;
  position: relative;
}
.toast.removing { opacity: 0; transform: translateY(12px); }
.toast-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-success .toast-icon { background: #DCFCE7; color: #16A34A; }
.toast-error   .toast-icon { background: #FEE2E2; color: #DC2626; }
.toast-warning .toast-icon { background: #FEF3C7; color: #D97706; }
.toast-info    .toast-icon { background: #DBEAFE; color: #2563EB; }
.toast-close { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 4px; }
.toast-close:hover { color: var(--text); background: var(--background); }

/* ============================================
   Skeleton
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--background) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ============================================
   Dropdowns
   ============================================ */
/* The panel hangs off the trailing edge of its trigger. inset-inline-end
   instead of a physical right, otherwise on an RTL page — where the trigger
   sits at the left of the bar — the panel extends off the left of the
   viewport and only part of it is reachable. */
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1); z-index: 50;
  min-width: 180px; max-width: calc(100vw - 24px);
  animation: fadeInDown 0.15s ease;
  overflow: hidden auto; overscroll-behavior: contain;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14px; color: var(--text);
  cursor: pointer; transition: background 0.1s;
  text-decoration: none; border: none; background: none;
  width: 100%; font-family: inherit;
}
.dropdown-item:hover { background: var(--background); color: var(--primary); }
.dropdown-item.danger:hover { background: #FEE2E2; color: #DC2626; }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ============================================
   Footer — Enhanced styling
   ============================================ */
footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  transition: all 0.2s ease;
}
footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
footer a:hover {
  color: var(--primary-dark);
}

/* ============================================
   Animations — Enhanced with cubic-bezier easing
   ============================================ */
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes slideUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes slideInUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes glow        { 0%,100%{box-shadow:0 0 5px rgba(37,99,235,0.3)} 50%{box-shadow:0 0 20px rgba(37,99,235,0.5)} }

.animate-fadeIn     { animation: fadeIn 0.2s ease; }
.animate-slideUp    { animation: slideUp 0.2s ease; }
.animate-fadeInDown { animation: fadeInDown 0.2s ease; }
.animate-spin       { animation: spin 0.8s linear infinite; }
.animate-slideInUp  { animation: slideInUp 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.animate-scaleIn    { animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Staggered card animations for page load */
.stagger-1 { animation-delay: 0.05s; animation-fill-mode: backwards; }
.stagger-2 { animation-delay: 0.1s; animation-fill-mode: backwards; }
.stagger-3 { animation-delay: 0.15s; animation-fill-mode: backwards; }
.stagger-4 { animation-delay: 0.2s; animation-fill-mode: backwards; }
.stagger-5 { animation-delay: 0.25s; animation-fill-mode: backwards; }

/* ============================================
   Welcome Banner — Gradient hero section
   ============================================ */
.welcome-banner {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 35%, #1E40AF 65%, #172554 100%);
  border-radius: 16px;
  padding: 32px 36px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(37,99,235,0.25), 0 2px 8px rgba(0,0,0,0.08);
}
.welcome-banner::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -40px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.welcome-banner::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 15%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.welcome-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.welcome-banner-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.welcome-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.welcome-subtitle {
  font-size: 14px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  line-height: 1.6;
  max-width: 520px;
}
.welcome-subtitle strong {
  color: #fff;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.welcome-banner .welcome-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.welcome-banner .btn-welcome-outline {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.welcome-banner .btn-welcome-outline:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.welcome-banner .btn-welcome-outline:active {
  transform: translateY(0);
}
.welcome-banner .btn-welcome-export {
  background: white;
  color: var(--primary);
  border: 1px solid white;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.welcome-banner .btn-welcome-export:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.welcome-banner .btn-welcome-export:active {
  transform: translateY(0);
}
.welcome-banner .btn-welcome-export svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   Trend Indicators
   ============================================ */
.trend-up   { display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:#16A34A;background:#DCFCE7;padding:3px 10px;border-radius:20px; }
.trend-down { display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:#DC2626;background:#FEE2E2;padding:3px 10px;border-radius:20px; }
.dark .trend-up   { color:#4ADE80; background:#14532D; }
.dark .trend-down { color:#F87171; background:#450A0A; }

/* ============================================
   Page Layout
   ============================================ */
.page-title { font-size: 24px; font-weight: 700; color: var(--heading-color); letter-spacing: -0.02em; line-height: 1.3; }
.page-subtitle { font-size: 14px; color: var(--muted-color); margin-top: 6px; line-height: 1.6; }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ============================================
   Search
   ============================================ */
.search-box { position: relative; }
.search-box .search-icon { position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none; }
.search-box input { padding-inline-start: 38px; }

.global-search-dropdown {
  position: absolute; top: calc(100% + 8px); inset-inline: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 100;
  /* Capped against the viewport, not just an absolute pixel count, so the
     list cannot run past the bottom of a short phone screen. */
  max-height: min(420px, calc(100vh - 150px));
  overflow-y: auto; overscroll-behavior: contain;
  animation: fadeInDown 0.15s ease;
}
.search-result-item { display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background 0.1s; }
.search-result-item:hover { background: var(--background); }
.search-group-label { font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--muted);padding:10px 16px 4px; }

/* ============================================
   Notifications
   ============================================ */
.notification-item { display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s; }
.notification-item:hover { background: var(--background); }
.notification-item.unread { background: rgba(37,99,235,0.04); }
.notification-item:last-child { border-bottom: none; }

/* ============================================
   POS
   ============================================ */
.pos-product-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px; cursor: pointer;
  transition: all 0.15s ease; text-align: center;
}
.pos-product-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,0.15); transform: translateY(-2px); }
.pos-product-card.in-cart { border-color: var(--primary); background: var(--primary-light); }

/* ============================================
   Upload Zone
   ============================================ */
.upload-zone {
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 32px; text-align: center; cursor: pointer;
  transition: all 0.2s; background: var(--background);
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--primary-light); }

/* ============================================
   Progress
   ============================================ */
.progress-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--primary); transition: width 0.6s ease; }

/* ============================================
   Tabs
   ============================================ */
.tab-nav { display:flex;border-bottom:1px solid var(--border);gap:0; }
.tab-btn { padding:10px 20px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;transition:all 0.15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color:var(--primary);border-bottom-color:var(--primary);font-weight:600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); z-index: 70; width: var(--sidebar-width) !important; }
  #sidebar.mobile-open { transform: translateX(0); }
  #main-wrapper { margin-left: 0 !important; }

  /* The icon-only rail is a desktop affordance. On a phone the sidebar is a
     full-width drawer, so the collapsed rules are neutralised here — leaving
     them on hid every label and left only the icons behind the hamburger. */
  #sidebar.collapsed { width: var(--sidebar-width) !important; }
  #sidebar.collapsed .sidebar-label { opacity: 1; width: auto; pointer-events: auto; }
  #sidebar.collapsed .sidebar-section-label { opacity: 1; }
  #sidebar.collapsed .submenu { display: block !important; }
  #sidebar.collapsed .submenu-item { display: flex !important; }
  #sidebar.collapsed .nav-toggle-icon { display: flex !important; }
  #sidebar.collapsed .nav-item { justify-content: flex-start; padding: 11px 14px; }
}

#mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 65; display: none;
}
#mobile-overlay.show { display: block; animation: fadeIn 0.2s ease; }

/* ============================================
   Misc Utilities
   ============================================ */
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted); }
.bg-primary { background: var(--primary); }
.bg-primary-light { background: var(--primary-light); }
.border-primary { border-color: var(--primary); }

.divider { height:1px; background:var(--border); }

/* Avatar */
.avatar { border-radius: 50%; object-fit: cover; }
.avatar-placeholder { border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:600; }

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .no-print { display: none !important; }
  #sidebar, #app-header, #mobile-overlay { display: none !important; }
  #main-wrapper { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  @page { margin: 15mm; }
}

/* ============================================
   Chart Container
   ============================================ */
.chart-container { position: relative; }

/* ============================================
   Settings Tabs (left nav)
   ============================================ */
.settings-nav-item {
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:10px;font-size:14px;font-weight:500;
  color:var(--muted);cursor:pointer;transition:all 0.15s;
  text-decoration:none;
}
.settings-nav-item:hover { background:var(--background);color:var(--text); }
.settings-nav-item.active { background:var(--primary-light);color:var(--primary);font-weight:600; }

/* Color pills for roles */
.role-pill {
  display:inline-flex;align-items:center;padding:3px 12px;
  border-radius:20px;font-size:12px;font-weight:600;
}

/* ============================================
   Icon Background Utility Classes (dark-mode aware)
   Use these instead of hardcoded background/stroke colors on stat icons
   ============================================ */
/* Green / success */
.icon-bg-success { background:#DCFCE7; }
.icon-bg-success svg, .icon-bg-success .icon-svg { color:#16A34A; }
.dark .icon-bg-success { background:#14532D; }
.dark .icon-bg-success svg, .dark .icon-bg-success .icon-svg { color:#4ADE80; }

/* Red / danger */
.icon-bg-danger  { background:#FEE2E2; }
.icon-bg-danger svg, .icon-bg-danger .icon-svg { color:#DC2626; }
.dark .icon-bg-danger  { background:#450A0A; }
.dark .icon-bg-danger svg, .dark .icon-bg-danger .icon-svg { color:#F87171; }

/* Yellow / warning */
.icon-bg-warning { background:#FEF3C7; }
.icon-bg-warning svg, .icon-bg-warning .icon-svg { color:#D97706; }
.dark .icon-bg-warning { background:#451A03; }
.dark .icon-bg-warning svg, .dark .icon-bg-warning .icon-svg { color:#FCD34D; }

/* Blue / info */
.icon-bg-info    { background:#DBEAFE; }
.icon-bg-info svg, .icon-bg-info .icon-svg { color:#2563EB; }
.dark .icon-bg-info    { background:#1E3A5F; }
.dark .icon-bg-info svg, .dark .icon-bg-info .icon-svg { color:#60A5FA; }

/* Purple */
.icon-bg-purple  { background:#F3E8FF; }
.icon-bg-purple svg, .icon-bg-purple .icon-svg { color:#7E22CE; }
.dark .icon-bg-purple  { background:#2E1065; }
.dark .icon-bg-purple svg, .dark .icon-bg-purple .icon-svg { color:#C084FC; }

/* Orange */
.icon-bg-orange  { background:#FFF7ED; }
.icon-bg-orange svg, .icon-bg-orange .icon-svg { color:#C2410C; }
.dark .icon-bg-orange  { background:#431407; }
.dark .icon-bg-orange svg, .dark .icon-bg-orange .icon-svg { color:#FB923C; }

/* Primary */
.icon-bg-primary { background:var(--primary-light); }
.icon-bg-primary svg { color:var(--primary); }

/* ============================================
   Auth Pages (login, register, forgot-password, reset-password)
   ============================================ */
/* The page surface stays quiet: one flat token-backed colour with a single
   soft tint at the top. The blurred circles that used to float here painted
   over 80px of blur and re-animated forever — decoration a person signing in
   at 8am has to look past every day. */
.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(37,99,235,0.12), transparent 65%),
    var(--background);
}
.dark .auth-body {
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(37,99,235,0.20), transparent 65%),
    var(--background);
}

/* Two columns inside one shell. The shell owns the border, the radius and the
   shadow, so neither column repeats them — a card nested inside a card reads
   as noise. The form column keeps a fixed track so the inputs never stretch
   to a thousand pixels on a wide monitor. */
.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Brand column.

   It stays light under the dark theme as well, because the artwork the login
   is meant to show is logo-mark-on-light.png — the black mark. A dark panel
   would swallow it. The dark theme only shifts the gradient so the column
   still separates from the form, and the guards in custom.css swap in
   logo-mark-on-dark.png when html.dark is set. */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 46px 44px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--primary-light) 100%);
  border-inline-end: 1px solid var(--border);
  overflow: hidden;
}
/* Dot texture, drawn in CSS so it costs no extra request. */
.auth-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(37,99,235,0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.dark .auth-brand {
  background: linear-gradient(160deg, #111827 0%, #0B1220 100%);
}
.dark .auth-brand::after {
  background-image: radial-gradient(rgba(147,197,253,0.16) 1px, transparent 1px);
}

.auth-brand-head { display: flex; align-items: center; gap: 14px; }
.auth-brand-id   { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.auth-brand-name { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--text); }
.auth-brand-tag  { font-size: 13px; color: var(--muted); }
.dark .auth-brand-name { color: #F8FAFC; }
.dark .auth-brand-tag  { color: #94A3B8; }

/* Display line. Left to the column width rather than a ch cap, because ch
   measures a Latin zero and Arabic runs far wider — a ch limit here would
   shred the sentence into five ragged lines. */
.auth-brand-lede {
  margin: 0;
  font-size: 29px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text);
}
.dark .auth-brand-lede { color: #F8FAFC; }

.auth-brand-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-brand-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}
.dark .auth-brand-points li { color: #94A3B8; }
.auth-brand-points li::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(37,99,235,0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
.dark .auth-brand-points li::before { background-color: rgba(96,165,250,0.16); }

/* Form column. It carries no border, radius or shadow of its own — the shell
   provides all three. Deliberately not hover-liftable: a panel that moves away
   as the cursor approaches it is a daily annoyance, not a delight.

   No entrance animation here either. `main` in custom.css already fades this
   whole column up on load, so the brand panel beside it holding still is the
   stagger — adding a second, competing animation on top just compounds two
   different transforms. */
.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 40px;
}
.auth-form { width: 100%; }
.auth-form-head { margin-bottom: 24px; }

/* Server-side rejection, shown once above the form rather than per field: the
   login failure is about the pair, and two red boxes for one mistake reads as
   two mistakes. */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.10);
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.55;
}
.dark .auth-alert {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.40);
  color: #FCA5A5;
}

/* Vertical rhythm on a 4px grid: 16px between fields, 20px before the
   options row, 4px inside the options row, 20px before the button. */
.auth-field + .auth-field { margin-top: 16px; }
.auth-field .form-label { margin-bottom: 7px; }

.auth-input-wrap { position: relative; }
/* Room for the eye button so the placeholder never runs underneath it. */
.auth-input-wrap .form-input { padding-inline-end: 44px; }
.auth-pw-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.auth-pw-toggle:hover { color: var(--text); background: rgba(107, 114, 128, 0.14); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0;
}
.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.auth-remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.auth-submit { width: 100%; }

/* Standalone card still used by the generic error page. Same shell language
   as the login column, minus the shimmer bar and the hover lift that used to
   make the whole panel jump. */
.auth-card {
  position: relative;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dark .auth-card { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); }

.auth-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.auth-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.auth-divider {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 24px;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  text-decoration: none;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.auth-back-link:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Demo credentials sit under a hairline instead of inside a tinted box.
   A blue panel shouting about the password pushed the real button down the
   page and made test data look like the point of the screen; a separator
   keeps it findable without competing with the form. */
.auth-demo {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.auth-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.auth-demo-title { font-weight: 600; color: var(--text); }
.auth-demo code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--primary-light);
  color: var(--primary);
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 600;
}
.dark .auth-demo code { background: rgba(37, 99, 235, 0.20); color: #93C5FD; }

.auth-demo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.auth-chip:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.auth-chip:active { transform: translateY(1px); }
.auth-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dark .auth-chip { background: rgba(255, 255, 255, 0.05); }
.dark .auth-chip:hover { background: rgba(37, 99, 235, 0.18); }
.auth-demo-hint { margin: 11px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* Footer line, outside the shell so it does not look like card content. */
.auth-copy {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Below 900px the two columns no longer fit side by side. The brand column
   collapses to a header row and drops the prose: on a phone nobody reads the
   value proposition, they need the inputs above the fold. */
@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
  }
  .auth-brand {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
  }
  .auth-brand-lede,
  .auth-brand-points,
  .auth-brand-tag { display: none; }
  .auth-main { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .auth-body { padding: 20px 16px; gap: 16px; }
  .auth-brand { padding: 18px 20px; }
  .auth-main { padding: 28px 20px; }
  .auth-brand-name { font-size: 19px; }
  .auth-title { font-size: 22px; }
}

/* ============================================
   Dark Mode — Override inline hardcoded stat icon colors
   For elements that still use inline background/stroke, we inject
   targeted overrides below. Elements MUST have the helper class applied.
   ============================================ */

/* Inline-style override: elements with data-icon-color attribute */
.dark [data-icon="success"] { background:#14532D !important; }
.dark [data-icon="danger"]  { background:#450A0A !important; }
.dark [data-icon="warning"] { background:#451A03 !important; }
.dark [data-icon="info"]    { background:#1E3A5F !important; }
.dark [data-icon="purple"]  { background:#2E1065 !important; }
.dark [data-icon="orange"]  { background:#431407 !important; }

/* General dark mode helper: cards with inline background (stat sub-cards) */
.dark .stat-sub-card { background: rgba(255,255,255,0.05) !important; }

/* ============================================
   Dark Mode — Dropdown danger hover
   ============================================ */
.dark .dropdown-item.danger:hover { background: #450A0A; color: #F87171; }

/* ============================================
   Dark Mode — Toast icons
   ============================================ */
.dark .toast-success .toast-icon { background: #14532D; color: #4ADE80; }
.dark .toast-error   .toast-icon { background: #450A0A; color: #F87171; }
.dark .toast-warning .toast-icon { background: #451A03; color: #FCD34D; }
.dark .toast-info    .toast-icon { background: #1E3A5F; color: #60A5FA; }

/* ============================================
   Dark Mode — POS product cards
   ============================================ */
.dark .pos-product-card { background: var(--surface); }
.dark .pos-product-card.in-cart { background: var(--primary-light); }

/* ============================================
   Dark Mode — Upload Zone
   ============================================ */
.dark .upload-zone { background: rgba(255,255,255,0.03); }
.dark .upload-zone:hover, .dark .upload-zone.dragover { background: var(--primary-light); }

/* ============================================
   Dark Mode — Notification unread
   ============================================ */
.dark .notification-item.unread { background: rgba(37,99,235,0.06); }

/* ============================================
   Dark Mode — Modal
   ============================================ */
.dark .modal-backdrop { background: rgba(0,0,0,0.7); }
.dark .modal-box { box-shadow: 0 24px 64px rgba(0,0,0,0.5); }

/* ============================================
   Page Header — Professional Design
   ============================================ */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
  padding: 20px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.page-header .page-title {
  font-size: 26px; font-weight: 800; color: var(--text);
  line-height: 1.2; letter-spacing: -0.5px; margin-top: 6px;
}
.page-header .page-subtitle {
  font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5;
}
.page-header-actions {
  display: flex; gap: 10px; align-items: center; flex-shrink: 0;
}

/* ============================================
   Stat Cards — Professional with Icon
   ============================================ */
.stat-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-card-icon.icon-bg-primary { background: rgba(37,99,235,0.1); color: var(--primary); }
.stat-card-icon.icon-bg-warning { background: rgba(245,158,11,0.1); color: var(--warning); }
.stat-card-icon.icon-bg-danger  { background: rgba(239,68,68,0.1); color: var(--danger); }
.stat-card-icon.icon-bg-info    { background: rgba(59,130,246,0.1); color: var(--info); }
.stat-card-icon.icon-bg-purple  { background: rgba(139,92,246,0.1); color: #8B5CF6; }
.stat-card-icon.icon-bg-success { background: rgba(22,163,74,0.1); color: #16A34A; }
.dark .stat-card-icon.icon-bg-primary { background: rgba(37,99,235,0.15); }
.dark .stat-card-icon.icon-bg-warning { background: rgba(245,158,11,0.15); }
.dark .stat-card-icon.icon-bg-danger  { background: rgba(239,68,68,0.15); }
.dark .stat-card-icon.icon-bg-info    { background: rgba(59,130,246,0.15); }
.dark .stat-card-icon.icon-bg-purple  { background: rgba(139,92,246,0.15); }

/* ============================================
   Filter Bar — Horizontal with gap
   ============================================ */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px;
}
.filter-bar .search-box { flex: 1; min-width: 220px; }
.filter-bar .form-input,
.filter-bar .form-select {
  height: 40px; font-size: 13px; min-width: 150px;
  background: var(--surface); border: 1px solid var(--border);
}

/* ============================================
   Utility Classes — Replace inline styles
   ============================================ */

/* Page structure */
.page-section { margin-bottom: var(--section-gap); }
.page-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.page-section-title {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.page-section-subtitle {
  font-size: 12px; color: var(--muted); margin-top: 2px;
}

/* Stat cards (utility) */
.stat-card-body { flex: 1; min-width: 0; }
.stat-label {
  font-size: 12px; font-weight: 500; color: var(--muted-color); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.stat-value {
  font-size: 28px; font-weight: 700; color: var(--heading-color); letter-spacing: -0.02em; line-height: 1.2;
}
.stat-sub-card {
  background: var(--background); border-radius: 10px; padding: 14px 16px 12px;
  transition: box-shadow 0.2s ease;
}
.stat-sub-card:hover { box-shadow: var(--shadow-sm); }
.stat-sub-label {
  font-size: 12px; color: var(--muted); font-weight: 500;
  line-height: 1.4;
}
.stat-sub-value {
  font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2;
}
@media (max-width: 768px) {
  .stat-sub-card { padding: 12px 14px 10px; border-radius: 8px; }
  .stat-sub-value { font-size: 18px; }
  .stat-sub-label { font-size: 11px; }
}
@media (max-width: 400px) {
  .stat-sub-card { padding: 10px 12px 8px; }
  .stat-sub-value { font-size: 16px; }
}

/* Avatar */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg { width: 40px; height: 40px; font-size: 13px; }

/* Card header layout */
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.card-title {
  font-size: 16px; font-weight: 600; color: var(--heading-color); letter-spacing: -0.01em;
}
.card-subtitle {
  font-size: 13px; color: var(--muted-color); margin-top: 3px; line-height: 1.5;
}

/* Filter bar (utility) */
.filter-bar .form-input,
.filter-bar .form-select {
  height: 38px; font-size: 13px; min-width: 0;
}

/* Table utilities */
.text-right { text-align: right; }
.text-center { text-align: center; }
.table-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--background); border-radius: 12px 12px 0 0;
}
.table-footer {
   display: flex; align-items: center; justify-content: space-between;
   padding: 16px 20px 20px 20px; border-top: 1px solid var(--border);
   gap: 16px; flex-wrap: wrap;
}
.table-footer-info {
  font-size: 13px; color: var(--muted); white-space: nowrap; flex-shrink: 0;
  font-weight: 500; letter-spacing: 0.01em;
}
.table-footer-actions {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* ============================================
   Pagination — Clean, professional
   ============================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination .page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #e2e5ea;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}
.dark .pagination .page-btn {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #d1d5db;
}
.pagination .page-btn:hover:not(:disabled):not(.active) {
  background: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
}
.dark .pagination .page-btn:hover:not(:disabled):not(.active) {
  background: rgba(255,255,255,0.1);
  color: #f3f4f6;
  border-color: rgba(255,255,255,0.2);
}
.pagination .page-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.pagination .page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination .page-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pagination .page-ellipsis {
  min-width: 28px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  user-select: none;
}

/* ============================================
   Legacy ID selectors (dynamic pagination)
   ============================================ */
#products-table-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toggle switch */
.toggle-switch {
  position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border); border-radius: 24px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* Page footer */
.app-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px; flex-wrap: wrap; gap: 8px;
}
.app-footer-text {
  font-size: 12px; 
  color: #888;
}
.app-footer-links {
  display: flex; gap: 16px;
}

/* Print invoice */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
}

/* ============================================
   Focus Visible — Keyboard navigation
   ============================================ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn:focus-visible,
.nav-item:focus-visible,
.submenu-item:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .submenu { transition: none; }
}

/* ============================================
   Responsive — Full Coverage
   ============================================ */

/* Desktop Large (1200px+) */
@media (min-width: 1200px) {
  .welcome-banner { padding: 32px 36px; }
  .stat-value { font-size: 28px; }
  .page-title { font-size: 26px; }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .welcome-banner { padding: 24px 28px; }
  .welcome-title { font-size: 22px; }
  .stat-value { font-size: 24px; }
  .stat-card { padding: 16px 18px; gap: 12px; }
  .stat-card-icon { width: 44px; height: 44px; border-radius: 12px; }
  .page-title { font-size: 22px; }
  .page-header { padding: 18px 20px; }
  .filter-bar .form-input,
  .filter-bar .form-select { min-width: 140px; }
}

/* Tablet Landscape (991px) */
@media (max-width: 991px) {
  #sidebar { transform: translateX(-100%); z-index: 70; width: var(--sidebar-width) !important; }
  #sidebar.mobile-open { transform: translateX(0); }
  #main-wrapper { margin-left: 0 !important; }
  #mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 65; }
  #mobile-overlay.show { display: block; animation: fadeIn 0.2s ease; }

  .welcome-banner { flex-direction: column; align-items: flex-start; padding: 24px 28px; gap: 16px; }
  .welcome-banner-content { gap: 14px; }
  .welcome-banner-icon { width: 46px; height: 46px; border-radius: 12px; }
  .welcome-banner-icon svg { width: 22px; height: 22px; }
  .welcome-actions { width: 100%; justify-content: flex-start; }
  .welcome-title { font-size: 22px; }
  .welcome-subtitle { font-size: 13px; }

  .stat-value { font-size: 24px; }
  .page-title { font-size: 22px; }
  .page-header { padding: 18px 20px; gap: 12px; }
  .filter-bar { padding: 12px 14px; }
  .card { padding: 18px; }
}

/* Tablet Portrait (768px) */
@media (max-width: 768px) {
  .welcome-banner { padding: 20px 22px; border-radius: 12px; }
  .welcome-banner-content { gap: 12px; }
  .welcome-banner-icon { width: 40px; height: 40px; border-radius: 10px; }
  .welcome-banner-icon svg { width: 20px; height: 20px; }
  .welcome-title { font-size: 20px; }
  .welcome-subtitle { font-size: 13px; }
  .welcome-actions { flex-wrap: wrap; gap: 8px; }
  .welcome-actions .btn-welcome-outline,
  .welcome-actions .btn-welcome-export { padding: 7px 14px; font-size: 12px; }

  .stat-value { font-size: 22px; }
  .stat-card { padding: 16px 18px; gap: 12px; }
  .stat-card-icon { width: 44px; height: 44px; border-radius: 12px; }
  .stat-card-icon svg { width: 18px; height: 18px; }

  .page-title { font-size: 20px; }
  .page-subtitle { font-size: 12px; }
  .page-header { flex-direction: column; align-items: stretch; padding: 16px 18px; }
  .page-header-actions { justify-content: flex-start; flex-wrap: wrap; }

  .filter-bar { flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
  .filter-bar .search-box { min-width: 100%; }
  .filter-bar .form-input,
  .filter-bar .form-select { width: 100%; min-width: 0; }

  .card { padding: 16px; border-radius: 12px; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  .table-footer { flex-direction: column; align-items: center; gap: 12px; padding: 14px 16px; }
  .table-footer-actions { margin-left: 0; gap: 6px; }
  .pagination .page-btn {
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }
  .pagination .page-btn svg {
    width: 15px;
    height: 15px;
  }
  .pagination .page-ellipsis {
    min-width: 26px;
    height: 36px;
    font-size: 12px;
  }

  .app-footer { flex-direction: column; text-align: center; gap: 6px; padding: 14px 0; }
  .app-footer-links { justify-content: center; }

  .breadcrumb { font-size: 11px; gap: 4px; }
  .badge { padding: 3px 10px; font-size: 11px; }
  .trend-up, .trend-down { font-size: 10px; padding: 2px 8px; }

  /* A phone has no room for the desktop gutter around a dialog, and the
     footer buttons need the full width once they are stacked. */
  .modal-backdrop { padding: 12px; align-items: flex-end; }
  .modal-header { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
}

/* Mobile Large (576px) */
@media (max-width: 576px) {
  main { padding: 12px !important; }

  .welcome-banner { padding: 18px 16px; border-radius: 10px; }
  .welcome-banner-content { gap: 10px; }
  .welcome-banner-icon { width: 36px; height: 36px; border-radius: 8px; }
  .welcome-banner-icon svg { width: 18px; height: 18px; }
  .welcome-title { font-size: 18px; }
  .welcome-subtitle { font-size: 12px; line-height: 1.5; }
  .welcome-actions { flex-direction: column; }
  .welcome-actions .btn-welcome-outline,
  .welcome-actions .btn-welcome-export { width: 100%; justify-content: center; }

  .stat-value { font-size: 20px; }
  .stat-card { padding: 14px 16px; gap: 10px; }
  .stat-card-icon { width: 40px; height: 40px; border-radius: 10px; }
  .stat-label { font-size: 11px; }

  .page-title { font-size: 18px; }
  .page-subtitle { font-size: 11px; }
  .page-header { padding: 14px 16px; border-radius: 10px; }
  .page-header-actions { flex-direction: column; width: 100%; }
  .page-header-actions .btn { width: 100%; justify-content: center; }

  .filter-bar .search-box { min-width: 100%; }
  .filter-bar .form-input,
  .filter-bar .form-select { height: 38px; font-size: 12px; }

  .card { padding: 14px; border-radius: 10px; }
  .card-title { font-size: 14px; }

  .data-table { font-size: 12px; }
  .data-table thead th { padding: 10px 12px; font-size: 10px; }
  .data-table tbody td { padding: 10px 12px; }

  .table-footer { padding: 12px 14px; }
  .table-footer-info { font-size: 12px; }
  .pagination .page-btn {
    min-width: 34px;
    height: 34px;
    font-size: 12px;
    border-radius: 9px;
  }
  .pagination .page-btn svg {
    width: 14px;
    height: 14px;
  }
  .pagination .page-ellipsis {
    min-width: 22px;
    height: 34px;
    font-size: 12px;
  }

  .breadcrumb { display: none; }

  .btn { padding: 8px 14px; font-size: 13px; }
  .btn-sm { padding: 6px 10px; font-size: 11px; }
}

/* Mobile Small (400px) */
@media (max-width: 400px) {
  main { padding: 10px !important; }

  .welcome-banner { padding: 14px 12px; }
  .welcome-title { font-size: 16px; }
  .welcome-subtitle { font-size: 11px; }

  .stat-value { font-size: 18px; }
  .stat-card { padding: 12px 14px; gap: 8px; }
  .stat-card-icon { width: 36px; height: 36px; border-radius: 8px; }
  .stat-card-icon svg { width: 16px; height: 16px; }

  .page-title { font-size: 16px; }
  .page-header { padding: 12px 14px; }
  .page-header .page-title { margin-top: 0; }

  .card { padding: 12px; }

  .data-table { font-size: 11px; }
  .data-table thead th { padding: 8px 10px; font-size: 9px; letter-spacing: 0.4px; }
  .data-table tbody td { padding: 8px 10px; }

  .table-footer { padding: 10px 12px; }
  .table-footer-info { font-size: 11px; }
  .pagination .page-btn {
    min-width: 28px;
    height: 28px;
    font-size: 11px;
    border-radius: 6px;
  }
  .pagination .page-btn svg {
    width: 12px;
    height: 12px;
  }
  .pagination .page-ellipsis {
    min-width: 18px;
    height: 28px;
    font-size: 11px;
  }
  #products-table-pagination .btn svg,
  #sales-table-pagination .btn svg,
  #customers-table-pagination .btn svg,
  #purchases-table-pagination .btn svg,
  #categories-table-pagination .btn svg,
  #stock-adjustment-table-pagination .btn svg,
  #suppliers-table-pagination .btn svg,
  #expenses-table-pagination .btn svg,
  #users-table-pagination .btn svg {
    width: 14px;
    height: 14px;
  }

  .badge { padding: 2px 8px; font-size: 10px; border-radius: 14px; }
  .trend-up, .trend-down { font-size: 9px; padding: 2px 6px; }
}

/* Height-based adjustments */
@media (max-height: 600px) {
  .welcome-banner { padding: 16px 20px; }
  .welcome-title { font-size: 18px; }
  .stat-card { padding: 12px 16px; }
}

/* Landscape phone */
@media (max-width: 768px) and (orientation: landscape) {
  .welcome-banner { flex-direction: row; align-items: center; }
  .welcome-actions { width: auto; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; min-width: 44px; }
  .btn-sm { min-height: 36px; }
  .nav-item { padding: 12px 14px; }
  .submenu-item { padding: 10px 14px; }
  .dropdown-item { padding: 12px 16px; }
  #products-table-pagination .btn,
  #sales-table-pagination .btn,
  #customers-table-pagination .btn,
  #purchases-table-pagination .btn,
  #categories-table-pagination .btn,
  #stock-adjustment-table-pagination .btn,
  #suppliers-table-pagination .btn,
  #expenses-table-pagination .btn,
  #users-table-pagination .btn {
    min-height: 40px;
    min-width: 40px;
  }
}

/* Print */
@media print {
  .no-print { display: none !important; }
  #sidebar, #app-header, #mobile-overlay { display: none !important; }
  #main-wrapper { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  .welcome-banner { background: #f0f0f0 !important; color: #000 !important; }
  .btn { display: none !important; }
  @page { margin: 15mm; }
}

/* ============================================
   Dashboard — Premium Design System
   ============================================ */

/* Stat Cards — Modern with accent bar */
.dash-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--info));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dash-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.dash-stat-card:hover::before { opacity: 1; }
.dash-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dash-stat-value {
  font-size: 28px; font-weight: 800; color: var(--heading-color);
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 4px;
}
.dash-stat-profit { color: var(--primary); }
.dash-stat-label {
  font-size: 12px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
}
.dash-stat-bar {
  height: 4px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.dash-stat-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .dash-stat-card { background: var(--surface); }

/* Revenue Breakdown Card */
.dash-revenue-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--background);
  border-radius: 10px;
  transition: box-shadow 0.2s ease;
}
.dash-revenue-item:hover { box-shadow: var(--shadow-sm); }
.dash-revenue-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dash-revenue-label {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.dash-revenue-desc {
  font-size: 11px; color: var(--muted); margin-top: 1px;
}
.dash-revenue-amount {
  font-size: 16px; font-weight: 700; color: var(--heading-color);
  letter-spacing: -0.02em;
}

/* Metric Cards — For Inventory/Users sections */
.dash-metric-card {
  text-align: center;
  background: var(--background);
  border-radius: 12px;
  padding: 20px 16px;
  transition: all 0.2s ease;
}
.dash-metric-card:hover {
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.dash-metric-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.dash-metric-value {
  font-size: 28px; font-weight: 800; color: var(--heading-color);
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 4px;
}
.dash-metric-label {
  font-size: 12px; font-weight: 500; color: var(--muted);
  letter-spacing: 0.3px;
}

/* Stock Overview Items */
.dash-stock-item {
  padding: 10px 14px;
  background: var(--background);
  border-radius: 10px;
  transition: box-shadow 0.2s ease;
}
.dash-stock-item:hover { box-shadow: var(--shadow-sm); }
.dash-stock-info {
  display: flex; align-items: center; gap: 8px;
}
.dash-stock-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dash-progress-track {
  height: 6px; background: var(--border); border-radius: 6px; overflow: hidden;
}
.dash-progress-fill {
  height: 100%; border-radius: 6px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Purchase Overview Items */
.dash-purchase-item {
  padding: 10px 14px;
  background: var(--background);
  border-radius: 10px;
  transition: box-shadow 0.2s ease;
}
.dash-purchase-item:hover { box-shadow: var(--shadow-sm); }
.dash-purchase-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Chart Section */
.dash-chart-total {
  font-size: 32px; font-weight: 800; color: var(--heading-color);
  letter-spacing: -0.03em; line-height: 1.1;
}
.dash-chart-subtitle {
  font-size: 13px; font-weight: 500; color: var(--muted);
}

/* Dark Mode Overrides */
.dark .dash-stat-card::before { opacity: 0; }
.dark .dash-stat-card:hover::before { opacity: 1; }
.dark .dash-revenue-item { background: rgba(255,255,255,0.04); }
.dark .dash-metric-card { background: rgba(255,255,255,0.04); }
.dark .dash-metric-card:hover { background: rgba(255,255,255,0.06); }
.dark .dash-stock-item { background: rgba(255,255,255,0.04); }
.dark .dash-purchase-item { background: rgba(255,255,255,0.04); }

/* Responsive */
@media (max-width: 768px) {
  .dash-stat-value { font-size: 24px; }
  .dash-stat-icon { width: 40px; height: 40px; }
  .dash-metric-value { font-size: 24px; }
  .dash-metric-icon { width: 40px; height: 40px; }
  .dash-chart-total { font-size: 26px; }
  .dash-revenue-amount { font-size: 14px; }
}
@media (max-width: 400px) {
  .dash-stat-card { padding: 16px; }
  .dash-stat-value { font-size: 22px; }
  .dash-metric-card { padding: 16px 12px; }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .submenu { transition: none; }
}