/*
 * POS theme in the style of "SanPOS – Restaurant POS System" (dribbble.com/shots/19672872):
 * white surfaces on a light gray page, one bright green for actions and selection, Poppins type,
 * flat cards with thin borders and small radii, square category tiles, bold prices, a full-width
 * green charge button. (The public landing page keeps its own cream/forest design.)
 * The app has no source on this server, so this file re-themes the built app by overriding its
 * shadcn/Tailwind variables and a few class hooks. Loaded by a <link> in every exported HTML page.
 * Previous cream/forest theme: theme/panafrica.css (no longer linked).
 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  --sp-page: #F5F6FA;
  --sp-surface: #FFFFFF;
  --sp-ink: #1F2430;
  --sp-muted: #8A90A2;
  --sp-line: #ECEEF3;
  --sp-line-strong: #DDE1E8;
  --sp-green: #27B864;
  --sp-green-dark: #1E9A52;
  --sp-green-soft: #E8F7EE;
  --sp-red: #F04E4E;
  --sp-red-soft: #FFE5E7;
  --sp-blue: #2F6BFF;
  --sp-yellow: #F7B32B;
  --sp-purple: #8C5CF6;

  /* App brand variables */
  --brand-charcoal: var(--sp-ink);
  --brand-light-gray: var(--sp-green-soft);
  --brand-magenta: var(--sp-green);
  --brand-magenta-light: #4CCB82;

  /* shadcn semantic tokens */
  --background: var(--sp-page);
  --foreground: var(--sp-ink);
  --card: var(--sp-surface);
  --card-foreground: var(--sp-ink);
  --popover: var(--sp-surface);
  --popover-foreground: var(--sp-ink);
  --primary: var(--sp-green);
  --primary-foreground: #FFFFFF;
  --secondary: var(--sp-green-soft);
  --secondary-foreground: var(--sp-green-dark);
  --muted: #F1F3F7;
  --muted-foreground: var(--sp-muted);
  --accent: var(--sp-green-soft);
  --accent-foreground: var(--sp-ink);
  --destructive: var(--sp-red);
  --border: var(--sp-line);
  --input: var(--sp-line-strong);
  --ring: var(--sp-green);
  --radius: 0.5rem;

  --sidebar: var(--sp-surface);
  --sidebar-foreground: var(--sp-ink);
  --sidebar-primary: var(--sp-green);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: var(--sp-green-soft);
  --sidebar-accent-foreground: var(--sp-green-dark);
  --sidebar-border: var(--sp-line);
  --sidebar-ring: var(--sp-green);

  --chart-1: var(--sp-green);
  --chart-2: var(--sp-blue);
  --chart-3: var(--sp-yellow);
  --chart-4: var(--sp-purple);
  --chart-5: var(--sp-red);

  /* Tailwind palette used directly by some screens: cyan/teal/sky -> green; neutral tints -> cool gray */
  --color-cyan-50: #F0FAF4; --color-cyan-100: var(--sp-green-soft); --color-cyan-400: #4CCB82;
  --color-cyan-500: var(--sp-green); --color-cyan-600: var(--sp-green); --color-cyan-700: var(--sp-green-dark);
  --color-cyan-800: var(--sp-green-dark);
  --color-teal-500: var(--sp-green); --color-teal-600: var(--sp-green-dark);
  --color-sky-50: #F0FAF4; --color-sky-100: var(--sp-green-soft); --color-sky-300: #8EDDB0; --color-sky-400: #4CCB82;
  --color-sky-700: var(--sp-green-dark); --color-sky-800: var(--sp-green-dark); --color-sky-900: #17713D;
  --color-pink-500: var(--sp-red); --color-pink-600: #D93B3B;
  --color-rose-50: #FFF1F2; --color-rose-100: var(--sp-red-soft);
  --color-slate-50: #F7F8FB; --color-gray-50: #F7F8FB; --color-slate-100: #F1F3F7; --color-gray-100: #F1F3F7;

  --font-geist-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-geist-mono: "JetBrains Mono", ui-monospace, monospace;
  --default-font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

:root.dark, .dark {
  --brand-charcoal: #EEF1F6;
  --brand-light-gray: #1B2A22;
  --brand-magenta: #3DD27E;
  --brand-magenta-light: #5FE09A;
  --background: #111318;
  --foreground: #EEF1F6;
  --card: #191C23;
  --card-foreground: #EEF1F6;
  --popover: #191C23;
  --popover-foreground: #EEF1F6;
  --primary: #3DD27E;
  --primary-foreground: #0B1A12;
  --secondary: #1B2A22;
  --secondary-foreground: #CFF3DD;
  --muted: #20242C;
  --muted-foreground: #9AA1B2;
  --accent: #1B2A22;
  --accent-foreground: #EEF1F6;
  --border: #272B34;
  --input: #2E333D;
  --sidebar: #15181E;
  --sidebar-foreground: #E3E7EE;
  --sidebar-accent: #1B2A22;
  --sidebar-accent-foreground: #CFF3DD;
  --sidebar-border: #232730;
}

/* ---- Base type: Poppins everywhere, headings semibold (no serif) ---- */
html body {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3 { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; }
body h1 { font-weight: 700; color: var(--foreground); }

/* ---- Flat surfaces: thin borders, no heavy shadows ---- */
body .bg-card, body [data-slot="card"] {
  border-color: var(--sp-line) !important;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.04);
}
body .shadow-lg, body .shadow-md, body .shadow-xl { box-shadow: 0 2px 10px rgba(31, 36, 48, 0.06) !important; }
body thead, body thead tr { background-color: #F7F8FB; }
.dark body thead, .dark body thead tr { background-color: #1D2129; }
body tbody tr:hover { background-color: #F7FBF9; }

/* Buttons and inputs */
body button.bg-primary, body a.bg-primary { box-shadow: none; }
body button.bg-primary:hover, body a.bg-primary:hover { background-color: var(--sp-green-dark); }
body input, body select, body textarea { border-color: var(--sp-line-strong); }
body input:focus-visible, body textarea:focus-visible {
  border-color: var(--sp-green);
  box-shadow: 0 0 0 3px rgba(39, 184, 100, 0.18);
}

/* Sidebar + top bar: white, active item solid green */
body .w-64.bg-white, body header.bg-white { background-color: var(--sp-surface) !important; }
.dark body .w-64.bg-white, .dark body header.bg-white { background-color: var(--card) !important; }
body nav button.bg-primary, body nav a.bg-primary { border-radius: 8px; }

/* ---- Cashier screen (?module=sales) ---- */
/* Category bar: square-ish tiles; selected tile solid green (SanPOS "All Menu" tile) */
body .no-scrollbar > button.rounded-full {
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  color: var(--sp-ink);
  box-shadow: none;
  font-weight: 600;
}
body .no-scrollbar > button.rounded-full.bg-primary {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -8px rgba(39, 184, 100, 0.7) !important;
}
/* Product cards: flat white, thin border, green outline on hover, big bold price */
body .grid > .relative.rounded-xl.cursor-pointer {
  border-radius: 10px;
  border-color: var(--sp-line) !important;
  box-shadow: none;
}
body .grid > .relative.rounded-xl.cursor-pointer:hover {
  border-color: var(--sp-green) !important;
  box-shadow: 0 8px 20px -12px rgba(31, 36, 48, 0.25) !important;
}
body .grid > .relative.rounded-xl.cursor-pointer .font-black.text-gray-900 { font-size: 1.05rem; font-weight: 700; }
/* Order panel */
body .lg\:flex.w-80.bg-white.border-l { border-left-color: var(--sp-line) !important; box-shadow: none !important; }
body h2.text-xl.font-black { font-weight: 700; }
/* Charge / Pay: bright green */
body button.h-12.rounded-xl.bg-primary, body button.h-11.rounded-xl.bg-primary {
  border-radius: 10px;
  background: var(--sp-green);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 20px -12px rgba(39, 184, 100, 0.9) !important;
}
body button.h-12.rounded-xl.bg-primary:hover, body button.h-11.rounded-xl.bg-primary:hover { background: var(--sp-green-dark); }

/* ---- Hard-coded colors in the built app (old magenta/cyan brand) ---- */
body .bg-\[\#e30174\], body .bg-\[\#e60067\], body .bg-\[\#0e7490\] { background-color: var(--sp-green) !important; }
body .bg-\[\#e30174\]:hover, body .bg-\[\#e60067\]:hover { background-color: var(--sp-green-dark) !important; }
body .bg-\[\#0e7490\]\/5, body .bg-\[\#E70078\]\/10 { background-color: rgba(39, 184, 100, 0.08) !important; }
body .bg-\[\#fff8fa\], body .bg-\[\#fff7fb\], body .bg-\[\#F9F9F9\], body .bg-\[\#f8fafc\], body .bg-\[\#F2F2F2\] { background-color: var(--sp-page) !important; }
body .bg-\[\#1C2434\] { background-color: var(--sp-ink) !important; }
body .text-\[\#0e7490\], body .text-\[\#E70078\] { color: var(--sp-green-dark) !important; }
body .text-\[\#1C2434\], body .text-\[\#231f20\] { color: var(--sp-ink) !important; }
body .text-\[\#e30174\]\/5 { color: rgba(39, 184, 100, 0.06) !important; }
body .border-\[\#0e7490\], body .border-\[\#e60067\] { border-color: var(--sp-green) !important; }
body .border-\[\#0e7490\]\/20, body .border-\[\#E70078\]\/20 { border-color: rgba(39, 184, 100, 0.25) !important; }
body .border-l-\[\#E70078\] { border-left-color: var(--sp-green) !important; }
body .shadow-\[\#e30174\]\/20, body .shadow-\[\#e60067\]\/20 { --tw-shadow-color: rgba(39, 184, 100, 0.3) !important; }
body .from-\[\#E70078\] { --tw-gradient-from: var(--sp-green) !important; }
body .to-\[\#F00A56\] { --tw-gradient-to: #4CCB82 !important; }
body .from-teal-500, body .from-teal-600 { --tw-gradient-from: #4CCB82 !important; }
body .to-cyan-800 { --tw-gradient-to: var(--sp-green-dark) !important; }
body .to-cyan-400 { --tw-gradient-to: #8EDDB0 !important; }
body .bg-gradient-to-l.from-white { --tw-gradient-from: var(--sp-page) !important; }

/* ---- Charts (colors set inline by the chart library) ---- */
body [fill="#2563eb"], body [fill="#6366f1"], body [fill="#3182bd"] { fill: #27B864; }
body [fill="#3b82f6"], body [fill="#8b5cf6"] { fill: #2F6BFF; }
body [fill="#60a5fa"], body [fill="#06b6d4"] { fill: #F7B32B; }
body [fill="#d946ef"], body [fill="#ec4899"] { fill: #8C5CF6; }
body [stroke="#6366f1"], body [stroke="#3182bd"], body [stroke="#e30174"], body [stroke="#E70078"] { stroke: #27B864; }
body stop[stop-color="#6366f1"], body stop[stop-color="#8b5cf6"], body stop[stop-color="#e30174"], body stop[stop-color="#E70078"] { stop-color: #27B864; }

/* Scrollbars */
* { scrollbar-color: #CDD2DB transparent; }

/* Dashboard revenue trend (magenta hsl(333,100%,45%) set inline) -> green */
body [stroke="hsl(333, 100%, 45%)"] { stroke: #27B864; }
body [fill="hsl(333, 100%, 45%)"] { fill: #27B864; }
body stop[stop-color="hsl(333, 100%, 45%)"] { stop-color: #27B864; }
body [style*="--color-revenue"] { --color-revenue: #27B864 !important; }
body [style*="background-color: hsl(333"], body [style*="background: hsl(333"] { background-color: #27B864 !important; }

/* =====================================================================================
 * Layout & density (SanPOS-like compact UI)
 * The app sizes text AND spacing in rem, so a 14px root makes the whole UI ~12% denser
 * while keeping proportions. Tiny text is floored so it stays readable.
 * ===================================================================================== */
html { font-size: 14px; }
body .text-xs { font-size: 0.8rem; line-height: 1.1rem; }       /* ~11.2px */
body .text-sm { font-size: 0.9rem; line-height: 1.3rem; }       /* ~12.6px */
body .text-base { font-size: 0.97rem; }
body h1.text-3xl, body h1.text-4xl { font-size: 1.6rem; line-height: 2rem; }
body h2.text-2xl, body h1.text-2xl { font-size: 1.35rem; line-height: 1.8rem; }

/* Page content: use the width, trim the big outer paddings */
body main > div.p-8, body main > div.p-6, body main > .p-8, body main > .p-6 { padding: 1.25rem 1.5rem !important; }
body main .max-w-7xl, body main .max-w-6xl { max-width: 100%; }
body main .space-y-8 > :not(:last-child) { margin-bottom: 1.25rem; }
body main .space-y-6 > :not(:last-child) { margin-bottom: 1rem; }
body main .gap-8 { gap: 1.25rem; }
body main .gap-6 { gap: 1rem; }

/* Cards */
body [data-slot="card"] { gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
body [data-slot="card-header"], body [data-slot="card-content"], body [data-slot="card-footer"] { padding-left: 1.1rem; padding-right: 1.1rem; }
body [data-slot="card-title"] { font-size: 0.98rem; font-weight: 600; }
body [data-slot="card-description"] { font-size: 0.85rem; }

/* Tables: compact rows, small uppercase headers */
body table th {
  height: 2.4rem; padding-top: 0.45rem; padding-bottom: 0.45rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sp-muted);
}
body table td { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 0.88rem; }

/* Buttons and inputs: SanPOS heights */
body [data-slot="button"] { font-size: 0.88rem; }
body input[data-slot="input"], body [data-slot="select-trigger"] { height: 2.35rem; font-size: 0.88rem; }

/* Top bar */
body header.h-16 { height: 3.6rem; padding-left: 1.25rem; padding-right: 1.25rem; }
body header h1, body header h2, body header .text-xl, body header .text-lg { font-size: 1.05rem !important; font-weight: 600; }

/* ---- Side menu: compact items, section headings, new order ---- */
body .w-64 { width: 15rem; }
body nav.p-4 { padding: 0.75rem 0.65rem; }
body nav [data-nav-list] { display: flex; flex-direction: column; gap: 2px; }
body nav [data-nav-list] > * { margin: 0 !important; }
body nav [data-nav-list] button.px-4.py-3 {
  padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 0.9rem; gap: 0.7rem;
}
body nav [data-nav-list] button.px-4.py-3 .font-medium { font-weight: 500; }
body nav [data-nav-list] button.px-4.py-3 svg { width: 1.05rem; height: 1.05rem; }
body nav [data-nav-list] button.text-foreground:hover { background: #F3F5F8; }
body nav [data-nav-list] .mt-1 button { padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.86rem; }

/* order: POS first, then Inventory, Invoicing, Purchase, Sales Orders, Pricing; rest grouped after */
body [data-nav-key] { order: 20; }
body [data-nav-key="regional-pos"], body [data-nav-key="pos"] { order: 1; }
body [data-nav-key="inventory"]    { order: 2; }
body [data-nav-key="invoicing"]    { order: 3; }
body [data-nav-key="purchase"]     { order: 4; }
body [data-nav-key="sales-orders"] { order: 5; }
body [data-nav-key="pricing"]      { order: 6; }
body [data-nav-key="kitchen"]      { order: 7; }
body [data-nav-key="dashboard"], body [data-nav-key="system-dashboard"] { order: 10; }
body [data-nav-key="reports"]      { order: 11; }
body [data-nav-key="lookup"]       { order: 30; }
body [data-nav-key="audit-log"]    { order: 31; }
body [data-nav-key="new-organization"] { order: 32; }
body [data-nav-key="configuration"] { order: 33; }

/* section headings (only when the sidebar is expanded) */
body .w-64 nav [data-nav-key="regional-pos"]::before,
body .w-64 nav [data-nav-key="dashboard"]::before,
body .w-64 nav [data-nav-key="system-dashboard"]::before,
body .w-64 nav [data-nav-key="lookup"]::before {
  display: block; padding: 0.9rem 0.8rem 0.35rem; pointer-events: none;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #A3A9B8;
}
body .w-64 nav [data-nav-key="regional-pos"]::before { content: "Operations"; padding-top: 0.2rem; }
body .w-64 nav [data-nav-key="dashboard"]::before,
body .w-64 nav [data-nav-key="system-dashboard"]::before { content: "Overview"; }
body .w-64 nav [data-nav-key="lookup"]::before { content: "System"; }
/* a heading on a <button> item must not sit inside the button's flex row */
body .w-64 nav button[data-nav-key]::before { position: absolute; left: 0; top: -1.7rem; width: 100%; text-align: left; }
body .w-64 nav button[data-nav-key="regional-pos"], body .w-64 nav button[data-nav-key="dashboard"],
body .w-64 nav button[data-nav-key="system-dashboard"], body .w-64 nav button[data-nav-key="lookup"] {
  position: relative; margin-top: 1.75rem !important;
}
body .w-64 nav button[data-nav-key="regional-pos"] { margin-top: 1.35rem !important; }
body .w-64 nav button[data-nav-key="regional-pos"]::before { top: -1.45rem; }

/* Cashier screen fills the space under the top bar (it used h-screen, which pushed the
   Charge row below the bottom edge by the height of the top bar). */
body main .overflow-auto > .flex-1.min-w-0 > .h-screen.flex.flex-col.overflow-hidden { height: calc(100dvh - 3.6rem); }
/* Cashier: tighter category bar and product grid */
body .no-scrollbar.py-3 { padding-top: 0.6rem; padding-bottom: 0.6rem; }
body .grid.grid-cols-2.gap-3 { gap: 0.65rem; }
/* Collapsed (icon-only) sidebar: compact square icon buttons */
body nav [data-nav-list] button.justify-center.px-4.py-3 { padding: 0.6rem; }

/* Toolbars (filters + action buttons) wrap instead of running off the right edge */
body main div.flex:has(> [class*="ml-auto"]) { flex-wrap: wrap; row-gap: 0.6rem; }
body main div.flex:has(> [class*="ml-auto"]) > .grid.flex-1 { min-width: min(100%, 30rem); }
/* Order panel a little wider so "Charge 1000.00 ETB" fits beside Clear / Kitchen */
@media (min-width: 1280px) { body .lg\:flex.w-80.xl\:w-96 { width: 26rem; } }
/* Filter grids whose last cell holds the action buttons (Inventory, Organizations, ...) */
body main .grid:has(> [class*="xl:ml-auto"]) { display: flex; flex-wrap: wrap; gap: 0.6rem; }
body main .grid:has(> [class*="xl:ml-auto"]) > * { flex: 1 1 10rem; }
body main .grid:has(> [class*="xl:ml-auto"]) > [class*="xl:ml-auto"] { flex: 0 0 auto; margin-left: auto; }
body main div.flex.xl\:flex-row:has(> .grid.flex-1) { flex-wrap: wrap; row-gap: 0.6rem; column-gap: 1rem; }

/* Wide stat rows (e.g. Purchase: 7 cards) wrap into readable cards instead of truncating labels */
@media (min-width: 1280px) {
  body main .grid.xl\:grid-cols-7, body main .grid.xl\:grid-cols-6 { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
}
/* Pages rendered without inner padding (System Admin overview) */
body main .p-0.space-y-8 { padding: 1.25rem 1.5rem !important; }

/* =====================================================================================
 * Cashier: SanPOS category tiles (image + name + "N items"), menu-ordered categories,
 * livelier product cards.
 * ===================================================================================== */
body .no-scrollbar { gap: 0.6rem; padding-bottom: 0.75rem !important; }
body .no-scrollbar > button[data-cat] {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-width: 7.6rem; height: auto; padding: 0.6rem 0.75rem 0.55rem; gap: 0.15rem;
  border-radius: 12px; text-align: left; line-height: 1.2; font-size: 0.86rem;
}
body .no-scrollbar > button[data-cat]::before {
  content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-bottom: 0.35rem; border-radius: 10px;
  background: var(--sp-green-soft) var(--cat-img, none) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(31, 36, 48, 0.06);
}
body .no-scrollbar > button[data-cat].bg-primary::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
body .no-scrollbar > button[data-cat] > span {
  margin: 0; padding: 0; background: transparent !important; border-radius: 0;
  font-size: 0.72rem; font-weight: 500; color: var(--sp-muted);
}
body .no-scrollbar > button[data-cat].bg-primary > span { color: rgba(255, 255, 255, 0.85); }
body .no-scrollbar > button[data-cat] > span::after { content: " items"; }
body .no-scrollbar > button[data-cat]:not(.bg-primary):hover { border-color: var(--sp-green); color: var(--sp-ink); }

/* menu order for the cafe categories (others keep their place after them) */
body .no-scrollbar > button[data-cat] { order: 50; }
body .no-scrollbar > button[data-cat="coffee"]      { order: 1; }
body .no-scrollbar > button[data-cat="tea"]         { order: 2; }
body .no-scrollbar > button[data-cat="fresh-juice"] { order: 3; }
body .no-scrollbar > button[data-cat="breakfast"]   { order: 4; }
body .no-scrollbar > button[data-cat="main-dishes"] { order: 5; }
body .no-scrollbar > button[data-cat="bakery"]      { order: 6; }
body .no-scrollbar > button[data-cat="soft-drinks"] { order: 7; }

/* Product cards: a little lift on hover, image fills the top, rounder add button */
body .grid > .relative.rounded-xl.cursor-pointer { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
body .grid > .relative.rounded-xl.cursor-pointer:hover { transform: translateY(-2px); }
body .grid > .relative.rounded-xl.cursor-pointer img { object-fit: cover; }
body .grid > .relative.rounded-xl.cursor-pointer button.rounded-full { box-shadow: 0 6px 14px -6px rgba(39, 184, 100, 0.8); }

/* =====================================================================================
 * Dashboard: dark "control room" look. pos-fix.js puts .dark + data-pos-view="dashboard"
 * on <html> only while the Dashboard screen is open.
 * ===================================================================================== */
html[data-pos-view="dashboard"] {
  --dk-page: #0D0F13;
  --dk-panel: #15181E;
  --dk-panel-2: #1A1E26;
  --dk-line: #242933;
  --dk-ink: #ECEFF4;
  --dk-muted: #8B93A5;
  --dk-green: #3DD27E;
  --dk-lime: #B8F040;
  --dk-glow: rgba(61, 210, 126, 0.55);

  --background: var(--dk-page);
  --card: var(--dk-panel);
  --popover: var(--dk-panel-2);
  --border: var(--dk-line);
  --sidebar: #101217;
  --sidebar-border: var(--dk-line);
  --primary: var(--dk-green);
  --primary-foreground: #06140C;
  --muted-foreground: var(--dk-muted);
  --sp-line: var(--dk-line);
  --sp-ink: var(--dk-ink);
  --sp-muted: var(--dk-muted);
  --sp-surface: var(--dk-panel);
  --sp-page: var(--dk-page);
  color-scheme: dark;
  scrollbar-color: #2C323D transparent;
}
html[data-pos-view="dashboard"] * { scrollbar-color: #2C323D transparent; }
html[data-pos-view="dashboard"] body { background: var(--dk-page); }

/* Shell: sidebar + top bar */
html[data-pos-view="dashboard"] body .w-64.bg-white, html[data-pos-view="dashboard"] body .bg-white.border-r,
html[data-pos-view="dashboard"] body header.bg-white { background-color: #101217 !important; border-color: var(--dk-line) !important; }
html[data-pos-view="dashboard"] body header.bg-white { background-color: rgba(13, 15, 19, 0.85) !important; backdrop-filter: blur(10px); }
html[data-pos-view="dashboard"] body nav [data-nav-list] button.text-foreground:hover { background: #1A1E26; }
html[data-pos-view="dashboard"] body nav button.bg-primary {
  background: linear-gradient(90deg, rgba(61, 210, 126, 0.22), rgba(61, 210, 126, 0.06)) !important;
  color: var(--dk-green) !important; box-shadow: inset 3px 0 0 var(--dk-green);
}
html[data-pos-view="dashboard"] body .w-64 nav [data-nav-key]::before { color: #5B6374; }
html[data-pos-view="dashboard"] body .text-gray-900, html[data-pos-view="dashboard"] body .text-black,
html[data-pos-view="dashboard"] body .text-\[\#1C2434\], html[data-pos-view="dashboard"] body .text-\[\#231f20\] { color: var(--dk-ink) !important; }
html[data-pos-view="dashboard"] body .text-gray-500, html[data-pos-view="dashboard"] body .text-gray-600,
html[data-pos-view="dashboard"] body .text-gray-400 { color: var(--dk-muted) !important; }
html[data-pos-view="dashboard"] body header h2.text-primary { color: var(--dk-ink) !important; letter-spacing: 0.02em; }

/* Page backdrop: faint grid + a green glow at the top */
html[data-pos-view="dashboard"] body main > .flex-1.overflow-auto {
  background:
    radial-gradient(60rem 22rem at 30% -6rem, rgba(61, 210, 126, 0.10), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 2.5rem 100%,
    var(--dk-page);
}

/* Panels: solid charcoal, hairline border, lit top edge */
html[data-pos-view="dashboard"] body main [data-slot="card"],
html[data-pos-view="dashboard"] body main .rounded-xl.border.bg-card\/40,
html[data-pos-view="dashboard"] body main .rounded-xl.border.bg-card\/50 {
  background: linear-gradient(180deg, var(--dk-panel-2), var(--dk-panel)) !important;
  border: 1px solid var(--dk-line) !important;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: none;
}
html[data-pos-view="dashboard"] body main [data-slot="card-title"],
html[data-pos-view="dashboard"] body main .text-xl.font-bold, html[data-pos-view="dashboard"] body main .text-lg.font-bold { color: var(--dk-ink); }

/* Period switch: dark pill, active segment green */
html[data-pos-view="dashboard"] body main [role="tablist"] { background: var(--dk-panel) !important; border-color: var(--dk-line) !important; }
html[data-pos-view="dashboard"] body main [role="tablist"] button { color: var(--dk-muted); }
html[data-pos-view="dashboard"] body main [role="tablist"] button[data-state="active"] {
  background: var(--dk-green) !important; color: #06140C !important; border-color: transparent !important;
  box-shadow: 0 0 18px -4px var(--dk-glow);
}

/* Stat cards (top row): monospace figures, coloured top rule, glowing first card */
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer > div {
  position: relative; border-radius: 14px;
}
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer > div::after {
  content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: 2px; border-radius: 2px;
  background: var(--card-accent, var(--dk-green)); opacity: 0.85; box-shadow: 0 0 12px var(--card-accent, var(--dk-green));
}
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer:nth-child(1) { --card-accent: var(--dk-green); }
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer:nth-child(2) { --card-accent: #4C8DFF; }
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer:nth-child(3) { --card-accent: #A77BFF; }
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer:nth-child(4) { --card-accent: #FFB547; }
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer:nth-child(1) > div {
  border-color: rgba(61, 210, 126, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(61, 210, 126, 0.15), 0 0 36px -14px var(--dk-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 .text-2xl,
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 .text-3xl {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; letter-spacing: -0.02em; color: var(--dk-ink);
}
/* the card's own sparkline bars along the bottom edge: taller, tinted with the card accent */
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 .absolute.bottom-0.h-1 { height: 2.2rem; opacity: 0.35 !important; }
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 .absolute.bottom-0.h-1 > div {
  background: var(--card-accent, var(--dk-green)) !important; border-radius: 2px 2px 0 0; margin: 0 1px;
}
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 .blur-3xl { background: var(--card-accent, var(--dk-green)); opacity: 0.12; }

/* Revenue chart: glowing line, dim grid and axis text */
html[data-pos-view="dashboard"] body main .recharts-area-curve,
html[data-pos-view="dashboard"] body main .recharts-line-curve {
  stroke: var(--dk-green) !important; stroke-width: 2.5px;
  filter: drop-shadow(0 0 6px var(--dk-glow)) drop-shadow(0 0 14px rgba(61, 210, 126, 0.35));
}
html[data-pos-view="dashboard"] body main stop { stop-color: var(--dk-green) !important; }
html[data-pos-view="dashboard"] body main .recharts-cartesian-grid line { stroke: #222731 !important; }
html[data-pos-view="dashboard"] body main .recharts-cartesian-axis-tick text,
html[data-pos-view="dashboard"] body main .recharts-text { fill: #6F788B !important; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; }
html[data-pos-view="dashboard"] body main .recharts-active-dot circle { fill: var(--dk-lime); stroke: var(--dk-page); }
html[data-pos-view="dashboard"] body main .recharts-tooltip-wrapper > div,
html[data-pos-view="dashboard"] body main .recharts-tooltip-wrapper .bg-background {
  background: var(--dk-panel-2) !important; border-color: var(--dk-line) !important; color: var(--dk-ink);
}
html[data-pos-view="dashboard"] body [style*="--color-revenue"] { --color-revenue: var(--dk-green) !important; }

/* Top performing: green-to-lime progress bars with a glow */
html[data-pos-view="dashboard"] body main .relative.space-y-2.group .rounded-full.bg-primary,
html[data-pos-view="dashboard"] body main .relative.space-y-2.group [class*="bg-[#"],
html[data-pos-view="dashboard"] body main .relative.space-y-2.group .h-full.rounded-full {
  background: linear-gradient(90deg, var(--dk-green), var(--dk-lime)) !important; box-shadow: 0 0 10px -2px var(--dk-glow);
}
html[data-pos-view="dashboard"] body main .relative.space-y-2.group .bg-secondary,
html[data-pos-view="dashboard"] body main .relative.space-y-2.group .bg-gray-100 { background: #20252E !important; }

/* Lists in the lower panels */
html[data-pos-view="dashboard"] body main .divide-y > * { border-color: var(--dk-line) !important; }
html[data-pos-view="dashboard"] body main .divide-y > *:hover { background: rgba(255, 255, 255, 0.025); }
html[data-pos-view="dashboard"] body main button[data-slot="button"].border,
html[data-pos-view="dashboard"] body main [data-slot="card-header"] button {
  background: transparent !important; border: 1px solid var(--dk-line) !important; color: var(--dk-ink) !important;
}
html[data-pos-view="dashboard"] body main [data-slot="card-header"] button:hover { border-color: var(--dk-green) !important; color: var(--dk-green) !important; }
html[data-pos-view="dashboard"] body main .bg-white, html[data-pos-view="dashboard"] body main .bg-gray-50,
html[data-pos-view="dashboard"] body main .bg-slate-50 { background-color: var(--dk-panel-2) !important; }
/* room for the sparkline under the figures; legend dot + rank badges in theme colours */
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 > .cursor-pointer > div { padding-bottom: 2.6rem; }
html[data-pos-view="dashboard"] body main .grid.lg\:grid-cols-4 .absolute.bottom-0.h-1 { height: 1.6rem; opacity: 0.3 !important; }
html[data-pos-view="dashboard"] body main [style*="background-color: rgb(230, 0, 103)"] { background-color: var(--dk-green) !important; box-shadow: 0 0 8px var(--dk-glow); }
html[data-pos-view="dashboard"] body main .relative.space-y-2.group .absolute.-top-1.-left-1 {
  background: var(--dk-page) !important; border-color: var(--dk-green) !important; color: var(--dk-green);
}
html[data-pos-view="dashboard"] body main .relative.space-y-2.group [data-slot="avatar"] { border-color: var(--dk-line) !important; }
html[data-pos-view="dashboard"] body main .relative.space-y-2.group .h-1\.5.bg-secondary\/50 { background: #20252E !important; }