/* ═══════════════════════════════════════════════════════════════
   OUTLET SYNC — DESIGN SYSTEM v3.0
   Premium SaaS theme inspired by Shopify, Linear, Stripe
   ═══════════════════════════════════════════════════════════════ */

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

/* ─── DESIGN TOKENS ──────────────────────────────────────────── */

:root {
  /* ── Typography ─────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: var(--font-sans);
  --font-display: 'Hanken Grotesk', var(--font-sans);
  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  --font-feature: "cv02", "cv03", "cv04", "cv11", "ss03";

  /* ── Type Scale ─────────────────────── */
  /* Bumped up ~1px across the board so UI chrome (sidebar, labels,
     table headers, buttons) is no longer smaller than the app's
     historical 14px baseline. Adjust here to rescale everything. */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

  /* ── Spacing Scale (4px base) ───────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-section: 96px;

  /* ── Radius ─────────────────────────── */
  --radius-xs:   4px;   /* tags */
  --radius-sm:   8px;   /* cards, inputs */
  --radius-md:   12px;  /* featured cards, non-pill buttons */
  --radius-lg:   20px;  /* top-rounded, modal headers */
  --radius-xl:   20px;
  --radius-2xl:  20px;
  --radius-pill: 9999px; /* all primary CTAs — non-negotiable */
  --radius-full: 9999px;

  /* ── Easing ─────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Durations ──────────────────────── */
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   300ms;
  --duration-fast: 200ms;
  --duration-mid:  300ms;

  /* ── Elevation (theme-independent) ──── */
  --shadow-high: rgba(0,0,0,0.25) 0 25px 50px -12px, rgba(0,0,0,0.2) 0 0 0 1px;

  /* ── Global ─────────────────────────── */
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME (Default)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* ── Backgrounds ─────────────────────── */
  --bg-page:     #EEF2F0;
  --bg-sidebar:  #FFFFFF;
  --bg-header:   #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-sunken:   #F0F0ED;
  --bg-overlay:  rgba(0, 0, 0, 0.45);

  /* ── Surfaces ────────────────────────── */
  --surface-primary:   #FFFFFF;
  --surface-secondary: #FAFAF8;
  --surface-hover:     #F5F5F2;
  --surface-active:    #EDEDEA;
  --surface-selected:  rgba(14, 159, 110, 0.06);

  /* ── Borders ─────────────────────────── */
  --border-default:  #D8E1DD;
  --border-subtle:   #DCE4DF;
  --border-strong:   #B8C4BF;
  --border-focus:    #0E9F6E;
  --border-input:    #C9D4CF;
  --border-card:     #D8E1DD;

  /* ── Text ────────────────────────────── */
  --text-primary:    #0A1614;
  --text-secondary:  #586762;
  --text-tertiary:   #8A8A8A;
  --text-disabled:   #B5B5B5;
  --text-inverse:    #FFFFFF;
  --text-link:       #0E9F6E;

  /* ── Accent (Deep Emerald, AA on white) ─ */
  --accent:       #0E9F6E;
  --accent-hover: #10A56E;
  --accent-pressed: #0C8A5F;
  --accent-light: rgba(14, 159, 110, 0.08);
  --accent-text:  #0E9F6E;
  --focus-ring:   var(--accent);

  /* ── Primary CTA (inverted dark-ink fill) */
  --btn-primary-bg:       var(--text-primary);
  --btn-primary-bg-hover: #16221F;
  --btn-primary-text:     #FFFFFF;

  /* ── Semantic Status ─────────────────── */
  --status-success-bg:    #ECFDF5;
  --status-success-text:  #065F46;
  --status-success-border:#A7F3D0;
  --status-warning-bg:    #FFFBEB;
  --status-warning-text:  #92400E;
  --status-warning-border:#FDE68A;
  --status-danger-bg:     #FEF2F2;
  --status-danger-text:   #991B1B;
  --status-danger-border: #FECACA;
  --status-info-bg:       #EFF6FF;
  --status-info-text:     #1E40AF;
  --status-info-border:   #BFDBFE;
  --status-neutral-bg:    #F5F5F4;
  --status-neutral-text:  #57534E;
  --status-neutral-border:#D6D3D1;

  /* ── Shadows (multi-layer only — a single shadow reads flat) ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-ring:0 0 0 1px var(--border-default);
  --shadow-card:
    rgba(0,0,0,0.06) 0 0 0 1px,
    rgba(0,0,0,0.04) 0 2px 2px,
    rgba(0,0,0,0.04) 0 4px 4px,
    rgba(0,0,0,0.03) 0 8px 8px,
    rgba(255,255,255,0.6) 0 1px 0 inset;
  --shadow-card-hover:
    rgba(0,0,0,0.07) 0 0 0 1px,
    rgba(0,0,0,0.05) 0 4px 6px,
    rgba(0,0,0,0.04) 0 8px 12px,
    rgba(0,0,0,0.03) 0 16px 24px,
    rgba(255,255,255,0.8) 0 1px 0 inset;
  --shadow-focus: 0 0 0 2px var(--focus-ring);
  --shadow-dropdown: 0 12px 28px rgba(0,0,0,0.12), 0 0 0 1px var(--border-default);

  /* ── Tints (KPI cards) ───────────────── */
  --tint-sales-bg:    #EFF6FF; --tint-sales-color:    #2563EB;
  --tint-net-bg:      #ECFDF5; --tint-net-color:      #059669;
  --tint-due-bg:      #FFFBEB; --tint-due-color:      #D97706;
  --tint-return-bg:   #FEF2F2; --tint-return-color:   #DC2626;
  --tint-purchase-bg: #EEF2FF; --tint-purchase-color: #4F46E5;
  --tint-expense-bg:  #F5F3FF; --tint-expense-color:  #7C3AED;

  /* ── Nav ─────────────────────────────── */
  --nav-active-bg:   rgba(14, 159, 110, 0.08);
  --nav-active-text: #0E9F6E;
  --nav-hover-bg:    rgba(0, 0, 0, 0.03);
}


/* ═══════════════════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-page:     #0A0A0A;
  --bg-sidebar:  #111111;
  --bg-header:   #161616;
  --bg-elevated: #1A1A1A;
  --bg-sunken:   #0F0F0F;
  --bg-overlay:  rgba(0, 0, 0, 0.65);

  --surface-primary:   #1A1A1A;
  --surface-secondary: #222222;
  --surface-hover:     #2A2A2A;
  --surface-active:    #333333;
  --surface-selected:  rgba(52, 211, 153, 0.08);

  --border-default:  #2A2A2A;
  --border-subtle:   #222222;
  --border-strong:   #3A3A3A;
  --border-focus:    #34D399;

  --text-primary:    #EDEDED;
  --text-secondary:  #A0A0A0;
  --text-tertiary:   #6B6B6B;
  --text-disabled:   #4A4A4A;
  --text-inverse:    #0A0A0A;
  --text-link:       #34D399;

  --accent:       #34D399;
  --accent-hover: #2CC089;
  --accent-light: rgba(52, 211, 153, 0.1);
  --accent-text:  #34D399;
  --focus-ring:   var(--accent);

  --btn-primary-bg:       var(--accent);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-text:     var(--bg-page);

  --status-success-bg:    rgba(16, 185, 129, 0.1);
  --status-success-text:  #6EE7B7;
  --status-success-border:rgba(16, 185, 129, 0.2);
  --status-warning-bg:    rgba(245, 158, 11, 0.1);
  --status-warning-text:  #FCD34D;
  --status-warning-border:rgba(245, 158, 11, 0.2);
  --status-danger-bg:     rgba(239, 68, 68, 0.1);
  --status-danger-text:   #FCA5A5;
  --status-danger-border: rgba(239, 68, 68, 0.2);
  --status-info-bg:       rgba(59, 130, 246, 0.1);
  --status-info-text:     #93C5FD;
  --status-info-border:   rgba(59, 130, 246, 0.2);
  --status-neutral-bg:    rgba(255,255,255,0.05);
  --status-neutral-text:  #A0A0A0;
  --status-neutral-border:rgba(255,255,255,0.1);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);
  --shadow-ring:0 0 0 1px var(--border-default);
  --shadow-card:var(--shadow-ring);
  --shadow-dropdown: 0 12px 28px rgba(0,0,0,0.4), 0 0 0 1px var(--border-default);

  --tint-sales-bg: rgba(59,130,246,0.1);  --tint-sales-color: #60A5FA;
  --tint-net-bg: rgba(16,185,129,0.1);    --tint-net-color: #34D399;
  --tint-due-bg: rgba(245,158,11,0.1);    --tint-due-color: #FBBF24;
  --tint-return-bg: rgba(239,68,68,0.1);  --tint-return-color: #FCA5A5;
  --tint-purchase-bg: rgba(99,102,241,0.1); --tint-purchase-color: #818CF8;
  --tint-expense-bg: rgba(139,92,246,0.1); --tint-expense-color: #A78BFA;

  --nav-active-bg:   rgba(52, 211, 153, 0.08);
  --nav-active-text: #34D399;
  --nav-hover-bg:    rgba(255, 255, 255, 0.04);
}


/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.animate-fade-in  { animation: fadeIn var(--dur-normal) var(--ease-out) both; }
.animate-slide-up { animation: slideUp var(--dur-slow) var(--ease-out) both; }

/* Stagger children */
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2) { animation-delay: 50ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 100ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 150ms; }
.animate-stagger > *:nth-child(5) { animation-delay: 200ms; }
.animate-stagger > *:nth-child(6) { animation-delay: 250ms; }
.animate-stagger > *:nth-child(7) { animation-delay: 300ms; }
.animate-stagger > *:nth-child(8) { animation-delay: 350ms; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--surface-hover) 50%, var(--surface-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════════
   BASE RESETS
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  border-color: var(--border-default);
}

body {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: none; }

::selection {
  background: var(--accent-light);
  color: var(--accent-text);
}


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

h1 { font-size: var(--text-2xl) !important; letter-spacing: -0.025em !important; }
h2 { font-size: var(--text-xl) !important; letter-spacing: -0.015em !important; }
h3 { font-size: var(--text-lg) !important; }
h4 { font-size: var(--text-md) !important; }

.num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.num .naira {
  font-weight: 400;
  opacity: 0.5;
  margin-right: 2px;
}

.label-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   FOCUS MANAGEMENT
   ═══════════════════════════════════════════════════════════════ */

*:focus-visible {
  outline: 2px solid var(--border-focus) !important;
  outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
  outline: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }


/* ═══════════════════════════════════════════════════════════════
   TINT BADGES (KPI cards)
   ═══════════════════════════════════════════════════════════════ */

.tint-sales    { background: var(--tint-sales-bg);    color: var(--tint-sales-color); }
.tint-net      { background: var(--tint-net-bg);      color: var(--tint-net-color); }
.tint-due      { background: var(--tint-due-bg);      color: var(--tint-due-color); }
.tint-return   { background: var(--tint-return-bg);    color: var(--tint-return-color); }
.tint-purchase { background: var(--tint-purchase-bg);  color: var(--tint-purchase-color); }
.tint-expense  { background: var(--tint-expense-bg);   color: var(--tint-expense-color); }


/* ═══════════════════════════════════════════════════════════════
   SURFACE CARD (Primary container)
   ═══════════════════════════════════════════════════════════════ */

.surface-card {
  background: var(--surface-primary) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
  transition: box-shadow var(--dur-normal) var(--ease-in-out), border-color var(--dur-normal) var(--ease-in-out);
}

.surface-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--border-strong) !important;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT SHELL
   ═══════════════════════════════════════════════════════════════ */

/* Override AdminLTE body class */
body.app {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.thetop {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
}

/* Sidebar */
.side-bar,
.side-bar.tw-bg-white,
aside.side-bar {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-default) !important;
  width: 232px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Sidebar logo area */
.side-bar > a:first-child {
  background: var(--surface-primary) !important;
  border-bottom: none !important;
  border-right: none !important;
  padding: 0 var(--space-6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 60px !important;
  text-decoration: none !important;
}

.side-bar .side-bar-heading {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: var(--text-base) !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
}

/* Online indicator dot */
.side-bar .side-bar-heading span {
  width: 8px !important;
  height: 8px !important;
  margin-left: 6px !important;
}

/* Sidebar nav */
.side-bar .sidebar-menu {
  padding: var(--space-2) var(--space-3) !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

.side-bar .sidebar-menu > li.header {
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  padding: var(--space-3) var(--space-3) var(--space-1) !important;
  background: transparent !important;
}

.side-bar .sidebar-menu > li > a,
.side-bar a {
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 450 !important;
  padding: 4.5px var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
  margin-bottom: 1px !important;
}

.side-bar .sidebar-menu > li > a:hover,
.side-bar a:hover {
  color: var(--text-primary) !important;
  background: var(--nav-hover-bg) !important;
}

.side-bar .sidebar-menu > li.active > a {
  color: var(--nav-active-text) !important;
  background: var(--nav-active-bg) !important;
  font-weight: 550 !important;
  border-left: none !important;
  border-radius: var(--radius-md) !important;
  padding-left: var(--space-3) !important;
}

.side-bar .sidebar-menu > li.active > a .fa,
.side-bar .sidebar-menu > li.active > a .fas,
.side-bar .sidebar-menu > li.active > a .far,
.side-bar .sidebar-menu > li.active > a .svg,
.side-bar .sidebar-menu > li.active > a svg {
  color: var(--nav-active-text) !important;
}

.side-bar .sidebar-menu li > a > .fa,
.side-bar .sidebar-menu li > a > .fas,
.side-bar .sidebar-menu li > a > .far,
.side-bar .sidebar-menu li > a > .ion {
  color: var(--text-tertiary) !important;
  width: 18px !important;
  text-align: center !important;
  font-size: 14px !important;
  transition: color var(--dur-fast) var(--ease-in-out) !important;
}

.side-bar .sidebar-menu > li.active > a > .fa,
.side-bar .sidebar-menu > li.active > a > .fas {
  color: var(--nav-active-text) !important;
}

.side-bar .sidebar-menu > li > a:hover > .fa,
.side-bar .sidebar-menu > li > a:hover > .fas {
  color: var(--text-secondary) !important;
}

/* Treeview submenu */
.sidebar-menu .treeview-menu {
  background: transparent !important;
  padding: 0 0 var(--space-1) var(--space-6) !important;
  margin: 0 !important;
  list-style: none !important;
}

.sidebar-menu .treeview-menu > li > a {
  padding: 5px var(--space-3) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
  border-radius: var(--radius-sm) !important;
}

.sidebar-menu .treeview-menu > li > a:hover {
  color: var(--text-primary) !important;
}

/* Treeview arrow */
.sidebar-menu .treeview > a > .pull-right-container {
  color: var(--text-disabled) !important;
}

.sidebar-menu .treeview > a > .pull-right-container .fa-angle-left {
  transition: transform var(--dur-normal) var(--ease-in-out) !important;
  transform: none !important;
}

.sidebar-menu .treeview > a > .pull-right-container .fa-angle-left::before {
  content: "\f105" !important; /* fa-angle-right */
}

.sidebar-menu .treeview.menu-open > a > .pull-right-container .fa-angle-left {
  transform: rotate(90deg) !important;
}

/* Main area */
main, .tw-flex.tw-flex-col.tw-flex-1 {
  background: var(--bg-page) !important;
}

#scrollable-container {
  background: var(--bg-page) !important;
}

.content-wrapper {
  background: transparent !important;
  flex: 1 !important;
  min-width: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   CONTENT SECTIONS
   ═══════════════════════════════════════════════════════════════ */

.content-header {
  background: transparent !important;
  border: none !important;
  padding: var(--space-6) 0 var(--space-4) 0 !important;
}

section.content {
  padding: 0 0 var(--space-8) 0 !important;
  background: transparent !important;
}

/* Scrollable content area padding */
#scrollable-container {
  padding: 0 var(--space-6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   BOX / PANEL (AdminLTE Legacy)
   ═══════════════════════════════════════════════════════════════ */

.box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.box-header {
  border-bottom: none !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
}

.box-body {
  background: transparent !important;
  padding: var(--space-3) 0 !important;
}

.box-title {
  color: var(--text-primary) !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
}

.box-title a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════ */

.form-control {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  height: 38px !important;
  padding: var(--space-2) var(--space-3) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out) !important;
}

.form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--accent-light) !important;
}

.form-control::placeholder {
  color: var(--text-disabled) !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}

label, .control-label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  margin-bottom: var(--space-1) !important;
}


/* ─── Select2 ──────────────────────────────────── */

.select2-container--default .select2-selection--single {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  height: 38px !important;
  padding: 4px var(--space-3) !important;
  box-shadow: var(--shadow-xs) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 28px !important;
  font-size: var(--text-base) !important;
  padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-disabled) !important;
}

.select2-dropdown {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.select2-container--default .select2-results__option {
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  padding: var(--space-2) var(--space-3) !important;
  transition: background var(--dur-fast) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-3) !important;
  background: var(--bg-sunken) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
}


/* ═══════════════════════════════════════════════════════════════
   RAW / NATIVE FORM WIDGETS  →  light design-system parity
   Scoped to [data-theme="light"] so it only touches the dashboard
   (auth pages carry no data-theme; the Next.js POS is a separate app).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Native <select> (not enhanced by select2) ─── */
[data-theme="light"] select:not(.select2-hidden-accessible):not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--surface-primary) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586762' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  height: 38px !important;
  padding: var(--space-2) 34px var(--space-2) var(--space-3) !important;
  box-shadow: var(--shadow-xs) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  transition: border-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out) !important;
}
[data-theme="light"] select:not(.select2-hidden-accessible):not([multiple]):focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--accent-light) !important;
  outline: none !important;
}
[data-theme="light"] select:not(.select2-hidden-accessible)[multiple] {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
}

/* ─── Native checkboxes & radios → emerald accent ─── */
/* accent-color is inert when a library sets appearance:none (iCheck,
   daisyUI), so styled controls are left untouched. */
[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* ─── Native file input (when not wrapped by a plugin) ─── */
[data-theme="light"] input[type="file"] {
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}
[data-theme="light"] input[type="file"]::file-selector-button,
[data-theme="light"] input[type="file"]::-webkit-file-upload-button {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 14px !important;
  margin-right: 10px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* ─── bootstrap-datepicker (day/month/year calendar) ─── */
[data-theme="light"] .datepicker {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;
  color: var(--text-primary) !important;
  padding: 6px !important;
}
[data-theme="light"] .datepicker table { color: var(--text-primary) !important; }
[data-theme="light"] .datepicker th,
[data-theme="light"] .datepicker thead th,
[data-theme="light"] .datepicker .datepicker-switch,
[data-theme="light"] .datepicker .prev,
[data-theme="light"] .datepicker .next,
[data-theme="light"] .datepicker .dow {
  color: var(--text-primary) !important;
  background: transparent !important;
}
[data-theme="light"] .datepicker td.day { color: var(--text-primary) !important; }
[data-theme="light"] .datepicker td.day:hover,
[data-theme="light"] .datepicker .datepicker-switch:hover,
[data-theme="light"] .datepicker .prev:hover,
[data-theme="light"] .datepicker .next:hover,
[data-theme="light"] .datepicker .datepicker-months .month:hover,
[data-theme="light"] .datepicker .datepicker-years .year:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
}
[data-theme="light"] .datepicker td.old,
[data-theme="light"] .datepicker td.new,
[data-theme="light"] .datepicker td.day.disabled,
[data-theme="light"] .datepicker td.disabled {
  color: var(--text-disabled) !important;
}
[data-theme="light"] .datepicker td.active,
[data-theme="light"] .datepicker td.active:hover,
[data-theme="light"] .datepicker td.active.active {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-radius: 6px !important;
}
[data-theme="light"] .datepicker td.today:not(.active),
[data-theme="light"] .datepicker td.today:not(.active):hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
}
[data-theme="light"] .datepicker .datepicker-months .month,
[data-theme="light"] .datepicker .datepicker-years .year,
[data-theme="light"] .datepicker .datepicker-decades .decade,
[data-theme="light"] .datepicker .datepicker-centuries .century {
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* ─── bootstrap-timepicker widget ─── */
[data-theme="light"] .bootstrap-timepicker-widget.dropdown-menu {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;
  color: var(--text-primary) !important;
  padding: 8px !important;
}
[data-theme="light"] .bootstrap-timepicker-widget table td input {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  width: 42px !important;
  height: 32px !important;
}
[data-theme="light"] .bootstrap-timepicker-widget table td a {
  color: var(--text-secondary) !important;
  border: none !important;
}
[data-theme="light"] .bootstrap-timepicker-widget table td a:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
}

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-default, .btn-flat {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-default:hover, .btn-flat:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}

.btn-danger {
  background: var(--status-danger-text) !important;
  border-color: var(--status-danger-text) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
}

.btn-info {
  background: var(--status-info-text) !important;
  border-color: var(--status-info-text) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--status-warning-text) !important;
  border-color: var(--status-warning-text) !important;
  color: #fff !important;
}

/* Ghost button */
.btn-link {
  background: transparent !important;
  border: none !important;
  color: var(--text-link) !important;
  box-shadow: none !important;
  padding: var(--space-1) var(--space-2) !important;
}
.btn-link:hover { color: var(--accent-hover) !important; text-decoration: underline !important; }

/* Button sizing */
.btn-sm {
  padding: var(--space-1) var(--space-3) !important;
  font-size: var(--text-sm) !important;
}
.btn-xs {
  padding: 2px var(--space-2) !important;
  font-size: var(--text-xs) !important;
}
.btn-lg {
  padding: var(--space-3) var(--space-6) !important;
  font-size: var(--text-md) !important;
}

/* DataTable export buttons */
.dt-buttons .btn,
.buttons-csv, .buttons-excel, .buttons-print,
.buttons-pdf, .buttons-colvis, .buttons-copy {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 14px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.dt-buttons .btn:hover,
.buttons-csv:hover, .buttons-excel:hover, .buttons-print:hover,
.buttons-pdf:hover, .buttons-colvis:hover, .buttons-copy:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* DaisyUI action buttons */
.tw-dw-btn {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

.tw-dw-btn.tw-dw-btn-xs {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
}

.tw-dw-btn.tw-dw-btn-xs:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* Wide gradient CTA buttons — normalize */
.tw-dw-btn.tw-bg-gradient-to-r {
  background: var(--accent) !important;
  border: none !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}
.tw-dw-btn.tw-bg-gradient-to-r:hover {
  background: var(--accent-hover) !important;
}


/* ═══════════════════════════════════════════════════════════════
   NAV TABS
   ═══════════════════════════════════════════════════════════════ */

.nav-tabs-custom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.nav-tabs-custom > .nav-tabs {
  border-bottom: 1px solid var(--border-default) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-tabs-custom > .nav-tabs > li {
  margin-bottom: -1px !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  color: var(--text-tertiary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: var(--space-3) var(--space-5) !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color var(--dur-fast), border-color var(--dur-fast) !important;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--border-strong) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus {
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--accent) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.nav-tabs-custom > .tab-content {
  background: transparent !important;
  padding: var(--space-6) 0 0 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   BADGES & LABELS
   ═══════════════════════════════════════════════════════════════ */

.badge, .label {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
  border-radius: var(--radius-pill) !important;
  padding: 2px 8px !important;
  line-height: 1.4 !important;
}

.label-success, .badge-success {
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
}
.label-warning, .badge-warning {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
}
.label-danger, .badge-danger {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-text) !important;
}
.label-info, .badge-info {
  background: var(--status-info-bg) !important;
  color: var(--status-info-text) !important;
}
.label-default {
  background: var(--status-neutral-bg) !important;
  color: var(--status-neutral-text) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════ */

.dropdown-menu {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: var(--space-1) !important;
  min-width: 180px !important;
  animation: slideUp var(--dur-fast) var(--ease-out) !important;
}

.dropdown-menu > li > a {
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--dur-fast) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}

.dropdown-menu .divider {
  background: var(--border-subtle) !important;
  margin: var(--space-1) 0 !important;
}

/* DaisyUI dropdown */
.tw-dw-dropdown .tw-dw-dropdown-content {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
}


/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */

.modal-content {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
}

.modal-header {
  border-bottom: 1px solid var(--border-default) !important;
  padding: var(--space-5) var(--space-6) !important;
  background: var(--surface-primary) !important;
}

.modal-header .modal-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: var(--text-lg) !important;
}

.modal-header .close {
  color: var(--text-tertiary) !important;
  text-shadow: none !important;
  opacity: 0.7 !important;
  font-size: 20px !important;
}
.modal-header .close:hover { opacity: 1 !important; }

.modal-body {
  padding: var(--space-6) !important;
  color: var(--text-primary) !important;
}

.modal-footer {
  border-top: 1px solid var(--border-default) !important;
  padding: var(--space-4) var(--space-6) !important;
  background: var(--bg-sunken) !important;
}

.modal-backdrop.in {
  opacity: 0.45 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

table.table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

table.table thead th {
  background: var(--bg-sunken) !important;
  color: var(--text-tertiary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  border: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: var(--space-2) var(--space-4) !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

table.table tbody td {
  padding: var(--space-3) var(--space-4) !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  font-size: var(--text-base) !important;
  transition: background var(--dur-fast) !important;
}

table.table tbody tr {
  background: transparent !important;
}

table.table tbody tr:hover td {
  background: var(--surface-hover) !important;
}

/* Kill bordered / striped legacy */
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border: none !important;
}
.table-bordered > thead > tr > th { border-bottom: 1px solid var(--border-default) !important; }
.table-bordered > tbody > tr > td { border-bottom: 1px solid var(--border-subtle) !important; }

.table-striped > tbody > tr:nth-of-type(odd) {
  background: transparent !important;
}

/* Image thumbnails in tables */
table.table td img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DATATABLES WRAPPER
   ═══════════════════════════════════════════════════════════════ */

.dataTables_wrapper {
  color: var(--text-secondary) !important;
  font-size: var(--text-base) !important;
  padding-bottom: var(--space-5) !important;
}

.dataTables_wrapper .dataTables_length { margin-bottom: var(--space-3) !important; }
.dataTables_wrapper .dataTables_length label {
  color: var(--text-tertiary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 450 !important;
}

.dataTables_wrapper .dataTables_length select {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 8px !important;
  color: var(--text-primary) !important;
  min-width: 60px !important;
  margin: 0 4px !important;
}

.dataTables_wrapper .dataTables_filter { margin-bottom: var(--space-3) !important; }
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-tertiary) !important;
  font-weight: 450 !important;
}

.dataTables_wrapper .dataTables_filter input {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  padding: var(--space-2) var(--space-4) !important;
  color: var(--text-primary) !important;
  margin-left: var(--space-2) !important;
  font-size: var(--text-base) !important;
  min-width: 200px !important;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info {
  color: var(--text-tertiary) !important;
  padding-top: var(--space-4) !important;
  font-size: var(--text-sm) !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: var(--space-4) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
  background: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  padding: 5px 12px !important;
  margin: 0 2px !important;
  font-size: var(--text-sm) !important;
  transition: all var(--dur-fast) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
  font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

.dataTables_processing {
  background: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-6) !important;
  box-shadow: var(--shadow-lg) !important;
}

.dataTables_scrollHead { background: transparent !important; }
.dataTables_scrollBody { background: transparent !important; }


/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */

.alert {
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-base) !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid !important;
}

.alert-success {
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
  border-color: var(--status-success-border) !important;
}
.alert-warning {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
  border-color: var(--status-warning-border) !important;
}
.alert-danger {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-text) !important;
  border-color: var(--status-danger-border) !important;
}
.alert-info {
  background: var(--status-info-bg) !important;
  color: var(--status-info-text) !important;
  border-color: var(--status-info-border) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TOOLTIPS & POPOVERS
   ═══════════════════════════════════════════════════════════════ */

.tooltip-inner {
  background: var(--text-primary) !important;
  color: var(--bg-page) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-1) var(--space-2) !important;
  max-width: 240px !important;
}

.popover {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.popover-title {
  background: transparent !important;
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.popover-content { color: var(--text-secondary) !important; }


/* ═══════════════════════════════════════════════════════════════
   WIDGET COMPONENT (Tailwind override)
   ═══════════════════════════════════════════════════════════════ */

.tw-bg-white,
[class*="tw-bg-white"] {
  /* Don't blanket-override tw-bg-white; sidebar handled separately */
}

/* Widget boxes in content area */
.tw-mb-4.tw-transition-all.lg\:tw-col-span-2.tw-bg-white {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-card) !important;
}

.tw-ring-gray-200, [class*="tw-ring-gray-200"] {
  --tw-ring-color: var(--border-default) !important;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .side-bar, aside.side-bar {
    display: none !important;
  }

  #scrollable-container {
    padding: 0 var(--space-4) !important;
  }

  .content-header { padding: var(--space-4) 0 var(--space-2) 0 !important; }
  h1 { font-size: var(--text-xl) !important; }
}

@media (max-width: 991px) {
  .side-bar, aside.side-bar {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1050 !important;
    transition: left var(--dur-slow) var(--ease-out) !important;
  }

  .side-bar.small-view-side-active {
    left: 0 !important;
    display: flex !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MISC OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* SweetAlert theming */
.swal-modal {
  background: var(--surface-primary) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

.swal-title { color: var(--text-primary) !important; font-family: var(--font-sans) !important; }
.swal-text  { color: var(--text-secondary) !important; font-family: var(--font-sans) !important; }

.swal-button {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

/* Date Range Picker */
.daterangepicker {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
}

.daterangepicker .calendar-table {
  background: var(--surface-primary) !important;
}

.daterangepicker td.active {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm) !important;
}

/* iCheck */
.icheckbox_square-blue {
  border-radius: var(--radius-xs) !important;
}

/* Overlay */
.overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(3px) !important;
}

/* Spinners */
.fa-sync.fa-spin, .fa-spinner.fa-spin {
  color: var(--accent) !important;
}

/* Panel collapse */
.panel-collapse .box-body {
  padding: var(--space-2) 0 !important;
}

/* Print */
@media print {
  #scrollable-container {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }
  .side-bar, aside.side-bar, .no-print { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   HEADER BAR THEMING
   ═══════════════════════════════════════════════════════════════ */

/* Header container */
.thetop > main > div:first-child.no-print {
  background: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-default) !important;
  background-image: none !important;
}

/* Header icon buttons — theme them */
.thetop > main > div:first-child button[class*="tw-bg-"],
.thetop > main > div:first-child a[class*="tw-bg-"],
.thetop > main > div:first-child summary[class*="tw-bg-"],
.thetop > main > div:first-child details > summary {
  background: var(--surface-hover) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: none !important;
}

.thetop > main > div:first-child button[class*="tw-bg-"]:hover,
.thetop > main > div:first-child a[class*="tw-bg-"]:hover,
.thetop > main > div:first-child summary[class*="tw-bg-"]:hover {
  background: var(--surface-active) !important;
  color: var(--text-primary) !important;
}

/* POS Sale button in header — accent style */
.thetop > main > div:first-child a[href*="pos/create"] {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
}
.thetop > main > div:first-child a[href*="pos/create"]:hover {
  background: var(--accent-hover) !important;
}
/* The POS shortcut is the single busiest action on this bar — it's meant to
   carry the brand accent (this svg rule already assumed a filled background
   that was never wired up here, leaving a white icon on white: invisible). */
.main-header-bar .header-btn.header-btn-pos {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.main-header-bar .header-btn.header-btn-pos:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: translateY(-0.5px) !important;
}

.main-header-bar .header-btn.header-btn-pos:active {
  background: var(--accent-pressed) !important;
  border-color: var(--accent-pressed) !important;
  transform: translateY(0) !important;
}

.main-header-bar .header-btn.header-btn-pos svg {
  color: var(--text-inverse) !important;
}

/* User dropdown panel */
.thetop .tw-dw-dropdown .tw-bg-white,
.thetop details ul[role="menu"] {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border-radius: var(--radius-lg) !important;
  --tw-ring-color: transparent !important;
}

.thetop details ul[role="menu"] a {
  color: var(--text-secondary) !important;
}
.thetop details ul[role="menu"] a:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}

.thetop details ul[role="menu"] .tw-text-gray-900,
.thetop details ul[role="menu"] p.tw-text-sm {
  color: var(--text-primary) !important;
}

/* Sidebar collapse button text */
.side-bar-collapse span, .small-view-button span {
  color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER THEMING
   ═══════════════════════════════════════════════════════════════ */

footer {
  background: transparent !important;
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-tertiary) !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-4) var(--space-6) !important;
}

footer a {
  color: var(--text-tertiary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

.notifications-list,
.dropdown-menu.notifications {
  max-height: 400px !important;
  overflow-y: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER COMPONENT ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Breadcrumb styling */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 var(--space-2) 0 !important;
  font-size: var(--text-sm) !important;
}

.breadcrumb > li + li::before {
  color: var(--text-disabled) !important;
}

.breadcrumb > .active {
  color: var(--text-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   LEGACY PAGE TITLE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Override tw-text-black on h1 titles */
.content-header h1.tw-text-black,
.content-header h1[class*="tw-text-black"] {
  color: var(--text-primary) !important;
}

.content-header h1 small,
.content-header h1 small[class*="tw-text-gray"] {
  color: var(--text-tertiary) !important;
  font-weight: 400 !important;
}

/* Sell list date range */
#sell_list_selected_range {
  color: var(--text-tertiary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   FORM GROUP SPACING
   ═══════════════════════════════════════════════════════════════ */

.form-group {
  margin-bottom: var(--space-4) !important;
}


/* ═══════════════════════════════════════════════════════════════
   INPUT GROUP
   ═══════════════════════════════════════════════════════════════ */

.input-group-addon {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.input-group .form-control:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════════════════════ */

.progress {
  background: var(--bg-sunken) !important;
  border-radius: var(--radius-pill) !important;
  height: 6px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.progress-bar {
  background: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
}


/* ═══════════════════════════════════════════════════════════════
   CHART CONTAINERS
   ═══════════════════════════════════════════════════════════════ */

canvas {
  border-radius: var(--radius-md) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD SPECIFIC
   ═══════════════════════════════════════════════════════════════ */

/* Date filter button */
#dashboard_date_filter {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
}
#dashboard_date_filter:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}

/* Dashboard section icon circles */
.tw-border-2.tw-flex.tw-items-center.tw-justify-center.tw-rounded-full {
  border-color: var(--border-default) !important;
  background: var(--bg-sunken) !important;
}

/* Dashboard section titles */
.tw-font-bold.tw-text-base,
h3.tw-font-bold {
  color: var(--text-primary) !important;
}

/* Dashboard Tailwind text overrides */
.tw-text-gray-600 { color: var(--text-secondary) !important; }
.tw-text-gray-700 { color: var(--text-secondary) !important; }
.tw-text-gray-900 { color: var(--text-primary) !important; }
.tw-text-gray-500 { color: var(--text-tertiary) !important; }
.tw-text-gray-400 { color: var(--text-disabled) !important; }

/* Dashboard Tailwind bg overrides */
.tw-bg-white {
  background-color: var(--surface-primary) !important;
}
.tw-bg-gray-100, .hover\:tw-bg-gray-100:hover {
  background-color: var(--surface-hover) !important;
}

/* Tailwind border overrides */
.tw-ring-gray-200 {
  --tw-ring-color: var(--border-default) !important;
}
.tw-border-gray-200 {
  border-color: var(--border-default) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON
   ═══════════════════════════════════════════════════════════════ */

.scrolltop {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 100 !important;
}

.scrolltop .scroll.icon {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all var(--dur-fast) !important;
}

.scrolltop .scroll.icon:hover {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════════
   LOADING INDICATOR / OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.loading, .overlay, .overlay-wrapper {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(3px) !important;
}

.pace .pace-progress {
  background: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════════
   PANEL / WELL
   ═══════════════════════════════════════════════════════════════ */

.panel, .well {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
}

.panel-heading {
  background: var(--bg-sunken) !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  color: var(--text-primary) !important;
}

.panel-default > .panel-heading {
  background: var(--bg-sunken) !important;
  color: var(--text-primary) !important;
}

.panel-body {
  color: var(--text-primary) !important;
}

.panel-footer {
  background: var(--bg-sunken) !important;
  border-top: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SELECT2 MULTI-SELECT
   ═══════════════════════════════════════════════════════════════ */

.select2-container--default .select2-selection--multiple {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  min-height: 38px !important;
  padding: 2px var(--space-2) !important;
  box-shadow: var(--shadow-xs) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  padding: 2px 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--text-tertiary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   iCHECK OVERRIDE
   ═══════════════════════════════════════════════════════════════ */

.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type=hidden] + label::before {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY TABLE STATE
   ═══════════════════════════════════════════════════════════════ */

.dataTables_wrapper .dataTables_empty,
table.table td.dataTables_empty {
  text-align: center !important;
  color: var(--text-tertiary) !important;
  font-style: normal !important;
  padding: var(--space-10) var(--space-6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   GRADIENT BUTTONS → DESIGN SYSTEM ACCENT
   ═══════════════════════════════════════════════════════════════ */

/* Override all gradient "Add" buttons to use the design system accent */
a[class*="tw-bg-gradient-to-r"],
button[class*="tw-bg-gradient-to-r"],
.tw-bg-gradient-to-r {
  background: var(--accent) !important;
  background-image: none !important;
  color: var(--text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
}

a[class*="tw-bg-gradient-to-r"]:hover,
button[class*="tw-bg-gradient-to-r"]:hover,
.tw-bg-gradient-to-r:hover {
  background: var(--accent-hover) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DATATABLES EXPORT BUTTONS — REFINED
   ═══════════════════════════════════════════════════════════════ */

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons button.dt-button,
.dt-button {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  padding: 5px 12px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--dur-fast) !important;
  margin-right: 4px !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dt-button:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* DataTables length select */
.dataTables_wrapper .dataTables_length select {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 8px !important;
  font-size: var(--text-sm) !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
  color: var(--text-tertiary) !important;
  font-size: var(--text-sm) !important;
}

/* DataTables search */
.dataTables_wrapper .dataTables_filter input {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 12px !important;
  font-size: var(--text-sm) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--dur-fast) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.nav-tabs {
  border-bottom: 2px solid var(--border-subtle) !important;
}

.nav-tabs > li > a {
  color: var(--text-tertiary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) var(--space-4) !important;
  transition: all var(--dur-fast) !important;
}

.nav-tabs > li > a:hover {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--border-default) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--accent) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
}

.tab-content {
  padding-top: var(--space-4) !important;
}


/* ═══════════════════════════════════════════════════════════════
   FORM LABELS
   ═══════════════════════════════════════════════════════════════ */

label, .control-label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  margin-bottom: 4px !important;
}


/* ═══════════════════════════════════════════════════════════════
   ACTION DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════ */

.dropdown-menu {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-1) !important;
  min-width: 180px !important;
}

.dropdown-menu > li > a {
  color: var(--text-secondary) !important;
  padding: 8px 14px !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--dur-fast) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}

.dropdown-menu .divider {
  background: var(--border-subtle) !important;
  margin: 4px 0 !important;
}

/* Action dropdown toggle */
.btn-group > .btn.dropdown-toggle,
.btn-group > button.dropdown-toggle {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-group > .btn.dropdown-toggle:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TOOLTIP STYLING
   ═══════════════════════════════════════════════════════════════ */

.tooltip-inner {
  background: var(--surface-inverse) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-xs) !important;
  padding: 6px 10px !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 280px !important;
}

.tooltip.top .tooltip-arrow {
  border-top-color: var(--surface-inverse) !important;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--surface-inverse) !important;
}


/* ═══════════════════════════════════════════════════════════════
   POPOVER
   ═══════════════════════════════════════════════════════════════ */

.popover {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-sans) !important;
}

.popover-title {
  background: var(--bg-sunken) !important;
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.popover-content {
  color: var(--text-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   PAGINATION — REFINED
   ═══════════════════════════════════════════════════════════════ */

.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination > li > span {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  margin: 0 2px !important;
  padding: 5px 10px !important;
  transition: all var(--dur-fast) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination > li > a:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination > .active > a,
.pagination > .active > span {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.pagination > .disabled > a {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}


/* ═══════════════════════════════════════════════════════════════
   ALERT / NOTIFICATION BOXES
   ═══════════════════════════════════════════════════════════════ */

.alert {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) var(--space-4) !important;
  box-shadow: var(--shadow-xs) !important;
}

.alert-success {
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
}

.alert-danger, .alert-error {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-text) !important;
}

.alert-warning {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
}

.alert-info {
  background: var(--status-info-bg) !important;
  color: var(--status-info-text) !important;
}


/* ═══════════════════════════════════════════════════════════════
   CHECKBOX / RADIO REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}


/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES (LOGIN / REGISTER) — REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

.lockscreen .lockscreen-wrapper,
.login-page .login-box,
.register-page .register-box {
  font-family: var(--font-sans) !important;
}

/* Login form card */
.login-box-body, .register-box-body {
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-sans) !important;
}

.login-box-body .form-control,
.register-box-body .form-control {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  border: 1px solid var(--border-default) !important;
  padding: 10px 14px !important;
  font-size: var(--text-sm) !important;
}

.login-box-body .btn-primary,
.register-box-body .btn-primary {
  background: var(--accent) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  font-size: var(--text-md) !important;
  transition: all var(--dur-fast) !important;
}

.login-box-body .btn-primary:hover,
.register-box-body .btn-primary:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   CONTENT AREA SPACING
   ═══════════════════════════════════════════════════════════════ */

.content-header {
  padding: var(--space-5) var(--space-5) var(--space-3) var(--space-5) !important;
}

section.content {
  padding: 0 var(--space-5) var(--space-5) var(--space-5) !important;
}

/* Legacy box widget → surface card */
.box {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  border-top: none !important;
}

.box-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-4) var(--space-5) !important;
  background: transparent !important;
}

.box-header .box-title {
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.box-body {
  padding: var(--space-4) var(--space-5) !important;
}

.box-footer {
  background: var(--bg-sunken) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  padding: var(--space-3) var(--space-5) !important;
}

/* Remove colored top borders from legacy box variants */
.box-primary, .box-success, .box-info, .box-warning, .box-danger {
  border-top: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   SWEETALERT2 OVERRIDE
   ═══════════════════════════════════════════════════════════════ */

.swal2-popup {
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-sans) !important;
}

.swal2-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.swal2-html-container {
  color: var(--text-secondary) !important;
}

.swal2-confirm {
  background: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.swal2-cancel {
  background: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TOASTR OVERRIDE
   ═══════════════════════════════════════════════════════════════ */

.toast {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}

/* Use background-color (not the `background` shorthand) so we don't reset
   the icon's background-repeat/position set by vendor.css — the shorthand
   would tile the toast icon across the whole toast. Fallbacks keep toasts
   readable on themeless pages (e.g. the auth layouts, whose <html> has no
   data-theme, so the color tokens below are otherwise undefined). */
.toast-success {
  background-color: #2E9E6B !important;
}

.toast-error {
  background-color: #D65B54 !important;
}

.toast-warning {
  background-color: #C98A3A !important;
}

.toast-info {
  background-color: #3AA88C !important;
}


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP LEGACY STATUS LABELS
   ═══════════════════════════════════════════════════════════════ */

.label {
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
}

.label-success, .bg-green {
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
}

.label-danger, .label-important, .bg-red {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-text) !important;
}

.label-warning, .bg-yellow {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
}

.label-info, .bg-aqua {
  background: var(--status-info-bg) !important;
  color: var(--status-info-text) !important;
}

.label-default, .bg-gray {
  background: var(--status-neutral-bg) !important;
  color: var(--status-neutral-text) !important;
}

/* Payment status badges (inline style overrides) */
.payment-status-label,
.payment_status_label,
span[class*="payment-status"] {
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TABLE FOOTER — TOTALS ROW
   ═══════════════════════════════════════════════════════════════ */

tfoot tr.bg-gray,
tfoot tr.footer-total,
tfoot tr[class*="footer-total"] {
  background: var(--bg-sunken) !important;
  color: var(--text-primary) !important;
}

tfoot tr.bg-gray td,
tfoot tr.footer-total td {
  background: var(--bg-sunken) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  border-top: 2px solid var(--border-default) !important;
  padding: var(--space-3) var(--space-2) !important;
}

.font-17 {
  font-size: var(--text-sm) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DATATABLES PROCESSING INDICATOR
   ═══════════════════════════════════════════════════════════════ */

.dataTables_wrapper .dataTables_processing {
  background: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) var(--space-6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TABLE ROW SELECTION HIGHLIGHT
   ═══════════════════════════════════════════════════════════════ */

table.table tbody tr.selected,
table.table tbody tr.active {
  background: rgba(99, 102, 241, 0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Smooth page content fade-in */
section.content {
  animation: fadeSlideIn 0.3s var(--ease-out) both !important;
}

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

/* Table row hover lift */
table.table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-in-out) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DW (DAISY UI) BUTTON OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

.tw-dw-btn {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
}

.tw-dw-btn.tw-dw-btn-xs {
  font-size: var(--text-xs) !important;
  padding: 2px 8px !important;
  min-height: 24px !important;
  height: 24px !important;
}

.tw-dw-btn.tw-dw-btn-outline {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.tw-dw-btn.tw-dw-btn-outline:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   FOCUS RING — ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm) !important;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   VERTICAL NAV TABS (Settings page)
   ═══════════════════════════════════════════════════════════════ */

.nav-tabs.nav-stacked > li > a,
.nav-tabs-custom .nav-tabs.nav-stacked > li > a {
  border: none !important;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  padding: 10px 16px !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  margin-bottom: 2px !important;
  transition: all var(--dur-fast) !important;
}

.nav-tabs.nav-stacked > li > a:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-left-color: var(--border-default) !important;
}

.nav-tabs.nav-stacked > li.active > a,
.nav-tabs.nav-stacked > li.active > a:hover,
.nav-tabs.nav-stacked > li.active > a:focus {
  background: rgba(99, 102, 241, 0.08) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
  border-bottom: none !important;
  font-weight: 600 !important;
}

/* Settings tab content panel */
.nav-tabs-custom {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
}

.nav-tabs-custom > .nav-tabs {
  border-bottom: none !important;
  background: var(--bg-sunken) !important;
}


/* ═══════════════════════════════════════════════════════════════
   POS PAGE — REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* POS product cards */
.pos-product-list .product-card,
.product_list_body .product-card,
#product_list_body .product-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-default) !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
}

#product_list_body .product-card:hover,
.product_list_body .product-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* POS bottom action bar */
.pos-actionbtns .btn,
.pos_div .btn {
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  transition: all var(--dur-fast) !important;
}


/* ═══════════════════════════════════════════════════════════════
   MODAL REFINEMENTS & BRANDING FIXES
   ═══════════════════════════════════════════════════════════════ */

.modal-content {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-4) var(--space-5) !important;
  background: var(--surface-primary) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.modal-header .modal-title,
.modal-header h4 {
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.modal-header .close {
  color: var(--text-tertiary) !important;
  opacity: 0.7 !important;
  font-size: 1.25rem !important;
  transition: opacity var(--dur-fast) !important;
  margin-top: -2px !important;
}

.modal-header .close:hover {
  opacity: 1 !important;
  color: var(--text-primary) !important;
}

.modal-body {
  padding: var(--space-5) !important;
  background: var(--surface-primary) !important;
}

.modal-footer {
  border-top: 1px solid var(--border-subtle) !important;
  padding: var(--space-3) var(--space-5) !important;
  background: var(--bg-sunken) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

/* Modal Button Branding Fixes */
.modal-content .tw-dw-btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

.modal-content .tw-dw-btn-primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.modal-content .tw-dw-btn-neutral {
  background-color: var(--surface-inverse) !important;
  border-color: var(--surface-inverse) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

.modal-content .tw-dw-btn-neutral:hover {
  opacity: 0.9 !important;
}

.modal-content button.more_btn {
  background-color: var(--surface-active) !important;
  border-color: var(--surface-active) !important;
  color: var(--text-primary) !important;
}

.modal-content button.more_btn:hover {
  background-color: var(--border-subtle) !important;
  border-color: var(--border-subtle) !important;
}


/* ═══════════════════════════════════════════════════════════════
   INPUT GROUP REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

.input-group-addon {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-tertiary) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  font-size: var(--text-sm) !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.input-group .form-control {
  border-radius: 0 !important;
}

.input-group .form-control:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}


/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES — CLEAN OUTPUT
   ═══════════════════════════════════════════════════════════════ */

@media print {
  .side-bar, .main-header, .main-footer, .no-print, .dt-buttons,
  .dataTables_filter, .dataTables_paginate, .dataTables_info, .dataTables_length {
    display: none !important;
  }

  body { background: white !important; }

  .content-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .box, .widget, table { box-shadow: none !important; border: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES — LOGIN / REGISTER — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* Auth page wrapper — ensure it doesn't break the gradient bg */
body.pace-done {
  font-family: var(--font-sans) !important;
}

/* Login card container — glassmorphism */
body.pace-done .right-col .tw-rounded-2xl.tw-bg-white {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-8) !important;
}

/* Login form title */
body.pace-done .tw-text-lg.md\:tw-text-xl.tw-font-semibold {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

/* Login subtitle */
body.pace-done .tw-text-sm.tw-font-medium.tw-text-gray-500 {
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
}

/* Auth form inputs */
body.pace-done .tw-border.tw-border-\[#D1D5DA\] {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  padding: 12px 16px !important;
  height: 48px !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
  color: var(--text-primary) !important;
}

body.pace-done .tw-border.tw-border-\[#D1D5DA\]:focus {
  border-color: var(--accent) !important;
  background: var(--surface-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none !important;
}

/* Auth form labels */
body.pace-done .tw-dw-label span {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

/* Login button (overrides gradient) — already handled by gradient override */
body.pace-done form button[type="submit"].tw-bg-gradient-to-r {
  height: 48px !important;
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--text-md) !important;
  letter-spacing: 0.2px !important;
  transition: all 0.25s var(--ease-in-out) !important;
}

/* Forgot password link */
body.pace-done a.tw-bg-gradient-to-r.tw-bg-clip-text {
  background: none !important;
  background-image: none !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  font-weight: 500 !important;
}

body.pace-done a.tw-bg-gradient-to-r.tw-bg-clip-text:hover {
  color: var(--accent-hover) !important;
  -webkit-text-fill-color: var(--accent-hover) !important;
}

/* Register now link */
body.pace-done span.tw-bg-gradient-to-r.tw-bg-clip-text {
  background: none !important;
  background-image: none !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* Register button in top-right */
body.pace-done .tw-border-2.tw-border-white.tw-rounded-full {
  border-radius: var(--radius-pill) !important;
  backdrop-filter: blur(8px) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transition: all var(--dur-fast) !important;
}

body.pace-done .tw-border-2.tw-border-white.tw-rounded-full:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* DaisyUI checkbox on login */
body.pace-done .tw-dw-checkbox {
  accent-color: var(--accent) !important;
  border-radius: var(--radius-sm) !important;
}

/* Auth page password visibility toggle */
body.pace-done .show_hide_icon {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
  transition: opacity var(--dur-fast) !important;
}

body.pace-done .show_hide_icon:hover {
  opacity: 0.8 !important;
}


/* ═══════════════════════════════════════════════════════════════
   POS INTERFACE — COMPREHENSIVE REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* POS top bar */
.pos-form-actions {
  background: var(--surface-primary) !important;
  border-top: 1px solid var(--border-default) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* POS left panel (cart area) */
.sale_pos .tw-shadow-\[rgba\(17\,_17\,_26\,_0\.1\)_0px_0px_16px\] {
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--border-default) !important;
}

/* POS cart header */
.pos_product_div .table th,
#pos_table th {
  background: var(--bg-sunken) !important;
  color: var(--text-tertiary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* POS cart items */
#pos_table td {
  padding: 8px var(--space-2) !important;
  font-size: var(--text-sm) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* POS product search input */
#pos_form_actions input[type="text"],
.pos-product-search input,
#product_search_field {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-default) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  padding: 8px 14px !important;
  background: var(--surface-primary) !important;
  transition: border-color var(--dur-fast) !important;
}

#product_search_field:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* POS sidebar — Category/Brand buttons */
.btn-group .btn.bg-info,
.btn.tw-bg-\[\#2D833F\] {
  border-radius: var(--radius-lg) !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
}

/* POS product grid items */
.product_list_body .product-card,
#product_list_body > div {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-default) !important;
  overflow: hidden !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
  cursor: pointer !important;
}

.product_list_body .product-card:hover,
#product_list_body > div:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* POS product card text */
#product_list_body .tw-text-xs {
  font-family: var(--font-sans) !important;
}

/* POS action buttons row */
.pos-form-actions .tw-font-bold {
  font-family: var(--font-sans) !important;
}

/* POS bottom bar buttons - Multiple Pay, Cash, Cancel */
.pos-form-actions button.tw-bg-\[\#001F3E\] {
  background: var(--surface-inverse) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  transition: all var(--dur-fast) !important;
}

.pos-form-actions button.tw-bg-\[\#001F3E\]:hover {
  opacity: 0.9 !important;
}

.pos-form-actions button.tw-bg-\[rgb\(40\,183\,123\)\] {
  background: var(--status-success-text) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-sans) !important;
}

.pos-form-actions button.tw-bg-red-600 {
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-sans) !important;
}

/* POS recent transactions button */
.pos-form-actions button.tw-bg-\[\#646EE4\] {
  background: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

.pos-form-actions button.tw-bg-\[\#646EE4\]:hover {
  background: var(--accent-hover) !important;
}

/* POS total payable */
.pos-total {
  font-family: var(--font-display) !important;
}

/* POS location selector */
.input-group-addon.pos-addon {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  font-family: var(--font-sans) !important;
}


/* ═══════════════════════════════════════════════════════════════
   POS INTERFACE — SHOPIFY-STYLE REDESIGN
   Every id/name/class read by public/js/pos.js is left untouched;
   this section is purely visual (colors, spacing, radius, shadow).
   ═══════════════════════════════════════════════════════════════ */

/* --- Top bar: unify every hand-rolled icon button to one chip style --- */
.pos-header {
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 16px !important;
}

.pos-header .tw-border-2.tw-rounded-md {
  border: 1px solid var(--border-default) !important;
  background: var(--surface-primary) !important;
  box-shadow: none !important;
  transition: background var(--dur-fast) var(--ease-in-out), border-color var(--dur-fast) var(--ease-in-out) !important;
}

.pos-header .tw-border-2.tw-rounded-md:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}

.pos-header .tw-bg-\[\#646EE4\] {
  background: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
}

.pos-header .tw-bg-\[\#646EE4\]:hover,
.pos-header .hover\:tw-bg-\[\#414aac\]:hover {
  background: var(--accent-hover) !important;
}

/* --- Customer / search / price-group row --- */
#add_pos_sell_form .pos_product_div .form-control,
#add_pos_sell_form > .row .form-control,
#add_pos_sell_form .input-group .form-control {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-default) !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) !important;
}

#add_pos_sell_form .input-group .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--status-success-bg) !important;
}

#add_pos_sell_form .input-group-addon,
#add_pos_sell_form .input-group-btn .btn {
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-tertiary) !important;
}

#search_product {
  font-size: var(--text-sm) !important;
  padding-left: var(--space-3) !important;
}

/* --- Product grid: real card class is .product_box, not .product-card --- */
#product_list_body,
#featured_products_box {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -6px !important;
}

#product_list_body > .product_list,
#featured_products_box > .product_list {
  padding: 6px !important;
}

.product_box {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  transition: box-shadow var(--dur-fast) var(--ease-in-out), border-color var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-in-out) !important;
}

.product_box:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

.product_box .image-container {
  height: 96px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.product_box .image-container.swatch-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) !important;
}

.product_box .text_div {
  padding: 10px 11px 11px !important;
}

.product_box .text_div .card-name {
  display: block !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.product_box .text_div .card-price {
  display: block !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 6px !important;
}

.product_box .text_div .card-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.product_box .text_div .card-sku {
  font-size: 10px !important;
  color: var(--text-tertiary) !important;
}

.product_box .text_div .stock-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
  white-space: nowrap !important;
}

.product_box .text_div .stock-badge.stock-low {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
}

.product_box .text_div .stock-badge.stock-none {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-text) !important;
}

/* --- Category / Brand: segmented pill pair instead of stacked gradient buttons --- */
#product_category_div,
#product_brand_div {
  padding: 0 4px !important;
}

.pos-segment-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
  background: var(--surface-secondary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  transition: background var(--dur-fast), border-color var(--dur-fast) !important;
}

.pos-segment-trigger:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}

.pos-segment-trigger svg {
  color: var(--accent) !important;
}

/* Category/brand cards inside the drawers */
.main-category-div .tw-dw-card,
.product_category .tw-dw-card,
.product_brand .tw-dw-card {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast), background var(--dur-fast) !important;
}

.main-category-div .tw-dw-card:hover,
.product_category .tw-dw-card:hover,
.product_brand .tw-dw-card:hover {
  border-color: var(--accent) !important;
  background: var(--status-success-bg) !important;
}

.category_heading {
  -webkit-text-fill-color: var(--accent) !important;
}

.main-category.tw-dw-btn-accent,
.main-category.tw-dw-btn-primary {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* --- Cart line items --- */
#pos_table .product_row img {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-default) !important;
}

#pos_table .input-group.input-number {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-default) !important;
  overflow: hidden !important;
  background: var(--surface-primary) !important;
}

#pos_table .input-group.input-number .btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#pos_table .input-group.input-number .form-control {
  border: none !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-right: 1px solid var(--border-subtle) !important;
  text-align: center !important;
  font-weight: 600 !important;
}

.pos_remove_row {
  transition: color var(--dur-fast) !important;
}

.pos_remove_row:hover {
  color: var(--status-danger-text) !important;
}

/* --- Totals row: wrap the table into a clean spaced summary --- */
.pos_form_totals table,
.pos_form_totals tbody,
.pos_form_totals tr {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.pos_form_totals td {
  display: block !important;
  border: none !important;
  padding: 6px var(--space-3) 6px 0 !important;
}

/* --- Action bar --- */
.pos-form-actions button.tw-bg-\[\#001F3E\],
.pos-form-actions button.tw-bg-\[rgb\(40\,183\,123\)\] {
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
}

.pos-form-actions button.tw-bg-\[\#001F3E\]:hover,
.pos-form-actions button.tw-bg-\[rgb\(40\,183\,123\)\]:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

.pos-form-actions button.tw-bg-red-600 {
  background: var(--surface-primary) !important;
  color: var(--status-danger-text) !important;
  border: 1px solid var(--status-danger-border) !important;
}

.pos-form-actions button.tw-bg-red-600:hover {
  background: var(--status-danger-bg) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SELECT2 DROPDOWN — REFINED
   ═══════════════════════════════════════════════════════════════ */

.select2-container--default .select2-selection--single {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  height: 38px !important;
  background: var(--surface-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

.select2-dropdown {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
  overflow: hidden !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent) !important;
  color: white !important;
}

/* Dashboard header: location select + date filter stay stacked on mobile,
   sit side by side on larger screens. Plain CSS because this repo compiles
   Tailwind statically (no JIT) — responsive utility classes not already
   present elsewhere in the codebase never make it into the compiled file. */
.dash-header-actions {
  flex-wrap: wrap;
}
.dash-location-select {
  width: 100%;
}
@media (min-width: 640px) {
  .dash-header-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .dash-location-select {
    width: 224px;
  }
}

/* Dashboard header location selector — pill shape + status dot, scoped by ID
   so other Select2 instances site-wide keep the default rounded-md look. */
#dashboard_location + .select2-container .select2-selection--single {
  border-radius: var(--radius-pill) !important;
}

#dashboard_location + .select2-container .select2-selection__rendered::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  padding: 6px 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

.select2-container--default .select2-results__option {
  font-size: var(--text-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--font-sans) !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-primary) !important;
  min-height: 38px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DATERANGEPICKER — REFINED
   ═══════════════════════════════════════════════════════════════ */

.daterangepicker {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-dropdown) !important;
  font-family: var(--font-sans) !important;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid var(--border-subtle) !important;
}

.daterangepicker .drp-buttons .btn-primary {
  background: var(--accent) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--accent) !important;
  color: white !important;
}

.daterangepicker td.in-range {
  background: rgba(99, 102, 241, 0.08) !important;
}

.daterangepicker .ranges li.active {
  background: var(--accent) !important;
  color: white !important;
}


/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM HEADER & MODERN HEADER BUTTONS
   ═══════════════════════════════════════════════════════════════ */

/* Glassmorphism Header Wrapper */
.main-header-bar {
  background: var(--surface-primary) !important;
  border-bottom: 1px solid var(--border-default) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;
  z-index: 100 !important;
  position: relative !important;
}

@media (min-width: 1024px) {
  .main-header-bar {
    height: 60px !important;
  }
}

/* Base header button styles — 32px pill hit-areas per spec */
.main-header-bar .header-btn {
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  min-height: 32px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--dur-fast) var(--ease-in-out) !important;
  gap: var(--space-2) !important;
  text-decoration: none !important;
}

/* Adjust paddings for icon-only buttons */
.main-header-bar button.header-btn:not([title]),
.main-header-bar .header-btn svg {
  color: var(--text-secondary) !important;
}

/* Hover and active states for header buttons */
.main-header-bar .header-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transform: translateY(-0.5px) !important;
}

.main-header-bar .header-btn:hover svg {
  color: var(--text-primary) !important;
}

.main-header-bar .header-btn:active {
  transform: translateY(0) !important;
}

/* Focus outline ring */
.main-header-bar .header-btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Primary Header Button (e.g. POS Sale Button) — accent is precious, never a large fill;
   primary CTAs invert to dark-ink fill / white text per spec */
.main-header-bar .header-btn-primary {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

.main-header-bar .header-btn-primary svg {
  color: var(--btn-primary-text) !important;
}

.main-header-bar .header-btn-primary:hover {
  background: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
}

.main-header-bar .header-btn-primary:hover svg {
  color: var(--btn-primary-text) !important;
}

/* Quiet separators between the toolbar's quick-actions / view-controls /
   notifications clusters — 7+ icon buttons in one flat row otherwise reads
   as a single undifferentiated strip. */
.main-header-bar .header-divider {
  width: 1px !important;
  height: 20px !important;
  margin: 0 2px !important;
  background: var(--border-default) !important;
  flex-shrink: 0 !important;
}

/* Date display specific style */
.main-header-bar .header-date {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  letter-spacing: -0.1px !important;
}

.main-header-bar .header-btn-pill {
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  min-height: 34px !important;
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.main-header-bar .header-btn-pill:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  transform: none !important;
}

/* Notification Count Badge */
.main-header-bar .notifications_count {
  background-color: var(--status-danger-text) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 5px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

/* User profile dropdown list */
.main-header-bar details ul,
.main-header-bar .dropdown-menu {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-2) !important;
  z-index: 1010 !important;
}

.main-header-bar details ul a,
.main-header-bar .dropdown-menu a {
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-3) !important;
  transition: background var(--dur-fast) !important;
}

.main-header-bar details ul a:hover,
.main-header-bar .dropdown-menu a:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM SIDEBAR SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */

#side-bar .tw-uppercase,
/* Section grouping: a quiet hairline rule, then a small low-contrast label —
   the rule alone would leave a 19-item menu unscannable for new staff, and the
   label alone repeats "shouting" caps every few items, so the two share the
   job at reduced weight each. */
.nav-section-rule {
  height: 1px !important;
  margin: var(--space-4) var(--space-2) var(--space-2) !important;
  background: var(--border-subtle) !important;
  opacity: 0.8 !important;
}

#side-bar .nav-section-rule:first-of-type,
.side-bar .nav-section-rule:first-of-type {
  margin-top: 0 !important;
  opacity: 0 !important;
}

.nav-section-label {
  display: block !important;
  color: var(--text-tertiary) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0 var(--space-3) var(--space-1) !important;
  opacity: 0.7 !important;
}

/* Adjust sidebar wrapper padding so it matches the neat header */
#side-bar {
  padding: var(--space-3) var(--space-3) !important;
  background-color: var(--bg-sidebar) !important;
}

/* Sidebar branding box */
.side-bar > a:first-child,
.side-bar .tw-border-r {
  background-color: var(--bg-sidebar) !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-right: none !important;
}

.side-bar .side-bar-heading {
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Nav links rendered by AdminlteCustomPresenter (Menu::render) */
.nav-link {
  color: var(--text-secondary) !important;
  font-weight: 450 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--text-primary) !important;
  background: var(--nav-hover-bg) !important;
}

.nav-link.nav-active {
  color: var(--nav-active-text) !important;
  background: var(--nav-active-bg) !important;
  border: 1px solid var(--border-default) !important;
  font-weight: 550 !important;
}

.nav-link .svg,
.nav-link svg {
  color: var(--text-tertiary) !important;
  transition: color var(--dur-fast) var(--ease-in-out) !important;
}

.nav-link svg:not(.svg) {
  width: 18px !important;
  height: 18px !important;
}

.nav-link.nav-active svg:not(.svg) {
  color: var(--nav-active-text) !important;
}

.nav-child-rail {
  background: var(--border-default) !important;
}

.nav-child-link {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}

.nav-child-link:hover {
  color: var(--text-primary) !important;
}

.nav-child-link.nav-child-active {
  color: var(--nav-active-text) !important;
  font-weight: 550 !important;
}

/* ═══════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR (ICON RAIL)
   `.side-bar-collapse` used to just $('.side-bar').toggle('slow') — a full
   hide, not a collapse. Desktop only (mobile has its own drawer below 992px);
   the `body.sidebar-collapse` class + `upos_sidebar_collapse` localStorage key
   are the pre-paint hook already wired in layouts/app.blade.php, previously
   unused by any CSS.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
  .side-bar,
  aside.side-bar {
    transition: width var(--dur-slow) var(--ease-out) !important;
  }

  body.sidebar-collapse .side-bar,
  body.sidebar-collapse aside.side-bar {
    width: 68px !important;
  }

  body.sidebar-collapse .side-bar > a:first-child {
    padding: 0 !important;
    justify-content: center !important;
  }

  body.sidebar-collapse .side-bar .side-bar-heading,
  body.sidebar-collapse .side-bar .nav-section-rule,
  body.sidebar-collapse .side-bar .nav-section-label,
  body.sidebar-collapse .side-bar .nav-link > span,
  body.sidebar-collapse .side-bar .nav-link > svg.svg {
    display: none !important;
  }

  body.sidebar-collapse #side-bar {
    padding: var(--space-3) var(--space-2) !important;
  }

  body.sidebar-collapse .side-bar .nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Every real destination lives inside a dropdown's children — hiding them
     without a flyout would make the whole app unreachable while collapsed. */
  body.sidebar-collapse .side-bar .nav-group .chiled {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin: 0 0 0 8px !important;
    padding: var(--space-2) !important;
    min-width: 200px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-dropdown) !important;
    z-index: 60 !important;
  }

  body.sidebar-collapse .side-bar .nav-group:hover .chiled {
    display: block !important;
  }

  body.sidebar-collapse .side-bar .nav-group .chiled .nav-child-rail {
    display: none !important;
  }

  /* The profile popup is normally anchored with left-4/right-4 against a
     232px rail — at 68px that would squeeze it to nothing, so it gets a
     fixed width instead of stretching to the rail's edges. */
  body.sidebar-collapse .side-bar details.tw-dw-dropdown > ul {
    left: 8px !important;
    right: auto !important;
    width: 240px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  padding: 0 var(--space-4) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  height: calc(64px + env(safe-area-inset-bottom)) !important;
}

.mobile-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-tertiary) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--dur-fast) ease !important;
  width: 20% !important;
  height: 100% !important;
  gap: 3px !important;
}

.mobile-nav-item svg {
  stroke-width: 2 !important;
  transition: transform var(--dur-fast) ease !important;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.mobile-nav-item:hover svg {
  transform: translateY(-1px) !important;
}

.mobile-nav-item.active {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

@media (max-width: 991px) {
  #scrollable-container {
    padding-bottom: 72px !important;
  }
}

.main-header-bar .btn-clean {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-full) !important;
}

.main-header-bar .btn-clean:hover {
  background: var(--surface-hover) !important;
  transform: none !important;
}

.main-header-bar details summary::-webkit-details-marker {
  display: none !important;
}

.main-header-bar details summary {
  list-style: none !important;
}

/* Sidebar user widget: keep summary as default display so the native
   <details> toggle works in Safari/WebKit (flex on <summary> breaks it);
   flex layout lives on an inner wrapper instead. */
.pc-user-summary::-webkit-details-marker {
  display: none !important;
}

.pc-user-summary {
  list-style: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CUSTOM SCROLLBARS
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-disabled) !important;
}


/* ═══════════════════════════════════════════════════════════════
   POS PAGE SWAPPING AND COMPONENT CARD STYLING
   ═══════════════════════════════════════════════════════════════ */

/* Remove default sidebar/layout segments since drawer toggle handles it */
.pos-segment-trigger {
  display: none !important;
}

/* Hide standard details elements markers globally inside header-pos */
.pos-header details summary::-webkit-details-marker {
  display: none !important;
}
.pos-header details summary {
  list-style: none !important;
}

/* Hide the old POS default form elements */
.pos_form_totals {
  display: none !important;
}

/* Swap column layout for desktop */
@media (min-width: 1024px) {
  .thetop:has(.pos-header) #scrollable-container .lg\:tw-flex-row {
    display: flex !important;
    flex-direction: row !important;
  }
  /* Left column: Product Grid Suggestions */
  .thetop:has(.pos-header) #scrollable-container .lg\:tw-flex-row > div:nth-child(2) {
    order: 1 !important;
    width: 60% !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
  }
  /* Right column: Cart Form & Totals */
  .thetop:has(.pos-header) #scrollable-container .lg\:tw-flex-row > div:nth-child(1) {
    order: 2 !important;
    width: 40% !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
  }
}

/* Hide the standard POS table headers */
#pos_table thead {
  display: none !important;
}

/* Remove borders/tables defaults for clean grids */
#pos_table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  width: 100% !important;
  border: none !important;
}

#pos_table tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Style the product row as a clean individual card layout */
#pos_table tr.product_row {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto auto auto !important;
  grid-gap: 12px !important;
  background: white !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  padding: 14px 16px !important;
  align-items: start !important;
  transition: border-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out) !important;
}

#pos_table tr.product_row:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-card) !important;
}

#pos_table tr.product_row td {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Product Avatar & Details cell placement */
#pos_table tr.product_row td:nth-child(1) {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* Avatar + name/sku sit on one line; meta/stock stack beneath */
#pos_table tr.product_row td:nth-child(1) > .tw-flex {
  width: 100% !important;
  min-width: 0 !important;
}

#pos_table tr.product_row td:nth-child(1) > .tw-flex > div:last-child {
  min-width: 0 !important;
}

/* Larger, clearer product name (up to 2 lines) */
#pos_table tr.product_row td:nth-child(1) .tw-text-xs.tw-font-bold {
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* SKU · store meta line */
#pos_table tr.product_row td:nth-child(1) .tw-text-\[10px\].tw-text-gray-500 {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
}

/* Larger product avatar */
#pos_table tr.product_row td:nth-child(1) .tw-w-10.tw-h-10 {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-lg) !important;
}

/* Hide the raw <br> spacers inside the card */
#pos_table tr.product_row td br {
  display: none !important;
}

/* Turn "N unit in stock" into a subtle inline pill */
#pos_table tr.product_row td:nth-child(1) small.text-muted {
  display: inline-block !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  background: var(--surface-secondary, #F8F9FA) !important;
  border-radius: var(--radius-pill) !important;
  line-height: 1.2 !important;
}

/* Service-staff select — full-width row of its own */
#pos_table tr.product_row td:nth-child(3) {
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* Quantity + unit selector (bottom-left) */
#pos_table tr.product_row td:nth-child(2) {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#pos_table tr.product_row td:nth-child(2) .input-group.input-number,
#pos_table tr.product_row td:nth-child(2) select.sub_unit {
  flex-shrink: 0 !important;
}

/* Staff select fills its full-width row */
#pos_table tr.product_row td:nth-child(3) .form-group,
#pos_table tr.product_row td:nth-child(3) .input-group,
#pos_table tr.product_row td:nth-child(3) .select2-container {
  width: 100% !important;
  margin: 0 !important;
}

/* Subtotal placement */
#pos_table tr.product_row td:nth-child(5) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  text-align: right !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}

/* Delete / Remove action placement */
#pos_table tr.product_row td:nth-child(6) {
  grid-column: 3 !important;
  grid-row: 3 !important;
  align-self: center !important;
  text-align: right !important;
}

/* Highly specific Select2 resets for Customer & Staff pills */
#customer_id + .select2-container,
#res_waiter_id + .select2-container,
.pos-select-pill .select2-container {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#customer_id + .select2-container .select2-selection--single,
#res_waiter_id + .select2-container .select2-selection--single,
.pos-select-pill .select2-selection--single {
  background-color: transparent !important;
  border: none !important;
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#customer_id + .select2-container .select2-selection__rendered,
#res_waiter_id + .select2-container .select2-selection__rendered,
.pos-select-pill .select2-selection__rendered {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: normal !important;
  padding-left: 0 !important;
  padding-right: 12px !important;
}

#customer_id + .select2-container .select2-selection__arrow,
#res_waiter_id + .select2-container .select2-selection__arrow,
.pos-select-pill .select2-selection__arrow {
  display: none !important;
}

/* Custom indicator arrow for customer/staff select2 */
#customer_id + .select2-container .select2-selection--single::after,
#res_waiter_id + .select2-container .select2-selection--single::after,
.pos-select-pill .select2-selection--single::after {
  content: '▼' !important;
  font-size: 8px !important;
  color: var(--text-tertiary) !important;
  margin-left: auto !important;
  margin-top: 1px !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   POS TABLE ELEMENTS RESOLUTION
   ═══════════════════════════════════════════════════════════════ */

/* Styling Select2 containers inside the product row table cells */
#pos_table .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 110px !important;
}

#pos_table .select2-container--default .select2-selection--single {
  background-color: #F8F9FA !important;
  border: 1px solid #E9ECEF !important;
  border-radius: var(--radius-md) !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  width: 100% !important;
}

#pos_table .select2-container--default .select2-selection__rendered {
  font-size: 12px !important;
}

#pos_table .select2-container--default .select2-selection__rendered {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  padding-left: 0 !important;
  padding-right: 12px !important;
  text-align: left !important;
}

#pos_table .select2-container--default .select2-selection--single::after {
  content: '▼' !important;
  font-size: 7px !important;
  color: var(--text-tertiary) !important;
  margin-left: auto !important;
  pointer-events: none !important;
}

#pos_table .select2-selection__arrow {
  display: none !important;
}

/* Quantity input group modern styling — larger, easier to tap */
#pos_table .input-group.input-number {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #E9ECEF !important;
  border-radius: var(--radius-pill) !important;
  background: #F8F9FA !important;
  padding: 3px !important;
  overflow: hidden !important;
  width: 122px !important;
}

#pos_table .input-group.input-number .input-group-btn {
  width: auto !important;
  display: inline-block !important;
}

#pos_table .input-group.input-number button {
  background: white !important;
  border: 1px solid #E9ECEF !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  border-radius: var(--radius-full) !important;
  outline: none !important;
  transition: background var(--dur-fast) var(--ease-in-out), border-color var(--dur-fast) var(--ease-in-out) !important;
}

#pos_table .input-group.input-number button:hover {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
}

#pos_table .input-group.input-number button .fa-minus {
  color: #EF4B53 !important;
}

#pos_table .input-group.input-number button .fa-plus {
  color: #0E6E50 !important;
}

#pos_table .input-group.input-number .pos_quantity {
  border: none !important;
  background: transparent !important;
  width: 46px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  height: 32px !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Sub unit selector dropdown styling */
#pos_table tr.product_row select.sub_unit {
  border: 1px solid #E9ECEF !important;
  border-radius: var(--radius-md) !important;
  font-size: 12px !important;
  padding: 2px 10px 2px 8px !important;
  height: 32px !important;
  background-color: #F8F9FA !important;
  color: var(--text-secondary) !important;
  outline: none !important;
}

/* Replace default delete icon with a text link "Remove" to match the layout 100% */
#pos_table tr.product_row .pos_remove_row {
  color: #EF4B53 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#pos_table tr.product_row .pos_remove_row::before {
  content: 'Remove' !important;
}
#pos_table tr.product_row .pos_remove_row i {
  display: none !important;
}/* ═══════════════════════════════════════════════════════════════
   POS PRODUCT CATALOG CARD AND GRID OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Override Bootstrap columns to draw exactly 7 columns per row on desktop */
@media (min-width: 1200px) {
  #product_list_body {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-gap: 12px !important;
    width: 100% !important;
  }
  #product_list_body > .product_list {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Individual Product Box Card Styling */
.product_box {
  background: white !important;
  border: 1px solid #E9ECEF !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 185px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.product_box:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.product_box .image-container {
  height: 95px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.product_box .text_div {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

.product_box .card-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #333 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 30px !important;
  margin-bottom: 4px !important;
  text-align: left !important;
}

.product_box .card-price {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin-bottom: 6px !important;
  display: block !important;
  text-align: left !important;
}

.product_box .card-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
}

.product_box .card-sku {
  font-size: 10px !important;
  color: #888 !important;
  font-weight: 500 !important;
}

/* Custom stock badges styling matching reference image 100% */
.product_box .stock-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-pill) !important;
  text-transform: capitalize !important;
}

.product_box .stock-badge.stock-ok {
  background-color: #E8F5E9 !important;
  color: #0E6E50 !important;
}

.product_box .stock-badge.stock-low {
  background-color: #FFF9C4 !important;
  color: #B78103 !important;
}

.product_box .stock-badge.stock-out {
  background-color: #FFEBEE !important;
  color: #D32F2F !important;
}


/* ═══════════════════════════════════════════════════════════════
   jQuery-UI AUTOCOMPLETE (live product search) → light design system
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .ui-autocomplete.ui-menu {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: var(--space-1) 0 !important;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999 !important;
}
[data-theme="light"] .ui-autocomplete .ui-menu-item {
  list-style: none;
}
[data-theme="light"] .ui-autocomplete .ui-menu-item:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
}
[data-theme="light"] .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
  padding: var(--space-2) var(--space-4) !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  line-height: 1.35 !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out);
}
[data-theme="light"] .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
[data-theme="light"] .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover {
  background: var(--accent-light) !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
}
[data-theme="light"] .ui-autocomplete .pc-ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
[data-theme="light"] .ui-autocomplete .pc-ac-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="light"] .ui-autocomplete .pc-ac-code {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   UNIFIED INPUT-GROUP (icon + control in one rounded field)
   The Business-Settings form-field pattern, promoted app-wide.
   Guarded with :has() so it only styles simple "addon + control"
   groups — any group containing a button, stepper, or file input
   keeps the default Bootstrap look and is left untouched.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main) {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-primary) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out) !important;
}
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main):focus-within {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--accent-light) !important;
}
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main) > .input-group-addon {
  background: transparent !important;
  border: none !important;
  color: var(--text-tertiary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 0 var(--space-3) !important;
  min-width: 34px !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main) > .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: 38px !important;
  padding-left: var(--space-2) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* select2 living inside a unified group */
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main) > .select2-container {
  flex: 1 1 auto !important;
  width: 1% !important;
}
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main) .select2-selection--single {
  border: none !important;
  background: transparent !important;
  height: 38px !important;
}
[data-theme="light"] .input-group:has(> .input-group-addon):not(:has(.input-group-btn)):not(:has(.btn)):not(.input-number):not(.file-caption-main) .select2-selection--single .select2-selection__rendered {
  padding-left: var(--space-2) !important;
  line-height: 36px !important;
}


/* ═══════════════════════════════════════════════════════════════
   DATATABLES PAGINATION — authoritative fix
   Bootstrap-style DataTables paints BOTH the <li class="paginate_button">
   and its inner <a>, so every pager item rendered twice (the empty pill
   behind the link = the stray "empty circles"). Here the <li> becomes a
   bare container and ONLY the link/span is painted. Covers the plain
   <a class="paginate_button"> variant too.
   ═══════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding-top: var(--space-4) !important;
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Neutralise the <li> wrapper so it stops painting an empty box */
.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .dataTables_paginate .pagination > li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  list-style: none !important;
}
/* The real, single button = the <a>/<span> */
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate span.paginate_button,
.dataTables_wrapper .dataTables_paginate li.paginate_button > a,
.dataTables_wrapper .dataTables_paginate li.paginate_button > span,
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background var(--dur-fast) var(--ease-in-out), border-color var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out) !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button:not(.active):not(.disabled) > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > a:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
/* Active / current page */
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  font-weight: 600 !important;
}
/* Disabled (Previous on first page, the "…" gap, etc.) */
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span {
  background: transparent !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-disabled) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   DATA TABLE READABILITY — easier scanning on wide/dense tables
   ═══════════════════════════════════════════════════════════════ */
/* Roomier text so multi-line cells stay legible */
table.table tbody td {
  line-height: 1.45 !important;
}
/* Gentle zebra striping to help the eye track across many columns */
table.dataTable tbody tr:nth-of-type(even) > td,
table.table:not(.no-stripe) tbody tr:nth-of-type(even) > td {
  background: var(--surface-secondary) !important;
}
/* Hover must win over the stripe */
table.dataTable tbody tr:hover > td,
table.table tbody tr:hover > td {
  background: var(--surface-hover) !important;
}
/* Slightly stronger header/row separation */
table.table thead th {
  border-bottom: 2px solid var(--border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DATATABLES "COLLECTION" DROPDOWN — sitewide, e.g. the consolidated
   Export button (common.js folds CSV/Excel/Print/ColVis/PDF into one
   collection button). DataTables appends this panel straight to <body>
   as a <ul>, and each item keeps its toolbar-pill classes (tw-dw-btn*),
   which is right for a standalone button but reads as a cramped row of
   separate chips inside a dropdown - restyle it as an ordinary vertical
   menu instead, consistent with the row-level "Actions" dropdown.
   ═══════════════════════════════════════════════════════════════ */
.dt-button-collection {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
}
.dt-button-collection .dt-button {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
}
.dt-button-collection .dt-button > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dt-button-collection .dt-button > a:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.dt-button-collection .dt-button i {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  color: var(--text-tertiary);
}
/* Column-visibility submenu marks the currently-shown columns with a
   ".active" class - without an explicit style it falls through to a generic
   Bootstrap .active rule (solid blue block), which reads as an alarming
   "selected" state rather than "currently visible". A checkmark reads better
   here. */
.dt-button-collection .dt-button.active {
  background: transparent !important;
}
.dt-button-collection .dt-button.active > a {
  background: transparent !important;
  color: var(--text-primary);
  font-weight: 600;
}
.dt-button-collection .dt-button.active > a:hover {
  background: var(--surface-hover) !important;
}
.dt-button-collection .dt-button.active > a::before {
  content: '\2713';
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}
.dt-button-collection .dt-button:not(.active) > a::before {
  content: '';
  width: 16px;
  flex-shrink: 0;
}

/* ── Product list: give the product-name column room to breathe ── */
#product_table th:nth-child(4),
#product_table td:nth-child(4) {
  min-width: 260px !important;
  white-space: normal !important;
  word-break: break-word !important;
}
/* Keep the long "Business Location" list from crowding the name column */
#product_table td:nth-child(5) {
  min-width: 160px !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard: Sales Analytics tabbed panel
   ══════════════════════════════════════════════════════════════ */
.dash-analytics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-analytics-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dash-analytics-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent-text);
  flex-shrink: 0;
}
.dash-analytics-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: 700;
}
.dash-analytics-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Segmented tab control */
.dash-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.dash-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast, 150ms) var(--ease-in-out, ease),
              background var(--dur-fast, 150ms) var(--ease-in-out, ease),
              box-shadow var(--dur-fast, 150ms) var(--ease-in-out, ease);
}
.dash-tab:hover {
  color: var(--text-primary);
}
.dash-tab.is-active {
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.dash-tab:focus-visible {
  outline: 2px solid var(--border-focus, var(--accent));
  outline-offset: 1px;
}

/* Tab panels */
.dash-tab-panel {
  display: none;
}
.dash-tab-panel.is-active {
  display: block;
  animation: dash-fade-in var(--dur-fast, 180ms) var(--ease-in-out, ease);
}
@keyframes dash-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .dash-analytics-head { gap: 12px; }
  .dash-tabs { width: 100%; justify-content: space-between; }
  .dash-tab { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE + DARK-MODE ADAPTATION
   ══════════════════════════════════════════════════════════════ */

/* Toggle button icon swap */
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: inline-block; }
[data-theme="dark"] .theme-icon-sun  { display: inline-block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* Smooth the flip between themes on the big surfaces (not on every element —
   that would make hovers/menus feel laggy). */
[data-theme] body,
[data-theme] .content-wrapper,
[data-theme] .side-bar,
[data-theme] .main-header-bar,
[data-theme] .surface-card,
[data-theme] .box,
[data-theme] .panel {
  transition: background-color var(--dur-normal) var(--ease-in-out),
              border-color var(--dur-normal) var(--ease-in-out),
              color var(--dur-normal) var(--ease-in-out);
}

/* ── Dark: remap literal Tailwind colour utilities to design tokens ──
   The app sprinkles hard-coded Tailwind colours (tw-bg-white, tw-text-gray-*,
   tw-border-gray-*) that can't follow CSS custom properties. Re-point the
   common ones at the token layer so views adapt without touching every blade.
   tw-text-white is intentionally left alone (white ink on coloured buttons). */

/* Surfaces */
[data-theme="dark"] .tw-bg-white               { background-color: var(--surface-primary) !important; }
[data-theme="dark"] .tw-bg-gray-50,
[data-theme="dark"] .tw-bg-gray-100            { background-color: var(--surface-secondary) !important; }
[data-theme="dark"] .tw-bg-gray-200            { background-color: var(--surface-hover) !important; }
[data-theme="dark"] .hover\:tw-bg-gray-50:hover,
[data-theme="dark"] .hover\:tw-bg-gray-100:hover { background-color: var(--surface-hover) !important; }

/* Text */
[data-theme="dark"] .tw-text-black,
[data-theme="dark"] .tw-text-gray-900,
[data-theme="dark"] .tw-text-gray-800          { color: var(--text-primary) !important; }
[data-theme="dark"] .tw-text-gray-700,
[data-theme="dark"] .tw-text-gray-600,
[data-theme="dark"] .tw-text-gray-500          { color: var(--text-secondary) !important; }
[data-theme="dark"] .tw-text-gray-400,
[data-theme="dark"] .tw-text-gray-300          { color: var(--text-tertiary) !important; }
[data-theme="dark"] .hover\:tw-text-gray-900:hover,
[data-theme="dark"] .hover\:tw-text-gray-700:hover { color: var(--text-primary) !important; }
[data-theme="dark"] .tw-text-emerald-600,
[data-theme="dark"] .tw-text-emerald-700       { color: var(--accent) !important; }

/* Borders / rings / dividers */
[data-theme="dark"] .tw-border-gray-100,
[data-theme="dark"] .tw-border-gray-200,
[data-theme="dark"] .tw-border-gray-300,
[data-theme="dark"] .tw-border-gray-400        { border-color: var(--border-default) !important; }
[data-theme="dark"] .tw-ring-gray-200,
[data-theme="dark"] .tw-ring-gray-100          { --tw-ring-color: var(--border-default) !important; }
[data-theme="dark"] .tw-divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-default) !important; }

/* Soft status tints — the -50/-100 fills read as neon blocks on a dark page */
[data-theme="dark"] .tw-bg-red-50,
[data-theme="dark"] .tw-bg-red-100             { background-color: var(--status-danger-bg) !important; }
[data-theme="dark"] .tw-text-red-900,
[data-theme="dark"] .tw-text-red-800           { color: var(--status-danger-text) !important; }
[data-theme="dark"] .tw-bg-green-100           { background-color: var(--status-success-bg) !important; }
[data-theme="dark"] .tw-text-green-900         { color: var(--status-success-text) !important; }
[data-theme="dark"] .tw-bg-yellow-100          { background-color: var(--status-warning-bg) !important; }

/* Borders declared with a bare tw-border + neutral default */
[data-theme="dark"] .main-header-bar           { border-color: var(--border-default) !important; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD METRIC CARDS
   ══════════════════════════════════════════════════════════════ */

.metric-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  min-height: 104px;
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out);
}
/* Subtle per-metric colour wash in the top-right corner — a quiet highlight
   that ties each card to its tint without competing with the value. */
.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle at top right, var(--mc-bg), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.metric-card > * { position: relative; }
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Per-metric colour pair — these tint tokens are already defined for both
   themes, so the cards recolour correctly in dark without extra rules. */
.metric-card[data-tint="sales"]    { --mc-bg: var(--tint-sales-bg);    --mc-fg: var(--tint-sales-color); }
.metric-card[data-tint="net"]      { --mc-bg: var(--tint-net-bg);      --mc-fg: var(--tint-net-color); }
.metric-card[data-tint="due"]      { --mc-bg: var(--tint-due-bg);      --mc-fg: var(--tint-due-color); }
.metric-card[data-tint="return"]   { --mc-bg: var(--tint-return-bg);   --mc-fg: var(--tint-return-color); }
.metric-card[data-tint="purchase"] { --mc-bg: var(--tint-purchase-bg); --mc-fg: var(--tint-purchase-color); }
.metric-card[data-tint="expense"]  { --mc-bg: var(--tint-expense-bg);  --mc-fg: var(--tint-expense-color); }

.metric-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.metric-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Label steps back to secondary so the value carries the hierarchy */
.metric-card-label > span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card-info {
  color: var(--text-disabled);
  flex-shrink: 0;
}

.metric-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mc-bg);
  color: var(--mc-fg);
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-spring);
}
.metric-card:hover .metric-card-icon {
  transform: scale(1.08);
}

/* Value area is a column: hero figure on top, native breakdown chips below. */
.metric-card-value {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
}
.metric-card-value .naira {
  font-weight: 330;
  opacity: 0.6;
  margin-right: 3px;
}

/* Hero figure — the headline number for the card. For a single active currency
   it is that currency's native amount; for several it is the combined
   base-currency total. Scales down on narrow (mobile 2-up) cards. */
.metric-card-value .dash-hero {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 1.4vw, 1.55rem);
  line-height: 1.12;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "≈" marker on the aggregated total — signals it depends on snapshotted rates. */
.metric-card-value .dash-hero-agg .dash-approx {
  font-weight: 400;
  opacity: 0.5;
  margin-right: 3px;
}

/* Native per-currency amounts, shown as compact tinted chips under the hero.
   The tint pair (--mc-bg / --mc-fg) is the card's metric colour, so the chips
   double as the card's colour highlight. */
.metric-card-value .dash-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}
.metric-card-value .dash-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--mc-bg);
  color: var(--mc-fg);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Base-currency chip is quieter — it echoes the hero, so it steps back. */
.metric-card-value .dash-chip.is-base {
  background: var(--border-subtle);
  color: var(--text-secondary);
}

.metric-card-foot {
  margin-top: auto;
  padding-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Freshness dot, tinted to the metric */
.metric-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mc-fg);
  opacity: 0.85;
  flex-shrink: 0;
}
.metric-card-updated {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.metric-card-delta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}
.metric-card-delta-val {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 650;
}
.metric-card-delta.is-up   .metric-card-delta-val { color: var(--status-success-text); }
.metric-card-delta.is-down .metric-card-delta-val { color: var(--status-danger-text); }
.metric-card-delta-note { color: var(--text-tertiary); }

@media (max-width: 640px) {
  /* Two cards per row on mobile — keep them tight so the grid stays balanced. */
  .metric-card { min-height: 92px; padding: var(--space-3); gap: 4px; }
  .metric-card::before { width: 90px; height: 90px; }
  .metric-card-icon { width: 30px; height: 30px; }
  .metric-card-value .dash-chip { font-size: 0.72rem; padding: 1px 6px; }
}

/* ==========================================================================
   Dashboard — Top performers list (customers / products)
   Rendered inside the .dash-analytics tab panels.
   ========================================================================== */

.top-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out);
}

.top-row:last-child { border-bottom: none; }
.top-row:hover { background: var(--surface-hover); }

.top-rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--surface-secondary);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
}

/* Only the podium gets colour, so the eye lands on the leaders first. */
.top-rank-1 {
    background: var(--accent);
    color: #FFFFFF;
    border-color: transparent;
}
.top-rank-2 {
    background: var(--accent-light);
    color: var(--accent-text);
    border-color: transparent;
}
.top-rank-3 {
    background: var(--tint-purchase-bg);
    color: var(--tint-purchase-color);
    border-color: transparent;
}

.top-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top-row-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-row-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-row-value {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.top-empty {
    padding: var(--space-8) 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

@media (max-width: 640px) {
    .top-row { gap: var(--space-2); padding: 10px 4px; }
    .top-row-value { font-size: var(--text-sm); }
}

/* Card-level header controls (date picker + tab pills) */
.dash-head-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dash-date-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.dash-date-filter:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.dash-date-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dash-date-filter .fa-caret-down {
    font-size: 11px;
    opacity: 0.7;
}

/* Dims the rows while a new range is being fetched. */
.dash-tab-panels.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}

@media (max-width: 640px) {
    .dash-head-controls { width: 100%; gap: var(--space-2); }
    .dash-date-filter-label { overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   Sidebar — density pass
   The nav ran ~700px against a ~655px viewport on a 900px-tall screen, so the
   last Admin item sat below the fold. Tightening the row box and the group
   gaps buys back ~90px without touching the 28px hit target.
   ========================================================================== */

/* Logo lockup: 60px was taller than the header bar it sits beside. */
.side-bar > a:first-child {
    height: 52px !important;
    padding: 0 var(--space-4) !important;
}

#side-bar {
    padding: var(--space-2) var(--space-2) !important;
}

/* Needs `.side-bar a.nav-link`, not `.nav-link`: the legacy AdminLTE block
   above still carries a `.side-bar a { padding: 4.5px ... }` rule that outranks
   a lone class. 4.5px + 20px line + 2px border = 31px; 3px trims it to 28. */
.side-bar a.nav-link {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Group labels carry the vertical rhythm; 12px of top margin is more air than
   a 10px label needs to separate from the row above it. */
#side-bar .tw-uppercase,
.side-bar .tw-uppercase {
    margin-top: var(--space-2) !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Submenu rows are secondary — they can afford to be tighter than parents. */
.side-bar a.nav-child-link {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Keep the child indent clear of the .nav-child-rail at left: 20px. */
.side-bar .chiled {
    padding-left: var(--space-10) !important;
}

/* Profile card: reclaim the last of the fold. */
.side-bar .pc-user-summary {
    padding: var(--space-2) !important;
    margin: 0 var(--space-3) var(--space-3) !important;
}