/* ------------------------------ */
/* ---------- Vtmart Admin ----------- */
/* ------------------------------ */

@theme theme-vtmart-admin inline {
  /* Brand palette (vibrant) */
  --color-vtmart-admin-50: oklch(92.8% 0.08 168);
  --color-vtmart-admin-100: oklch(88.6% 0.1 168);
  --color-vtmart-admin-200: oklch(80.4% 0.12 168);
  --color-vtmart-admin-300: oklch(72.4% 0.14 168);
  --color-vtmart-admin-400: oklch(64.6% 0.16 168);
  --color-vtmart-admin-500: oklch(57% 0.14 168);
  --color-vtmart-admin-600: oklch(49.6% 0.12 168);
  --color-vtmart-admin-700: oklch(42.4% 0.1 168);
  --color-vtmart-admin-800: oklch(35.4% 0.08 168);
  --color-vtmart-admin-900: oklch(28.6% 0.06 168);
  --color-vtmart-admin-950: oklch(25.3% 0.05 168);

  /* Gray palette */
  --color-vtmart-admin-gray-50: oklch(98% 0.002 168);
  --color-vtmart-admin-gray-100: oklch(95.5% 0.004 168);
  --color-vtmart-admin-gray-200: oklch(89.7% 0.008 168);
  --color-vtmart-admin-gray-300: oklch(82.7% 0.012 168);
  --color-vtmart-admin-gray-400: oklch(73% 0.018 168);
  --color-vtmart-admin-gray-500: oklch(62.5% 0.02 168);
  --color-vtmart-admin-gray-600: oklch(52.8% 0.016 168);
  --color-vtmart-admin-gray-700: oklch(41.4% 0.012 168);
  --color-vtmart-admin-gray-800: oklch(26.9% 0.006 168);
  --color-vtmart-admin-gray-900: oklch(20.5% 0.004 168);
  --color-vtmart-admin-gray-950: oklch(14.1% 0.002 168);

}

:root[data-theme="theme-vtmart-admin"],
[data-theme="theme-vtmart-admin"] {

  /* ============================================ */
  /* GLOBAL SURFACES + TEXT                       */
  /* ============================================ */
  
  --background: var(--color-white);
  --background-1: var(--color-vtmart-admin-gray-50);
  --background-2: var(--color-vtmart-admin-gray-100);
  --background-plain: var(--color-white);
  --foreground: var(--color-vtmart-admin-gray-800);
  --foreground-inverse: var(--color-white);
  
  --inverse: var(--color-primary-950);
  
  /* ============================================ */
  /* BORDERS (Full Scale)                         */
  /* ============================================ */
  
  --border: var(--color-vtmart-admin-gray-200);
  --border-line-inverse: var(--color-white);
  --border-line-1: var(--color-vtmart-admin-gray-100);
  --border-line-2: var(--color-vtmart-admin-gray-200);
  --border-line-3: var(--color-vtmart-admin-gray-300);
  --border-line-4: var(--color-vtmart-admin-gray-400);
  --border-line-5: var(--color-vtmart-admin-gray-500);
  --border-line-6: var(--color-vtmart-admin-gray-600);
  --border-line-7: var(--color-vtmart-admin-gray-700);
  --border-line-8: var(--color-vtmart-admin-gray-800);
  
  /* ============================================ */
  /* PRIMARY RAMP (Full 11-shade scale)           */
  /* ============================================ */
  
  --primary-50: var(--color-vtmart-admin-50);
  --primary-100: var(--color-vtmart-admin-100);
  --primary-200: var(--color-vtmart-admin-200);
  --primary-300: var(--color-vtmart-admin-300);
  --primary-400: var(--color-vtmart-admin-400);
  --primary-500: var(--color-vtmart-admin-500);
  --primary-600: var(--color-vtmart-admin-600);
  --primary-700: var(--color-vtmart-admin-700);
  --primary-800: var(--color-vtmart-admin-800);
  --primary-900: var(--color-vtmart-admin-900);
  --primary-950: var(--color-vtmart-admin-950);
  
  /* PRIMARY STATES */
  --primary: var(--color-primary-600);
  --primary-line: transparent;
  --primary-foreground: var(--color-white);
  --primary-hover: var(--color-primary-700);
  --primary-focus: var(--color-primary-700);
  --primary-active: var(--color-primary-700);
  --primary-checked: var(--color-primary-600);
  
  /* ============================================ */
  /* SECONDARY                                    */
  /* ============================================ */
  
  --secondary: var(--color-vtmart-admin-gray-900);
  --secondary-line: transparent;
  --secondary-foreground: var(--color-white);
  --secondary-hover: var(--color-vtmart-admin-gray-800);
  --secondary-focus: var(--color-vtmart-admin-gray-800);
  --secondary-active: var(--color-vtmart-admin-gray-800);
  
  /* ============================================ */
  /* LAYER                                        */
  /* ============================================ */
  
  --layer: var(--background-plain);
  --layer-line: var(--border);
  --layer-foreground: var(--foreground);
  --layer-hover: var(--background-1);
  --layer-focus: var(--background-1);
  --layer-active: var(--background-1);
  
  /* ============================================ */
  /* SURFACE                                      */
  /* ============================================ */
  
  --surface: var(--color-vtmart-admin-gray-100);
  --surface-1: var(--color-vtmart-admin-gray-200);
  --surface-2: var(--color-vtmart-admin-gray-300);
  --surface-3: var(--color-vtmart-admin-gray-400);
  --surface-4: var(--color-vtmart-admin-gray-500);
  --surface-5: var(--color-vtmart-admin-gray-600);
  --surface-line: transparent;
  --surface-foreground: var(--color-vtmart-admin-gray-800);
  --surface-hover: var(--color-vtmart-admin-gray-200);
  --surface-focus: var(--color-vtmart-admin-gray-200);
  --surface-active: var(--color-vtmart-admin-gray-200);
  
  /* ============================================ */
  /* MUTED                                        */
  /* ============================================ */
  
  --muted: var(--color-vtmart-admin-gray-50);
  --muted-foreground: var(--color-vtmart-admin-gray-500);
  --muted-foreground-1: var(--color-vtmart-admin-gray-600);
  --muted-foreground-2: var(--color-vtmart-admin-gray-700);
  --muted-hover: var(--color-vtmart-admin-gray-100);
  --muted-focus: var(--color-vtmart-admin-gray-100);
  --muted-active: var(--color-vtmart-admin-gray-100);
  
  /* ============================================ */
  /* DESTRUCTIVE                                  */
  /* ============================================ */
  
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-white);
  --destructive-hover: var(--color-red-600);
  --destructive-focus: var(--color-red-600);
  
  /* ============================================ */
  /* NAVBAR                                       */
  /* ============================================ */
  
  --navbar: var(--background-plain);
  --navbar-line: var(--border);
  --navbar-divider: var(--border);
  --navbar-nav-foreground: var(--foreground);
  --navbar-nav-hover: var(--muted-hover);
  --navbar-nav-focus: var(--muted-hover);
  --navbar-nav-active: var(--muted-hover);
  --navbar-nav-list-divider: var(--border);
  --navbar-inverse: var(--inverse);
  
  --navbar-1: var(--background-1);
  --navbar-1-line: var(--border);
  --navbar-1-divider: var(--border);
  --navbar-1-nav-foreground: var(--foreground);
  --navbar-1-nav-hover: var(--surface-1);
  --navbar-1-nav-focus: var(--surface-1);
  --navbar-1-nav-active: var(--surface-1);
  --navbar-1-nav-list-divider: var(--border);
  
  --navbar-2: var(--background-2);
  --navbar-2-line: transparent;
  --navbar-2-divider: var(--border-line-3);
  --navbar-2-nav-foreground: var(--foreground);
  --navbar-2-nav-hover: var(--surface-1);
  --navbar-2-nav-focus: var(--surface-1);
  --navbar-2-nav-active: var(--surface-1);
  --navbar-2-nav-list-divider: var(--border);
  
  /* ============================================ */
  /* SIDEBAR                                      */
  /* ============================================ */
  
  --sidebar: var(--background-plain);
  --sidebar-line: var(--border);
  --sidebar-divider: var(--border);
  --sidebar-nav-foreground: var(--foreground);
  --sidebar-nav-hover: var(--muted-hover);
  --sidebar-nav-focus: var(--muted-hover);
  --sidebar-nav-active: var(--muted-hover);
  --sidebar-nav-list-divider: var(--border);
  --sidebar-inverse: var(--inverse);
  
  --sidebar-1: var(--background-1);
  --sidebar-1-line: var(--border);
  --sidebar-1-divider: var(--border);
  --sidebar-1-nav-foreground: var(--foreground);
  --sidebar-1-nav-hover: var(--surface-1);
  --sidebar-1-nav-focus: var(--surface-1);
  --sidebar-1-nav-active: var(--surface-1);
  --sidebar-1-nav-list-divider: var(--border);
  
  --sidebar-2: var(--background-2);
  --sidebar-2-line: transparent;
  --sidebar-2-divider: var(--border);
  --sidebar-2-nav-foreground: var(--foreground);
  --sidebar-2-nav-hover: var(--surface-1);
  --sidebar-2-nav-focus: var(--surface-1);
  --sidebar-2-nav-active: var(--surface-1);
  --sidebar-2-nav-list-divider: var(--border);
  
  /* ============================================ */
  /* CARD                                         */
  /* ============================================ */
  
  --card: var(--background-plain);
  --card-line: var(--border);
  --card-divider: var(--border);
  --card-header: var(--background-2);
  --card-footer: var(--background-2);
  --card-inverse: var(--inverse);
  
  /* ============================================ */
  /* DROPDOWN                                     */
  /* ============================================ */
  
  --dropdown: var(--background-plain);
  --dropdown-1: var(--background-plain);
  --dropdown-line: transparent;
  --dropdown-divider: var(--border);
  --dropdown-header: var(--background-2);
  --dropdown-footer: var(--background-2);
  --dropdown-item-foreground: var(--foreground);
  --dropdown-item-hover: var(--muted-hover);
  --dropdown-item-focus: var(--muted-hover);
  --dropdown-item-active: var(--muted-hover);
  --dropdown-inverse: var(--inverse);
  
  /* ============================================ */
  /* SELECT                                       */
  /* ============================================ */
  
  --select: var(--background-plain);
  --select-1: var(--background-plain);
  --select-line: transparent;
  --select-item-foreground: var(--foreground);
  --select-item-hover: var(--muted-hover);
  --select-item-focus: var(--muted-hover);
  --select-item-active: var(--muted-hover);
  --select-inverse: var(--inverse);
  
  /* ============================================ */
  /* OVERLAY                                      */
  /* ============================================ */
  
  --overlay: var(--background-plain);
  --overlay-line: transparent;
  --overlay-divider: var(--border);
  --overlay-header: var(--background-2);
  --overlay-footer: var(--background-2);
  --overlay-inverse: var(--inverse);
  
  /* ============================================ */
  /* POPOVER                                      */
  /* ============================================ */
  
  --popover: var(--background-plain);
  --popover-line: var(--border-line-1);
  
  /* ============================================ */
  /* TOOLTIP                                      */
  /* ============================================ */
  
  --tooltip: var(--inverse);
  --tooltip-foreground: var(--foreground-inverse);
  --tooltip-line: transparent;
  
  /* ============================================ */
  /* TABLE                                        */
  /* ============================================ */
  
  --table-line: var(--border);
  
  /* ============================================ */
  /* SWITCH                                       */
  /* ============================================ */
  
  --switch: var(--background-plain);
  
  /* ============================================ */
  /* FOOTER                                       */
  /* ============================================ */
  
  --footer: var(--background-plain);
  --footer-line: var(--border);
  --footer-inverse: var(--inverse);
  
  /* ============================================ */
  /* SCROLLBAR                                    */
  /* ============================================ */
  
  --scrollbar-track: var(--background-1);
  --scrollbar-thumb: var(--surface-2);
  --scrollbar-track-inverse: transparent;
  --scrollbar-thumb-inverse: var(--foreground-inverse);
  /* ============================================ */
  /* CHARTS (Apexcharts)                          */
  /* ============================================ */
  
  --chart-colors-background: var(--background-plain);
  --chart-colors-background-inverse: var(--inverse);
  --chart-colors-chart-inverse: var(--background-1);
  --chart-colors-foreground: var(--foreground);
  --chart-colors-foreground-inverse: var(--foreground-inverse);
  
  --chart-primary: var(--color-primary-600);
  --chart-colors-primary: var(--color-primary-600);
  --chart-colors-primary-inverse: var(--color-primary-300);
  --chart-colors-primary-hex: var(--color-primary-600);
  --chart-colors-primary-hex-inverse: var(--color-primary-300);
  --chart-1: var(--color-primary-50);
  --chart-colors-chart-1: var(--color-primary-50);
  --chart-colors-chart-1-inverse: var(--color-primary-100);
  --chart-colors-chart-1-hex: var(--color-primary-50);
  --chart-colors-chart-1-hex-inverse: var(--color-primary-100);
  --chart-2: var(--color-primary-200);
  --chart-colors-chart-2: var(--color-primary-200);
  --chart-colors-chart-2-inverse: var(--color-primary-300);
  --chart-colors-chart-2-hex: var(--color-primary-200);
  --chart-colors-chart-2-hex-inverse: var(--color-primary-300);
  --chart-3: var(--color-primary-400);
  --chart-colors-chart-3: var(--color-primary-400);
  --chart-colors-chart-3-inverse: var(--color-primary-500);
  --chart-colors-chart-3-hex: var(--color-primary-400);
  --chart-colors-chart-3-hex-inverse: var(--color-primary-500);
  --chart-4: var(--color-primary-700);
  --chart-colors-chart-4: var(--color-primary-700);
  --chart-colors-chart-4-inverse: var(--color-primary-500);
  --chart-colors-chart-4-hex: var(--color-primary-700);
  --chart-colors-chart-4-hex-inverse: var(--color-primary-500);
  --chart-5: var(--color-primary-900);
  --chart-colors-chart-5: var(--color-primary-900);
  --chart-colors-chart-5-inverse: var(--color-primary-700);
  --chart-colors-chart-5-hex: var(--color-primary-900);
  --chart-colors-chart-5-hex-inverse: var(--color-primary-700);
  --chart-6: var(--color-sky-600);
  --chart-colors-chart-6: var(--color-sky-600);
  --chart-colors-chart-6-inverse: var(--color-sky-400);
  --chart-colors-chart-6-hex: var(--color-sky-600);
  --chart-colors-chart-6-hex-inverse: var(--color-sky-400);
  --chart-7: var(--color-emerald-600);
  --chart-colors-chart-7: var(--color-emerald-600);
  --chart-colors-chart-7-inverse: var(--color-emerald-400);
  --chart-colors-chart-7-hex: var(--color-emerald-600);
  --chart-colors-chart-7-hex-inverse: var(--color-emerald-400);
  --chart-8: var(--color-violet-600);
  --chart-colors-chart-8: var(--color-violet-600);
  --chart-colors-chart-8-inverse: var(--color-violet-400);
  --chart-colors-chart-8-hex: var(--color-violet-600);
  --chart-colors-chart-8-hex-inverse: var(--color-violet-400);
  --chart-9: var(--color-rose-500);
  --chart-colors-chart-9: var(--color-rose-500);
  --chart-colors-chart-9-inverse: var(--color-rose-300);
  --chart-colors-chart-9-hex: var(--color-rose-500);
  --chart-colors-chart-9-hex-inverse: var(--color-rose-300);
  --chart-10: var(--color-vtmart-admin-gray-300);
  --chart-colors-chart-10: var(--color-vtmart-admin-gray-300);
  --chart-colors-chart-10-inverse: var(--color-vtmart-admin-gray-500);
  --chart-colors-chart-10-hex: var(--color-vtmart-admin-gray-300);
  --chart-colors-chart-10-hex-inverse: var(--color-vtmart-admin-gray-500);
  
  --chart-colors-candlestick-upward: var(--color-green-500);
  --chart-colors-candlestick-upward-inverse: var(--color-green-400);
  --chart-colors-candlestick-downward: var(--color-red-500);
  --chart-colors-candlestick-downward-inverse: var(--color-red-400);
  
  --chart-colors-labels: var(--color-vtmart-admin-gray-600);
  --chart-colors-labels-inverse: var(--color-vtmart-admin-gray-400);
  --chart-colors-xaxis-labels: var(--color-vtmart-admin-gray-500);
  --chart-colors-xaxis-labels-inverse: var(--color-vtmart-admin-gray-400);
  --chart-colors-yaxis-labels: var(--color-vtmart-admin-gray-500);
  --chart-colors-yaxis-labels-inverse: var(--color-vtmart-admin-gray-400);
  
  --chart-colors-grid-border: var(--border);
  --chart-colors-grid-border-inverse: var(--color-vtmart-admin-gray-700);
  --chart-colors-bar-ranges: var(--surface-1);
  --chart-colors-bar-ranges-inverse: var(--color-vtmart-admin-gray-700);
  /* ============================================ */
  /* MAPS (jsvectormap)                           */
  /* ============================================ */
  
  --map-colors-primary: var(--color-primary-500);
  --map-colors-primary-inverse: var(--color-primary-300);
  --map-colors-default: var(--surface-1);
  --map-colors-default-inverse: var(--color-vtmart-admin-gray-700);
  --map-colors-highlight: var(--color-primary-300);
  --map-colors-highlight-inverse: var(--color-primary-500);
  --map-colors-border: var(--border-line-3);
  --map-colors-border-inverse: var(--color-vtmart-admin-gray-600);
}

[data-theme="theme-vtmart-admin"].dark {

  /* ============================================ */
  /* DARK MODE - Tailwind slate */
  /* ============================================ */
  
  /* BACKGROUNDS */
  --background: var(--color-slate-800);
  --background-1: var(--color-slate-900);
  --background-2: var(--color-slate-950);
  --background-plain: var(--color-slate-800);
  
  /* TEXT */
  --foreground: var(--color-slate-200);
  --foreground-inverse: var(--color-white);
  
  --inverse: var(--color-slate-950);
  
  /* BORDERS */
  --border: var(--color-slate-700);
  --border-line-inverse: var(--color-slate-200);
  --border-line-1: var(--color-slate-800);
  --border-line-2: var(--color-slate-700);
  --border-line-3: var(--color-slate-600);
  --border-line-4: var(--color-slate-500);
  --border-line-5: var(--color-slate-400);
  --border-line-6: var(--color-slate-300);
  --border-line-7: var(--color-slate-200);
  --border-line-8: var(--color-slate-100);
  
  /* PRIMARY STATES */
  --primary: var(--color-primary-500);
  --primary-line: transparent;
  --primary-foreground: var(--color-white);
  --primary-hover: var(--color-primary-600);
  --primary-focus: var(--color-primary-600);
  --primary-active: var(--color-primary-600);
  --primary-checked: var(--color-primary-500);
  
  /* SECONDARY */
  --secondary: var(--color-white);
  --secondary-line: transparent;
  --secondary-foreground: var(--color-slate-800);
  --secondary-hover: var(--color-slate-100);
  --secondary-focus: var(--color-slate-100);
  --secondary-active: var(--color-slate-100);
  
  /* LAYER */
  --layer: var(--background);
  --layer-line: var(--border);
  --layer-foreground: var(--color-white);
  --layer-hover: var(--color-slate-700);
  --layer-focus: var(--color-slate-700);
  --layer-active: var(--color-slate-700);
  
  /* SURFACE */
  --surface: var(--color-slate-700);
  --surface-1: var(--color-slate-600);
  --surface-2: var(--color-slate-500);
  --surface-3: var(--color-slate-600);
  --surface-4: var(--color-slate-500);
  --surface-5: var(--color-slate-400);
  --surface-line: transparent;
  --surface-foreground: var(--color-slate-200);
  --surface-hover: var(--color-slate-600);
  --surface-focus: var(--color-slate-600);
  --surface-active: var(--color-slate-600);
  
  /* MUTED */
  --muted: var(--color-slate-800);
  --muted-foreground: var(--color-slate-500);
  --muted-foreground-1: var(--color-slate-400);
  --muted-foreground-2: var(--color-slate-300);
  --muted-hover: var(--color-slate-700);
  --muted-focus: var(--color-slate-700);
  --muted-active: var(--color-slate-700);
  
  /* DESTRUCTIVE */
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-white);
  --destructive-hover: var(--color-red-600);
  --destructive-focus: var(--color-red-600);
  
  /* NAVBAR */
  --navbar: var(--background);
  --navbar-line: var(--border);
  --navbar-divider: var(--border);
  --navbar-nav-foreground: var(--foreground);
  --navbar-nav-hover: var(--muted-hover);
  --navbar-nav-focus: var(--muted-hover);
  --navbar-nav-active: var(--muted-hover);
  --navbar-nav-list-divider: var(--border);
  --navbar-inverse: var(--inverse);
  
  --navbar-1: var(--background-1);
  --navbar-1-line: var(--border);
  --navbar-1-divider: var(--border);
  --navbar-1-nav-foreground: var(--foreground);
  --navbar-1-nav-hover: var(--surface);
  --navbar-1-nav-focus: var(--surface);
  --navbar-1-nav-active: var(--surface);
  --navbar-1-nav-list-divider: var(--border);
  
  --navbar-2: var(--background-2);
  --navbar-2-line: transparent;
  --navbar-2-divider: var(--border);
  --navbar-2-nav-foreground: var(--foreground);
  --navbar-2-nav-hover: var(--surface);
  --navbar-2-nav-focus: var(--surface);
  --navbar-2-nav-active: var(--surface);
  --navbar-2-nav-list-divider: var(--border);
  
  /* SIDEBAR */
  --sidebar: var(--background);
  --sidebar-line: var(--border);
  --sidebar-divider: var(--border);
  --sidebar-nav-foreground: var(--foreground);
  --sidebar-nav-hover: var(--muted-hover);
  --sidebar-nav-focus: var(--muted-hover);
  --sidebar-nav-active: var(--muted-hover);
  --sidebar-nav-list-divider: var(--border);
  --sidebar-inverse: var(--inverse);
  
  --sidebar-1: var(--background-1);
  --sidebar-1-line: var(--border);
  --sidebar-1-divider: var(--border);
  --sidebar-1-nav-foreground: var(--foreground);
  --sidebar-1-nav-hover: var(--surface);
  --sidebar-1-nav-focus: var(--surface);
  --sidebar-1-nav-active: var(--surface);
  --sidebar-1-nav-list-divider: var(--border);
  
  --sidebar-2: var(--background-2);
  --sidebar-2-line: transparent;
  --sidebar-2-divider: var(--border);
  --sidebar-2-nav-foreground: var(--foreground);
  --sidebar-2-nav-hover: var(--surface);
  --sidebar-2-nav-focus: var(--surface);
  --sidebar-2-nav-active: var(--surface);
  --sidebar-2-nav-list-divider: var(--border);
  
  /* CARD */
  --card: var(--background);
  --card-line: var(--border);
  --card-divider: var(--border);
  --card-header: var(--surface);
  --card-footer: var(--surface);
  --card-inverse: var(--inverse);
  
  /* DROPDOWN */
  --dropdown: var(--background-1);
  --dropdown-1: var(--background-2);
  --dropdown-line: transparent;
  --dropdown-divider: var(--border);
  --dropdown-header: var(--surface);
  --dropdown-footer: var(--surface);
  --dropdown-item-foreground: var(--foreground);
  --dropdown-item-hover: var(--muted-hover);
  --dropdown-item-focus: var(--muted-hover);
  --dropdown-item-active: var(--muted-hover);
  --dropdown-inverse: var(--inverse);
  
  /* SELECT */
  --select: var(--background-1);
  --select-1: var(--background-2);
  --select-line: transparent;
  --select-item-foreground: var(--foreground);
  --select-item-hover: var(--muted-hover);
  --select-item-focus: var(--muted-hover);
  --select-item-active: var(--muted-hover);
  --select-inverse: var(--inverse);
  
  /* OVERLAY */
  --overlay: var(--background);
  --overlay-line: transparent;
  --overlay-divider: var(--border);
  --overlay-header: var(--surface);
  --overlay-footer: var(--surface);
  --overlay-inverse: var(--inverse);
  
  /* POPOVER */
  --popover: var(--background-1);
  --popover-line: var(--border);
  
  /* TOOLTIP */
  --tooltip: var(--color-white);
  --tooltip-foreground: var(--color-slate-800);
  --tooltip-line: transparent;
  
  /* TABLE */
  --table-line: var(--border);
  
  /* SWITCH */
  --switch: var(--color-white);
  
  /* FOOTER */
  --footer: var(--background);
  --footer-line: var(--border);
  --footer-inverse: var(--inverse);
  
  /* SCROLLBAR */
  --scrollbar-track: var(--surface);
  --scrollbar-thumb: var(--surface-3);
  --scrollbar-track-inverse: var(--surface-4);
  --scrollbar-thumb-inverse: var(--surface-2);
  /* CHARTS - dark mode adjustments */
  --chart-colors-background: var(--background);
  --chart-colors-background-inverse: var(--color-slate-100);
  --chart-colors-chart-inverse: var(--background-1);
  --chart-colors-foreground: var(--color-slate-300);
  --chart-colors-foreground-inverse: var(--color-white);

  --chart-primary: var(--color-primary-500);
  --chart-colors-primary: var(--color-primary-500);
  --chart-colors-primary-inverse: var(--color-primary-300);
  --chart-colors-primary-hex: var(--color-primary-500);
  --chart-colors-primary-hex-inverse: var(--color-primary-300);
  --chart-1: var(--color-primary-200);
  --chart-colors-chart-1: var(--color-primary-200);
  --chart-colors-chart-1-inverse: var(--color-primary-300);
  --chart-colors-chart-1-hex: var(--color-primary-200);
  --chart-colors-chart-1-hex-inverse: var(--color-primary-300);
  --chart-2: var(--color-primary-300);
  --chart-colors-chart-2: var(--color-primary-300);
  --chart-colors-chart-2-inverse: var(--color-primary-400);
  --chart-colors-chart-2-hex: var(--color-primary-300);
  --chart-colors-chart-2-hex-inverse: var(--color-primary-400);
  --chart-3: var(--color-primary-400);
  --chart-colors-chart-3: var(--color-primary-400);
  --chart-colors-chart-3-inverse: var(--color-primary-500);
  --chart-colors-chart-3-hex: var(--color-primary-400);
  --chart-colors-chart-3-hex-inverse: var(--color-primary-500);
  --chart-4: var(--color-primary-500);
  --chart-colors-chart-4: var(--color-primary-500);
  --chart-colors-chart-4-inverse: var(--color-primary-600);
  --chart-colors-chart-4-hex: var(--color-primary-500);
  --chart-colors-chart-4-hex-inverse: var(--color-primary-600);
  --chart-5: var(--color-primary-300);
  --chart-colors-chart-5: var(--color-primary-300);
  --chart-colors-chart-5-inverse: var(--color-primary-500);
  --chart-colors-chart-5-hex: var(--color-primary-300);
  --chart-colors-chart-5-hex-inverse: var(--color-primary-500);
  --chart-6: var(--color-sky-400);
  --chart-colors-chart-6: var(--color-sky-400);
  --chart-colors-chart-6-inverse: var(--color-sky-300);
  --chart-colors-chart-6-hex: var(--color-sky-400);
  --chart-colors-chart-6-hex-inverse: var(--color-sky-300);
  --chart-7: var(--color-emerald-400);
  --chart-colors-chart-7: var(--color-emerald-400);
  --chart-colors-chart-7-inverse: var(--color-emerald-300);
  --chart-colors-chart-7-hex: var(--color-emerald-400);
  --chart-colors-chart-7-hex-inverse: var(--color-emerald-300);
  --chart-8: var(--color-violet-400);
  --chart-colors-chart-8: var(--color-violet-400);
  --chart-colors-chart-8-inverse: var(--color-violet-300);
  --chart-colors-chart-8-hex: var(--color-violet-400);
  --chart-colors-chart-8-hex-inverse: var(--color-violet-300);
  --chart-9: var(--color-rose-400);
  --chart-colors-chart-9: var(--color-rose-400);
  --chart-colors-chart-9-inverse: var(--color-rose-300);
  --chart-colors-chart-9-hex: var(--color-rose-400);
  --chart-colors-chart-9-hex-inverse: var(--color-rose-300);
  --chart-10: var(--color-slate-300);
  --chart-colors-chart-10: var(--color-slate-300);
  --chart-colors-chart-10-inverse: var(--color-slate-500);
  --chart-colors-chart-10-hex: var(--color-slate-300);
  --chart-colors-chart-10-hex-inverse: var(--color-slate-500);

  --chart-colors-labels: var(--color-slate-400);
  --chart-colors-xaxis-labels: var(--color-slate-400);
  --chart-colors-yaxis-labels: var(--color-slate-400);
  --chart-colors-grid-border: var(--border);
  --chart-colors-bar-ranges: var(--surface);
  
  /* MAPS - dark mode adjustments */
  --map-colors-default: var(--surface);
  --map-colors-default-inverse: var(--surface-2);
  --map-colors-border: var(--border-line-3);
  --map-colors-border-inverse: var(--border-line-4);
}

/* Runtime palette bridge: the legacy shell loads this file without Tailwind. */
:root[data-theme="theme-vtmart-admin"],
[data-theme="theme-vtmart-admin"] {
  --color-vtmart-admin-50: hsl(168 55% 96%);
  --color-vtmart-admin-100: hsl(168 53% 92%);
  --color-vtmart-admin-200: hsl(168 50% 84%);
  --color-vtmart-admin-300: hsl(168 47% 72%);
  --color-vtmart-admin-400: hsl(168 52% 52%);
  --color-vtmart-admin-500: hsl(168 61% 36%);
  --color-vtmart-admin-600: hsl(168 59% 22%);
  --color-vtmart-admin-700: hsl(168 62% 18%);
  --color-vtmart-admin-800: hsl(168 65% 15%);
  --color-vtmart-admin-900: hsl(168 70% 12%);
  --color-vtmart-admin-950: hsl(168 75% 9%);
  --color-vtmart-admin-gray-50: hsl(168 5% 98%);
  --color-vtmart-admin-gray-100: hsl(168 6% 96%);
  --color-vtmart-admin-gray-200: hsl(168 7% 90%);
  --color-vtmart-admin-gray-300: hsl(168 8% 83%);
  --color-vtmart-admin-gray-400: hsl(168 8% 73%);
  --color-vtmart-admin-gray-500: hsl(168 7% 63%);
  --color-vtmart-admin-gray-600: hsl(168 7% 53%);
  --color-vtmart-admin-gray-700: hsl(168 6% 41%);
  --color-vtmart-admin-gray-800: hsl(168 5% 27%);
  --color-vtmart-admin-gray-900: hsl(168 4% 21%);
  --color-vtmart-admin-gray-950: hsl(168 3% 14%);
}

/* Bootstrap admin compatibility: the legacy shell has no Preline base theme. */
:root[data-theme="theme-vtmart-admin"]:not(.dark),
[data-theme="theme-vtmart-admin"]:not(.dark) {
  --vtmart-white: hsl(0 0% 100%);
  --vtmart-primary: hsl(168 59% 22%);
  --vtmart-primary-hover: hsl(168 62% 18%);
  --vtmart-primary-focus: hsl(168 62% 18%);
  --vtmart-primary-active: hsl(168 66% 15%);
  --vtmart-primary-light: hsl(168 65% 31%);
  --vtmart-primary-dark: hsl(168 77% 16%);
  --vtmart-background: hsl(210 40% 98%);
  --vtmart-card: hsl(0 0% 100%);
  --vtmart-foreground: hsl(222 47% 11%);
  --vtmart-secondary: hsl(215 16% 47%);
  --vtmart-tertiary: hsl(215 20% 65%);
  --vtmart-border: hsl(214 32% 91%);

  --vtmart-primary-50: hsl(168 55% 96%);
  --vtmart-primary-100: hsl(168 53% 92%);
  --vtmart-primary-200: hsl(168 50% 84%);
  --vtmart-primary-300: hsl(168 47% 72%);
  --vtmart-primary-400: hsl(168 52% 52%);
  --vtmart-primary-500: hsl(168 61% 36%);
  --vtmart-primary-600: var(--vtmart-primary);
  --vtmart-primary-700: hsl(168 62% 18%);
  --vtmart-primary-800: hsl(168 65% 15%);
  --vtmart-primary-900: hsl(168 70% 12%);
  --vtmart-primary-950: hsl(168 75% 9%);

  --primary-50: var(--vtmart-primary-50);
  --primary-100: var(--vtmart-primary-100);
  --primary-200: var(--vtmart-primary-200);
  --primary-300: var(--vtmart-primary-300);
  --primary-400: var(--vtmart-primary-400);
  --primary-500: var(--vtmart-primary-500);
  --primary-600: var(--vtmart-primary-600);
  --primary-700: var(--vtmart-primary-700);
  --primary-800: var(--vtmart-primary-800);
  --primary-900: var(--vtmart-primary-900);
  --primary-950: var(--vtmart-primary-950);
  --primary: var(--vtmart-primary);
  --primary-hover: var(--vtmart-primary-hover);
  --primary-focus: var(--vtmart-primary-focus);
  --primary-active: var(--vtmart-primary-active);
  --primary-foreground: var(--vtmart-white);

  --background: var(--vtmart-background);
  --background-1: var(--vtmart-background);
  --background-2: hsl(210 40% 96%);
  --background-plain: var(--vtmart-card);
  --foreground: var(--vtmart-foreground);
  --foreground-inverse: var(--vtmart-white);
  --inverse: var(--vtmart-foreground);
  --surface: var(--vtmart-card);
  --surface-1: hsl(210 40% 96%);
  --surface-2: hsl(214 32% 91%);
  --surface-foreground: var(--vtmart-foreground);
  --surface-hover: hsl(168 55% 96%);
  --surface-focus: hsl(168 55% 96%);
  --surface-active: hsl(168 55% 96%);
  --muted: var(--vtmart-background);
  --muted-foreground: var(--vtmart-tertiary);
  --muted-foreground-1: var(--vtmart-secondary);
  --muted-foreground-2: hsl(215 19% 35%);
  --muted-hover: hsl(210 40% 96%);
  --muted-focus: hsl(210 40% 96%);
  --muted-active: hsl(210 40% 96%);
  --border: var(--vtmart-border);
  --card: var(--vtmart-card);
  --card-line: var(--vtmart-border);
  --card-header: var(--vtmart-background);
  --card-footer: var(--vtmart-background);
  --navbar: var(--vtmart-card);
  --navbar-line: var(--vtmart-border);
  --sidebar: var(--vtmart-card);
  --sidebar-line: var(--vtmart-border);
  --dropdown: var(--vtmart-card);
  --dropdown-1: var(--vtmart-card);
  --dropdown-item-foreground: var(--vtmart-foreground);
  --dropdown-item-hover: var(--muted-hover);
  --dropdown-item-focus: var(--muted-focus);
  --dropdown-item-active: var(--muted-active);

  /* Existing modern-ui.css aliases. */
  --primary-light: var(--vtmart-primary-light);
  --primary-dark: var(--vtmart-primary-dark);
  --text-primary: var(--vtmart-foreground);
  --text-secondary: var(--vtmart-secondary);
  --text-tertiary: var(--vtmart-tertiary);
  --success: hsl(160 84% 39%);
  --warning: hsl(38 92% 50%);
  --danger: hsl(0 84% 60%);
  --info: hsl(199 89% 48%);
  --transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;

  /* Generated Preline tokens resolve through these aliases in this legacy shell. */
  --color-white: var(--vtmart-white);
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
  --color-primary-950: var(--primary-950);
  --color-red-400: hsl(0 84% 60%);
  --color-red-500: hsl(0 72% 51%);
  --color-red-600: hsl(0 72% 45%);
  --color-green-400: hsl(142 71% 45%);
  --color-green-500: hsl(142 71% 35%);
  --color-sky-400: hsl(198 93% 60%);
  --color-sky-600: hsl(199 89% 48%);
  --color-emerald-400: hsl(158 64% 52%);
  --color-emerald-600: hsl(161 94% 30%);
  --color-violet-400: hsl(262 83% 66%);
  --color-violet-600: hsl(262 83% 58%);
  --color-rose-400: hsl(351 95% 71%);
  --color-rose-500: hsl(350 89% 60%);
}

[data-theme="theme-vtmart-admin"].dark {
  --vtmart-white: hsl(0 0% 100%);
  --vtmart-primary: hsl(168 59% 38%);
  --vtmart-primary-hover: hsl(168 61% 44%);
  --vtmart-primary-focus: hsl(168 61% 44%);
  --vtmart-primary-active: hsl(168 63% 48%);
  --vtmart-primary-light: hsl(168 61% 50%);
  --vtmart-primary-dark: hsl(168 70% 27%);
  --vtmart-background: hsl(222 47% 11%);
  --vtmart-card: hsl(217 33% 17%);
  --vtmart-foreground: hsl(210 40% 98%);
  --vtmart-secondary: hsl(215 20% 65%);
  --vtmart-tertiary: hsl(215 16% 47%);
  --vtmart-border: hsl(215 28% 27%);

  --primary-50: hsl(168 55% 96%);
  --primary-100: hsl(168 53% 92%);
  --primary-200: hsl(168 50% 84%);
  --primary-300: hsl(168 47% 72%);
  --primary-400: hsl(168 52% 52%);
  --primary-500: var(--vtmart-primary);
  --primary-600: hsl(168 61% 32%);
  --primary-700: hsl(168 62% 27%);
  --primary-800: hsl(168 65% 22%);
  --primary-900: hsl(168 70% 17%);
  --primary-950: hsl(168 75% 12%);
  --primary: var(--vtmart-primary);
  --primary-hover: var(--vtmart-primary-hover);
  --primary-focus: var(--vtmart-primary-focus);
  --primary-active: var(--vtmart-primary-active);
  --primary-foreground: var(--vtmart-white);

  --background: var(--vtmart-background);
  --background-1: hsl(222 47% 8%);
  --background-2: hsl(217 33% 14%);
  --background-plain: var(--vtmart-card);
  --foreground: var(--vtmart-foreground);
  --foreground-inverse: var(--vtmart-white);
  --inverse: hsl(222 47% 8%);
  --surface: hsl(215 28% 23%);
  --surface-1: hsl(215 28% 27%);
  --surface-2: hsl(215 20% 35%);
  --surface-foreground: var(--vtmart-foreground);
  --surface-hover: hsl(215 28% 27%);
  --surface-focus: hsl(215 28% 27%);
  --surface-active: hsl(215 28% 27%);
  --muted: var(--vtmart-background);
  --muted-foreground: var(--vtmart-tertiary);
  --muted-foreground-1: var(--vtmart-secondary);
  --muted-foreground-2: hsl(213 27% 84%);
  --muted-hover: hsl(215 28% 23%);
  --muted-focus: hsl(215 28% 23%);
  --muted-active: hsl(215 28% 23%);
  --border: var(--vtmart-border);
  --card: var(--vtmart-card);
  --card-line: var(--vtmart-border);
  --card-header: hsl(215 28% 23%);
  --card-footer: hsl(215 28% 23%);
  --navbar: var(--vtmart-card);
  --navbar-line: var(--vtmart-border);
  --sidebar: var(--vtmart-card);
  --sidebar-line: var(--vtmart-border);
  --dropdown: hsl(222 47% 8%);
  --dropdown-1: var(--vtmart-card);
  --dropdown-item-foreground: var(--vtmart-foreground);
  --dropdown-item-hover: var(--muted-hover);
  --dropdown-item-focus: var(--muted-focus);
  --dropdown-item-active: var(--muted-active);

  --primary-light: var(--vtmart-primary-light);
  --primary-dark: var(--vtmart-primary-dark);
  --text-primary: var(--vtmart-foreground);
  --text-secondary: var(--vtmart-secondary);
  --text-tertiary: var(--vtmart-tertiary);
  --success: hsl(160 84% 39%);
  --warning: hsl(38 92% 50%);
  --danger: hsl(0 84% 60%);
  --info: hsl(199 89% 60%);
  --transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;

  --color-white: var(--vtmart-white);
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
  --color-primary-950: var(--primary-950);
  --color-slate-100: hsl(210 40% 96%);
  --color-slate-200: hsl(214 32% 91%);
  --color-slate-300: hsl(213 27% 84%);
  --color-slate-400: hsl(215 20% 65%);
  --color-slate-500: hsl(215 16% 47%);
  --color-slate-600: hsl(215 19% 35%);
  --color-slate-700: hsl(215 25% 27%);
  --color-slate-800: hsl(217 33% 17%);
  --color-slate-900: hsl(222 47% 11%);
  --color-slate-950: hsl(222 47% 8%);
  --color-red-400: hsl(0 84% 60%);
  --color-red-500: hsl(0 72% 51%);
  --color-red-600: hsl(0 72% 45%);
  --color-green-400: hsl(142 71% 55%);
  --color-green-500: hsl(142 71% 45%);
  --color-sky-300: hsl(198 93% 70%);
  --color-sky-400: hsl(198 93% 60%);
  --color-emerald-300: hsl(158 64% 62%);
  --color-emerald-400: hsl(158 64% 52%);
  --color-violet-300: hsl(262 83% 76%);
  --color-violet-400: hsl(262 83% 66%);
  --color-rose-300: hsl(351 95% 81%);
  --color-rose-400: hsl(351 95% 71%);
}

/* Phase 2 shell: 270px sidebar, accessible active pill, and command palette. */
@media (min-width: 1200px) {
  :root[data-theme="theme-vtmart-admin"] body.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-compact-mode):not(.navbar-vertical-aside-mini-mode) .main {
    padding-left: 270px;
  }

  :root[data-theme="theme-vtmart-admin"] body.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-compact-mode):not(.navbar-vertical-aside-mini-mode) .footer,
  :root[data-theme="theme-vtmart-admin"] body.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-compact-mode):not(.navbar-vertical-aside-mini-mode) > .navbar:not(.navbar-vertical) {
    margin-left: 270px;
  }

  :root[data-theme="theme-vtmart-admin"] body.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-compact-mode):not(.navbar-vertical-aside-mini-mode) .navbar-vertical-aside {
    width: 270px;
  }
}

:root[data-theme="theme-vtmart-admin"] {
  --vtmart-sidebar-bg: hsl(168 64% 14%);
  --vtmart-sidebar-foreground: hsl(0 0% 100%);
  --vtmart-sidebar-muted: hsl(168 35% 78%);
  --vtmart-sidebar-active: hsl(168 55% 28%);
  --vtmart-sidebar-border: hsl(168 40% 27%);
}

:root[data-theme="theme-vtmart-admin"] aside.navbar-vertical-aside,
:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-container,
:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-footer-offset,
:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-content,
:root[data-theme="theme-vtmart-admin"] aside .navbar-brand-wrapper {
  color: var(--vtmart-sidebar-foreground) !important;
  background: var(--vtmart-sidebar-bg) !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-brand-wrapper {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 0.875rem !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--vtmart-sidebar-border);
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  color: var(--vtmart-sidebar-foreground) !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-brand .side-logo {
  width: 4rem !important;
  max-width: 4rem;
  flex: 0 0 4rem;
  object-position: left center;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-brand-title {
  overflow: hidden;
  color: var(--vtmart-sidebar-foreground);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  color: var(--vtmart-sidebar-muted) !important;
  background: transparent !important;
  border-radius: 0.75rem;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link > .nav-icon,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link > .nav-indicator-icon {
  display: inline-flex;
  flex: 0 0 1.75rem;
  align-items: center;
  justify-content: center;
  margin: 0;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link > .nav-icon {
  width: 1.75rem;
  height: 1.75rem;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link > .nav-indicator-icon {
  width: 1rem;
  height: 1rem;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub {
  padding: 0.25rem 0 !important;
  margin: 0 !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub .nav-link {
  display: flex !important;
  align-items: center !important;
  min-height: 2.25rem !important;
  padding: 0.45rem 0.75rem 0.45rem 2.85rem !important;
  margin: 0.125rem 0.5rem !important;
  border-radius: 0.5rem !important;
  gap: 0.625rem !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub .nav-indicator-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  margin: 0 0.5rem 0 0 !important;
  align-self: center !important;
  transition: all 0.2s ease !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub .nav-indicator-icon::before {
  display: none !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub .active > .nav-link .nav-indicator-icon,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub .nav-item.active .nav-indicator-icon,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-sub .nav-link.active .nav-indicator-icon {
  background: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8) !important;
  transform: scale(1.25) !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link > .text-truncate,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link > .navbar-vertical-aside-mini-mode-hidden-elements {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link-toggle::after {
  flex: 0 0 1rem;
  margin-left: auto;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-item_title {
  display: flex;
  min-width: 0;
  align-items: center;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-item_title .nav-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .sidebar--badge-container {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .sidebar--badge-container > span:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .sidebar--badge-container .badge {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link .text-truncate,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link .nav-icon,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link .nav-indicator-icon {
  color: inherit !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-icon.lucide {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.75rem;
  stroke-width: 1.8;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-indicator-icon.lucide {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 0.85rem;
  stroke-width: 2.5;
}

:root[data-theme="theme-vtmart-admin"] aside .nav-subtitle-replacer.lucide {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link:hover {
  color: var(--vtmart-sidebar-foreground) !important;
  background: var(--vtmart-sidebar-active) !important;
  outline: none;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .nav-link:focus-visible {
  color: var(--vtmart-sidebar-foreground) !important;
  background: var(--vtmart-sidebar-active) !important;
  outline: 1px solid var(--vtmart-sidebar-muted);
  outline-offset: 0;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav.nav-tabs .active > .nav-link,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav.nav-tabs .active.nav-link,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav.nav-tabs .nav-item.active > .nav-link {
  color: var(--vtmart-sidebar-foreground) !important;
  background: var(--vtmart-sidebar-active) !important;
  border-radius: 0.75rem;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav.nav-tabs .active > .nav-link::before,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav.nav-tabs .active.nav-link::before {
  display: none;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .active > .nav-link i,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .active.nav-link i,
:root[data-theme="theme-vtmart-admin"] aside .navbar-nav .active .nav-icon {
  color: var(--vtmart-sidebar-foreground) !important;
}

:root[data-theme="theme-vtmart-admin"] aside .nav-subtitle,
:root[data-theme="theme-vtmart-admin"] aside .nav-subtitle-replacer {
  color: var(--vtmart-sidebar-muted) !important;
}

:root[data-theme="theme-vtmart-admin"] aside .nav-link-toggle::after {
  filter: brightness(0) invert(1);
  opacity: 0.72;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-content,
:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-content::-webkit-scrollbar,
:root[data-theme="theme-vtmart-admin"] aside .navbar-vertical-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--vtmart-sidebar-muted) !important;
  background: hsl(0 0% 100% / 0.08) !important;
  border: 1px solid hsl(0 0% 100% / 0.15) !important;
  border-radius: 0.375rem;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button:hover,
:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button:focus-visible {
  color: #ffffff !important;
  background: hsl(0 0% 100% / 0.22) !important;
  border-color: hsl(0 0% 100% / 0.4) !important;
  outline: none;
  transform: scale(1.05);
}

:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(168 55% 75% / 0.6);
}

:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button:active {
  transform: scale(0.95);
}

:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button .lucide,
:root[data-theme="theme-vtmart-admin"] aside .sidebar-toggle-button .sidebar-toggle-icon {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 2.2;
  transition: transform 160ms ease;
}

/* ==========================================================================
   Header Buttons (Theme, Language, Messages, Notifications, Profile)
   ========================================================================== */
:root[data-theme="theme-vtmart-admin"] #header .admin-header-btn,
:root[data-theme="theme-vtmart-admin"] #header .admin-theme-toggle,
:root[data-theme="theme-vtmart-admin"] #header .notify--icon {
  display: inline-flex !important;
  height: 2.25rem !important;
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: var(--text-secondary) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  text-decoration: none !important;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-header-btn:hover,
:root[data-theme="theme-vtmart-admin"] #header .admin-header-btn:focus-visible,
:root[data-theme="theme-vtmart-admin"] #header .admin-theme-toggle:hover,
:root[data-theme="theme-vtmart-admin"] #header .admin-theme-toggle:focus-visible,
:root[data-theme="theme-vtmart-admin"] #header .notify--icon:hover,
:root[data-theme="theme-vtmart-admin"] #header .notify--icon:focus-visible {
  color: var(--primary) !important;
  background: var(--primary-50) !important;
  border-color: var(--primary-200) !important;
  outline: none;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-header-btn .admin-header-icon,
:root[data-theme="theme-vtmart-admin"] #header .admin-header-btn .lucide,
:root[data-theme="theme-vtmart-admin"] #header .notify--icon .lucide,
:root[data-theme="theme-vtmart-admin"] #header .notify--icon > svg {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  color: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  vertical-align: middle;
}

/* Single icon for Theme Toggle: Moon in light, Sun in dark */
#header .admin-theme-toggle .admin-theme-icon-light,
#header .admin-theme-toggle .lucide-sun,
#header .admin-theme-toggle [data-lucide="sun"] {
  display: none !important;
}
#header .admin-theme-toggle .admin-theme-icon-dark,
#header .admin-theme-toggle .lucide-moon,
#header .admin-theme-toggle [data-lucide="moon"] {
  display: inline-block !important;
}

html.dark #header .admin-theme-toggle .admin-theme-icon-dark,
html.dark #header .admin-theme-toggle .lucide-moon,
html.dark #header .admin-theme-toggle [data-lucide="moon"],
:root.dark #header .admin-theme-toggle .admin-theme-icon-dark,
:root.dark #header .admin-theme-toggle .lucide-moon,
:root.dark #header .admin-theme-toggle [data-lucide="moon"] {
  display: none !important;
}

html.dark #header .admin-theme-toggle .admin-theme-icon-light,
html.dark #header .admin-theme-toggle .lucide-sun,
html.dark #header .admin-theme-toggle [data-lucide="sun"],
:root.dark #header .admin-theme-toggle .admin-theme-icon-light,
:root.dark #header .admin-theme-toggle .lucide-sun,
:root.dark #header .admin-theme-toggle [data-lucide="sun"] {
  display: inline-block !important;
}

:root[data-theme="theme-vtmart-admin"] #header .notify--icon .amount {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff !important;
  background: #ef4444 !important;
  border: 2px solid var(--card) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Admin Profile Pill */
:root[data-theme="theme-vtmart-admin"] #header .admin-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.25rem;
  padding: 0.2rem 0.625rem 0.2rem 0.3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-pill:hover,
:root[data-theme="theme-vtmart-admin"] #header .admin-profile-pill:focus-visible {
  background: var(--primary-50);
  border-color: var(--primary-200);
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-avatar-wrap {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 0.5rem;
  height: 0.5rem;
  background: #22c55e;
  border: 1.5px solid var(--card);
  border-radius: 999px;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-role {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  line-height: 1.1;
}

:root[data-theme="theme-vtmart-admin"] #header .admin-profile-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
  stroke-width: 2;
}

/* Modern Header Left & Center */
:root[data-theme="theme-vtmart-admin"] .admin-header-context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  max-width: 24rem;
}

:root[data-theme="theme-vtmart-admin"] .admin-greeting-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

:root[data-theme="theme-vtmart-admin"] .admin-greeting-text strong {
  color: var(--primary);
  font-weight: 700;
}

:root[data-theme="theme-vtmart-admin"] .admin-header-datetime-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

:root[data-theme="theme-vtmart-admin"] .admin-header-datetime-badge .lucide {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--text-secondary);
  flex: 0 0 auto;
}

:root[data-theme="theme-vtmart-admin"] .admin-date-sep {
  opacity: 0.5;
}

:root[data-theme="theme-vtmart-admin"] .admin-header-center {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  max-width: 440px;
  min-width: 240px;
  margin: 0 1.25rem;
}

:root[data-theme="theme-vtmart-admin"] .admin-header-search-bar {
  display: flex !important;
  width: 100% !important;
  height: 2.5rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0.875rem !important;
  background: var(--background-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.625rem !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

:root[data-theme="theme-vtmart-admin"] .admin-header-search-bar:hover,
:root[data-theme="theme-vtmart-admin"] .admin-header-search-bar:focus-visible {
  border-color: var(--primary) !important;
  background: var(--card) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}

:root[data-theme="theme-vtmart-admin"] .admin-search-placeholder {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-left: 0.5rem;
  margin-right: auto;
}

:root[data-theme="theme-vtmart-admin"] .admin-search-kbd {
  padding: 0.15rem 0.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav > li:not(.nav-item_title),
  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav .nav {
    white-space: normal;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav > li:not(.nav-item_title) > .nav-link {
    align-items: center;
    min-height: 2.75rem;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav .nav-sub .nav-link {
    align-items: center !important;
    min-height: 2.25rem !important;
    padding: 0.45rem 0.75rem 0.45rem 2.85rem !important;
    margin: 0.125rem 0.5rem !important;
    border-radius: 0.5rem !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav .nav-link > .text-truncate,
  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav .nav-link > .navbar-vertical-aside-mini-mode-hidden-elements {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav .nav-sub .nav-link .sidebar--badge-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"]:not(.navbar-vertical-aside-mini-mode) aside .navbar-nav .nav-link-toggle::after {
    flex: 0 0 auto;
    margin-top: 0;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .nav-item_title,
  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .nav-subtitle-replacer {
    display: none !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > li:not(.nav-item_title) > .nav-link {
    justify-content: center;
    width: calc(100% - 0.75rem);
    min-height: 2.75rem;
    margin: 0.25rem 0.375rem !important;
    padding: 0.5rem !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > li:not(.nav-item_title) > .nav-link > .text-truncate,
  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > li:not(.nav-item_title) > .nav-link > .navbar-vertical-aside-mini-mode-hidden-elements {
    display: none !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > li:not(.nav-item_title) > .nav-link > .nav-icon {
    display: inline-flex;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: 1;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-brand-wrapper {
    position: relative;
    overflow: visible !important;
    justify-content: center !important;
    gap: 0.25rem;
    padding: 0 0.5rem !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-brand-wrapper {
    padding: 0.75rem 0.35rem !important;
    justify-content: center !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-brand {
    display: none !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .sidebar-toggle-button {
    margin: 0 auto !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .sidebar-toggle-button .sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > li:not(.nav-item_title) {
    position: relative;
  }

  /* Sidebar Bootstrap Tooltip */
  .tooltip.bs-tooltip-right .arrow::before,
  .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: hsl(168 64% 14%) !important;
  }

  .tooltip .tooltip-inner {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background-color: hsl(168 64% 14%) !important;
    border: 1px solid hsl(168 40% 27%) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 24px hsl(168 70% 8% / 0.3) !important;
  }

  /* Mini mode floating flyout submenu */

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating {
    position: fixed !important;
    display: block !important;
    z-index: 99999 !important;
    min-width: 15rem !important;
    max-width: 18rem !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    padding: 0.5rem !important;
    background: var(--vtmart-sidebar-bg) !important;
    border: 1px solid var(--vtmart-sidebar-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 16px 36px hsl(168 70% 8% / 0.45) !important;
  }

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 2.25rem !important;
    margin: 0.125rem 0 !important;
    padding: 0.45rem 0.75rem !important;
    color: var(--vtmart-sidebar-muted) !important;
    background: transparent !important;
    border-radius: 0.5rem !important;
    white-space: nowrap !important;
  }

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .nav-link:hover,
  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .nav-link:focus-visible,
  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .nav-item.active > .nav-link {
    color: var(--vtmart-sidebar-foreground) !important;
    background: var(--vtmart-sidebar-active) !important;
  }

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .sidebar--badge-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
  }

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .sidebar--badge-container > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .sidebar--badge-container .badge {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  body.navbar-vertical-aside-mini-mode .js-navbar-vertical-aside-submenu.mini-flyout-floating .nav-indicator-icon {
    flex: 0 0 0.85rem !important;
    width: 0.85rem !important;
    height: 0.85rem !important;
    margin-right: 0.5rem !important;
    color: inherit !important;
  }

  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > .navbar-vertical-aside-has-menu > .nav-link-toggle::before,
  :root[data-theme="theme-vtmart-admin"] body[class*="navbar-vertical-aside-show"].navbar-vertical-aside-mini-mode aside .navbar-nav > .navbar-vertical-aside-has-menu > .nav-link-toggle::after {
    display: none !important;
  }
}

:root[data-theme="theme-vtmart-admin"] body.navbar-vertical-aside-closed-mode aside .sidebar-toggle-button {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 1rem;
  left: 0.75rem;
}

:root[data-theme="theme-vtmart-admin"] body.navbar-vertical-aside-closed-mode aside .sidebar-toggle-button .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.admin-command-palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.625rem;
  color: var(--text-secondary);
  background: var(--background-1);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.admin-command-palette-trigger:hover,
.admin-command-palette-trigger:focus-visible {
  color: var(--primary);
  background: var(--primary-50);
  border-color: var(--primary-200);
}

.admin-command-palette-trigger kbd,
.admin-command-palette-search kbd {
  padding: 0.125rem 0.375rem;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.25;
}

.admin-command-palette[hidden] {
  display: none;
}

.admin-command-palette {
  position: fixed;
  z-index: 1050;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 1rem 1rem;
}

.admin-command-palette-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: hsl(222 47% 11% / 0.48);
  backdrop-filter: blur(2px);
}

.admin-command-palette-dialog {
  position: relative;
  width: min(42rem, 100%);
  max-height: min(70vh, 40rem);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem hsl(222 47% 11% / 0.22);
}

.admin-command-palette-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
}

.admin-command-palette-search input {
  flex: 1;
  min-width: 0;
  color: var(--foreground);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1rem;
}

.admin-command-palette-list {
  max-height: min(52vh, 28rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
}

.admin-command-palette-list a {
  display: block;
  padding: 0.75rem 0.875rem;
  color: var(--foreground);
  border-radius: 0.625rem;
  text-decoration: none;
}

.admin-command-palette-list a:hover,
.admin-command-palette-list a:focus-visible,
.admin-command-palette-list [aria-selected="true"] a {
  color: var(--primary);
  background: var(--primary-50);
  outline: 0;
}

.admin-command-palette-empty {
  padding: 2rem 1rem;
  color: var(--text-secondary);
  text-align: center;
}

.admin-command-palette-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
}

body.admin-command-palette-open {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .admin-command-palette {
    padding-top: 1rem;
  }

  .admin-command-palette-dialog {
    border-radius: 0.75rem;
  }
}

/* Header context + light/dark switch. */

.admin-header-context {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(24rem, 32vw);
  flex-direction: column;
  margin-right: auto;
  padding: 0;
  line-height: 1.15;
}

.admin-header-context-kicker,
.admin-header-context-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-header-context-kicker {
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-header-context-title {
  margin-top: 0.15rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
}

.admin-command-palette-trigger .lucide,
.admin-theme-toggle .lucide {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.admin-theme-toggle {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-secondary);
  background: var(--background-1);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-theme-toggle:hover,
.admin-theme-toggle:focus-visible {
  color: var(--primary);
  background: var(--primary-50);
  border-color: var(--primary-200);
  outline: none;
}

.admin-theme-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-200);
}

.admin-theme-toggle:active {
  transform: scale(0.96);
}

.admin-theme-icon {
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1;
}

.admin-theme-icon-light,
[data-theme="theme-vtmart-admin"] .admin-theme-icon-light {
  display: none;
}

[data-theme="theme-vtmart-admin"].dark .admin-theme-icon-dark {
  display: none;
}

[data-theme="theme-vtmart-admin"].dark .admin-theme-icon-light {
  display: inline-flex;
}

@media (max-width: 767.98px) {
  .admin-header-context {
    max-width: 11rem;
  }

  .admin-header-context-title {
    display: none;
  }
}

[data-theme="theme-vtmart-admin"].dark {
  color-scheme: dark;
  --vtmart-sidebar-bg: var(--color-vtmart-admin-950);
  --vtmart-sidebar-muted: var(--color-vtmart-admin-gray-300);
  --vtmart-sidebar-active: var(--color-vtmart-admin-800);
  --vtmart-sidebar-border: var(--color-vtmart-admin-700);
}

[data-theme="theme-vtmart-admin"]:not(.dark) {
  color-scheme: light;
}

[data-theme="theme-vtmart-admin"].dark body {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-background);
}

[data-theme="theme-vtmart-admin"].dark body .navbar-expand-lg,
[data-theme="theme-vtmart-admin"].dark body #header {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-card) !important;
  border-color: var(--vtmart-border) !important;
}

[data-theme="theme-vtmart-admin"].dark body .card,
[data-theme="theme-vtmart-admin"].dark body .bg-white {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-card) !important;
  border-color: var(--vtmart-border) !important;
}

[data-theme="theme-vtmart-admin"].dark body .card-header {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-card) !important;
  border-color: var(--vtmart-border) !important;
}

[data-theme="theme-vtmart-admin"].dark body .card-title,
[data-theme="theme-vtmart-admin"].dark body .card-subtitle,
[data-theme="theme-vtmart-admin"].dark body h1,
[data-theme="theme-vtmart-admin"].dark body h2,
[data-theme="theme-vtmart-admin"].dark body h3,
[data-theme="theme-vtmart-admin"].dark body h4,
[data-theme="theme-vtmart-admin"].dark body h5,
[data-theme="theme-vtmart-admin"].dark body h6 {
  color: var(--vtmart-foreground);
}

[data-theme="theme-vtmart-admin"].dark body .text-muted,
[data-theme="theme-vtmart-admin"].dark body label {
  color: var(--vtmart-secondary) !important;
}

[data-theme="theme-vtmart-admin"].dark body .form-control,
[data-theme="theme-vtmart-admin"].dark body .custom-select,
[data-theme="theme-vtmart-admin"].dark body .select2-selection {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-background-2);
  border-color: var(--vtmart-border);
}

[data-theme="theme-vtmart-admin"].dark body .form-control::placeholder {
  color: var(--vtmart-secondary);
}

/* Universal Dropdown & Popup Styling */
.dropdown-menu,
.navbar-dropdown-menu {
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  padding: 0.375rem !important;
  border: 1px solid var(--vtmart-border) !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12), 0 6px 12px -4px rgba(0, 0, 0, 0.08) !important;
}

.dropdown-menu .dropdown-item,
.navbar-dropdown-menu .dropdown-item {
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.125rem 0 !important;
  transition: all 0.15s ease !important;
}

.dropdown-menu .dropdown-item.active,
.navbar-dropdown-menu .dropdown-item.active {
  border-radius: 0.5rem !important;
}

[data-theme="theme-vtmart-admin"].dark body .dropdown-menu,
[data-theme="theme-vtmart-admin"].dark body .navbar-dropdown-menu {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-card);
  border-color: var(--vtmart-border);
}

[data-theme="theme-vtmart-admin"].dark body .dropdown-item {
  color: var(--vtmart-foreground);
}

[data-theme="theme-vtmart-admin"].dark body .dropdown-item:hover,
[data-theme="theme-vtmart-admin"].dark body .dropdown-item:focus {
  color: var(--vtmart-foreground);
  background-color: var(--vtmart-background-2);
}

[data-theme="theme-vtmart-admin"].dark .apexcharts-text,
[data-theme="theme-vtmart-admin"].dark .apexcharts-legend-text {
  fill: var(--foreground) !important;
  color: var(--foreground) !important;
}

[data-theme="theme-vtmart-admin"].dark .apexcharts-gridline,
[data-theme="theme-vtmart-admin"].dark .apexcharts-xaxis line,
[data-theme="theme-vtmart-admin"].dark .apexcharts-yaxis line {
  stroke: var(--border) !important;
}

[data-theme="theme-vtmart-admin"].dark .apexcharts-tooltip {
  color: var(--foreground) !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
}

[data-theme="theme-vtmart-admin"].dark .apexcharts-tooltip-title {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   VTMART EXECUTIVE DASHBOARD DESIGN UPGRADE
   ========================================================================== */

/* Modern Dashboard Main Cards */
.dashboard--card {
  position: relative !important;
  background: var(--vtmart-card, #ffffff) !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  border-radius: 1rem !important;
  padding: 1.25rem 1.5rem !important;
  min-height: 112px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.dashboard--card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px -6px rgba(16, 121, 128, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04) !important;
  border-color: hsl(168 50% 45% / 0.5) !important;
}

.dashboard--card .subtitle {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--vtmart-muted-foreground, #64748b) !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.01em !important;
}

.dashboard--card .title {
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--vtmart-foreground, #0f172a) !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

.dashboard--card .dashboard-icon {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  max-width: 2.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.75rem !important;
  background: var(--vtmart-background-2, #f8fafc) !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  padding: 0.5rem !important;
  transition: transform 0.25s ease !important;
}

.dashboard--card:hover .dashboard-icon {
  transform: scale(1.1) rotate(4deg) !important;
}

/* Secondary Order Status Cards */
.order--card {
  background: var(--vtmart-card, #ffffff) !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  border-radius: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.order--card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.07) !important;
  border-color: hsl(168 50% 45% / 0.4) !important;
}

.order--card .card-subtitle span {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--vtmart-foreground, #1e293b) !important;
}

.order--card .card-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Modern Card Containers on Dashboard */
.card {
  border-radius: 1rem !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Period Filter Buttons (This Year / This Month / This Week) */
.statistics-btn-grp {
  background: var(--vtmart-background-2, #f1f5f9) !important;
  border-radius: 0.625rem !important;
  padding: 0.25rem !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  gap: 0.25rem !important;
}

.statistics-btn-grp label {
  margin: 0 !important;
}

.statistics-btn-grp .order-type,
.statistics-btn-grp .earning-statistics {
  display: inline-block !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--vtmart-muted-foreground, #64748b) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.statistics-btn-grp input[type="radio"]:checked + .order-type,
.statistics-btn-grp input[type="radio"]:checked + .earning-statistics {
  background: #ffffff !important;
  color: hsl(168 50% 30%) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="theme-vtmart-admin"].dark .statistics-btn-grp input[type="radio"]:checked + .order-type,
[data-theme="theme-vtmart-admin"].dark .statistics-btn-grp input[type="radio"]:checked + .earning-statistics {
  background: var(--vtmart-card) !important;
  color: hsl(168 50% 60%) !important;
}

/* Apex Legends Grid */
.apex-legends {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.625rem !important;
  margin-top: 1rem !important;
}

.apex-legends > div {
  background: var(--vtmart-background-2, #f8fafc) !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--vtmart-foreground, #334155) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Donut Center Total */
.position-relative.pie-chart .total--orders {
  text-align: center !important;
}

.position-relative.pie-chart .total--orders h3 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--vtmart-foreground, #0f172a) !important;
  margin-bottom: 0.125rem !important;
}

.position-relative.pie-chart .total--orders span {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--vtmart-muted-foreground, #94a3b8) !important;
}

/* Recent Orders List Polish */
.recent--orders {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.recent--orders li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.625rem !important;
  margin-bottom: 0.375rem !important;
  transition: all 0.15s ease !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
}

.recent--orders li a:hover {
  background: var(--vtmart-background-2, #f8fafc) !important;
  border-color: var(--vtmart-border, #e2e8f0) !important;
}

.recent--orders li a h6 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--vtmart-foreground, #1e293b) !important;
  margin-bottom: 0.125rem !important;
}

.recent--orders li a span.text-uppercase {
  font-size: 0.75rem !important;
  color: var(--vtmart-muted-foreground, #94a3b8) !important;
}

/* Bottom Top 3 Widgets Styling */
.top--selling, .rated--products {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0 !important;
}

.top--selling .grid--card,
.rated--products a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 0.625rem !important;
  background: var(--vtmart-background-2, #f8fafc) !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  color: inherit !important;
}

.top--selling .grid--card:hover,
.rated--products a:hover {
  background: #ffffff !important;
  border-color: hsl(168 50% 45% / 0.5) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="theme-vtmart-admin"].dark .top--selling .grid--card:hover,
[data-theme="theme-vtmart-admin"].dark .rated--products a:hover {
  background: var(--vtmart-card) !important;
}

.top--selling .grid--card img,
.rated--products a img {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.5rem !important;
  object-fit: cover !important;
  border: 1px solid var(--vtmart-border, #e2e8f0) !important;
}

.top--selling .grid--card .cont h6,
.rated--products a .rated-media span {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--vtmart-foreground, #1e293b) !important;
  margin: 0 !important;
}

.top--selling .grid--card .cont span {
  font-size: 0.75rem !important;
  color: var(--vtmart-muted-foreground, #64748b) !important;
}

.badge-soft {
  background: hsl(168 50% 92%) !important;
  color: hsl(168 50% 25%) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 0.375rem !important;
}

[data-theme="theme-vtmart-admin"].dark .badge-soft {
  background: hsl(168 50% 20%) !important;
  color: hsl(168 50% 80%) !important;
}

/* ==========================================================================
   DARK THEME HIGH-CONTRAST DASHBOARD POLISH
   ========================================================================== */

[data-theme="theme-vtmart-admin"].dark {
  --vtmart-card: hsl(222 47% 11%) !important;
  --vtmart-background-2: hsl(217 33% 15%) !important;
  --vtmart-border: hsl(217 33% 25%) !important;
  --vtmart-foreground: hsl(210 40% 98%) !important;
  --vtmart-muted-foreground: hsl(215 20% 75%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .page-header-title,
[data-theme="theme-vtmart-admin"].dark body .card-title,
[data-theme="theme-vtmart-admin"].dark body .card-title span,
[data-theme="theme-vtmart-admin"].dark body .dashboard--card .title,
[data-theme="theme-vtmart-admin"].dark body .order--card .card-title,
[data-theme="theme-vtmart-admin"].dark body .recent--orders li a h6,
[data-theme="theme-vtmart-admin"].dark body .top--selling .grid--card .cont h6,
[data-theme="theme-vtmart-admin"].dark body .rated--products a .rated-media span,
[data-theme="theme-vtmart-admin"].dark body .position-relative.pie-chart .total--orders h3 {
  color: #f8fafc !important;
}

[data-theme="theme-vtmart-admin"].dark body .page-header-text,
[data-theme="theme-vtmart-admin"].dark body .dashboard--card .subtitle,
[data-theme="theme-vtmart-admin"].dark body .order--card .card-subtitle span,
[data-theme="theme-vtmart-admin"].dark body .recent--orders li a span.text-uppercase,
[data-theme="theme-vtmart-admin"].dark body .top--selling .grid--card .cont span,
[data-theme="theme-vtmart-admin"].dark body .position-relative.pie-chart .total--orders span {
  color: #94a3b8 !important;
}

[data-theme="theme-vtmart-admin"].dark body .card {
  background-color: hsl(222 47% 11%) !important;
  border-color: hsl(217 33% 23%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .dashboard--card,
[data-theme="theme-vtmart-admin"].dark body .order--card {
  background-color: hsl(222 47% 13%) !important;
  border-color: hsl(217 33% 25%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .dashboard--card:hover,
[data-theme="theme-vtmart-admin"].dark body .order--card:hover {
  background-color: hsl(222 47% 16%) !important;
  border-color: hsl(168 60% 45%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .dashboard--card .dashboard-icon {
  background-color: hsl(217 33% 20%) !important;
  border-color: hsl(217 33% 28%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .apex-legends > div {
  background-color: hsl(222 47% 14%) !important;
  border-color: hsl(217 33% 25%) !important;
  color: #e2e8f0 !important;
}

[data-theme="theme-vtmart-admin"].dark body .recent--orders li a:hover,
[data-theme="theme-vtmart-admin"].dark body .top--selling .grid--card,
[data-theme="theme-vtmart-admin"].dark body .rated--products a {
  background-color: hsl(222 47% 14%) !important;
  border-color: hsl(217 33% 25%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .top--selling .grid--card:hover,
[data-theme="theme-vtmart-admin"].dark body .rated--products a:hover {
  background-color: hsl(222 47% 18%) !important;
  border-color: hsl(168 60% 45%) !important;
}

[data-theme="theme-vtmart-admin"].dark body .custom-select.statistics-type-select {
  background-color: hsl(222 47% 14%) !important;
  border-color: hsl(217 33% 25%) !important;
  color: #f1f5f9 !important;
}

/* Page Header Title Tight Alignment */
.page-header-title {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.25rem !important;
  gap: 0.375rem !important;
}

.page-header-title svg.lucide,
.page-header-title [data-lucide],
.page-header-title i {
  margin: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}

.page-header-title > span,
.page-header-title > span:not(:first-child) {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ==========================================================================
   MODERN AUTH / LOGIN PAGE (SHADCN & PRELINE SaaS STYLE + CAROUSEL)
   ========================================================================== */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  background: radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 15% 85%, rgba(6, 78, 59, 0.25) 0%, transparent 50%),
              linear-gradient(135deg, #090e1a 0%, #0f172a 50%, #064e3b 100%) !important;
  overflow: hidden;
}

.auth-wrapper-left {
  flex: 1 1 58%;
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border-right: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-carousel-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
}

.auth-carousel-container .carousel,
.auth-carousel-container .carousel-inner,
.auth-carousel-container .carousel-item {
  height: 100%;
  width: 100%;
}

.auth-carousel-container .carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.6s ease-in-out !important;
}

.auth-carousel-container .carousel-fade .carousel-item.active {
  opacity: 1;
}

.auth-carousel-slide {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 0;
}

.auth-carousel-slide::after {
  display: none !important;
}

.auth-carousel-img {
  max-width: 95%;
  max-height: 86vh;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 1.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.auth-carousel-caption {
  display: none !important;
}

.auth-floating-logo-card {
  position: absolute;
  top: 2rem;
  left: 2.5rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.15rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
}

.auth-floating-logo-card img {
  height: 38px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* Modern Pill Indicators */
.carousel-indicators.auth-carousel-indicators {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 6px 14px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  list-style: none;
  justify-content: center;
  align-items: center;
}

.carousel-indicators.auth-carousel-indicators li {
  width: 8px !important;
  height: 8px !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  opacity: 0.7 !important;
}

.carousel-indicators.auth-carousel-indicators li.active {
  width: 24px !important;
  background-color: #10b981 !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8) !important;
}

/* Auth Carousel Navigation Buttons (< >) */
.auth-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0.85;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
}

.auth-carousel-control:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.auth-carousel-control.carousel-control-prev {
  left: 1.25rem;
}

.auth-carousel-control.carousel-control-next {
  right: 1.25rem;
}

.auth-carousel-control-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}

.auth-carousel-control:hover .auth-carousel-control-icon {
  background: #10b981;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  border-color: #10b981;
}

/* Right Auth Section (Premium Deep Midnight & Emerald Glass) */
.auth-wrapper-right {
  flex: 1 1 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 2.5rem 2rem;
  position: relative;
}

.auth-wrapper-right::before {
  display: none !important;
}

.auth-card-container {
  width: 100%;
  max-width: 460px;
  background: rgba(30, 41, 59, 0.8) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5) !important;
  border-radius: 1.5rem;
  padding: 2.25rem 2.25rem;
  position: relative;
  z-index: 5;
}

/* Role Switcher (Segmented Control Tabs) */
.auth-role-switcher {
  display: flex;
  background: rgba(15, 23, 42, 0.75);
  padding: 0.3rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-role-tab {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #94a3b8;
  border-radius: 0.55rem;
  text-decoration: none !important;
  transition: all 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.auth-role-tab:hover {
  color: #f1f5f9;
}

.auth-role-tab.active {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.auth-header .title {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem !important;
}

.auth-header .subtitle {
  font-size: 0.925rem;
  color: #cbd5e1 !important;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Modern Form Controls */
.auth-form-group {
  margin-bottom: 1.25rem;
}

.auth-form-group .input-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0 !important;
  margin-bottom: 0.4rem;
  display: block;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 0.95rem;
  color: #64748b;
  font-size: 1.15rem;
  pointer-events: none;
  z-index: 2;
  transition: color 150ms ease;
}

.auth-input-control {
  width: 100%;
  height: 2.85rem;
  padding: 0.6rem 1rem 0.6rem 2.75rem !important;
  font-size: 0.925rem;
  color: #f8fafc !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.625rem !important;
  transition: all 160ms ease;
}

.auth-input-control::placeholder {
  color: #64748b !important;
}

.auth-input-control:hover {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.auth-input-control:focus,
.auth-input-control:active {
  border-color: #10b981 !important;
  background-color: rgba(15, 23, 42, 0.9) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
  outline: none;
}

/* Override Browser (Chrome/Safari/Edge) Autofill white background */
.auth-input-control:-webkit-autofill,
.auth-input-control:-webkit-autofill:hover, 
.auth-input-control:-webkit-autofill:focus, 
.auth-input-control:-webkit-autofill:active,
.auth-captcha-input:-webkit-autofill,
.auth-captcha-input:-webkit-autofill:hover,
.auth-captcha-input:-webkit-autofill:focus,
.auth-captcha-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.auth-input-control:-webkit-autofill:focus,
.auth-captcha-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset, 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 0 0 1000px #0f172a inset, 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
}

.auth-input-wrapper:focus-within .auth-input-icon {
  color: #34d399 !important;
}

.auth-password-toggle {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  padding: 0.35rem;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: color 150ms ease;
}

.auth-password-toggle:hover {
  color: #f8fafc;
}

/* Centered Logo Badge in Form */
.auth-form-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.25);
  margin-bottom: 1.25rem;
  padding: 0.75rem;
}

.auth-form-brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-header.text-center {
  text-align: center !important;
}

.auth-header.text-center .title {
  text-align: center !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem !important;
}

.auth-header.text-center .subtitle {
  text-align: center !important;
  font-size: 0.925rem;
  color: #cbd5e1 !important;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Captcha Layout */
.auth-captcha-group {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}

.auth-captcha-input {
  flex: 1;
  height: 2.85rem;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.925rem;
  color: #f8fafc !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.625rem !important;
  transition: all 160ms ease;
}

.auth-captcha-input::placeholder {
  color: #64748b !important;
}

.auth-captcha-input:focus {
  border-color: #10b981 !important;
  background-color: rgba(15, 23, 42, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
  outline: none;
}

.auth-captcha-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.625rem;
  padding: 0.25rem 0.6rem;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 160ms ease;
}

.auth-captcha-img-box:hover {
  border-color: #10b981 !important;
  background-color: rgba(15, 23, 42, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.auth-captcha-img-box img,
.auth-captcha-img-box svg {
  height: 36px;
  max-width: 100px;
  border-radius: 0;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  display: block;
}

.auth-captcha-reload-btn {
  background: transparent;
  border: none;
  color: #34d399 !important;
  font-size: 1.25rem;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 250ms ease, color 150ms ease;
}

.auth-captcha-reload-btn:hover {
  color: #10b981 !important;
  transform: rotate(90deg);
}

/* Checkbox & Remember */
.auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #cbd5e1 !important;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.auth-checkbox-label input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.25rem;
  accent-color: #10b981;
  cursor: pointer;
}

/* Submit Button */
.auth-submit-btn {
  width: 100%;
  height: 3rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.625rem !important;
  font-size: 0.975rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.4) !important;
  transition: all 180ms ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
}

.auth-submit-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1px) !important;
}

.auth-submit-btn:active {
  transform: translateY(0) !important;
}

@media (max-width: 991.98px) {
  .auth-wrapper {
    flex-direction: column;
  }
  .auth-wrapper-left {
    min-height: 320px;
    flex: 0 0 auto;
  }
  .auth-carousel-caption {
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    padding: 1.25rem;
  }
  .auth-carousel-title {
    font-size: 1.35rem !important;
  }
  .auth-floating-logo-card {
    top: 1.25rem;
    left: 1.25rem;
  }
}

/* ==========================================================================
   POS Terminal Modern UI (Unified 8px / 12px Design System)
   ========================================================================== */
.order--pos-left .card,
.order--pos-right .card {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
}

.order--pos-left .card-header,
.order--pos-right .card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.875rem 1.25rem !important;
}

/* Product Cards */
.product-card {
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.product-card:hover {
  transform: translateY(-2px) !important;
  border-color: #10b981 !important;
  box-shadow: 0 8px 16px -4px rgba(16, 185, 129, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.product-card .card-header {
  background: #f8fafc !important;
  border-bottom: none !important;
}

.product-card .card-header img {
  border-radius: 10px 10px 0 0 !important;
  background-color: #f8fafc !important;
}

/* Cart Table Clean Styling */
.cart--table-scroll table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.cart--table-scroll table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-left: none !important;
  border-right: none !important;
  padding: 8px 10px !important;
}

.cart--table-scroll table tbody td {
  padding: 8px 10px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-left: none !important;
  border-right: none !important;
}

.product-title1 {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-transform: capitalize !important;
  margin-top: 4px;
  line-height: 1.35;
}

.product-price {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #059669 !important;
}

.hover-add-cart {
  background: rgba(6, 78, 59, 0.85) !important;
  backdrop-filter: blur(4px) !important;
}

.total-cart-count .count-product {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
}

/* Unified Form Controls (8px radius) */
#search-form .input-group-flush {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  transition: all 0.15s ease;
  overflow: hidden;
  height: 40px;
}

#search-form .input-group-flush:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

#search-form input#datatableSearch {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 8px 8px 0 !important;
  height: 38px;
  font-size: 0.875rem;
}

#search-form .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #64748b;
}

.order--pos-left .select2-container--default .select2-selection--single,
.order--pos-right .select2-container--default .select2-selection--single {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  height: 40px !important;
  transition: all 0.15s ease;
  background: #ffffff;
}

.order--pos-left .select2-container--default .select2-selection--single:focus,
.order--pos-left .select2-container--default.select2-container--open .select2-selection--single,
.order--pos-right .select2-container--default .select2-selection--single:focus,
.order--pos-right .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.order--pos-left .select2-container--default .select2-selection--single .select2-selection__rendered,
.order--pos-right .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 14px !important;
  font-size: 0.875rem;
  color: #334155;
}

.order--pos-left .select2-container--default .select2-selection--single .select2-selection__arrow,
.order--pos-right .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  right: 10px !important;
}

/* Order Type Tabs (8px radius) */
.pos-order-type-tabs .pos-type-tab {
  background: #f8fafc;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease;
  color: #64748b;
  padding: 8px 12px !important;
}

.pos-order-type-tabs .pos-type-tab:hover {
  border-color: #cbd5e1 !important;
}

.pos-order-type-tabs .pos-type-tab.active,
.pos-order-type-tabs .pos-type-tab:has(input:checked) {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #059669 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

/* Cart Panel Payment Buttons (8px radius) */
.pos--payment-options ul {
  gap: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pos--payment-options ul li {
  padding: 0 !important;
  list-style: none !important;
}

.pos--payment-options ul li label {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.pos--payment-options ul li label:hover {
  border-color: #10b981 !important;
}

.pos--payment-options ul li label span {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

.pos--payment-options ul li label input:checked ~ span,
.pos--payment-options ul li label input:checked + span {
  border: none !important;
  background: transparent !important;
  color: #059669 !important;
  font-weight: 700 !important;
}

.pos--payment-options ul li label:has(input:checked) {
  border-color: #10b981 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

.collect-cash-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
}

.order-place-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
  padding: 10px 16px !important;
  font-size: 0.95rem !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.order-place-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-1px) !important;
}

.cancel-order-button {
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modern POS Pagination (8px radius) */
.pos-pagination-wrapper .pagination {
  margin: 0 !important;
  gap: 4px !important;
  display: flex !important;
  align-items: center !important;
}

.pos-pagination-wrapper .page-item .page-link {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
}

.pos-pagination-wrapper .page-item .page-link:hover {
  border-color: #10b981 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
}

.pos-pagination-wrapper .page-item.active .page-link {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

.pos-pagination-wrapper .page-item.disabled .page-link {
  color: #cbd5e1 !important;
  border-color: #f1f5f9 !important;
  background: #f8fafc !important;
}

.custom-select-per-page {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer;
  outline: none;
}

.custom-select-per-page:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

/* Card Footer Pagination */
.card-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
}

.card-footer .page-item .page-link {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
}

.card-footer .page-item .page-link:hover {
  border-color: #10b981 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
}

.card-footer .page-item.active .page-link {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

.card-footer select[name="per_page"] {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  height: 34px !important;
  padding: 2px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Modern Segmented Navigation Tabs */
.pos-modern-tabs {
  gap: 8px !important;
  display: flex !important;
  border-bottom: none !important;
}

.pos-modern-tabs .nav-item {
  margin: 0 !important;
}

.pos-modern-tabs .nav-link {
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pos-modern-tabs .nav-link:hover {
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

.pos-modern-tabs .nav-link.active {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #059669 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}