/* AeroNet CRM - Enterprise NOC Stylesheet (Dark/Light Mode & Print Engine) */

/* ==========================================
   1. RESET & VARIABLE DEFINITIONS
   ========================================== */
:root {
  --font-main: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Accent Colors */
  --color-cyan: #00f2fe;
  --color-blue: #4facfe;
  --color-green: #38ef7d;
  --color-green-dark: #11998e;
  --color-purple: #b06ab3;
  --color-purple-dark: #4568dc;
  --color-orange: #f0932b;
  --color-red: #eb4d4b;

  --shadow-main: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 15px rgba(0, 242, 254, 0.2);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Dark Theme Variables */
body.dark-theme {
  --bg-app: #080c14;
  --bg-sidebar: rgba(10, 16, 30, 0.95);
  --bg-card: rgba(18, 28, 48, 0.9);
  --bg-card-hover: rgba(26, 38, 64, 0.95);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(0, 242, 254, 0.4);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-title: #f8fafc;
  --text-dark: #0f172a;
}




/* Composite layer background for high performance scrolling */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: none !important;
  opacity: 0.12;
  transition: opacity 0.4s ease;
}

body.light-theme::before {
  display: none !important;
  opacity: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-app);
  color: var(--text-main);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.4s ease, color 0.4s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-title);
  letter-spacing: -0.015em;
}

/* Pre-rendered glowing background spheres (no expensive runtime blur filters) */
.glass-bg-blur {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  will-change: transform;
  transform: translateZ(0);
  transition: opacity 0.4s ease;
}

.sphere-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.12) 0%, rgba(0, 242, 254, 0) 70%);
  top: -150px;
  right: 5%;
}

body.light-theme .sphere-1,
body.light-theme .sphere-2,
body.light-theme .sphere-3,
body.light-theme .glass-bg-blur,
body.light-theme #bg-animation-canvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==========================================
   2. MAIN APPLICATION LAYOUT
   ========================================== */
.app-container {
  display: flex;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Sidebar Navigation */
.sidebar {
  width: 275px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  padding: 4px 12px 14px 12px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 100;
  transition: var(--transition-smooth);
}

.sidebar-close-btn {
  display: none;
}

.brand,
a.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0px;
  padding: 0px 4px 4px 4px;
  border-bottom: 1px solid var(--border-glass);
  margin-top: 0px;
  margin-bottom: 6px;
  width: 100%;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

.brand:hover,
a.brand:hover,
.brand:focus,
a.brand:focus,
.brand:active,
a.brand:active {
  text-decoration: none !important;
  color: inherit !important;
}

.brand-icon {
  font-size: 1.7rem;
  background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.4));
  pointer-events: none !important;
}

/* Sidebar Brand Header Logo Container (Top Stacked Layout) */
#crm-sidebar-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  margin: 0 auto 4px auto !important;
  pointer-events: none !important;
}

body.dark-theme #crm-sidebar-logo-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#crm-sidebar-logo {
  width: 120px !important;
  max-width: 85% !important;
  height: auto !important;
  max-height: 92px !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
  margin: 0 auto 4px auto !important;
  pointer-events: none !important;
  user-select: none !important;
  display: block !important;
}

.brand:hover #crm-sidebar-logo {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 16px rgba(0, 242, 254, 0.5)) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.8)) !important;
}

/* Login Screen Large High-Resolution Logo Container (Completely Transparent) */
#crm-login-logo-container,
.opticore-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 290px !important;
  height: auto !important;
  min-height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.opticore-logo-animated-wrapper {
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

#crm-login-logo,
.opticore-logo-container img#crm-login-logo {
  max-height: 95px !important;
  max-width: 260px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  display: block !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important;
  position: relative !important;
  z-index: 1 !important;
  animation: none !important;
}

/* Internal shiny lines animation confined strictly to the fiber lines inside the logo */
#crm-login-logo-shiny-lines,
.opticore-shiny-lines-fx {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: opticoreInnerLinesPulse 2.4s ease-in-out infinite alternate !important;
}

@keyframes opticoreInnerLinesPulse {
  0% {
    opacity: 0.3;
    filter: brightness(1) drop-shadow(0 0 1px #00f2fe);
  }
  50% {
    opacity: 1;
    filter: brightness(1.9) drop-shadow(0 0 5px #00f2fe) drop-shadow(0 0 12px #ffffff);
  }
  100% {
    opacity: 0.3;
    filter: brightness(1) drop-shadow(0 0 1px #00f2fe);
  }
}

/* Remove old external box/beam animations */
.opticore-shiny-lines-beam,
.opticore-shiny-pulse-glow {
  display: none !important;
}

/* Ensure sidebar logo has ZERO animation and remains 100% static/original */
#crm-sidebar-logo,
.brand #crm-sidebar-logo,
body.light-theme #crm-sidebar-logo,
body.dark-theme #crm-sidebar-logo {
  animation: none !important;
  filter: none !important;
}

/* Hover/active transitions */
.brand:hover #crm-sidebar-logo-container {
  transform: translateY(-2px) scale(1.03);
  box-shadow: none !important;
}

#crm-sidebar-icon {
  font-size: 2.2rem !important;
  color: #ff6b35 !important;
}

.brand-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-top: 8px !important;
  gap: 2px !important;
  pointer-events: none !important;
}

.brand-name {
  font-family: var(--font-display), 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  text-align: center !important;
  word-break: normal !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

.brand-name span {
  color: #ffffff !important;
}

.brand-sub {
  font-family: var(--font-display), 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   GLOBAL CRM DYNAMIC THEME SYSTEM (Buttons, Portions, Options & Controls)
   ========================================================================== */

/* Theme Dot Active Outline indicator with dynamic glow */
.theme-dot.active::after {
  content: '';
  position: absolute;
  top: -3.5px;
  left: -3.5px;
  right: -3.5px;
  bottom: -3.5px;
  border-radius: 50%;
  border: 2px solid var(--theme-primary, #00f2fe) !important;
  box-shadow: 0 0 10px var(--theme-primary, #00f2fe) !important;
  pointer-events: none;
}

/* 1. CYBER CYAN / OPTICORE TECH (DEFAULT) */
:root,
body.theme-default,
body.theme-cyan,
html[data-theme="default"] body,
html[data-theme="cyan"] body {
  --theme-name: 'cyber';
  --theme-primary: #00f2fe;
  --theme-primary-hover: #38bdf8;
  --theme-secondary: #0284c7;
  --theme-gradient: linear-gradient(135deg, #0284c7 0%, #00f2fe 100%);
  --theme-gradient-hover: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);
  --theme-glow: 0 0 22px rgba(0, 242, 254, 0.35);
  --theme-glow-sm: 0 0 12px rgba(0, 242, 254, 0.25);
  --theme-accent-rgb: 0, 242, 254;
  --bg-app: #080c14;
  --bg-sidebar: linear-gradient(180deg, #091322 0%, #050a12 100%);
  --bg-card: rgba(14, 23, 42, 0.95);
  --bg-card-hover: rgba(20, 32, 58, 0.98);
  --border-glass: rgba(0, 242, 254, 0.16);
  --border-focus: #00f2fe;
  --text-main: #e2e8f0;
  --text-title: #f8fafc;
  --text-muted: #94a3b8;
  --table-th-border: #00f2fe;
  --beam-glow-color: #00f2fe;
}

/* 2. MIDNIGHT OBSIDIAN */
body.theme-midnight,
html[data-theme="midnight"] body {
  --theme-name: 'midnight';
  --theme-primary: #60a5fa;
  --theme-primary-hover: #93c5fd;
  --theme-secondary: #2563eb;
  --theme-gradient: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  --theme-gradient-hover: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  --theme-glow: 0 0 22px rgba(96, 165, 250, 0.35);
  --theme-glow-sm: 0 0 12px rgba(96, 165, 250, 0.25);
  --theme-accent-rgb: 96, 165, 250;
  --bg-app: #07090e;
  --bg-sidebar: linear-gradient(180deg, #0e131f 0%, #06080d 100%);
  --bg-card: rgba(16, 21, 33, 0.96);
  --bg-card-hover: rgba(24, 31, 48, 0.98);
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-focus: #60a5fa;
  --text-main: #e2e8f0;
  --text-title: #f8fafc;
  --text-muted: #94a3b8;
  --table-th-border: #60a5fa;
  --beam-glow-color: #60a5fa;
}

/* 3. OCEAN DEEP / SAPPHIRE */
body.theme-ocean,
html[data-theme="ocean"] body {
  --theme-name: 'ocean';
  --theme-primary: #38bdf8;
  --theme-primary-hover: #7dd3fc;
  --theme-secondary: #0284c7;
  --theme-gradient: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  --theme-gradient-hover: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);
  --theme-glow: 0 0 22px rgba(56, 189, 248, 0.4);
  --theme-glow-sm: 0 0 12px rgba(56, 189, 248, 0.25);
  --theme-accent-rgb: 56, 189, 248;
  --bg-app: #061325;
  --bg-sidebar: linear-gradient(180deg, #081d38 0%, #040e1b 100%);
  --bg-card: rgba(10, 29, 56, 0.95);
  --bg-card-hover: rgba(15, 41, 78, 0.98);
  --border-glass: rgba(56, 189, 248, 0.2);
  --border-focus: #38bdf8;
  --text-main: #e0f2fe;
  --text-title: #f0f9ff;
  --text-muted: #7dd3fc;
  --table-th-border: #38bdf8;
  --beam-glow-color: #38bdf8;
}

/* 4. EMERALD FOREST */
body.theme-forest,
html[data-theme="forest"] body {
  --theme-name: 'forest';
  --theme-primary: #10b981;
  --theme-primary-hover: #34d399;
  --theme-secondary: #059669;
  --theme-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
  --theme-gradient-hover: linear-gradient(135deg, #047857 0%, #34d399 100%);
  --theme-glow: 0 0 22px rgba(16, 185, 129, 0.4);
  --theme-glow-sm: 0 0 12px rgba(16, 185, 129, 0.25);
  --theme-accent-rgb: 16, 185, 129;
  --bg-app: #05140b;
  --bg-sidebar: linear-gradient(180deg, #082313 0%, #031008 100%);
  --bg-card: rgba(8, 32, 18, 0.95);
  --bg-card-hover: rgba(12, 45, 26, 0.98);
  --border-glass: rgba(52, 211, 153, 0.22);
  --border-focus: #10b981;
  --text-main: #e2f5ea;
  --text-title: #f0fdf4;
  --text-muted: #86efac;
  --table-th-border: #10b981;
  --beam-glow-color: #10b981;
}

/* 5. CRIMSON RUBY */
body.theme-burgundy,
html[data-theme="burgundy"] body {
  --theme-name: 'burgundy';
  --theme-primary: #f43f5e;
  --theme-primary-hover: #fb7185;
  --theme-secondary: #e11d48;
  --theme-gradient: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);
  --theme-gradient-hover: linear-gradient(135deg, #9f1239 0%, #fb7185 100%);
  --theme-glow: 0 0 22px rgba(244, 63, 94, 0.4);
  --theme-glow-sm: 0 0 12px rgba(244, 63, 94, 0.25);
  --theme-accent-rgb: 244, 63, 94;
  --bg-app: #17060b;
  --bg-sidebar: linear-gradient(180deg, #250913 0%, #120408 100%);
  --bg-card: rgba(38, 12, 20, 0.95);
  --bg-card-hover: rgba(52, 18, 28, 0.98);
  --border-glass: rgba(244, 63, 94, 0.22);
  --border-focus: #f43f5e;
  --text-main: #ffe4e6;
  --text-title: #fff1f2;
  --text-muted: #fda4af;
  --table-th-border: #f43f5e;
  --beam-glow-color: #f43f5e;
}

/* 6. ROYAL INDIGO */
body.theme-indigo,
html[data-theme="indigo"] body {
  --theme-name: 'indigo';
  --theme-primary: #8b5cf6;
  --theme-primary-hover: #a78bfa;
  --theme-secondary: #7c3aed;
  --theme-gradient: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  --theme-gradient-hover: linear-gradient(135deg, #5b21b6 0%, #a78bfa 100%);
  --theme-glow: 0 0 22px rgba(139, 92, 246, 0.4);
  --theme-glow-sm: 0 0 12px rgba(139, 92, 246, 0.25);
  --theme-accent-rgb: 139, 92, 246;
  --bg-app: #0f0a21;
  --bg-sidebar: linear-gradient(180deg, #191238 0%, #0b0719 100%);
  --bg-card: rgba(25, 18, 55, 0.95);
  --bg-card-hover: rgba(35, 25, 75, 0.98);
  --border-glass: rgba(167, 139, 250, 0.22);
  --border-focus: #8b5cf6;
  --text-main: #ede9fe;
  --text-title: #f5f3ff;
  --text-muted: #c4b5fd;
  --table-th-border: #8b5cf6;
  --beam-glow-color: #8b5cf6;
}

/* 7. IMPERIAL AMBER */
body.theme-amber,
html[data-theme="amber"] body {
  --theme-name: 'amber';
  --theme-primary: #f59e0b;
  --theme-primary-hover: #fbbf24;
  --theme-secondary: #d97706;
  --theme-gradient: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  --theme-gradient-hover: linear-gradient(135deg, #92400e 0%, #fbbf24 100%);
  --theme-glow: 0 0 22px rgba(245, 158, 11, 0.4);
  --theme-glow-sm: 0 0 12px rgba(245, 158, 11, 0.25);
  --theme-accent-rgb: 245, 158, 11;
  --bg-app: #150f04;
  --bg-sidebar: linear-gradient(180deg, #241a08 0%, #110c03 100%);
  --bg-card: rgba(37, 26, 8, 0.95);
  --bg-card-hover: rgba(50, 36, 12, 0.98);
  --border-glass: rgba(245, 158, 11, 0.25);
  --border-focus: #f59e0b;
  --text-main: #fef3c7;
  --text-title: #fffbeb;
  --text-muted: #fcd34d;
  --table-th-border: #f59e0b;
  --beam-glow-color: #f59e0b;
}

/* 8. NORDIC LIGHT (NexCRM Modern Ultra-Clean SaaS Aesthetic) */
body.theme-light,
body.light-theme,
html[data-theme="light"] body {
  --theme-name: 'light';
  --theme-primary: #4f46e5;
  --theme-primary-hover: #4338ca;
  --theme-secondary: #6366f1;
  --theme-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  --theme-gradient-hover: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  --theme-glow: 0 4px 14px rgba(79, 70, 229, 0.2);
  --theme-glow-sm: 0 2px 8px rgba(79, 70, 229, 0.12);
  --theme-accent-rgb: 79, 70, 229;
  --bg-app: #f8fafc;
  --bg-sidebar: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfcfe;
  --border-glass: #e2e8f0;
  --border-focus: #4f46e5;
  --text-main: #0f172a;
  --text-title: #0f172a;
  --text-muted: #64748b;
  --table-th-border: #e2e8f0;
  --beam-glow-color: #4f46e5;
}

/* ==========================================================================
   DYNAMIC COMPONENT BINDINGS (Buttons, Portions, Options automatically adjust)
   ========================================================================== */

/* PORTIONS: Layout, Containers & Backgrounds */
body[class*="theme-"] {
  background-color: var(--bg-app) !important;
  color: var(--text-main) !important;
}

body[class*="theme-"] .sidebar,
.sidebar[class*="theme-"] {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-glass) !important;
}

body[class*="theme-"] .sidebar .brand,
.sidebar[class*="theme-"] .brand {
  border-bottom: 1px solid var(--border-glass) !important;
}

/* Solid Crisp White Sidebar Text & Colorful 3D Buttons */
.sidebar .brand-name,
.sidebar .brand-name span {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

.sidebar .brand-sub {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}

.sidebar .sidebar-theme-title {
  color: #cbd5e1 !important;
}

/* 100% Solid White on Category Headers & Nav Items */
.sidebar .category-header,
.sidebar .category-header span,
.sidebar .category-header i,
.sidebar .nav-item,
.sidebar .nav-item span,
.sidebar .nav-item i {
  color: #ffffff !important;
  font-weight: 750 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  -webkit-font-smoothing: antialiased !important;
}

body[class*="theme-"] .top-header {
  border-bottom: 1px solid var(--border-glass) !important;
}

body[class*="theme-"] .card,
body[class*="theme-"] .stat-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-glass) !important;
}

body[class*="theme-"] .card:hover,
body[class*="theme-"] .stat-card:hover {
  background: var(--bg-card-hover) !important;
}

body[class*="theme-"] .card-header {
  border-bottom: 1px solid var(--border-glass) !important;
}

body[class*="theme-"] .card-header h3,
body[class*="theme-"] h1,
body[class*="theme-"] h2,
body[class*="theme-"] h3 {
  color: var(--text-title) !important;
}

/* MODALS: Window, Header & Footer */
body[class*="theme-"] .modal-card,
body[class*="theme-"] .modal,
body[class*="theme-"] .modal-content {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-glass) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), var(--theme-glow) !important;
  color: var(--text-main) !important;
}

body[class*="theme-"] .modal-header {
  border-bottom: 1px solid var(--border-glass) !important;
}

body[class*="theme-"] .modal-footer {
  border-top: 1px solid var(--border-glass) !important;
}

/* TABLES: Headers, Rows & Hover */
body[class*="theme-"] .data-table th,
body[class*="theme-"] table thead th {
  border-bottom: 3px solid var(--table-th-border) !important;
  background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.12), rgba(var(--theme-accent-rgb), 0.03)) !important;
  color: var(--text-title) !important;
}

body[class*="theme-"] .data-table td,
body[class*="theme-"] table tbody td {
  border-top: 1px solid var(--border-glass) !important;
  color: var(--text-main) !important;
}

body[class*="theme-"] .data-table tbody tr:hover,
body[class*="theme-"] table tbody tr:hover {
  background: rgba(var(--theme-accent-rgb), 0.08) !important;
  box-shadow: 0 4px 14px rgba(var(--theme-accent-rgb), 0.12) !important;
}

/* BUTTONS: Primary, 3D, Action, Dashboard, Submit & Login */
body[class*="theme-"] .btn-primary,
body[class*="theme-"] .btn-3d.cyan,
body[class*="theme-"] .btn-3d.blue,
body[class*="theme-"] #btn-dashboard-add-connection,
body[class*="theme-"] .search-btn-addon,
body[class*="theme-"] .conn-submit-btn,
body[class*="theme-"] .btn-opticore-action,
body[class*="theme-"] .btn-opticore-login,
body[class*="theme-"] .btn-save {
  background: var(--theme-gradient) !important;
  border: 1.5px solid var(--theme-primary) !important;
  box-shadow: 0 4px 14px rgba(var(--theme-accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

body[class*="theme-"] .btn-primary:hover,
body[class*="theme-"] .btn-3d.cyan:hover,
body[class*="theme-"] .btn-3d.blue:hover,
body[class*="theme-"] #btn-dashboard-add-connection:hover,
body[class*="theme-"] .search-btn-addon:hover,
body[class*="theme-"] .conn-submit-btn:hover,
body[class*="theme-"] .btn-opticore-action:hover,
body[class*="theme-"] .btn-opticore-login:hover,
body[class*="theme-"] .btn-save:hover {
  background: var(--theme-gradient-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  box-shadow: 0 6px 20px rgba(var(--theme-accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

body[class*="theme-"] .btn-secondary {
  background: rgba(var(--theme-accent-rgb), 0.08) !important;
  border: 1px solid var(--border-glass) !important;
  color: var(--text-main) !important;
}

/* ACTIVE PILLS, TABS, PAGINATION & SIDEBAR ACTIVE ITEM */
body[class*="theme-"] .nav-item.active {
  background: var(--theme-gradient) !important;
  border-color: var(--theme-primary) !important;
  box-shadow: 0 3px 12px rgba(var(--theme-accent-rgb), 0.4) !important;
}

body[class*="theme-"] .sub-profile-tab-btn.active,
body[class*="theme-"] .subprof-tab.active,
body[class*="theme-"] .conn-filter-btn.active,
body[class*="theme-"] .btn-filter-ticket.active,
body[class*="theme-"] .telemetry-tab-btn.active,
body[class*="theme-"] .page-item.active .page-link,
body[class*="theme-"] .pagination .active,
body[class*="theme-"] .res-menu-item.active {
  background: var(--theme-gradient) !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  box-shadow: var(--theme-glow-sm) !important;
}

/* OPTIONS & FORM CONTROLS: Inputs, Dropdowns & Focus */
body[class*="theme-"] .form-group input,
body[class*="theme-"] .form-group select,
body[class*="theme-"] .form-group textarea,
body[class*="theme-"] .form-group-3d input,
body[class*="theme-"] .form-group-3d select,
body[class*="theme-"] .form-group-3d textarea,
body[class*="theme-"] .modal-form input,
body[class*="theme-"] .modal-form select,
body[class*="theme-"] .modal-form textarea,
body[class*="theme-"] .form-control,
body[class*="theme-"] .search-input-wrapper input {
  border: 1.5px solid var(--border-glass) !important;
  color: var(--text-main) !important;
}

body[class*="theme-"] .form-group input:focus,
body[class*="theme-"] .form-group select:focus,
body[class*="theme-"] .form-group textarea:focus,
body[class*="theme-"] .form-group-3d input:focus,
body[class*="theme-"] .form-group-3d select:focus,
body[class*="theme-"] .form-group-3d textarea:focus,
body[class*="theme-"] .modal-form input:focus,
body[class*="theme-"] .modal-form select:focus,
body[class*="theme-"] .modal-form textarea:focus,
body[class*="theme-"] .form-control:focus,
body[class*="theme-"] .search-input-wrapper input:focus,
body[class*="theme-"] #dash-filter-admin-subdealers:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.3), 0 0 18px rgba(var(--theme-accent-rgb), 0.35) !important;
}

body[class*="theme-"] input[type="checkbox"],
body[class*="theme-"] input[type="radio"],
body[class*="theme-"] input[type="range"] {
  accent-color: var(--theme-primary) !important;
}

body[class*="theme-"] .res-dropdown-menu,
body[class*="theme-"] .dropdown-menu {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-glass) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), var(--theme-glow-sm) !important;
}

.sidebar-scroll {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 16px;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--border-glass);
  border-radius: 4px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  /* Original font weights preserved */
  font-size: 0.88rem;
  margin-bottom: 10px;
  /* Space for 3D bottom depth shadow */
  color: #ffffff !important;
  /* Text is always white for contrast */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  position: relative;
  cursor: pointer;
}

.nav-item i {
  font-size: 1.05rem;
  width: 18px;
  text-align: center;
  color: #ffffff !important;
  /* Icons always white */
  transition: transform 0.15s ease;
}

/* Category-specific 3D Button Gradients & Shades */

/* Dashboard / Overview: Deep Blue */
.nav-item[data-target="panel-dashboard"] {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  box-shadow: 0 4px 0 #1e3a8a, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-dashboard"]:hover {
  filter: brightness(1.08);
}

/* Packages & Rates: Warm Orange */
.nav-item[data-target="panel-internet-profiles"] {
  background: linear-gradient(180deg, #ea580c, #c2410c) !important;
  box-shadow: 0 4px 0 #7c2d12, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-internet-profiles"]:hover {
  filter: brightness(1.08);
}

/* Permissions: Royal Indigo */
.nav-item[data-target="panel-permissions"] {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 4px 0 #312e81, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-permissions"]:hover {
  filter: brightness(1.08);
}

/* Routers (NAS): Emerald Green */
.nav-item[data-target="panel-network"] {
  background: linear-gradient(180deg, #10b981, #059669) !important;
  box-shadow: 0 4px 0 #064e3b, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-network"]:hover {
  filter: brightness(1.08);
}

/* Ledger & Invoices: Professional Teal */
.nav-item[data-target="panel-ledger"] {
  background: linear-gradient(180deg, #0d9488, #0f766e) !important;
  box-shadow: 0 4px 0 #115e59, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-ledger"]:hover {
  filter: brightness(1.08);
}

/* Profile & Settings: Cool Slate */
.nav-item[data-target="panel-settings"] {
  background: linear-gradient(180deg, #6b7280, #374151) !important;
  box-shadow: 0 4px 0 #1f2937, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-settings"]:hover {
  filter: brightness(1.08);
}

/* Subscribers: Royal Indigo */
.nav-item[data-target="panel-subscribers"],
.menu-category:nth-of-type(1) .nav-item {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 4px 0 #312e81, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-subscribers"]:hover,
.menu-category:nth-of-type(1) .nav-item:hover {
  filter: brightness(1.08);
}

/* New Connection: Vibrant Electric Violet */
.nav-item[data-target="panel-new-connection"] {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed) !important;
  box-shadow: 0 4px 0 #5b21b6, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-new-connection"]:hover {
  filter: brightness(1.08);
}

/* Invoices / Bills: Radiant Rose / Crimson */
.nav-item[data-target="panel-billing"] {
  background: linear-gradient(180deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 4px 0 #9f1239, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-billing"]:hover {
  filter: brightness(1.08);
}

/* WhatsApp Gateway: Official WhatsApp Green */
.nav-item[data-target="panel-subdealer-whatsapp"],
.nav-item[data-target="panel-whatsapp"],
.menu-category:nth-of-type(2) .nav-item {
  background: linear-gradient(180deg, #25d366, #128c7e) !important;
  box-shadow: 0 4px 0 #075e54, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.nav-item[data-target="panel-subdealer-whatsapp"]:hover,
.nav-item[data-target="panel-whatsapp"]:hover,
.menu-category:nth-of-type(2) .nav-item:hover {
  filter: brightness(1.08);
}

/* Billing & Finance Category Items (Admin fallback): Professional Teal */
.menu-category:nth-of-type(3) .nav-item {
  background: linear-gradient(180deg, #0d9488, #0f766e) !important;
  box-shadow: 0 4px 0 #115e59, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.menu-category:nth-of-type(3) .nav-item:hover {
  filter: brightness(1.08);
}

/* Subdealer Network Control Category Header */
#subdealer-category-network-control .category-header {
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: none;
}

#subdealer-category-network-control .category-header:hover {
  filter: brightness(1.08);
}

/* Network Control Items: OLT Devices */
.nav-item[data-target="panel-olts"] {
  background: linear-gradient(180deg, #f97316, #ea580c) !important;
  box-shadow: 0 4px 0 #9a3412, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-olts"]:hover { filter: brightness(1.08); }

/* ONU OPM Diag */
.nav-item[data-target="panel-onu-opm"] {
  background: linear-gradient(180deg, #10b981, #059669) !important;
  box-shadow: 0 4px 0 #064e3b, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-onu-opm"]:hover { filter: brightness(1.08); }

/* Digital OTDR */
.nav-item[data-target="panel-otdr"] {
  background: linear-gradient(180deg, #06b6d4, #0891b2) !important;
  box-shadow: 0 4px 0 #155e75, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-otdr"]:hover { filter: brightness(1.08); }

/* Traffic / CTS Logs */
.nav-item[data-target="panel-traffic-logs"] {
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 4px 0 #1e3a8a, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-traffic-logs"]:hover { filter: brightness(1.08); }

/* IP Address Map */
.nav-item[data-target="panel-ip-map"] {
  background: linear-gradient(180deg, #a855f7, #7e22ce) !important;
  box-shadow: 0 4px 0 #581c87, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-ip-map"]:hover { filter: brightness(1.08); }

/* Zones / Areas */
.nav-item[data-target="panel-zones"] {
  background: linear-gradient(180deg, #0d9488, #0f766e) !important;
  box-shadow: 0 4px 0 #115e59, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-zones"]:hover { filter: brightness(1.08); }

/* Telegram Fast Proxy */
.nav-item[data-target="panel-telegram-proxy"] {
  background: linear-gradient(180deg, #0284c7, #0369a1) !important;
  box-shadow: 0 4px 0 #075985, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-telegram-proxy"]:hover { filter: brightness(1.08); }

/* Unpaid Accounts / Customers: Alert Red */
.nav-item[data-target="panel-unpaid-customers"] {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
  box-shadow: 0 4px 0 #991b1b, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-unpaid-customers"]:hover { filter: brightness(1.08); }

/* Dealers / Sub-dealers: Deep Purple */
.nav-item[data-target="panel-subdealers"] {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 4px 0 #4c1d95, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-subdealers"]:hover { filter: brightness(1.08); }

/* Staff & Salaries */
.nav-item[data-target="panel-staff"] {
  background: linear-gradient(180deg, #0284c7, #0369a1) !important;
  box-shadow: 0 4px 0 #075985, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-staff"]:hover { filter: brightness(1.08); }

/* Complaints / Tickets */
.nav-item[data-target="panel-tickets"] {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  box-shadow: 0 4px 0 #b45309, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.nav-item[data-target="panel-tickets"]:hover { filter: brightness(1.08); }

/* Fallback for Network Control Admin Category */
.menu-category:nth-of-type(4) .nav-item {
  background: linear-gradient(180deg, #ea580c, #c2410c) !important;
  box-shadow: 0 4px 0 #7c2d12, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.menu-category:nth-of-type(4) .nav-item:hover {
  filter: brightness(1.08);
}

/* Assets: Deep Purple */
.menu-category:nth-of-type(5) .nav-item {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 4px 0 #4c1d95, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.menu-category:nth-of-type(5) .nav-item:hover {
  filter: brightness(1.08);
}

/* Team & Help: Cool Slate */
.menu-category:nth-of-type(6) .nav-item {
  background: linear-gradient(180deg, #6b7280, #374151) !important;
  box-shadow: 0 4px 0 #1f2937, 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.menu-category:nth-of-type(6) .nav-item:hover {
  filter: brightness(1.08);
}

/* Subdealer Navigation Catch-All to guarantee ALL buttons remain colored */
#subdealer-nav-menu .nav-item {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
#subdealer-nav-menu .nav-item i {
  color: #ffffff !important;
}

.nav-item:hover i {
  transform: scale(1.06);
}

/* 3D PRESSED DOWN / ACTIVE STATES */
.nav-item.active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  filter: brightness(0.92) contrast(1.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.nav-item.active i {
  transform: none !important;
}

/* Sidebar Quick Actions Grid */
.sidebar-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-glass);
}

.btn-quick {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: var(--transition-smooth);
}

.btn-quick:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-blue);
  transform: translateY(-1px);
}

.btn-quick i {
  font-size: 0.95rem;
  color: var(--color-blue);
}

/* Accordion sidebars */
.menu-category {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  margin-bottom: 4px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 10px;
  /* Space for 3D bottom depth shadow */
  color: #ffffff !important;
  /* Text is always white for contrast */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  position: relative;
  cursor: pointer;
  letter-spacing: 0.8px;
}

.category-header i {
  font-size: 0.75rem;
  color: #ffffff !important;
  transition: transform 0.25s ease;
}

/* Category Header Colors - Always Colored 3D */

/* Subscribers - Indigo */
.menu-category:nth-of-type(1) .category-header {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.menu-category:nth-of-type(1) .category-header:hover {
  filter: brightness(1.08);
}

/* Communication - Emerald Green */
.menu-category:nth-of-type(2) .category-header {
  background: linear-gradient(180deg, #10b981, #059669) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.menu-category:nth-of-type(2) .category-header:hover {
  filter: brightness(1.08);
}

/* Billing & Finance - Teal */
.menu-category:nth-of-type(3) .category-header {
  background: linear-gradient(180deg, #0d9488, #0f766e) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.menu-category:nth-of-type(3) .category-header:hover {
  filter: brightness(1.08);
}

/* Network Control - Warm Orange */
.menu-category:nth-of-type(4) .category-header {
  background: linear-gradient(180deg, #ea580c, #c2410c) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.menu-category:nth-of-type(4) .category-header:hover {
  filter: brightness(1.08);
}

/* Assets - Purple */
.menu-category:nth-of-type(5) .category-header {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.menu-category:nth-of-type(5) .category-header:hover {
  filter: brightness(1.08);
}

/* Team & Help - Cool Slate */
.menu-category:nth-of-type(6) .category-header {
  background: linear-gradient(180deg, #6b7280, #374151) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.menu-category:nth-of-type(6) .category-header:hover {
  filter: brightness(1.08);
}

.category-links {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
  margin-bottom: 8px;
  border-left: 1px dashed rgba(255, 255, 255, 0.15);
  margin-left: 20px;
}

.menu-category.open .category-links {
  display: flex;
  animation: slideDown 0.2s ease-out;
}

/* PRESSED DOWN WHEN OPEN */
.menu-category.open .category-header {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.menu-category.open .category-header i {
  transform: rotate(180deg);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border-glass);
}

.mt-md {
  margin-top: 12px;
}

.connection-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border-glass);
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.pulse-indicator.green {
  background-color: var(--color-green);
}

.pulse-indicator.orange {
  background-color: var(--color-orange);
}

.pulse-indicator.red {
  background-color: var(--color-red);
}

.pulse-indicator::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: 50%;
  animation: pulse 1.8s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.connection-text {
  color: var(--text-muted);
  font-weight: 500;
}

/* ==========================================
   3. MAIN CONTENT BODY
   ========================================== */
.main-content {
  flex-grow: 1;
  margin-left: 275px;
  padding: 22px 28px;
  max-width: calc(100% - 275px);
  width: calc(100% - 275px);
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow-x: hidden;
  transition: margin-left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-glass);
}

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 440px;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.search-input-wrapper i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-input-wrapper input {
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-glass);
  padding: 10px 16px 10px 48px;
  border-radius: 12px;
  color: var(--text-main);
  outline: none;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
}

body.light-theme .search-input-wrapper input {
  background: #ffffff;
}

.search-input-wrapper input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-glow);
}

.search-btn-addon {
  border-radius: 12px;
  padding: 10px 18px;
  white-space: nowrap;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.search-btn-addon:hover {
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.7), inset 0 1.5px 0 rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-1.5px);
}

/* Telemetry Display */
.noc-telemetry {
  display: flex;
  gap: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.15) 0%, transparent 80%), linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.98)) !important;
  border: 1.5px solid rgba(0, 242, 254, 0.45) !important;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.25), inset 0 1.5px 0 rgba(255, 255, 255, 0.35) !important;
  padding: 6px 18px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

body.light-theme .noc-telemetry {
  background: #ffffff;
}

body.role-subdealer .noc-telemetry,
body.role-nas-admin .noc-telemetry,
body.role-reseller .noc-telemetry,
body.role-subscriber .noc-telemetry,
body.role-demo .noc-telemetry,
.noc-telemetry.hidden-for-role {
  display: none !important;
}

.telemetry-item {
  display: flex;
  flex-direction: column;
}

.telemetry-item .label {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.telemetry-item .value {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-cyan);
  font-family: var(--font-mono);
}

body.light-theme .telemetry-item .value {
  color: var(--color-purple-dark);
}

/* ====================================================
   DISPLAY RESOLUTION & AUTO-SCALING CONTROLLER
   ==================================================== */
.screen-res-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 105;
}

.btn-res-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  outline: none;
  user-select: none;
}

.btn-res-pill:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: #00f2fe;
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
  transform: translateY(-1px);
}

.res-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 26, 0.98));
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 242, 254, 0.15);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 1100;
  animation: resFadeSlide 0.18s ease-out;
}

.res-dropdown-menu.show {
  display: flex !important;
}

@keyframes resFadeSlide {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.res-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.res-detected-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 242, 254, 0.12);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.25);
  font-weight: 700;
}

.res-menu-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.3;
  margin-bottom: 4px;
}

.res-menu-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.res-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.res-menu-item:hover {
  background: rgba(0, 242, 254, 0.08);
  border-color: rgba(0, 242, 254, 0.2);
  color: #fff;
}

.res-menu-item.active {
  background: rgba(0, 242, 254, 0.15);
  border-color: rgba(0, 242, 254, 0.45);
  color: #00f2fe;
}

.res-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.res-item-name {
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.res-badge-rec {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: #10b981;
  color: #fff;
  text-transform: uppercase;
}

.res-item-desc {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 1px;
}

.res-check-icon {
  font-size: 0.75rem;
  color: #00f2fe;
  opacity: 0;
}

.res-menu-item.active .res-check-icon {
  opacity: 1;
}

.header-profile {
  display: flex;
  align-items: center;
  gap: 18px;
}

.notification-bell {
  position: relative;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.notification-bell:hover {
  color: var(--text-main);
}

.notification-bell .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: var(--color-red);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 10px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-badge .avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--text-dark);
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-info .name {
  font-weight: 600;
  font-size: 0.95rem;
}

.user-info .role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================
   4. PANEL CONTAINERS & SECTIONS
   ========================================== */
.panels-wrapper {
  position: relative;
}

.panel-section {
  display: none;
  opacity: 1;
  transform: none;
}

.panel-section.active {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.panel-section.fading-out {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  animation: panelFadeOut 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes panelFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes panelFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.995);
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.panel-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

/* ==========================================
   5. COMPONENT: CARDS & GRIDS
   ========================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* Core Subscriber Base grid: locked 6 columns so brand card fills row-2 blank area */
#subscriber-stats-grid {
  grid-template-columns: repeat(6, 1fr);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-card::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  top: -30px;
  right: -30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.015);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--bg-card-hover);
}

/* Inner layout: gauge | text | sparkline */
.stat-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/* Circular SVG Gauge */
.stat-gauge-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.stat-gauge {
  width: 52px;
  height: 52px;
}

.gauge-bg {
  stroke: rgba(255, 255, 255, 0.1);
}

body.light-theme .gauge-bg {
  stroke: rgba(0, 0, 0, 0.08);
}

.gauge-fill {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-fill-total {
  stroke: #3b82f6;
}

.gauge-fill-active {
  stroke: #10b981;
}

.gauge-fill-expired {
  stroke: #ef4444;
}

.gauge-fill-online {
  stroke: #06b6d4;
}

.gauge-fill-offline {
  stroke: #94a3b8;
}

.gauge-fill-exp3 {
  stroke: #f59e0b;
}

.gauge-fill-exp7 {
  stroke: #ec4899;
}

.gauge-fill-disabled {
  stroke: #64748b;
}

.gauge-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  white-space: nowrap;
}

/* Sparkline Canvas */
.stat-sparkline {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.85;
  border-radius: 6px;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}


/* ==========================================
   3D TACTILE & COLORFUL STAT CARDS (LOW GPU)
   ========================================== */

.stat-card.clickable-card {
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.stat-card.clickable-card:hover {
  transform: translateY(-3px) !important;
}

.stat-card.clickable-card:active {
  transform: translateY(2px) !important;
}

/* =========================================================================
   LUMINOUS, GLOSSY & COLOR-COORDINATED SHINY DASHBOARD CARDS & CONTROLS
   (Matches OptiCore OS Glassmorphism & High-Gloss Aesthetics)
   ========================================================================= */

.stat-card {
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background 0.22s ease !important;
}

/* Glassmorphism Gloss Specular Top Reflection */
.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.03) 70%, transparent 100%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
  border-radius: 16px 16px 0 0;
  z-index: 1;
}

/* Ambient Corner Spotlight Flare */
.stat-card::before {
  content: '';
  position: absolute;
  top: -35%;
  left: -35%;
  width: 170%;
  height: 170%;
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

.stat-card.clickable-card {
  cursor: pointer;
  user-select: none;
}

.stat-card.clickable-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  z-index: 2;
}

.stat-card.clickable-card:active {
  transform: translateY(1px) scale(0.995) !important;
}

.stat-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* High-Tech Cockpit Circular Gauge Bezel */
.stat-gauge-wrap {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.12) 0%, rgba(10, 15, 30, 0.90) 100%) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 16px var(--gauge-glow, rgba(56, 189, 248, 0.35)) !important;
  border: 1.5px solid var(--gauge-border, rgba(56, 189, 248, 0.45)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-gauge {
  width: 50px;
  height: 50px;
}

.gauge-bg {
  stroke: rgba(255, 255, 255, 0.08) !important;
  stroke-width: 3.8px !important;
}

.gauge-fill {
  stroke-width: 4.5px !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 6px currentColor) !important;
}

.gauge-pct {
  font-family: 'JetBrains Mono', 'Inter', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px currentColor !important;
}

.stat-details {
  min-width: 0;
  flex: 1;
}

.stat-label {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  display: block !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 255, 255, 0.35) !important;
}

.stat-details h3 {
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin: 2px 0 3px 0 !important;
  letter-spacing: -0.5px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(255, 255, 255, 0.45) !important;
}

.stat-desc {
  font-size: 0.74rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.stat-desc i,
.stat-card .stat-desc i {
  color: #ffffff !important;
}

.stat-card .stat-desc,
.stat-card-inner .stat-desc,
.stats-grid .stat-desc,
.stat-details .stat-desc,
.stat-details span.stat-desc {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(255, 255, 255, 0.3) !important;
  font-weight: 600 !important;
}

.stat-card .stat-desc i,
.stat-card-inner .stat-desc i,
.stats-grid .stat-desc i,
.stat-details .stat-desc i {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

.stat-sparkline {
  flex-shrink: 0;
  margin-left: auto;
  border-radius: 6px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
}

/* 1. TOTAL USERS CARD (Electric Royal Blue / Cyan Glow) */
.stat-card.card-total {
  background: radial-gradient(circle at 18% 22%, rgba(56, 189, 248, 0.28) 0%, transparent 65%), linear-gradient(145deg, #0d1e3d 0%, #070e1e 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.38), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(56, 189, 248, 0.16) !important;
  --gauge-border: rgba(56, 189, 248, 0.55);
  --gauge-glow: rgba(56, 189, 248, 0.45);
}
.stat-card.card-total:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.7), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(56, 189, 248, 0.3) !important;
}
.card-total .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(56, 189, 248, 0.6);
}
.card-total h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(56, 189, 248, 0.8) !important;
}
.card-total .gauge-fill-total {
  stroke: #38bdf8 !important;
  filter: drop-shadow(0 0 7px #38bdf8) !important;
}
.card-total #gauge-pct-total {
  color: #ffffff !important;
  text-shadow: 0 0 8px #38bdf8;
}

/* 2. ACTIVE USERS CARD (Vibrant Emerald / Mint Green Glow) */
.stat-card.card-active {
  background: radial-gradient(circle at 18% 22%, rgba(16, 185, 129, 0.30) 0%, transparent 65%), linear-gradient(145deg, #092c22 0%, #051412 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.7) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(16, 185, 129, 0.18) !important;
  --gauge-border: rgba(16, 185, 129, 0.6);
  --gauge-glow: rgba(16, 185, 129, 0.45);
}
.stat-card.card-active:hover {
  border-color: #34d399 !important;
  box-shadow: 0 0 34px rgba(52, 211, 153, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(16, 185, 129, 0.32) !important;
}
.card-active .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(16, 185, 129, 0.6);
}
.card-active h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(52, 211, 153, 0.85) !important;
}
.card-active .gauge-fill-active {
  stroke: #34d399 !important;
  filter: drop-shadow(0 0 7px #34d399) !important;
}
.card-active #gauge-pct-active {
  color: #ffffff !important;
  text-shadow: 0 0 8px #34d399;
}

/* 3. EXPIRED USERS CARD (Neon Crimson / Coral Red Glow) */
.stat-card.card-expired {
  background: radial-gradient(circle at 18% 22%, rgba(244, 63, 94, 0.32) 0%, transparent 65%), linear-gradient(145deg, #2c0e1a 0%, #11060c 100%) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.75) !important;
  box-shadow: 0 0 22px rgba(244, 63, 94, 0.45), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 22px rgba(244, 63, 94, 0.2) !important;
  --gauge-border: rgba(244, 63, 94, 0.65);
  --gauge-glow: rgba(244, 63, 94, 0.45);
}
.stat-card.card-expired:hover {
  border-color: #fb7185 !important;
  box-shadow: 0 0 35px rgba(244, 63, 94, 0.8), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 28px rgba(244, 63, 94, 0.35) !important;
}
.card-expired .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(244, 63, 94, 0.6);
}
.card-expired h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(244, 63, 94, 0.85) !important;
}
.card-expired .gauge-fill-expired {
  stroke: #f43f5e !important;
  filter: drop-shadow(0 0 7px #f43f5e) !important;
}
.card-expired #gauge-pct-expired {
  color: #ffffff !important;
  text-shadow: 0 0 8px #f43f5e;
}

/* 4. ONLINE USERS CARD (Neon Purple / Violet Glow - Matches OptiCore Screenshot) */
.stat-card.card-online {
  background: radial-gradient(circle at 18% 22%, rgba(139, 92, 246, 0.32) 0%, transparent 65%), linear-gradient(145deg, #220f3e 0%, #0d071d 100%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.75) !important;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.45), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(139, 92, 246, 0.18) !important;
  --gauge-border: rgba(139, 92, 246, 0.65);
  --gauge-glow: rgba(139, 92, 246, 0.5);
}
.stat-card.card-online:hover {
  border-color: #a78bfa !important;
  box-shadow: 0 0 35px rgba(139, 92, 246, 0.8), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(139, 92, 246, 0.32) !important;
}
.card-online .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(139, 92, 246, 0.6);
}
.card-online h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(167, 139, 250, 0.85) !important;
}
.card-online .gauge-fill-online {
  stroke: #a78bfa !important;
  filter: drop-shadow(0 0 7px #a78bfa) !important;
}
.card-online #gauge-pct-online {
  color: #ffffff !important;
  text-shadow: 0 0 8px #a78bfa;
}

/* 5. OFFLINE USERS CARD (Cool Ice Slate / Silver Steel Glow) */
.stat-card.card-offline {
  background: radial-gradient(circle at 18% 22%, rgba(148, 163, 184, 0.25) 0%, transparent 65%), linear-gradient(145deg, #182335 0%, #090e18 100%) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.65) !important;
  box-shadow: 0 0 18px rgba(148, 163, 184, 0.35), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(148, 163, 184, 0.14) !important;
  --gauge-border: rgba(148, 163, 184, 0.55);
  --gauge-glow: rgba(148, 163, 184, 0.4);
}
.stat-card.card-offline:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 30px rgba(148, 163, 184, 0.65), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 25px rgba(148, 163, 184, 0.28) !important;
}
.card-offline .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(148, 163, 184, 0.5);
}
.card-offline h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 16px rgba(226, 232, 240, 0.7) !important;
}
.card-offline .gauge-fill-offline {
  stroke: #cbd5e1 !important;
  filter: drop-shadow(0 0 6px #cbd5e1) !important;
}
.card-offline #gauge-pct-offline {
  color: #ffffff !important;
  text-shadow: 0 0 6px #cbd5e1;
}

/* 6. EXP 3 DAYS CARD (Luminous Amber / Warm Gold Glow) */
.stat-card.card-exp3 {
  background: radial-gradient(circle at 18% 22%, rgba(245, 158, 11, 0.28) 0%, transparent 65%), linear-gradient(145deg, #291b08 0%, #110b04 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(245, 158, 11, 0.16) !important;
  --gauge-border: rgba(245, 158, 11, 0.6);
  --gauge-glow: rgba(245, 158, 11, 0.45);
}
.stat-card.card-exp3:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 32px rgba(245, 158, 11, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(245, 158, 11, 0.32) !important;
}
.card-exp3 .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(245, 158, 11, 0.6);
}
.card-exp3 h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(245, 158, 11, 0.85) !important;
}
.card-exp3 .gauge-fill-exp3 {
  stroke: #f59e0b !important;
  filter: drop-shadow(0 0 7px #f59e0b) !important;
}
.card-exp3 #gauge-pct-exp3 {
  color: #ffffff !important;
  text-shadow: 0 0 8px #f59e0b;
}

/* 7. EXP 7 DAYS CARD (Electric Rose / Magenta Pink Glow) */
.stat-card.card-exp7 {
  background: radial-gradient(circle at 18% 22%, rgba(236, 72, 153, 0.28) 0%, transparent 65%), linear-gradient(145deg, #2e0d22 0%, #12060f 100%) !important;
  border: 1.5px solid rgba(236, 72, 153, 0.7) !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(236, 72, 153, 0.16) !important;
  --gauge-border: rgba(236, 72, 153, 0.6);
  --gauge-glow: rgba(236, 72, 153, 0.45);
}
.stat-card.card-exp7:hover {
  border-color: #f472b6 !important;
  box-shadow: 0 0 32px rgba(236, 72, 153, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(236, 72, 153, 0.32) !important;
}
.card-exp7 .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(236, 72, 153, 0.6);
}
.card-exp7 h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(236, 72, 153, 0.85) !important;
}
.card-exp7 .gauge-fill-exp7 {
  stroke: #ec4899 !important;
  filter: drop-shadow(0 0 7px #ec4899) !important;
}
.card-exp7 #gauge-pct-exp7 {
  color: #ffffff !important;
  text-shadow: 0 0 8px #ec4899;
}

/* 8. DISABLED USERS CARD (Royal Neon Indigo / Violet Glow) */
.stat-card.card-disabled {
  background: radial-gradient(circle at 18% 22%, rgba(99, 102, 241, 0.28) 0%, transparent 65%), linear-gradient(145deg, #14173d 0%, #08091c 100%) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.7) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(99, 102, 241, 0.16) !important;
  --gauge-border: rgba(99, 102, 241, 0.6);
  --gauge-glow: rgba(99, 102, 241, 0.45);
}
.stat-card.card-disabled:hover {
  border-color: #818cf8 !important;
  box-shadow: 0 0 32px rgba(99, 102, 241, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(99, 102, 241, 0.32) !important;
}
.card-disabled .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(99, 102, 241, 0.6);
}
.card-disabled h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(99, 102, 241, 0.85) !important;
}
.card-disabled .gauge-fill-disabled {
  stroke: #818cf8 !important;
  filter: drop-shadow(0 0 7px #818cf8) !important;
}
.card-disabled #gauge-pct-disabled {
  color: #ffffff !important;
  text-shadow: 0 0 8px #818cf8;
}

/* 9. UNPAID DUES CARD (Fiery Orange-Red / Coral Glow) */
.stat-card.card-unpaid {
  background: radial-gradient(circle at 18% 22%, rgba(249, 115, 22, 0.28) 0%, transparent 65%), linear-gradient(145deg, #2b1307 0%, #120803 100%) !important;
  border: 1.5px solid rgba(249, 115, 22, 0.75) !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.42), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(249, 115, 22, 0.16) !important;
  --gauge-border: rgba(249, 115, 22, 0.65);
  --gauge-glow: rgba(249, 115, 22, 0.45);
}
.stat-card.card-unpaid:hover {
  border-color: #fb923c !important;
  box-shadow: 0 0 32px rgba(249, 115, 22, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 0 26px rgba(249, 115, 22, 0.32) !important;
}
.card-unpaid .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(249, 115, 22, 0.6);
}
.card-unpaid h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(249, 115, 22, 0.85) !important;
}
.card-unpaid .gauge-fill-unpaid {
  stroke: #f97316 !important;
  filter: drop-shadow(0 0 7px #f97316) !important;
}
.card-unpaid #gauge-pct-unpaid {
  color: #ffffff !important;
  text-shadow: 0 0 8px #f97316;
}

/* 10. BRAND CARD (Holographic Cyan & Blue Specular Frame) */
.stat-card.brand-name-card {
  background: radial-gradient(circle at 50% 30%, rgba(0, 242, 254, 0.20) 0%, transparent 70%), linear-gradient(145deg, #0e2238 0%, #060e18 100%);
  border: 1.5px solid rgba(0, 242, 254, 0.55) !important;
  box-shadow: 0 0 24px rgba(0, 242, 254, 0.35), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 24px rgba(0, 242, 254, 0.14) !important;
  overflow: visible !important;
}
.stat-card.brand-name-card::before {
  display: none !important;
}
.stat-card.brand-name-card.editor-open,
#brand-name-card.editor-open {
  z-index: 1050 !important;
}
.stat-card.brand-name-card:hover {
  border-color: rgba(0, 242, 254, 0.9) !important;
  box-shadow: 0 0 36px rgba(0, 242, 254, 0.6), 0 12px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.65) !important;
}
.brand-name-text {
  background: linear-gradient(135deg, #00f2fe 0%, #38bdf8 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(0, 242, 254, 0.7));
  font-weight: 900 !important;
  letter-spacing: 1px;
}

/* 11. ACTIVE CONNECTIONS (Teal / Cyan Neon Glow) */
.stat-card.gradient-cyan {
  background: radial-gradient(circle at 20% 25%, rgba(14, 165, 233, 0.28) 0%, transparent 60%), linear-gradient(145deg, #0c253d 0%, #06111f 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.38), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(14, 165, 233, 0.16) !important;
}
.stat-card.gradient-cyan:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 34px rgba(56, 189, 248, 0.7), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75) !important;
}
.stat-card.gradient-cyan .stat-icon {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}
.stat-card.gradient-cyan .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(56, 189, 248, 0.5);
}
.stat-card.gradient-cyan h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(56, 189, 248, 0.8) !important;
}

/* 12. ESTIMATED REVENUE (Emerald Mint Glow) */
.stat-card.gradient-green {
  background: radial-gradient(circle at 20% 25%, rgba(16, 185, 129, 0.30) 0%, transparent 60%), linear-gradient(145deg, #092a20 0%, #051410 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.65) !important;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(16, 185, 129, 0.18) !important;
}
.stat-card.gradient-green:hover {
  border-color: #34d399 !important;
  box-shadow: 0 0 35px rgba(52, 211, 153, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75) !important;
}
.stat-card.gradient-green .stat-icon {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1.5px solid #34d399 !important;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}
.stat-card.gradient-green .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(16, 185, 129, 0.5);
}
.stat-card.gradient-green h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(52, 211, 153, 0.85) !important;
}

/* 13. CORE ROUTER NODES (Cobalt / Sapphire Blue Glow) */
.stat-card.gradient-blue {
  background: radial-gradient(circle at 20% 25%, rgba(59, 130, 246, 0.28) 0%, transparent 60%), linear-gradient(145deg, #0f2042 0%, #060f22 100%) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.65) !important;
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(59, 130, 246, 0.16) !important;
}
.stat-card.gradient-blue:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75) !important;
}
.stat-card.gradient-blue .stat-icon {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1.5px solid #60a5fa !important;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}
.stat-card.gradient-blue .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(59, 130, 246, 0.5);
}
.stat-card.gradient-blue h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(96, 165, 250, 0.8) !important;
}

/* 14. RESELLERS BALANCE (Amethyst / Orchid Purple Glow) */
.stat-card.gradient-purple {
  background: radial-gradient(circle at 20% 25%, rgba(139, 92, 246, 0.28) 0%, transparent 60%), linear-gradient(145deg, #20103e 0%, #0d071c 100%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.65) !important;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 20px rgba(139, 92, 246, 0.16) !important;
}
.stat-card.gradient-purple:hover {
  border-color: #a78bfa !important;
  box-shadow: 0 0 35px rgba(139, 92, 246, 0.75), 0 14px 28px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.75) !important;
}
.stat-card.gradient-purple .stat-icon {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  border: 1.5px solid #a78bfa !important;
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}
.stat-card.gradient-purple .stat-label {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(139, 92, 246, 0.5);
}
.stat-card.gradient-purple h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(167, 139, 250, 0.85) !important;
}

/* VLAN MONITOR CARDS & ACTIVE SELECTION HIGHLIGHT */
.stat-card.vlan-card {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.stat-card.vlan-card.active {
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.65), 0 6px 0 #6d28d9, inset 0 1.5px 0 rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.38) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  transform: translateY(-3px);
}

.stat-card.vlan-card.is-disabled {
  opacity: 0.72;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

.stat-card.vlan-card.is-disabled:hover {
  opacity: 0.95;
}

.vlan-badge-disabled {
  display: inline-block;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: 0.4px;
}

/* TOP CONTROLS: SHINY BUTTONS & STATUS CHIPS */
/* TOP CONTROLS: SHINY BUTTONS & STATUS CHIPS */
#btn-top-manage-alerts {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.45) 0%, rgba(91, 33, 182, 0.65) 100%) !important;
  border: 1.5px solid #a78bfa !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.45) !important;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.6) !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
#btn-top-manage-alerts:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(109, 40, 217, 0.8) 100%) !important;
  border-color: #c4b5fd !important;
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-2px) !important;
}

#dash-dealer-filter, #dash-filter-admin-subdealers {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  color: #f8fafc !important;
  border-radius: 10px !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}
#dash-dealer-filter:hover, #dash-dealer-filter:focus,
#dash-filter-admin-subdealers:hover, #dash-filter-admin-subdealers:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.45) !important;
}

#btn-dashboard-add-connection {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid #34d399 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  white-space: nowrap;
}
#btn-dashboard-add-connection:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border-color: #6ee7b7 !important;
}
#btn-dashboard-add-connection:active {
  transform: translateY(1px);
}

.dashboard-internet-status {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(10, 25, 20, 0.95) 100%) !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}
.dashboard-internet-status .pulse-indicator {
  box-shadow: 0 0 10px #10b981, 0 0 20px #10b981 !important;
}

#dash-dd-status-chip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(20, 15, 8, 0.95) 100%) !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  color: #fde047 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
#dash-dd-status-chip:hover {
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px) !important;
}

.dashboard-section-title {
  color: #e2e8f0 !important;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
  letter-spacing: 0.8px !important;
}
.dashboard-section-title i {
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
}

/* ==========================================
   TOGGLE SWITCH STYLING FOR CRM SETTINGS & TEMPLATES
   ========================================== */
.switch, .toggle-switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  vertical-align: middle !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.switch input, .toggle-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.switch .slider, .toggle-switch .slider, .slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #334155 !important;
  transition: 0.25s !important;
  border-radius: 24px !important;
  border: 1.5px solid #475569 !important;
}

.switch .slider:before, .toggle-switch .slider:before, .slider:before {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 3px !important;
  bottom: 2.5px !important;
  background-color: #f8fafc !important;
  transition: 0.25s !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.switch input:checked + .slider, .toggle-switch input:checked + .slider, input:checked + .slider {
  background-color: #22c55e !important;
  border-color: #16a34a !important;
}

.switch input:checked + .slider:before, .toggle-switch input:checked + .slider:before, input:checked + .slider:before {
  transform: translateX(20px) !important;
  background-color: #ffffff !important;
}

/* Light Theme Card Overrides (NexCRM Clean SaaS Metric Cards) */
body.light-theme .stat-card,
body.theme-light .stat-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border-radius: 14px !important;
  transform: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.light-theme .stat-card:hover,
body.theme-light .stat-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(-2px) !important;
  border-color: #94a3b8 !important;
}

body.light-theme .stat-card .stat-label,
body.theme-light .stat-card .stat-label {
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.light-theme .stat-card h3,
body.theme-light .stat-card h3,
body.light-theme .stat-card h2,
body.theme-light .stat-card h2,
body.light-theme .stat-card .stat-value,
body.theme-light .stat-card .stat-value {
  color: #0f172a !important;
  font-size: 1.85rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

/* Secondary Badge styling */
.badge-secondary {
  background: linear-gradient(180deg, #64748b, #475569) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .badge-secondary {
  background: linear-gradient(180deg, #94a3b8, #64748b) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Standard flat fallback for non-clickable cards */
.gradient-cyan .stat-icon {
  background: rgba(0, 242, 254, 0.08);
  color: var(--color-cyan);
  border: 1px solid rgba(0, 242, 254, 0.15);
}

.gradient-green .stat-icon {
  background: rgba(56, 239, 125, 0.08);
  color: var(--color-green);
  border: 1px solid rgba(56, 239, 125, 0.15);
}

.gradient-blue .stat-icon {
  background: rgba(79, 172, 254, 0.08);
  color: var(--color-blue);
  border: 1px solid rgba(79, 172, 254, 0.15);
}

.gradient-purple .stat-icon {
  background: rgba(176, 106, 179, 0.08);
  color: var(--color-purple);
  border: 1px solid rgba(176, 106, 179, 0.15);
}

.gradient-orange .stat-icon {
  background: rgba(240, 147, 43, 0.08);
  color: var(--color-orange);
  border: 1px solid rgba(240, 147, 43, 0.15);
}

.gradient-red .stat-icon {
  background: rgba(235, 77, 75, 0.08);
  color: var(--color-red);
  border: 1px solid rgba(235, 77, 75, 0.15);
}

.stat-details {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.8rem;
  color: #ffffff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 255, 255, 0.35) !important;
}

.stat-details h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff !important;
  margin: 4px 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(255, 255, 255, 0.45) !important;
}

.stat-desc {
  font-size: 0.75rem;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Card layout configurations */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 10px;
}

.card-header h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
}

/* ==========================================
   6. TABLES & DATA REPRESENTATION
   ========================================== */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  /* Space out rows slightly for 3D look */
  text-align: left;
}

.data-table th {
  padding: 8px 8px;
  color: var(--text-main) !important;
  font-weight: 700;
  font-size: 0.82rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important;
  border-top: 1px solid var(--border-glass) !important;
  border-bottom: 3px solid rgba(0, 242, 254, 0.25) !important;
  /* Cyan 3D bottom shade */
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

body.light-theme .data-table th {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
  border-top: 1px solid rgba(203, 213, 225, 0.4) !important;
  border-bottom: 3px solid rgba(37, 99, 235, 0.2) !important;
  /* Blue 3D bottom shade */
  color: #1e293b !important;
}

.data-table td {
  padding: 8px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  /* 3D bottom row edge */
  background: rgba(255, 255, 255, 0.01);
  font-size: 0.88rem;
  vertical-align: middle;
}

body.light-theme .data-table td {
  border-top: 1px solid rgba(203, 213, 225, 0.3);
  border-bottom: 2px solid rgba(203, 213, 225, 0.6);
  background: #ffffff;
  color: #334155;
}

.data-table tbody tr {
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  transform: translateY(0);
}

.data-table tbody tr:hover {
  background: rgba(0, 242, 254, 0.04) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

body.light-theme .data-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.03) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
}

.font-sm th,
.font-sm td {
  font-size: 0.78rem;
  padding: 9px 11px;
}

/* Status Badges */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge-success,
.badge-Active,
.badge-Online,
.badge-Paid,
.badge-Approved {
  background: linear-gradient(180deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.badge-warning,
.badge-Expired,
.badge-Unpaid,
.badge-Pending,
.badge-Pending-Survey {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.badge-danger,
.badge-Suspended,
.badge-Offline,
.badge-Failed,
.badge-Overdue,
.badge-Loss-of-Signal-LOS {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.badge-info,
.badge-In-Progress,
.badge-Unknown,
.badge-Unused {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================
   7. DYNAMIC SPLIT LAYOUTS
   ========================================== */
.dashboard-layouts {
  display: flex;
  gap: 24px;
}

.layout-main {
  flex: 2;
  min-width: 0;
}

.layout-sidebar {
  flex: 1;
  min-width: 0;
}

.network-layouts {
  display: block;
  width: 100%;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 240px;
  margin-top: 10px;
}

/* Simple ticket list */
.ticket-simple-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ticket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}

body.light-theme .ticket-item {
  background: #ffffff;
}

.ticket-item-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ticket-item-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.ticket-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ==========================================
   8. BUTTONS & INPUT ELEMENTS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.86rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-main);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  letter-spacing: 0.2px;
}

.btn:active {
  transform: translateY(0.5px) scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

body.light-theme .btn-primary {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.15);
}

.btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

body.light-theme .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.25);
}

.btn-secondary {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
}

body.light-theme .btn-secondary {
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(203, 213, 225, 0.7);
  color: #1e293b;
}

.btn-secondary:hover {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.18);
}

body.light-theme .btn-secondary:hover {
  background: rgba(226, 232, 240, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #047857);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.btn-success:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, #34d399, #059669);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, #f87171, #dc2626);
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.btn-warning:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, #fbbf24, #e11d48);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.76rem;
  border-radius: 6px;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
}

/* ==========================================
   9. MODALS & FORMS
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 16px;
  box-sizing: border-box;
}

.modal-overlay:not(.active),
.modal-overlay:not(.active) * {
  pointer-events: none !important;
}

.modal-overlay.active {
  display: flex !important;
  opacity: 1;
  pointer-events: auto !important;
}

.modal-card {
  background: #0d1527;
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  width: 650px;
  max-width: 90%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-main);
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

/* Universal Auto-Fit System for Edit Subscriber & Add Ticket Modals */
#modal-edit-subscriber,
#modal-add-ticket {
  padding: 16px !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

#modal-edit-subscriber .modal-card,
#modal-edit-subscriber .edit-sub-card,
#modal-add-ticket .modal-card,
#modal-add-ticket .add-ticket-card {
  width: 100% !important;
  max-width: 720px !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  height: auto !important;
  background: #0b1329 !important;
  border: 1.5px solid #1e293b !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), 0 0 35px rgba(56, 189, 248, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  position: relative !important;
  transform: none !important;
  color: #f8fafc !important;
  padding: 0 !important;
}

#modal-add-ticket .modal-card,
#modal-add-ticket .add-ticket-card {
  max-width: 660px !important;
}

#modal-edit-subscriber .modal-header,
#modal-edit-subscriber .edit-sub-header,
#modal-add-ticket .modal-header,
#modal-add-ticket .add-ticket-header {
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 10 !important;
}

#modal-edit-subscriber #form-edit-subscriber,
#modal-edit-subscriber .edit-sub-form,
#modal-add-ticket #form-add-ticket,
#modal-add-ticket .add-ticket-form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #0b1329 !important;
}

#modal-edit-subscriber .edit-sub-scrollable-body,
#modal-add-ticket .add-ticket-scrollable-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 18px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 rgba(11, 19, 41, 0.6);
}

#modal-edit-subscriber .edit-sub-scrollable-body::-webkit-scrollbar,
#modal-add-ticket .add-ticket-scrollable-body::-webkit-scrollbar {
  width: 7px;
}
#modal-edit-subscriber .edit-sub-scrollable-body::-webkit-scrollbar-track,
#modal-add-ticket .add-ticket-scrollable-body::-webkit-scrollbar-track {
  background: rgba(11, 19, 41, 0.6);
  border-radius: 4px;
}
#modal-edit-subscriber .edit-sub-scrollable-body::-webkit-scrollbar-thumb,
#modal-add-ticket .add-ticket-scrollable-body::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
#modal-edit-subscriber .edit-sub-scrollable-body::-webkit-scrollbar-thumb:hover,
#modal-add-ticket .add-ticket-scrollable-body::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

#modal-edit-subscriber .modal-actions,
#modal-edit-subscriber .edit-sub-footer,
#modal-add-ticket .modal-actions,
#modal-add-ticket .add-ticket-footer {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  background: #070d1d !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6) !important;
  z-index: 100 !important;
  margin: 0 !important;
}

/* Universal Fixed Auto-Fit System for POS Renewal Modal (#modal-agent-pos) */
#modal-agent-pos {
  padding: 14px !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
}

#modal-agent-pos.active {
  display: flex !important;
}

#modal-agent-pos .modal-card,
#modal-agent-pos .pos-modal-card {
  width: 100% !important;
  max-width: 440px !important;
  max-height: calc(100vh - 28px) !important;
  max-height: calc(100dvh - 28px) !important;
  background: #0d1527 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  position: relative !important;
  transform: none !important;
}

#modal-agent-pos .modal-header,
#modal-agent-pos .pos-modal-header {
  flex-shrink: 0 !important;
  background: #0f172a !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 10 !important;
  margin: 0 !important;
}

#modal-agent-pos #form-agent-pos,
#modal-agent-pos .pos-modal-form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#modal-agent-pos .pos-modal-scroll-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 18px 12px 18px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 rgba(11, 19, 41, 0.6);
}

#modal-agent-pos .pos-modal-scroll-body::-webkit-scrollbar {
  width: 6px;
}
#modal-agent-pos .pos-modal-scroll-body::-webkit-scrollbar-track {
  background: rgba(11, 19, 41, 0.6);
}
#modal-agent-pos .pos-modal-scroll-body::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
#modal-agent-pos .pos-modal-scroll-body::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
}

#modal-agent-pos .pos-form-group {
  margin-bottom: 12px !important;
}

#modal-agent-pos .pos-modal-footer {
  flex-shrink: 0 !important;
  padding: 12px 18px !important;
  background: #090e1c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5) !important;
  z-index: 10 !important;
  margin: 0 !important;
}

body.light-theme .modal-card {
  background: #ffffff;
}

.modal-sm {
  width: 420px;
}

.modal-overlay.active .modal-card {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-glass);
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.modal-close-btn {
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  color: var(--text-main);
}

.modal-form {
  padding: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-group.full-width {
  grid-column: span 2;
}

/* ULTRA-HIGH VISIBILITY FORM CONTROLS & 3D INPUT DESIGN SYSTEM */
.form-group label,
.form-group-3d label,
.modal-form label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 7px !important;
  display: block !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

body.light-theme .form-group label,
body.light-theme .form-group-3d label,
body.light-theme .modal-form label {
  color: #0f172a !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-group-3d input,
.form-group-3d select,
.form-group-3d textarea,
.modal-form input,
.modal-form select,
.modal-form textarea,
.form-control {
  background: #1e293b !important;
  border: 1.5px solid #475569 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 0.96rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  font-family: var(--font-main) !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.form-group-3d input::placeholder,
.form-group-3d textarea::placeholder,
.modal-form input::placeholder,
.modal-form textarea::placeholder,
.form-control::placeholder {
  color: #a1a1aa !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

body.light-theme .form-group input,
body.light-theme .form-group select,
body.light-theme .form-group textarea,
body.light-theme .form-group-3d input,
body.light-theme .form-group-3d select,
body.light-theme .form-group-3d textarea,
body.light-theme .modal-form input,
body.light-theme .modal-form select,
body.light-theme .modal-form textarea,
body.light-theme .form-control {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group-3d input:focus,
.form-group-3d select:focus,
.form-group-3d textarea:focus,
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus,
.form-control:focus {
  border-color: #38bdf8 !important;
  background: #182842 !important;
  box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.4), 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

body.light-theme .form-group input:focus,
body.light-theme .form-group select:focus,
body.light-theme .form-group textarea:focus,
body.light-theme .form-group-3d input:focus,
body.light-theme .form-group-3d select:focus,
body.light-theme .form-group-3d textarea:focus,
body.light-theme .modal-form input:focus,
body.light-theme .modal-form select:focus,
body.light-theme .modal-form textarea:focus,
body.light-theme .form-control:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
}

/* Modals High Visibility Card Overlay */
.modal-card,
.modal {
  background: #0b1329 !important;
  border: 1.5px solid #1e293b !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), 0 0 35px rgba(56, 189, 248, 0.2) !important;
  border-radius: 16px !important;
  opacity: 1 !important;
  color: #f8fafc !important;
}

body.light-theme .modal-card,
body.light-theme .modal {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  color: #0f172a !important;
}

.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}

.standard-form {
  margin-top: 14px;
}

/* ==========================================
   10. SETTINGS & LOG PANELS
   ========================================== */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.whatsapp-logs-container {
  margin-top: 20px;
  border-top: 1px solid var(--border-glass);
  padding-top: 14px;
}

.whatsapp-logs-container h4 {
  font-size: 0.88rem;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.notification-list {
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-list li {
  background: rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  border-left: 3px solid var(--color-blue);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.light-theme .notification-list li {
  background: #f8fafc;
}

.notification-list li.status-Sent {
  border-left-color: var(--color-green);
}

.notification-list li.status-Failed {
  border-left-color: var(--color-red);
}

.notification-list .log-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.notification-list .log-time {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.notification-list .log-msg {
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================
   11. SYSTEM TOAST MESSAGES
   ========================================== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(13, 21, 39, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--color-cyan);
  box-shadow: var(--shadow-glow);
  padding: 12px 18px;
  border-radius: 12px;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  max-width: min(480px, calc(100vw - 32px));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease, box-shadow 0.2s ease;
  user-select: none;
}

body.light-theme .toast {
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.toast.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), var(--shadow-glow);
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #f8fafc;
}

body.light-theme .toast-content {
  color: #0f172a;
}

#toast-icon {
  font-size: 1.2rem;
  color: var(--color-cyan);
  flex-shrink: 0;
}

.toast-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.toast-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

body.light-theme .toast-close-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.08);
}

/* Table action groups */
.table-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.filter-group {
  display: flex;
  gap: 12px;
}

.filter-group select {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-glass);
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-main);
  outline: none;
  font-family: var(--font-main);
  font-size: 0.84rem;
}

body.light-theme .filter-group select {
  background: #ffffff;
}

/* Terminal diagnostics */
.terminal-log {
  background: #020617;
  color: #38ef7d;
  font-family: var(--font-mono);
  padding: 16px;
  border-radius: 10px;
  font-size: 0.8rem;
  height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-glass);
  line-height: 1.5;
}

/* GIS Maps Canvas containers */
.gismap-container {
  display: flex;
  justify-content: center;
  background: #020617;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--border-glass);
  overflow: hidden;
}

body.light-theme .gismap-container {
  background: #e2e8f0;
}

/* ==========================================
   12. ENTERPRISE PRINTING MODULE
   ========================================== */
.print-only {
  display: none;
}

@media print {

  /* Hide CRM shell completely */
  .app-container,
  .modal-overlay,
  .toast,
  .sidebar,
  .main-content,
  .glass-bg-blur {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .print-only {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    font-family: var(--font-main);
    color: #000000;
  }

  #print-receipt-sheet {
    max-width: 320px;
    /* Standard POS thermal slip width */
    margin: 0 auto;
    padding: 10px;
    border: 1px dashed #000000;
  }

  .print-header {
    text-align: center;
    border-bottom: 1px dashed #000000;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .print-header h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
  }

  .print-body p {
    font-size: 0.85rem;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
  }

  .print-body .amount {
    font-size: 1.1rem;
    font-weight: bold;
    border-top: 1px dashed #000000;
    padding-top: 6px;
    margin-top: 8px;
  }

  .print-body .due {
    font-size: 0.9rem;
    font-weight: bold;
  }

  .print-footer {
    text-align: center;
    border-top: 1px dashed #000000;
    padding-top: 8px;
    margin-top: 12px;
    font-size: 0.75rem;
  }
}

/* Tabbed Modal Design */
.modal-form-tabbed {
  display: flex;
  flex-direction: column;
  height: 540px;
}

.modal-tabbed-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.modal-tab-sidebar {
  width: 210px;
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid var(--border-glass);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.light-theme .modal-tab-sidebar {
  background: #f8fafc;
}

.modal-tab-item {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.modal-tab-item:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.02);
}

.modal-tab-item.active {
  background: rgba(79, 172, 254, 0.12);
  color: var(--color-cyan);
  border-color: rgba(79, 172, 254, 0.25);
}

body.light-theme .modal-tab-item.active {
  background: rgba(79, 172, 254, 0.08);
  color: var(--color-purple-dark);
}

.modal-tab-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.modal-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.modal-pane.active {
  display: block;
}

.pane-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 8px;
  color: var(--color-cyan);
}

body.light-theme .pane-title {
  color: var(--color-purple-dark);
}

.sub-pane-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin-top: 20px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border-glass);
  padding-bottom: 6px;
}

/* Speed inputs wrappers */
.speed-input-wrapper {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  overflow: hidden;
  align-items: center;
}

body.light-theme .speed-input-wrapper {
  background: #f8fafc;
}

.speed-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #0f172a;
}

.speed-icon.down {
  background: var(--color-green);
}

.speed-icon.up {
  background: var(--color-cyan);
}

.speed-input-wrapper input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;
}

/* Footer layout */
.modal-tabbed-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--border-glass);
}

body.light-theme .modal-tabbed-footer {
  background: #f1f5f9;
}

.btn-round {
  border-radius: 24px !important;
  padding: 10px 24px !important;
}

.modal-card.modal-lg {
  width: 820px;
}

/* Details Modal Table */
.table-details {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 20px;
}

.table-details th {
  text-align: left;
  padding: 10px 14px;
  color: var(--text-muted);
  width: 170px;
  border-bottom: 1px solid var(--border-glass);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-details td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-glass);
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.9rem;
}

body.light-theme .table-details th,
body.light-theme .table-details td {
  border-bottom-color: #e2e8f0;
}

/* ==========================================================================
   PREMIUM SUBSCRIBER PROFILE CARD (NOC SUITE)
   ========================================================================== */

.detail-profile-modal {
  width: 760px !important;
  max-width: 95% !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-glass) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.profile-card-body {
  padding: 24px !important;
}

.profile-header-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0.03) 100%);
  border: 1px solid rgba(0, 242, 254, 0.15);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.light-theme .profile-header-banner {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.05) 0%, rgba(79, 172, 254, 0.02) 100%);
  border-color: rgba(0, 242, 254, 0.12);
  box-shadow: none;
}

.profile-avatar-circle {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(0, 242, 254, 0.2);
}

.profile-primary-details h4 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.profile-subtitle {
  display: flex;
  gap: 12px;
  align-items: center;
}

#det-username-badge {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

#det-username-badge code {
  color: var(--color-cyan) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: monospace;
}

body.light-theme #det-username-badge code {
  background: rgba(0, 0, 0, 0.05) !important;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .profile-info-grid {
    grid-template-columns: 1fr;
  }
}

.profile-info-section {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-theme .profile-info-section {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.profile-info-section h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}

body.light-theme .profile-info-section h5 {
  border-bottom-color: #e2e8f0;
}

.info-card-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-card-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.info-card-value {
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(56, 239, 125, 0.1);
  border-radius: 50%;
  transition: var(--transition-smooth);
  color: var(--color-green);
  text-decoration: none;
}

.btn-whatsapp-icon:hover {
  background: rgba(56, 239, 125, 0.2);
  transform: translateY(-2px);
}

.info-card-value.copyable {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-glass);
  padding: 6px 12px;
  border-radius: 8px;
  width: fit-content;
}

body.light-theme .info-card-value.copyable {
  background: #ffffff;
  border-color: #cbd5e1;
}

.password-detail-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-cyan) !important;
  font-family: monospace;
  font-size: 1rem;
  padding: 0 !important;
  width: 120px;
  outline: none;
  font-weight: 700;
}

body.light-theme .password-detail-input {
  color: #0f172a !important;
}

.btn-copy-icon {
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px;
  color: #475569 !important;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.8rem;
  box-shadow: 0 2px 0 #cbd5e1, 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  transform: translateY(-1px);
}

body.dark-theme .btn-copy-icon {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 0 #020617, 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-copy-icon:hover {
  color: #ffffff !important;
  filter: brightness(1.15);
}

.btn-copy-icon:active {
  transform: translateY(1px);
  box-shadow: 0 0px 0 transparent, 0 0px 0 transparent;
}

/* Dedicated Subprofile Inline Action Buttons (High Contrast Pure White Text) */
.subprof-inline-btn {
  color: #ffffff !important;
  font-family: inherit;
  font-weight: 800 !important;
  border-radius: 5px !important;
  padding: 3px 9px !important;
  cursor: pointer !important;
  font-size: 0.72rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
  text-decoration: none !important;
}

.subprof-inline-btn i,
.subprof-inline-btn span {
  color: #ffffff !important;
  font-size: 0.75rem !important;
}

.subprof-inline-btn:hover {
  filter: brightness(1.18) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

.subprof-inline-btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.95) !important;
}

.subprof-inline-btn.btn-red {
  background: #dc2626 !important;
  border: 1px solid #ef4444 !important;
  color: #ffffff !important;
}

.subprof-inline-btn.btn-green {
  background: #10b981 !important;
  border: 1px solid #34d399 !important;
  color: #ffffff !important;
}

.subprof-inline-btn.btn-blue {
  background: #0284c7 !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
}

/* Dedicated Profile Dashboard Grid */
.profile-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.profile-dashboard-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Subscriber Profile Dashboard 3D Header Buttons */

/* Back Button */
#panel-subscriber-profile .panel-header .btn-icon {
  background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
  box-shadow: 0 3px 0 #cbd5e1, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1.5px);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark-theme #panel-subscriber-profile .panel-header .btn-icon {
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  box-shadow: 0 3px 0 #020617, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

#panel-subscriber-profile .panel-header .btn-icon:hover {
  filter: brightness(1.05);
}

#panel-subscriber-profile .panel-header .btn-icon:active {
  transform: translateY(1.5px) !important;
  box-shadow: 0 0px 0 transparent !important;
}

/* Profile Dashboard Action Buttons & Card Styles Handled by .subprof-* classes */

/* Stacked 3D Plate styling for detail items */
.profile-detail-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 12px !important;
  margin-bottom: 6px !important;
  border-radius: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(8, 163, 109, 0.08), rgba(8, 163, 109, 0.03)) !important;
  border: 1px solid rgba(8, 163, 109, 0.3) !important;
  box-shadow: 0 3px 0 #08a36d, 0 2px 4px rgba(8, 163, 109, 0.1) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

body.light-theme .profile-detail-item {
  background: linear-gradient(180deg, rgba(8, 163, 109, 0.06), rgba(8, 163, 109, 0.02)) !important;
  border: 1px solid rgba(8, 163, 109, 0.22) !important;
  box-shadow: 0 3px 0 #08a36d, 0 2px 4px rgba(8, 163, 109, 0.05) !important;
}

.profile-detail-item:last-child {
  margin-bottom: 0 !important;
}

/* Row card hover lift-up effect */
.profile-detail-item:hover {
  transform: translateY(-1.5px);
}

.profile-detail-label {
  font-size: 0.82rem !important;
  color: #1e293b !important;
  /* High-visibility dark blue-black text labels */
  font-weight: 750 !important;
  /* Bold labels */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

body.dark-theme .profile-detail-label {
  color: #cbd5e1 !important;
  /* Fallback to light grey on dark theme */
}

.profile-detail-value {
  font-size: 0.88rem !important;
  color: #000000 !important;
  /* Pure black text values for maximum visual contrast */
  font-weight: 800 !important;
  /* Ultra bold values */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  text-align: right !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.dark-theme .profile-detail-value {
  color: #ffffff !important;
  /* Pure white text values in dark theme */
}

/* Code tags for PPPoE Username & Password values */
#panel-subscriber-profile code {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
  /* Pure black username & password values */
  font-weight: 750 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-family: 'JetBrains Mono', monospace !important;
}

body.dark-theme #panel-subscriber-profile code {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}



/* OPTICORE WORLD LOCATIONS ROTATING LOGIN STYLES */
.login-screen-overlay {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  background: #080c14 !important;
}

body.crm-auto-scaled .login-screen-overlay {
  zoom: calc(1 / var(--crm-active-scale, 1)) !important;
}

.login-bg-layer {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transition: opacity 1.8s ease-in-out, transform 25s linear;
  transform: scale(1.04);
}

.login-bg-layer.active {
  opacity: 1;
  transform: scale(1);
}

.login-bg-dark-overlay {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.32) 100%) !important;
  z-index: 2 !important;
  pointer-events: none;
}

.login-location-badge {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 25px;
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.login-location-badge {
  display: none !important;
}

.login-card-opticore {
  position: relative;
  z-index: 10;
  width: 92%;
  max-width: 340px;
  padding: 20px 10px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.opticore-brand-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
}

.opticore-brand-name-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.opticore-brand-name {
  display: none !important;
}

.opticore-brand-subtitle {
  font-family: var(--font-display, inherit) !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

.opticore-login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.opticore-input-group {
  position: relative;
  width: 100%;
}

.opticore-input-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  font-size: 1rem !important;
  pointer-events: none !important;
  transition: color 0.25s ease;
  z-index: 2 !important;
}

.opticore-input-group input,
#login-username,
#login-password,
#login-otp-code {
  width: 100% !important;
  height: 52px !important;
  padding: 13px 20px 13px 48px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s ease !important;
}

.opticore-input-group input::placeholder,
#login-username::placeholder,
#login-password::placeholder,
#login-otp-code::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

.opticore-input-group input:focus,
#login-username:focus,
#login-password:focus,
#login-otp-code:focus {
  border-color: #ff6b35 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Chrome autofill text black & background white */
.opticore-input-group input:-webkit-autofill,
.opticore-input-group input:-webkit-autofill:hover, 
.opticore-input-group input:-webkit-autofill:focus, 
.opticore-input-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
  color: #000000 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
}

.opticore-input-group input:focus+.opticore-input-icon,
.opticore-input-group input:focus~.opticore-input-icon,
.opticore-input-group input:focus~i {
  color: #ff6b35 !important;
}

.opticore-remember-group {
  display: none !important;
}

.opticore-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 500;
  user-select: none;
  transition: color 0.2s ease;
}

.opticore-checkbox-label:hover {
  color: #f1f5f9;
}

.opticore-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  outline: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.opticore-checkbox:checked {
  background: #ff6b35;
  border-color: #ff6b35;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

.opticore-checkbox:checked::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #ffffff;
  font-size: 0.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-opticore-login {
  width: 100% !important;
  height: 50px !important;
  padding: 14px 20px !important;
  margin-top: 8px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: linear-gradient(135deg, #f95721 0%, #ff6b35 100%) !important;
  color: #ffffff !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(249, 87, 33, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

.btn-opticore-login:hover {
  background: linear-gradient(135deg, #ff6738 0%, #f95721 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 25px rgba(249, 87, 33, 0.55) !important;
}

.btn-opticore-cancel {
  width: 100%;
  height: 46px;
  padding: 12px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.2s ease;
}

.btn-opticore-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.opticore-error-msg {
  margin-top: 16px;
  color: #ef4444;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 10px 16px;
  border-radius: 14px;
  width: 100%;
}

.login-footer-opticore {
  position: absolute;
  bottom: 22px;
  width: 100%;
  text-align: center;
  z-index: 10;
  color: rgba(241, 245, 249, 0.75);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Premium 3D Digital Clock Widget */
.premium-clock-3d {
  background: radial-gradient(circle at 20% 30%, rgba(0, 242, 254, 0.2) 0%, transparent 60%), linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.98)) !important;
  border: 1.5px solid rgba(0, 242, 254, 0.6) !important;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.35), 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 12px !important;
  padding: 6px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  user-select: none;
  font-family: 'JetBrains Mono', monospace;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-theme .premium-clock-3d {
  background: linear-gradient(180deg, #ffffff, #f0f9ff) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 6px 12px rgba(14, 165, 233, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

.premium-clock-3d:hover {
  transform: translateY(-2px) !important;
  border-color: #00f2fe !important;
  box-shadow: 0 0 24px rgba(0, 242, 254, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
}

.clock-time-section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clock-digits {
  display: flex;
  align-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #00f2fe;
  text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
  line-height: 1;
}

body.light-theme .clock-digits {
  color: #0284c7;
  text-shadow: 0 1px 2px rgba(2, 132, 199, 0.15);
}

.digit-colon {
  animation: blink-colon 1s infinite steps(1);
  opacity: 0.85;
  margin: 0 2px;
}

@keyframes blink-colon {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.15;
  }
}

.clock-ampm {
  font-size: 0.72rem;
  font-weight: 800;
  color: #38ef7d;
  text-shadow: 0 0 6px rgba(56, 239, 125, 0.4);
  line-height: 1;
}

body.light-theme .clock-ampm {
  color: #10b981;
  text-shadow: none;
}

.clock-divider {
  width: 1.5px;
  height: 28px;
  background: rgba(255, 255, 255, 0.15);
}

body.light-theme .clock-divider {
  background: rgba(14, 165, 233, 0.25);
}

.clock-date-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  line-height: 1.1;
  gap: 1px;
}

.clock-day {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: #00f2fe;
  text-shadow: 0 0 4px rgba(0, 242, 254, 0.4);
  letter-spacing: 0.5px;
}

body.light-theme .clock-day {
  color: #0ea5e9;
  text-shadow: none;
}

.clock-date {
  font-size: 0.52rem !important;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
}

body.light-theme .clock-date {
  color: #0f172a;
}

.clock-timezone {
  font-size: 0.46rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ==========================================================================
   13. PREMIUM 3D & COLOR SYSTEMS FOR 9 TARGETED PAGES
   ========================================================================== */

:root {
  --shadow-3d-cyan: 0 6px 0 #0891b2, 0 12px 24px rgba(0, 242, 254, 0.18);
  --shadow-3d-blue: 0 6px 0 #1d4ed8, 0 12px 24px rgba(79, 172, 254, 0.18);
  --shadow-3d-green: 0 6px 0 #047857, 0 12px 24px rgba(56, 239, 125, 0.18);
  --shadow-3d-purple: 0 6px 0 #6d28d9, 0 12px 24px rgba(176, 106, 179, 0.18);
  --shadow-3d-orange: 0 6px 0 #c2410c, 0 12px 24px rgba(240, 147, 43, 0.18);
  --shadow-3d-red: 0 6px 0 #b91c1c, 0 12px 24px rgba(235, 77, 75, 0.18);
  --shadow-3d-slate: 0 6px 0 #1e293b, 0 12px 24px rgba(0, 0, 0, 0.35);
  --shadow-3d-white: 0 6px 0 #cbd5e1, 0 12px 24px rgba(14, 165, 233, 0.08);
  --transition-3d: transform 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3D Elevated Cards */
.card-3d {
  background: linear-gradient(135deg, rgba(18, 28, 48, 0.65), rgba(10, 18, 32, 0.8)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 26px !important;
  margin-bottom: 28px !important;
  transition: var(--transition-3d) !important;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-3d-slate) !important;
}

body.light-theme .card-3d {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 255, 0.92)) !important;
  border: 1px solid rgba(14, 165, 233, 0.15) !important;
  box-shadow: var(--shadow-3d-white) !important;
}

/* Card 3D Accent Borders & Colors */
.card-3d.cyan {
  box-shadow: var(--shadow-3d-cyan) !important;
  border-top: 4px solid var(--color-cyan) !important;
}

.card-3d.blue {
  box-shadow: var(--shadow-3d-blue) !important;
  border-top: 4px solid var(--color-blue) !important;
}

.card-3d.green {
  box-shadow: var(--shadow-3d-green) !important;
  border-top: 4px solid var(--color-green) !important;
}

.card-3d.purple {
  box-shadow: var(--shadow-3d-purple) !important;
  border-top: 4px solid var(--color-purple) !important;
}

.card-3d.orange {
  box-shadow: var(--shadow-3d-orange) !important;
  border-top: 4px solid var(--color-orange) !important;
}

.card-3d.red {
  box-shadow: var(--shadow-3d-red) !important;
  border-top: 4px solid var(--color-red) !important;
}

/* Interactive Hover/Active for 3D Cards */
.card-3d.interactive:hover {
  transform: translateY(-2px) !important;
}

.card-3d.interactive:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .card-3d.interactive:active {
  box-shadow: 0 2px 0 rgba(14, 165, 233, 0.1), 0 4px 8px rgba(14, 165, 233, 0.05) !important;
}

/* 3D Forms & Input Panels */
.form-group-3d {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group-3d label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

body.light-theme .form-group-3d label {
  color: #475569;
}

.form-group-3d input,
.form-group-3d select,
.form-group-3d textarea {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(5, 8, 16, 0.55) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  font-family: var(--font-main) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

body.light-theme .form-group-3d input,
body.light-theme .form-group-3d select,
body.light-theme .form-group-3d textarea {
  box-shadow: inset 0 3px 6px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

.form-group-3d input:focus,
.form-group-3d select:focus,
.form-group-3d textarea:focus {
  border-color: var(--color-cyan) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 242, 254, 0.25) !important;
}

body.light-theme .form-group-3d input:focus,
body.light-theme .form-group-3d select:focus,
body.light-theme .form-group-3d textarea:focus {
  border-color: #0ea5e9 !important;
  box-shadow: inset 0 2px 4px rgba(14, 165, 233, 0.06), 0 0 10px rgba(14, 165, 233, 0.2) !important;
}

/* 3D Action Buttons */
.btn-3d {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 0.88rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  position: relative !important;
  transition: all 0.1s ease !important;
  font-family: var(--font-main) !important;
  outline: none !important;
}

.btn-3d.cyan {
  background: linear-gradient(180deg, #06b6d4, #0891b2) !important;
  box-shadow: 0 4.5px 0 #015f72, 0 8px 16px rgba(6, 182, 212, 0.2) !important;
  color: #ffffff !important;
}

.btn-3d.blue {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  box-shadow: 0 4.5px 0 #113594, 0 8px 16px rgba(37, 99, 235, 0.2) !important;
  color: #ffffff !important;
}

.btn-3d.green {
  background: linear-gradient(180deg, #10b981, #059669) !important;
  box-shadow: 0 4.5px 0 #024e35, 0 8px 16px rgba(16, 185, 129, 0.2) !important;
  color: #ffffff !important;
}

.btn-3d.purple {
  background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 4.5px 0 #3b0764, 0 8px 16px rgba(139, 92, 246, 0.2) !important;
  color: #ffffff !important;
}

.btn-3d.orange {
  background: linear-gradient(180deg, #f97316, #ea580c) !important;
  box-shadow: 0 4.5px 0 #7c2d12, 0 8px 16px rgba(249, 115, 22, 0.2) !important;
  color: #ffffff !important;
}

.btn-3d.red {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
  box-shadow: 0 4.5px 0 #7f1d1d, 0 8px 16px rgba(239, 68, 68, 0.2) !important;
  color: #ffffff !important;
}

.btn-3d.slate {
  background: linear-gradient(180deg, #64748b, #475569) !important;
  box-shadow: 0 4.5px 0 #1e293b, 0 8px 16px rgba(0, 0, 0, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .btn-3d.slate {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.btn-3d:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-0.5px) !important;
}

.btn-3d:active {
  transform: translateY(3.5px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* 3D Elevated Tables */
.table-3d {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  /* Spaces rows for floating blocks */
  width: 100% !important;
}

.table-3d th {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 3.5px solid var(--color-cyan) !important;
  font-weight: 750 !important;
  font-size: 0.8rem !important;
  color: var(--text-main) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 14px 16px !important;
}

body.light-theme .table-3d th {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
  border-top: 1px solid rgba(14, 165, 233, 0.15) !important;
  border-bottom: 3.5px solid #0ea5e9 !important;
  color: #0f172a !important;
}

.table-3d tbody tr {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.45), rgba(15, 23, 42, 0.6)) !important;
  transition: transform 0.14s cubic-bezier(0.2, 0, 0, 1), background 0.14s ease, box-shadow 0.14s ease !important;
  box-shadow: 0 4.5px 0 #020617, 0 6px 16px rgba(0, 0, 0, 0.45) !important;
  will-change: transform;
}

body.light-theme .table-3d tbody tr {
  background: linear-gradient(135deg, #ffffff, #f0f9ff) !important;
  box-shadow: 0 4.5px 0 rgba(14, 165, 233, 0.25), 0 6px 16px rgba(14, 165, 233, 0.08) !important;
  transition: transform 0.14s cubic-bezier(0.2, 0, 0, 1), background 0.14s ease, box-shadow 0.14s ease !important;
  will-change: transform;
}

.table-3d tbody tr td {
  border: none !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
  font-size: 0.86rem !important;
  color: var(--text-main) !important;
  transition: border-color 0.14s ease !important;
}

body.light-theme .table-3d tbody tr td {
  color: #1e293b !important;
}

.table-3d tbody tr td:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-left: 3.5px solid transparent !important;
  transition: border-left-color 0.14s ease !important;
}

.table-3d tbody tr td:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* 3D Elevated Row Hover - Low GPU, Hardware-Accelerated 60fps */
.table-3d tbody tr:hover {
  transform: translate3d(0, -2.5px, 0) !important;
  box-shadow: 0 7px 0 #020617, 0 12px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1.5px 0 rgba(0, 0, 0, 0.5) !important;
  background: linear-gradient(90deg, rgba(0, 243, 255, 0.18) 0%, rgba(14, 165, 233, 0.10) 10%, rgba(30, 41, 59, 0.90) 35%, rgba(15, 23, 42, 0.98) 100%) !important;
  cursor: pointer;
}

.table-3d tbody tr:hover td:first-child {
  border-left-color: #00f3ff !important;
}

body.light-theme .table-3d tbody tr:hover {
  transform: translate3d(0, -2.5px, 0) !important;
  box-shadow: 0 7px 0 rgba(14, 165, 233, 0.35), 0 12px 24px rgba(14, 165, 233, 0.15), inset 0 1px 0 #ffffff !important;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.16) 0%, #ffffff 25%, #e0f2fe 100%) !important;
  cursor: pointer;
}

body.light-theme .table-3d tbody tr:hover td:first-child {
  border-left-color: #0284c7 !important;
}

.table-3d tbody tr:active {
  transform: translate3d(0, 1.5px, 0) !important;
  box-shadow: 0 2px 0 #020617, 0 3px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Page 3: Cyber Terminal Log styling */
.terminal-cyber {
  background: radial-gradient(circle, #02231c 0%, #020617 100%) !important;
  border: 3.5px solid #115e59 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(56, 239, 125, 0.25) !important;
  border-radius: 14px !important;
  color: #38ef7d !important;
  font-family: 'JetBrains Mono', monospace !important;
  padding: 20px !important;
  line-height: 1.6 !important;
  height: 250px !important;
  overflow-y: auto !important;
  position: relative !important;
}

.terminal-cyber::before {
  content: " " !important;
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0 !important;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05)) !important;
  z-index: 2 !important;
  background-size: 100% 4px, 6px 100% !important;
  pointer-events: none !important;
}

.terminal-cyber-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #38ef7d !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
}

/* Page 7: Dropzone Slot file input element */
.dropzone-3d {
  border: 2.5px dashed rgba(0, 242, 254, 0.3) !important;
  background: rgba(18, 28, 48, 0.35) !important;
  border-radius: 12px !important;
  padding: 30px 20px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .dropzone-3d {
  border: 2.5px dashed rgba(14, 165, 233, 0.25) !important;
  background: #f0f9ff !important;
  box-shadow: inset 0 4px 8px rgba(14, 165, 233, 0.05) !important;
}

.dropzone-3d:hover {
  border-color: var(--color-cyan) !important;
  background: rgba(18, 28, 48, 0.5) !important;
  transform: scale(1.01) !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.12), inset 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .dropzone-3d:hover {
  border-color: #0ea5e9 !important;
  background: #e0f2fe !important;
}

.dropzone-3d i {
  font-size: 2.4rem !important;
  margin-bottom: 10px !important;
  color: var(--color-cyan) !important;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important;
}

/* Page 8: Active Session indicator LED */
.led-glow {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  position: relative !important;
}

.led-glow.green {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981, 0 0 15px #10b981 !important;
  border: 1px solid #e6fffa !important;
}

.led-glow.green::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  animation: ledPulse 1.8s infinite ease-in-out;
}

@keyframes ledPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(2.4);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* Page 9: Vertical Timeline Audit logs */
.timeline-3d {
  position: relative !important;
  padding-left: 32px !important;
  border-left: 3px solid rgba(255, 255, 255, 0.08) !important;
  margin-left: 14px !important;
  margin-top: 14px !important;
}

body.light-theme .timeline-3d {
  border-left-color: rgba(14, 165, 233, 0.15) !important;
}

.timeline-item-3d {
  position: relative !important;
  margin-bottom: 24px !important;
}

.timeline-node-3d {
  position: absolute !important;
  left: -41.5px !important;
  top: 6px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--color-cyan) !important;
  box-shadow: 0 0 8px var(--color-cyan), 0 3px 0 #008f9d !important;
  border: 2px solid #ffffff !important;
}

body.light-theme .timeline-node-3d {
  background: #0ea5e9 !important;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.4), 0 3px 0 #0369a1 !important;
  border-color: #ffffff !important;
}

/* 3D usage bar graph style inside cells */
.usage-bar-3d-wrapper {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  height: 12px !important;
  overflow: hidden !important;
  width: 100% !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .usage-bar-3d-wrapper {
  background: #e2e8f0 !important;
  border-color: rgba(14, 165, 233, 0.15) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.usage-bar-3d {
  height: 100% !important;
  border-radius: 4px !important;
  box-shadow: 0 -1.5px 0 rgba(0, 0, 0, 0.15) inset, 0 2px 4px rgba(255, 255, 255, 0.15) inset !important;
}

/* High contrast real-time monitor select elements */
.monitor-select {
  background: rgba(10, 15, 30, 0.6) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  width: 180px !important;
  font-weight: 600 !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  transition: border-color 0.2s, background-color 0.2s !important;
}

.monitor-select:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

body.light-theme .monitor-select {
  background: #ffffff !important;
  border: 1.5px solid #0ea5e9 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .monitor-select:hover:not(:disabled) {
  border-color: #0284c7 !important;
  background-color: #f0f9ff !important;
}

body.light-theme .monitor-select:disabled {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #cbd5e1 !important;
  opacity: 0.8 !important;
}

.monitor-select option {
  background: #0f172a !important;
  color: #ffffff !important;
}

body.light-theme .monitor-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Scrollbar styling for data consumption table container */
.table-3d-wrapper::-webkit-scrollbar {
  width: 6px !important;
}

.table-3d-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

body.light-theme .table-3d-wrapper::-webkit-scrollbar-track {
  background: rgba(14, 165, 233, 0.05) !important;
}

.table-3d-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-cyan) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .table-3d-wrapper::-webkit-scrollbar-thumb {
  background: #0ea5e9 !important;
}

/* Enhanced 3D Table Row Shadows for high-definition depth */
.table-3d tbody tr {
  box-shadow: 0 4.5px 0 #020617, 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

body.light-theme .table-3d tbody tr {
  box-shadow: 0 4.5px 0 rgba(14, 165, 233, 0.25), 0 6px 16px rgba(14, 165, 233, 0.08) !important;
}

.table-3d tbody tr:hover {
  box-shadow: 0 7px 0 #020617, 0 12px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1.5px 0 rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .table-3d tbody tr:hover {
  box-shadow: 0 7px 0 rgba(14, 165, 233, 0.35), 0 12px 24px rgba(14, 165, 233, 0.15), inset 0 1px 0 #ffffff !important;
}

/* Premium 3D Weather Widget styling */
.premium-weather-3d {
  background: radial-gradient(circle at 20% 30%, rgba(245, 158, 11, 0.22) 0%, transparent 60%), linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.98)) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35), 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 12px !important;
  padding: 6px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  user-select: none;
  font-family: var(--font-main);
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-theme .premium-weather-3d {
  background: linear-gradient(180deg, #ffffff, #f0f9ff) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 6px 12px rgba(14, 165, 233, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

.premium-weather-3d:hover {
  transform: translateY(-2px) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
}

.weather-icon-wrapper {
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.premium-weather-3d:hover .weather-icon-wrapper {
  transform: scale(1.15) rotate(10deg);
}

.weather-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.weather-temp {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

body.light-theme .weather-temp {
  color: #0f172a !important;
}

.weather-desc {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: #00f2fe;
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px rgba(0, 242, 254, 0.4);
}

body.light-theme .weather-desc {
  color: #0ea5e9;
  text-shadow: none;
}

.weather-location {
  font-size: 0.52rem !important;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

body.light-theme #admin-sub-profile-wallet {
  color: #16a34a !important;
  /* Premium readable dark green */
}

body.light-theme #admin-sub-profile-limit {
  color: #ea580c !important;
  /* Premium readable dark orange */
}

body.light-theme #admin-sub-profile-users {
  color: #0284c7 !important;
  /* Premium readable dark blue */
}

body.light-theme #admin-sub-profile-sales {
  color: #7c3aed !important;
  /* Premium readable dark purple */
}

body.light-theme #admin-sub-profile-phone {
  color: #0284c7 !important;
  /* Premium readable dark cyan/blue link */
}

/* ==========================================
   CLIENT/SUBSCRIBER PORTAL MOBILE STYLING
   ========================================== */
.client-portal-wrapper {
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
  background: #f1f5f9;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
  transition: background 0.3s;
}

body.dark-theme .client-portal-wrapper {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.cp-header {
  background: #3b6998;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}

.cp-header-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.8);
  background: #e2e8f0;
  object-fit: cover;
}

.cp-profile-info {
  display: flex;
  flex-direction: column;
}

.cp-profile-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.cp-profile-code {
  font-size: 0.72rem;
  opacity: 0.85;
  margin-top: 1px;
}

.cp-profile-status {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
}

.cp-profile-status span {
  color: #fbbf24;
  font-weight: 700;
}

.cp-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-bell-btn,
.cp-logout-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0.9;
  transition: transform 0.2s, opacity 0.2s;
  padding: 4px;
}

.cp-bell-btn:hover,
.cp-logout-btn:hover {
  opacity: 1;
  transform: scale(1.08);
}

.cp-lang-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.cp-quick-actions {
  background: #ffffff;
  padding: 16px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

body.dark-theme .cp-quick-actions {
  background: #1e293b;
}

.cp-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.cp-action-item:hover {
  transform: translateY(-2px);
}

.cp-action-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.cp-action-text {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
}

body.dark-theme .cp-action-text {
  color: #94a3b8;
}

.cp-info-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin: 0 16px 20px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

body.dark-theme .cp-info-box {
  background: #1e293b;
}

.cp-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-info-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.cp-info-texts {
  display: flex;
  flex-direction: column;
}

.cp-info-label {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.cp-info-val {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1e293b;
  margin-top: 1px;
}

body.dark-theme .cp-info-val {
  color: #f1f5f9;
}

.cp-nav-blocks {
  margin: 0 16px 20px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cp-nav-card {
  aspect-ratio: 1/1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.68rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.cp-nav-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.cp-nav-card i {
  font-size: 1.15rem;
}

.cp-nav-card span {
  line-height: 1.1;
  font-weight: 800;
}

/* Specific nav card colors */
.cp-nav-card.red {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

.cp-nav-card.blue {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.cp-nav-card.green {
  background: linear-gradient(135deg, #34d399, #10b981);
}

.cp-nav-card.yellow {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.cp-telemetry-bar {
  background: #e2e8f0;
  border-radius: 12px;
  padding: 10px 16px;
  margin: 0 16px 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}

body.dark-theme .cp-telemetry-bar {
  background: #334155;
  color: #cbd5e1;
}

.cp-tel-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-tel-item i {
  font-size: 0.88rem;
}

.cp-tel-item.up i {
  color: #3b82f6;
}

.cp-tel-item.down i {
  color: #10b981;
}

.cp-tel-item.uptime i {
  color: #8b5cf6;
}

.cp-graph-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin: 0 16px 24px 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

body.dark-theme .cp-graph-card {
  background: #1e293b;
}

.cp-graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cp-graph-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

body.dark-theme .cp-graph-title {
  color: #94a3b8;
}

.cp-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.cp-live-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
  animation: pulse 1.5s infinite;
}

.cp-graph-canvas-wrap {
  width: 100%;
  height: 180px;
  position: relative;
}

.cp-graph-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  margin-top: 12px;
  font-family: var(--font-mono);
}

body.dark-theme .cp-graph-footer {
  color: #cbd5e1;
}

.cp-speed-val {
  color: #3b82f6;
  /* upload speed text color */
}

.cp-speed-val.down {
  color: #10b981;
  /* download speed text color */
}

/* ==========================================
   13. MOBILE & TABLET RESPONSIVENESS LAYER
   ========================================== */
.sidebar-toggle-btn {
  display: none;
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 1024px) {

  /* Enforce strict horizontal boundaries and optimize mobile GPU layout boundaries */
  html,
  body,
  .app-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Disable heavy visual effects to prevent GPU checkerboarding/black screen rendering delay */
  .glass-bg-blur {
    display: none !important;
  }

  body::before {
    display: none !important;
    /* disable heavy fixed background image */
  }

  body {
    background-color: var(--bg-app) !important;
  }

  /* Simplify cards: remove complex linear-gradients, heavy box-shadows, and 3D borders */
  .card-3d,
  .card,
  .stat-card {
    background: #111a2e !important;
    /* solid fallback card background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    /* simple flat shadow */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
    transition: none !important;
  }

  body.light-theme .card-3d,
  body.light-theme .card,
  body.light-theme .stat-card {
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  /* Disable expensive hover/active transform transitions on touchscreens to prevent UI thread lag */
  .card-3d:hover,
  .card:hover,
  .stat-card:hover,
  .card-3d:active,
  .card:active,
  .stat-card:active,
  .btn-quick:hover,
  .btn-quick:active,
  .nav-item:hover,
  .nav-item.active,
  .category-header:hover,
  .category-header.active {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Position sidebar offscreen using left instead of transform to avoid WebKit nested rendering context bugs */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -275px !important;
    right: auto !important;
    width: 275px !important;
    height: 100vh !important;
    transform: none !important;
    transition: left 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: none !important;
    z-index: 1000;
    visibility: visible !important;
    /* Keep visible to avoid browser layout calculations during slide */
    background: #0a101e !important;
  }

  .sidebar-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 24px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 110;
    transition: var(--transition-smooth);
  }

  .sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-cyan);
  }

  .sidebar-close-btn:active {
    transform: scale(0.95);
  }

  .app-container.sidebar-open .sidebar {
    left: 0 !important;
    transform: none !important;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5) !important;
  }

  /* Flatten all elements inside sidebar on mobile to prevent layout engine splits or flashing text */
  .sidebar .nav-item,
  .sidebar .category-header {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
    margin-bottom: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .sidebar .brand:hover #crm-sidebar-logo-container,
  .sidebar .brand:active #crm-sidebar-logo-container {
    transform: none !important;
    box-shadow: none !important;
  }

  .sidebar .nav-item.active,
  .sidebar .menu-category.open .category-header {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-cyan) !important;
  }

  .sidebar .nav-item:hover,
  .sidebar .category-header:hover {
    transform: none !important;
    filter: none !important;
  }

  /* Adjust dropdown sub-link indentation and borders on mobile */
  .sidebar .category-links {
    margin-left: 15px !important;
    padding-left: 8px !important;
    border-left: 1px dashed rgba(255, 255, 255, 0.1) !important;
    gap: 4px !important;
  }

  .sidebar .category-links .nav-item {
    margin-bottom: 4px !important;
  }

  /* Safe fade-in for sub-menus (no hardware translation) */
  .menu-category.open .category-links {
    animation: fadeInMobile 0.2s ease-out !important;
  }

  @keyframes fadeInMobile {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .sidebar {
    width: min(85vw, 290px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: none !important;
    /* disabled on mobile to prevent GPU lag */
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .app-container.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .app-container {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .main-content {
    margin-left: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .panel-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card-3d {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Header adjustments */
  .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  body.light-theme .sidebar-toggle-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e293b;
  }

  .sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-blue);
    transform: translateY(-1px);
  }

  .sidebar-toggle-btn:active {
    transform: translateY(1px);
  }

  .header-search {
    flex-grow: 1;
    max-width: 320px;
  }

  .premium-weather-3d,
  .premium-clock-3d,
  .noc-telemetry {
    display: none !important;
  }
}

@media (max-width: 768px) {

  /* Hardware acceleration for mobile scrolling to prevent GPU lag */
  body,
  .app-container,
  .main-content,
  .panel-section {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    will-change: transform !important;
  }

  .main-content {
    margin-left: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .card-3d {
    padding: 16px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Inherit performance styles from max-width 1024px */

  /* Flexbox wrap for top header is much cleaner and reliable than CSS Grid on small viewports */
  .top-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Mobile panel header stack */
  .panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    text-align: left !important;
    margin-bottom: 18px !important;
  }

  .panel-header h2 {
    font-size: 1.45rem !important;
  }

  .panel-header>div,
  .panel-header .profile-header-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  /* Profile Dashboard header actions vertical stack */
  .profile-header-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .profile-header-actions .btn {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Modern table responsive scrollbars */
  .table-responsive::-webkit-scrollbar {
    height: 5px !important;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-glass) !important;
    border-radius: 4px !important;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .sidebar-toggle-btn {
    order: 1 !important;
  }

  .header-profile {
    order: 2 !important;
    margin-left: auto !important;
  }

  .header-search {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }

  .dashboard-layouts {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .layout-main,
  .layout-sidebar {
    width: 100% !important;
  }

  .network-layouts {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-group.full-width {
    grid-column: span 1 !important;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 2-column grid layout for statistics cards on mobile matching user image */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .stats-grid .stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #0b1329 !important;
    /* Deep dark blue background */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    gap: 2px !important;
    transform: none !important;
    text-align: left !important;
    height: auto !important;
    min-height: 94px !important;
    justify-content: space-between !important;
  }

  body.light-theme .stats-grid .stat-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
  }

  .stats-grid .stat-card .stat-icon {
    display: none !important;
    /* Hide large desktop icon */
  }

  .stats-grid .stat-card .stat-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .stats-grid .stat-card .stat-label {
    font-size: 0.65rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
  }

  .stats-grid .stat-card h3 {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 2px 0 4px 0 !important;
  }

  .stats-grid .stat-card .stat-desc {
    font-size: 0.7rem !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  }

  /* Override hardcoded inline grid-template-columns styles on subscriber profile view dashboard */
  .profile-dashboard-grid,
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Subscriber Profile Detail Item Responsive Fix for Mobile View */
  .profile-detail-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .profile-detail-label {
    font-size: 0.72rem !important;
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .profile-detail-value {
    font-size: 0.88rem !important;
    width: 100% !important;
    text-align: left !important;
    word-break: break-all !important;
    white-space: normal !important;
    justify-content: flex-start !important;
  }

  .info-card-value {
    max-width: 100% !important;
    word-break: break-all !important;
    flex-wrap: wrap !important;
  }

  /* Smooth inertia scrolling on tables */
  .table-responsive {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Client Info Modal Responsive Tweaks */
  #modal-client-info .modal-card {
    width: 96% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #modal-client-info .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 12px !important;
  }

  .ci-contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ci-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Modals General */
  .modal-overlay {
    padding: 8px !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-overlay.active {
    display: flex !important;
    pointer-events: auto !important;
  }

  .modal-card {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: auto !important;
    padding: 0 !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .modal-form {
    padding: 16px !important;
  }

  .modal-form-tabbed {
    height: auto !important;
    max-height: 88vh;
    max-height: 88dvh;
  }

  .modal-tabbed-body {
    flex-direction: column !important;
    overflow-y: auto;
  }

  .modal-tab-sidebar {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .modal-tab-sidebar::-webkit-scrollbar {
    display: none;
  }

  .modal-tab-item {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    font-size: 0.72rem !important;
    gap: 6px !important;
  }

  .modal-tab-content {
    padding: 16px !important;
    overflow-y: visible !important;
  }

  .modal-tabbed-footer {
    padding: 12px 16px !important;
  }

  /* Profile cards & items */
  .profile-header-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .table-details th {
    width: 120px !important;
    font-size: 0.76rem !important;
  }

  .table-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .filter-group {
    flex-direction: column !important;
    width: 100% !important;
  }

  .filter-group select {
    width: 100% !important;
  }

  /* Mobile Optimized Subscriber Card List styles */
  .desktop-only-table {
    display: none !important;
  }

  .mobile-only-card-list {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
  }

  .mobile-subscriber-card {
    background: rgba(18, 28, 48, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: left;
  }

  body.light-theme .mobile-subscriber-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .card-header-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
  }

  body.light-theme .card-header-mobile {
    border-bottom-color: rgba(0, 0, 0, 0.05);
  }

  .card-header-mobile .user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .card-header-mobile .user-fullname {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
  }

  .card-header-mobile .user-username {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
  }

  .card-details-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.82rem;
  }

  .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .detail-row span:first-child {
    color: var(--text-muted);
    font-weight: 500;
  }

  .detail-row span:last-child {
    color: var(--text-main);
  }

  .mobile-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
  }

  .card-actions-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
    margin-top: 4px;
  }

  body.light-theme .card-actions-mobile {
    border-top-color: rgba(0, 0, 0, 0.05);
  }

  .card-actions-mobile .btn {
    padding: 8px 4px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 8px !important;
    height: auto !important;
  }
}

/* Color Utility Classes used by Front-End Dashboard Components */
.text-cyan {
  color: var(--color-cyan) !important;
}

.text-blue {
  color: var(--color-blue) !important;
}

.text-green {
  color: var(--color-green) !important;
}

.color-green {
  color: var(--color-green) !important;
}

.text-orange {
  color: var(--color-orange) !important;
}

.text-warning {
  color: var(--color-orange) !important;
}

.text-success {
  color: var(--color-green) !important;
}

.text-danger {
  color: var(--color-red) !important;
  font-weight: 590;
}

/* ==========================================
   LIGHT MODE PROFESSIONAL 3D BUTTONS OVERRIDES
   ========================================== */
body.light-theme .btn {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  font-weight: 750 !important;
  transition: all 0.1s ease !important;
}

/* 3D Primary Button */
/* Clean Modern Light Theme Buttons (SaaS Minimalist) */
body.light-theme .btn-primary {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .btn-primary:hover {
  background: #0369a1 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .btn-primary:active {
  transform: translateY(0px) !important;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2) !important;
}

/* Secondary Button (Crisp White Card with Border) */
body.light-theme .btn-secondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .btn-secondary:active {
  transform: translateY(0px) !important;
}

/* Success Button */
body.light-theme .btn-success {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #059669 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .btn-success:hover {
  background: #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .btn-success:active {
  transform: translateY(0px) !important;
}

/* Danger Button */
body.light-theme .btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.25) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .btn-danger:hover {
  background: #dc2626 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .btn-danger:active {
  transform: translateY(0px) !important;
}

/* Warning Button */
body.light-theme .btn-warning {
  background: #f59e0b !important;
  color: #ffffff !important;
  border: 1px solid #d97706 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .btn-warning:hover {
  background: #d97706 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .btn-warning:active {
  transform: translateY(0px) !important;
}

/* Info/Cyan Button */
body.light-theme .btn-info {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.25) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .btn-info:hover {
  background: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .btn-info:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-0.5px) !important;
}

body.light-theme .btn-info:active {
  transform: translateY(3.5px) !important;
  box-shadow: 0 0.5px 0 #0369a1, 0 1.5px 3px rgba(14, 165, 233, 0.1) !important;
}

/* Small Button (btn-sm) 3D adjustments */
body.light-theme .btn-sm {
  padding: 6px 12px !important;
  border-radius: 8px !important;
}

body.light-theme .btn-sm.btn-primary {
  box-shadow: 0 2.5px 0 #1e3a8a, 0 4px 8px rgba(29, 78, 216, 0.14) !important;
}

body.light-theme .btn-sm.btn-primary:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0.5px 0 #1e3a8a, 0 1px 2px rgba(29, 78, 216, 0.08) !important;
}

body.light-theme .btn-sm.btn-secondary {
  box-shadow: 0 2.5px 0 #94a3b8, 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .btn-sm.btn-secondary:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0.5px 0 #94a3b8, 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .btn-sm.btn-success {
  box-shadow: 0 2.5px 0 #064e3b, 0 4px 8px rgba(16, 185, 129, 0.14) !important;
}

body.light-theme .btn-sm.btn-success:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0.5px 0 #064e3b, 0 1px 2px rgba(16, 185, 129, 0.08) !important;
}

body.light-theme .btn-sm.btn-danger {
  box-shadow: 0 2.5px 0 #7f1d1d, 0 4px 8px rgba(239, 68, 68, 0.14) !important;
}

body.light-theme .btn-sm.btn-danger:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0.5px 0 #7f1d1d, 0 1px 2px rgba(239, 68, 68, 0.08) !important;
}

body.light-theme .btn-sm.btn-warning {
  box-shadow: 0 2.5px 0 #78350f, 0 4px 8px rgba(245, 158, 11, 0.14) !important;
}

body.light-theme .btn-sm.btn-warning:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0.5px 0 #78350f, 0 1px 2px rgba(245, 158, 11, 0.08) !important;
}

body.light-theme .btn-sm.btn-info {
  box-shadow: 0 2.5px 0 #0369a1, 0 4px 8px rgba(14, 165, 233, 0.14) !important;
}

body.light-theme .btn-sm.btn-info:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0.5px 0 #0369a1, 0 1px 2px rgba(14, 165, 233, 0.08) !important;
}

/* Low GPU / Maximum Reliability & Performance Mode (Overrides both Dark & Light Themes) */
body.low-gpu-mode,
body.low-gpu-mode.light-theme,
body.low-gpu-mode .card-3d,
body.low-gpu-mode.light-theme .card-3d,
body.low-gpu-mode .stat-card,
body.low-gpu-mode.light-theme .stat-card,
body.low-gpu-mode .card,
body.low-gpu-mode.light-theme .card,
body.low-gpu-mode .sidebar,
body.low-gpu-mode.light-theme .sidebar,
body.low-gpu-mode .top-header,
body.low-gpu-mode.light-theme .top-header,
body.low-gpu-mode .modal-card,
body.low-gpu-mode.light-theme .modal-card,
body.low-gpu-mode .modal-overlay,
body.low-gpu-mode.light-theme .modal-overlay,
body.low-gpu-mode .login-card,
body.low-gpu-mode.light-theme .login-card,
body.low-gpu-mode .premium-weather-3d,
body.low-gpu-mode.light-theme .premium-weather-3d,
body.low-gpu-mode .premium-clock-3d,
body.low-gpu-mode.light-theme .premium-clock-3d,
body.low-gpu-mode .table-3d-wrapper,
body.low-gpu-mode.light-theme .table-3d-wrapper,
body.low-gpu-mode .nav-item,
body.low-gpu-mode.light-theme .nav-item,
body.low-gpu-mode .btn,
body.low-gpu-mode.light-theme .btn,
body.low-gpu-mode .btn-3d,
body.low-gpu-mode.light-theme .btn-3d,
body.low-gpu-mode .data-table,
body.low-gpu-mode.light-theme .data-table,
body.low-gpu-mode .table-3d,
body.low-gpu-mode.light-theme .table-3d,
body.low-gpu-mode .form-group input,
body.low-gpu-mode.light-theme .form-group input,
body.low-gpu-mode .form-control,
body.low-gpu-mode.light-theme .form-control {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Strip background radial gradients in both themes */
body.low-gpu-mode::before,
body.low-gpu-mode.light-theme::before,
body.low-gpu-mode #bg-animation-canvas,
body.low-gpu-mode.light-theme #bg-animation-canvas,
body.low-gpu-mode .glass-bg-blur,
body.low-gpu-mode.light-theme .glass-bg-blur,
body.low-gpu-mode .sphere-1,
body.low-gpu-mode.light-theme .sphere-1,
body.low-gpu-mode .sphere-2,
body.low-gpu-mode.light-theme .sphere-2,
body.low-gpu-mode .sphere-3,
body.low-gpu-mode.light-theme .sphere-3 {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background-image: none !important;
}

/* Light Mode Clean Flat Styling (Preserving borders & clean shadows) */
body.low-gpu-mode.light-theme .card-3d,
body.low-gpu-mode.light-theme .card,
body.low-gpu-mode.light-theme .sidebar,
body.low-gpu-mode.light-theme .top-header,
body.low-gpu-mode.light-theme .modal-card,
body.low-gpu-mode.light-theme .data-table,
body.low-gpu-mode.light-theme .table-3d,
body.low-gpu-mode.light-theme .premium-weather-3d,
body.low-gpu-mode.light-theme .premium-clock-3d {
  background: #ffffff !important;
}

/* Stop all CSS keyframe animations (pulse indicators, spinning icons, LED glows) in both themes */
body.low-gpu-mode .pulse-indicator,
body.low-gpu-mode.light-theme .pulse-indicator,
body.low-gpu-mode .pulse-indicator::after,
body.low-gpu-mode.light-theme .pulse-indicator::after,
body.low-gpu-mode .fa-spin,
body.low-gpu-mode.light-theme .fa-spin,
body.low-gpu-mode .fa-pulse,
body.low-gpu-mode.light-theme .fa-pulse {
  animation: none !important;
  animation-duration: 0s !important;
}

body.low-gpu-mode .pulse-indicator,
body.low-gpu-mode.light-theme .pulse-indicator {
  opacity: 1 !important;
}

/* =====================================================
   Brand Name Card
   ===================================================== */
.brand-name-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 90px;
  padding: 20px 28px !important;
  overflow: visible !important;
  position: relative !important;
}

.brand-card-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: center;
}

.brand-name-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  animation: brandShimmer 3s ease-in-out infinite alternate;
}

@keyframes brandShimmer {
  0% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1.25) drop-shadow(0 0 8px rgba(79, 172, 254, 0.5));
  }
}

.brand-name-tagline {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Edit pencil button */
.brand-edit-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  z-index: 20;
}

.brand-name-card:hover .brand-edit-btn,
.brand-name-card.editor-open .brand-edit-btn {
  opacity: 1;
}

.brand-edit-btn:hover,
.brand-name-card.editor-open .brand-edit-btn {
  background: rgba(79, 172, 254, 0.22);
  color: #38bdf8;
  border-color: rgba(79, 172, 254, 0.5);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

/* Editor popup */
.brand-editor-popup {
  position: absolute;
  top: 10px;
  right: 46px;
  z-index: 1060 !important;
  background: #0f172a;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 14px;
  padding: 16px 18px;
  width: 280px;
  max-width: min(320px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 24px rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.brand-editor-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.brand-editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.brand-editor-row label {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
}

.brand-editor-row input[type="text"] {
  flex: 1.5;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #f8fafc;
  padding: 6px 10px;
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.brand-editor-row input[type="text"]:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.brand-editor-row input[type="color"] {
  width: 40px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s;
}

.brand-editor-row input[type="color"]:hover {
  border-color: #38bdf8;
}

.brand-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-end;
  align-items: center;
}

/* Light theme adjustments */
body.light-theme .brand-editor-popup {
  background: #ffffff;
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 20px rgba(14, 165, 233, 0.15);
}

body.light-theme .brand-editor-row input[type="text"] {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

body.light-theme .brand-editor-row label {
  color: #475569;
}

body.light-theme .brand-editor-title {
  color: #0284c7;
}

body.light-theme .brand-name-tagline {
  color: #64748b;
}

/* ==========================================
   ENTERPRISE MOBILE & TABLET RESPONSIVE ENGINE
   ========================================== */

/* Tablet & Mid-Size Screens (<= 1100px) */
@media screen and (max-width: 1100px) {
  #subscriber-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  #brand-name-card {
    grid-column: 1 / -1 !important;
    min-height: 110px !important;
  }
}

/* Mobile Devices & Small Tablets (<= 768px) */
@media screen and (max-width: 768px) {

  /* Layout adjustments */
  .app-container {
    flex-direction: column !important;
  }

  .main-content {
    padding: 12px 14px !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Topbar header */
  .top-header {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .header-search {
    width: 100% !important;
    order: 3 !important;
    margin-top: 6px !important;
  }

  .search-input-wrapper {
    flex: 1 !important;
  }

  .search-input-wrapper input {
    width: 100% !important;
    font-size: 0.85rem !important;
  }

  .noc-telemetry {
    display: none !important;
    /* Hide telemetry widgets on mobile to save header space */
  }

  .premium-weather-3d {
    margin-left: auto !important;
  }

  /* Dashboard Header Bar */
  .panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #dash-dealer-filter {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Core Subscriber Base & Dashboard Grids */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  #subscriber-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  #brand-name-card {
    grid-column: 1 / -1 !important;
    min-height: 100px !important;
    padding: 14px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .brand-name-text {
    font-size: 1.6rem !important;
  }

  .brand-name-tagline {
    font-size: 0.78rem !important;
  }

  .brand-editor-popup {
    right: 8px !important;
    top: 44px !important;
    width: calc(100% - 16px) !important;
    max-width: 320px !important;
  }

  /* Stat cards responsive scaling */
  .stat-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .stat-card-inner {
    gap: 8px !important;
  }

  .stat-gauge-wrap,
  .stat-gauge {
    width: 42px !important;
    height: 42px !important;
  }

  .gauge-pct {
    font-size: 0.65rem !important;
  }

  .stat-details h3 {
    font-size: 1.1rem !important;
    margin: 2px 0 !important;
  }

  .stat-label {
    font-size: 0.65rem !important;
    letter-spacing: 0 !important;
  }

  .stat-desc {
    font-size: 0.62rem !important;
  }

  .stat-sparkline {
    display: none !important;
    /* Hide sparklines inside small 2-column mobile cards */
  }

  /* All general grid cards */
  .settings-grid,
  .revenue-grid,
  .summary-cards,
  .dashboard-grid,
  .sub-profile-grid,
  .profile-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* Subscriber Profile Mobile Chrome display fix */
  #panel-subscriber-profile {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }

  #panel-subscriber-profile .profile-header-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #panel-subscriber-profile .profile-header-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    padding: 10px 12px !important;
  }

  /* ============================================================
     SUBSCRIBER PROFILE DASHBOARD - FULL RESPONSIVE MOBILE FIXES
     ============================================================ */

  /* Wrapper */
  .subprof-wrapper {
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 90px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Header: stack title & action buttons vertically */
  .subprof-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #0b1329 0%, #0d1b3e 50%, #091024 100%) !important;
    border: 1.5px solid rgba(0, 242, 254, 0.28) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  }

  /* Action buttons row: wrap cleanly without scrollbar or collision */
  .subprof-actions {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 2px 0 !important;
    gap: 6px 8px !important;
  }

  .subprof-actions::-webkit-scrollbar {
    display: none !important;
  }

  .subprof-pill-btn {
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Main 2-col grid → single column */
  .subprof-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Cards */
  .subprof-card {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .subprof-card-body {
    padding: 10px 12px !important;
    gap: 6px !important;
  }

  /* Session upper area: stack gauge and bullets vertically */
  .subprof-session-upper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 0 !important;
  }

  /* Gauge stays centered */
  .subprof-gauge-wrap {
    width: 150px !important;
    height: 150px !important;
    flex-shrink: 0 !important;
  }

  .subprof-gauge-canvas {
    width: 150px !important;
    height: 150px !important;
  }

  /* Session bullets: full width, responsive wrapping */
  .subprof-session-bullets {
    min-width: 0 !important;
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .subprof-bullet-item {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .subprof-bullet-item[style*="display: none"],
  .subprof-bullet-item[style*="display:none"],
  .subprof-bullet-item.hidden-bullet {
    display: none !important;
  }

  .subprof-bullet-label {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .subprof-bullet-val {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    text-align: right !important;
    word-break: break-all !important;
    font-size: 0.8rem !important;
    max-width: 100% !important;
  }

  .subprof-bullet-val button {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
    flex-shrink: 0 !important;
  }

  /* KPI boxes: 3-col stays same or collapses on tiny screen */
  .subprof-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .subprof-kpi-box {
    padding: 8px 6px !important;
    min-width: 0 !important;
  }

  .subprof-kpi-val {
    font-size: 0.85rem !important;
    word-break: break-all !important;
  }

  /* Speed meters: stack vertically */
  .prof-speedmeters-container {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Live bandwidth canvas */
  #profileLiveBandwidthCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Latest auth card */
  .latest-auth-card {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .latest-auth-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }

  .latest-auth-body {
    grid-template-columns: 1fr !important;
    padding: 14px 14px !important;
    gap: 16px !important;
  }

  .latest-auth-col-right {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
  }

  body:not(.dark-theme) .latest-auth-col-right {
    border-top: 1px solid #e2e8f0 !important;
  }

  /* Log terminal */
  .subscriber-log-terminal {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .subscriber-log-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #prof-log-filter-input {
    width: 110px !important;
  }

  /* Tables container */
  .table-responsive,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* Mobile Full Screen Edit Subscriber & Add Ticket Modals */
  #modal-edit-subscriber,
  #modal-add-ticket,
  .modal-overlay.mobile-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #modal-edit-subscriber .modal-card,
  #modal-edit-subscriber .edit-sub-card,
  #modal-add-ticket .modal-card,
  #modal-add-ticket .add-ticket-card,
  .modal-overlay.mobile-fullscreen .modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #0b1329 !important;
    box-sizing: border-box !important;
  }

  #modal-edit-subscriber .modal-header,
  #modal-edit-subscriber .edit-sub-header,
  #modal-add-ticket .modal-header,
  #modal-add-ticket .add-ticket-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    z-index: 50 !important;
  }

  #modal-edit-subscriber #form-edit-subscriber,
  #modal-edit-subscriber .modal-form,
  #modal-edit-subscriber .edit-sub-form,
  #modal-add-ticket #form-add-ticket,
  #modal-add-ticket .modal-form,
  .modal-overlay.mobile-fullscreen .modal-form {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #modal-edit-subscriber .edit-sub-scrollable-body,
  #modal-add-ticket .add-ticket-scrollable-body {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 14px 24px 14px !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #modal-edit-subscriber .modal-actions,
  #modal-edit-subscriber .edit-sub-footer,
  #modal-add-ticket .modal-actions,
  #modal-add-ticket .add-ticket-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    background: #070d1d !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.9) !important;
    margin: 0 !important;
  }

  #modal-edit-subscriber .modal-actions button,
  #modal-edit-subscriber .edit-sub-footer button,
  #modal-add-ticket .modal-actions button,
  #modal-add-ticket .add-ticket-footer button {
    flex: 1 1 50% !important;
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #modal-edit-subscriber [style*="grid-template-columns"],
  #modal-edit-subscriber .form-group-grid,
  #modal-add-ticket [style*="grid-template-columns"],
  #modal-add-ticket .form-group-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Modals on mobile */
  .modal-card {
    width: 96% !important;
    max-width: 96% !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }
}

/* Custom Mobile Customer List Redesign (Matching Screenshot) */
.mobile-customer-list-container {
  background: #0b1329 !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  margin-top: 10px !important;
}

.mobile-customer-list-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-customer-list-header .col-title {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.mobile-customer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 3.5px solid transparent !important;
  background: rgba(15, 23, 42, 0.4) !important;
  transition: transform 0.14s cubic-bezier(0.2, 0, 0, 1), background 0.14s ease, border-left-color 0.14s ease, box-shadow 0.14s ease !important;
  cursor: pointer !important;
  will-change: transform;
}

.mobile-customer-row:hover,
.mobile-customer-row:active {
  background: linear-gradient(90deg, rgba(0, 243, 255, 0.14) 0%, rgba(30, 41, 59, 0.95) 30%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-left-color: #00f3ff !important;
  transform: translate3d(3px, 0, 0) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.mobile-customer-identity {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.mobile-avatar-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
}

.mobile-customer-name {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 0.94rem !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}

.mobile-customer-username {
  font-size: 0.78rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.mobile-customer-username i {
  color: rgba(255, 255, 255, 0.75) !important;
}

.mobile-customer-owner {
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 3px !important;
}

.mobile-owner-name {
  font-weight: 700 !important;
  color: #f8fafc !important;
  font-size: 0.88rem !important;
}

.mobile-owner-role {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.mobile-owner-role.role-admin {
  color: #3b82f6 !important;
}

.mobile-owner-role.role-dealer {
  color: #f59e0b !important;
}

.mobile-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.mobile-status-badge:hover,
.mobile-status-badge:active {
  transform: translateY(-1px) scale(1.04) !important;
  filter: brightness(1.15) !important;
}

.mobile-status-badge.badge-2d-Active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.mobile-status-badge.badge-2d-Expired {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.45) !important;
}

.mobile-status-badge.badge-2d-Suspended {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

.mobile-status-badge.badge-2d-secondary {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: #ffffff !important;
}

.mobile-row-actions-drawer {
  display: none;
  background: rgba(15, 23, 42, 0.95);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mobile-row-actions-drawer.open {
  display: flex !important;
}

/* Small Smartphone Screen Adjustments (<= 480px) */
@media screen and (max-width: 480px) {
  #subscriber-stats-grid {
    grid-template-columns: 1fr !important;
    /* Single column card layout for narrow phones */
    gap: 12px !important;
  }

  .stat-sparkline {
    display: block !important;
    /* Restore sparklines when cards have 100% full width */
    width: 64px !important;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   ULTRA-BOLD FONTS MODE (SUPER HIGH VISIBILITY)
   ========================================== */
body.bold-fonts-mode {
  font-weight: 900 !important;
}

body.bold-fonts-mode *,
body.bold-fonts-mode p,
body.bold-fonts-mode span,
body.bold-fonts-mode div,
body.bold-fonts-mode a,
body.bold-fonts-mode label,
body.bold-fonts-mode input,
body.bold-fonts-mode select,
body.bold-fonts-mode button,
body.bold-fonts-mode td,
body.bold-fonts-mode th,
body.bold-fonts-mode code,
body.bold-fonts-mode small,
body.bold-fonts-mode i {
  font-weight: 900 !important;
  -webkit-text-stroke: 0.35px currentColor;
}

body.bold-fonts-mode h1,
body.bold-fonts-mode h2,
body.bold-fonts-mode h3,
body.bold-fonts-mode h4,
body.bold-fonts-mode h5,
body.bold-fonts-mode h6,
body.bold-fonts-mode .brand-name,
body.bold-fonts-mode .stat-details h3,
body.bold-fonts-mode .nav-item,
body.bold-fonts-mode .btn,
body.bold-fonts-mode .badge {
  font-weight: 900 !important;
  -webkit-text-stroke: 0.5px currentColor;
  letter-spacing: -0.015em;
}

body.bold-fonts-mode .stat-label,
body.bold-fonts-mode .stat-desc,
body.bold-fonts-mode .brand-sub,
body.bold-fonts-mode .brand-name-tagline,
body.bold-fonts-mode .text-muted {
  font-weight: 900 !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0.3px currentColor;
}

/* Interface Select & Optgroup Styling - Gap-Free & Crisp Formatting */
select optgroup {
  background-color: #0f172a !important;
  color: #00f2fe !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 6px 8px !important;
  margin: 4px 0 2px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

select option {
  background-color: #0b1329 !important;
  color: #f8fafc !important;
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

body.bold-fonts-mode select option {
  font-weight: 800 !important;
}

select option:disabled {
  color: #64748b !important;
  opacity: 0.65 !important;
}

/* ==========================================
   UNIVERSAL COLORFUL 3D BUTTON SYSTEM (LOW GPU)
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(1.5px);
}

/* Primary Blue 3D Button */
.btn-primary,
.btn-main {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #60a5fa !important;
  box-shadow: 0 3.5px 0 #1e40af, 0 4px 10px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-primary:hover,
.btn-main:hover {
  box-shadow: 0 5.5px 0 #1e40af, 0 6px 14px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-primary:active,
.btn-main:active {
  box-shadow: 0 1px 0 #1e40af, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Success Green 3D Button */
.btn-success {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid #34d399 !important;
  box-shadow: 0 3.5px 0 #064e3b, 0 4px 10px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-success:hover {
  box-shadow: 0 5.5px 0 #064e3b, 0 6px 14px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-success:active {
  box-shadow: 0 1px 0 #064e3b, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Danger Red 3D Button */
.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid #f87171 !important;
  box-shadow: 0 3.5px 0 #7f1d1d, 0 4px 10px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-danger:hover {
  box-shadow: 0 5.5px 0 #7f1d1d, 0 6px 14px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-danger:active {
  box-shadow: 0 1px 0 #7f1d1d, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Warning Amber 3D Button */
.btn-warning {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 3.5px 0 #78350f, 0 4px 10px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-warning:hover {
  box-shadow: 0 5.5px 0 #78350f, 0 6px 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-warning:active {
  box-shadow: 0 1px 0 #78350f, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Cyan 3D Button */
.btn-info,
.btn-cyan {
  background: linear-gradient(180deg, #06b6d4 0%, #0e7490 100%) !important;
  color: #ffffff !important;
  border: 1px solid #22d3ee !important;
  box-shadow: 0 3.5px 0 #164e63, 0 4px 10px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-info:hover,
.btn-cyan:hover {
  box-shadow: 0 5.5px 0 #164e63, 0 6px 14px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-info:active,
.btn-cyan:active {
  box-shadow: 0 1px 0 #164e63, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Secondary Slate 3D Button */
.btn-secondary {
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%) !important;
  color: #f8fafc !important;
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 3.5px 0 #0f172a, 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn-secondary:hover {
  box-shadow: 0 5.5px 0 #0f172a, 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-secondary:active {
  box-shadow: 0 1.5px 0 #0f172a, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================
   SYSTEM INFO & HARDWARE VERIFICATION CARD
   ========================================== */
.sys-info-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.sys-info-box {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.light-theme .sys-info-box {
  background: rgba(255, 255, 255, 0.85);
  border-color: #d2ded1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sys-info-box:hover {
  border-color: rgba(56, 189, 248, 0.3);
}

.sys-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sys-box-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sys-hwid-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sys-hwid-input {
  font-family: var(--font-mono), monospace;
  font-weight: 700;
  font-size: 0.88rem;
  color: #38bdf8;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.35);
  text-align: center;
  letter-spacing: 0.8px;
  padding: 9px 12px;
  border-radius: 8px;
  flex-grow: 1;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 10px rgba(56, 189, 248, 0.08);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-theme .sys-hwid-input {
  background: #f1f5f9;
  color: #0284c7;
  border-color: #93c5fd;
}

.sys-hwid-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.sys-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 480px) {
  .sys-stat-grid {
    grid-template-columns: 1fr;
  }
}

.sys-stat-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.light-theme .sys-stat-tile {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.sys-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sys-stat-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sys-cpu-banner {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

body.light-theme .sys-cpu-banner {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.sys-progress-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  margin: 10px 0 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-theme .sys-progress-track {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.05);
}

.sys-progress-bar-ram {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sys-progress-bar-ssd {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sys-footer-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sys-badge-pct {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

.sys-badge-ram {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.sys-badge-ssd {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* ==========================================
   HEADER NOTIFICATION BELL DROPDOWN
   ========================================== */
.notification-bell {
  position: relative;
  cursor: pointer;
}

.notification-dropdown {
  position: absolute;
  top: 45px;
  right: 0;
  width: 360px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 242, 254, 0.15);
  backdrop-filter: blur(16px);
  z-index: 9999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-theme .notification-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: #d2ded1;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.notification-dropdown.show {
  display: flex;
}

.notif-dropdown-header {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-title);
}

.notif-search-container {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
  position: relative;
  display: flex;
  align-items: center;
}

body.light-theme .notif-search-container {
  background: rgba(241, 245, 249, 0.85);
  border-bottom-color: #e2e8f0;
}

.notif-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

#notif-search-input {
  width: 100%;
  padding: 6px 28px 6px 28px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-theme #notif-search-input {
  background: #ffffff;
  color: #1e293b;
  border-color: #cbd5e1;
}

#notif-search-input:focus {
  border-color: var(--primary, #38bdf8);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

#notif-search-clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.75rem;
  display: none;
  padding: 4px;
}

#notif-search-clear:hover {
  color: #ef4444;
}

.notif-dropdown-body {
  max-height: 380px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.notif-item {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.notif-item:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
  transform: translateY(-2px);
}

.notif-item:active {
  transform: translateY(0);
}

.notif-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notif-item-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item-sub {
  font-size: 0.78rem;
  color: var(--text-main);
}

.notif-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.notif-view-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 0.7rem;
  color: #38bdf8;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.notif-item:hover .notif-view-hint {
  opacity: 1;
  transform: translateX(2px);
  color: #7dd3fc;
}

.btn-clear-pay {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-clear-pay:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}

/* Mobile Responsive Positioning for Header Dropdowns (Prevents Off-Screen Cutoff) */
@media (max-width: 768px) {
  .notification-dropdown {
    position: fixed !important;
    top: 55px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 70px) !important;
    border-radius: 14px !important;
    z-index: 999999 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 242, 254, 0.25) !important;
  }

  .notif-dropdown-body {
    max-height: calc(100vh - 180px) !important;
  }

  .res-dropdown-menu {
    position: fixed !important;
    top: 55px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 70px) !important;
    z-index: 999999 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 242, 254, 0.25) !important;
  }
}

/* ========================================================= */
/* 3D LOW-GPU SUBSCRIBER LIST STYLES (Zero FPS Drop)        */
/* ========================================================= */
.sub-row-3d {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.9)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-left 0.15s ease !important;
}

.sub-row-3d:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 15px rgba(14, 165, 233, 0.18) !important;
  background: linear-gradient(135deg, rgba(37, 54, 86, 0.85), rgba(18, 28, 48, 0.95)) !important;
  border-left: 4px solid #0ea5e9 !important;
}

body.light-theme .sub-row-3d {
  background: linear-gradient(135deg, #ffffff, #f1f5f9) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12), inset 0 1px 0 #ffffff !important;
}

body.light-theme .sub-row-3d:hover {
  background: linear-gradient(135deg, #ffffff, #e0f2fe) !important;
  box-shadow: 0 8px 22px rgba(14, 165, 233, 0.2) !important;
  border-left: 4px solid #0284c7 !important;
}

.user-avatar-3d {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(14, 165, 233, 0.4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #38bdf8;
  flex-shrink: 0;
}

.username-pill-3d {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #f1f5f9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.speed-badge-3d {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.72rem;
  padding: 1px 7px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 5px;
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-weight: 600;
}

.tag-chip-3d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.76rem;
  color: #cbd5e1;
}

.ip-chip-3d {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 2px 7px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

.badge-3d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.badge-3d-Active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 95, 70, 0.5));
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
}

.badge-3d-Expired {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(153, 27, 27, 0.5));
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #f87171;
}

.badge-3d-Suspended {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(146, 64, 14, 0.5));
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

.badge-3d-secondary {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.badge-3d-online {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(12, 74, 110, 0.5));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.badge-3d-offline {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #64748b;
}

.pulse-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  display: inline-block;
}

.action-bar-3d {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25);
}

.btn-3d-action {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.btn-3d-action:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-3d-action:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.btn-3d-action.btn-view:hover {
  background: rgba(14, 165, 233, 0.25);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.btn-3d-action.btn-edit:hover {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}

.btn-3d-action.btn-disconnect:hover {
  background: rgba(249, 115, 22, 0.25);
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.4);
}

.btn-3d-action.btn-toggle:hover {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}

.btn-3d-action.btn-graph:hover {
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.4);
}

.btn-3d-action.btn-recharge:hover {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}

.btn-3d-action.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}

/* ========================================================= */
/* 2D HIGHLIGHTED EXPIRED STYLES & REMAINING DAYS PILLS       */
/* ========================================================= */
.sub-row-expired-2d {
  background: rgba(244, 63, 94, 0.12) !important;
  border-left: 4px solid #f43f5e !important;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.15) !important;
}

.sub-row-expired-2d:hover {
  background: rgba(244, 63, 94, 0.22) !important;
  border-left: 5px solid #ff4d6d !important;
}

body.light-theme .sub-row-expired-2d {
  background: #fff1f2 !important;
  border-left: 4px solid #e11d48 !important;
}

.badge-2d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-2d-Expired {
  background: #f43f5e;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.4);
}

.badge-2d-Active {
  background: #10b981;
  color: #ffffff;
}

.badge-2d-Suspended {
  background: #f59e0b;
  color: #0f172a;
}

.badge-2d-secondary {
  background: #64748b;
  color: #ffffff;
}

.days-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 6px;
  white-space: nowrap;
}

.days-pill-expired {
  background: #f43f5e;
  color: #ffffff;
  border: 1px solid #ff4d6d;
}

.days-pill-warning,
.days-pill-info,
.days-pill-success,
.days-pill-grass {
  background: #15803d !important;
  color: #ffffff !important;
  border: 1px solid #22c55e !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25) !important;
}

/* ========================================================= */
/* 2D HIGH-VISIBILITY SUBSCRIBER LIST STYLES                 */
/* ========================================================= */
.sub-row-2d {
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.sub-row-2d-active {
  background: rgba(15, 23, 42, 0.85) !important;
  border-left: 4px solid #10b981 !important;
  border-top: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-right: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.sub-row-2d-active:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-left: 5px solid #34d399 !important;
}

.sub-row-2d-expired {
  background: rgba(244, 63, 94, 0.14) !important;
  border-left: 4px solid #f43f5e !important;
  border-top: 1px solid rgba(244, 63, 94, 0.35) !important;
  border-right: 1px solid rgba(244, 63, 94, 0.35) !important;
  border-bottom: 1px solid rgba(244, 63, 94, 0.35) !important;
}

.sub-row-2d-expired:hover {
  background: rgba(244, 63, 94, 0.24) !important;
  border-left: 5px solid #ff4d6d !important;
}

.sub-row-2d-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  border-left: 4px solid #f59e0b !important;
  border-top: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-right: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.sub-row-2d-warning:hover {
  background: rgba(245, 158, 11, 0.22) !important;
  border-left: 5px solid #fbbf24 !important;
}

.sub-row-2d-disabled {
  background: rgba(30, 41, 59, 0.8) !important;
  border-left: 4px solid #64748b !important;
  border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-right: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
}

.sub-row-2d-disabled:hover {
  background: rgba(51, 65, 85, 0.9) !important;
}

.username-pill-2d {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  font-weight: 700;
  color: #f8fafc;
}

.tag-chip-2d {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1f5f9;
}

.ip-chip-2d {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
}

.action-bar-2d {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 7px;
  padding: 4px 8px;
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.btn-2d-action {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1e293b;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(0.2, 0, 0, 1), background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  will-change: transform;
}

.btn-2d-action:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.btn-2d-action.btn-view {
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}

.btn-2d-action.btn-view:hover {
  background: #0ea5e9;
  color: #ffffff;
}

.btn-2d-action.btn-edit {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}

.btn-2d-action.btn-edit:hover {
  background: #10b981;
  color: #ffffff;
}

.btn-2d-action.btn-disconnect {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
}

.btn-2d-action.btn-disconnect:hover {
  background: #ea580c;
  color: #ffffff;
}

.btn-2d-action.btn-toggle {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

.btn-2d-action.btn-toggle:hover {
  background: #f59e0b;
  color: #000000;
}

.btn-2d-action.btn-graph {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(192, 132, 252, 0.3);
}

.btn-2d-action.btn-graph:hover {
  background: #a855f7;
  color: #ffffff;
}

.btn-2d-action.btn-recharge {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
}

.btn-2d-action.btn-recharge:hover {
  background: #22c55e;
  color: #ffffff;
}

.btn-2d-action.btn-speed-boost {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
}

.btn-2d-action.btn-speed-boost:hover {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Speed Boost Dashboard Banner */
@keyframes boostPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); opacity: 1; }
  60%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); opacity: 1; }
}

#subprof-boost-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
}

.btn-2d-action.btn-delete {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

.btn-2d-action.btn-delete:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ========================================================= */
/* DISTINCT 2D CELL BACKGROUND CONTAINERS FOR CUSTOMER DATA  */
/* ========================================================= */
.cell-box-name {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 38px;
  padding: 4px 8px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  white-space: nowrap;
}

.sub-fullname-link {
  color: #ffffff !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.sub-fullname-link:hover {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

.cell-box-username,
.username-no-box {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 750;
  color: #ffffff !important;
  white-space: nowrap;
}

.sub-username-link {
  color: #ffffff !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.sub-username-link:hover {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

.username-no-box i.fa-user-gear {
  color: rgba(255, 255, 255, 0.7) !important;
}

.cell-box-package {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  height: 38px;
  padding: 4px 12px;
  background: #1e1b4b;
  border: 1px solid #6366f1;
  border-radius: 8px;
  white-space: nowrap;
}

.speed-badge-2d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 2px 7px;
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 4px;
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.cell-box-zone {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 38px;
  padding: 4px 12px;
  background: #042f2e;
  border: 1px solid #14b8a6;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2dd4bf;
  white-space: nowrap;
}

.cell-box-subdealer {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 38px;
  padding: 4px 12px;
  background: #2e1065;
  border: 1px solid #a855f7;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #c084fc;
  white-space: nowrap;
}

.cell-box-ip-static {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 38px;
  padding: 4px 12px;
  background: #022c22;
  border: 1px solid #10b981;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  font-weight: 700;
  color: #34d399;
  white-space: nowrap;
}

.cell-box-ip-dynamic {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 38px;
  padding: 4px 12px;
  background: #0f172a;
  border: 1px solid #475569;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
}

.cell-box-expiration {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px;
  white-space: nowrap;
}

.expiry-date-flame-yellow {
  color: #facc15 !important;
  font-weight: 750;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
}

.cell-box-status {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 38px;
  padding: 4px 10px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  white-space: nowrap;
}

/* ==========================================
   DESKTOP SIDEBAR FOLD / COLLAPSE SYSTEM
   ========================================== */
.sidebar-fold-toggle-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin-right: 10px;
  flex-shrink: 0;
}

.sidebar-fold-toggle-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  transform: scale(1.05);
}

body.sidebar-folded .sidebar-fold-toggle-btn {
  background: var(--color-cyan) !important;
  color: #000000 !important;
  border-color: var(--color-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important;
}

@media (max-width: 992px) {
  .sidebar-fold-toggle-btn {
    display: none !important;
  }
}

body.sidebar-folded .sidebar {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
}

body.sidebar-folded .main-content {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  transition: margin-left 0.25s ease, max-width 0.25s ease;
}

/* ====================================================
   INTERNET SPEED PROFILES — ULTRA-PROFESSIONAL DESIGN
   Neo Blue (#00f2fe), Flame Yellow (#fbbf24), 
   Flame Green (#10b981), Flame Red (#ef4444)
   ==================================================== */

.badge-neo-blue {
  background: rgba(0, 242, 254, 0.12) !important;
  color: #00f2fe !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.18) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-flame-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.18) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-flame-yellow {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.18) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-flame-red {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.18) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.btn-glass-edit {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(56, 189, 248, 0.25)) !important;
  border: 1px solid rgba(0, 242, 254, 0.5) !important;
  color: #00f2fe !important;
  box-shadow: 0 2px 8px rgba(0, 242, 254, 0.2) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-glass-edit:hover {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.35), rgba(56, 189, 248, 0.45)) !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.45) !important;
  transform: translateY(-1px);
}

.btn-glass-delete {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.25)) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #f87171 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-glass-delete:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(220, 38, 38, 0.45)) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-1px);
}

#profiles-table-body tr {
  transition: all 0.2s ease;
}

#profiles-table-body tr:hover {
  background: rgba(30, 41, 59, 0.8) !important;
  box-shadow: inset 4px 0 0 #00f2fe;
}

/* Hard Color Badges for Speed Profile Boxes */
.badge-purple-hard {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
  border: 1.5px solid #a855f7 !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-pink-hard {
  background: rgba(236, 72, 153, 0.18) !important;
  color: #f472b6 !important;
  border: 1.5px solid #ec4899 !important;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-orange-hard {
  background: rgba(249, 115, 22, 0.18) !important;
  color: #fb923c !important;
  border: 1.5px solid #f97316 !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-indigo-hard {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #818cf8 !important;
  border: 1.5px solid #6366f1 !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-lime-hard {
  background: rgba(132, 204, 22, 0.18) !important;
  color: #a3e635 !important;
  border: 1.5px solid #84cc16 !important;
  box-shadow: 0 0 12px rgba(132, 204, 22, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-teal-hard {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #2dd4bf !important;
  border: 1.5px solid #14b8a6 !important;
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-rose-hard {
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fb7185 !important;
  border: 1.5px solid #f43f5e !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.badge-violet-hard {
  background: rgba(139, 92, 246, 0.18) !important;
  color: #a78bfa !important;
  border: 1.5px solid #8b5cf6 !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
}

.speed-card-box:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* 3 Boxes per Row Layout for Speed Profiles Grid */
#profiles-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 1100px) {
  #profiles-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 680px) {
  #profiles-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* NOC LIVE ALERT HEADLINE RUNNING TICKER BANNER */
.noc-live-alert-bar {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  min-height: 42px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.noc-live-alert-bar.severity-danger {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
}

.noc-live-alert-bar.severity-warning {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
}

.noc-live-alert-bar.severity-info {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
}

.alert-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  padding: 10px 20px;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  height: 100%;
  flex-shrink: 0;
  z-index: 2;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  user-select: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.alert-badge-wrap:hover {
  filter: brightness(1.15);
}

.noc-live-alert-bar.severity-danger .alert-badge-wrap {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.noc-live-alert-bar.severity-info .alert-badge-wrap {
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
}

.noc-live-alert-bar.severity-success .alert-badge-wrap {
  background: linear-gradient(135deg, #10b981, #059669) !important;
}

.alert-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: alertPulse 1.2s infinite ease-in-out;
}

@keyframes alertPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.alert-ticker-container {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

.alert-ticker-marquee {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 100%;
  animation: tickerContinuous 28s linear infinite;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.3px;
  will-change: transform;
}

.alert-ticker-marquee:hover {
  animation-play-state: paused;
  cursor: default;
}

@keyframes tickerContinuous {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ticker-dot {
  font-size: 1rem;
}

.ticker-time {
  color: #fbbf24;
  font-weight: 700;
}

.noc-live-alert-bar.severity-danger .ticker-time {
  color: #f87171;
}

.noc-live-alert-bar.severity-info .ticker-time {
  color: #38bdf8;
}

.ticker-text {
  color: #f8fafc;
  font-family: var(--font-main), 'Plus Jakarta Sans', sans-serif;
}

.alert-actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  flex-shrink: 0;
}

.btn-broadcast-create {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-broadcast-create:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
  transform: translateY(-1px);
}

/* ==========================================================================
   Subscriber Profile Terminal Log Stream Viewer (Datadog/Syslog Style)
   ========================================================================== */
.subscriber-log-terminal {
  background: #080b10;
  border: 1.5px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.85);
}

.subscriber-log-header {
  background: #0d131f;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1e293b;
  flex-wrap: wrap;
  gap: 8px;
}

.subscriber-log-body {
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  background: #080b10;
}

.subscriber-log-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.subscriber-log-body::-webkit-scrollbar-track {
  background: #080b10;
}

.subscriber-log-body::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

.subscriber-log-body::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

.log-stream-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
  user-select: text;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.55;
  border-left: 3px solid transparent;
}

.log-stream-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Highlighted Online / Last Online Log Row */
.log-stream-row.log-row-last-online {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.16) 0%, rgba(16, 185, 129, 0.06) 60%, rgba(8, 11, 16, 0.3) 100%) !important;
  border-left: 3.5px solid #22c55e !important;
  position: relative;
}

.log-stream-row.log-row-last-online:hover {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.22) 0%, rgba(16, 185, 129, 0.12) 60%, rgba(8, 11, 16, 0.4) 100%) !important;
}

.log-stream-row.log-row-last-online .log-col-service {
  color: #38ef7d !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.log-stream-row.log-row-last-online .log-col-time {
  color: #86efac !important;
  font-weight: 700;
}

/* Highlighted Royal Orange Last Logoff / Disconnect Row */
.log-stream-row.log-row-last-logoff {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.22) 0%, rgba(234, 88, 12, 0.10) 60%, rgba(8, 11, 16, 0.3) 100%) !important;
  border-left: 3.5px solid #f97316 !important;
  position: relative;
}

.log-stream-row.log-row-last-logoff:hover {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.30) 0%, rgba(234, 88, 12, 0.16) 60%, rgba(8, 11, 16, 0.4) 100%) !important;
}

.log-stream-row.log-row-last-logoff .log-col-service {
  color: #fb923c !important;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.45);
}

.log-stream-row.log-row-last-logoff .log-col-time {
  color: #fdba74 !important;
  font-weight: 700;
}

.log-stream-row.log-row-last-logoff .log-col-host {
  color: #fed7aa !important;
}

.log-stream-row.log-row-stop {
  border-left: 3px solid rgba(245, 158, 11, 0.35);
}

.log-stream-row.log-row-stop .log-col-service {
  color: #fb923c !important;
}

.log-stream-row.log-row-auth-reject {
  border-left: 3px solid rgba(239, 68, 68, 0.6) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.log-stream-row.log-row-auth-reject .log-col-service {
  color: #f87171 !important;
}

.log-badge-online-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.22);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.5);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-right: 7px;
  vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

.log-badge-last-online {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-right: 7px;
  vertical-align: middle;
  text-transform: uppercase;
}

.log-badge-last-logoff {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(249, 115, 22, 0.24);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.55);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-right: 7px;
  vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.25);
}

.log-dot-pulse {
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  display: inline-block;
  animation: logDotPulse 1.6s ease-in-out infinite;
}

.log-dot-pulse-orange {
  width: 6px;
  height: 6px;
  background-color: #f97316;
  border-radius: 50%;
  box-shadow: 0 0 6px #f97316;
  display: inline-block;
  animation: logDotPulseOrange 1.6s ease-in-out infinite;
}

@keyframes logDotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 10px #22c55e;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

@keyframes logDotPulseOrange {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 10px #f97316;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

@keyframes logDotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 10px #22c55e;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

.log-stream-row.selected {
  background: #0969da !important;
  color: #ffffff !important;
  border-left-color: #38bdf8 !important;
}

.log-stream-row.selected .log-col-time,
.log-stream-row.selected .log-col-host,
.log-stream-row.selected .log-col-service,
.log-stream-row.selected .log-col-msg,
.log-stream-row.selected .log-col-chevron,
.log-stream-row.selected span,
.log-stream-row.selected strong {
  color: #ffffff !important;
  text-shadow: none !important;
}

.log-stream-row.selected .log-badge-online-live,
.log-stream-row.selected .log-badge-last-online,
.log-stream-row.selected .log-badge-last-logoff {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.log-row-content {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.log-col-time {
  color: #38bdf8;
  font-weight: 500;
  flex-shrink: 0;
  letter-spacing: -0.2px;
}

.log-col-host {
  color: #94a3b8;
  flex-shrink: 0;
}

.log-col-service {
  color: #2dd4bf;
  font-weight: 600;
  flex-shrink: 0;
}

.log-col-msg {
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  display: block;
}

.log-msg-ticker-track {
  display: inline-block;
  white-space: nowrap;
}

/* Moving ticker animation on clicked / selected log row (like dashboard live alert marquee) */
.log-stream-row.selected .log-col-msg {
  overflow: hidden;
  text-overflow: clip;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8px, black calc(100% - 14px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8px, black calc(100% - 14px), transparent);
}

.log-stream-row.selected .log-msg-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 100%;
  animation: logTickerContinuous 24s linear infinite;
  will-change: transform;
}

.log-stream-row.selected:hover .log-msg-ticker-track {
  animation-play-state: paused;
  cursor: default;
}

@keyframes logTickerContinuous {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.log-col-chevron {
  color: #64748b;
  margin-left: 10px;
  font-size: 0.68rem;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.15s ease;
}

.log-stream-row:hover .log-col-chevron {
  color: #94a3b8;
}

.log-stream-row.expanded .log-col-chevron {
  transform: rotate(180deg);
  color: #38bdf8;
}

.log-stream-detail-drawer {
  background: #05080e;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #cbd5e1;
}

.log-stream-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
  margin-bottom: 10px;
  background: rgba(15, 23, 42, 0.4);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.log-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.log-detail-key {
  color: #64748b;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.log-detail-val {
  color: #38bdf8;
  font-weight: 600;
  word-break: break-all;
}

.log-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.log-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-family: monospace;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.log-action-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

.log-search-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #1e293b;
  color: #f8fafc;
  padding: 3px 8px;
  font-size: 0.72rem;
  border-radius: 4px;
  font-family: monospace;
  outline: none;
  width: 160px;
  transition: all 0.2s ease;
}

.log-search-input:focus {
  border-color: #38bdf8;
  width: 200px;
  background: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Modern Midnight Neon Subscriber Profile Dashboard (Matching Screenshot)
   ========================================================================== */
.subprof-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 80px;
  overflow-y: visible;
}

.subprof-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #0b1329 0%, #0d1b3e 50%, #091024 100%);
  border: 1.5px solid rgba(0, 242, 254, 0.28);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.subprof-title {
  font-size: 1.05rem;
  font-weight: 750;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
  flex-shrink: 0;
  white-space: nowrap;
}

.subprof-title i {
  color: #00f2fe;
  font-size: 1.15rem;
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6));
}

.subprof-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  overflow: visible;
  padding: 10px 0 2px 0;
}

.subprof-actions::-webkit-scrollbar {
  display: none;
}

.subprof-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 242, 254, 0.08);
  border: 1.5px solid rgba(0, 242, 254, 0.35);
  color: #00f2fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative !important;
  overflow: visible !important;
}

/* ==========================================================================
   Customer Dashboard Box Buttons - Uniform Rounded Box & Solid Vibrant Colors
   ========================================================================== */
.subprof-pill-btn {
  width: auto;
  min-width: unset;
  max-width: unset;
  height: 32px;
  padding: 6px 12px;
  border-radius: 8px; /* Clean rounded box corners */
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  transition: all 0.18s ease;
  border: 1px solid rgba(255, 255, 255, 0.22);
  outline: none;
  white-space: nowrap;
  box-sizing: border-box;
  color: #ffffff !important;
  flex: 0 0 auto;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  user-select: none;
  position: relative !important;
  overflow: visible !important;
}

@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Existing button text and icon stay crisp & fully visible above outline */
.subprof-pill-btn > *,
.subprof-btn-icon > *,
.subprof-inline-btn > * {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

/* ==========================================================================
   DUAL-ARC ENERGY PLASMA OUTLINE EFFECT
   Applies ONLY to Customer Dashboard Buttons!
   (Activates ONLY on the specific button where the mouse cursor is!)
   ========================================================================== */

/* Layer 1: Razor-Sharp Dual Energy Plasma Arcs */
.subprof-pill-btn::before,
.subprof-btn-icon::before,
.subprof-inline-btn::before {
  content: '';
  position: absolute;
  inset: -2.5px;
  border-radius: 10px;
  padding: 2.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    #ff007f 25deg,
    #ff3b00 55deg,
    #ffaa00 85deg,
    #ffff33 115deg,
    #ffffff 125deg,
    transparent 145deg,
    transparent 180deg,
    #3b82f6 205deg,
    #8b5cf6 235deg,
    #d946ef 265deg,
    #ff0077 295deg,
    #ff6600 310deg,
    transparent 325deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

/* Layer 2: Glowing Fiery Neon Aura */
.subprof-pill-btn::after,
.subprof-btn-icon::after,
.subprof-inline-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  padding: 3.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    rgba(255, 0, 127, 0.8) 25deg,
    rgba(255, 60, 0, 0.95) 55deg,
    rgba(255, 200, 0, 1) 90deg,
    rgba(255, 255, 100, 0.9) 120deg,
    transparent 145deg,
    transparent 180deg,
    rgba(59, 130, 246, 0.85) 205deg,
    rgba(168, 85, 247, 0.95) 240deg,
    rgba(236, 72, 153, 0.95) 275deg,
    rgba(255, 85, 0, 0.9) 310deg,
    transparent 330deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  filter: blur(4px) drop-shadow(0 0 8px rgba(255, 140, 0, 0.85)) drop-shadow(0 0 12px rgba(168, 85, 247, 0.75));
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   ACTIVATION: ONLY the specific button being hovered gets the effect!
   No other buttons activate unless the mouse cursor is directly on them.
   -------------------------------------------------------------------------- */
.subprof-pill-btn:hover,
.subprof-btn-icon:hover,
.subprof-inline-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 14px 2px rgba(255, 170, 0, 0.65),
              0 0 28px 4px rgba(217, 70, 239, 0.45),
              0 8px 18px rgba(0, 0, 0, 0.5) !important;
  z-index: 30 !important;
}

.subprof-pill-btn:hover::before,
.subprof-btn-icon:hover::before,
.subprof-inline-btn:hover::before {
  opacity: 1 !important;
  animation: energy-plasma-spin 1.8s linear infinite !important;
}

.subprof-pill-btn:hover::after,
.subprof-btn-icon:hover::after,
.subprof-inline-btn:hover::after {
  opacity: 1 !important;
  animation: energy-plasma-spin 1.8s linear infinite !important;
}

@keyframes energy-plasma-spin {
  0% {
    --beam-angle: 0deg;
  }
  100% {
    --beam-angle: 360deg;
  }
}

/* Click / Active state */
.subprof-pill-btn:active,
.subprof-btn-icon:active,
.subprof-inline-btn:active {
  transform: translateY(0) scale(0.98) !important;
  filter: brightness(0.95);
}

.subprof-pill-btn i {
  font-size: 0.78rem;
  flex-shrink: 0;
  color: #ffffff;
}

/* 1. Client Info: Vibrant Sky / Cyan Blue Box */
.subprof-pill-btn.client-info {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}
.subprof-pill-btn.client-info:hover {
  background: #0369a1;
  border-color: #7dd3fc;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45);
}

/* 2. Recharge: Vibrant Emerald Green Box */
.subprof-pill-btn.recharge {
  background: #10b981;
  border-color: #34d399;
  color: #ffffff;
}
.subprof-pill-btn.recharge:hover {
  background: #059669;
  border-color: #6ee7b7;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

/* 3. Change Package: Vibrant Indigo Purple Box */
.subprof-pill-btn.change-pkg {
  background: #6366f1;
  border-color: #818cf8;
  color: #ffffff;
}
.subprof-pill-btn.change-pkg:hover {
  background: #4f46e5;
  border-color: #a5b4fc;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
}

/* 4. Edit Account: Vibrant Royal Blue Box */
.subprof-pill-btn.edit {
  background: #2563eb;
  border-color: #60a5fa;
  color: #ffffff;
}
.subprof-pill-btn.edit:hover {
  background: #1d4ed8;
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}

/* 5. Refresh: Sleek Slate Steel Box */
.subprof-pill-btn.refresh {
  background: #475569;
  border-color: #94a3b8;
  color: #ffffff;
}
.subprof-pill-btn.refresh:hover {
  background: #334155;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.45);
}

/* 6. Force Disconnect: Vibrant Solid Amber / Yellow-Orange Box (Matching screenshot Available C... button) */
.subprof-pill-btn.disconnect {
  background: #f59e0b;
  border-color: #fbbf24;
  color: #ffffff;
  font-weight: 800;
}
.subprof-pill-btn.disconnect:hover {
  background: #d97706;
  border-color: #fde68a;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.55);
}

/* 7. Suspend Account: Vibrant Solid Crimson Red Box (Matching screenshot Show Full Report button) */
.subprof-pill-btn.suspend {
  background: #dc2626;
  border-color: #ef4444;
  color: #ffffff;
  font-weight: 800;
}
.subprof-pill-btn.suspend:hover {
  background: #b91c1c;
  border-color: #fca5a5;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.55);
}

/* 8. Restore Account: Vibrant Forest Green Box */
.subprof-pill-btn.restore {
  background: #059669;
  border-color: #10b981;
  color: #ffffff;
  font-weight: 800;
}
.subprof-pill-btn.restore:hover {
  background: #047857;
  border-color: #34d399;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.5);
}

/* 9. Speed Boost: Electric Gold Box */
.subprof-pill-btn.speed-boost {
  background: #ca8a04;
  border-color: #eab308;
  color: #ffffff;
  font-weight: 800;
  position: relative;
  overflow: visible;
}
.subprof-pill-btn.speed-boost:hover {
  background: #a16207;
  border-color: #facc15;
  box-shadow: 0 4px 14px rgba(202, 138, 4, 0.55);
}

/* 10. Mark Unpaid: Vibrant Coral Rose Red Box */
.subprof-pill-btn.unpaid {
  background: #e11d48;
  border-color: #fb7185;
  color: #ffffff;
  font-weight: 800;
}
.subprof-pill-btn.unpaid:hover {
  background: #be123c;
  border-color: #fda4af;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.5);
}

/* 11. Grace Period: Warm Sunset Orange Box */
.subprof-pill-btn.grace {
  background: #ea580c;
  border-color: #fb923c;
  color: #ffffff;
  font-weight: 800;
}
.subprof-pill-btn.grace:hover {
  background: #c2410c;
  border-color: #fdba74;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.5);
}

/* 12. Complaint History: Deep Royal Purple Box */
.subprof-pill-btn.complaints {
  background: #7c3aed;
  border-color: #a78bfa;
  color: #ffffff;
  font-weight: 800;
}
.subprof-pill-btn.complaints:hover {
  background: #6d28d9;
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.5);
}
.subprof-pill-btn.complaints.has-unresolved {
  background: #b91c1c !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}
.subprof-pill-btn.complaints.has-overdue {
  background: #991b1b !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  animation: pulse-red 2s infinite !important;
}

@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.9);
  }
}


.subprof-expiry-badge {
  background: #e11d48 !important;
  border: 1px solid #f43f5e !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.4) !important;
  display: inline-block !important;
  letter-spacing: 0.3px !important;
  font-size: 0.85rem !important;
}

.subprof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr);
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1080px) {
  .subprof-grid {
    grid-template-columns: 1fr;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {

  /* Tablet: keep session gauge + bullets side by side but constrain width */
  .subprof-session-bullets {
    min-width: 0;
    flex: 1;
  }

  /* Speed meters stay 2-col on tablet */
  .prof-speedmeters-container {
    grid-template-columns: 1fr 1fr;
  }
}

.subprof-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.subprof-card {
  background: #080d1a;
  border: 1.5px solid rgba(0, 242, 254, 0.22);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.subprof-card-header {
  padding: 10px 16px;
  background: rgba(0, 242, 254, 0.04);
  border-bottom: 1px solid rgba(0, 242, 254, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subprof-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subprof-card-title i {
  color: #00f2fe;
  font-size: 0.95rem;
}

.subprof-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subprof-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.subprof-kv-row:last-child {
  border-bottom: none;
}

.subprof-kv-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subprof-kv-label i {
  color: #38bdf8;
  font-size: 0.8rem;
}

.subprof-kv-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: #ffffff !important;
  font-weight: 700;
  text-align: right;
}

.subprof-session-upper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  padding: 6px 0 10px 0;
  flex-wrap: wrap;
}

.subprof-gauge-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.subprof-gauge-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 170px;
}

.subprof-gauge-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.subprof-gauge-status {
  font-size: 0.65rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.subprof-gauge-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 2px 0;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.subprof-gauge-subtext {
  font-size: 0.68rem;
  font-weight: 700;
  color: #00f2fe;
  letter-spacing: 0.5px;
}

.subprof-session-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 220px;
}

.subprof-bullet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.subprof-bullet-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.subprof-bullet-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f2fe;
  box-shadow: 0 0 6px #00f2fe;
  display: inline-block;
  flex-shrink: 0;
}

.subprof-bullet-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  text-align: right;
  word-break: break-all;
}

/* Flame Yellow Optical Telemetry Bullets */
.subprof-bullet-item.flame-yellow .subprof-bullet-label {
  color: #fde68a !important;
}

.subprof-bullet-item.flame-yellow .subprof-bullet-label::before {
  background: #fbbf24 !important;
  box-shadow: 0 0 8px #f59e0b, 0 0 14px rgba(251, 191, 36, 0.6) !important;
}

.subprof-bullet-item.flame-yellow .subprof-bullet-val {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 0 16px rgba(245, 158, 11, 0.35) !important;
  letter-spacing: 0.5px;
}

/* Subprof Collapsible More Info (Optical Signal & Fiber Distance) */
.subprof-more-info-wrap {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.subprof-more-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  padding: 4px 12px;
  color: #fbbf24;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.subprof-more-info-btn:hover {
  background: rgba(251, 191, 36, 0.18);
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
  transform: translateY(-1px);
}

.subprof-more-info-btn.active {
  background: rgba(251, 191, 36, 0.2);
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.subprof-more-info-btn i {
  font-size: 0.65rem;
  transition: transform 0.22s ease;
}

.subprof-optical-folded {
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(4, 8, 18, 0.75);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 10px;
  margin-top: 2px;
  animation: subprofFoldIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes subprofFoldIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Red Light / LOS Status Styling */
.badge-red-light,
.subprof-badge-pill.red-light {
  background: rgba(239, 68, 68, 0.22) !important;
  border: 1.5px solid #ef4444 !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35) !important;
}

@keyframes redLightPulse {
  0% {
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.35);
  }
  50% {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.85);
  }
  100% {
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.35);
  }
}

.red-light-pulse {
  animation: redLightPulse 1.8s infinite ease-in-out;
}

.subprof-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .subprof-kpi-row {
    grid-template-columns: 1fr;
  }
}

.subprof-kpi-box {
  background: rgba(11, 18, 33, 0.85);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.subprof-kpi-box:hover {
  transform: translateY(-2px);
}

.subprof-kpi-box.upload {
  border: 1.5px solid rgba(236, 72, 153, 0.4);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.1);
}

.subprof-kpi-box.download {
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.1);
}

.subprof-kpi-box.total {
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
}

.subprof-kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subprof-kpi-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.subprof-kpi-box.upload .subprof-kpi-icon-circle {
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
  border: 1px solid #ec4899;
}

.subprof-kpi-box.download .subprof-kpi-icon-circle {
  background: rgba(0, 242, 254, 0.2);
  color: #22d3ee;
  border: 1px solid #00f2fe;
}

.subprof-kpi-box.total .subprof-kpi-icon-circle {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid #38bdf8;
}

.subprof-kpi-info {
  display: flex;
  flex-direction: column;
}

.subprof-kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.subprof-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}

.subprof-sparkline-canvas {
  width: 100%;
  height: 28px;
  display: block;
}

/* ==========================================================================
   CUSTOMER FULL NAME BANNER (Between Live Graph & Speed Meters)
   ========================================================================== */
.prof-customer-banner {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(15, 23, 42, 0.85) 50%, rgba(59, 130, 246, 0.10) 100%);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin: 2px 0;
  transition: all 0.25s ease;
}

.prof-customer-banner:hover {
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.25), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.prof-customer-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(14, 165, 233, 0.15) 100%);
  border: 1px solid rgba(6, 182, 212, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f2fe;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

.prof-customer-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #38bdf8;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 2px;
}

.prof-customer-val {
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(6, 182, 212, 0.4);
}

.prof-customer-user-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.prof-customer-user-badge i {
  color: #00f2fe;
}

/* ==========================================================================
   CENTER TIME & DATE CLOCK (Inside Customer Full Name Banner)
   ========================================================================== */
.prof-customer-center-datetime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%);
  border: 1px solid rgba(0, 242, 254, 0.35);
  border-radius: 8px;
  padding: 5px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.prof-customer-center-datetime:hover {
  border-color: rgba(0, 242, 254, 0.65);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.25), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.prof-datetime-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.prof-clock-icon {
  color: #00f2fe;
  font-size: 0.84rem;
  animation: clockPulseGlow 2s infinite ease-in-out;
}

.prof-live-time-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
}

.prof-datetime-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
}

.prof-cal-icon {
  color: #38bdf8;
  font-size: 0.82rem;
}

.prof-live-date-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.84rem;
  color: #cbd5e1;
  letter-spacing: 0.3px;
}

@keyframes clockPulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px #00f2fe); }
  50% { opacity: 0.7; transform: scale(0.96); filter: drop-shadow(0 0 6px #00f2fe); }
}

@media (max-width: 820px) {
  .prof-customer-banner {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .prof-customer-center-datetime {
    order: 3;
    width: 100%;
    margin-top: 4px;
    justify-content: center;
  }
}

/* ==========================================================================
   LIVE SPEED METERS (DOWNLOAD & UPLOAD DUAL GAUGES)
   ========================================================================== */
.prof-speedmeters-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.prof-speedmeter-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.prof-speedmeter-card {
  background: linear-gradient(145deg, #070d1d, #040711);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.prof-speedmeter-card.dl {
  border-color: rgba(0, 242, 254, 0.24);
}

.prof-speedmeter-card.dl:hover {
  border-color: rgba(0, 242, 254, 0.5);
  box-shadow: 0 6px 22px rgba(0, 242, 254, 0.15);
}

.prof-speedmeter-card.ul {
  border-color: rgba(244, 114, 182, 0.24);
}

.prof-speedmeter-card.ul:hover {
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow: 0 6px 22px rgba(244, 114, 182, 0.15);
}

.prof-speedmeter-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.prof-speedmeter-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 6px;
}

.prof-speedmeter-badge.dl {
  color: #00f2fe;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.2);
}

.prof-speedmeter-badge.ul {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.08);
  border: 1px solid rgba(244, 114, 182, 0.2);
}

.prof-speedmeter-plan {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
}

.prof-speedmeter-gauge-area {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prof-speedmeter-gauge-area canvas {
  width: 100%;
  max-width: 230px;
  height: 118px;
  display: block;
}

.prof-speedmeter-digital-outside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: linear-gradient(145deg, #070d1d, #040711);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
}

.prof-speedmeter-digital-outside.dl {
  border-color: rgba(0, 242, 254, 0.24);
}

.prof-speedmeter-digital-outside.dl:hover {
  border-color: rgba(0, 242, 254, 0.5);
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.15);
}

.prof-speedmeter-digital-outside.ul {
  border-color: rgba(244, 114, 182, 0.24);
}

.prof-speedmeter-digital-outside.ul:hover {
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow: 0 4px 18px rgba(244, 114, 182, 0.15);
}

.prof-speedmeter-digital {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -12px;
  position: relative;
  z-index: 2;
}

.prof-meter-val-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.prof-meter-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
}

.prof-meter-num.flame-white,
.flame-white {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.65), 0 0 38px rgba(255, 255, 255, 0.35) !important;
}

.prof-meter-unit.flame-white {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3px;
}

.prof-meter-sub.flame-white-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.prof-meter-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 800;
  color: #cbd5e1;
}

.prof-meter-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .prof-speedmeters-container {
    grid-template-columns: 1fr;
  }
}

#btn-probe-session-now {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
}

#btn-probe-session-now:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-1px);
}

#btn-probe-session-now:active {
  transform: translateY(1px);
}


/* ==========================================================================
   COMPACT MIDNIGHT NEON: ADD NEW CLIENT / SETUP CONNECTION MODAL
   ========================================================================== */
.conn-modal-card {
  background: #040915 !important;
  border: 1.5px solid rgba(0, 242, 254, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 242, 254, 0.18) !important;
  border-radius: 16px !important;
  max-width: 980px !important;
  width: 92% !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #f8fafc !important;
  margin: auto !important;
}

.conn-modal-header {
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(0, 242, 254, 0.18);
  background: rgba(6, 12, 26, 0.98);
}

.conn-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.conn-modal-title i {
  color: #00f2fe;
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6));
  font-size: 1.15rem;
}

.conn-modal-body {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  gap: 10px;
  background: #040915;
}

.conn-section {
  background: rgba(10, 18, 36, 0.65);
  border: 1px solid rgba(0, 242, 254, 0.18);
  border-radius: 12px;
  padding: 10px 16px;
}

.conn-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #00f2fe;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.conn-section-header i {
  font-size: 0.9rem;
}

.conn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

@media (max-width: 600px) {
  .conn-grid-2 {
    grid-template-columns: 1fr;
  }
}

.conn-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.conn-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.conn-label i {
  color: #00f2fe;
  font-size: 0.78rem;
}

.conn-label i.fa-whatsapp {
  color: #22c55e;
}

.conn-input,
.conn-select {
  height: 36px;
  padding: 5px 12px;
  background: rgba(6, 11, 24, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px;
  color: #f8fafc !important;
  font-size: 0.86rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.conn-input:focus,
.conn-select:focus {
  border-color: #00f2fe !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important;
}

.conn-input.highlight {
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.conn-submit-btn {
  height: 42px;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.45);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.conn-submit-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 242, 254, 0.6);
}

/* ========================================================
   SUBSCRIBER PORTAL CYBER TELEMETRY & HISTORICAL USAGE CARDS
   ======================================================== */
.telemetry-cyber-card {
  background: radial-gradient(circle at 50% 0%, rgba(14, 28, 54, 0.7) 0%, rgba(6, 12, 22, 0.95) 100%), #060c16;
  border: 1.5px solid rgba(0, 160, 255, 0.4);
  border-radius: 18px;
  padding: 22px 24px;
  color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 195, 255, 0.08), inset 0 0 30px rgba(0, 150, 255, 0.03);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.telemetry-cyber-card:hover {
  border-color: rgba(0, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 210, 255, 0.14), inset 0 0 35px rgba(0, 180, 255, 0.05);
}

.telemetry-cyber-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.telemetry-cyber-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.22rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin: 0;
}

.telemetry-title-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f0ff;
  filter: drop-shadow(0 0 8px #00f0ff);
}

.telemetry-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.telemetry-tab-pill {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 3px;
  gap: 4px;
}

.telemetry-tab-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.telemetry-tab-btn:hover {
  color: #ffffff;
}

.telemetry-tab-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
}

.status-pill-offline {
  background: #1d4ed8;
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 16px rgba(29, 78, 216, 0.6);
  text-transform: uppercase;
}

.status-pill-online {
  background: #059669;
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 16px rgba(5, 150, 105, 0.6);
  text-transform: uppercase;
}

.status-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
}

.status-pill-online .status-pill-dot {
  background: #6ee7b7;
  box-shadow: 0 0 8px #6ee7b7;
}

/* Middle Section: Radial Dial + Props List */
.telemetry-middle-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .telemetry-middle-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

.telemetry-gauge-container {
  position: relative;
  width: 175px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.telemetry-gauge-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.telemetry-gauge-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

.gauge-status-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.gauge-digital-timer {
  font-size: 1.58rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  letter-spacing: 0.8px;
  line-height: 1.1;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.8), 0 0 28px rgba(56, 189, 248, 0.4);
}

.gauge-uptime-sub {
  font-size: 0.82rem;
  font-weight: 800;
  color: #00f0ff;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.telemetry-props-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
  width: 100%;
}

.telemetry-prop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.telemetry-prop-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #94a3b8;
  text-transform: uppercase;
}

.telemetry-prop-dot {
  color: #00f0ff;
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px #00f0ff);
}

.telemetry-prop-val {
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.5px;
}

/* Flame Yellow Optical Telemetry Cyber Card Props */
.telemetry-prop-item.flame-yellow .telemetry-prop-label {
  color: #fde68a !important;
}

.telemetry-prop-item.flame-yellow .telemetry-prop-dot {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 6px #f59e0b) drop-shadow(0 0 10px rgba(251, 191, 36, 0.6)) !important;
}

.telemetry-prop-item.flame-yellow .telemetry-prop-val {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 0 18px rgba(245, 158, 11, 0.35) !important;
  letter-spacing: 0.5px;
}

.flame-yellow,
.text-flame-yellow {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}

/* Bottom Metric Cards (Upload, Download, Total) */
.telemetry-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .telemetry-cards-grid {
    grid-template-columns: 1fr;
  }
}

.telemetry-stat-card {
  background: rgba(11, 17, 30, 0.75);
  border-radius: 14px;
  padding: 14px 16px 6px 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 105px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.telemetry-stat-card:hover {
  transform: translateY(-2px);
}

/* Card 1: Upload (Magenta / Pink) */
.telemetry-card-upload {
  border: 1.5px solid #ec4899;
  box-shadow: inset 0 0 16px rgba(236, 72, 153, 0.08), 0 0 16px rgba(236, 72, 153, 0.15);
}

.telemetry-card-upload:hover {
  box-shadow: inset 0 0 20px rgba(236, 72, 153, 0.14), 0 0 22px rgba(236, 72, 153, 0.3);
}

/* Card 2: Download (Cyan) */
.telemetry-card-download {
  border: 1.5px solid #06b6d4;
  box-shadow: inset 0 0 16px rgba(6, 182, 212, 0.08), 0 0 16px rgba(6, 182, 212, 0.15);
}

.telemetry-card-download:hover {
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.14), 0 0 22px rgba(6, 182, 212, 0.3);
}

/* Card 3: Total (Blue) */
.telemetry-card-total {
  border: 1.5px solid #0284c7;
  box-shadow: inset 0 0 16px rgba(2, 132, 199, 0.08), 0 0 16px rgba(2, 132, 199, 0.15);
}

.telemetry-card-total:hover {
  box-shadow: inset 0 0 20px rgba(2, 132, 199, 0.14), 0 0 22px rgba(2, 132, 199, 0.3);
}

.telemetry-stat-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.telemetry-stat-icon-upload {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #ec4899;
  color: #ec4899;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.3);
}

.telemetry-stat-icon-download {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #06b6d4;
  color: #06b6d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

.telemetry-stat-icon-total {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #38bdf8;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.telemetry-stat-info {
  display: flex;
  flex-direction: column;
}

.telemetry-stat-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.telemetry-stat-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

.telemetry-wave-svg {
  width: 100%;
  height: 26px;
  overflow: visible;
  margin-top: 6px;
}

.telemetry-wave-pink {
  stroke: #ff2d87;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #ff2d87) drop-shadow(0 0 12px rgba(255, 45, 135, 0.6));
}

.telemetry-wave-cyan {
  stroke: #00f0ff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #00f0ff) drop-shadow(0 0 12px rgba(0, 240, 255, 0.6));
}

.telemetry-wave-blue {
  stroke: #38bdf8;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #38bdf8) drop-shadow(0 0 12px rgba(56, 189, 248, 0.6));
}

/* ========================================================
   REAL-TIME BANDWIDTH SPLINE CARD
   ======================================================== */
.spline-telemetry-card {
  background: radial-gradient(circle at 50% 0%, rgba(14, 28, 54, 0.7) 0%, rgba(6, 12, 22, 0.95) 100%), #060c16;
  border: 1.5px solid rgba(0, 160, 255, 0.4);
  border-radius: 18px;
  padding: 22px 24px;
  color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 195, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.spline-telemetry-card:hover {
  border-color: rgba(0, 210, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 210, 255, 0.14);
}

.spline-telemetry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.spline-telemetry-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin: 0;
}

.spline-title-icon {
  color: #00f0ff;
  font-size: 1.25rem;
  filter: drop-shadow(0 0 8px #00f0ff);
}

.spline-header-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.spline-ip-badge {
  background: rgba(6, 78, 59, 0.35);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  border-radius: 7px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}

.spline-live-badge {
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.spline-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  display: inline-block;
}

.spline-chart-box {
  position: relative;
  width: 100%;
  height: 240px;
  background: #020611;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.spline-plan-banner {
  position: absolute;
  top: 14px;
  left: 68px;
  font-size: 0.75rem;
  font-weight: 900;
  color: #e2e8f0;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-main, sans-serif);
}

.spline-footer-bar {
  background: rgba(3, 7, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px 20px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.spline-speed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}

.spline-down-label {
  color: #00f0ff;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spline-up-label {
  color: #f472b6;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spline-val-primary {
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.96rem;
  letter-spacing: 0.3px;
}

.spline-val-secondary {
  color: #cbd5e1;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

/* ========================================================
   KEY ACCOUNT TELEMETRY CARDS (5 CARDS GRID)
   ======================================================== */
.account-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .account-telemetry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .account-telemetry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .account-telemetry-grid {
    grid-template-columns: 1fr;
  }
}

.account-kpi-card {
  background: radial-gradient(circle at 50% 0%, rgba(14, 28, 54, 0.5) 0%, rgba(7, 13, 26, 0.95) 100%), #070d1a;
  border-radius: 16px;
  padding: 18px 20px;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 125px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-kpi-card:hover {
  transform: translateY(-2px);
}

.account-kpi-card.kpi-card-plan {
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.06);
}

.account-kpi-card.kpi-card-bill {
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.06);
}

.account-kpi-card.kpi-card-join {
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.06);
}

.account-kpi-card.kpi-card-remaining {
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 22px rgba(56, 189, 248, 0.12);
}

.account-kpi-card.kpi-card-remaining.expiring-soon {
  border: 1.5px solid rgba(245, 158, 11, 0.85);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.35);
  animation: pulseRemainingSoon 2.2s infinite ease-in-out;
}

.account-kpi-card.kpi-card-remaining.expired {
  border: 1.5px solid rgba(239, 68, 68, 0.8);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(239, 68, 68, 0.3);
}

@keyframes pulseRemainingSoon {
  0% { box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 12px rgba(245, 158, 11, 0.25); }
  50% { box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 28px rgba(245, 158, 11, 0.5); }
  100% { box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 12px rgba(245, 158, 11, 0.25); }
}

.account-kpi-card.kpi-card-expiry {
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.06);
}

/* Subscriber Anti-Flicker Protection during Refresh */
html.is-subscriber-role .sidebar,
html.is-subscriber-role .top-header,
html.is-subscriber-role #panel-dashboard,
html.is-subscriber-role .panel-section:not(#panel-subscriber-dashboard) {
  display: none !important;
}

html.is-subscriber-role .main-content {
  margin-left: 0 !important;
  max-width: 100% !important;
}

html.is-subscriber-role #panel-subscriber-dashboard {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.account-kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.account-kpi-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.kpi-card-plan .account-kpi-title {
  color: #38bdf8;
}

.kpi-card-bill .account-kpi-title {
  color: #f87171;
}

.kpi-card-join .account-kpi-title {
  color: #34d399;
}

.kpi-card-expiry .account-kpi-title {
  color: #c084fc;
}

.account-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.kpi-card-plan .account-kpi-icon {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.kpi-card-bill .account-kpi-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.kpi-card-join .account-kpi-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.kpi-card-expiry .account-kpi-icon {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.account-kpi-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.15;
  font-family: var(--font-display, sans-serif);
}

.account-kpi-sub {
  font-size: 0.76rem;
  color: #94a3b8;
  margin-top: 6px;
  font-weight: 500;
}

.kpi-card-expiry .account-kpi-sub {
  color: #c084fc;
}

/* ========================================================
   MODERN PACKAGE CARDS (PICTURE 2 STYLE)
   ======================================================== */
.modern-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.modern-pkg-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}

.modern-pkg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(220, 38, 38, 0.35);
}

.modern-pkg-top-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 3.5px 16px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.6);
  z-index: 10;
  white-space: nowrap;
}

.modern-pkg-top-badge.badge-green {
  background: #059669;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.6);
}

.modern-pkg-top-badge.badge-purple {
  background: #7c3aed;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.6);
}

.modern-pkg-header {
  background: linear-gradient(135deg, #ef233c 0%, #d90429 100%);
  border-radius: 20px 20px 0 0;
  padding: 16px 12px 14px 12px;
  position: relative;
  overflow: hidden;
}

/* Dual white lightning bolts on top right of red header */
.modern-pkg-bolts-top {
  position: absolute;
  top: 10px;
  right: 14px;
  display: flex;
  gap: 3px;
  color: #ffffff;
  font-size: 1.25rem;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  transform: rotate(-10deg);
  pointer-events: none;
}

.modern-pkg-inner-wrap {
  display: flex;
  align-items: stretch;
  background: #000000;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.modern-pkg-inner-left {
  flex: 1;
  padding: 14px 14px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.modern-pkg-left-bolt {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #ffffff;
  font-size: 0.85rem;
  opacity: 0.8;
}

.modern-pkg-unlimited-label {
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.modern-pkg-speed-heading {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-top: 3px;
  font-family: var(--font-display, sans-serif);
}

.modern-pkg-inner-right {
  background: linear-gradient(135deg, #d90429 0%, #b3001e 100%);
  border-radius: 50px 0 0 50px;
  padding: 12px 16px 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  min-width: 110px;
  position: relative;
  z-index: 2;
}

.modern-pkg-price-row {
  display: flex;
  align-items: baseline;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
}

.modern-pkg-price-currency {
  font-size: 1.05rem;
  font-weight: 900;
  margin-right: 3px;
  letter-spacing: -0.3px;
}

.modern-pkg-price-amount {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.8px;
  font-family: var(--font-display, sans-serif);
}

.modern-pkg-validity-text {
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 3px;
  white-space: nowrap;
}

.modern-pkg-body {
  background: #ffffff;
  border-radius: 0 0 20px 20px;
  padding: 20px 18px 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 16px;
}

.modern-pkg-feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modern-pkg-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.modern-5g-circle {
  border: 1.8px solid #ef233c;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  color: #ef233c;
  flex-shrink: 0;
  margin-top: -1px;
}

.modern-icon-red {
  color: #ef233c;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.modern-pkg-action-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ef233c 0%, #d90429 100%);
  border: none;
  font-weight: 800;
  font-size: 0.9rem;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 35, 60, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.modern-pkg-action-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 35, 60, 0.55);
}

/* =======================================================
   POINT-TO-POINT (PTP) BACKHAUL & SPEEDOMETER STYLES
   ======================================================= */
.ptp-brand-tab {
  transition: all 0.2s ease-in-out;
}

.ptp-brand-tab:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.speedtest-phase-pill {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#speedometer-needle {
  transform-origin: 100px 115px;
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.8));
}

#speedometer-arc {
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
}

@keyframes ptpPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(6, 182, 212, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}

.ptp-testing-active {
  animation: ptpPulseGlow 1.5s infinite;
}

/* ==========================================
   WHATSAPP REST SERVER & ENGINE DASHBOARD
   ========================================== */
#panel-whatsapp-server .card-3d {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#evo-qr-box-wrapper {
  transition: all 0.3s ease;
}

#evo-qr-box-wrapper:hover {
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.8) !important;
}

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.pulse-dot.green {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseGreen 1.5s infinite;
}

.pulse-dot.red {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulseRed 1.5s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pulseRed {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* ==========================================================================
   FUTURISTIC SCI-FI HUD ANIMATED LOADER (GLOBAL & PER-PANEL ENGINE)
   ========================================================================== */
.global-hud-loader-overlay,
.billing-hud-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 80vh;
  background: radial-gradient(circle at 50% 35%, rgba(15, 23, 42, 0.98) 0%, rgba(4, 7, 15, 0.99) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 100px;
  z-index: 999;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease, transform 0.3s ease;
}

.global-hud-loader-overlay.active,
.billing-hud-loader-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.global-hud-loader-overlay::before,
.billing-hud-loader-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), transparent);
}

.hud-loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 580px;
  user-select: none;
  position: relative;
  padding: 30px 20px;
}

/* Top Row: Percentage Badge + Guide Rail */
.hud-top-row {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 520px;
  position: relative;
  margin-bottom: -4px;
  z-index: 5;
  padding-left: 20px;
}

.hud-percent-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-orb-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 28px rgba(56, 189, 248, 0.8), inset 0 0 12px rgba(56, 189, 248, 0.6);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(56, 189, 248, 0.4) 40%, rgba(15, 23, 42, 0.9) 80%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hud-orb-pulse 2.2s infinite ease-in-out;
}

.hud-orb-core {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 16px #38bdf8;
}

.hud-percent-text {
  font-family: 'Orbitron', 'JetBrains Mono', sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 2px;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 30px rgba(56, 189, 248, 0.7);
  line-height: 1;
  min-width: 120px;
}

.hud-top-guide-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(56, 189, 248, 0.5) 70%, transparent 100%);
  margin-left: 16px;
  margin-bottom: 12px;
  position: relative;
}

.hud-top-guide-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  background: #38bdf8;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #38bdf8;
}

/* Main Skewed Progress Bar */
.hud-bar-wrapper {
  width: 100%;
  max-width: 520px;
  position: relative;
  padding: 4px 0;
}

.hud-bar-frame {
  width: 100%;
  height: 48px;
  transform: skewX(-24deg);
  background: rgba(10, 16, 30, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.35),
    0 0 35px rgba(56, 189, 248, 0.4),
    inset 0 0 18px rgba(0, 0, 0, 0.95);
  border-radius: 4px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hud-bar-inner {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 5px;
  align-items: stretch;
  justify-content: space-between;
}

.hud-segment {
  flex: 1;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  transition: background 0.06s ease, box-shadow 0.06s ease, opacity 0.06s ease;
}

.hud-segment.active {
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 50%, #93c5fd 100%);
  border-color: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 20px rgba(56, 189, 248, 0.95);
  opacity: 1;
}

.hud-bar-sheen {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: hud-sheen-sweep 2.2s infinite ease-in-out;
  pointer-events: none;
}

/* Bottom Row: Scale + LOADING... */
.hud-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 520px;
  margin-top: 10px;
  padding: 0 10px;
}

.hud-ruler-scale {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  padding-bottom: 4px;
  width: 220px;
  height: 18px;
}

.hud-ruler-scale::before {
  content: '|||||||||||||||||||||||||||||||||||||||||||||||';
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 2.2px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.hud-loading-label {
  font-family: 'Orbitron', 'JetBrains Mono', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 24px rgba(56, 189, 248, 0.7);
  display: flex;
  align-items: center;
  animation: hud-text-glow 1.8s infinite ease-in-out;
}

.hud-system-status {
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  color: #38bdf8;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
  animation: hud-status-pulse 2s infinite ease-in-out;
}

/* Animations & Keyframes */
@keyframes hud-sheen-sweep {
  0% {
    left: -120%;
  }

  50%,
  100% {
    left: 220%;
  }
}

@keyframes hud-orb-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 28px rgba(56, 189, 248, 0.8);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 40px rgba(56, 189, 248, 1);
  }
}

@keyframes hud-text-glow {

  0%,
  100% {
    opacity: 0.85;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(56, 189, 248, 0.6);
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 18px rgba(255, 255, 255, 1), 0 0 35px rgba(56, 189, 248, 0.9);
  }
}

@keyframes hud-status-pulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
  }
}

/* ==========================================
   Latest Authentication Result Card
   ========================================== */
.latest-auth-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-in-out;
}

body.dark-theme .latest-auth-card {
  background: #080d1a;
  border: 1.5px solid rgba(0, 242, 254, 0.22);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.latest-auth-header {
  background: #1d4ed8;
  color: #ffffff;
  padding: 10px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.btn-clear-auth {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: 1px solid #f87171;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 3.5px 0 #991b1b, 0 5px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  will-change: transform;
}

.btn-clear-auth i {
  font-size: 0.82rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.btn-clear-auth:hover {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  border-color: #fca5a5;
  box-shadow: 0 4.5px 0 #991b1b, 0 7px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.btn-clear-auth:active {
  transform: translateY(2.5px);
  box-shadow: 0 1px 0 #991b1b, 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-clear-auth:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 0 #991b1b;
}

.latest-auth-body {
  padding: 16px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: transparent;
}

.latest-auth-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.latest-auth-col-right {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 24px;
}

body:not(.dark-theme) .latest-auth-col-right {
  border-left: 1px solid #e2e8f0;
}

.latest-auth-col-header {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}

body.dark-theme .latest-auth-col-header {
  color: #94a3b8;
}

.latest-auth-track-container {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1;
}

.latest-auth-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22px;
  flex-shrink: 0;
  padding-top: 3px;
}

.latest-auth-node {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
  transition: all 0.2s ease;
}

.latest-auth-node.reject {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.latest-auth-node.logoff-node-normal {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.latest-auth-node.logoff-node-lost {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.latest-auth-node.logoff-node-admin {
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.latest-auth-line {
  width: 2.5px;
  flex: 1;
  min-height: 52px;
  background: #3b82f6;
  margin: 3px 0;
}

.latest-auth-line.logoff-line-normal {
  background: #f59e0b;
}

.latest-auth-end-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
}

.latest-auth-end-dot.logoff-dot-normal {
  background: #f59e0b;
}

.latest-auth-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.latest-auth-timestamp {
  font-size: 0.92rem;
  color: #64748b;
  font-weight: 500;
  font-family: inherit;
}

body.dark-theme .latest-auth-timestamp {
  color: #94a3b8;
}

.latest-auth-status {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 1px;
  margin-bottom: 2px;
}

body.dark-theme .latest-auth-status {
  color: #ffffff;
}

.latest-auth-status.reject {
  color: #dc2626 !important;
}

.latest-auth-status.logoff-user-request {
  color: #f59e0b;
}

.latest-auth-status.logoff-carrier-lost {
  color: #ef4444;
}

.latest-auth-status.logoff-admin-reset {
  color: #38bdf8;
}

.latest-auth-row {
  font-size: 0.92rem;
  color: #334155;
  font-weight: 500;
  word-break: break-all;
  line-height: 1.45;
}

body.dark-theme .latest-auth-row {
  color: #cbd5e1;
}

.latest-auth-svlan {
  font-size: 0.96rem;
  font-weight: 750;
  color: #16a34a;
  margin-top: 2px;
}

body.dark-theme .latest-auth-svlan {
  color: #22c55e;
}

.latest-auth-svlan.logoff-svlan {
  color: #f59e0b;
}

/* =======================================================
   VSOL OLT ONU OPM DIAGNOSTICS & TELEMETRY STYLES
   ======================================================= */
.opm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.opm-kpi-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.opm-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.opm-kpi-val {
  font-family: var(--font-mono), monospace;
  letter-spacing: -0.5px;
}

#opm-diag-table th {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.95);
  padding: 12px 14px;
  border-bottom: 2px solid #334155;
  white-space: nowrap;
}

#opm-diag-table td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  font-size: 0.86rem;
}

#opm-diag-table tbody tr:hover {
  background: rgba(30, 41, 59, 0.5) !important;
}

.copy-mac {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.copy-mac:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

@media (max-width: 768px) {
  .opm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Subscriber Suspension History Styling */
.suspension-badge-suspended {
  background: rgba(239, 68, 68, 0.18) !important;
  border: 1px solid #ef4444 !important;
  color: #f87171 !important;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
}

.suspension-badge-active {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid #10b981 !important;
  color: #34d399 !important;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
}

#prof-suspension-history-tbody tr:hover,
#prof-modal-suspension-tbody tr:hover {
  background: rgba(56, 189, 248, 0.08) !important;
}

/* =======================================================
   DIGITAL OTDR FIBER ANALYZER & OPTICAL DIAGNOSTICS STYLES
   ======================================================= */
.btn-otdr-start {
  background: linear-gradient(135deg, #00f3ff, #0284c7, #2563eb);
  background-size: 200% 200%;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 243, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: otdrPulseGlow 3s infinite ease-in-out;
}

.btn-otdr-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 243, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background-position: 100% 50%;
}

.btn-otdr-start:active {
  transform: translateY(0);
}

.btn-otdr-start.scanning {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
  animation: otdrScanningPulse 1s infinite alternate;
}

@keyframes otdrPulseGlow {

  0%,
  100% {
    box-shadow: 0 4px 14px rgba(0, 243, 255, 0.35);
  }

  50% {
    box-shadow: 0 4px 24px rgba(0, 243, 255, 0.65), 0 0 10px rgba(2, 132, 199, 0.4);
  }
}

@keyframes otdrScanningPulse {
  from {
    opacity: 0.85;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

.otdr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.otdr-kpi-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.otdr-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.otdr-kpi-val {
  font-family: var(--font-mono), monospace;
  letter-spacing: -0.5px;
}

.otdr-filter-pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #334155;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.otdr-filter-pill:hover {
  background: rgba(30, 41, 59, 0.9);
  color: #ffffff;
  border-color: #64748b;
}

.otdr-filter-pill.active {
  background: rgba(0, 243, 255, 0.15);
  border-color: #00f3ff;
  color: #00f3ff;
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

#otdr-results-table th {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.95);
  padding: 12px 14px;
  border-bottom: 2px solid #334155;
  white-space: nowrap;
}

#otdr-results-table td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(51, 65, 85, 0.45);
  font-size: 0.85rem;
}

#otdr-results-table tbody tr:hover {
  background: rgba(30, 41, 59, 0.5) !important;
}

.otdr-excess-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono), monospace;
  font-size: 0.76rem;
  font-weight: 700;
}

.otdr-excess-optimal {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #34d399;
}

.otdr-excess-pressure {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #fbbf24;
}

.otdr-excess-stress {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid #ef4444;
  color: #f87171;
}

.otdr-excess-cut {
  background: rgba(220, 38, 38, 0.25);
  border: 1px solid #dc2626;
  color: #ff6b6b;
  font-weight: 800;
}

/* Topology Schematic Card Nodes */
.otdr-topo-node {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid #334155;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 170px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.otdr-topo-node:hover {
  border-color: #00f3ff;
  box-shadow: 0 4px 16px rgba(0, 243, 255, 0.2);
  transform: translateY(-2px);
}

.otdr-topo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1.2rem;
  flex-shrink: 0;
  padding: 0 4px;
}

/* =======================================================
   DIGITAL OTDR CHAMPAGNE #F7E7CE THEME & INTERACTIVE ZOOM
   ======================================================= */
.otdr-waveform-card {
  background: #F7E7CE !important;
  border: 1.5px solid #dccbb2 !important;
  color: #2b2118 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border-radius: 12px;
}

.otdr-waveform-card h3 {
  color: #1a140f !important;
}

.otdr-waveform-card p {
  color: #5c4e43 !important;
}

.otdr-waveform-card .otdr-legend-item {
  color: #3b3026 !important;
  font-weight: 700 !important;
}

.otdr-waveform-card .otdr-zoom-toolbar {
  background: rgba(235, 217, 190, 0.92) !important;
  border: 1px solid #cfbe9f !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.otdr-waveform-card .otdr-zoom-btn {
  background: #ffffff !important;
  border: 1px solid #cfbe9f !important;
  color: #33261c !important;
  font-weight: 700 !important;
  transition: all 0.18s ease;
}

.otdr-waveform-card .otdr-zoom-btn:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.otdr-waveform-card .otdr-zoom-btn:active {
  transform: translateY(0);
}

.otdr-waveform-card #otdr-zoom-badge {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

.otdr-waveform-card #otdr-btn-focus-cut {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid #dc2626 !important;
  color: #b91c1c !important;
}

.otdr-waveform-card #otdr-btn-focus-cut:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.otdr-waveform-card #otdr-canvas-wrapper {
  background: #F7E7CE !important;
  border: 1.5px solid #dccbb2 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

#otdr-canvas-wrapper.is-fullscreen {
  position: fixed !important;
  top: 15px !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 15px !important;
  width: calc(100vw - 30px) !important;
  height: calc(100vh - 30px) !important;
  z-index: 999999 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 0 9999px rgba(10, 15, 30, 0.88) !important;
  border-radius: 12px !important;
  border: 2px solid #0284c7 !important;
}

#otdr-canvas-wrapper.is-fullscreen #otdr-btn-exit-fullscreen {
  display: inline-flex !important;
}

#otdr-canvas-wrapper.is-fullscreen .otdr-fullscreen-toolbar {
  display: inline-flex !important;
}

#otdr-btn-exit-fullscreen {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;
  display: none;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease !important;
  z-index: 1000000 !important;
}

#otdr-btn-exit-fullscreen:hover {
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.6) !important;
}

#otdr-btn-exit-fullscreen:active {
  transform: translateY(0);
}

.otdr-fullscreen-toolbar {
  display: none;
  align-items: center;
  gap: 4px;
  background: rgba(235, 217, 190, 0.95);
  border: 1px solid #cfbe9f;
  padding: 3px 6px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000000;
}

.otdr-hud-pill {
  position: absolute;
  top: 10px;
  left: 65px;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #0284c7 !important;
  color: #0369a1 !important;
  font-family: var(--font-mono), monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.otdr-hud-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #dccbb2 !important;
  color: #5c4e43 !important;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* =======================================================
   DOWNDETECTOR PAKISTAN OUTAGE RADAR STYLES
   ======================================================= */
.dd-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.dd-service-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s ease-in-out;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dd-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  border-color: #cbd5e1;
}

.dd-service-card.degraded {
  border-color: #f59e0b;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.18);
}

.dd-service-card.outage {
  border-color: #ef4444;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.22);
}

.dd-service-card.operational {
  border-color: #e2e8f0;
}

.dd-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dd-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.1px;
}

.dd-service-status-badge {
  font-size: 0.68rem;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dd-service-status-badge.operational {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.dd-service-status-badge.degraded {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.dd-service-status-badge.outage {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.dd-card-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 6px 0;
  position: relative;
}

.dd-cdn-tag {
  position: absolute;
  top: 0px;
  right: 0px;
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  user-select: none;
  z-index: 2;
}

.dd-provider-logo-img {
  max-width: 175px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
  display: block;
}

.dd-service-card:hover .dd-provider-logo-img {
  transform: scale(1.05);
}

.dd-card-sparkline-wrap {
  width: 100%;
  height: 48px;
  position: relative;
  overflow: hidden;
  margin-top: 2px;
}

.dd-sparkline-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dd-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  margin-top: 2px;
}

.dd-card-message {
  font-size: 0.73rem;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  max-width: calc(100% - 34px);
}

.dd-status-quick-select {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.dd-status-quick-select:hover, .dd-status-quick-select:focus {
  border-color: #0284c7;
}

.dd-service-link {
  color: #0284c7;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  transition: all 0.15s ease;
}

.dd-service-link:hover {
  background: #e0f2fe;
  color: #0369a1;
}

.dd-status-quick-select:hover, .dd-status-quick-select:focus {
  border-color: #38bdf8;
}

.dd-service-link {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: all 0.15s ease;
}

.dd-service-link:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #ffffff;
}

#dash-dd-status-chip:hover {
  background: rgba(0, 242, 254, 0.1) !important;
  border-color: rgba(0, 242, 254, 0.5) !important;
}

/* ====================================================
   LAPTOP & COMPACT DESKTOP RESPONSIVE ENGINE (1025px - 1600px)
   Provides fluid graceful degradation when scale is 100%
   ==================================================== */
@media (min-width: 1025px) and (max-width: 1600px) {
  /* Slightly more compact sidebar on laptop screens when at 100% scale */
  body:not(.crm-auto-scaled) .sidebar {
    width: 235px;
  }
  body:not(.crm-auto-scaled) .main-content {
    margin-left: 235px;
    max-width: calc(100% - 235px);
    width: calc(100% - 235px);
    padding: 16px 20px;
  }
  body:not(.crm-auto-scaled) .header-search {
    width: 280px;
  }
  body:not(.crm-auto-scaled) .stat-card {
    padding: 12px 14px;
  }
  body:not(.crm-auto-scaled) .stat-gauge-wrap,
  body:not(.crm-auto-scaled) .stat-gauge {
    width: 44px;
    height: 44px;
  }
  body:not(.crm-auto-scaled) .stat-sparkline {
    width: 48px;
    height: 26px;
  }
  body:not(.crm-auto-scaled) #subscriber-stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  body:not(.crm-auto-scaled) #brand-name-card {
    grid-column: 2 / -1 !important;
  }
}

/* Global scroll containment for scaled desktop viewports */
body.crm-auto-scaled {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body.crm-auto-scaled .app-container {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body.crm-auto-scaled .sidebar {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* ==========================================================================
   COMPLAINT MODAL REGISTERED SUBSCRIBER SEARCHABLE SELECT
   ========================================================================== */
.complaint-sub-search-box {
  position: relative;
  width: 100%;
}

#ticket-subscriber-search {
  width: 100%;
  padding: 10px 38px 10px 38px !important;
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}

#ticket-subscriber-search:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
  background: #0b1329 !important;
}

#ticket-subscriber-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #0b132b;
  border: 1.5px solid #38bdf8;
  border-radius: 8px;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.25);
  z-index: 100000;
  padding: 4px 0;
}

#ticket-subscriber-results::-webkit-scrollbar {
  width: 6px;
}
#ticket-subscriber-results::-webkit-scrollbar-track {
  background: #0b132b;
  border-radius: 4px;
}
#ticket-subscriber-results::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
#ticket-subscriber-results::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

.complaint-sub-item {
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.complaint-sub-item:last-child {
  border-bottom: none;
}

.complaint-sub-item:hover,
.complaint-sub-item.active-item {
  background: rgba(14, 165, 233, 0.2) !important;
}

.complaint-sub-highlight {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

.complaint-sub-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.complaint-sub-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.complaint-sub-badge.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.complaint-sub-badge.status-expired {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.complaint-sub-badge.status-suspended {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.complaint-sub-badge.status-other {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Clickable KPI Filter Cards in Complaints Desk */
.kpi-card-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
  position: relative;
  user-select: none;
}
.kpi-card-clickable:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}
.kpi-card-clickable.active-kpi-filter {
  outline: 2px solid #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
}
.kpi-card-clickable#kpi-card-tickets-open.active-kpi-filter {
  outline-color: #ef4444;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}
.kpi-card-clickable#kpi-card-tickets-progress.active-kpi-filter {
  outline-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
.kpi-card-clickable#kpi-card-tickets-overdue.active-kpi-filter {
  outline-color: #dc2626;
  box-shadow: 0 0 22px rgba(220, 38, 38, 0.55);
}
.kpi-card-clickable#kpi-card-tickets-resolved.active-kpi-filter {
  outline-color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

/* Filter Pill Buttons */
.btn-filter-ticket {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-filter-ticket:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.btn-filter-ticket.active {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.btn-filter-ticket#filter-ticket-resolved.active {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
.btn-filter-ticket#filter-ticket-overdue.active {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
.btn-filter-ticket#filter-ticket-progress.active {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}
.btn-filter-ticket#filter-ticket-open.active {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* ====================================================================
   SETTINGS OPTIONS BUTTONS & FULL-PAGE WORKSPACE
   ==================================================================== */
.settings-options-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 18px;
  margin-bottom: 30px;
  animation: fadeInSettingPane 0.25s ease-out;
}

.settings-option-btn-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(20, 30, 55, 0.94) 100%);
  border: 1.5px solid rgba(0, 243, 255, 0.22);
  border-radius: 14px;
  padding: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.settings-option-btn-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.settings-option-btn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 243, 255, 0.6);
  box-shadow: 0 12px 30px rgba(0, 243, 255, 0.18), 0 0 15px rgba(0, 243, 255, 0.12);
  background: linear-gradient(135deg, rgba(20, 35, 65, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
}

.settings-option-btn-card:hover::before {
  opacity: 1;
}

.settings-option-btn-card .opt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-option-btn-card .opt-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.25s ease;
}

.settings-option-btn-card:hover .opt-icon-wrap {
  transform: scale(1.08);
}

.settings-option-btn-card .opt-badge {
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.settings-option-btn-card .opt-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 1.1rem;
  font-weight: 750;
  color: #f8fafc;
  margin-top: 4px;
  line-height: 1.3;
}

.settings-option-btn-card .opt-desc {
  font-size: 0.83rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.45;
  margin-top: 4px;
  flex-grow: 1;
}

.settings-option-btn-card .opt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-cyan, #00f3ff);
}

.settings-option-btn-card .opt-footer i {
  transition: transform 0.2s ease;
}

.settings-option-btn-card:hover .opt-footer i {
  transform: translateX(4px);
}

/* SETTINGS FULL-PAGE WORKSPACE & OPTION SWITCHER */
.settings-fullpage-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 18px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(0, 243, 255, 0.25);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.settings-pill-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  max-width: 100%;
}

.settings-pill-nav::-webkit-scrollbar {
  height: 4px;
}
.settings-pill-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 243, 255, 0.3);
  border-radius: 4px;
}

.settings-nav-btn {
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.settings-nav-btn:hover {
  background: rgba(0, 243, 255, 0.12);
  border-color: rgba(0, 243, 255, 0.4);
  color: #00f3ff;
}

.settings-nav-btn.active {
  background: rgba(0, 243, 255, 0.2) !important;
  border-color: #00f3ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 243, 255, 0.35);
}

.settings-fullpage-pane {
  display: none;
  animation: fadeInSettingPane 0.25s ease-out;
  width: 100%;
}

@keyframes fadeInSettingPane {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-fullpage-pane > .card-3d {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 24px auto !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(0, 243, 255, 0.2) !important;
  border-radius: 14px !important;
}

@media (max-width: 768px) {
  .settings-options-hub {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .settings-fullpage-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-pill-nav {
    width: 100%;
    padding-bottom: 8px;
  }
}

/* --- Recharge Renewal Celebration Animation --- */
@keyframes renewalPopIn {
  0% {
    opacity: 0;
    transform: scale(0.65) translateY(18px);
  }
  65% {
    opacity: 1;
    transform: scale(1.05) translateY(-4px);
  }
  85% {
    transform: scale(0.98) translateY(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes popperWiggle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-10deg) scale(1.08);
  }
  40% {
    transform: rotate(10deg) scale(1.12);
  }
  60% {
    transform: rotate(-8deg) scale(1.06);
  }
  80% {
    transform: rotate(6deg) scale(1.02);
  }
}

@keyframes sparkleDrift {
  0% {
    transform: translateY(0px) rotate(0deg) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-12px) rotate(25deg) scale(1.25);
    opacity: 1;
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(0.8);
    opacity: 0.6;
  }
}

@keyframes textGlowPulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.5), 0 0 20px rgba(16, 185, 129, 0.3);
  }
  50% {
    text-shadow: 0 0 25px rgba(52, 211, 153, 0.95), 0 0 35px rgba(16, 185, 129, 0.7);
  }
}

.renewal-success-box {
  animation: renewalPopIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.renewal-popper-img {
  animation: popperWiggle 1.6s infinite ease-in-out;
  transition: transform 0.3s ease;
}

.renewal-title-glow {
  animation: textGlowPulse 1.8s infinite ease-in-out;
}

/* ================================================================ */
/* OOPS NOT ALLOWED — CONFUSED ANIMATED EMOJI MODAL                 */
/* ================================================================ */
@keyframes oopsModalPopIn {
  0% {
    opacity: 0;
    transform: scale(0.65) translateY(25px);
  }
  55% {
    opacity: 1;
    transform: scale(1.04) translateY(-4px) rotate(-1.5deg);
  }
  75% {
    transform: scale(0.98) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

@keyframes oopsHeadTilt {
  0%, 100% {
    transform: rotate(-8deg) translateY(0px);
  }
  25% {
    transform: rotate(10deg) translateY(-4px);
  }
  50% {
    transform: rotate(-10deg) translateY(2px);
  }
  75% {
    transform: rotate(8deg) translateY(-3px);
  }
}

@keyframes oopsBrowRaise {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes oopsPupilLook {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(-2.5px, -1.5px);
  }
  65% {
    transform: translate(2.5px, -1px);
  }
}

@keyframes oopsSweatDrop {
  0%, 100% {
    transform: translateY(0px) scale(0.95);
    opacity: 0.85;
  }
  50% {
    transform: translateY(5px) scale(1.08);
    opacity: 1;
  }
}

@keyframes oopsQuestionFloat {
  0%, 100% {
    transform: translateY(0px) rotate(-12deg) scale(0.9);
    opacity: 0.75;
  }
  50% {
    transform: translateY(-10px) rotate(14deg) scale(1.2);
    opacity: 1;
  }
}

.oops-modal-box {
  animation: oopsModalPopIn 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.oops-confused-svg {
  animation: oopsHeadTilt 2.2s infinite ease-in-out;
  transform-origin: center center;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

.oops-brow-left {
  animation: oopsBrowRaise 1.2s infinite ease-in-out;
}

.oops-pupil {
  animation: oopsPupilLook 1.8s infinite ease-in-out;
}

.oops-sweat-drop {
  animation: oopsSweatDrop 1.4s infinite ease-in-out;
}

.oops-qmark {
  position: absolute;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
  animation: oopsQuestionFloat 1.6s infinite ease-in-out;
}

.oops-q1 {
  top: 2px;
  left: 6px;
  font-size: 1.45rem;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
  animation-delay: 0s;
}

.oops-q2 {
  top: -6px;
  right: 6px;
  font-size: 1.25rem;
  animation-delay: 0.45s;
}

.oops-q3 {
  bottom: 8px;
  left: 2px;
  font-size: 1.15rem;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  animation-delay: 0.9s;
}

#modal-oops-not-allowed.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 999999 !important;
}

#modal-oops-not-allowed.active * {
  pointer-events: auto !important;
}

/* ============================================================================
   PROFESSIONAL FULL-PAGE RESELLER ACCOUNT FORM & PERMISSIONS MATRIX (#subdealer-create-view)
   ============================================================================ */
#subdealer-create-view .form-group label {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #cbd5e1 !important;
  margin-bottom: 6px !important;
}

#subdealer-create-view .form-group input,
#subdealer-create-view .form-group select {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: rgba(6, 17, 33, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 10px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

#subdealer-create-view .form-group input:focus,
#subdealer-create-view .form-group select:focus {
  border-color: #00f2fe !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.28) !important;
  background: rgba(6, 17, 33, 0.98) !important;
}

.reseller-section-card {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.reseller-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #38bdf8 !important;
  padding: 6px 10px !important;
  margin-bottom: 12px !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border-left: 3px solid #00f2fe !important;
  border-radius: 6px !important;
}

.reseller-perm-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 10px !important;
}

.reseller-perm-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  text-transform: none !important;
}

.reseller-perm-row:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px);
}

.reseller-perm-row .perm-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.reseller-perm-row .perm-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  flex-shrink: 0 !important;
}

.reseller-perm-row .perm-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.reseller-perm-row .perm-title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

.reseller-perm-row .perm-desc {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

/* Sleek iOS / NOC Toggle Switch inside Reseller Permission Rows */
.reseller-perm-row input[type="checkbox"].reseller-toggle-cb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 42px !important;
  height: 23px !important;
  min-width: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #334155 !important;
  border: 1.5px solid #475569 !important;
  border-radius: 999px !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.22s ease !important;
  flex-shrink: 0 !important;
}

.reseller-perm-row input[type="checkbox"].reseller-toggle-cb::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease !important;
}

.reseller-perm-row input[type="checkbox"].reseller-toggle-cb:checked {
  background: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.35) !important;
}

.reseller-perm-row input[type="checkbox"].reseller-toggle-cb:checked::after {
  transform: translateX(19px) !important;
  background: #ffffff !important;
}

.reseller-scope-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  margin-bottom: 4px !important;
  text-transform: none !important;
}

.reseller-scope-item input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  padding: 0 !important;
  margin: 0 !important;
  accent-color: #00f2fe !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

@media (max-width: 860px) {
  .reseller-top-3col-grid,
  .reseller-scope-3col-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   ULTRA-OPTIMIZED LIGHT MODE DESIGN SYSTEM (High-Contrast, Vivid Buttons, 100% Crisp)
   ============================================================================ */

/* Theme Toggle Button in Header */
.btn-theme-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f1f5f9;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  margin-right: 8px;
}

.btn-theme-mode-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.btn-theme-mode-pill:active {
  transform: translateY(1px);
}

body.light-theme .btn-theme-mode-pill {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.light-theme .btn-theme-mode-pill:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.09);
}

/* 1. Master Light Theme Layout & Background (Clean Minimalist WorkUp Style) */
body.light-theme {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body.light-theme .app-container {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
}

body.light-theme .main-content {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
}

/* 2. Sidebar Ultra-Crisp Styling (Vibrant 3D Category Headers with Pure White Text) */
body.light-theme .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .sidebar .brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 6px 8px 6px !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  margin-bottom: 10px !important;
  background: #ffffff !important;
}

body.light-theme #crm-sidebar-logo {
  mix-blend-mode: normal !important;
  filter: contrast(108%) brightness(102%) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) !important;
  image-rendering: -webkit-optimize-contrast !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  width: 120px !important;
  max-width: 85% !important;
  height: auto !important;
  max-height: 92px !important;
  object-fit: contain !important;
  margin: 0 auto 4px auto !important;
  pointer-events: auto !important;
}

body.light-theme #crm-sidebar-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 auto 4px auto !important;
  padding: 4px 8px !important;
  background: transparent !important;
}

body.light-theme #crm-login-logo,
body.light-theme .opticore-logo-container img {
  mix-blend-mode: normal !important;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  max-height: 100px !important;
  max-width: 260px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

#crm-subscriber-logo,
body.light-theme #crm-subscriber-logo {
  mix-blend-mode: normal !important;
  filter: contrast(112%) brightness(102%) !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  max-height: 48px !important;
  max-width: 170px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Hide icon if logo image is active in sidebar */
#crm-sidebar-logo-container:has(img[src]:not([src=""])) #crm-sidebar-icon,
#crm-sidebar-logo[src]:not([src=""]) ~ #crm-sidebar-icon,
.brand-has-logo #crm-sidebar-icon,
body.light-theme #crm-sidebar-logo-container:has(img[src]:not([src=""])) #crm-sidebar-icon,
body.light-theme #crm-sidebar-logo[src]:not([src=""]) ~ #crm-sidebar-icon,
body.light-theme #crm-sidebar-logo-container:has(#crm-sidebar-logo[src]:not([src=""])) #crm-sidebar-icon,
body.light-theme .brand-has-logo #crm-sidebar-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.light-theme .brand-icon,
body.light-theme #crm-sidebar-icon {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  filter: drop-shadow(0 2px 5px rgba(37, 99, 235, 0.25)) !important;
  font-size: 2.8rem !important;
  margin-bottom: 8px !important;
}

body.light-theme .brand-details {
  margin-top: 8px !important;
  padding-top: 0px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
}

body.light-theme .sidebar .brand-name,
body.light-theme .sidebar .brand-name span {
  color: #000000 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  font-size: 1.15rem !important;
  margin-top: 0px !important;
  line-height: 1.25 !important;
}

body.light-theme .sidebar .brand-sub {
  color: #475569 !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  font-size: 0.72rem !important;
  margin-top: 4px !important;
}

/* Hide Sidebar Color Palette and Title */
.sidebar-theme-title,
.sidebar-theme-dots,
body.light-theme .sidebar-theme-title,
body.light-theme .sidebar-theme-dots {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Category Headers: Simple, Quiet, Minimalist SaaS Accordion */
body.light-theme .sidebar .category-header,
body.light-theme .menu-category .category-header,
body.light-theme [id^="subdealer-category"] .category-header,
body.light-theme #subdealer-category-network-control .category-header,
body.light-theme #subdealer-category-subscribers .category-header {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  margin-bottom: 4px !important;
  padding: 8px 12px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  -webkit-font-smoothing: antialiased !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.light-theme .sidebar .category-header span,
body.light-theme .menu-category .category-header span,
body.light-theme [id^="subdealer-category"] .category-header span {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  letter-spacing: 0.08em !important;
}

body.light-theme .sidebar .category-header i,
body.light-theme .menu-category .category-header i,
body.light-theme [id^="subdealer-category"] .category-header i {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  transition: transform 0.2s ease, color 0.15s ease !important;
}

/* Category Header Hover */
body.light-theme .menu-category .category-header:hover,
body.light-theme [id^="subdealer-category"] .category-header:hover {
  background: #f8fafc !important;
  color: #475569 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

body.light-theme .menu-category .category-header:hover span,
body.light-theme [id^="subdealer-category"] .category-header:hover span {
  color: #475569 !important;
}

body.light-theme .menu-category .category-header:hover i,
body.light-theme [id^="subdealer-category"] .category-header:hover i {
  color: #4f46e5 !important;
}

/* Open Accordion Category Header */
body.light-theme .menu-category.open .category-header,
body.light-theme [id^="subdealer-category"].open .category-header {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.light-theme .menu-category.open .category-header i,
body.light-theme [id^="subdealer-category"].open .category-header i {
  transform: rotate(180deg) !important;
  color: #0284c7 !important;
}

/* Accordion Sub-Links Container (Clean Card Wrapper) */
body.light-theme .sidebar .category-links {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid #0ea5e9 !important;
  margin: 3px 0 8px 4px !important;
  border-radius: 8px !important;
  padding: 4px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* Individual Functions / Sub-Item Buttons inside Categories */
body.light-theme .sidebar .category-links .nav-item,
body.light-theme .menu-category .category-links .nav-item,
body.light-theme [id^="subdealer-category"] .category-links .nav-item {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 8px 10px !important;
  margin: 2px 0 !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.light-theme .sidebar .category-links .nav-item span,
body.light-theme .menu-category .category-links .nav-item span {
  color: #1e293b !important;
  font-weight: 650 !important;
  font-size: 0.8rem !important;
  text-shadow: none !important;
}

/* Distinct Vibrant RGB Icons Inside Functions */
body.light-theme .sidebar .category-links .nav-item i,
body.light-theme .menu-category .category-links .nav-item i {
  font-size: 0.85rem !important;
  min-width: 16px !important;
  text-align: center !important;
  transition: transform 0.15s ease !important;
}

/* Targeted Icon Colors for Functions */
body.light-theme .nav-item[data-target="panel-subscribers"] i { color: #2563eb !important; }
body.light-theme .nav-item[data-target="panel-unpaid-customers"] i { color: #dc2626 !important; }
body.light-theme .nav-item[data-target="panel-connection-requests"] i { color: #ea580c !important; }
body.light-theme .nav-item[data-target="panel-new-connection"] i { color: #7c3aed !important; }
body.light-theme .nav-item[data-target="panel-bulk-editor"] i { color: #0284c7 !important; }
body.light-theme .nav-item[data-target="panel-import-export"] i { color: #0d9488 !important; }
body.light-theme .nav-item[data-target="panel-online-users"] i { color: #16a34a !important; }
body.light-theme .nav-item[data-target="panel-lifecycle"] i { color: #d97706 !important; }

body.light-theme .nav-item[data-target="panel-reminders"] i { color: #ea580c !important; }
body.light-theme .nav-item[data-target="panel-live-support"] i { color: #2563eb !important; }
body.light-theme .nav-item[data-target="panel-send-alert"] i { color: #dc2626 !important; }
body.light-theme .nav-item[data-target="panel-bulk-campaign"] i { color: #0284c7 !important; }
body.light-theme .nav-item[data-target="panel-whatsapp"] i,
body.light-theme .nav-item[data-target="panel-subdealer-whatsapp"] i { color: #16a34a !important; }

body.light-theme .nav-item[data-target="panel-billing"] i { color: #0d9488 !important; }
body.light-theme .nav-item[data-target="panel-payment-requests"] i { color: #0284c7 !important; }
body.light-theme .nav-item[data-target="panel-expenses"] i,
body.light-theme .nav-item[data-target="panel-ledger"] i { color: #d97706 !important; }

body.light-theme .nav-item[data-target="panel-traffic-logs"] i { color: #2563eb !important; }
body.light-theme .nav-item[data-target="panel-network"] i { color: #475569 !important; }
body.light-theme .nav-item[data-target="panel-olts"] i { color: #ea580c !important; }
body.light-theme .nav-item[data-target="panel-onu-opm"] i { color: #16a34a !important; }
body.light-theme .nav-item[data-target="panel-otdr"] i { color: #0284c7 !important; }
body.light-theme .nav-item[data-target="panel-internet-profiles"] i { color: #7c3aed !important; }
body.light-theme .nav-item[data-target="panel-zones"] i { color: #0d9488 !important; }
body.light-theme .nav-item[data-target="panel-ip-map"] i { color: #6366f1 !important; }
body.light-theme .nav-item[data-target="panel-telegram-proxy"] i { color: #0284c7 !important; }

body.light-theme .nav-item[data-target="panel-inventory"] i { color: #d97706 !important; }
body.light-theme .nav-item[data-target="panel-fibermap"] i { color: #16a34a !important; }
body.light-theme .nav-item[data-target="panel-towers"] i { color: #0284c7 !important; }

body.light-theme .nav-item[data-target="panel-admin-management"] i { color: #7c3aed !important; }
body.light-theme .nav-item[data-target="panel-subdealers"] i { color: #2563eb !important; }
body.light-theme .nav-item[data-target="panel-staff"] i { color: #0d9488 !important; }
body.light-theme .nav-item[data-target="panel-tickets"] i { color: #ea580c !important; }
body.light-theme .nav-item[data-target="panel-settings"] i { color: #475569 !important; }
body.light-theme .nav-item[data-target="panel-audit-logs"] i { color: #2563eb !important; }
body.light-theme .nav-item[data-target="panel-backup-database"] i { color: #0284c7 !important; }

/* Function Item Hover: Smooth Highlight with Blue Edge */
body.light-theme .sidebar .category-links .nav-item:hover,
body.light-theme .menu-category .category-links .nav-item:hover,
body.light-theme [id^="subdealer-category"] .category-links .nav-item:hover {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.1) !important;
  transform: translateX(3px) !important;
  filter: none !important;
}

body.light-theme .sidebar .category-links .nav-item:hover span,
body.light-theme .menu-category .category-links .nav-item:hover span {
  color: #0284c7 !important;
}

body.light-theme .sidebar .category-links .nav-item:hover i {
  transform: scale(1.1) !important;
}

/* Function Item Active: Highlighted Solid Cyan/Royal Card */
body.light-theme .sidebar .category-links .nav-item.active,
body.light-theme .menu-category .category-links .nav-item.active,
body.light-theme [id^="subdealer-category"] .category-links .nav-item.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.28) !important;
  transform: none !important;
}

body.light-theme .sidebar .category-links .nav-item.active span,
body.light-theme .sidebar .category-links .nav-item.active i {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Function Badges (Unpaid count, requests) */
body.light-theme #nav-unpaid-count-badge {
  background: #dc2626 !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  border: none !important;
  font-size: 0.68rem !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25) !important;
}

body.light-theme #nav-connection-requests-badge {
  background: #ea580c !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  border: none !important;
  font-size: 0.68rem !important;
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25) !important;
}

/* Top-Level NOC Dashboard Button: Modern Seamless Indigo Highlight */
body.light-theme .sidebar .nav-item[data-target="panel-dashboard"] {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.08) !important;
  margin-bottom: 12px !important;
  padding: 10px 14px !important;
  transform: none !important;
}

body.light-theme .sidebar .nav-item[data-target="panel-dashboard"]:hover {
  background: #e0e7ff !important;
  border-color: #c7d2fe !important;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.12) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .sidebar .nav-item[data-target="panel-dashboard"] span,
body.light-theme .sidebar .nav-item[data-target="panel-dashboard"] i {
  color: #4338ca !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Subdealer Standalone Nav Items */
body.light-theme #subdealer-nav-menu .nav-item:not(.active) {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  margin: 3px 0 !important;
  padding: 8px 12px !important;
}

body.light-theme #subdealer-nav-menu .nav-item:not(.active):hover {
  background: #eff6ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
  transform: translateX(2px) !important;
}

body.light-theme #subdealer-nav-menu .nav-item.active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border: 1px solid #4338ca !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

body.light-theme #subdealer-nav-menu .nav-item.active span,
body.light-theme #subdealer-nav-menu .nav-item.active i {
  color: #ffffff !important;
}

/* Bottom Sidebar Controls Highlighting */
body.light-theme .sidebar-footer {
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding-top: 14px !important;
}

body.light-theme .sidebar-footer button.btn-danger,
body.light-theme .sidebar button[onclick="handleLogout()"] {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #ffe4e6 !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.1) !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease !important;
}

body.light-theme .sidebar-footer button.btn-danger:hover,
body.light-theme .sidebar button[onclick="handleLogout()"]:hover {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.18) !important;
}

body.light-theme .sidebar-theme-switch-row {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border-radius: 8px !important;
}

body.light-theme .sidebar-color-btn {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .connection-mode .connection-text {
  color: #475569 !important;
}

/* 3. Top Header, Search, Clock, Weather & Telemetry in Light Mode */
body.light-theme .top-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
  border-top: none !important;
}

body.light-theme .search-bar,
body.light-theme .search-input-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  border-radius: 8px !important;
}

body.light-theme .search-bar input,
body.light-theme .search-input-wrapper input {
  background: transparent !important;
  border: none !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

body.light-theme .search-bar input::placeholder,
body.light-theme .search-input-wrapper input::placeholder {
  color: #64748b !important;
}

body.light-theme .search-input-wrapper i {
  color: #475569 !important;
}

body.light-theme .noc-telemetry {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .telemetry-item .value {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.light-theme .telemetry-item .label {
  color: #475569 !important;
  font-weight: 800 !important;
}

body.light-theme .premium-clock-3d,
body.light-theme .premium-weather-3d {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .clock-digits {
  color: #0f172a !important;
  text-shadow: none !important;
}

body.light-theme .clock-ampm {
  color: #2563eb !important;
}

body.light-theme .clock-day {
  color: #2563eb !important;
  font-weight: 800 !important;
}

body.light-theme .clock-date {
  color: #64748b !important;
}

body.light-theme .clock-divider {
  background: #e2e8f0 !important;
}

body.light-theme .weather-temp {
  color: #0f172a !important;
}

body.light-theme .weather-desc {
  color: #64748b !important;
}

body.light-theme .btn-res-pill {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .btn-res-pill:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

body.light-theme .res-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
}

body.light-theme .res-menu-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .res-menu-header div {
  color: #0f172a !important;
}

body.light-theme .res-menu-subtitle {
  color: #64748b !important;
}

body.light-theme .res-menu-item {
  color: #334155 !important;
}

body.light-theme .res-menu-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

body.light-theme .res-menu-item.active {
  background: #eff6ff !important;
  color: #2563eb !important;
}

body.light-theme .res-item-name {
  color: #0f172a !important;
}

body.light-theme .res-item-desc {
  color: #64748b !important;
}

/* 4. DASHBOARD SECTION TITLES & HEADER CONTROLS IN LIGHT MODE */
body.light-theme .dashboard-section-title {
  color: #0f172a !important;
  text-shadow: none !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
}

body.light-theme .dashboard-section-title i {
  color: #2563eb !important;
  text-shadow: none !important;
}

body.light-theme .panel-header h2 {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Dashboard dealer/admin filter dropdown */
body.light-theme #dash-dealer-filter {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #dash-dealer-filter option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Revenue & Quick Controls Toggle Button */
body.light-theme #btn-toggle-revenue-controls {
  background: #f0f9ff !important;
  border: 1.5px solid #7dd3fc !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

body.light-theme #btn-toggle-revenue-controls:hover {
  background: #e0f2fe !important;
}

/* 5. NOC LIVE ALERTS MARQUEE BAR IN LIGHT MODE */
body.light-theme .noc-live-alert-bar {
  background: #ffffff !important;
  border: 1.5px solid #fcd34d !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12) !important;
}

body.light-theme .alert-ticker-container {
  background: #fffbeb !important;
}

body.light-theme .ticker-text {
  color: #78350f !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.light-theme .ticker-time {
  color: #b45309 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-broadcast-create {
  background: #ffffff !important;
  border: 1.5px solid #fcd34d !important;
  color: #b45309 !important;
  font-weight: 800 !important;
}

body.light-theme .btn-broadcast-create:hover {
  background: #fef3c7 !important;
  color: #92400e !important;
}

/* 6. STAT CARDS COMPLETE HIGH-CONTRAST OVERHAUL (Zero Washout & Highlighted) */
body.light-theme .stat-card,
body.light-theme .stat-card.clickable-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border-radius: 14px !important;
  transform: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

body.light-theme .stat-card:hover,
body.light-theme .stat-card.clickable-card:hover {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-3px) !important;
  border-color: #94a3b8 !important;
}

/* Bold Top Accent Stripes on Stat Cards - Solid 5px Vibrant RGB Lines */
body.light-theme .stat-card.card-total,
body.light-theme .card-total {
  border-top: 5px solid #0284c7 !important;
}

body.light-theme .stat-card.card-active,
body.light-theme .card-active {
  border-top: 5px solid #16a34a !important;
}

body.light-theme .stat-card.card-expired,
body.light-theme .card-expired {
  border-top: 5px solid #dc2626 !important;
}

body.light-theme .stat-card.card-online,
body.light-theme .card-online {
  border-top: 5px solid #2563eb !important;
}

body.light-theme .stat-card.card-offline,
body.light-theme .card-offline {
  border-top: 5px solid #475569 !important;
}

body.light-theme .stat-card.card-exp3,
body.light-theme .card-exp3 {
  border-top: 5px solid #ea580c !important;
}

body.light-theme .stat-card.card-exp7,
body.light-theme .card-exp7 {
  border-top: 5px solid #d97706 !important;
}

body.light-theme .stat-card.card-disabled,
body.light-theme .card-disabled {
  border-top: 5px solid #9333ea !important;
}

body.light-theme .stat-card.card-unpaid,
body.light-theme .card-unpaid {
  border-top: 5px solid #e11d48 !important;
}

body.light-theme .stat-card.gradient-cyan {
  border-top: 5px solid #06b6d4 !important;
}

body.light-theme .stat-card.gradient-green {
  border-top: 5px solid #10b981 !important;
}

body.light-theme .stat-card.gradient-blue {
  border-top: 5px solid #3b82f6 !important;
}

body.light-theme .stat-card.gradient-purple {
  border-top: 5px solid #a855f7 !important;
}

/* Stat Gauge Container in Light Mode - Fresh, Punchy Circular Gauges */
body.light-theme .stat-gauge-wrap {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  border-width: 2.5px !important;
  border-style: solid !important;
}

body.light-theme .card-total .stat-gauge-wrap {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
}

body.light-theme .card-active .stat-gauge-wrap {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
}

body.light-theme .card-expired .stat-gauge-wrap {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
}

body.light-theme .card-online .stat-gauge-wrap {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}

body.light-theme .card-offline .stat-gauge-wrap {
  background: #f8fafc !important;
  border-color: #475569 !important;
}

body.light-theme .card-exp3 .stat-gauge-wrap {
  background: #fff7ed !important;
  border-color: #ea580c !important;
}

body.light-theme .card-exp7 .stat-gauge-wrap {
  background: #fffbeb !important;
  border-color: #d97706 !important;
}

body.light-theme .card-disabled .stat-gauge-wrap {
  background: #faf5ff !important;
  border-color: #9333ea !important;
}

body.light-theme .card-unpaid .stat-gauge-wrap {
  background: #fff1f2 !important;
  border-color: #e11d48 !important;
}

/* Gauge tracks */
body.light-theme .gauge-bg {
  stroke: #e2e8f0 !important;
  stroke-width: 4px !important;
}

/* Solid Vivid Gauge Ring Strokes */
body.light-theme .card-total .gauge-fill-total { stroke: #0284c7 !important; filter: none !important; }
body.light-theme .card-active .gauge-fill-active { stroke: #16a34a !important; filter: none !important; }
body.light-theme .card-expired .gauge-fill-expired { stroke: #dc2626 !important; filter: none !important; }
body.light-theme .card-online .gauge-fill-online { stroke: #2563eb !important; filter: none !important; }
body.light-theme .card-offline .gauge-fill-offline { stroke: #475569 !important; filter: none !important; }
body.light-theme .card-exp3 .gauge-fill-exp3 { stroke: #ea580c !important; filter: none !important; }
body.light-theme .card-exp7 .gauge-fill-exp7 { stroke: #d97706 !important; filter: none !important; }
body.light-theme .card-disabled .gauge-fill-disabled { stroke: #9333ea !important; filter: none !important; }
body.light-theme .card-unpaid .gauge-fill-unpaid { stroke: #e11d48 !important; filter: none !important; }

/* Gauge percentage in center */
body.light-theme .gauge-pct,
body.light-theme .card-total #gauge-pct-total,
body.light-theme .card-active #gauge-pct-active,
body.light-theme .card-expired #gauge-pct-expired,
body.light-theme .card-online #gauge-pct-online,
body.light-theme .card-offline #gauge-pct-offline,
body.light-theme .card-exp3 #gauge-pct-exp3,
body.light-theme .card-exp7 #gauge-pct-exp7,
body.light-theme .card-disabled #gauge-pct-disabled,
body.light-theme .card-unpaid #gauge-pct-unpaid {
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  font-size: 0.76rem !important;
}

/* Stat Labels */
body.light-theme .stat-label,
body.light-theme .stat-card .stat-label,
body.light-theme .card-total .stat-label,
body.light-theme .card-active .stat-label,
body.light-theme .card-expired .stat-label,
body.light-theme .card-online .stat-label,
body.light-theme .card-offline .stat-label,
body.light-theme .card-exp3 .stat-label,
body.light-theme .card-exp7 .stat-label,
body.light-theme .card-disabled .stat-label,
body.light-theme .card-unpaid .stat-label {
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 850 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

/* Big Highlighted Numbers */
body.light-theme .stat-card h3,
body.light-theme .stat-card h2,
body.light-theme .card-total h3,
body.light-theme .card-active h3,
body.light-theme .card-expired h3,
body.light-theme .card-online h3,
body.light-theme .card-offline h3,
body.light-theme .card-exp3 h3,
body.light-theme .card-exp7 h3,
body.light-theme .card-disabled h3,
body.light-theme .card-unpaid h3 {
  color: #000000 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  font-size: 2.15rem !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
}

/* Subtitle / Desc under number */
body.light-theme .stat-desc,
body.light-theme .stat-card .stat-desc,
body.light-theme .stat-card-inner .stat-desc,
body.light-theme .stats-grid .stat-desc,
body.light-theme .stat-details .stat-desc,
body.light-theme .stat-details span.stat-desc {
  color: #475569 !important;
  text-shadow: none !important;
  font-weight: 750 !important;
  font-size: 0.75rem !important;
}

body.light-theme .stat-desc i,
body.light-theme .stat-card .stat-desc i,
body.light-theme .stat-card-inner .stat-desc i,
body.light-theme .stats-grid .stat-desc i,
body.light-theme .stat-details .stat-desc i {
  color: #2563eb !important;
  text-shadow: none !important;
}

/* Brand Card in Stat Cards Grid */
body.light-theme #brand-name-card,
body.light-theme .stat-card.brand-name-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-top: 5px solid #0284c7 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .brand-name-text {
  color: #0284c7 !important;
  background: none !important;
  -webkit-text-fill-color: #0284c7 !important;
  filter: none !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
}

body.light-theme .brand-name-tagline {
  color: #334155 !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-shadow: none !important;
}

body.light-theme .brand-edit-btn {
  background: #0284c7 !important;
  border: 1px solid #0369a1 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

/* 7. DOWNDETECTOR OUTAGE RADAR SECTION IN LIGHT MODE */
body.light-theme #section-downdetector-pk {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

body.light-theme #section-downdetector-pk h3 {
  color: #000000 !important;
  font-weight: 900 !important;
}

body.light-theme #section-downdetector-pk p {
  color: #475569 !important;
  font-weight: 650 !important;
}

body.light-theme #dd-radar-badge {
  background: #16a34a !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  border: none !important;
  padding: 3px 10px !important;
}

body.light-theme #btn-refresh-dd {
  background: #0f172a !important;
  border: 1.5px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}

body.light-theme #btn-refresh-dd:hover {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
}

body.light-theme #section-downdetector-pk a.btn {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1.5px solid #0369a1 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}

body.light-theme #section-downdetector-pk a.btn:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
}

body.light-theme #dd-last-updated,
body.light-theme #dd-banner-counts {
  color: #475569 !important;
  font-weight: 750 !important;
}

body.light-theme #dd-national-banner {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
}

body.light-theme #dd-banner-title {
  color: #15803d !important;
  font-weight: 850 !important;
}

body.light-theme #dd-banner-desc {
  color: #166534 !important;
  font-weight: 700 !important;
}

body.light-theme .dd-service-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .dd-card-title {
  color: #000000 !important;
  font-weight: 850 !important;
}

/* 8. ALL DASHBOARD & GLOBAL BUTTONS - SOLID HIGHLIGHTED RGB */

/* Primary Button (Solid Royal Blue) */
body.light-theme .btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1.5px solid #1d4ed8 !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-primary:hover {
  background: #1d4ed8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45) !important;
}

/* Secondary Button (Crisp White Card with Slate Border) */
body.light-theme .btn-secondary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12) !important;
}

/* Success Button (Solid Vivid Emerald) */
body.light-theme .btn-success {
  background: #16a34a !important;
  color: #ffffff !important;
  border: 1.5px solid #15803d !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-success:hover {
  background: #15803d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.45) !important;
}

/* Danger Button (Solid Vivid Red) */
body.light-theme .btn-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1.5px solid #b91c1c !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-danger:hover {
  background: #b91c1c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45) !important;
}

/* Warning Button (Solid Amber Gold) */
body.light-theme .btn-warning {
  background: #d97706 !important;
  color: #ffffff !important;
  border: 1.5px solid #b45309 !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-warning:hover {
  background: #b45309 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45) !important;
}

/* Info Button (Solid Sky Blue) */
body.light-theme .btn-info {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1.5px solid #0369a1 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme .btn-info:hover {
  background: #0369a1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45) !important;
}

/* + Add New Connection Button */
body.light-theme .btn-3d.purple,
body.light-theme .panel-header .btn.purple,
body.light-theme button[onclick*="modal-add-subscriber"] {
  background: #7c3aed !important;
  color: #ffffff !important;
  border: 1.5px solid #6d28d9 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .btn-3d.purple:hover,
body.light-theme .panel-header .btn.purple:hover,
body.light-theme button[onclick*="modal-add-subscriber"]:hover {
  background: #6d28d9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45) !important;
}

/* New PPPoE Client Button */
body.light-theme .btn-3d.cyan,
body.light-theme .layout-sidebar .btn-3d.cyan,
body.light-theme button[onclick*="panel-new-connection"] {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1.5px solid #0369a1 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .btn-3d.cyan:hover,
body.light-theme .layout-sidebar .btn-3d.cyan:hover,
body.light-theme button[onclick*="panel-new-connection"]:hover {
  background: #0369a1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(2, 132, 199, 0.45) !important;
}

/* More Info / Toggle Controls Button */
body.light-theme #btn-toggle-revenue-controls {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1.5px solid #0369a1 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

body.light-theme #btn-toggle-revenue-controls:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
}

/* Dealer / Reseller Filter Dropdown */
body.light-theme #dash-dealer-filter {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #2563eb !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
}

/* Broadcast Edit Alert Button */
body.light-theme #btn-broadcast-create,
body.light-theme .alert-actions-wrap .btn-broadcast-create {
  background: #d97706 !important;
  color: #ffffff !important;
  border: 1.5px solid #b45309 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
  padding: 6px 14px !important;
}

body.light-theme #btn-broadcast-create:hover {
  background: #b45309 !important;
  transform: translateY(-1px) !important;
}

/* Interface Monitor Selectors */
body.light-theme #monitor-router-select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #0284c7 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
  border-radius: 8px !important;
}

body.light-theme #monitor-interface-select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #16a34a !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15) !important;
  border-radius: 8px !important;
}

body.light-theme #top-consumption-month-select {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #6366f1 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important;
  border-radius: 8px !important;
}

/* Header Top Action Buttons */
body.light-theme #search-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1.5px solid #1d4ed8 !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

body.light-theme #search-btn:hover {
  background: #1d4ed8 !important;
}

/* 5. ACTION BAR & 2D SUBSCRIBER BUTTONS (Solid RGB Colors & Crisp Contrast) */
body.light-theme .action-bar-2d {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 3px 6px !important;
  gap: 6px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), inset 0 1px 0 #ffffff !important;
}

body.light-theme .btn-2d-action {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2) !important;
  border-radius: 7px !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

body.light-theme .btn-2d-action i {
  color: #ffffff !important;
  font-size: 0.92rem !important;
}

/* Grace Period & Promise Button (Solid Vibrant Amber) */
body.light-theme .btn-2d-action.btn-grace,
body.light-theme .btn-2d-action[onclick*="openSetGraceModal"] {
  background: #d97706 !important;
  border: 1px solid #b45309 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-grace i,
body.light-theme .btn-2d-action[onclick*="openSetGraceModal"] i {
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-grace:hover,
body.light-theme .btn-2d-action[onclick*="openSetGraceModal"]:hover {
  background: #b45309 !important;
  transform: translateY(-2px) !important;
}

/* Clear Unpaid / Resume Service (Solid Emerald Green) */
body.light-theme .btn-2d-action.btn-resume,
body.light-theme .btn-2d-action[onclick*="clearSubscriberUnpaid"] {
  background: #10b981 !important;
  border: 1px solid #059669 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-resume:hover,
body.light-theme .btn-2d-action[onclick*="clearSubscriberUnpaid"]:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
}

/* View Profile (Solid RGB Sky Blue) */
body.light-theme .btn-2d-action.btn-view,
body.light-theme .btn-2d-action[data-target*="panel-subscriber-profile"] {
  background: #0284c7 !important;
  border: 1px solid #0369a1 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-view:hover,
body.light-theme .btn-2d-action[data-target*="panel-subscriber-profile"]:hover {
  background: #0369a1 !important;
  transform: translateY(-2px) !important;
}

/* Edit User (Solid RGB Emerald Green) */
body.light-theme .btn-2d-action.btn-edit,
body.light-theme .btn-2d-action[onclick*="openEditSubscriberModal"] {
  background: #059669 !important;
  border: 1px solid #047857 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-edit:hover,
body.light-theme .btn-2d-action[onclick*="openEditSubscriberModal"]:hover {
  background: #047857 !important;
  transform: translateY(-2px) !important;
}

/* Disconnect Session (Solid RGB Orange/Crimson) */
body.light-theme .btn-2d-action.btn-disconnect,
body.light-theme .btn-2d-action[onclick*="disconnectSubscriber"] {
  background: #ea580c !important;
  border: 1px solid #c2410c !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-disconnect:hover,
body.light-theme .btn-2d-action[onclick*="disconnectSubscriber"]:hover {
  background: #c2410c !important;
  transform: translateY(-2px) !important;
}

/* Toggle / Suspend (Solid RGB Warm Amber/Brown) */
body.light-theme .btn-2d-action.btn-toggle,
body.light-theme .btn-2d-action[onclick*="toggleSubscriberStatus"] {
  background: #7c2d12 !important;
  border: 1px solid #451a03 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-toggle:hover,
body.light-theme .btn-2d-action[onclick*="toggleSubscriberStatus"]:hover {
  background: #451a03 !important;
  transform: translateY(-2px) !important;
}

/* Live Bandwidth Graph (Solid RGB Purple) */
body.light-theme .btn-2d-action.btn-graph,
body.light-theme .btn-2d-action[onclick*="showLiveBandwidth"] {
  background: #7c3aed !important;
  border: 1px solid #6d28d9 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-graph:hover,
body.light-theme .btn-2d-action[onclick*="showLiveBandwidth"]:hover {
  background: #6d28d9 !important;
  transform: translateY(-2px) !important;
}

/* Recharge Account (Solid RGB Green) */
body.light-theme .btn-2d-action.btn-recharge,
body.light-theme .btn-2d-action[onclick*="openRechargeModal"] {
  background: #16a34a !important;
  border: 1px solid #15803d !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-recharge:hover,
body.light-theme .btn-2d-action[onclick*="openRechargeModal"]:hover {
  background: #15803d !important;
  transform: translateY(-2px) !important;
}

/* Speed Boost (Solid RGB Sky Cyan) */
body.light-theme .btn-2d-action.btn-speed-boost {
  background: #0ea5e9 !important;
  border: 1px solid #0284c7 !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-speed-boost:hover {
  background: #0284c7 !important;
  transform: translateY(-2px) !important;
}

/* Delete Subscriber (Solid RGB Red) */
body.light-theme .btn-2d-action.btn-delete,
body.light-theme .btn-2d-action[onclick*="deleteSubscriber"] {
  background: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  color: #ffffff !important;
}
body.light-theme .btn-2d-action.btn-delete:hover,
body.light-theme .btn-2d-action[onclick*="deleteSubscriber"]:hover {
  background: #b91c1c !important;
  transform: translateY(-2px) !important;
}

/* 6. SUBSCRIBER TABLE ROWS & 2D CELL BOXES IN LIGHT MODE */
body.light-theme .sub-row-2d {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme .sub-row-2d-active {
  background: #ffffff !important;
  border-bottom: 1.5px solid #dcfce7 !important;
}

body.light-theme .table-3d tbody tr.sub-row-2d-active td:first-child,
body.light-theme tr.sub-row-2d-active td:first-child {
  border-left: 6px solid #16a34a !important;
}

body.light-theme .sub-row-2d-active:hover {
  background: #f0fdf4 !important;
}

body.light-theme .sub-row-2d-expired {
  background: #fff8f8 !important;
  border-bottom: 1.5px solid #fee2e2 !important;
}

body.light-theme .table-3d tbody tr.sub-row-2d-expired td:first-child,
body.light-theme tr.sub-row-2d-expired td:first-child {
  border-left: 6px solid #dc2626 !important;
}

body.light-theme .sub-row-2d-expired:hover {
  background: #fee2e2 !important;
}

body.light-theme .sub-row-2d-warning {
  background: #fffdf5 !important;
  border-bottom: 1.5px solid #fef3c7 !important;
}

body.light-theme .table-3d tbody tr.sub-row-2d-warning td:first-child,
body.light-theme tr.sub-row-2d-warning td:first-child {
  border-left: 6px solid #ea580c !important;
}

body.light-theme .sub-row-2d-warning:hover {
  background: #fef3c7 !important;
}

body.light-theme .sub-row-2d-disabled {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme .table-3d tbody tr.sub-row-2d-disabled td:first-child,
body.light-theme tr.sub-row-2d-disabled td:first-child {
  border-left: 6px solid #64748b !important;
}

body.light-theme .sub-row-2d-disabled:hover {
  background: #f1f5f9 !important;
}

/* User Avatar (Solid Vibrant RGB Blue Box with Crisp White Initial) */
body.light-theme .user-avatar-3d {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
}

/* Distinct 2D Cell Containers */
body.light-theme .cell-box-name {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 4px 10px !important;
  color: #000000 !important;
}

body.light-theme .sub-fullname-link {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 0.94rem !important;
}

body.light-theme .sub-fullname-link:hover {
  color: #2563eb !important;
  text-decoration: underline !important;
}

body.light-theme .cell-box-name div span {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
}

body.light-theme .cell-box-name i.fa-phone {
  color: #0284c7 !important;
  font-weight: 900 !important;
}

body.light-theme .cell-box-name span:has(i.fa-location-dot),
body.light-theme .cell-box-name span[style*="color: #a78bfa"],
body.light-theme .cell-box-name span[style*="rgba(167, 139, 250"] {
  background: #ede9fe !important;
  border: 1.5px solid #a855f7 !important;
  color: #581c87 !important;
  font-weight: 850 !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
}

body.light-theme .cell-box-name i.fa-location-dot {
  color: #7e22ce !important;
  font-weight: 900 !important;
}

/* PPPoE Username */
body.light-theme .cell-box-username,
body.light-theme .username-no-box {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.94rem !important;
}

body.light-theme .sub-username-link {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.94rem !important;
}

body.light-theme .sub-username-link:hover {
  color: #2563eb !important;
  text-decoration: underline !important;
}

body.light-theme .username-no-box i.fa-user-gear {
  color: #2563eb !important;
  font-weight: 900 !important;
}

/* Hardware MAC under Username */
body.light-theme .username-no-box + div,
body.light-theme div[title*="Hardware / ONU MAC Address"] {
  color: #334155 !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
}

body.light-theme .username-no-box + div i.fa-network-wired,
body.light-theme div[title*="Hardware / ONU MAC Address"] i {
  color: #0284c7 !important;
  font-weight: 900 !important;
}

body.light-theme .username-no-box + div span,
body.light-theme div[title*="Hardware / ONU MAC Address"] span {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.light-theme .username-no-box + div span span[style*="font-style:italic"],
body.light-theme div[title*="Hardware / ONU MAC Address"] span[style*="font-style:italic"] {
  color: #475569 !important;
  font-weight: 850 !important;
  font-style: normal !important;
}

/* Internet Profile / Package */
body.light-theme .cell-box-package {
  background: #eff6ff !important;
  border: 1.5px solid #60a5fa !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1) !important;
  color: #1e3a8a !important;
}

body.light-theme .sub-pkg-text {
  color: #1e3a8a !important;
  font-weight: 900 !important;
  font-size: 0.88rem !important;
}

/* Expiration Pills */
body.light-theme .days-pill {
  font-weight: 900 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
  padding: 4px 10px !important;
}

body.light-theme .days-pill-expired {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25) !important;
}

body.light-theme .days-pill-warning {
  background: #ea580c !important;
  color: #ffffff !important;
  border: 1px solid #c2410c !important;
}

body.light-theme .days-pill-info {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
}

body.light-theme .days-pill-success,
body.light-theme .days-pill-grass {
  background: #16a34a !important;
  color: #ffffff !important;
  border: 1px solid #15803d !important;
}

/* Expiration Date Text (Dark Crisp Amber, High Contrast) */
body.light-theme .expiry-date-flame-yellow,
body.light-theme div.expiry-date-flame-yellow {
  color: #7c2d12 !important;
  font-weight: 900 !important;
  font-size: 0.86rem !important;
  margin-top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.light-theme .expiry-date-flame-yellow i {
  color: #c2410c !important;
  font-weight: 900 !important;
}

/* Status Badges */
body.light-theme .cell-box-status {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 4px 8px !important;
}

body.light-theme .badge-2d {
  font-weight: 900 !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
}

body.light-theme .badge-2d-Active {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25) !important;
}

body.light-theme .badge-2d-Expired {
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
}

body.light-theme .badge-2d-Suspended {
  background: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(234, 88, 12, 0.25) !important;
}

body.light-theme .badge-2d-secondary {
  background: #475569 !important;
  color: #ffffff !important;
}

body.light-theme .badge-3d-online {
  background: #dcfce7 !important;
  border: 1.5px solid #16a34a !important;
  color: #14532d !important;
  font-weight: 900 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}

body.light-theme .badge-3d.badge-3d-offline,
body.light-theme .badge-3d-offline {
  background: #f1f5f9 !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body.light-theme .badge-3d-offline i {
  color: #64748b !important;
}

/* 7. CARDS & PANELS UNIVERSAL HIGHLIGHT IN LIGHT MODE */
body.light-theme .card,
body.light-theme .card-3d,
body.light-theme .panel {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: #000000 !important;
}

/* Top Stripes on Directory / Table Panels */
body.light-theme #panel-subscribers .card-3d {
  border-top: 5px solid #7c3aed !important;
}

body.light-theme #panel-unpaid-customers .card-3d {
  border-top: 5px solid #dc2626 !important;
}

body.light-theme #panel-connection-requests .card-3d {
  border-top: 5px solid #ea580c !important;
}

body.light-theme #panel-online-users .card-3d {
  border-top: 5px solid #16a34a !important;
}

body.light-theme #panel-billing .card-3d,
body.light-theme #panel-payment-requests .card-3d,
body.light-theme #panel-expenses .card-3d {
  border-top: 5px solid #0d9488 !important;
}

body.light-theme #panel-olts .card-3d,
body.light-theme #panel-tickets .card-3d,
body.light-theme #panel-reminders .card-3d {
  border-top: 5px solid #ea580c !important;
}

body.light-theme #panel-traffic-logs .card-3d,
body.light-theme #panel-subdealers .card-3d {
  border-top: 5px solid #2563eb !important;
}

body.light-theme #panel-inventory .card-3d,
body.light-theme #panel-lifecycle .card-3d {
  border-top: 5px solid #d97706 !important;
}

body.light-theme #panel-admin-management .card-3d,
body.light-theme #panel-new-connection .card-3d {
  border-top: 5px solid #7c3aed !important;
}

body.light-theme #panel-bulk-editor .card-3d,
body.light-theme #panel-backup-database .card-3d {
  border-top: 5px solid #0284c7 !important;
}

body.light-theme #panel-zones .card-3d,
body.light-theme #panel-import-export .card-3d,
body.light-theme #panel-staff .card-3d {
  border-top: 5px solid #0d9488 !important;
}

body.light-theme #panel-internet-profiles .card-3d {
  border-top: 5px solid #4f46e5 !important;
}

/* Universal Panel Titles */
body.light-theme .panel-header h2,
body.light-theme .panel-header h3,
body.light-theme .panel-header h4 {
  color: #000000 !important;
  font-weight: 900 !important;
}

/* 8. TABLE FILTERS, SEARCH BARS & BULK ACTIONS IN LIGHT MODE */
body.light-theme .table-actions,
body.light-theme .filter-group {
  color: #000000 !important;
}

body.light-theme .filter-group select,
body.light-theme .table-actions select,
body.light-theme select#filter-subscriber-status,
body.light-theme select#filter-subscriber-dealer,
body.light-theme select#filter-subscriber-zone,
body.light-theme select#filter-subscriber-package,
body.light-theme select#filter-subscriber-limit,
body.light-theme select#filter-unpaid-grace-status,
body.light-theme select#filter-unpaid-dealer,
body.light-theme select#filter-unpaid-limit {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  outline: none !important;
}

body.light-theme .filter-group select:focus,
body.light-theme .table-actions select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme #btn-sub-clear-ghosts {
  background: #ea580c !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  border: 1px solid #c2410c !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25) !important;
}

body.light-theme #btn-sub-clear-ghosts:hover {
  background: #c2410c !important;
}

body.light-theme .search-group input[type="text"],
body.light-theme input#subscriber-directory-search,
body.light-theme input#unpaid-table-search {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .search-group input[type="text"]::placeholder,
body.light-theme input#subscriber-directory-search::placeholder,
body.light-theme input#unpaid-table-search::placeholder {
  color: #64748b !important;
  font-weight: 600 !important;
}

body.light-theme .search-group input[type="text"]:focus,
body.light-theme input#subscriber-directory-search:focus,
body.light-theme input#unpaid-table-search:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme .search-group button,
body.light-theme button#subscriber-directory-search-btn {
  background: #2563eb !important;
  border: 1.5px solid #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

body.light-theme .search-group button:hover,
body.light-theme button#subscriber-directory-search-btn:hover {
  background: #1d4ed8 !important;
}

/* Bulk Selection Bars */
body.light-theme #subscribers-bulk-bar,
body.light-theme #unpaid-bulk-bar {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 5px solid #2563eb !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme #subscribers-bulk-bar label,
body.light-theme #unpaid-bulk-bar label {
  color: #000000 !important;
  font-weight: 850 !important;
}

/* 9. DATA TABLES IN LIGHT MODE */
body.light-theme .data-table th,
body.light-theme .table-3d th,
body.light-theme table.table-3d thead tr th,
body.light-theme table thead tr th,
body.light-theme table th {
  background: #f1f5f9 !important;
  color: #000000 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  border-top: 1px solid #cbd5e1 !important;
  font-weight: 900 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
}

body.light-theme .data-table td,
body.light-theme .table-3d td,
body.light-theme table tbody tr td,
body.light-theme table td {
  color: #000000 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
}

body.light-theme .data-table tbody tr:hover,
body.light-theme .table-3d tbody tr:hover {
  background: #f8fafc !important;
}

/* Pagination Controls Bar in Light Mode */
body.light-theme #subscribers-pagination-controls,
body.light-theme .pagination-controls,
body.light-theme .pagination-bar,
body.light-theme .unpaid-pagination-controls {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #subscribers-pagination-controls div,
body.light-theme .pagination-controls div,
body.light-theme .pagination-bar div {
  color: #000000 !important;
  font-weight: 750 !important;
}

body.light-theme #subscribers-pagination-controls .btn-secondary,
body.light-theme .pagination-controls .btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #000000 !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #subscribers-pagination-controls .btn-secondary:hover,
body.light-theme .pagination-controls .btn-secondary:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
}

body.light-theme #subscribers-pagination-controls .btn-primary,
body.light-theme .pagination-controls .btn-primary {
  background: #2563eb !important;
  border: 1.5px solid #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

/* Unpaid KPI Cards in Light Mode */
body.light-theme .unpaid-kpi-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .unpaid-kpi-card span {
  color: #475569 !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-kpi-card h3 {
  color: #000000 !important;
  font-weight: 900 !important;
}

body.light-theme .data-table td,
body.light-theme .table-3d td {
  color: #000000 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 750 !important;
}

body.light-theme .data-table tbody tr:hover,
body.light-theme .table-3d tbody tr:hover {
  background: #f8fafc !important;
}

body.light-theme .form-group label,
body.light-theme .form-group-3d label {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .form-control,
body.light-theme .form-group input,
body.light-theme .form-group select,
body.light-theme .form-group textarea,
body.light-theme .form-group-3d input,
body.light-theme .form-group-3d select,
body.light-theme .form-group-3d textarea,
body.light-theme .filter-bar select,
body.light-theme .filter-bar input,
body.light-theme .search-bar select,
body.light-theme .search-bar input,
body.light-theme #subscribers-search-input,
body.light-theme #subscribers-status-filter,
body.light-theme #subscribers-dealer-filter,
body.light-theme #subscribers-zone-filter,
body.light-theme #subscribers-package-filter,
body.light-theme #subscribers-page-size {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .form-control:focus,
body.light-theme .form-group input:focus,
body.light-theme .form-group select:focus,
body.light-theme .form-group textarea:focus,
body.light-theme .form-group-3d input:focus,
body.light-theme .form-group-3d select:focus,
body.light-theme .form-group-3d textarea:focus,
body.light-theme .filter-bar select:focus,
body.light-theme .filter-bar input:focus,
body.light-theme .search-bar select:focus,
body.light-theme .search-bar input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
  background: #ffffff !important;
  color: #000000 !important;
}

/* 9. UNIVERSAL MODALS, ACTION POPUPS & OVERLAYS IN LIGHT MODE */
body.light-theme .modal-overlay,
body.light-theme .modal {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
}

body.light-theme .modal-card,
body.light-theme .modal-content,
body.light-theme .oops-modal-box {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 65px -10px rgba(15, 23, 42, 0.22), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  color: #0f172a !important;
}

body.light-theme .modal-header {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .modal-header h2,
body.light-theme .modal-header h3,
body.light-theme .modal-header h4 {
  color: #0f172a !important;
}

body.light-theme .modal-header p,
body.light-theme .modal-header div {
  color: #64748b;
}

body.light-theme .modal-body {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.light-theme .modal-form {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.light-theme .modal-actions,
body.light-theme .modal-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 -4px 15px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .modal-close-btn,
body.light-theme .btn-close,
body.light-theme .btn-close-modal {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
}

body.light-theme .modal-close-btn:hover,
body.light-theme .btn-close:hover,
body.light-theme .btn-close-modal:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}

/* ==========================================================================
   12. ADD NEW CONNECTION (#modal-add-subscriber & #panel-new-connection)
   ========================================================================== */
body.light-theme .conn-modal-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 0 25px rgba(37, 99, 235, 0.08) !important;
  color: #0f172a !important;
}

body.light-theme .conn-modal-header {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme .conn-modal-title {
  color: #0f172a !important;
}

body.light-theme .conn-modal-title i {
  color: #2563eb !important;
  filter: none !important;
}

body.light-theme .conn-modal-body {
  background: #f8fafc !important;
}

body.light-theme .conn-section {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .conn-section-header {
  color: #1d4ed8 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 4px !important;
}

body.light-theme .conn-section-header i {
  color: #2563eb !important;
}

body.light-theme .conn-label {
  color: #475569 !important;
  font-weight: 750 !important;
}

body.light-theme .conn-label i {
  color: #2563eb !important;
}

body.light-theme .conn-input,
body.light-theme .conn-select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .conn-input:focus,
body.light-theme .conn-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  background: #ffffff !important;
}

body.light-theme .conn-input.highlight {
  background: #f0fdfa !important;
  border: 1.5px solid #0d9488 !important;
  color: #0f766e !important;
}

body.light-theme .conn-submit-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

body.light-theme .conn-submit-btn:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45) !important;
}

/* ==========================================================================
   13. EDIT SUBSCRIBER MODAL (#modal-edit-subscriber)
   ========================================================================== */
body.light-theme #modal-edit-subscriber .modal-card,
body.light-theme #modal-edit-subscriber .edit-sub-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 65px -10px rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
}

body.light-theme #modal-edit-subscriber .modal-header,
body.light-theme #modal-edit-subscriber .edit-sub-header {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme #modal-edit-subscriber .edit-sub-header h3 {
  color: #0f172a !important;
}

body.light-theme #modal-edit-subscriber .edit-sub-form {
  background: #f8fafc !important;
}

body.light-theme #modal-edit-subscriber .edit-sub-scrollable-body {
  background: #f8fafc !important;
  scrollbar-color: #cbd5e1 #f8fafc !important;
}

body.light-theme #modal-edit-subscriber .edit-sub-scrollable-body > div {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme #modal-edit-subscriber .edit-sub-scrollable-body > div > div:first-child {
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
}

body.light-theme #modal-edit-subscriber label {
  color: #334155 !important;
  font-weight: 750 !important;
}

body.light-theme #modal-edit-subscriber input,
body.light-theme #modal-edit-subscriber select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme #modal-edit-subscriber input:focus,
body.light-theme #modal-edit-subscriber select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme #edit-sub-username,
body.light-theme #edit-sub-password {
  background: #f0fdfa !important;
  border: 1.5px solid #0d9488 !important;
  color: #0f766e !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.light-theme #modal-edit-subscriber .modal-actions,
body.light-theme #modal-edit-subscriber .edit-sub-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 -4px 15px rgba(15, 23, 42, 0.05) !important;
}

/* ==========================================================================
   14. CLIENT PROFILE DETAILS MODAL (#modal-client-info)
   ========================================================================== */
body.light-theme #modal-client-info .modal-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 65px -10px rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
}

body.light-theme #modal-client-info .modal-header,
body.light-theme .client-info-header {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme #modal-client-info .modal-header h3 {
  color: #0f172a !important;
}

body.light-theme #modal-client-info .modal-body,
body.light-theme .client-info-body {
  background: #f8fafc !important;
}

body.light-theme #modal-client-info .modal-body > div:first-child {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #ci-fullname {
  color: #0f172a !important;
}

body.light-theme #ci-username {
  color: #0f766e !important;
}

body.light-theme #modal-client-info div[style*="background: rgba(15, 23, 42, 0.9)"] {
  background: #f0fdfa !important;
  border: 1.5px solid #5eead4 !important;
  box-shadow: none !important;
}

body.light-theme .ci-contact-grid > div {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

body.light-theme #ci-phone,
body.light-theme #ci-cnic,
body.light-theme #ci-email {
  color: #0f172a !important;
}

body.light-theme #ci-current-ip-tile {
  background: #eff6ff !important;
  border: 1.5px solid #93c5fd !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08) !important;
}
body.light-theme #ci-current-ip-tile span { color: #1d4ed8 !important; }
body.light-theme #ci-current-ip { color: #1e3a8a !important; }

body.light-theme #ci-package-tile {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.08) !important;
}
body.light-theme #ci-package-tile span { color: #15803d !important; }
body.light-theme #ci-package { color: #14532d !important; }

body.light-theme #ci-joining-tile {
  background: #fff7ed !important;
  border: 1.5px solid #fdba74 !important;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.08) !important;
}
body.light-theme #ci-joining-tile span { color: #c2410c !important; }
body.light-theme #ci-joining-date { color: #7c2d12 !important; }

body.light-theme #ci-expiry-tile {
  background: #faf5ff !important;
  border: 1.5px solid #d8b4fe !important;
  box-shadow: 0 3px 10px rgba(147, 51, 234, 0.08) !important;
}
body.light-theme #ci-expiry-tile span { color: #7e22ce !important; }
body.light-theme #ci-expiry-date { color: #581c87 !important; }

body.light-theme #modal-client-info div[style*="Data Consumption History"] {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme #modal-client-info div[style*="Data Consumption History"] h4 {
  color: #0f172a !important;
}

body.light-theme #modal-client-info div[style*="max-height: 110px"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme #modal-client-info div[style*="max-height: 110px"] th {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

body.light-theme #ci-data-usage-table td {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme #modal-client-info div[style*="Direct WhatsApp Dispatch"] {
  background: #ffffff !important;
  border: 1.5px solid #a7f3d0 !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.08) !important;
}

body.light-theme #modal-client-info div[style*="Direct WhatsApp Dispatch"] h4 {
  color: #065f46 !important;
}

body.light-theme #ci-wa-mode,
body.light-theme #ci-wa-template {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme #ci-wa-message {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme #modal-client-info .modal-actions,
body.light-theme .client-info-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

/* ==========================================================================
   15. CHANGE PACKAGE MODAL (#modal-change-package)
   ========================================================================== */
body.light-theme #modal-change-package .modal-card {
  background: #ffffff !important;
  border: 1.5px solid #c7d2fe !important;
  box-shadow: 0 25px 65px -10px rgba(99, 102, 241, 0.18) !important;
  color: #0f172a !important;
}

body.light-theme #modal-change-package .modal-header {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e0e7ff !important;
}

body.light-theme #modal-change-package .modal-header h3 {
  color: #1e1b4b !important;
}

body.light-theme #form-change-package {
  background: #f8fafc !important;
}

body.light-theme #modal-change-package div[style*="SUBSCRIBER"] {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme #change-pkg-fullname {
  color: #0f172a !important;
}

body.light-theme #change-pkg-select {
  background: #ffffff !important;
  border: 1.5px solid #6366f1 !important;
  color: #0f172a !important;
}

body.light-theme #change-pkg-preview-box {
  background: #eef2ff !important;
  border: 1.5px solid #c7d2fe !important;
}

body.light-theme div[style*="Apply Immediately & Re-authenticate"] {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
}

body.light-theme div[style*="Apply Immediately & Re-authenticate"] label {
  color: #b45309 !important;
}

body.light-theme div[style*="Apply Immediately & Re-authenticate"] div {
  color: #78350f !important;
}

/* ==========================================================================
   16. RECHARGE & QUICK RECHARGE MODALS (#modal-recharge, #modal-agent-pos)
   ========================================================================== */
body.light-theme #modal-recharge .modal,
body.light-theme #modal-quick-recharge .modal,
body.light-theme #modal-recharge .modal-card,
body.light-theme #modal-quick-recharge .modal-card,
body.light-theme #modal-agent-pos .modal-card,
body.light-theme #modal-agent-pos .pos-modal-card,
body.light-theme #modal-daily-closing .modal-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
}

body.light-theme #modal-recharge .modal-header,
body.light-theme #modal-quick-recharge .modal-header,
body.light-theme #modal-agent-pos .modal-header,
body.light-theme #modal-agent-pos .pos-modal-header,
body.light-theme #modal-daily-closing .modal-header {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme #recharge-sub-name,
body.light-theme #recharge-pkg-name,
body.light-theme #recharge-current-expiry {
  color: #0f172a !important;
}

body.light-theme #modal-recharge div[style*="border-radius: 8px; padding: 15px;"] {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

body.light-theme #recharge-custom-package-price,
body.light-theme #pos-custom-package-price,
body.light-theme #pos-custom-expiry-date,
body.light-theme #pos-unpaid-amount,
body.light-theme #pos-unpaid-grace-days,
body.light-theme #pos-unpaid-custom-due,
body.light-theme #pos-package-id,
body.light-theme #pos-duration {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme #modal-agent-pos .pos-modal-scroll-body {
  background: #ffffff !important;
  scrollbar-color: #94a3b8 #f1f5f9;
}

body.light-theme #modal-agent-pos .pos-modal-scroll-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}
body.light-theme #modal-agent-pos .pos-modal-scroll-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

body.light-theme #modal-agent-pos .pos-payment-status-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

body.light-theme #modal-agent-pos .pos-total-bill-box {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1) !important;
}

body.light-theme #modal-agent-pos .pos-total-bill-box div:first-child {
  color: #047857 !important;
}

body.light-theme #modal-agent-pos #pos-total-bill {
  color: #059669 !important;
  text-shadow: none !important;
}

body.light-theme #modal-agent-pos .pos-modal-footer {
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 -4px 15px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #modal-agent-pos label[for="pos-deduct-wallet"] {
  color: #0f172a !important;
}

/* ==========================================================================
   17. DEDICATED SUBSCRIBER PROFILE VIEW (#panel-subscriber-profile)
   ========================================================================== */
body.light-theme .subprof-header {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .subprof-title {
  color: #0f172a !important;
}

body.light-theme .subprof-title i {
  color: #2563eb !important;
  filter: none !important;
}

body.light-theme .subprof-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .subprof-card-header {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme .subprof-card-title {
  color: #0f172a !important;
}

body.light-theme .subprof-card-title i {
  color: #2563eb !important;
}

body.light-theme .subprof-card-body {
  background: #ffffff !important;
}

body.light-theme .subprof-kv-row {
  border-bottom: 1px dashed #e2e8f0 !important;
}

body.light-theme .subprof-kv-label {
  color: #64748b !important;
}

body.light-theme .subprof-kv-label i {
  color: #0284c7 !important;
}

body.light-theme .subprof-kv-val {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .subprof-tab {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .subprof-tab:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

body.light-theme .subprof-tab.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   18. SUBSCRIBER DIRECTORY FILTERS & BULK BAR (#panel-subscribers)
   ========================================================================== */
body.light-theme #filter-subscriber-status,
body.light-theme #filter-subscriber-dealer,
body.light-theme #filter-subscriber-zone,
body.light-theme #filter-subscriber-package,
body.light-theme #filter-subscriber-limit,
body.light-theme #subscriber-directory-search,
body.light-theme #bulk-target-subdealer-select,
body.light-theme #inv-search-input,
body.light-theme #inv-filter-status {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #filter-subscriber-status:focus,
body.light-theme #filter-subscriber-dealer:focus,
body.light-theme #filter-subscriber-zone:focus,
body.light-theme #filter-subscriber-package:focus,
body.light-theme #filter-subscriber-limit:focus,
body.light-theme #subscriber-directory-search:focus,
body.light-theme #bulk-target-subdealer-select:focus,
body.light-theme #inv-search-input:focus,
body.light-theme #inv-filter-status:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme #subscribers-bulk-bar {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

body.light-theme #subscribers-bulk-bar label,
body.light-theme #bulk-select-count {
  color: #334155 !important;
}

body.light-theme div[style*="background: rgba(0, 0, 0, 0.3)"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   19. NOC & HARDWARE MODALS (Tickets, OLT, PTP, OPM, VLAN, Boost, POS, Admin)
   ========================================================================== */
body.light-theme #modal-add-ticket .modal-card,
body.light-theme #modal-resolve-ticket .modal-card,
body.light-theme #modal-add-income .modal-card,
body.light-theme #modal-add-expense .modal-card,
body.light-theme #modal-add-ptp-link .modal-card,
body.light-theme #modal-ptp-speedtest .modal-card,
body.light-theme #modal-ptp-history .modal-card,
body.light-theme #modal-add-olt .modal-card,
body.light-theme #modal-link-onu .modal-card,
body.light-theme #modal-generate-vouchers .modal-card,
body.light-theme #modal-broadcast-alert .modal-content,
body.light-theme #modal-vlan-users .modal-card,
body.light-theme #modal-speed-boost .modal-content,
body.light-theme #modal-edit-subdealer-bw .modal-content,
body.light-theme #modal-omci-push .modal-content,
body.light-theme #modal-create-invoice .modal-card,
body.light-theme .oops-modal-box {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 65px -10px rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
}

body.light-theme #modal-add-ticket .modal-card h3,
body.light-theme #modal-ptp-title,
body.light-theme #modal-ptp-history-title,
body.light-theme #modal-olt-title,
body.light-theme .oops-modal-box h3 {
  color: #0f172a !important;
}

body.light-theme #form-create-invoice select,
body.light-theme #form-create-invoice input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme #ptp-name,
body.light-theme #ptp-brand,
body.light-theme #ptp-model,
body.light-theme #ptp-master-ip,
body.light-theme #ptp-master-port,
body.light-theme #ptp-slave-ip,
body.light-theme #ptp-username,
body.light-theme #ptp-password,
body.light-theme #ptp-snmp,
body.light-theme #ptp-tower-name,
body.light-theme #ptp-frequency,
body.light-theme #ptp-channel-width,
body.light-theme #ptp-target-capacity,
body.light-theme #omci-modal-sub,
body.light-theme #omci-modal-brand,
body.light-theme #omci-modal-pon,
body.light-theme #omci-modal-commands,
body.light-theme #speed-boost-pkg-select,
body.light-theme #speed-boost-duration-input,
body.light-theme #speed-boost-reason,
body.light-theme #broadcast-alert-message,
body.light-theme #broadcast-alert-title,
body.light-theme #broadcast-alert-severity,
body.light-theme #broadcast-target-audience,
body.light-theme #broadcast-target-subdealer-id,
body.light-theme #new_admin_role {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* 10. SETTINGS OPTION BUTTON CARDS IN LIGHT MODE */
body.light-theme .settings-option-btn-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .settings-option-btn-card:hover {
  background: #f8fafc !important;
  border-color: #2563eb !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.12) !important;
}

body.light-theme .settings-option-btn-card .opt-title {
  color: #0f172a !important;
}

body.light-theme .settings-option-btn-card .opt-desc {
  color: #64748b !important;
}

body.light-theme .settings-option-btn-card .opt-footer {
  border-top: 1px solid #e2e8f0 !important;
  color: #2563eb !important;
}

/* 11. FULL-PAGE RESELLER FORM (#subdealer-create-view) IN LIGHT MODE */
body.light-theme #subdealer-create-view .reseller-section-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #subdealer-create-view .reseller-section-title {
  background: #eff6ff !important;
  border-left: 3px solid #2563eb !important;
  color: #1d4ed8 !important;
}

body.light-theme #subdealer-create-view .form-group label {
  color: #475569 !important;
}

body.light-theme #subdealer-create-view .form-group input,
body.light-theme #subdealer-create-view .form-group select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme #subdealer-create-view .form-group input:focus,
body.light-theme #subdealer-create-view .form-group select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  background: #ffffff !important;
}

body.light-theme .reseller-perm-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .reseller-perm-row:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

body.light-theme .reseller-perm-row .perm-title {
  color: #0f172a !important;
}

body.light-theme .reseller-perm-row .perm-desc {
  color: #64748b !important;
}

body.light-theme .reseller-perm-row input[type="checkbox"].reseller-toggle-cb {
  background: #cbd5e1 !important;
  border: 1.5px solid #94a3b8 !important;
}

body.light-theme .reseller-perm-row input[type="checkbox"].reseller-toggle-cb:checked {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.35) !important;
}

body.light-theme .reseller-scope-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

body.light-theme .reseller-scope-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}









/* ==========================================================================
   21. HIGH-CONTRAST SOLID BLACK & RGB LIGHT MODE ENHANCEMENTS
   ========================================================================== */
body.light-theme {
  background: #f8fafc !important;
  color: #000000 !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
  color: #000000 !important;
  font-weight: 850 !important;
}

body.light-theme label {
  color: #000000 !important;
  font-weight: 750 !important;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
  border: 2px solid #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
  color: #000000 !important;
}

body.light-theme .data-table th,
body.light-theme .table-3d th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 750 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .data-table td,
body.light-theme .table-3d td {
  color: #1e293b !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

body.light-theme .data-table tr:hover td,
body.light-theme .table-3d tr:hover td {
  background: #f8fafc !important;
}

body.light-theme .sub-fullname-link {
  color: #0f172a !important;
  font-weight: 750 !important;
}

body.light-theme .sub-fullname-link:hover {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

body.light-theme .sub-username-link {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

body.light-theme .sub-pkg-text {
  color: #1e1b4b !important;
  font-weight: 800 !important;
}

body.light-theme .subprof-kv-label {
  color: #64748b !important;
  font-weight: 650 !important;
}

body.light-theme .subprof-kv-val {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .card,
body.light-theme .card-3d,
body.light-theme .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.03) !important;
}

/* ==========================================================================
   22. SMOOTH MODERN LIGHT THEME SPECIFICATION (INSPIRED BY SAAS MINIMALISM)
   ========================================================================== */
body.light-theme,
body.light-theme .main-content,
body.light-theme .app-container {
  background-color: #f4f6fc !important;
  background: #f4f6fc !important;
  color: #1e293b !important;
}

/* Stat Metric Cards: Clean, Soft Rounded White Surface (No harsh top borders) */
body.light-theme .stat-card,
body.light-theme .stat-card.clickable-card,
body.light-theme a.stat-card {
  background: #ffffff !important;
  border: none !important;
  border-top: none !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  padding: 22px 20px !important;
  transform: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-theme .stat-card:hover,
body.light-theme .stat-card.clickable-card:hover,
body.light-theme a.stat-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transform: translateY(-3px) !important;
  border-color: transparent !important;
}

/* Pastel Squircle Badges on the Left of Stat Cards */
body.light-theme .stat-gauge-wrap {
  border-radius: 16px !important;
  padding: 5px !important;
  transition: background 0.2s ease !important;
}

body.light-theme .stat-card.card-total .stat-gauge-wrap,
body.light-theme .stat-card.gradient-purple .stat-gauge-wrap {
  background: #eef2ff !important;
}
body.light-theme .stat-card.card-total .gauge-fill,
body.light-theme .stat-card.gradient-purple .gauge-fill {
  stroke: #4f46e5 !important;
}

body.light-theme .stat-card.card-active .stat-gauge-wrap,
body.light-theme .stat-card.gradient-green .stat-gauge-wrap {
  background: #ecfdf5 !important;
}
body.light-theme .stat-card.card-active .gauge-fill,
body.light-theme .stat-card.gradient-green .gauge-fill {
  stroke: #10b981 !important;
}

body.light-theme .stat-card.card-online .stat-gauge-wrap,
body.light-theme .stat-card.gradient-cyan .stat-gauge-wrap {
  background: #f0f9ff !important;
}
body.light-theme .stat-card.card-online .gauge-fill,
body.light-theme .stat-card.gradient-cyan .gauge-fill {
  stroke: #0284c7 !important;
}

body.light-theme .stat-card.card-expired .stat-gauge-wrap,
body.light-theme .stat-card.card-unpaid .stat-gauge-wrap {
  background: #fff1f2 !important;
}
body.light-theme .stat-card.card-expired .gauge-fill,
body.light-theme .stat-card.card-unpaid .gauge-fill {
  stroke: #e11d48 !important;
}

body.light-theme .stat-card.card-exp3 .stat-gauge-wrap {
  background: #fff7ed !important;
}
body.light-theme .stat-card.card-exp3 .gauge-fill {
  stroke: #ea580c !important;
}

body.light-theme .stat-card.card-exp7 .stat-gauge-wrap {
  background: #fefce8 !important;
}
body.light-theme .stat-card.card-exp7 .gauge-fill {
  stroke: #d97706 !important;
}

body.light-theme .stat-card.card-offline .stat-gauge-wrap {
  background: #f1f5f9 !important;
}
body.light-theme .stat-card.card-offline .gauge-fill {
  stroke: #64748b !important;
}

body.light-theme .gauge-bg {
  stroke: rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .gauge-pct {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Stat Card Typography */
body.light-theme .stat-card .stat-label {
  color: #0f172a !important;
  font-size: 0.8rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.light-theme .stat-card h3,
body.light-theme .stat-card h2,
body.light-theme .stat-card .stat-value {
  color: #0f172a !important;
  font-size: 1.95rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

body.light-theme .stat-card .stat-desc {
  color: #1e293b !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
}

/* Dashboard Panels, Cards & Quick Action Containers */
body.light-theme .card,
body.light-theme .card-3d,
body.light-theme .panel {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .btn-quick,
body.light-theme .card-3d .btn {
  background: #ffffff !important;
  border: 1.5px solid #f1f5f9 !important;
  border-radius: 14px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

body.light-theme .btn-quick:hover,
body.light-theme .card-3d .btn:hover {
  background: #f8fafc !important;
  border-color: #c7d2fe !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.08) !important;
}

/* Primary Action Buttons: Royal Indigo (Matching "Add New User" in Image 2) */
body.light-theme .btn-primary {
  background: #4f46e5 !important;
  border: 1px solid #4338ca !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 650 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22) !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

body.light-theme .btn-primary:hover {
  background: #4338ca !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32) !important;
  transform: translateY(-1px) !important;
}

/* Secondary Buttons: Crisp White Pill (Matching "Active/Renew" in Image 2) */
body.light-theme .btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
  border-radius: 12px !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

body.light-theme .btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}

/* Data Tables in Light Mode */
body.light-theme .data-table th,
body.light-theme .table-3d th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 850 !important;
  font-size: 0.82rem !important;
  border-bottom: 3px solid #0284c7 !important;
  letter-spacing: 0.04em !important;
}

body.light-theme .data-table td,
body.light-theme .table-3d td {
  background: #ffffff !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.85rem !important;
}

body.light-theme .data-table tr:hover td,
body.light-theme .table-3d tr:hover td {
  background: #f8fafc !important;
}

/* ==========================================================================
   HIGH-CONTRAST HIGHLIGHTING FOR LIGHT MODE & SYSTEM-WIDE TABLES
   Black, Dark Blue, and Deep Red sharp clarity
   ========================================================================== */

/* Unpaid Customer Table Contrast & Highlight Styles */
body.light-theme #unpaid-customers-table-body tr {
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme #unpaid-customers-table-body tr:hover {
  background: #f0f9ff !important;
}

body.light-theme #unpaid-customers-table-body td {
  color: #0f172a !important;
}

body.light-theme .unpaid-cell-name {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-phone {
  color: #1e293b !important;
  font-weight: 750 !important;
}

body.light-theme .unpaid-cell-username {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-ip {
  color: #1e293b !important;
  font-weight: 750 !important;
}

body.light-theme .unpaid-cell-pkg {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-rate {
  color: #0369a1 !important;
  font-weight: 750 !important;
}

body.light-theme .unpaid-cell-rate strong {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-amount {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

body.light-theme .unpaid-cell-date {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .unpaid-cell-pending {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.light-theme .unpaid-filter-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 750 !important;
}

body.light-theme .unpaid-search-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

body.light-theme .unpaid-bulk-label {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-bulk-count {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

/* Unpaid KPI Cards in Light Mode */
body.light-theme .unpaid-kpi-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .unpaid-kpi-label {
  color: #334155 !important;
  font-weight: 850 !important;
}

body.light-theme #unpaid-kpi-total-count {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

body.light-theme #unpaid-kpi-total-dues {
  color: #b45309 !important;
  font-weight: 900 !important;
}

body.light-theme #unpaid-kpi-grace-count {
  color: #0284c7 !important;
  font-weight: 900 !important;
}

body.light-theme #unpaid-kpi-paused-count {
  color: #e11d48 !important;
  font-weight: 900 !important;
}

/* Invoices table high contrast rules */
body.light-theme .invoice-row td {
  color: #0f172a !important;
}

body.light-theme .inv-num {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .inv-user-id {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

body.light-theme .inv-billed-by {
  color: #b45309 !important;
  font-weight: 800 !important;
}

body.light-theme .inv-cust-name {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .inv-username {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

body.light-theme .inv-pkg-name {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.light-theme .inv-amount {
  color: #15803d !important;
  font-weight: 900 !important;
}

body.light-theme .inv-bill-date {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .inv-exp-date {
  color: #334155 !important;
  font-weight: 750 !important;
}

/* Consumers table high contrast rules */
body.light-theme .consumer-name {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .consumer-username {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

body.light-theme .consumer-total {
  color: #0f172a !important;
  font-weight: 900 !important;
}

/* Active sessions high contrast rules */
body.light-theme .sess-user {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .sess-ip {
  color: #15803d !important;
  font-weight: 850 !important;
}

body.light-theme .sess-nas {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.light-theme .sess-time {
  color: #0f172a !important;
  font-weight: 750 !important;
}

body.light-theme .sess-mac {
  color: #1e293b !important;
  font-weight: 750 !important;
}

/* ONU table high contrast rules */
body.light-theme .onu-fullname {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .onu-username {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .onu-length {
  color: #1e293b !important;
  font-weight: 750 !important;
}

body.light-theme .onu-mac {
  color: #0f172a !important;
  font-weight: 750 !important;
}

/* Universal table text sharpness in light mode: ensure all secondary spans, codes, divs are legible */
body.light-theme .data-table td span,
body.light-theme .table-3d td span {
  font-weight: 650;
}

body.light-theme .data-table td code,
body.light-theme .table-3d td code {
  font-weight: 750;
}


/* ==========================================================================
   SYSTEM-WIDE ULTRA-HIGH CONTRAST RULES FOR LIGHT MODE (body.light-theme)
   Targeted bold Black (#0f172a), Dark Blue (#0284c7), Deep Red (#dc2626), 
   and Forest Green (#15803d) across all tables, cards, modals, dials, and inputs.
   ========================================================================== */

/* 1. Speedometers & Digital Flame Meters */
body.light-theme .flame-white,
body.light-theme .prof-meter-num.flame-white,
body.light-theme #prof-meter-dl-val,
body.light-theme #prof-meter-ul-val,
body.light-theme #client-meter-dl-val,
body.light-theme #client-meter-ul-val,
body.light-theme #live-speed-rx,
body.light-theme #live-speed-tx {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

body.light-theme .flame-white-sub,
body.light-theme .prof-meter-sub.flame-white-sub,
body.light-theme .prof-meter-sub,
body.light-theme #prof-meter-dl-sub,
body.light-theme #prof-meter-ul-sub,
body.light-theme #client-meter-dl-sub,
body.light-theme #client-meter-ul-sub {
  color: #1e293b !important;
  text-shadow: none !important;
  font-weight: 750 !important;
}

body.light-theme .prof-meter-unit.flame-white,
body.light-theme .prof-meter-unit {
  color: #0284c7 !important;
  text-shadow: none !important;
  font-weight: 850 !important;
}

body.light-theme .flame-yellow,
body.light-theme .badge-flame-yellow,
body.light-theme .expiry-date-flame-yellow {
  color: #b45309 !important;
  text-shadow: none !important;
  font-weight: 850 !important;
}

/* 2. Customer 360 & Subscriber Profile Header */
body.light-theme .prof-customer-val,
body.light-theme #prof-live-fullname {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

body.light-theme .prof-customer-user-badge {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .prof-customer-center-datetime {
  background: #f8fafc !important;
  border: 1.5px solid #0284c7 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.12) !important;
}

body.light-theme .prof-live-time-val {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

body.light-theme .prof-live-date-val {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .subprof-bullet-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .subprof-bullet-val {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .telemetry-prop-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .telemetry-prop-val {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

/* 3. Universal Table Headers & Cells Across All Panels */
body.light-theme th,
body.light-theme table thead th,
body.light-theme .data-table th,
body.light-theme .table-3d th,
body.light-theme .table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  border-bottom: 2.5px solid #0284c7 !important;
  border-top: 1px solid #cbd5e1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.light-theme td,
body.light-theme table tbody td,
body.light-theme .data-table td,
body.light-theme .table-3d td,
body.light-theme .table td {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 650 !important;
}

body.light-theme tr:hover td {
  background: #f8fafc !important;
}

body.light-theme .sub-fullname-link {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .sub-fullname-link:hover {
  color: #0284c7 !important;
}

body.light-theme .sub-username-link {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .sub-pkg-text {
  color: #0f172a !important;
  font-weight: 850 !important;
}

/* 4. Universal Form Controls, Inputs, Selects, Search Bars */
body.light-theme input:not([type="checkbox"]):not([type="radio"]),
body.light-theme select,
body.light-theme textarea,
body.light-theme .form-control,
body.light-theme .unpaid-filter-select,
body.light-theme .unpaid-search-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #94a3b8 !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: #475569 !important;
  font-weight: 600 !important;
}

body.light-theme label,
body.light-theme .form-label,
body.light-theme .form-group label,
body.light-theme .form-group-3d label,
body.light-theme .modal-body label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 5. Modals Across the System */
body.light-theme .modal-card,
body.light-theme .modal-content,
body.light-theme #modal-set-grace-period .modal-card,
body.light-theme #modal-unpaid-breakdown .modal-card,
body.light-theme #modal-edit-subdealer-bw .modal-content,
body.light-theme #modal-omci-push .modal-content,
body.light-theme #modal-speed-boost .modal-content,
body.light-theme #modal-vlan-users .modal-card,
body.light-theme #modal-ptp-speedtest .modal-card,
body.light-theme #modal-ap-dashboard .modal-card,
body.light-theme #modal-olt-uplink .modal-card,
body.light-theme #modal-live-bandwidth .modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 65px -10px rgba(15, 23, 42, 0.22) !important;
}

body.light-theme .modal-header {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme .modal-header h3,
body.light-theme .modal-header h2,
body.light-theme .modal-header h4 {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .modal-close {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 6. Master Inline Faint Colors Override for body.light-theme */
body.light-theme [style*="color: #ffffff"]:not(.btn):not([class*="btn-"]):not([class*="badge-"]):not(.badge):not(.days-pill):not([style*="background: #dc2626"]):not([style*="background: #15803d"]):not([style*="background: #0284c7"]):not([style*="background: #16a34a"]),
body.light-theme [style*="color:#ffffff"]:not(.btn):not([class*="btn-"]):not([class*="badge-"]):not(.badge):not(.days-pill):not([style*="background: #dc2626"]):not([style*="background: #15803d"]):not([style*="background: #0284c7"]):not([style*="background: #16a34a"]),
body.light-theme [style*="color: #fff"]:not(.btn):not([class*="btn-"]):not([class*="badge-"]):not(.badge):not(.days-pill):not([style*="background: #dc2626"]):not([style*="background: #15803d"]):not([style*="background: #0284c7"]):not([style*="background: #16a34a"]),
body.light-theme [style*="color:#fff"]:not(.btn):not([class*="btn-"]):not([class*="badge-"]):not(.badge):not(.days-pill):not([style*="background: #dc2626"]):not([style*="background: #15803d"]):not([style*="background: #0284c7"]):not([style*="background: #16a34a"]),
body.light-theme [style*="color: white"]:not(.btn):not([class*="btn-"]):not([class*="badge-"]):not(.badge):not(.days-pill):not([style*="background: #dc2626"]):not([style*="background: #15803d"]):not([style*="background: #0284c7"]):not([style*="background: #16a34a"]),
body.light-theme [style*="color: #f8fafc"],
body.light-theme [style*="color:#f8fafc"],
body.light-theme [style*="color: #f1f5f9"],
body.light-theme [style*="color:#f1f5f9"],
body.light-theme [style*="color: #e2e8f0"],
body.light-theme [style*="color:#e2e8f0"] {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.light-theme [style*="color: #94a3b8"],
body.light-theme [style*="color:#94a3b8"],
body.light-theme [style*="color: #cbd5e1"],
body.light-theme [style*="color:#cbd5e1"],
body.light-theme [style*="color: #64748b"],
body.light-theme [style*="color:#64748b"],
body.light-theme [style*="color: #9ca3af"],
body.light-theme [style*="color:#9ca3af"],
body.light-theme [style*="color: #a0aec0"],
body.light-theme [style*="color:#a0aec0"] {
  color: #1e293b !important;
  font-weight: 750 !important;
}

body.light-theme [style*="color: #38bdf8"],
body.light-theme [style*="color:#38bdf8"],
body.light-theme [style*="color: #00f2fe"],
body.light-theme [style*="color:#00f2fe"],
body.light-theme [style*="color: #00f3ff"],
body.light-theme [style*="color:#00f3ff"],
body.light-theme [style*="color: #06b6d4"],
body.light-theme [style*="color:#06b6d4"] {
  color: #0284c7 !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

body.light-theme [style*="color: #f87171"],
body.light-theme [style*="color:#f87171"],
body.light-theme [style*="color: #fca5a5"],
body.light-theme [style*="color:#fca5a5"],
body.light-theme [style*="color: #fb7185"],
body.light-theme [style*="color:#fb7185"] {
  color: #dc2626 !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

body.light-theme [style*="color: #4ade80"],
body.light-theme [style*="color:#4ade80"],
body.light-theme [style*="color: #86efac"],
body.light-theme [style*="color:#86efac"],
body.light-theme [style*="color: #34d399"],
body.light-theme [style*="color:#34d399"] {
  color: #15803d !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

body.light-theme [style*="color: #fbbf24"],
body.light-theme [style*="color:#fbbf24"],
body.light-theme [style*="color: #facc15"],
body.light-theme [style*="color:#facc15"],
body.light-theme [style*="color: #fde68a"],
body.light-theme [style*="color:#fde68a"] {
  color: #b45309 !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

body.light-theme [style*="color: #c084fc"],
body.light-theme [style*="color:#c084fc"],
body.light-theme [style*="color: #d8b4fe"],
body.light-theme [style*="color:#d8b4fe"],
body.light-theme [style*="color: #a78bfa"],
body.light-theme [style*="color:#a78bfa"] {
  color: #7e22ce !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

/* 7. Badges High Visibility in Light Theme */
body.light-theme .badge-danger,
body.light-theme .badge-2d-danger,
body.light-theme .badge-unpaid-paused,
body.light-theme .badge-unpaid-overdue {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1.5px solid #ef4444 !important;
  font-weight: 850 !important;
}

body.light-theme .badge-success,
body.light-theme .badge-2d-active,
body.light-theme .badge-3d-online {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1.5px solid #22c55e !important;
  font-weight: 850 !important;
}

body.light-theme .badge-warning,
body.light-theme .badge-2d-warning {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1.5px solid #f59e0b !important;
  font-weight: 850 !important;
}

body.light-theme .badge-info,
body.light-theme .badge-unpaid-promise {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1.5px solid #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .badge-secondary,
body.light-theme .badge-dark,
body.light-theme .badge-2d-disabled {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 800 !important;
}


/* ==========================================================================
   SYSTEM-WIDE DATA TABLES HIGH-CONTRAST ENGINE (DARK & LIGHT MODES)
   Dark Mode: Pure White (#ffffff) Phone Numbers, Customer Names, Areas & Packages
   Light Mode: Crisp Bold Jet Black (#0f172a), Deep Navy (#0284c7) & Crimson Red (#dc2626)
   ========================================================================== */

/* 1. Dark Mode Defaults (applies to default dark theme & body.dark-theme) */
.sub-fullname-link,
.sub-cell-phone,
.unpaid-cell-name,
.unpaid-cell-phone,
.unpaid-cell-pkg,
.ticket-customer-name,
.ticket-phone,
.cr-customer-name,
.cr-phone,
.cr-address,
.onu-sub-phone,
.otdr-sub-phone {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.sub-cell-phone i,
.unpaid-cell-phone i,
.ticket-phone i,
.cr-phone i,
.onu-sub-phone i,
.otdr-sub-phone i,
.unpaid-cell-date i,
.unpaid-cell-ip i {
  color: #38bdf8 !important;
}

.sub-cell-zone,
.ticket-area,
.cr-area,
.cr-area strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.sub-cell-zone {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.sub-cell-zone i,
.ticket-area i,
.cr-area i {
  color: #38bdf8 !important;
}

.sub-cell-mac-wrapper,
.sub-cell-mac,
.unpaid-cell-ip {
  color: #cbd5e1 !important;
  font-weight: 750 !important;
}

.sub-cell-mac-wrapper i {
  color: #38bdf8 !important;
}

.sub-username-link,
.unpaid-cell-username,
.ticket-username {
  color: #38bdf8 !important;
  font-weight: 850 !important;
}

.unpaid-cell-rate {
  color: #38bdf8 !important;
  font-weight: 750 !important;
}

.unpaid-cell-rate strong {
  color: #ffffff !important;
  font-weight: 850 !important;
}

.unpaid-cell-amount {
  color: #ef4444 !important;
  font-weight: 900 !important;
}

.unpaid-cell-date {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.unpaid-cell-pending {
  color: #cbd5e1 !important;
  font-weight: 800 !important;
}

.unpaid-cell-pending.has-pending {
  color: #f87171 !important;
  font-weight: 850 !important;
}

.unpaid-cell-dealer {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #e9d5ff !important;
  border: 1px solid rgba(168, 85, 247, 0.6) !important;
  font-weight: 850 !important;
}

.unpaid-cell-month-chip {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fecaca !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  font-weight: 850 !important;
}

.badge-unpaid-grace {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 850 !important;
}

.badge-unpaid-promise {
  background: rgba(2, 132, 199, 0.25) !important;
  color: #38bdf8 !important;
  border: 1.5px solid #0284c7 !important;
  font-weight: 850 !important;
}

/* 2. Light Theme Specific Overrides (body.light-theme) */
body.light-theme .sub-fullname-link,
body.light-theme .sub-cell-phone,
body.light-theme .unpaid-cell-name,
body.light-theme .unpaid-cell-phone,
body.light-theme .unpaid-cell-pkg,
body.light-theme .ticket-customer-name,
body.light-theme .ticket-phone,
body.light-theme .cr-customer-name,
body.light-theme .cr-phone,
body.light-theme .cr-address,
body.light-theme .onu-sub-phone,
body.light-theme .otdr-sub-phone {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .sub-cell-phone i,
body.light-theme .unpaid-cell-phone i,
body.light-theme .ticket-phone i,
body.light-theme .cr-phone i,
body.light-theme .onu-sub-phone i,
body.light-theme .otdr-sub-phone i,
body.light-theme .unpaid-cell-date i,
body.light-theme .unpaid-cell-ip i {
  color: #0284c7 !important;
}

body.light-theme .sub-cell-zone {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 800 !important;
}

body.light-theme .sub-cell-zone i {
  color: #0284c7 !important;
}

body.light-theme .sub-cell-mac-wrapper,
body.light-theme .sub-cell-mac,
body.light-theme .unpaid-cell-ip {
  color: #1e293b !important;
  font-weight: 750 !important;
}

body.light-theme .sub-cell-mac-wrapper i {
  color: #0284c7 !important;
}

body.light-theme .sub-username-link,
body.light-theme .unpaid-cell-username,
body.light-theme .ticket-username {
  color: #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-dealer {
  background: #f3e8ff !important;
  color: #7e22ce !important;
  border: 1.5px solid #a855f7 !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-rate {
  color: #0369a1 !important;
  font-weight: 750 !important;
}

body.light-theme .unpaid-cell-rate strong {
  color: #0f172a !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-amount {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

body.light-theme .unpaid-cell-date {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .unpaid-cell-pending {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.light-theme .unpaid-cell-pending.has-pending {
  color: #dc2626 !important;
  font-weight: 850 !important;
}

body.light-theme .unpaid-cell-month-chip {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
  border: 1.5px solid #ef4444 !important;
  font-weight: 850 !important;
}

body.light-theme .badge-unpaid-grace {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 850 !important;
}

body.light-theme .badge-unpaid-promise {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1.5px solid #0284c7 !important;
  font-weight: 850 !important;
}

body.light-theme .ticket-area {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .ticket-area i {
  color: #0284c7 !important;
}

body.light-theme .cr-area,
body.light-theme .cr-area strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .cr-area i {
  color: #0284c7 !important;
}