/* ============================================
   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;

  /* Color palette: Color Hunt "blue grey calm" (27374D / 526D82 / 9DB2BF / DDE6ED). */
  --primary: #27374D;
  --primary-dark: #1C2939;
  --primary-light: #DDE6ED;
  --background: #EEF2F6;
  --surface: #FFFFFF;
  --border: #DDE6ED;
  --text: #1E2A36;
  --muted: #526D82;
  --success: #3E9B72;
  --warning: #D9A03C;
  --danger: #D96A6A;
  --info: #526D82;

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

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;

  --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: #1E2A36;
  --body-text: #33414F;
  --text-secondary: #44566A;
  --muted-color: #526D82;
  --border-color: #DDE6ED;
  --subtle-bg: #F4F7FA;

  /* 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: #9DB2BF;
  --primary-dark: #B9C9D6;
  --background: #141B24;
  --surface: #27374D;
  --border: #3A4C61;
  --text: #E9EFF5;
  --muted: #9DB2BF;
  --primary-light: #2E3F52;
  --heading-color: #F1F6FA;
  --body-text: #C9D4DE;
  --text-secondary: #A9BAC8;
  --muted-color: #9DB2BF;
  --border-color: #3A4C61;
  --subtle-bg: #22303F;
}

/* ============================================
   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: 4px;
  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: 4px; 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: 4px;
  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, #526D82, #27374D);
  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: 4px;
  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: #DDE6ED; color: #27374D; }
.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: #2E3F52; color: #9DB2BF; }
.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: 4px;
  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: 4px;
  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: 4px; gap: 6px; }
.btn-lg { padding: 12px 24px; font-size: 15px; border-radius: 4px; }
.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: 4px;
  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: 4px; 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: #DDE6ED; color: #27374D; }
.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: 4px;
}

/* ============================================
   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: 4px;
  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; }

/* ============================================
   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: 4px; }
.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: 4px; }
.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: 4px; 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: 4px; 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: 4px;
  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: 4px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; 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: 4px;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:#DDE6ED; }
.icon-bg-info svg, .icon-bg-info .icon-svg { color:#27374D; }
.dark .icon-bg-info    { background:#2E3F52; }
.dark .icon-bg-info svg, .dark .icon-bg-info .icon-svg { color:#9DB2BF; }

/* 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;
}
/* Illustration inlined so its yellow can follow var(--primary-dark); the
   artwork keeps every original detail, only the yellow family is retinted.
   The boxes stack gets a slow, orderly lift — smooth alternate easing. */
.auth-brand > .auth-brand-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  pointer-events: none;
}
.auth-brand > .auth-brand-art > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dark .auth-brand > .auth-brand-art { opacity: 0.25; }
/* Sequential parade: every parcel takes its turn — one box moves every 5s
   (slides 25px aside, ghosting to 0.5 opacity while away, then returns).
   All share a 95s cycle (19 boxes x 5s); staggered animation-delay keeps
   exactly one box in motion at any moment, forever, without collisions. */
.auth-brand-art [class^="svg-mv-"] {
  animation: box-visit 95s ease-in-out infinite;
}
@keyframes box-visit {
  0%, 0.5%   { transform: translateX(0);    opacity: 1; }
  2.1%       { transform: translateX(25px); opacity: 0.5; }
  3.2%       { transform: translateX(25px); opacity: 0.5; }
  4.2%, 100% { transform: translateX(0);    opacity: 1; }
}
.svg-mv-0  { animation-delay: 0s;  } .svg-mv-1  { animation-delay: 5s;  }
.svg-mv-2  { animation-delay: 10s; } .svg-mv-3  { animation-delay: 15s; }
.svg-mv-4  { animation-delay: 20s; } .svg-mv-5  { animation-delay: 25s; }
.svg-mv-6  { animation-delay: 30s; } .svg-mv-7  { animation-delay: 35s; }
.svg-mv-8  { animation-delay: 40s; } .svg-mv-9  { animation-delay: 45s; }
.svg-mv-10 { animation-delay: 50s; } .svg-mv-11 { animation-delay: 55s; }
.svg-mv-12 { animation-delay: 60s; } .svg-mv-13 { animation-delay: 65s; }
.svg-mv-14 { animation-delay: 70s; } .svg-mv-15 { animation-delay: 75s; }
.svg-mv-16 { animation-delay: 80s; } .svg-mv-17 { animation-delay: 85s; }
.svg-mv-18 { animation-delay: 90s; }
/* 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: #9DB2BF; }

/* 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: #9DB2BF; }
.auth-brand-points li::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(39,55,77,0.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327374D' 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(157,178,191,0.18); }

/* 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: 4px;
  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: 4px;
  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: 4px;
  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: 4px;
  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:#2E3F52 !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: #2E3F52; color: #9DB2BF; }

/* ============================================
   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: 4px;
}
.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: 4px; transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-card-icon {
  width: 52px; height: 52px; border-radius: 4px;
  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: 4px; 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: 4px; 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: 4px; }
  .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: 4px 4px 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: 4px;
  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) {
  .stat-value { font-size: 28px; }
  .page-title { font-size: 26px; }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .stat-value { font-size: 24px; }
  .stat-card { padding: 16px 18px; gap: 12px; }
  .stat-card-icon { width: 44px; height: 44px; border-radius: 4px; }
  .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; }

  .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) {

  .stat-value { font-size: 22px; }
  .stat-card { padding: 16px 18px; gap: 12px; }
  .stat-card-icon { width: 44px; height: 44px; border-radius: 4px; }
  .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: 4px; }
  .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; }

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

  .page-title { font-size: 18px; }
  .page-subtitle { font-size: 11px; }
  .page-header { padding: 14px 16px; border-radius: 4px; }
  .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: 4px; }
  .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: 4px;
  }
  .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; }

  .stat-value { font-size: 18px; }
  .stat-card { padding: 12px 14px; gap: 8px; }
  .stat-card-icon { width: 36px; height: 36px; border-radius: 4px; }
  .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: 4px;
  }
  .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: 4px; }
  .trend-up, .trend-down { font-size: 9px; padding: 2px 6px; }
}

/* Height-based adjustments */
@media (max-height: 600px) {
  .stat-card { padding: 12px 16px; }
}

/* Landscape phone */
@media (max-width: 768px) and (orientation: landscape) {
}

/* 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; }
  .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: 4px;
  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: 4px;
  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); }

/* Dashboard toolbar (replaces hero banner) */
.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 16px; margin-bottom: 16px;
}
.dash-toolbar-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.dash-toolbar .form-input { height: 34px; font-size: 13px; padding-top: 0; padding-bottom: 0; }

/* KPI cards — design A: floating wave tail */
.kpi-card { padding-bottom: 26px; }
.kpi-card::before { display: none; }
.kpi-card .kpi-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 10px;
}
.kpi-card .kpi-value {
  font-size: 26px; font-weight: 800; color: var(--heading-color);
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 12px;
}
.kpi-card .kpi-pill {
  display: inline-block; background: var(--primary-light); color: var(--primary);
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  position: relative; z-index: 1;
}
.kpi-wave {
  position: absolute; left: 0; bottom: 0;
  width: 200%; height: 52px; display: block; pointer-events: none;
  opacity: 0.7;
}
.kpi-card:hover .kpi-wave {
  animation: kpi-wave-flow 9s linear infinite;
}
@keyframes kpi-wave-flow {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Revenue Breakdown Card */
.dash-revenue-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--background);
  border-radius: 4px;
  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: 4px;
  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: 4px;
  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: 4px;
  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: 4px; overflow: hidden;
}
.dash-progress-fill {
  height: 100%; border-radius: 4px;
  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: 4px;
  transition: box-shadow 0.2s ease;
}
.dash-purchase-item:hover { box-shadow: var(--shadow-sm); }
.dash-purchase-icon {
  width: 36px; height: 36px; border-radius: 4px;
  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; }
}

/* KPI amount redaction (eye toggle) */
.kpi-redact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.kpi-redact-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--background);
}
.kpi-redact-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.kpi-redact-btn .kpi-ic { display: inline-flex; line-height: 0; }
.kpi-redact-btn .kpi-ic-show { display: none; }
.kpi-redact-btn[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); }
.kpi-redact-btn[aria-pressed="true"] .kpi-ic-hide { display: none; }
.kpi-redact-btn[aria-pressed="true"] .kpi-ic-show { display: inline-flex; }
.kpi-value, .kpi-pill {
  transition: filter 0.25s ease;
}
#kpi-grid.kpi-redacted .kpi-value,
#kpi-grid.kpi-redacted .kpi-pill {
  filter: blur(7px);
  user-select: none;
}

/* Quick shortcuts menu (header bolt icon): icon tiles whose service name
   slides up smoothly from inside the bottom edge on hover. */
.quick-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
}
.quick-form { display: contents; }
.quick-icon {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--background);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.quick-ico {
  display: inline-flex;
  line-height: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-ico svg {
  width: 24px;
  height: 24px;
}
.quick-label {
  position: absolute;
  inset-inline: 4px;
  top: 50%;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--text);
  opacity: 0;
  transform: translate(0, calc(-50% + 60px));
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-icon:hover,
.quick-icon:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
}
.quick-icon:hover .quick-label,
.quick-icon:focus-visible .quick-label {
  transform: translate(0, -50%); opacity: 1;
}
.quick-icon:hover .quick-ico,
.quick-icon:focus-visible .quick-ico {
  transform: translateY(-44px);
  opacity: 0;
}
.quick-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.quick-icon.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.quick-icon.active .quick-label { color: #fff; }
.quick-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.quick-icon:disabled:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ============================================
   Simple launcher — the ui.simple_view preference
   ============================================ */
/* The rail is not rendered at all in this mode, so the content column has to
   take the width the sidebar would have taken. The selector is more specific
   than both the base layout and the RTL mirror (which loads later), so one rule
   covers every direction without an !important. */
body.simple-view #main-wrapper,
body.simple-view #main-wrapper.sidebar-collapsed {
  margin-left: 0;
  margin-right: 0;
}

/* Header stand-in for the burger: the tiles live on the dashboard, so this is
   the way back to them from any other screen. The glyph fills the plate the
   same way a tile's does - the box, not the padding, is the thing you see. */
.launcher-home-ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  transition: background 0.15s ease, color 0.15s ease;
}
#launcher-home:hover .launcher-home-ico,
#launcher-home:focus-visible .launcher-home-ico {
  background: var(--primary);
  color: var(--surface);
}
.launcher-home-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
@media (max-width: 640px) {
  .launcher-home-label { display: none; }
}

/* min-height rather than height: the block is centred when the tiles are few
   and simply grows when there are many, so nothing is ever pushed off-screen. */
.launcher {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-8);
  min-height: calc(100vh - var(--header-height) - 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--section-gap);
}
.launcher-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.launcher-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.launcher-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.launcher-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.launcher-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: var(--space-8) 0;
}

/* The rule after the caption keeps the groups apart on a wide screen without
   drawing a box around each of them. */
.launcher-section-title {
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.launcher-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.launcher-grid {
  display: grid;
  /* 104px keeps a card to roughly the width of the 36px glyph plus its name,
     so a row of eight or nine fits without the tiles stretching sideways. */
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-2);
}
/* The tile shows its icon alone, exactly like the quick shortcuts in the
   header: on hover (or keyboard focus) the icon slides up out of the box and
   the name rises into the space it leaves. The label is only faded and moved,
   never hidden, so it stays in the accessibility tree and remains the link's
   accessible name. */
.launcher-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 88px;
  /* Horizontal padding is the smallest step on the scale: the card is meant to
     hug the icon, not to frame it with air on both sides. */
  padding: var(--space-3) var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
              background-color 0.2s ease;
}
/* Hover fills the card with the system colour. --primary is #27374D in the
   light theme and its own light counterpart in the dark one, so the name and
   the icon switch to --surface (white / deep navy) and the pair stays readable
   in both themes without a second palette here. */
.launcher-tile:hover,
.launcher-tile:focus-visible {
  transform: translateY(-2px);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  outline: none;
}
.launcher-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* No plate behind the icon: it is drawn straight onto the card, large, and the
   only cue on hover is its colour. The box is the glyph plus 4px of air, so the
   two read as one mark; it also gives the hover something to slide out of. */
.launcher-tile-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, var(--muted));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s ease;
}
.launcher-tile-label {
  position: absolute;
  inset-inline: var(--space-2);
  top: 50%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  opacity: 0;
  /* Starts one label-height below the middle, i.e. off the bottom of the box
     because the tile clips its overflow. */
  transform: translate(0, calc(-50% + 60px));
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
/* Hover, keyboard focus, and the tile of the page being viewed all reveal the
   name; a tile that is already "here" has nothing to hover for. The travel is
   one box-height, which is what it takes for the glyph to clear the top edge. */
.launcher-tile:hover .launcher-tile-icon,
.launcher-tile:focus-visible .launcher-tile-icon,
.launcher-tile.active .launcher-tile-icon {
  transform: translateY(-44px);
  opacity: 0;
}
.launcher-tile:hover .launcher-tile-icon,
.launcher-tile:focus-visible .launcher-tile-icon {
  color: var(--surface);
}
.launcher-tile:hover .launcher-tile-label,
.launcher-tile:focus-visible .launcher-tile-label,
.launcher-tile.active .launcher-tile-label {
  transform: translate(0, -50%);
  opacity: 1;
}
/* The card is the system colour while hovered, so the name has to be the
   contrasting one - --surface is white on the light theme and deep navy on the
   dark one, which is the same pair the rest of the interface relies on. */
.launcher-tile:hover .launcher-tile-label,
.launcher-tile:focus-visible .launcher-tile-label {
  color: var(--surface);
}
.launcher-tile.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.launcher-tile.active .launcher-tile-label {
  color: var(--primary);
}

/* A touch screen never hovers, so the name would simply never be seen. There
   the label takes its place under the icon instead of swapping with it. */
@media (hover: none) {
  .launcher-tile-label {
    position: static;
    inset-inline: auto;
    opacity: 1;
    transform: none;
  }
  .launcher-tile:hover .launcher-tile-icon,
  .launcher-tile:focus-visible .launcher-tile-icon,
  .launcher-tile.active .launcher-tile-icon {
    transform: none;
    opacity: 1;
  }
  /* A tap leaves :hover stuck on the card the user just left, which would freeze
     the filled box there. Nothing hovers on this device, so nothing fills. */
  .launcher-tile:hover {
    background: var(--surface);
  }
}
.launcher-badge {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ============================================
   Printer cards
   ============================================ */
.printer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;
}
.printer-card {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  border-inline-start: 4px solid var(--border);
  transition: box-shadow 0.2s;
}
.printer-card:hover { box-shadow: var(--shadow-sm); }
.printer-card.is-online  { border-inline-start-color: var(--success); }
.printer-card.is-offline { border-inline-start-color: var(--warning); }
.printer-card.is-error   { border-inline-start-color: var(--danger); }
.printer-card.is-none    { border-style: dashed; }
.printer-card-head { display: flex; align-items: center; gap: 14px; }
.printer-card-icon {
  width: 64px; height: 64px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.is-online  .printer-card-icon { background: rgba(62,155,114,0.12); color: var(--success); }
.is-offline .printer-card-icon { background: rgba(217,160,60,0.14); color: var(--warning); }
.is-error   .printer-card-icon { background: rgba(217,106,106,0.14); color: var(--danger); }
.is-none    .printer-card-icon { background: transparent; color: var(--muted); opacity: 0.6; }
.printer-card-titles { flex: 1; min-width: 0; }
.printer-card-store { font-size: 15px; font-weight: 700; }
.printer-card-name {
  margin-top: 2px; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.printer-card-state { flex-shrink: 0; }
.printer-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 12px; }
.printer-card-meta dt { color: var(--muted); margin-bottom: 2px; }
.printer-card-meta dd {
  margin: 0; font-weight: 600;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.printer-card-meta dd.mono { direction: ltr; text-align: start; unicode-bidi: embed; }
.printer-card-error { margin: 0; font-size: 11px; color: var(--danger); }
.printer-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.printer-card-actions form { margin: 0; }
.printer-settings { border-top: 1px dashed var(--border); padding-top: 12px; }
.printer-settings > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none;
}
.printer-settings > summary::-webkit-details-marker { display: none; }
.printer-settings > summary::before { content: '\25BE  '; }
.printer-settings-body { display: grid; gap: 12px; margin-top: 12px; }
.printer-field { display: flex; flex-direction: column; gap: 4px; }
.printer-field label { font-size: 11px; color: var(--muted); }
.printer-field-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
@media (max-width: 520px) {
  .printer-grid { grid-template-columns: 1fr; }
  .printer-card-meta { grid-template-columns: 1fr; }
}