/* ═══════════════════════════════════════════════════════════════
   NeverQ Design System — nq-design.css
   Load order: Google Fonts → Bootstrap 5.3.3 → nq-design.css
   → page-specific inline CSS (via {% block extra_head %})
═══════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE (default) ───────────────────────────────────── */
:root {
  /* Brand palette */
  --nq-primary:        #2563EB;
  --nq-primary-dark:   #1D4ED8;
  --nq-primary-light:  #EFF6FF;
  --nq-primary-muted:  #BFDBFE;
  --nq-accent:         #EF4444;
  --nq-accent-dark:    #DC2626;
  --nq-accent-light:   #FEF2F2;
  --nq-navy:           #1E3A5F;
  --nq-navy-soft:      #2C4A6E;

  /* Surface tokens */
  --nq-bg:             #F8FAFC;
  --nq-surface:        #FFFFFF;
  --nq-surface-raised: #FFFFFF;
  --nq-surface-sunken: #F1F5F9;

  /* Text tokens */
  --nq-text:           #0F172A;
  --nq-text-muted:     #64748B;
  --nq-text-faint:     #94A3B8;

  /* Border */
  --nq-border:         #E2E8F0;
  --nq-border-strong:  #CBD5E1;

  /* Status colours */
  --nq-success:        #16A34A;
  --nq-success-light:  #DCFCE7;
  --nq-warning:        #D97706;
  --nq-warning-light:  #FEF3C7;
  --nq-info:           #0284C7;
  --nq-info-light:     #E0F2FE;
  --nq-danger:         #DC2626;
  --nq-danger-light:   #FEE2E2;

  /* Spacing scale */
  --nq-space-1: 4px;  --nq-space-2: 8px;   --nq-space-3: 12px;
  --nq-space-4: 16px; --nq-space-5: 20px;  --nq-space-6: 24px;
  --nq-space-8: 32px;

  /* Border radius */
  --nq-radius-sm: 8px;  --nq-radius: 12px;   --nq-radius-lg: 18px;
  --nq-radius-xl: 24px; --nq-radius-2xl: 28px;

  /* Shadows */
  --nq-shadow-xs: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --nq-shadow-sm: 0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04);
  --nq-shadow:    0 8px 24px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.05);
  --nq-shadow-lg: 0 16px 40px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.06);
  --nq-shadow-xl: 0 24px 64px rgba(15,23,42,.16), 0 8px 16px rgba(15,23,42,.08);

  /* Typography */
  --nq-font-body:    'DM Sans', system-ui, sans-serif;
  --nq-font-heading: 'Rajdhani', system-ui, sans-serif;
  --nq-text-xs:   11px; --nq-text-sm: 13px;  --nq-text-base: 15px;
  --nq-text-lg:   17px; --nq-text-xl: 20px;  --nq-text-2xl:  24px;
  --nq-text-3xl:  32px;

  /* Sidebar */
  --nq-sidebar-bg-from:   #1E3A8A;
  --nq-sidebar-bg-to:     #0F2563;
  --nq-sidebar-text:      rgba(241,245,255,.86);
  --nq-sidebar-active-bg: rgba(132,176,255,.22);

  /* ── Backward-compat aliases — existing --cf-* inline CSS keeps working ── */
  --cf-blue:          var(--nq-primary);
  --cf-blue-dark:     var(--nq-primary-dark);
  --cf-blue-light:    var(--nq-primary-light);
  --cf-red:           var(--nq-accent);
  --cf-red-dark:      var(--nq-accent-dark);
  --cf-red-light:     var(--nq-accent-light);
  --cf-navy:          var(--nq-navy);
  --cf-navy-soft:     var(--nq-navy-soft);
  --cf-text:          var(--nq-text);
  --cf-muted:         var(--nq-text-muted);
  --cf-border:        var(--nq-border);
  --cf-surface:       var(--nq-bg);
  --cf-white:         var(--nq-surface);
  --cf-card:          var(--nq-surface);
  --cf-shadow:        var(--nq-shadow);
  --cf-shadow-lg:     var(--nq-shadow-lg);
  --cf-shadow-soft:   var(--nq-shadow-sm);
  --cf-radius:        var(--nq-radius-lg);
  --cf-radius-sm:     var(--nq-radius);
  --cf-success:       var(--nq-success);
  --cf-warning:       var(--nq-warning);
  --cf-green:         var(--nq-success);
  --cf-green-light:   var(--nq-success-light);
  --cf-orange:        #EA580C;
  --cf-orange-light:  #FFF7ED;
  --cf-purple:        #7C3AED;
  --cf-purple-light:  #EDE9FE;
  --cf-warning-light: var(--nq-warning-light);
  --sidebar-w:            260px;
  --sidebar-collapsed-w:  72px;
  --sidebar-visible-w:    var(--sidebar-w);
}

/* ── DARK MODE ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --nq-primary:        #3B82F6;
  --nq-primary-dark:   #2563EB;
  --nq-primary-light:  #1E3A5F;
  --nq-primary-muted:  #1E3461;
  --nq-accent:         #F87171;
  --nq-accent-dark:    #EF4444;
  --nq-accent-light:   #3B1515;
  --nq-navy:           #BAC8E0;
  --nq-navy-soft:      #93AAC8;

  --nq-bg:             #0B1120;
  --nq-surface:        #131C30;
  --nq-surface-raised: #1A2540;
  --nq-surface-sunken: #0D1525;

  --nq-text:           #E2E8F0;
  --nq-text-muted:     #8FA3C0;
  --nq-text-faint:     #4A6080;

  --nq-border:         #1E2D44;
  --nq-border-strong:  #2A3E5A;

  --nq-success:        #22C55E;
  --nq-success-light:  #0D2B1A;
  --nq-warning:        #FCD34D;
  --nq-warning-light:  #2B1E05;
  --nq-info:           #38BDF8;
  --nq-info-light:     #062032;
  --nq-danger:         #F87171;
  --nq-danger-light:   #2B0808;

  --nq-shadow-xs: 0 1px 3px rgba(0,0,0,.30);
  --nq-shadow-sm: 0 4px 12px rgba(0,0,0,.35);
  --nq-shadow:    0 8px 24px rgba(0,0,0,.40);
  --nq-shadow-lg: 0 16px 40px rgba(0,0,0,.50);
  --nq-shadow-xl: 0 24px 64px rgba(0,0,0,.60);

  --nq-sidebar-bg-from:   #0F1E40;
  --nq-sidebar-bg-to:     #081229;

  /* Bootstrap overrides */
  --bs-body-bg:    var(--nq-bg);
  --bs-body-color: var(--nq-text);
}

/* ── GLOBAL RESETS ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--nq-font-body);
  font-size: var(--nq-text-base);
  color: var(--nq-text);
  background-color: var(--nq-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
  max-width: 100%;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--nq-font-heading);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--nq-navy);
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: var(--nq-text); }
a { color: var(--nq-primary); }
img, video { max-width: 100%; height: auto; }
input, select, textarea { max-width: 100%; }
.row > *,
.cf-card,
.surface-card,
.filter-card,
.filter-bar { min-width: 0; }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--nq-border-strong); border-radius: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--nq-border); }

/* ── BOOTSTRAP DARK OVERRIDES ───────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas {
  background-color: var(--nq-surface);
  border-color: var(--nq-border);
  color: var(--nq-text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--nq-border);
}
[data-theme="dark"] .dropdown-item { color: var(--nq-text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--nq-surface-raised); }
[data-theme="dark"] .dropdown-divider { border-color: var(--nq-border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--nq-surface-sunken);
  border-color: var(--nq-border);
  color: var(--nq-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--nq-surface-raised);
  border-color: var(--nq-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
  color: var(--nq-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--nq-text-faint); }
[data-theme="dark"] .input-group-text {
  background: var(--nq-surface-sunken);
  border-color: var(--nq-border);
  color: var(--nq-text-muted);
}
[data-theme="dark"] .table {
  --bs-table-color: var(--nq-text);
  --bs-table-bg: var(--nq-surface);
  --bs-table-border-color: var(--nq-border);
  --bs-table-striped-bg: var(--nq-surface-raised);
  --bs-table-hover-bg: var(--nq-surface-raised);
}
[data-theme="dark"] hr         { border-color: var(--nq-border); }
[data-theme="dark"] .border    { border-color: var(--nq-border) !important; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light  { background-color: var(--nq-surface) !important; }
[data-theme="dark"] .text-dark { color: var(--nq-text) !important; }
[data-theme="dark"] .text-muted{ color: var(--nq-text-muted) !important; }
[data-theme="dark"] .nav-tabs  { border-color: var(--nq-border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--nq-text-muted); }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--nq-surface); border-color: var(--nq-border) var(--nq-border) var(--nq-surface); color: var(--nq-primary); }
[data-theme="dark"] .list-group-item { background: var(--nq-surface); border-color: var(--nq-border); color: var(--nq-text); }
[data-theme="dark"] .list-group-item:hover { background: var(--nq-surface-raised); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--nq-text-muted); }
[data-theme="dark"] .breadcrumb-item a { color: var(--nq-primary); }

/* ── DARK MODE TOGGLE BUTTON ────────────────────────────────── */
.nq-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--nq-border);
  background: var(--nq-surface);
  color: var(--nq-text-muted);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.nq-theme-toggle:hover { background: var(--nq-surface-raised); color: var(--nq-primary); border-color: var(--nq-primary); }
.nq-theme-toggle .nq-icon-sun  { display: none; }
.nq-theme-toggle .nq-icon-moon { display: block; }
[data-theme="dark"] .nq-theme-toggle { background: var(--nq-surface-raised); border-color: var(--nq-border-strong); }
[data-theme="dark"] .nq-theme-toggle .nq-icon-sun  { display: block; }
[data-theme="dark"] .nq-theme-toggle .nq-icon-moon { display: none; }

/* ── COMPONENT: CARDS ───────────────────────────────────────── */
.cf-card {
  background: var(--nq-surface);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  box-shadow: var(--nq-shadow-sm);
  overflow: hidden;
}
.cf-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--nq-border);
  background: var(--nq-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cf-card-header h5,
.cf-card-header .cf-card-title {
  margin: 0;
  font-family: var(--nq-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--nq-navy);
}
[data-theme="dark"] .cf-card-header h5,
[data-theme="dark"] .cf-card-header .cf-card-title { color: var(--nq-text); }
.cf-card-body   { padding: 20px; }
.cf-card-footer { padding: 14px 20px; border-top: 1px solid var(--nq-border); background: var(--nq-bg); }

/* ── COMPONENT: STAT CARDS ──────────────────────────────────── */
.stat-card {
  background: var(--nq-surface);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--nq-shadow-sm);
  transition: box-shadow .2s, transform .18s;
  text-decoration: none;
  color: inherit;
}
.stat-card:hover { box-shadow: var(--nq-shadow-lg); transform: translateY(-2px); color: inherit; }
.stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--nq-radius);
  display: grid; place-items: center;
  font-size: 21px; flex-shrink: 0;
}
.stat-icon.blue   { background: var(--nq-primary-light); color: var(--nq-primary); }
.stat-icon.red    { background: var(--nq-accent-light);  color: var(--nq-accent); }
.stat-icon.green  { background: var(--nq-success-light); color: var(--nq-success); }
.stat-icon.orange { background: var(--nq-warning-light); color: var(--nq-warning); }
.stat-icon.navy   { background: var(--nq-primary-light); color: var(--nq-navy); }
.stat-icon.purple { background: #EDE9FE; color: #7C3AED; }
.stat-icon.teal   { background: #E0F7FA; color: #00796B; }
.stat-icon.indigo { background: #E8EAF6; color: #3949AB; }
[data-theme="dark"] .stat-icon.purple { background: #2D1B5A; }
[data-theme="dark"] .stat-icon.teal   { background: #0A2B2E; }
[data-theme="dark"] .stat-icon.indigo { background: #131B3A; }
.stat-value { font-family: var(--nq-font-heading); font-size: 28px; font-weight: 700; color: var(--nq-text); line-height: 1; }
.stat-label { font-size: var(--nq-text-xs); color: var(--nq-text-muted); text-transform: uppercase; letter-spacing: .7px; margin-top: 4px; }

/* ── COMPONENT: TABLES ──────────────────────────────────────── */
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table thead th {
  background: var(--nq-primary);
  color: rgba(255,255,255,.92);
  font-family: var(--nq-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  padding: 10px 12px;
  white-space: nowrap;
  border: none;
}
[data-theme="dark"] .cf-table thead th { background: var(--nq-primary-dark); }
.cf-table tbody tr { border-bottom: 1px solid var(--nq-border); }
.cf-table tbody tr:last-child { border-bottom: none; }
.cf-table tbody tr:hover { background: var(--nq-surface-sunken); }
[data-theme="dark"] .cf-table tbody tr:hover { background: var(--nq-surface-raised); }
.cf-table tbody td { padding: 10px 12px; vertical-align: middle; font-size: 13.5px; white-space: nowrap; color: var(--nq-text); }
.cf-table .td-main { font-weight: 600; color: var(--nq-navy); white-space: normal; }
[data-theme="dark"] .cf-table .td-main { color: var(--nq-text); }
.cf-table .td-sub  { font-size: 12px; color: var(--nq-text-muted); margin-top: 2px; white-space: normal; }

/* ── COMPONENT: FORMS ───────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: var(--nq-radius);
  border: 1.5px solid var(--nq-border);
  font-size: 14.5px;
  padding: 9px 13px;
  transition: border-color .2s, box-shadow .2s;
  background: var(--nq-surface);
  color: var(--nq-text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--nq-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-primary) 18%, transparent);
  outline: none;
}
.form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--nq-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}
.form-text { font-size: 12px; color: var(--nq-text-muted); margin-top: 4px; }
.form-section {
  background: var(--nq-bg);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.form-section-title {
  font-family: var(--nq-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--nq-navy);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nq-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .form-section-title { color: var(--nq-text); }

/* ── COMPONENT: BADGES ──────────────────────────────────────── */
.badge-cf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.1;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-active   { background: var(--nq-success-light); color: var(--nq-success); }
.badge-inactive { background: var(--nq-bg); color: var(--nq-text-muted); border: 1px solid var(--nq-border); }
.badge-warning  { background: var(--nq-warning-light); color: var(--nq-warning); }
.badge-info     { background: var(--nq-primary-light); color: var(--nq-primary-dark); }
.badge-danger   { background: var(--nq-danger-light);  color: var(--nq-danger); }
.badge-purple   { background: #EDE9FE; color: #7C3AED; }
[data-theme="dark"] .badge-inactive { background: var(--nq-surface-raised); }
[data-theme="dark"] .badge-purple   { background: #2D1B5A; }

/* ── COMPONENT: BUTTONS ─────────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--nq-radius); transition: all .18s; font-size: 13.5px; }
.btn-cf-primary {
  background: var(--nq-primary); border-color: var(--nq-primary); color: #fff; padding: 8px 18px;
}
.btn-cf-primary:hover {
  background: var(--nq-primary-dark); border-color: var(--nq-primary-dark); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nq-primary) 40%, transparent);
  transform: translateY(-1px);
}
.btn-cf-danger {
  background: var(--nq-accent); border-color: var(--nq-accent); color: #fff; padding: 8px 18px;
}
.btn-cf-danger:hover {
  background: var(--nq-accent-dark); border-color: var(--nq-accent-dark); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nq-accent) 40%, transparent);
  transform: translateY(-1px);
}
.btn-cf-outline {
  border: 1.5px solid var(--nq-primary); color: var(--nq-primary); background: transparent; padding: 7px 18px;
}
.btn-cf-outline:hover { background: var(--nq-primary); color: #fff; }
.btn-cf-ghost {
  border: 1.5px solid var(--nq-border); color: var(--nq-text); background: transparent; padding: 7px 14px;
}
.btn-cf-ghost:hover { background: var(--nq-surface-sunken); }
.btn-cf-soft {
  background: var(--nq-primary-light); color: var(--nq-primary-dark); border: none; padding: 7px 14px;
}
.btn-cf-soft:hover { background: var(--nq-primary-muted); color: var(--nq-primary-dark); }
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--nq-radius); font-size: 15px; }

/* ── COMPONENT: ALERTS ──────────────────────────────────────── */
.alert { border-radius: var(--nq-radius); font-size: 14px; padding: 13px 16px; }
[data-theme="dark"] .alert-success { background: var(--nq-success-light); color: var(--nq-success); border-color: transparent; }
[data-theme="dark"] .alert-danger  { background: var(--nq-danger-light);  color: var(--nq-danger);  border-color: transparent; }
[data-theme="dark"] .alert-warning { background: var(--nq-warning-light); color: var(--nq-warning); border-color: transparent; }
[data-theme="dark"] .alert-info    { background: var(--nq-info-light);    color: var(--nq-info);    border-color: transparent; }

/* ── COMPONENT: EMPTY STATE ─────────────────────────────────── */
.empty-state { text-align: center; padding: 56px 24px; color: var(--nq-text-muted); }
.empty-state .empty-icon { font-size: 52px; margin-bottom: 12px; opacity: .35; display: block; }
.empty-state h6 { font-family: var(--nq-font-heading); font-size: 18px; color: var(--nq-text); margin-bottom: 6px; }
.empty-state p  { font-size: 13.5px; margin: 0; }

/* ── COMPONENT: FILTER BAR ──────────────────────────────────── */
.filter-bar,
.filter-card {
  background: var(--nq-surface);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--nq-shadow-xs);
}

/* ── COMPONENT: PAGINATION ──────────────────────────────────── */
.pagination .page-link {
  color: var(--nq-primary);
  border-color: var(--nq-border);
  padding: 7px 13px;
  font-size: 13.5px;
  background: var(--nq-surface);
}
.pagination .page-item.active .page-link {
  background: var(--nq-primary);
  border-color: var(--nq-primary);
  color: #fff;
}
[data-theme="dark"] .pagination .page-link { background: var(--nq-surface-sunken); color: var(--nq-text-muted); border-color: var(--nq-border); }
[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--nq-primary); color: #fff; }

/* ── COMPONENT: TOGGLE BADGE ────────────────────────────────── */
.toggle-badge {
  cursor: pointer; border: none;
  padding: 5px 12px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; line-height: 1.1;
  white-space: nowrap; transition: all .15s;
}
.toggle-badge.on  { background: var(--nq-success-light); color: var(--nq-success); }
.toggle-badge.off { background: var(--nq-surface-sunken); color: var(--nq-text-muted); border: 1px solid var(--nq-border); }
.toggle-badge:hover { filter: brightness(.96); }

/* ── COMPONENT: SURFACE CARD (customer pages) ───────────────── */
.surface-card {
  background: var(--nq-surface);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  box-shadow: var(--nq-shadow-sm);
}
.surface-card.soft-shadow { box-shadow: var(--nq-shadow-xs); }

/* ── DASHBOARD TOPBAR ───────────────────────────────────────── */
[data-theme="dark"] .topbar {
  background: var(--nq-surface);
  border-bottom-color: var(--nq-border);
}
[data-theme="dark"] .topbar-title { color: var(--nq-text); }

/* ── DASHBOARD SIDEBAR ──────────────────────────────────────── */
#sidebar {
  background:
    radial-gradient(circle at top left, rgba(100,155,255,.22) 0%, transparent 34%),
    linear-gradient(180deg, var(--nq-sidebar-bg-from) 0%, var(--nq-sidebar-bg-to) 100%);
}
[data-theme="dark"] .sidebar-flyout-menu,
[data-theme="dark"] .sidebar-account-popover,
[data-theme="dark"] .sidebar-search-popover {
  background: var(--nq-surface);
  border-color: var(--nq-border);
  color: var(--nq-text);
}
[data-theme="dark"] #sidebarOverlay { background: rgba(0,0,0,.6); }

/* ── MAIN CONTENT AREA ──────────────────────────────────────── */
[data-theme="dark"] #main-content { background: var(--nq-bg); }

/* ── CUSTOMER NAV ───────────────────────────────────────────── */
[data-theme="dark"] .bottom-nav {
  background: var(--nq-surface);
  border-top-color: var(--nq-border);
  box-shadow: 0 -2px 20px rgba(0,0,0,.4);
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.text-blue   { color: var(--nq-primary)  !important; }
.text-red    { color: var(--nq-accent)   !important; }
.text-navy   { color: var(--nq-navy)     !important; }
.text-green  { color: var(--nq-success)  !important; }
.text-orange { color: #EA580C            !important; }
.text-purple { color: #7C3AED            !important; }
[data-theme="dark"] .text-navy { color: var(--nq-text) !important; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.divider { height: 1px; background: var(--nq-border); margin: 16px 0; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1399px) {
  /* NEVERQ_DESKTOP_SIDEBAR_READABILITY_FIX */
  :root {
    --sidebar-w:           260px;
    --sidebar-visible-w:   260px;
  }
}
@media (max-width: 1199px) {
  :root {
    --sidebar-w:           240px;
    --sidebar-visible-w:   240px;
  }
  .cf-table thead th { padding: 9px 10px; font-size: 11px; }
  .cf-table tbody td { padding: 9px 10px; font-size: 13px; }
}
@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .table-responsive,
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .filter-card form [style*="width:"],
  .filter-bar form [style*="width:"] {
    width: 100% !important;
  }
  .filter-card form > div,
  .filter-bar form > div {
    min-width: 0;
  }
  .btn:not(.btn-icon) {
    min-height: 38px;
    white-space: normal;
  }
  .cf-table { min-width: 600px; }
  .cf-table thead th { padding: 8px 10px; font-size: 11px; }
  .cf-table tbody td { padding: 8px 10px; font-size: 13px; }
  .stat-value { font-size: 22px; }
  .cf-card-body { padding: 16px; }
  .cf-card-header { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER PAGE DARK MODE OVERRIDES
   These override hardcoded colors in customer_base.html <style>
   and in page-specific <style> blocks.
═══════════════════════════════════════════════════════════════ */

/* ── Body / page background ─────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--nq-bg) !important;
  color: var(--nq-text);
}

/* ── Customer nav ───────────────────────────────────────────── */
[data-theme="dark"] .customer-nav {
  background: var(--nq-surface) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
[data-theme="dark"] .nav-brand { color: var(--nq-text); }
[data-theme="dark"] .brand-mark { background: linear-gradient(135deg, var(--nq-accent), var(--nq-primary)); }

/* ── Page strip (category/breadcrumb strip) ─────────────────── */
[data-theme="dark"] .page-strip {
  background: rgba(19,28,48,.92);
  border-bottom-color: var(--nq-border);
}

/* ── Hero shell ─────────────────────────────────────────────── */
[data-theme="dark"] .hero-shell {
  background: radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 36%),
              linear-gradient(135deg, #0B1828 0%, #0F2060 58%, #6B0F16 100%);
}

/* ── Surface & menu cards ───────────────────────────────────── */
[data-theme="dark"] .surface-card,
[data-theme="dark"] .menu-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .quick-link-card,
[data-theme="dark"] .mini-order-card,
[data-theme="dark"] .mini-square-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .final-panel,
[data-theme="dark"] .final-soft-panel {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .menu-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .quick-link-card:hover,
[data-theme="dark"] .mini-order-card:hover,
[data-theme="dark"] .mini-square-card:hover {
  border-color: var(--nq-primary) !important;
}

/* ── Product rows ───────────────────────────────────────────── */
[data-theme="dark"] .product-row,
[data-theme="dark"] .product-row-v2,
[data-theme="dark"] .product-thumb,
[data-theme="dark"] .product-row img {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .product-row:hover,
[data-theme="dark"] .product-row-v2:hover {
  border-color: var(--nq-primary) !important;
}

/* ── Phase2 hero card (product detail / menu banner) ─────────── */
[data-theme="dark"] .phase2-hero-card,
[data-theme="dark"] .web-hero-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .phase2-hero-body { background: var(--nq-surface); }

/* ── Veg / calorie chips ────────────────────────────────────── */
[data-theme="dark"] .phase2-veg-chip  { background: var(--nq-success-light) !important; color: var(--nq-success) !important; }
[data-theme="dark"] .phase2-calorie-chip,
[data-theme="dark"] .product-calorie-pill { background: var(--nq-warning-light) !important; color: var(--nq-warning) !important; }

/* ── Toolbar / search card ──────────────────────────────────── */
[data-theme="dark"] .phase2-toolbar-card,
[data-theme="dark"] .menu-toolbar-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}

/* ── Phase2 empty state ─────────────────────────────────────── */
[data-theme="dark"] .phase2-empty-state,
[data-theme="dark"] .empty-state {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}

/* ── Search shell & input ───────────────────────────────────── */
[data-theme="dark"] .search-shell {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .search-input { color: var(--nq-text); }
[data-theme="dark"] .search-input::placeholder { color: var(--nq-text-faint); }

/* ── Cat pills ──────────────────────────────────────────────── */
[data-theme="dark"] .cat-pill {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .cat-pill:hover,
[data-theme="dark"] .cat-pill.active {
  background: var(--nq-primary) !important;
  border-color: var(--nq-primary) !important;
  color: #fff !important;
}

/* ── Filter pills ───────────────────────────────────────────── */
[data-theme="dark"] .filter-pill {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text-muted) !important;
}
[data-theme="dark"] .filter-pill:hover { background: var(--nq-surface-raised) !important; color: var(--nq-text) !important; }
[data-theme="dark"] .filter-pill.active {
  background: linear-gradient(135deg, var(--nq-primary), var(--nq-primary-dark)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Filter toggle head ─────────────────────────────────────── */
[data-theme="dark"] .filter-toggle-head {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}

/* ── Veg-only toggle ────────────────────────────────────────── */
[data-theme="dark"] .veg-only-toggle {
  background: var(--nq-surface-sunken) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .veg-only-toggle:hover { background: var(--nq-surface-raised) !important; }
[data-theme="dark"] .veg-only-toggle.active {
  background: var(--nq-success-light) !important;
  color: var(--nq-success) !important;
}
[data-theme="dark"] .veg-toggle-mark { background: var(--nq-surface-raised); }
[data-theme="dark"] .veg-only-toggle.active .veg-toggle-mark { background: var(--nq-success-light); }
[data-theme="dark"] .veg-only-switch { background: #2E4A34; }
[data-theme="dark"] .veg-only-toggle.active .veg-only-switch { background: var(--nq-success); }
[data-theme="dark"] .veg-only-knob { background: var(--nq-surface); }

/* ── Food state toggle ──────────────────────────────────────── */
[data-theme="dark"] .food-state-toggle {
  background: var(--nq-surface-sunken) !important;
  box-shadow: inset 0 0 0 1px var(--nq-border) !important;
}
[data-theme="dark"] .food-toggle-label { color: var(--nq-text-muted) !important; }
[data-theme="dark"] .food-toggle-track { background: var(--nq-border-strong); }
[data-theme="dark"] .food-state-toggle.is-veg .food-toggle-track { background: #22863A; }
[data-theme="dark"] .food-state-toggle.is-nonveg .food-toggle-track { background: #B91C1C; }
[data-theme="dark"] .food-toggle-knob { background: var(--nq-text); }

/* ── Qty control ────────────────────────────────────────────── */
[data-theme="dark"] .qty-control {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .qty-btn { background: var(--nq-surface) !important; color: var(--nq-text) !important; }
[data-theme="dark"] .qty-btn.qty-plus { background: var(--nq-primary) !important; color: #fff !important; }
[data-theme="dark"] .qty-display { color: var(--nq-text) !important; }

/* ── Pill muted / soft ──────────────────────────────────────── */
[data-theme="dark"] .pill-muted { background: var(--nq-surface-raised) !important; color: var(--nq-text-muted) !important; }
[data-theme="dark"] .pill-soft  { background: var(--nq-primary-light) !important; color: var(--nq-primary) !important; }

/* ── Quick-link icon wraps ──────────────────────────────────── */
[data-theme="dark"] .quick-link-icon { background: var(--nq-primary-light) !important; }
[data-theme="dark"] .ql-icon-blue  { background: var(--nq-primary-light) !important; }
[data-theme="dark"] .ql-icon-red   { background: var(--nq-accent-light) !important; }
[data-theme="dark"] .ql-icon-navy  { background: var(--nq-primary-light) !important; }

/* ── Bootstrap subtle badges (customer pages) ───────────────── */
[data-theme="dark"] .bg-warning-subtle  { background: var(--nq-warning-light) !important; color: var(--nq-warning) !important; }
[data-theme="dark"] .bg-info-subtle     { background: var(--nq-info-light)    !important; color: var(--nq-info)    !important; }
[data-theme="dark"] .bg-primary-subtle  { background: var(--nq-primary-light) !important; color: var(--nq-primary) !important; }
[data-theme="dark"] .bg-success-subtle  { background: var(--nq-success-light) !important; color: var(--nq-success) !important; }
[data-theme="dark"] .bg-danger-subtle   { background: var(--nq-danger-light)  !important; color: var(--nq-danger)  !important; }
[data-theme="dark"] .bg-secondary-subtle{ background: var(--nq-surface-raised)!important; color: var(--nq-text-muted) !important; }

/* ── Checkout summary card ──────────────────────────────────── */
[data-theme="dark"] .checkout-summary {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .summary-row.total { color: var(--nq-primary) !important; border-top-color: var(--nq-border) !important; }

/* ── Progress track (order steps) ──────────────────────────── */
[data-theme="dark"] .progress-step {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .progress-step.complete { background: var(--nq-success-light) !important; border-color: rgba(34,197,94,.25) !important; }
[data-theme="dark"] .progress-step.current  { background: var(--nq-primary-light) !important; border-color: rgba(59,130,246,.28) !important; }
[data-theme="dark"] .progress-step .step-index { background: var(--nq-border-strong); }

/* ── Phase4 cafe select ─────────────────────────────────────── */
[data-theme="dark"] .phase4-cafe-select {
  background-color: var(--nq-surface-sunken) !important;
  color: var(--nq-text) !important;
  border-color: var(--nq-border) !important;
}

/* ── Footer shell ───────────────────────────────────────────── */
[data-theme="dark"] .footer-shell {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}

/* ── Notifications page ─────────────────────────────────────── */
[data-theme="dark"] .notif-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .notif-item { border-bottom-color: var(--nq-border) !important; }
[data-theme="dark"] .notif-item:hover { background: var(--nq-surface-raised) !important; }
[data-theme="dark"] .notif-item.unread { background: var(--nq-primary-light) !important; }
[data-theme="dark"] .nq-modal-msg { color: var(--nq-text-muted) !important; }
[data-theme="dark"] .nq-modal-close {
  background: var(--nq-surface-sunken) !important;
  color: var(--nq-text-muted) !important;
}

/* ── Profile page ───────────────────────────────────────────── */
[data-theme="dark"] .profile-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .profile-input,
[data-theme="dark"] .profile-readonly {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .profile-input:focus { background: var(--nq-surface-raised) !important; }
[data-theme="dark"] .logout-btn:hover { background: var(--nq-accent-light) !important; }

/* ── Staff link box (customer login) ────────────────────────── */
[data-theme="dark"] .staff-link-box {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .staff-link-copy { color: var(--nq-text-muted) !important; }
[data-theme="dark"] .staff-link-copy strong { color: var(--nq-text) !important; }
[data-theme="dark"] .staff-link-btn {
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
  background: var(--nq-surface) !important;
}
[data-theme="dark"] .staff-link-btn:hover { border-color: var(--nq-primary) !important; }

/* ── Error box (login page) ─────────────────────────────────── */
[data-theme="dark"] .err-box {
  background: var(--nq-danger-light) !important;
  border-color: rgba(248,113,113,.3) !important;
  color: var(--nq-danger) !important;
}

/* ── Login card (customer_login.html) ───────────────────────── */
[data-theme="dark"] .card {
  background: var(--nq-surface) !important;
}
[data-theme="dark"] .card h2 { color: var(--nq-text) !important; }
[data-theme="dark"] .field label { color: var(--nq-text-muted) !important; }
[data-theme="dark"] .input-wrap input {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .google-btn {
  background: var(--nq-surface-raised) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .divider::before,
[data-theme="dark"] .divider::after { background: var(--nq-border) !important; }

/* ── Staff login card ───────────────────────────────────────── */
[data-theme="dark"] .login-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .login-card h5 { color: var(--nq-text) !important; }
[data-theme="dark"] .input-group-text {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text-muted) !important;
}
[data-theme="dark"] .password-toggle {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text-muted) !important;
}
[data-theme="dark"] .password-toggle:hover,
[data-theme="dark"] .password-toggle:focus {
  background: var(--nq-surface-sunken) !important;
  color: var(--nq-primary) !important;
}
[data-theme="dark"] .alert-danger {
  background: var(--nq-danger-light) !important;
  color: var(--nq-danger) !important;
}

/* ── Mini square image placeholder ─────────────────────────── */
[data-theme="dark"] .mini-square-image { background: var(--nq-surface-raised) !important; }
[data-theme="dark"] .mini-square-title { color: var(--nq-text) !important; }

/* ── Web hero subtitle ──────────────────────────────────────── */
[data-theme="dark"] .web-hero-subtitle { color: var(--nq-text-muted) !important; }

/* ── Floating cart bar ──────────────────────────────────────── */
[data-theme="dark"] .floating-cart-bar {
  background: linear-gradient(135deg, var(--nq-surface-raised), var(--nq-surface)) !important;
  border: 1px solid var(--nq-border);
}

/* ── Tour popover ───────────────────────────────────────────── */
[data-theme="dark"] .tour-popover {
  background: var(--nq-surface) !important;
  border: 1px solid var(--nq-border);
}
[data-theme="dark"] .tour-overlay { background: rgba(0,0,0,.72) !important; }

/* ── OTP verify card ────────────────────────────────────────── */
[data-theme="dark"] .otp-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
}

/* ── General border overrides ───────────────────────────────── */
[data-theme="dark"] .border-light,
[data-theme="dark"] [style*="border:1px solid rgba(229"] {
  border-color: var(--nq-border) !important;
}

/* ── Inline background:white / #fff overrides ───────────────── */
/* Catches remaining inline style="background:white|#fff" patterns.
   These use attribute substring selectors so any element with that exact
   string in its style attribute gets the dark-mode override. */

/* Buttons & links with white/fff background */
[data-theme="dark"] .btn[style*="background:white"],
[data-theme="dark"] .btn[style*="background: white"],
[data-theme="dark"] .btn[style*="background:#fff"],
[data-theme="dark"] .btn[style*="background: #fff"],
[data-theme="dark"] a.btn[style*="background:white"],
[data-theme="dark"] a.btn[style*="background:#fff"] {
  background: var(--nq-surface) !important;
  color: var(--nq-text) !important;
  border-color: var(--nq-border) !important;
}
/* Divs and containers */
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background: rgba(255,255,255,.98)"],
[data-theme="dark"] div[style*="background:rgba(255,255,255,.98)"] {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
/* Labels (checkbox groups etc.) */
[data-theme="dark"] label[style*="background:white"],
[data-theme="dark"] label[style*="background: white"],
[data-theme="dark"] label[style*="background:#fff"],
[data-theme="dark"] label[style*="background: #fff"] {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
/* Spans (input-group-text etc.) */
[data-theme="dark"] span[style*="background:white"],
[data-theme="dark"] span[style*="background: white"],
[data-theme="dark"] span[style*="background:#fff"],
[data-theme="dark"] span[style*="background: #fff"] {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text-muted) !important;
}
/* Delete buttons with #fecaca border: keep red border, darken bg */
[data-theme="dark"] .btn[style*="border:1.5px solid #fecaca"],
[data-theme="dark"] .btn[style*="border: 1.5px solid #fecaca"] {
  background: var(--nq-danger-light) !important;
  border-color: rgba(248,113,113,.4) !important;
}

/* ── Common light-bg patterns across dashboard templates ────── */

/* #f8f9fa / #f8fafc / #f9fafb — light grey "sunken" backgrounds */
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"] {
  background: var(--nq-surface-sunken) !important;
  color: var(--nq-text) !important;
  border-color: var(--nq-border) !important;
}

/* Warning/amber reorder bars (#fffbeb bg, #fde68a border) */
[data-theme="dark"] .reorder-bar {
  background: var(--nq-warning-light) !important;
  border-color: rgba(252,211,77,.3) !important;
}
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"] {
  background: var(--nq-warning-light) !important;
  border-color: rgba(252,211,77,.3) !important;
}

/* Stock row alert (#fff8eb) */
[data-theme="dark"] .stock-row-alert { background: var(--nq-warning-light) !important; }

/* #fff8e6 / #fff3e0 — amber/orange tint backgrounds */
[data-theme="dark"] [style*="background:#fff8e6"],
[data-theme="dark"] [style*="background:#fff3e0"],
[data-theme="dark"] [style*="background: #fff3e0"],
[data-theme="dark"] [style*="background:#fff4e5"],
[data-theme="dark"] [style*="background: #fff4e5"] {
  background: var(--nq-warning-light) !important;
  border-color: rgba(252,211,77,.3) !important;
}

/* #fef3c7 / #fef2f2 / #fee2e2 — semantic badge backgrounds */
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"] {
  background: var(--nq-warning-light) !important;
  color: var(--nq-warning) !important;
}
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"],
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"] {
  background: var(--nq-danger-light) !important;
  color: var(--nq-danger) !important;
}
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"],
[data-theme="dark"] [style*="background:#e8f5e9"],
[data-theme="dark"] [style*="background: #e8f5e9"] {
  background: var(--nq-success-light) !important;
  color: var(--nq-success) !important;
}
[data-theme="dark"] [style*="background:#faf5ff"],
[data-theme="dark"] [style*="background: #faf5ff"],
[data-theme="dark"] [style*="background:#ede9fe"],
[data-theme="dark"] [style*="background: #ede9fe"] {
  background: #2D1B5A !important;
  color: #A78BFA !important;
}

/* Permission matrix / hierarchy info panels */
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"] {
  background: var(--nq-warning-light) !important;
  border-color: rgba(252,211,77,.3) !important;
}
[data-theme="dark"] [style*="background:#ffedd5"],
[data-theme="dark"] [style*="background: #ffedd5"] {
  background: var(--nq-warning-light) !important;
  color: var(--nq-warning) !important;
}

/* Customer form sections */
[data-theme="dark"] .customer-form-section {
  background: var(--nq-surface-sunken) !important;
  border-color: var(--nq-border) !important;
}
[data-theme="dark"] .customer-form-section h6 { color: var(--nq-text) !important; }

/* Benefit cards */
[data-theme="dark"] .benefit-card {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}

/* Wallet recharge summary */
[data-theme="dark"] #rechargeSummaryBox {
  background: var(--nq-warning-light) !important;
  border-color: rgba(252,211,77,.35) !important;
}

/* Category/offering/counter form company list */
[data-theme="dark"] [style*="background:var(--cf-surface)"] {
  background: var(--nq-surface-sunken) !important;
}

/* Dashboard: sidebar flyout in dark mode ─────────────────── */
[data-theme="dark"] .sidebar-flyout-bg,
[data-theme="dark"] .flyout-menu,
[data-theme="dark"] .flyout-label,
[data-theme="dark"] .flyout-panel {
  background: var(--nq-surface) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .flyout-item:hover { background: var(--nq-surface-raised) !important; }

/* NEVERQ_CUSTOMER_DARK_PAGE_CARDS_FIX */
[data-theme="dark"] .wallet-card,
[data-theme="dark"] .wallet-meta-box,
[data-theme="dark"] .order-kpi-card,
[data-theme="dark"] .order-list-card,
[data-theme="dark"] .order-detail-card,
[data-theme="dark"] .phase4-summary-card,
[data-theme="dark"] .final-panel,
[data-theme="dark"] .surface-card,
[data-theme="dark"] .mini-order-card,
[data-theme="dark"] .product-row-v2,
[data-theme="dark"] #notifPanel {
  background: var(--nq-surface) !important;
  background-image: none !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .wallet-meta-box,
[data-theme="dark"] .order-kpi-card,
[data-theme="dark"] .order-mini,
[data-theme="dark"] .ticket-card-clean,
[data-theme="dark"] .timeline-card-clean,
[data-theme="dark"] .item-card-clean,
[data-theme="dark"] .phase4-section-block,
[data-theme="dark"] .phase4-mini-row,
[data-theme="dark"] .final-stat-box {
  background: var(--nq-surface-raised) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}
[data-theme="dark"] .wallet-note {
  background: var(--nq-warning-light) !important;
  border-color: rgba(252,211,77,.35) !important;
  color: var(--nq-warning) !important;
}
[data-theme="dark"] #notifPanel [style*="background:#fff"],
[data-theme="dark"] #notifPanel [style*="background: #fff"],
[data-theme="dark"] #notifPanel .empty-state {
  background: var(--nq-surface-raised) !important;
  border-color: var(--nq-border) !important;
  color: var(--nq-text) !important;
}

/* NEVERQ_CUSTOMER_FLOW_DARK_PANEL_FIX */

  
    /* NEVERQ_CUSTOMER_FLOW_DARK_PANEL_FIX */
    [data-theme="dark"] .phase3-detail-card,[data-theme="dark"] .phase3-detail-body,[data-theme="dark"] .phase3-price-panel,[data-theme="dark"] .phase3-buybar,[data-theme="dark"] .phase3-detail-info-strip,[data-theme="dark"] .phase4-card,[data-theme="dark"] .phase4-card-body,[data-theme="dark"] .phase4-cart-item,[data-theme="dark"] .phase4-summary-card,[data-theme="dark"] .phase4-section-block,[data-theme="dark"] .confirm-hero,[data-theme="dark"] .confirm-order-no,[data-theme="dark"] .confirm-qr-card,[data-theme="dark"] .confirm-item-card{background:var(--nq-surface)!important;background-image:none!important;border-color:var(--nq-border)!important;color:var(--nq-text)!important;box-shadow:var(--nq-shadow-sm)!important}
    [data-theme="dark"] .phase3-price-panel,[data-theme="dark"] .phase3-buybar,[data-theme="dark"] .phase4-card,[data-theme="dark"] .phase4-cart-item,[data-theme="dark"] .phase4-section-block,[data-theme="dark"] .phase4-mini-row,[data-theme="dark"] .phase4-payment-option,[data-theme="dark"] .confirm-order-no,[data-theme="dark"] .confirm-qr-card,[data-theme="dark"] .confirm-item-card{background:var(--nq-surface-raised)!important;background-image:none!important;border-color:var(--nq-border)!important;color:var(--nq-text)!important}
    [data-theme="dark"] .phase3-detail-title,[data-theme="dark"] .phase3-detail-price,[data-theme="dark"] .phase4-header-copy h3,[data-theme="dark"] .phase4-card-title,[data-theme="dark"] .phase4-item-name,[data-theme="dark"] .phase4-linebox .pprice,[data-theme="dark"] .confirm-title,[data-theme="dark"] .metric-value,[data-theme="dark"] .confirm-hero h1,[data-theme="dark"] .confirm-hero h4,[data-theme="dark"] .confirm-hero .fw-bold{color:var(--nq-text)!important}
    [data-theme="dark"] .phase3-detail-kicker,[data-theme="dark"] .phase3-detail-desc,[data-theme="dark"] .phase3-price-label,[data-theme="dark"] .phase3-packing-note,[data-theme="dark"] .phase4-header-copy p,[data-theme="dark"] .phase4-card-note,[data-theme="dark"] .phase4-item-submeta,[data-theme="dark"] .phase4-linebox .line-label,[data-theme="dark"] .metric-label,[data-theme="dark"] .confirm-hero .text-muted,[data-theme="dark"] .confirm-hero .section-subtitle{color:var(--nq-text-muted)!important}
    [data-theme="dark"] .phase3-detail-tags .pill-muted,[data-theme="dark"] .phase3-detail-tags .pill-outline,[data-theme="dark"] .phase3-detail-info-strip .pill-muted,[data-theme="dark"] .phase4-item-meta .pill-soft,[data-theme="dark"] .pill-muted{background:var(--nq-surface-sunken)!important;border-color:var(--nq-border)!important;color:var(--nq-text-muted)!important}
    [data-theme="dark"] .qty-control,[data-theme="dark"] .phase3-qty-control{background:var(--nq-surface-sunken)!important;border-color:var(--nq-border)!important}
    [data-theme="dark"] .qty-btn{background:var(--nq-surface-raised)!important;color:var(--nq-text)!important;border-color:var(--nq-border)!important}
    [data-theme="dark"] .qty-btn.qty-plus{background:var(--nq-danger)!important;color:#fff!important}
    [data-theme="dark"] .phase3-add-form .btn-cf-outline,[data-theme="dark"] .phase4-item-actions .btn-cf-outline,[data-theme="dark"] .confirm-hero .btn-cf-outline{background:var(--nq-surface-sunken)!important;border-color:var(--nq-border)!important;color:var(--nq-primary)!important}
    [data-theme="dark"] .phase4-payment-option input[type="radio"]{accent-color:var(--nq-danger)}
    [data-theme="dark"] .phase4-thumb,[data-theme="dark"] .phase4-thumb-fallback{background:var(--nq-surface-sunken)!important;border-color:var(--nq-border)!important}