/*
 * ABYSSAL NEON & CYBER-SPATIAL THEME
 * Virtual Reality Immersive Dashboard Styling
 */

:root {
  /* LIGHT MODE (Spatial Studio) */
  --is-bg: #F4F4F5;
  --is-surface: #FFFFFF;
  
  /* Text */
  --is-text: #18181B;
  --is-text-secondary: #71717A;
  --is-border: #E4E4E7;
  
  /* Accent (Neon Energy) */
  --is-primary-start: #6D28D9;
  --is-primary-end: #0284C7;
  --is-primary-glow: rgba(109, 40, 217, 0.4);
  --is-primary-text: #FFFFFF;
  
  --is-success: #10B981;
  --is-warning: #F59E0B;
  --is-danger:  #EF4444;
}

body.dark_mode {
  /* DARK MODE (The Void - Primary for VR) */
  --is-bg: #09090B; /* Vantablack */
  --is-surface: #18181B; /* Glass Panel / Elevate 1 */
  --is-surface-2: #27272A; /* Elevate 2 */
  
  /* Text */
  --is-text: #FAFAFA;
  --is-text-secondary: #A1A1AA;
  --is-border: rgba(255,255,255, 0.1); /* Laser Border */
  
  /* Accent (Neon Energy) */
  --is-primary-start: #8B5CF6; /* Cyber Purple */
  --is-primary-end: #06B6D4; /* Hologram Cyan */
  --is-primary-glow: rgba(139, 92, 246, 0.5);
  --is-primary-text: #FFFFFF;
}

/* Global Backgrounds & Typography */
body, #content-wrapper {
  background-color: var(--is-bg) !important;
  color: var(--is-text) !important;
  font-family: 'Inter', 'SF Pro', sans-serif !important;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--is-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

p, span, div, a {
  /* REMOVED: color: var(--is-text) — this was overriding ALL elements including
     buttons, badges, alerts, links, nav icons etc. causing widespread UI breakage.
     Text color is inherited from body which already sets var(--is-text). */
}

.text-gray-800, .text-gray-900 {
  color: var(--is-text) !important;
}
.text-gray-500, .text-gray-600 {
  color: var(--is-text-secondary) !important;
}

/* CARDS & PANELS */
.card, .panel {
  background-color: var(--is-surface) !important;
  border: 1px solid var(--is-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0.75rem !important;
  /* overflow: visible — critical for dropdowns inside cards */
  overflow: visible !important;
}

body.dark_mode .card, body.dark_mode .panel, body.dark_mode .modal-content {
  box-shadow: none !important;
}

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

.card-footer {
  background-color: var(--is-surface) !important;
  border-top: 1px solid var(--is-border) !important;
}

/* TOPBAR — no backdrop-filter (creates stacking context trapping modals) */
.navbar {
  background-color: var(--is-surface) !important;
  border-bottom: 1px solid var(--is-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  position: sticky;
  top: 0;
  z-index: 999 !important; /* BELOW Bootstrap modal z-index: 1050 */
}
.navbar .nav-link {
  color: var(--is-text-secondary) !important;
}
.navbar .nav-link:hover {
  color: var(--is-text) !important;
}

/* SIDEBAR */
.sidebar {
  background-color: var(--is-surface) !important;
  background-image: none !important;
  border-right: 1px solid var(--is-border) !important;
  box-shadow: none !important;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link i {
  color: var(--is-text-secondary) !important;
}

.sidebar .nav-item .nav-link span {
  font-weight: 600 !important;
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item.active .nav-link span {
  color: var(--is-text) !important;
  font-weight: 700 !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
}
.sidebar .nav-item.active .nav-link i {
  color: var(--is-primary-start) !important;
  text-shadow: 0 0 10px rgba(109, 40, 217, 0.2);
}
body.dark_mode .sidebar .nav-item.active .nav-link {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--is-text) !important;
}
body.dark_mode .sidebar .nav-item.active .nav-link i {
  color: var(--is-primary-end) !important;
  text-shadow: 0 0 12px var(--is-primary-glow);
}

.sidebar .nav-item .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}
.sidebar .nav-item .nav-link:hover span {
  color: var(--is-text) !important;
}
.sidebar .nav-item .nav-link:hover i {
  color: var(--is-primary-start) !important;
  transition: all 0.3s ease;
}
body.dark_mode .sidebar .nav-item .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
body.dark_mode .sidebar .nav-item .nav-link:hover span {
  color: var(--is-text) !important;
}
body.dark_mode .sidebar .nav-item .nav-link:hover i {
  color: var(--is-primary-end) !important;
}

.sidebar-brand-text {
  color: var(--is-text) !important;
}

/* BUTTONS */
.btn-primary, .btn-info, .btn-primary:active, .btn-primary:focus {
  background: linear-gradient(135deg, var(--is-primary-start) 0%, var(--is-primary-end) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px var(--is-primary-glow) !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover, .btn-info:hover {
  box-shadow: 0 8px 25px var(--is-primary-glow) !important;
  /* NO transform: translateY — it creates a stacking context that pushes
     buttons above Bootstrap modal backdrop z-index:1040, breaking modal clicks */
}

.btn-secondary {
  background-color: var(--is-surface) !important;
  border: 1px solid var(--is-border) !important;
  color: var(--is-text) !important;
}
.btn-secondary:hover {
  background-color: rgba(0,0,0,0.03) !important;
  color: var(--is-text) !important;
}
body.dark_mode .btn-secondary:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

/* INPUT FORMS */
.form-control, .custom-select {
  background-color: var(--is-bg) !important;
  border: 1px solid var(--is-border) !important;
  color: var(--is-text) !important;
  border-radius: 0.5rem !important;
}

.form-control:focus, .custom-select:focus {
  background-color: var(--is-surface) !important;
  border-color: var(--is-primary-start) !important; /* Neon focus */
  box-shadow: 0 0 0 2px var(--is-primary-glow) !important;
  color: var(--is-text) !important;
}

/* TABLES (Clean Data Reading) */
.table {
  color: var(--is-text) !important;
}
.table td, .table th {
  border-top: 1px solid var(--is-border) !important;
  border-bottom: 1px solid var(--is-border) !important;
}
.table thead th {
  border-bottom: 2px solid var(--is-border) !important;
  color: var(--is-text-secondary) !important;
  font-weight: 600 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}
body.dark_mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}
.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
body.dark_mode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* DROPDOWNS */
.dropdown-menu {
  background-color: var(--is-surface) !important;
  border: 1px solid var(--is-border) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
  border-radius: 0.5rem !important;
}
body.dark_mode .dropdown-menu {
  box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
.dropdown-item {
  color: var(--is-text) !important;
}
.dropdown-item:hover, .dropdown-item.active {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--is-text) !important;
}
body.dark_mode .dropdown-item:hover, body.dark_mode .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* MODALS */
.modal-content {
  background-color: var(--is-surface) !important;
  border: 1px solid var(--is-border) !important;
}
.modal-header {
  border-bottom: 1px solid var(--is-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--is-border) !important;
}

/* LOGO FIX (Drop-shadow for visibility on Dark Mode) */
.sidebar .sidebar-brand img,
.bg_login .col-md-12.text-center img {
  filter: drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.4));
  transition: all 0.3s ease;
}

/* ALERTS AND BADGES */
.alert {
  border-radius: 0.5rem !important;
  border: none !important;
}
body.dark_mode .alert-info {
  background-color: rgba(6, 182, 212, 0.15) !important;
  color: #67E8F9 !important;
}
body.dark_mode .alert-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #6EE7B7 !important;
}
body.dark_mode .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #FCD34D !important;
}
body.dark_mode .alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #FCA5A5 !important;
}

.badge {
  font-weight: 600 !important;
  padding: 0.35em 0.65em !important;
  border-radius: 0.25rem !important;
}
body.dark_mode .badge-light {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FAFAFA !important;
}
body.dark_mode .badge-dark {
  background-color: #000000 !important;
  color: #A1A1AA !important;
}