:root {
  --cyber-blue: #0ea5e9;
  --cyber-green: #10b981;
  --cyber-red: #ef4444;
  --cyber-bg: #0b0f19;
  --card-bg: rgba(17, 24, 39, 0.7);
}

body { 
  background-color: var(--cyber-bg); 
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(14, 165, 233, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 25%);
  background-attachment: fixed;
  color: #e2e8f0; 
  font-size: 0.9rem; 
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, .navbar-brand, .fw-bold {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.5px;
}

.navbar.bg-dark {
  background-color: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(14, 165, 233, 0.2);
}

.nav-tabs { border-bottom: 1px solid rgba(14, 165, 233, 0.2); }
.nav-tabs .nav-link { 
  color: #94a3b8; 
  border: none; 
  font-weight: 600; 
  transition: 0.3s all ease;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--cyber-blue); }
.nav-tabs .nav-link.active { 
  background-color: transparent !important; 
  color: var(--cyber-blue) !important; 
  border-bottom: 2px solid var(--cyber-blue) !important;
  border-radius: 0;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
}

.card { 
  background: var(--card-bg) !important; 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08); 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); 
  border-radius: 12px; 
}

.choice-box {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.choice-box:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.2) !important; 
  border-color: var(--cyber-blue) !important; 
}

.table-wrapper { 
  max-height: 500px; 
  overflow-y: auto; 
  border: 1px solid rgba(255,255,255,0.1); 
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
}
.sticky-header thead th, .table-dark th, .table-secondary th, .table-primary th { 
  position: sticky; 
  top: 0; 
  background: #1e293b !important; 
  z-index: 10; 
  border-bottom: 2px solid var(--cyber-blue) !important;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  color: #e2e8f0 !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(255, 255, 255, 0.02) !important;
}
.table-striped>tbody>tr:hover>* {
  background-color: rgba(14, 165, 233, 0.05) !important;
}
table.table { margin-bottom: 0; border-color: rgba(255, 255, 255, 0.05); color: #cbd5e1; }
table td { font-family: 'Fira Code', monospace; font-size: 0.85rem; vertical-align: middle; }

.form-control, .form-select, input[type="text"], input[type="number"], input[type="datetime-local"] {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
}
.form-control:focus {
  background-color: #020617 !important;
  border-color: var(--cyber-blue) !important;
  box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25) !important;
}
.form-control::placeholder { color: #475569 !important; }
.form-control[readonly] { background-color: #1e293b !important; opacity: 0.7; }

.customer-grid { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  background: #0f172a; 
  padding: 12px; 
  border-radius: 8px; 
  border: 1px dashed #334155;
}
.form-check-label { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: #cbd5e1; }

.loading-overlay { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgba(11, 15, 25, 0.9); 
  backdrop-filter: blur(5px);
  z-index: 9999; display: none; justify-content: center; align-items: center; 
}
.spinner-border { color: var(--cyber-blue) !important; }

.badge {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 0.4rem 0.6rem !important;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.bg-success { background-color: rgba(16, 185, 129, 0.2) !important; color: #10b981 !important; border: 1px solid #10b981; }
.bg-danger { background-color: rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; border: 1px solid #ef4444; }
.bg-warning { background-color: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; border: 1px solid #fcd34d; }
.bg-dark { background-color: rgba(148, 163, 184, 0.2) !important; color: #f8fafc !important; border: 1px solid #94a3b8; }

.progress { background-color: #1e293b; border-radius: 4px; overflow: hidden; border: 1px solid #334155; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.progress-bar { background: linear-gradient(90deg, #0284c7, #0ea5e9); font-weight: bold; font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.btn { font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; border-radius: 6px; }
.btn-primary { background-color: #0284c7; border-color: #0284c7; }
.btn-primary:hover { background-color: #0369a1; border-color: #0369a1; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); }
.btn-success { background-color: #059669; border-color: #059669; }
.btn-success:hover { background-color: #047857; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
.btn-outline-primary { color: var(--cyber-blue); border-color: var(--cyber-blue); }
.btn-outline-primary:hover { background-color: var(--cyber-blue); color: #fff; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); }
.btn-outline-secondary { color: #94a3b8; border-color: #64748b; }
.btn-outline-secondary:hover { background-color: #475569; color: white; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyber-blue); }

.text-dark { color: #f8fafc !important; }
.text-muted { color: #94a3b8 !important; }
.text-primary { color: var(--cyber-blue) !important; }
.text-success { color: var(--cyber-green) !important; }
.text-purple { color: #d946ef !important; }

#portal-view .text-primary { color: var(--cyber-blue) !important; text-shadow: 0 0 10px rgba(14, 165, 233, 0.3); }
#portal-view .border-primary { border-color: rgba(14, 165, 233, 0.5) !important; }

#cust-filter .form-check-label { color: #0ea5e9 !important; }