:root {
  /* Enterprise palette */
  --brand-primary: #1e3a8a; /* indigo-800 */
  --brand-primary-accent: #0ea5e9; /* sky-500 */
  --brand-surface: #f5f7fb; /* soft background */
  --brand-text: #0f172a; /* slate-900 */
  --brand-muted: #64748b; /* slate-500 */

  /* Bootstrap CSS variables override */
  --bs-primary: #2563eb; /* blue-600 */
  --bs-secondary: #64748b;
  --bs-success: #22c55e;
  --bs-info: #06b6d4;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;
  --bs-body-bg: var(--brand-surface);
  --bs-body-color: var(--brand-text);
  --bs-link-color: #1d4ed8;
  --bs-link-hover-color: #1e40af;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 60px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,247,251,1));
}

/* Auth page (futuristic secure look) */
.auth-hero {
  min-height: 100vh;
  /* Auth hero background: inspection-themed image with dark overlay; gradients and animated orbs remain */
  background: linear-gradient(0deg, rgba(5,10,20,0.45), rgba(5,10,20,0.45)),
              url('/uploads/Login-Background.png') center / cover no-repeat,
              radial-gradient(1200px 600px at 10% 0%, rgba(14,165,233,0.10), transparent 60%),
              radial-gradient(1200px 600px at 90% 30%, rgba(99,102,241,0.12), transparent 60%),
              linear-gradient(180deg, #0b1020, #0e1326 30%, #0b1020 100%);
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}
.auth-container { min-height: 100vh; }
.auth-wrap { width: 100%; max-width: 460px; }

/* Subtle animated background orbs */
.auth-hero:before, .auth-hero:after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .18;
  will-change: transform;
}
.auth-hero:before {
  top: -120px; left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.35), rgba(99,102,241,.15));
  animation: orbFloat1 22s ease-in-out infinite alternate;
}
.auth-hero:after {
  bottom: -140px; right: -160px;
  background: radial-gradient(circle at 60% 40%, rgba(99,102,241,.35), rgba(34,211,238,.12));
  animation: orbFloat2 28s ease-in-out infinite alternate;
}
@keyframes orbFloat1 {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(40px, 30px, 0) scale(1.08); }
}
@keyframes orbFloat2 {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-50px, -40px, 0) scale(1.06); }
}

.neon-card {
  position: relative;
  background: rgba(13,18,33,0.7);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 16px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(14,165,233,0.12);
  backdrop-filter: blur(10px);
}
.neon-card:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14,165,233,0.25), rgba(99,102,241,0.25));
  filter: blur(12px);
  z-index: 0;
}
.neon-card-body { position: relative; z-index: 1; padding: 28px; }

.btn-neon {
  background: linear-gradient(90deg, #22d3ee, #6366f1);
  border: 0;
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px -8px rgba(99,102,241,.7);
}
.btn-neon:hover { filter: brightness(1.05); }

.password-toggle {
  border-color: rgba(148,163,184,0.35);
  color: #cbd5e1;
}
.password-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

.lock-badge {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  margin-bottom: 8px;
  color: #a5b4fc;
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(34,211,238,0.12));
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25);
}

.captcha-display {
  user-select: none;
  letter-spacing: .4rem;
  font-weight: 700;
  font-size: 1.35rem;
  padding: 12px 16px;
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 8px, rgba(255,255,255,0.12) 8px 16px),
              linear-gradient(90deg, rgba(34,197,94,0.08), rgba(99,102,241,0.08));
  color: #e2e8f0;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 10px rgba(99,102,241,.6);
  transform: skewX(-6deg) rotate(-0.5deg);
  border: 1px dashed rgba(148,163,184,0.4);
}

.captcha-img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(99,102,241,0.35);
  background: rgba(15,23,42,0.4);
  box-shadow: 0 10px 30px -12px rgba(99,102,241,.45);
}

/* Inputs on dark auth page */
.auth-hero .form-label { color: #c7d2fe; font-weight: 600; }
.auth-hero .form-control {
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  border-color: rgba(148,163,184,0.25);
}
.auth-hero .form-control::placeholder { color: rgba(226,232,240,0.6); }
.auth-hero .form-control:focus {
  background: rgba(255,255,255,0.08);
  border-color: #6366f1;
  box-shadow: 0 0 0 .25rem rgba(99,102,241,.25);
}
.auth-hero .input-group-text {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  border-color: rgba(148,163,184,0.25);
}
.auth-hero .text-secondary { color: #94a3b8 !important; }

/* Breadcrumbs */
.app-breadcrumbs {
  background: #ffffff;
  border-bottom: 1px solid rgba(2,6,23,0.06);
}
.app-breadcrumbs .breadcrumb {
  margin: 0;
  padding: .75rem 0;
}

.navbar-gradient {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-accent) 100%);
}

.navbar .nav-link {
  color: rgba(255,255,255,0.9) !important;
}
.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: #ffffff !important;
}

.card {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 4px 18px -6px rgba(15,23,42,0.15);
}

.card-kpi {
  color: #fff;
  border: 0;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.3);
}
.kpi-1 { background: linear-gradient(135deg, #6366f1, #22d3ee); }
.kpi-2 { background: linear-gradient(135deg, #22c55e, #86efac); }
.kpi-3 { background: linear-gradient(135deg, #f59e0b, #fde68a); }
.kpi-4 { background: linear-gradient(135deg, #ef4444, #fb7185); }
.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  color: #fff;
}

.btn-primary {
  border-radius: .5rem;
  box-shadow: 0 6px 16px -6px rgba(37,99,235,0.6);
}
.btn-outline-primary {
  border-radius: .5rem;
}

.table thead th {
  background: #eef2ff;
  color: #1e3a8a;
  border-bottom: 0;
}
.table tbody tr:hover {
  background: rgba(37,99,235,0.04);
}

.form-label {
  font-weight: 600;
  color: var(--brand-muted);
}
.form-control, .form-select {
  border-radius: .5rem;
  border-color: rgba(2,6,23,0.1);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
}

.footer { background: #ffffff; }

/* Utility */
.shadow-soft { box-shadow: 0 8px 30px -10px rgba(0,0,0,.2); }

/* Chart containers */
canvas { filter: drop-shadow(0 6px 18px rgba(2,6,23,.08)); border-radius: 8px; }

/* Breadcrumbs */
.app-breadcrumb {
  background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(14,165,233,.06));
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 12px;
  padding: .6rem .9rem;
}
.breadcrumb { --bs-breadcrumb-divider: '›'; }
.breadcrumb .breadcrumb-item { display: flex; align-items: center; gap: .4rem; color: var(--brand-muted); }
.breadcrumb .breadcrumb-item a.crumb-link {
  text-decoration: none;
  color: #1d4ed8;
  background: #eef2ff;
  padding: .25rem .55rem;
  border-radius: 10px;
}
.breadcrumb .breadcrumb-item a.crumb-link:hover { background: #e0e7ff; }
.breadcrumb .breadcrumb-item.active span { font-weight: 600; color: var(--brand-text); }