/* 
======================================================
  BACKEND CUSTOM CSS - VERCEL / STRIPE LEVEL REDESIGN
======================================================
*/

:root {
  /* Vercel-like Light Theme */
  /* 2026-09-11: dark mode retired sitewide on the backend, per explicit
     request - no toggle, no forced-dark sidebar, no forced-dark mobile
     login screen. One single, standard light theme everywhere, on every
     device. --bg-sidebar/--text-sidebar* now just describe a slightly
     lighter-than-main-content sidebar surface, not a dark accent. */
  --bg-main: #fafafa;
  --bg-sidebar: #ffffff;
  --surface-card: #ffffff;
  --surface-hover: #f3f4f6;
  --border-color: #eaeaea;

  --text-main: #111827;
  --text-muted: #6b7280;
  --text-sidebar: #4b5563;
  --text-sidebar-active: #ffffff;

  --primary: #10b981;
  --primary-hover: #059669;

  /* 2026 brand alignment - same tokens as the customer-facing site, so the
     backend reads as the same product instead of a bolted-on admin theme. */
  --accent: #f97316;
  --accent-hover: #ea580c;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* Semantic status colors - used by the stat-card/badge treatment below,
     kept distinct from --primary/--accent so a real status (success/
     warning/danger) never gets confused with the brand accent. */
  --status-success: #10b981;
  --status-success-bg: rgba(16, 185, 129, 0.12);
  --status-warning: #f59e0b;
  --status-warning-bg: rgba(245, 158, 11, 0.12);
  --status-danger: #ef4444;
  --status-danger-bg: rgba(239, 68, 68, 0.12);
  --status-info: #3b82f6;
  --status-info-bg: rgba(59, 130, 246, 0.12);
}

/* ============================================================
   REAL DARK MODE (2026-09-18) - a from-scratch second attempt.
   The 2026-09-11 pass above removed dark mode entirely after finding
   THREE separate hardcoded dark backgrounds fighting each other across
   admin_tpl.php's inline <style>, this file's own dead ul.uk-nav rule,
   and admin.css's .left_panel - plus a transform bug that made the
   mobile offcanvas render completely blank. None of that was a reason
   dark mode can't work; it was three unconditional hardcoded colors
   with no toggle behind any of them. This time: every color used
   anywhere in this file already reads from a var(--token) (true since
   the 2026-09-11 pass), so defining those same tokens under
   [data-theme="dark"] re-themes the whole backend with zero component-
   level changes below. Guarded exactly like the customer-facing site
   (front_header.php) so an explicit light/dark choice always wins over
   the OS default, and default (no choice made) stays light - nobody
   gets dark mode forced on them by their OS setting alone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-main: #0f172a;
    --bg-sidebar: #0b1120;
    --surface-card: #1e293b;
    --surface-hover: #273449;
    --border-color: #334155;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-sidebar: #cbd5e1;
    --text-sidebar-active: #ffffff;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"] {
  --bg-main: #0f172a;
  --bg-sidebar: #0b1120;
  --surface-card: #1e293b;
  --surface-hover: #273449;
  --border-color: #334155;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-sidebar: #cbd5e1;
  --text-sidebar-active: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
}

/* Theme toggle button (header, next to the mobile-nav hamburger) */
.theme-toggle-btn {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--radius-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-right: 10px !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}
.theme-toggle-btn:hover {
  background: var(--surface-hover) !important;
  transform: translateY(-1px);
}
.theme-toggle-btn i { font-size: 15px; }

/* A few widgets/plugins render their own chrome outside anything this
   file already themes via var() - vendor CSS with literal hex values
   (select2, chosen, DataTables default wrapper, jqplot). Re-pointing
   just their backgrounds/text/borders at the same tokens keeps them
   from being the one stale-white/black box left behind when the rest
   of the page switches theme. */
:root[data-theme="dark"] .chosen-container-single .chosen-single,
:root[data-theme="dark"] .chosen-container .chosen-drop,
:root[data-theme="dark"] .chosen-results li.highlighted,
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .select2-results__option--highlighted {
  background-color: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .chosen-results li {
  color: var(--text-main) !important;
}
:root[data-theme="dark"] .dataTables_wrapper,
:root[data-theme="dark"] .dataTables_length,
:root[data-theme="dark"] .dataTables_filter,
:root[data-theme="dark"] .dataTables_info,
:root[data-theme="dark"] .dataTables_paginate {
  color: var(--text-main) !important;
}
:root[data-theme="dark"] .dataTables_wrapper select,
:root[data-theme="dark"] .dataTables_wrapper input {
  background-color: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}
/* Real bug fixed live 2026-09-18: DataTables' own search box renders
   plain type="text", not type="search" as assumed above - the original
   selector never matched, confirmed via a real screenshot (stark white
   input on an otherwise-dark page). Broadened to any input inside the
   wrapper.
   Second real bug found the same way: UIKit's own uikit.almost-flat.css
   sets a more specific .uk-table-striped tbody tr:nth-of-type(odd) td
   background (a hardcoded light grey) that wins over this file's plain
   .uk-table rule below it - every other stripe/empty-state row stayed
   white in dark mode. Matched with equal-or-greater specificity here. */
:root[data-theme="dark"] .uk-table td,
:root[data-theme="dark"] .uk-table-striped tbody tr:nth-of-type(odd) td,
:root[data-theme="dark"] .uk-table tr.odd td,
:root[data-theme="dark"] .uk-table tr.even td,
:root[data-theme="dark"] td.dataTables_empty {
  background-color: var(--surface-card) !important;
  color: var(--text-main) !important;
}
:root[data-theme="dark"] .uk-table tr:hover td {
  background-color: var(--surface-hover) !important;
}
/* Real bug found live 2026-09-27 on a real phone: the .uk-table td rule
   above sets color: var(--text-main) !important (a light color, correct
   for the dark cell background) - but that color INHERITS into any real
   form input nested inside the cell (editable table rows - e.g. the
   per-store override table on /admin/PricingRules), and those inputs
   keep their own plain white background. Light text on a white input is
   the exact "text bleeding into the background" bug - confirmed on a
   real device, numbers like "15"/"21" were nearly unreadable. Inputs
   inside a dark-mode table cell need their OWN normal dark text color,
   independent of the cell's own (correctly light) text color.*/
:root[data-theme="dark"] .uk-table td input,
:root[data-theme="dark"] .uk-table td select,
:root[data-theme="dark"] .uk-table td textarea {
  color: #1e293b !important;
}
/* Real bug found live 2026-09-18: same UIKit hardcoded-stripe pattern as
   .uk-table-striped above, but on the separate .uk-list-striped
   component (checkbox lists throughout every add/edit form - category
   checkboxes, strain reference checkboxes, etc.) - confirmed via a real
   screenshot showing every other row a barely-readable light box.
   UIKit's own rule is .uk-list-striped>li:nth-of-type(odd){background:
   #fafafa}, matched here with equal specificity. */
:root[data-theme="dark"] .uk-list-striped > li {
  border-bottom-color: var(--border-color) !important;
}
:root[data-theme="dark"] .uk-list-striped > li:nth-of-type(odd) {
  background: var(--surface-hover) !important;
}
:root[data-theme="dark"] .uk-list-striped > li:first-child {
  border-top-color: var(--border-color) !important;
}
:root[data-theme="dark"] .paginate_button {
  color: var(--text-main) !important;
}
:root[data-theme="dark"] .paginate_button.current {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
:root[data-theme="dark"] .uk-pagination > li > a {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .fancybox-skin {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
}
:root[data-theme="dark"] img {
  opacity: 0.92;
}
/* jQuery-TE rich text editor (item/blog/page descriptions) - its
   toolbar icons are a fixed light-colored sprite image, not a font or
   SVG, so they can't be recolored via CSS the way everything else in
   this file is. Rather than leave literally invisible icons (a light
   icon sprite on this file's own dark surface color), the editor stays
   a deliberate light "paper" surface even in dark mode - the same
   choice Google Docs/Word make for their own canvas under a dark OS
   theme - just themed with a visible border instead of blending
   invisibly into the page. Confirmed live: previously this whole
   widget was a plain unbordered white box floating on the dark page. */
:root[data-theme="dark"] .jqte {
  border-color: var(--border-color) !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
:root[data-theme="dark"] .jqte_toolbar {
  border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .jqte_editor {
  background: #ffffff !important;
  color: #111827 !important;
}

/* ============================================================
   2026 REDESIGN - typography, buttons, tabs, forms, badges, login
   ============================================================ */

/* ---- Typography ---- */
body#admin, body.merchant, body {
  font-family: var(--font-body) !important;
}
.header_wrap h1,
.header_wrap h3,
.content_wrap > h2, .content_wrap > h3,
.dashboard-work-area > h2, .dashboard-work-area > h3,
.panel > h2, .panel > h3,
.uk-panel-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ---- Buttons ---- */
.uk-button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 18px !important;
  transition: all 0.15s ease !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-main) !important;
}
.uk-button:hover {
  background-color: var(--surface-hover) !important;
  transform: translateY(-1px);
}
.uk-button:active { transform: translateY(0); }
.uk-button-primary,
.uk-button-success {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-sm) !important;
}
.uk-button-primary:hover,
.uk-button-success:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: var(--shadow-md) !important;
}
.uk-button-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}
.uk-button-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; }
/* A couple of pages use inline orange styling for a primary CTA - give the
   theme a real accent color to draw from instead of only ever green. */
.uk-button-accent, .btn-accent {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}
.uk-button-accent:hover, .btn-accent:hover { background: var(--accent-hover) !important; }

/* ---- Tabs (uk-tab - used across every add/edit form: Dispensary Info,
   Login Info, Merchant Type, Payment Settings, etc.) ---- */
.uk-tab {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 0 !important;
}
.uk-tab > li > a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  transition: all 0.15s ease !important;
}
.uk-tab > li > a:hover {
  color: var(--text-main) !important;
  background-color: var(--surface-hover) !important;
}
.uk-tab > li.uk-active > a {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
}

/* ---- Forms ---- */
/* Real systemic bug found live 2026-09-18: this rule never set a
   background-color or color at all, on ANY input/textarea/select
   sitewide - only border/radius. In light mode that was invisible
   (browser default background is white, default text is black, which
   just happens to match this theme's light palette) - but it meant
   every single form field on every add/edit page in both panels was
   silently relying on the browser default rather than this theme,
   confirmed live via a real screenshot: the Cannabis Item Name field,
   the new THC%/CBD% fields, all rendered as stark white boxes on an
   otherwise-dark page. This is the actual root cause the widget-
   specific dark-mode rules elsewhere in this file were never going to
   catch on their own, since none of them are widgets - they're the
   plain native inputs every form is built from. */
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"],
.uk-form input[type="number"],
.uk-form input[type="tel"],
.uk-form input[type="date"],
.uk-form input[type="search"],
.uk-form input[type="url"],
.uk-form textarea,
.uk-form select,
/* 2026-09-28: real bug found live - the rule above only ever matched
inside a real .uk-form wrapper, which every OLDER admin page happens
to have (a real <form class="uk-form">) but several newer, simpler
AJAX-driven panels built this session (Categories, Pricing Rules) never
added - their inputs use the .uk-form-width-* size classes (this app's
real "themed form field" marker) but with no .uk-form ancestor, so they
fell back to native white browser input backgrounds. Matching the size
classes directly, with no ancestor requirement, covers those pages too
without needing a wrapper added to each one now or in the future. */
input[type="text"].uk-form-width-large,
input[type="text"].uk-form-width-medium,
input[type="text"].uk-form-width-small,
input[type="number"].uk-form-width-large,
input[type="number"].uk-form-width-medium,
input[type="number"].uk-form-width-small,
textarea.uk-form-width-large,
textarea.uk-form-width-medium,
textarea.uk-form-width-small,
select.uk-form-width-large,
select.uk-form-width-medium,
select.uk-form-width-small,
.chosen-container .chosen-single {
  background-color: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-color) !important;
  font-family: var(--font-body) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.uk-form input::placeholder,
.uk-form textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
.uk-form input[type="text"]:focus,
.uk-form input[type="password"]:focus,
.uk-form input[type="email"]:focus,
.uk-form input[type="number"]:focus,
.uk-form input[type="tel"]:focus,
.uk-form textarea:focus,
.uk-form select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

/* 2026-09-28: real bug found live - UIKit's default .uk-thumbnail
(used for every category/item photo preview and every list-table
thumbnail across the whole admin/merchant panel) hardcodes a white
padded frame (background:#fff, border:#ddd) with no dark-mode override
anywhere in this file - a small white box around every single
thumbnail image, everywhere one appears. */
.uk-thumbnail {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-color) !important;
}

/* ---- Badges / status pills ---- */
.uk-badge {
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

/* 2026-09-28: real bug found live - UIKit's own default .uk-alert
(assets/vendor/uikit/css/uikit.almost-flat.css) hardcodes a light-blue
background (#ebf7fd), dark-blue text, and a white text-shadow, and this
theme file never overrode it for [data-theme="dark"] - used across 39
admin views (including the new Categories/Performance/Pricing Rules
pages), every one of them showed a bright light-blue box bleeding
through the dark admin panel. */
.uk-alert {
  background-color: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  text-shadow: none !important;
}
/* Semantic variants (JS-injected success/error/warning notices after an
action) still need their own real color, not the same neutral as a
plain info banner - just theme-following instead of light-only. */
.uk-alert-success {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border-color: var(--status-success) !important;
}
.uk-alert-warning {
  background-color: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border-color: var(--status-warning) !important;
}
.uk-alert-danger {
  background-color: var(--status-danger-bg) !important;
  color: var(--status-danger) !important;
  border-color: var(--status-danger) !important;
}

/* ---- Login screens (admin + merchant) ---- */
.login-split-container {
  display: flex;
  min-height: 100vh;
  font-family: var(--font-body);
  background-color: var(--bg-main);
}
.login-visual-panel {
  flex: 1;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 40px;
}
.login-brand-panel {
  max-width: 420px;
}
.login-brand-panel h2 {
  font-family: var(--font-display) !important;
  color: white !important;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}
.login-brand-panel p {
  font-size: 1.1rem;
  margin-bottom: 24px;
  line-height: 1.6;
  opacity: 0.9;
}
.login-brand-points {
  list-style: none;
  padding: 0;
}
.login-brand-points li {
  font-size: 1.1rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.login-brand-points li i {
  margin-right: 12px;
  font-size: 1.3rem;
  color: #a7f3d0;
}
.login-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: var(--bg-sidebar);
}
.login-form-panel .uk-panel {
  width: 100%;
  max-width: 380px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.login-form-panel h3.uk-h3 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  text-align: center;
}
.login_logo_mobile {
  display: none;
  background-image: url("/assets/images/pwa/icon-192.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 64px;
  width: 64px;
  margin: 0 auto 28px;
}
@media (max-width: 850px) {
  /* Real bug fixed 2026-09-11: this collapsed the split-screen login to a
     single column by hardcoding a permanent dark theme (#0f172a) with
     !important - completely unconditional, not tied to the dark-mode
     toggle (which has also been removed) at all. That's exactly the
     "login area is messed up, I don't know when this happened" the user
     reported - the mobile login looked dark while desktop looked light,
     with no toggle to explain the difference. Standard light theme,
     matching desktop, on every device now. */
  .login-visual-panel {
    display: none;
  }
  .login_logo_mobile {
    display: block;
  }
  .login-split-container {
    background-color: var(--bg-main);
  }
  .login-form-panel {
    justify-content: flex-start !important;
    padding: 64px 24px 40px !important;
    background-color: var(--bg-main) !important;
  }
  .login-form-panel h3.uk-h3 {
    color: var(--primary) !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    text-align: left;
    width: 100%;
    max-width: 380px;
    margin: 0 auto 28px !important;
  }
}
/* Login Forms Overrides */
.login-form-panel .uk-form-row { margin-bottom: 16px !important; }
.login-form-panel input[type="text"],
.login-form-panel input[type="password"],
.login-form-panel input[type="email"] {
  height: 52px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  padding-left: 44px !important;
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}
.login-form-panel input::placeholder { color: var(--text-muted) !important; }
.login-form-panel input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
.login-form-panel .uk-form-icon > i {
  color: var(--text-muted) !important;
  z-index: 2;
}
.login-form-panel .uk-button {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  height: 52px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 15px;
  margin-top: 8px;
  box-shadow: var(--shadow-md) !important;
}
.login-form-panel .uk-button:hover { 
  background: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
}
.login-form-panel a.mt-fp-link,
.login-form-panel a.mt-login-link {
  color: var(--primary) !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  display: block;
  text-align: center;
  margin-top: 16px;
}
.login-form-panel h4 {
  font-family: var(--font-display) !important;
  color: var(--text-main) !important;
  font-size: 1.25rem;
  margin: 0 0 16px;
  text-align: center;
}

/* ================= BASE STYLES ================= */
/* 2026-09-28: real bug found live - only <body> ever got a themed
background; <html> itself was never set, so wherever body's own box
didn't fully cover the document (e.g. a tall, still-loading table
extending past body's rendered height at first paint) the browser's
own light-gray default <html> background showed through as a real,
visible light patch on an otherwise dark page. */
html {
  background-color: var(--bg-main) !important;
}
body#admin, body.merchant, body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
  color: var(--text-main) !important;
}

/* ================= LAYOUT COLORS & BORDERS ================= */
.main_wrapper {
  background-color: var(--bg-main) !important;
}

.left_panel.left {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.main_content.left {
  background-color: var(--bg-main) !important;
}

.header_wrap {
  background: var(--bg-sidebar) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  padding: 16px 32px !important;
  display: flex !important;
  align-items: center !important;
}

/* Real bug, found+fixed 2026-09-18 via a real iPad at 1200px (a size
   between the phone breakpoint below and a standard tablet - this exact
   width had never been checked live before): the mobile media query
   below gives .header-primary-row (hamburger + "Merchant"/"ADMIN" title
   + the dark-mode toggle) display:flex so all three sit inline in one
   row, but that rule is scoped to max-width:1024px only. Above that,
   .header_wrap .left's legacy float:left (admin.css) takes over, and
   since the h1 inside is block-level, it forces the toggle button onto
   a second "line" below it (52px h1 + 38px button = 90px stacked)
   instead of sitting beside it - .header_wrap's own align-items:center
   then centers that unexpectedly-tall 90px block against its actual
   52px height, pushing half of it out of view above the header (the
   toggle rendered, in the DOM, with real contrast - just physically cut
   off, which is why "no dark mode toggle" was reported at this width
   while it worked fine on phone). Giving this its own always-on flex
   layout - not just inside the mobile media query - fixes it at every
   width instead of only below 1024px. */
.header-primary-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mobile-menu-toggle {
  display: none !important;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  padding: 8px 12px !important;
  margin-right: 16px !important;
  border-radius: var(--radius-sm) !important;
}
.mobile-menu-toggle i {
  font-size: 18px;
}

/* ================= SIDEBAR LINKS ================= */
.menu-left-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px 16px !important;
}

.menu-left-content ul.uk-nav > li {
  margin-bottom: 4px !important;
}
.menu-left-content ul.uk-nav > li > a {
  color: var(--text-sidebar) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
.menu-left-content ul.uk-nav > li > a:hover {
  background-color: var(--surface-hover) !important;
  color: var(--text-main) !important;
}
.menu-left-content ul.uk-nav > li.uk-active > a {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ================= MAIN CONTENT PANELS ================= */
.panel, .dashboard-work-area, .uk-panel, .uk-panel-box {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}
/* 2026-09-28: real, systemic bug found live and reported directly by
the user - UIKit's own .uk-panel-box (assets/vendor/uikit/css/
uikit.almost-flat.css) sets color:#444444 with no !important, meant
for a light page. This file's own .uk-panel rule above never set a
color at all, so anything using .uk-panel-box specifically (used all
over the admin panel, not just pages built this session) inherited
that #444 gray - nearly the same darkness as this theme's own dark
panel background, reading as barely-visible "bleeding" text exactly as
reported. This single rule, with !important, wins over UIKit's
un-important default everywhere .uk-panel-box appears, admin and
merchant panel alike (both load this same file). */
.uk-panel-box {
  color: var(--text-main) !important;
}

/* ================= TABLES ================= */
.uk-table {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
}
.uk-table th {
  background-color: var(--surface-hover) !important;
  color: var(--text-muted) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.uk-table td {
  padding: 12px 16px !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.uk-table tr:hover td {
  background-color: var(--surface-hover) !important;
}

/* ================= OVERFLOW & BOX SIZING FIX ================= */
* {
  box-sizing: border-box !important;
}
html, body {
  overflow-x: hidden !important; /* Prevents the right-side black cutoff bug */
}

/* ================= CONTENT WRAP & BREADCRUMBS ================= */
.content_wrap {
  background-color: var(--surface-card) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1) !important;
  border: 1px solid var(--border-color) !important;
  margin: 24px !important;
  padding: 24px !important;
}

.breadcrumbs {
  background-color: var(--surface-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* ================= MODERN FLEXBOX LAYOUT (REPLACES LEGACY ABSOLUTE POS) ================= */
.main_wrapper {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}

.left_panel.left {
  flex: 0 0 250px !important;
  width: 250px !important;
  position: relative !important;
  float: none !important;
  min-height: 100vh !important;
  z-index: 10 !important;
}

.main_content.left {
  flex: 1 !important;
  position: relative !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important; /* Critical to prevent flex item from overflowing viewport horizontally */
  z-index: 1 !important;
}

/* Remove the legacy hack that pushed content right by 250px via padding */
.main_content .inner {
  padding-left: 0 !important;
}

/* Ensure the table can scroll horizontally instead of overflowing */
.content_wrap {
  overflow-x: auto !important;
  width: auto !important;
}

/* Fix active sidebar text contrast */
.menu ul.uk-nav > li.uk-active > a {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* ================= RESPONSIVE DESIGN (TABLETS & PHONES) ================= */
@media only screen and (max-width: 1024px) {
  .main_wrapper {
    flex-direction: column !important;
  }
  
  .mobile-menu-toggle {
    display: inline-block !important;
  }
  
  .left_panel.desktop-sidebar {
    display: none !important;
  }
  
  .left_panel.left {
    width: 100% !important;
    flex: none !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
  
  /* Real redesign 2026-09-18: the header was flex-direction:column,
     stacking every .right block (the theme toggle, "View Website", and
     3 separate commission/balance stat-card blocks) full-width on top
     of each other - confirmed live via a real screenshot that this
     collapsed to what looked like an almost-empty bar (the actual
     content was there, just squeezed into near-zero visible height by
     the stat cards' own styling, with the theme toggle button
     effectively invisible against the dark background in that mess).
     Real fix: a proper 2-row app-bar. Row 1 (sticky) is compact and
     essential-only - hamburger, title, theme toggle, user menu. Row 2
     is every lower-priority item (View Website, commission/balance
     cards - .header-quickstat, set in admin_tpl.php/merchant_tpl.php)
     as one horizontally-scrollable strip, not stacked full-width
     blocks. display:contents on the dropdown's own wrapper lifts the
     user-menu out to sit on row 1 without restructuring the underlying
     UIkit dropdown markup it needs to keep working. */
  .header_wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
  }
  .header-primary-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    order: 1;
  }
  .header-primary-row h1 {
    font-size: 0.95rem !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  .header_wrap > .right:has(.header-user-menu) {
    display: contents;
  }
  .header-user-menu {
    order: 1;
    margin-left: auto !important;
  }
  .header-user-menu .uk-button {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
  /* Forces a line break after row 1 (order 1) so every .header-
     quickstat item (order 3) wraps onto row 2 together, instead of
     wrapping independently at whatever width each one happens to hit. */
  .header_wrap::after {
    content: '';
    flex-basis: 100%;
    order: 2;
  }
  .header_wrap .right.header-quickstat,
  .header-quickstat {
    order: 3;
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
  }
  .header_wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .header-quickstat .uk-button {
    white-space: nowrap;
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
  }

  .header_wrap h3 {
    text-align: left !important;
    box-sizing: border-box !important;
  }
  
  .content_wrap, .dashboard-work-area, .panel {
    margin: 12px !important;
    padding: 16px !important;
  }
  
  .breadcrumbs .inner {
    padding: 16px !important;
  }

  /* Real bug fixed 2026-09-11: .language-wrapper (SMS/fax credit
     counters + language switcher, top-right of every breadcrumb bar)
     is absolutely positioned in admin.css (right:20px; top:8px) -
     fine on desktop where there's room beside the page title, but
     absolute positioning takes it out of document flow entirely, so
     on a narrow phone it sits directly on top of the title instead of
     wrapping below it. Confirmed live via screenshot: "Cannabis
     Product Item" and "SMS Credits: 1  Fax Credits: 0" overlapping,
     both unreadable. Static positioning lets it flow naturally after
     the title on mobile instead.
     Real bug fixed 2026-09-11 (2): every uk-width-1-2/1-3/etc form
     column throughout the admin/merchant panels stays at its desktop
     fraction-width at any screen size (UIkit's grid isn't responsive
     by default), so two-column forms were rendering as two squeezed,
     barely-readable columns on a phone instead of stacking - the
     literal "everything cramped, hard to touch" complaint. Stacking
     every grid column to full width below this breakpoint fixes every
     such form sitewide in one place, no per-view changes needed. */
  .language-wrapper {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 12px !important;
    margin-top: 8px !important;
  }

  .content_wrap .uk-grid > [class*="uk-width"],
  .panel .uk-grid > [class*="uk-width"],
  .dashboard-work-area .uk-grid > [class*="uk-width"] {
    width: 100% !important;
  }

  /* Every touch target at least 44px tall, the standard minimum -
     buttons/links/inputs on these panels were often 28-34px, sized
     for a mouse pointer, not a fingertip. */
  .uk-button,
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="tel"], input[type="date"],
  select, textarea {
    min-height: 44px !important;
  }

  /* Tables on mobile - real redesign 2026-09-18, replacing the previous
     horizontal-scroll approach entirely per explicit direction: nobody
     should have to slide a table sideways to read it on a phone. Every
     row becomes a stacked card instead - each cell on its own line,
     labeled with its column header (injected as a data-label attribute
     by the shared JS in admin.js/merchant.js, since these tables are
     largely built by DataTables at runtime, not static PHP markup - see
     applyResponsiveTableLabels() there). This is the standard
     responsive-table pattern (Every Layout / CSS-Tricks "responsive
     tables"), not something invented for this specific table structure,
     so it holds for every list page sitewide without per-view changes.
     Previously the table was forced to display:block with nowrap cells
     "so it can scroll" - confirmed live via getBoundingClientRect() that
     the table was actually rendering over 9000px wide with no usable
     scroll affordance at all, not a working horizontal-scroll table. */
  .uk-table thead {
    display: none !important;
  }
  .uk-table,
  .uk-table tbody,
  .uk-table tr,
  .uk-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .uk-table {
    overflow-x: visible !important;
    font-size: 13px !important;
  }
  .uk-table tbody tr {
    margin-bottom: 14px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 0 !important;
    overflow: hidden;
  }
  .uk-table td {
    white-space: normal !important;
    word-break: break-word;
    padding: 9px 14px !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px;
    text-align: right;
  }
  .uk-table td:last-child {
    border-bottom: none !important;
  }
  .uk-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
  }
  /* A cell with no real content (an empty options/action column some
     list views leave blank) would otherwise still render as a bare
     labeled row with nothing after it. */
  .uk-table td:empty {
    display: none !important;
  }
  .uk-table td img.uk-thumbnail-mini {
    max-width: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* Offcanvas Sidebar Styles */
/* Real bug fixed 2026-09-11: every selector below required "ul.uk-nav"
   on the offcanvas list, but the actual rendered markup (both the
   top-level ungrouped items like Dashboard, and the grouped ones like
   Cannabis Category under Catalog/Orders/etc.) uses plain <ul> with NO
   class at all - confirmed live by dumping the real DOM. That means
   this whole block never matched a single element, so none of it ever
   applied - a legacy rule in admin.css (".menu a:hover {
   background:#FFFFFF; }") was winning by default instead, producing a
   white hover box with low-contrast grey text. Selectors below now
   match the real markup (no ul.uk-nav requirement). Standard light
   theme throughout - no dark-mode-specific colors. */
.uk-offcanvas-bar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-color) !important;
  /* THE actual root cause, found 2026-09-11: UIkit's own base CSS sets
     a resting transform (translateX(-100%), confirmed live as
     matrix(1,0,0,1,-270,0)) on .uk-offcanvas-bar as its default
     "closed" position for the slide-in animation. The show/hide
     mechanism for this panel was rewritten to a plain display:none/
     block toggle on the OUTER wrapper, but this class name was kept
     on the INNER bar for styling continuity - and nothing ever told
     THIS element to stop sitting at its animated-closed transform.
     Net effect: the outer wrapper correctly shows and occupies the
     right space on screen, but its child (everything - background,
     text, every menu item) is shifted 270px off to the left, so the
     visible box is genuinely empty. This is exactly what the real
     iPhone screenshot showed. Every previous theory (dark colors,
     -webkit-overflow-scrolling, compositing layers) was chasing a
     symptom of THIS. */
  transform: none !important;
  /* Real bug fixed 2026-09-11: -webkit-overflow-scrolling:touch was
     added here to help momentum-scroll the long menu, but this exact
     property is a well-documented trigger for a real iOS Safari
     rendering bug: on an element that ALSO has a CSS transform (this
     offcanvas panel slides in via transform - that's how UIkit
     animates it), touch-scrolling can force it onto its own
     compositing layer that WebKit sometimes fails to paint at all,
     rendering the whole panel blank/empty - confirmed via a real
     screenshot from the reporting user's actual iPhone: the entire
     menu area was empty, not just wrong colors. Modern iOS (13+)
     already gives a plain overflow-y:auto box real momentum scrolling
     natively without this legacy property, so removing it costs
     nothing and eliminates the specific trigger for that bug. */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* Belt-and-suspenders 2026-09-11: three separate hardcoded dark
   backgrounds have now been found and fixed on this sidebar across
   three different files (backend-custom.css's own dead ul.uk-nav
   rule, an inline <style> block in admin_tpl.php, and .left_panel in
   admin.css) - each one hiding in a different place, none of them
   caught by fixing the others first. Rather than keep finding these
   one at a time, force every element inside the offcanvas bar to a
   transparent background so it always shows the bar's own light
   background beneath it, and force readable text color, regardless of
   what any current or future rule elsewhere sets on some more
   specific selector inside here. This is deliberately blunt - the
   only thing that should ever legitimately differ inside this sidebar
   is the active-item highlight and hover state, both re-declared
   below with enough specificity to still win over this. */
.uk-offcanvas-bar,
.uk-offcanvas-bar * {
  background-color: transparent !important;
  background-image: none !important;
}
.uk-offcanvas-bar {
  background-color: var(--bg-sidebar) !important;
}
.uk-offcanvas-bar,
.uk-offcanvas-bar a,
.uk-offcanvas-bar span,
.uk-offcanvas-bar div,
.uk-offcanvas-bar li {
  color: var(--text-sidebar) !important;
}
.uk-offcanvas-bar .menu.mobile-menu a {
  color: var(--text-sidebar) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 12px 20px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  display: block;
}
.uk-offcanvas-bar .menu.mobile-menu a:hover {
  background-color: var(--surface-hover) !important;
  color: var(--text-main) !important;
}
.uk-offcanvas-bar .menu.mobile-menu li.uk-active > a {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}
/* Real bug fixed 2026-09-11: .admin-nav-group-header (the "Catalog",
   "Orders", etc. section labels) has NO color rule anywhere in this
   codebase at all, on either desktop or offcanvas - it happens to
   render readably on desktop only because it inherits a grey from an
   unrelated ancestor rule that doesn't reach the offcanvas markup, so
   here it fell through to the light-theme's near-black --text-main
   default, on top of the permanently-dark sidebar background -
   confirmed live via getComputedStyle (rgb(17,24,39), i.e. #111827). */
.uk-offcanvas-bar .admin-nav-group-header {
  color: var(--text-sidebar) !important;
  padding: 10px 20px 6px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
}
.uk-offcanvas-bar .admin-nav-group-header span,
.uk-offcanvas-bar .admin-nav-group-caret {
  color: inherit !important;
}

/* ============================================================
   2026 REDESIGN PASS 2 (2026-09-18) - "tremendous amount of work" per
   explicit request: sidebar/header made to feel like a real modern
   product dashboard (Linear/Stripe-console reference points) rather
   than a re-skinned default admin theme, a genuine tablet breakpoint
   distinct from phone (previously both collapsed to the same single
   stacked layout at 1024px), and the flat "Commission today: $X"
   button-labels in the header turned into real stat cards.
   ============================================================ */

/* ---- Sidebar: icon-forward nav, left accent bar on the active item,
   tighter icon/label rhythm instead of default UIkit spacing ---- */
.menu-left-content ul.uk-nav > li > a,
.uk-offcanvas-bar .menu.mobile-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
.menu-left-content ul.uk-nav > li > a i.fa,
.uk-offcanvas-bar .menu.mobile-menu a i.fa {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.menu-left-content ul.uk-nav > li.uk-active > a i.fa,
.uk-offcanvas-bar .menu.mobile-menu li.uk-active > a i.fa {
  color: inherit;
}
.menu-left-content ul.uk-nav > li.uk-active > a,
.uk-offcanvas-bar .menu.mobile-menu li.uk-active > a {
  position: relative;
}
.menu-left-content ul.uk-nav > li.uk-active > a::before,
.uk-offcanvas-bar .menu.mobile-menu li.uk-active > a::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.left_panel.desktop-sidebar {
  padding-top: 4px;
}
/* Brand mark above the nav groups - the sidebar previously opened
   straight into "Dashboard" with zero identity, distinct from every
   reference product this redesign is matching. */
.left_panel.desktop-sidebar::before {
  content: 'WEEDELIVER';
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--primary);
  padding: 22px 24px 14px;
}

/* ---- Header stat "cards" - same markup (h3.uk-button-success/-primary/
   -danger with a label + span), styled as real metric cards instead of
   button-shaped text. No PHP/JS changes - .commission_loader still
   fills the same <span> the existing polling script already targets. */
.header_wrap .right h3.uk-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 8px 16px !important;
  min-width: 130px;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  cursor: default;
  transform: none !important;
}
.header_wrap .right h3.uk-button span,
.header_wrap .right h3.uk-button:not(:has(span)) {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}
.header_wrap .right h3.uk-button-success {
  background: var(--status-success-bg) !important;
  border-color: transparent !important;
  color: var(--status-success) !important;
  box-shadow: none !important;
}
.header_wrap .right h3.uk-button-danger {
  background: var(--status-danger-bg) !important;
  border-color: transparent !important;
  color: var(--status-danger) !important;
  box-shadow: none !important;
}
.header_wrap .right h3.uk-button-primary {
  background: var(--status-info-bg) !important;
  border-color: transparent !important;
  color: var(--status-info) !important;
  box-shadow: none !important;
}
.header_wrap .right h4.uk-h3 {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Content panel polish: subtle lift on hover for clickable report
   cards, tightened heading rhythm ---- */
.content_wrap h3 {
  font-size: 1.05rem !important;
  margin-top: 0 !important;
}
.content_wrap form.report {
  margin-bottom: 8px;
}

/* ============================================================
   RESPONSIVE - real tablet tier (2026-09-18)
   Previously one breakpoint (1024px) collapsed phone AND tablet to the
   exact same fully-stacked, sidebar-hidden layout - functional, but not
   what "tablet optimized" asks for: an iPad has the width to keep a
   real sidebar on screen, just narrower than desktop's 250px, and the
   header's stat cards have room to sit in a row rather than stack.
   ============================================================ */
@media only screen and (min-width: 851px) and (max-width: 1180px) {
  /* The existing max-width:1024px block above hides the sidebar entirely
     and stacks everything in a column - both wrong for a tablet-width
     screen. This range overlaps it (851-1024px), so both explicitly
     override those two properties back to a real side-by-side layout;
     everything else that block sets (touch target sizing, table
     scrolling, stacked form columns) is still genuinely correct at
     tablet width and stays inherited. */
  .main_wrapper {
    flex-direction: row !important;
  }
  .left_panel.left.desktop-sidebar {
    display: block !important;
    width: 76px !important;
    flex: 0 0 76px !important;
  }
  .mobile-nav-backdrop, #offcanvas-menu {
    display: none !important;
  }
  .left_panel.desktop-sidebar::before {
    display: none;
  }
  .admin-nav-group-header span:not(.admin-nav-group-caret),
  .menu-left-content ul.uk-nav > li > a span.uk-nav-label,
  .menu-left-content ul.uk-nav > li > a {
    font-size: 0 !important;
  }
  .menu-left-content ul.uk-nav > li > a i.fa,
  .admin-nav-group-caret {
    font-size: 16px !important;
  }
  .menu-left-content ul.uk-nav > li > a {
    justify-content: center !important;
    padding: 12px 0 !important;
  }
  .admin-nav-group-items { max-height: none !important; }
  .admin-nav-group.collapsed .admin-nav-group-items { max-height: none !important; }
  .admin-nav-group-header { display: none !important; }
  .mobile-menu-toggle { display: none !important; }
  .header_wrap { flex-wrap: wrap !important; }
  .header_wrap .right h3.uk-button { min-width: 110px; }
}

/* Below 850px (phone territory) keeps the existing fully-stacked,
   offcanvas-driven layout defined in the @media(max-width:1024px)
   block above - unchanged. */

/* ================= CHARTS (2026-09-18) ================= */
/* jqPlot sizes its canvas to the container's own box, so a bigger,
   better-framed container is the real lever for "larger" - the chart
   JS itself (admin.js) handles color/label/interactivity. A real card
   frame (border/radius/shadow, matching every other content block on
   this page) instead of a bare floating canvas, and enough height that
   the second chart's steeply-angled item-name labels have real room
   instead of being clipped at the container edge. */
.chart {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 8px 24px;
  margin-bottom: 28px;
  min-height: 420px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The pie chart's legend (up to 10 real category rows) needs real
   vertical room below a now much-larger pie - the shared 420px min-
   height was sized for the two bar charts, not this. */
#total_sales_chart_by_category.chart {
  min-height: 620px;
  /* Extra top padding, on top of the shared 16px - real headroom above
     the title so the pie's diameter math (pieDiameterFor() in admin.js)
     has a bit more margin for error than the bare minimum. */
  padding-top: 28px;
}
@media only screen and (max-width: 1024px) {
  .chart {
    min-height: 460px;
    padding: 12px 4px 32px;
  }
}
.jqplot-highlighter-tooltip {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  box-shadow: var(--shadow-md) !important;
}

.chart-period-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: 16px;
}
.chart-period-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chart-period-btn.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.chart-period-btn:not(.active):hover {
  color: var(--text-main);
}
/* Uniform items-list description cell, 2026-09-18: every list column
   (categories, sub-categories, items, add-on items) echoed its
   description with no length cap - one long description made a single
   row balloon to several lines while every other row stayed compact,
   breaking the list's visual rhythm. Clamping to 2 lines everywhere
   keeps every row a predictable height across admin and merchant alike;
   the full text is still one hover/tap away via the title attribute. */
.list-desc-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 320px;
  line-height: 1.35;
  color: var(--text-muted);
}
@media only screen and (max-width: 850px) {
  /* Mobile card-stack rows already give each field its own full-width
     line (see .uk-table td[data-label] above) - a tighter single-line
     clamp keeps a long description from still dominating the card. */
  .list-desc-clamp {
    -webkit-line-clamp: 1;
    max-width: 100%;
  }
}

.jqplot-table-legend {
  background-color: var(--surface-hover) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm);
  color: var(--text-main) !important;
}
/* The pie's % labels sit directly on top of whatever color the slice
   happens to be, in either theme - a plain page-theme text color would
   still go unreadable on a same-tone slice. A small self-contained dark
   pill with white text guarantees real contrast against every slice
   color and both themes, instead of chasing per-slice/per-theme colors. */
.jqplot-data-label.jqplot-pie-series {
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ffffff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  pointer-events: none;
}