/* =========================================================================
   RadSpot custom.css -- TailAdmin-inspired visual reskin
   =========================================================================
   Loaded by application/views/includes/header.php, right after
   assets/dist/css/adminlte.min.css, on every single page in this app.
   This file previously did not exist (the <link> tag 404'd silently) --
   populating it is the entire reskin mechanism: no header.php, footer.php,
   or view-file edits are needed for this workstream.

   GROUND RULES (do not violate these when editing this file):
   - Bootstrap 4's compiled CSS here does not expose component colors as
     CSS custom properties -- .btn-primary etc. are literal hex values in
     adminlte.min.css, so overriding means re-declaring each class here,
     not just redefining a handful of root variables.
   - NEVER set margin / padding / width / position / display / flex on
     .content-wrapper, .container-fluid, or .content-header (or any
     selector targeting them). This app has a long, painful history of
     AdminLTE's global ".content-wrapper { margin-left: 250px }" rule
     leaking into places it shouldn't (e.g. forms loaded into modals) --
     usersManagementDashboard.php (the live Billing & Expiry dashboard)
     already carries its own scoped
     "#dashboardRechargeFormBody .content-wrapper { margin-left: 0 !important }"
     workaround for exactly this. Only background-color / color / border /
     border-radius / box-shadow / font-* properties are safe here.
   - A CSS comment ends at the first closing marker it finds, so never
     spell out either comment delimiter -- opening or closing, even inside
     an example or a quoted pattern -- as literal text within a comment's
     own body. Doing that truncates the comment early and silently turns
     everything after it into garbage CSS (this file's own header comment
     did exactly that once, mid-edit, and had to be rewritten again).
     A prior, unrelated incident in this app lost 4 real CSS rules for a
     day this same way, closed accidentally with an HTML-style arrow
     instead of the real CSS marker. After editing this file, have an
     assistant (or a script that strips real comments first) confirm no
     comment delimiter remains unmatched and every brace still balances.
   ========================================================================= */

:root {
  --tw-primary:        #465FFF;
  --tw-primary-hover:  #3641F5;
  --tw-primary-active: #2A33C7;
  --tw-page-bg:        #F9FAFB;
  --tw-card-bg:        #FFFFFF;
  --tw-card-border:    #E7EAF0;
  --tw-text-body:      #1D2939;
  --tw-text-muted:     #667085;
  --tw-radius-sm:      0.5rem;
  --tw-radius-md:      0.625rem;
  --tw-radius-lg:      0.75rem;
  --tw-shadow-card:    0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --tw-font:           'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;

  /* =========================================================================
     Cyberpunk HUD Dark Mode Palette (matching Real-Time Traffic Monitor)
     Deep Space Navy/Black canvas (#070817 -> #0b0d26 -> #141738) with Electric
     Cyan (#00e5ff), Hot Pink (#ff007a), and subtle glowing telemetry borders.
     ========================================================================= */
  --tw-dark-page-bg:     #080a1c;
  --tw-dark-chrome-bg:   #090b20;
  --tw-dark-sidebar-bg:  #080a1a;
  --tw-dark-card-bg:     rgba(17, 20, 53, 0.85);
  --tw-dark-card-header: rgba(12, 14, 39, 0.95);
  --tw-dark-card-border: rgba(80, 100, 200, 0.25);
  --tw-dark-border-glow: rgba(0, 229, 255, 0.35);
  --tw-dark-text-body:   #F8FAFC;
  --tw-dark-text-muted:  #94A3B8;
  --tw-cyber-cyan:       #00e5ff;
  --tw-cyber-blue:       #0051ff;
  --tw-cyber-pink:       #ff007a;
  --tw-cyber-amber:      #ff7a00;
  --tw-cyber-emerald:    #00e676;
}

/* -------------------------------------------------------------------------
   Stage A -- surface & typography (lowest risk, ships first)
   Only background-color / color / border / border-radius / box-shadow /
   font-* below. No margin/padding/width/position/display/flex anywhere
   in this stage, per the ground rules above.
   ------------------------------------------------------------------------- */

body,
.content-wrapper {
  background-color: var(--tw-page-bg);
  color: var(--tw-text-body);
  font-family: var(--tw-font);
}

.card {
  background-color: var(--tw-card-bg);
  border: 1px solid var(--tw-card-border);
  border-radius: var(--tw-radius-md);
  box-shadow: var(--tw-shadow-card);
}

.card-header {
  background-color: var(--tw-card-bg);
  border-bottom: 1px solid var(--tw-card-border);
  border-top-left-radius: var(--tw-radius-md);
  border-top-right-radius: var(--tw-radius-md);
}

.card-primary:not(.card-outline) > .card-header {
  background-color: var(--tw-primary);
  border-color: var(--tw-primary);
  color: #fff;
}

.small-box,
.info-box {
  border-radius: var(--tw-radius-md);
  box-shadow: var(--tw-shadow-card);
}

/* -------------------------------------------------------------------------
   Stage B -- button / alert / badge / text color remap
   Largest block in this file by line count: every color below needs its
   hover / focus / active state re-declared too, or a button visually
   reverts to Bootstrap's default color the moment a user's mouse touches
   it. Ships and is reviewed as its own separate pass, after Stage A.
   ------------------------------------------------------------------------- */

.btn-primary {
  background-color: var(--tw-primary);
  border-color: var(--tw-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--tw-primary-hover);
  border-color: var(--tw-primary-hover);
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(70, 95, 255, 0.35);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--tw-primary-active);
  border-color: var(--tw-primary-active);
}

.btn-success {
  background-color: #12B76A;
  border-color: #12B76A;
  color: #fff;
}
.btn-success:hover {
  background-color: #099250;
  border-color: #099250;
}
.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(18, 183, 106, 0.35);
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
  background-color: #087443;
  border-color: #087443;
}

.btn-danger {
  background-color: #F04438;
  border-color: #F04438;
  color: #fff;
}
.btn-danger:hover {
  background-color: #D92D20;
  border-color: #D92D20;
}
.btn-danger:focus,
.btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 68, 56, 0.35);
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
  background-color: #B42318;
  border-color: #B42318;
}

.btn-warning {
  background-color: #F79009;
  border-color: #F79009;
  color: #fff;
}
.btn-warning:hover {
  background-color: #DC6803;
  border-color: #DC6803;
  color: #fff;
}
.btn-warning:focus,
.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(247, 144, 9, 0.35);
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
  background-color: #B54708;
  border-color: #B54708;
  color: #fff;
}

.btn-info {
  background-color: #0BA5EC;
  border-color: #0BA5EC;
  color: #fff;
}
.btn-info:hover {
  background-color: #0086C9;
  border-color: #0086C9;
}
.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(11, 165, 236, 0.35);
}
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
  background-color: #026AA2;
  border-color: #026AA2;
}

.btn-secondary {
  background-color: #667085;
  border-color: #667085;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #475467;
  border-color: #475467;
}
.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(102, 112, 133, 0.35);
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: #344054;
  border-color: #344054;
}

.alert-danger {
  color: #912018;
  background-color: #FEE4E2;
  border-color: #FDA29B;
}
.alert-success {
  color: #05603A;
  background-color: #D1FADF;
  border-color: #6CE9A6;
}
.alert-info {
  color: #175CD3;
  background-color: #D1E9FF;
  border-color: #84CAFF;
}
.alert-warning {
  color: #93370D;
  background-color: #FEF0C7;
  border-color: #FEC84B;
}

.badge-success   { background-color: #12B76A; }
.badge-danger    { background-color: #F04438; }
.badge-warning   { background-color: #F79009; color: #fff; }
.badge-info      { background-color: #0BA5EC; }
.badge-secondary { background-color: #667085; }
.badge-primary   { background-color: var(--tw-primary); }

.text-danger  { color: #F04438 !important; }
.text-success { color: #12B76A !important; }
.text-info    { color: #0BA5EC !important; }
.text-warning { color: #F79009 !important; }
.text-muted   { color: var(--tw-text-muted) !important; }
.text-primary { color: var(--tw-primary) !important; }

.bg-primary   { background-color: var(--tw-primary) !important; }
.bg-success   { background-color: #12B76A !important; }
.bg-danger    { background-color: #F04438 !important; }
.bg-warning   { background-color: #F79009 !important; }
.bg-info      { background-color: #0BA5EC !important; }
.bg-secondary { background-color: #667085 !important; }

/* -------------------------------------------------------------------------
   Stage C -- sidebar / navbar skin swap
   Highest visual impact, highest scrutiny layer, ships and is reviewed
   alone, last. AdminLTE's own dark-sidebar background comes from an
   attribute selector (matches any class name containing the substring
   "sidebar-dark-"), specificity weight 0-1-0 -- the two-class selector
   below (0-2-0) reliably outranks it regardless of adminlte.min.css's
   own internal rule order, so no !important is needed here.
   data-widget="treeview" / data-widget="pushmenu" (AdminLTE's own JS,
   not Bootstrap) are untouched -- this only recolors, it never changes
   which element carries those attributes or how they're structured.
   ------------------------------------------------------------------------- */

.main-sidebar.sidebar-dark-primary {
  background-color: var(--tw-text-body);
}
.main-sidebar.sidebar-dark-primary .brand-link {
  background-color: var(--tw-text-body);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--tw-primary);
  color: #fff;
}
[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link {
  background-color: rgba(70, 95, 255, 0.15);
}

.navbar-white.navbar-light {
  background-color: var(--tw-card-bg);
  border-bottom: 1px solid var(--tw-card-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* -------------------------------------------------------------------------
   Sidebar leaf-item icons -- small colored circle badges replacing the old
   plain fa-circle dots, so each menu item still carries real meaning when
   the mini-sidebar is collapsed to icon-only. Light+dark identical (same
   reasoning as buttons/badges elsewhere in this file: already vivid enough
   to read on both surfaces, no separate dark variant needed). Markup is
   <span class="nav-icon nav-icon-badge nav-icon-badge-{color}"><i .../></span>
   -- "nav-icon" is kept on the OUTER span (not the inner <i>) specifically
   because AdminLTE's own mini-sidebar collapse CSS only ever hides the
   sibling <p> label text; it never inspects the icon element's own tag or
   structure, confirmed by reading adminlte.css directly before making this
   change -- so wrapping the icon in a badge span is safe and doesn't
   interfere with collapse/expand behavior.
   ------------------------------------------------------------------------- */

.nav-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--tw-primary);
  flex-shrink: 0;
}
.nav-icon-badge i {
  color: #fff;
  font-size: 0.65rem;
}
.nav-icon-badge-danger    { background-color: #F04438; }
.nav-icon-badge-success   { background-color: #12B76A; }
.nav-icon-badge-info      { background-color: #0BA5EC; }
.nav-icon-badge-warning   { background-color: #F79009; }
.nav-icon-badge-secondary { background-color: #667085; }
.nav-icon-badge-muted     { background-color: #94969C; }

/* -------------------------------------------------------------------------
   Stage D -- back-navigation button (application/views/includes/page_header.php)
   ------------------------------------------------------------------------- */

.page-back-btn {
  background-color: var(--tw-card-bg);
  border: 1px solid var(--tw-card-border);
  color: var(--tw-primary);
  border-radius: var(--tw-radius-sm);
}
.page-back-btn:hover {
  background-color: var(--tw-page-bg);
  color: var(--tw-primary-hover);
}

/* -------------------------------------------------------------------------
   Stage E -- Cyberpunk HUD Dark Mode
   Transformed to match the Real-Time Traffic Monitor aesthetic:
   - Deep Space Canvas: radial gradient (#141738 -> #0b0d26 -> #070817)
   - Translucent Glassmorphic Cards with subtle cyan glowing borders
   - Solid Deep Midnight-Black Sidebar (#080a1c) with glowing cyan active tab
   - Electric Cyan Gradient primary buttons (#0051ff -> #00e5ff) with dark text
   - Crisp Cyber Cyan table headers with high-contrast text
   - Glowing inputs, neon badges, and telemetry accents
   ------------------------------------------------------------------------- */

body.dark-mode,
body.dark-mode .content-wrapper {
  background: radial-gradient(circle at 50% 12%, #141738 0%, #0b0d26 55%, #070817 100%) fixed !important;
  color: var(--tw-dark-text-body);
}

/* Cards & Containers */
body.dark-mode .card {
  background-color: var(--tw-dark-card-bg);
  border: 1px solid var(--tw-dark-card-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 212, 255, 0.05);
  border-radius: var(--tw-radius-md);
  backdrop-filter: blur(8px);
  color: var(--tw-dark-text-body);
}

body.dark-mode .card-header {
  background-color: var(--tw-dark-card-header);
  border-bottom: 1px solid var(--tw-dark-card-border);
}

body.dark-mode .card-primary:not(.card-outline) > .card-header {
  background: linear-gradient(135deg, rgba(0, 81, 255, 0.85), rgba(0, 229, 255, 0.85)) !important;
  border-bottom: 1px solid var(--tw-cyber-cyan);
  color: #fff;
}

body.dark-mode .card-primary.card-outline {
  border-top: 3px solid var(--tw-cyber-cyan);
}

/* Navbar */
body.dark-mode .navbar-white.navbar-light {
  background-color: rgba(12, 14, 39, 0.95) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  color: var(--tw-dark-text-body);
}

body.dark-mode .navbar-white.navbar-light .navbar-nav .nav-link {
  color: var(--tw-dark-text-body);
}

body.dark-mode .navbar-white.navbar-light .navbar-nav .nav-link:hover,
body.dark-mode .navbar-white.navbar-light .navbar-nav .nav-link:focus {
  color: var(--tw-cyber-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

body.dark-mode #darkModeToggle i {
  color: var(--tw-cyber-cyan);
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7));
}

/* Sidebar: Solid deep midnight-black for maximum text legibility */
body.dark-mode .main-sidebar.sidebar-dark-primary {
  background-color: var(--tw-dark-sidebar-bg) !important;
  border-right: 1px solid rgba(80, 100, 200, 0.22);
}

body.dark-mode .main-sidebar.sidebar-dark-primary .brand-link {
  background-color: #060816 !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
  color: #fff;
}

body.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.25), rgba(0, 81, 255, 0.2)) !important;
  border-left: 3px solid var(--tw-cyber-cyan);
  color: var(--tw-cyber-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
  font-weight: 700;
}

body.dark-mode [class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
body.dark-mode [class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link {
  background-color: rgba(0, 229, 255, 0.08);
  color: #fff;
}

body.dark-mode .sidebar-dark-primary .nav-treeview {
  background-color: rgba(5, 7, 18, 0.65);
}

/* Primary Button: Electric cyan gradient with glowing shadow */
body.dark-mode .btn-primary {
  background: linear-gradient(135deg, #0051ff 0%, #00e5ff 100%) !important;
  border: none !important;
  color: #070817 !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
  text-shadow: none;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
  background: linear-gradient(135deg, #0040cc 0%, #00c8e0 100%) !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.65);
  color: #050612 !important;
}

body.dark-mode .btn-secondary {
  background-color: rgba(80, 100, 200, 0.25);
  border-color: rgba(80, 100, 200, 0.4);
  color: #e2e8f0;
}

body.dark-mode .btn-secondary:hover {
  background-color: rgba(80, 100, 200, 0.4);
  color: #fff;
}

body.dark-mode .btn-info {
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid var(--tw-cyber-cyan);
  color: var(--tw-cyber-cyan);
  font-weight: 600;
}

body.dark-mode .btn-info:hover {
  background: var(--tw-cyber-cyan);
  color: #070817;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

body.dark-mode .btn-light {
  background-color: rgba(14, 18, 48, 0.85);
  border-color: var(--tw-dark-card-border);
  color: var(--tw-dark-text-body);
}

body.dark-mode .btn-light:hover {
  background-color: var(--tw-dark-card-border);
  color: #fff;
}

body.dark-mode .btn-success {
  background: rgba(0, 230, 118, 0.15) !important;
  border: 1px solid var(--tw-cyber-emerald) !important;
  color: var(--tw-cyber-emerald) !important;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.25);
}

body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus {
  background: var(--tw-cyber-emerald) !important;
  color: #070817 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.6);
}

body.dark-mode .btn-warning {
  background: rgba(255, 122, 0, 0.15) !important;
  border: 1px solid var(--tw-cyber-amber) !important;
  color: var(--tw-cyber-amber) !important;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(255, 122, 0, 0.25);
}

body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:focus {
  background: var(--tw-cyber-amber) !important;
  color: #070817 !important;
  box-shadow: 0 0 16px rgba(255, 122, 0, 0.6);
}

body.dark-mode .btn-danger {
  background: rgba(255, 0, 122, 0.15) !important;
  border: 1px solid var(--tw-cyber-pink) !important;
  color: var(--tw-cyber-pink) !important;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(255, 0, 122, 0.25);
}

body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:focus {
  background: var(--tw-cyber-pink) !important;
  color: #070817 !important;
  box-shadow: 0 0 16px rgba(255, 0, 122, 0.6);
}

body.dark-mode .btn-default {
  background: rgba(80, 100, 200, 0.25) !important;
  border: 1px solid rgba(80, 100, 200, 0.4) !important;
  color: #e2e8f0 !important;
}

body.dark-mode .btn-default:hover {
  background: rgba(80, 100, 200, 0.4) !important;
  color: #ffffff !important;
}

body.dark-mode .btn-outline-secondary {
  border-color: rgba(80, 100, 200, 0.45) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: rgba(80, 100, 200, 0.3) !important;
  color: #ffffff !important;
}

body.dark-mode .btn-outline-danger {
  border-color: rgba(255, 0, 122, 0.5) !important;
  color: var(--tw-cyber-pink) !important;
}

body.dark-mode .btn-outline-danger:hover {
  background-color: rgba(255, 0, 122, 0.25) !important;
  color: #ffffff !important;
}

body.dark-mode .btn:disabled,
body.dark-mode .btn.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Alerts */
body.dark-mode .alert-danger {
  color: #ff4d8d;
  background-color: rgba(255, 0, 122, 0.12);
  border-color: rgba(255, 0, 122, 0.35);
}

body.dark-mode .alert-success {
  color: #4ade80;
  background-color: rgba(0, 230, 118, 0.12);
  border-color: rgba(0, 230, 118, 0.35);
}

body.dark-mode .alert-info {
  color: var(--tw-cyber-cyan);
  background-color: rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.35);
}

body.dark-mode .alert-warning {
  color: #fbbf24;
  background-color: rgba(255, 122, 0, 0.12);
  border-color: rgba(255, 122, 0, 0.35);
}

body.dark-mode .alert-light {
  color: var(--tw-dark-text-muted);
  background-color: var(--tw-dark-card-bg);
  border-color: var(--tw-dark-card-border);
}

/* Badges with subtle glow */
body.dark-mode .badge-primary {
  background-color: rgba(0, 229, 255, 0.15);
  color: var(--tw-cyber-cyan);
  border: 1px solid rgba(0, 229, 255, 0.4);
}

body.dark-mode .badge-success {
  background-color: rgba(0, 230, 118, 0.15);
  color: var(--tw-cyber-emerald);
  border: 1px solid rgba(0, 230, 118, 0.35);
}

body.dark-mode .badge-danger {
  background-color: rgba(255, 0, 122, 0.15);
  color: var(--tw-cyber-pink);
  border: 1px solid rgba(255, 0, 122, 0.35);
}

body.dark-mode .badge-warning {
  background-color: rgba(255, 122, 0, 0.15);
  color: var(--tw-cyber-amber);
  border: 1px solid rgba(255, 122, 0, 0.35);
}

body.dark-mode .badge-info {
  background-color: rgba(0, 229, 255, 0.15);
  color: var(--tw-cyber-cyan);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

body.dark-mode .badge-light {
  background-color: rgba(80, 100, 200, 0.2);
  color: var(--tw-dark-text-body);
  border: 1px solid rgba(80, 100, 200, 0.3) !important;
}

body.dark-mode .bg-danger,
body.dark-mode .badge.bg-danger {
  background-color: rgba(255, 0, 122, 0.2) !important;
  color: var(--tw-cyber-pink) !important;
  border: 1px solid rgba(255, 0, 122, 0.4);
}

body.dark-mode .bg-success,
body.dark-mode .badge.bg-success {
  background-color: rgba(0, 230, 118, 0.2) !important;
  color: var(--tw-cyber-emerald) !important;
  border: 1px solid rgba(0, 230, 118, 0.4);
}

body.dark-mode .bg-warning,
body.dark-mode .badge.bg-warning {
  background-color: rgba(255, 122, 0, 0.2) !important;
  color: var(--tw-cyber-amber) !important;
  border: 1px solid rgba(255, 122, 0, 0.4);
}

body.dark-mode .bg-info,
body.dark-mode .badge.bg-info {
  background-color: rgba(0, 229, 255, 0.2) !important;
  color: var(--tw-cyber-cyan) !important;
  border: 1px solid rgba(0, 229, 255, 0.4);
}

body.dark-mode .text-muted {
  color: var(--tw-dark-text-muted) !important;
}

body.dark-mode .page-back-btn {
  background-color: var(--tw-dark-card-bg);
  border-color: var(--tw-dark-card-border);
  color: var(--tw-cyber-cyan);
}

body.dark-mode .page-back-btn:hover {
  background-color: rgba(0, 229, 255, 0.15);
  color: #fff;
  border-color: var(--tw-cyber-cyan);
}

/* -------------------------------------------------------------------------
   Stage F -- Form controls & Select2 dark mode
   ------------------------------------------------------------------------- */

body.dark-mode .form-control {
  background-color: rgba(11, 14, 38, 0.85);
  border: 1px solid rgba(80, 100, 200, 0.32);
  color: #ffffff;
  border-radius: var(--tw-radius-sm);
}

body.dark-mode .form-control:focus {
  background-color: #0d1133;
  border-color: var(--tw-cyber-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
  color: #ffffff;
}

body.dark-mode .input-group-text {
  background-color: rgba(14, 18, 48, 0.95);
  border-color: rgba(80, 100, 200, 0.32);
  color: var(--tw-cyber-cyan);
}

body.dark-mode select.form-control option {
  background-color: #0c0e27;
  color: #ffffff;
}

body.dark-mode input[type="checkbox"] {
  accent-color: var(--tw-cyber-cyan);
}

body.dark-mode .select2-container--bootstrap4 .select2-selection,
body.dark-mode .select2-container--default .select2-selection--single {
  background-color: rgba(11, 14, 38, 0.85);
  border-color: rgba(80, 100, 200, 0.32);
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--tw-dark-text-body);
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--tw-dark-text-muted);
}

body.dark-mode .select2-dropdown {
  background-color: #0c0e27;
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

body.dark-mode .select2-search--dropdown .select2-search__field {
  background-color: rgba(11, 14, 38, 0.9);
  border-color: rgba(80, 100, 200, 0.35);
  color: var(--tw-dark-text-body);
}

body.dark-mode .select2-results__option {
  color: var(--tw-dark-text-body);
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted,
body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"],
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(90deg, rgba(0, 81, 255, 0.8), rgba(0, 229, 255, 0.8));
  color: #fff;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(80, 100, 200, 0.25);
}

/* -------------------------------------------------------------------------
   Stage G -- Bootstrap tables & DataTables in dark mode
   ------------------------------------------------------------------------- */

body.dark-mode .table th,
body.dark-mode .table td {
  border-top-color: rgba(80, 100, 200, 0.16) !important;
  color: #e2e8f0;
}

body.dark-mode .table thead th,
body.dark-mode .thead-light th {
  background-color: rgba(14, 18, 48, 0.95) !important;
  border-bottom: 2px solid rgba(0, 229, 255, 0.35) !important;
  color: var(--tw-cyber-cyan) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.82rem;
}

body.dark-mode .table-bordered,
body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
  border-color: rgba(80, 100, 200, 0.18) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.015);
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(0, 229, 255, 0.05) !important;
  color: #fff;
}

body.dark-mode .table-info,
body.dark-mode .table-info > th,
body.dark-mode .table-info > td,
body.dark-mode .opening-balance-row,
body.dark-mode .opening-balance-row > th,
body.dark-mode .opening-balance-row > td {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.15) 0%, rgba(14, 18, 48, 0.8) 100%) !important;
  color: #f8fafc !important;
  border-color: rgba(0, 229, 255, 0.25) !important;
}

/* 2026-10-06, explicit bug report: Reseller "Settings" tab's own
   "Overrides Type Default" row highlight (resellerEditOld.php,
   `rowClass = ' class="table-warning"'`) had no dark-mode override at
   all -- Bootstrap's own .table-warning keeps its light, pale-yellow
   background regardless of theme, while this app's generic dark-mode
   text-color rules make ordinary cell text render light/white, so the
   "Setting Type" column text became light-on-light and unreadable.
   Mirrors the .table-info rule immediately above, using the same
   amber already established for .badge-warning/.text-warning in this
   file (--tw-cyber-amber) instead of cyan. */
body.dark-mode .table-warning,
body.dark-mode .table-warning > th,
body.dark-mode .table-warning > td,
body.dark-mode table tr.table-warning,
body.dark-mode table tr.table-warning > th,
body.dark-mode table tr.table-warning > td {
  background-color: rgba(14, 18, 48, 0.9) !important;
  background: linear-gradient(90deg, rgba(255, 122, 0, 0.18) 0%, rgba(14, 18, 48, 0.8) 100%) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 122, 0, 0.3) !important;
}

/* Belt-and-suspenders: explicitly re-affirm every text element that can sit
   inside an overridden-setting row (plain cell text, the editable inline
   Value/Setting Name inputs, and the "Overrides Type Default" badge itself)
   -- covers the case where some other, more specific rule for a generic
   element (input/badge) would otherwise still win over the row-level rule
   above for that one nested element. */
body.dark-mode table tr.table-warning td,
body.dark-mode table tr.table-warning .form-control {
  color: #f8fafc !important;
  background-color: rgba(10, 13, 35, 0.6) !important;
}
body.dark-mode table tr.table-warning .badge-warning {
  background-color: rgba(255, 122, 0, 0.3) !important;
  color: #fff7ed !important;
  border: 1px solid rgba(255, 122, 0, 0.6) !important;
}

body.dark-mode .opening-balance-row td {
  color: #f1f5f9 !important;
}

body.dark-mode .opening-balance-row .text-cyan,
body.dark-mode .opening-balance-row .text-info {
  color: var(--tw-cyber-cyan) !important;
}

body.dark-mode .bg-light {
  background-color: rgba(14, 18, 48, 0.85) !important;
  color: var(--tw-dark-text-body) !important;
  border: 1px solid var(--tw-dark-card-border);
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right {
  border-color: rgba(80, 100, 200, 0.22) !important;
}

body.dark-mode .card-footer {
  background-color: var(--tw-dark-card-header);
  border-top: 1px solid var(--tw-dark-card-border);
}

/* Pagination */
body.dark-mode .page-item .page-link {
  color: var(--tw-cyber-cyan);
  background-color: var(--tw-dark-card-bg);
  border-color: var(--tw-dark-card-border);
}

body.dark-mode .page-item:not(.active) .page-link:hover,
body.dark-mode .page-item:not(.active) .page-link:focus {
  color: #fff;
  background-color: rgba(0, 229, 255, 0.15);
  border-color: var(--tw-cyber-cyan);
}

body.dark-mode .page-item.active .page-link {
  background: linear-gradient(135deg, #0051ff, #00e5ff) !important;
  border-color: var(--tw-cyber-cyan) !important;
  color: #070817 !important;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

body.dark-mode .page-item.active .page-link:hover,
body.dark-mode .page-item.active .page-link:focus {
  color: #050612 !important;
}

body.dark-mode .page-item.disabled .page-link {
  background-color: rgba(11, 14, 38, 0.5) !important;
  border-color: rgba(80, 100, 200, 0.18) !important;
  color: rgba(255, 255, 255, 0.3);
}

/* Custom Component Polish */
body.dark-mode .invoice-summary-bar .breakdown-tile {
  background: var(--tw-dark-card-bg);
  border: 1px solid var(--tw-dark-card-border);
  border-radius: 8px;
}

body.dark-mode .invoice-summary-bar .breakdown-label {
  color: var(--tw-dark-text-muted);
}

body.dark-mode .invoice-summary-bar .breakdown-amount {
  color: var(--tw-cyber-cyan);
  font-weight: 700;
}

body.dark-mode .reseller-stats-legend {
  background: var(--tw-dark-card-bg);
  border-bottom: 1px solid var(--tw-dark-card-border);
  color: var(--tw-dark-text-muted);
}

body.dark-mode .reseller-stats-legend .text-dark {
  color: var(--tw-dark-text-body) !important;
}

body.dark-mode .online-owner-filter:hover {
  background-color: rgba(0, 229, 255, 0.08);
}

body.dark-mode .online-owner-filter.active {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.25), rgba(0, 81, 255, 0.2)) !important;
  border-left: 3px solid var(--tw-cyber-cyan);
  color: #fff;
}

/* Info-boxes & Small-boxes */
body.dark-mode .info-box {
  background-color: var(--tw-dark-card-bg);
  border: 1px solid var(--tw-dark-card-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  border-radius: var(--tw-radius-md);
}

body.dark-mode .info-box-icon {
  background: rgba(0, 229, 255, 0.12);
  color: var(--tw-cyber-cyan);
}

/* Modals */
body.dark-mode .modal-content {
  background: radial-gradient(circle at 50% 15%, #141738 0%, #0b0d26 65%, #070817 100%);
  border: 1px solid rgba(0, 212, 255, 0.25);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 212, 255, 0.15);
  border-radius: 14px;
  color: #ffffff;
}

body.dark-mode .modal-header {
  background: rgba(12, 14, 39, 0.95);
  border-bottom: 1px solid rgba(80, 100, 200, 0.25);
}

body.dark-mode .modal-footer {
  background: rgba(12, 14, 39, 0.95);
  border-top: 1px solid rgba(80, 100, 200, 0.25);
}

body.dark-mode .modal-header.bg-primary {
  background: linear-gradient(135deg, rgba(0, 81, 255, 0.45), rgba(0, 229, 255, 0.3)) !important;
  border-bottom: 1px solid var(--tw-cyber-cyan) !important;
}

body.dark-mode .modal-header.bg-primary .modal-title {
  color: var(--tw-cyber-cyan) !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

body.dark-mode .content-header h1 {
  color: #ffffff;
}

body.dark-mode .content-header h1 small {
  color: var(--tw-dark-text-muted);
}

body.dark-mode .breadcrumb-item.active {
  color: var(--tw-cyber-cyan);
}

body.dark-mode .breadcrumb-item a {
  color: var(--tw-dark-text-muted);
}

body.dark-mode .breadcrumb-item a:hover {
  color: #ffffff;
}

/* Sleek Cyber Scrollbars */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #080a1c;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(80, 100, 200, 0.35);
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--tw-cyber-cyan);
}