/* ═══════════════════════════════════════════════════════════════
   GRABBLY EVENTS — Modern Dark Design System v3
   Strategy: override ONLY colors / shadows / backgrounds / radii.
   Never touch: padding-left on main-content/footer, left/position
   on navbar, height/padding on sidebar items, font-size on icons,
   margin-right on sidebar i elements (double-gap bug), or width
   on stat-card icons (conflicts with components.css).
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --g-dark:       #07091A;
  --g-dark2:      #0C1130;
  --g-card:       rgba(12,17,48,0.80);
  --g-border:     rgba(108,99,255,0.20);
  --g-primary:    #6C63FF;
  --g-cyan:       #00D4FF;
  --g-pink:       #FF6B9D;
  --g-green:      #00E87A;
  --g-amber:      #FFB800;
  --g-red:        #FF4D6D;
  --g-text:       #DDE1FF;
  --g-muted:      #7B82B4;
  --g-glow:       0 0 18px rgba(108,99,255,0.30);
  --g-shadow:     0 16px 48px rgba(0,0,0,0.50);
  --g-r:          13px;
  --g-rs:         8px;
  --g-t:          all 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── Base ── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--g-dark) !important;
  color: var(--g-text) !important;
}

/* Animated gradient mesh — fixed, pointer-events none, z-index 0 */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 10% 5%,  rgba(108,99,255,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 12%,  rgba(0,212,255,0.06)  0%, transparent 55%),
    radial-gradient(ellipse 60% 35% at 50% 98%,  rgba(255,107,157,0.05)0%, transparent 55%);
}

/* Subtle dot grid — fixed, z-index 0 */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(108,99,255,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.4;
  animation: dotMove 40s linear infinite;
}
@keyframes dotMove {
  from { background-position: 0 0; }
  to   { background-position: 32px 32px; }
}

/* All content above bg layers */
.main-wrapper { position: relative; z-index: 1; }

/* ── Section-body entrance ── */
.section-body { animation: fadeUp 0.40s ease-out both; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════
   SIDEBAR — visual only
   DO NOT touch: width(250px), position(fixed),
   top, z-index, height of items, padding 0 20px
   on items, margin-right 20px on i, font-size on i
════════════════════════════════════════════ */
.main-sidebar {
  background: linear-gradient(180deg,
    rgba(10,13,36,0.98) 0%,
    rgba(7,9,26,0.99)  100%) !important;
  border-right: 1px solid var(--g-border) !important;
  box-shadow: 4px 0 28px rgba(0,0,0,0.55) !important;
}

/* Brand area */
.sidebar-brand {
  border-bottom: 1px solid var(--g-border);
  height: 60px !important;
  line-height: 60px !important;
}
.header-logo { filter: brightness(1.1) drop-shadow(0 0 8px rgba(108,99,255,0.4)); }

/* Menu headers */
.main-sidebar .sidebar-menu li.menu-header {
  color: rgba(108,99,255,0.7) !important;
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Menu item links — only change colors, not dimensions */
.main-sidebar .sidebar-menu li a {
  color: var(--g-muted) !important;
  /* height:50px, padding:0 20px, display:flex stay from style.css */
  transition: var(--g-t) !important;
  border-radius: 0 !important; /* keep flush */
}

.main-sidebar .sidebar-menu li a:hover {
  color: #fff !important;
  background: rgba(108,99,255,0.12) !important;
  text-decoration: none !important;
}

.main-sidebar .sidebar-menu li.active > a {
  color: #fff !important;
  background: rgba(108,99,255,0.15) !important;
  font-weight: 600 !important;
}

/* Active left accent bar */
.main-sidebar .sidebar-menu li.active > a::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 55%;
  background: linear-gradient(to bottom, var(--g-primary), var(--g-cyan));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--g-primary);
}

/* Icon colour only — DO NOT change width, margin-right, or font-size
   (style.css sets: width:28px, margin-right:20px, font-size:16px on i) */
.main-sidebar .sidebar-menu li a i,
.main-sidebar .sidebar-menu li a .fas,
.main-sidebar .sidebar-menu li a .fab,
.main-sidebar .sidebar-menu li a .far,
.main-sidebar .sidebar-menu li a .fal,
.main-sidebar .sidebar-menu li a .ion {
  color: var(--g-primary) !important;
  /* NO font-size, NO width, NO margin-right — preserved from base */
}

.main-sidebar .sidebar-menu li a:hover i,
.main-sidebar .sidebar-menu li a:hover .fas,
.main-sidebar .sidebar-menu li a:hover .fab,
.main-sidebar .sidebar-menu li a:hover .far,
.main-sidebar .sidebar-menu li.active > a i,
.main-sidebar .sidebar-menu li.active > a .fas,
.main-sidebar .sidebar-menu li.active > a .fab {
  color: var(--g-cyan) !important;
}

/* Dropdown menus inside sidebar — colours only */
.main-sidebar .sidebar-menu li ul.dropdown-menu {
  background: rgba(5,7,20,0.90) !important;
  border-left: 2px solid rgba(108,99,255,0.20) !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a {
  color: var(--g-muted) !important;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
  color: #fff !important;
  background: rgba(108,99,255,0.10) !important;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
  color: var(--g-cyan) !important;
}

/* ════════════════════════════════════════════
   NAVBAR — visual only, no left/position changes
════════════════════════════════════════════ */
.navbar-bg {
  background: linear-gradient(135deg,
    rgba(108,99,255,0.88), rgba(0,180,230,0.80)) !important;
}
.navbar {
  /* left:250px and position:absolute stay from style.css */
  background: rgba(8,12,32,0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--g-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.40) !important;
}
.navbar .nav-link { color: var(--g-muted) !important; transition: var(--g-t) !important; }
.navbar .nav-link:hover { color: #fff !important; }

.navbar .dropdown-menu {
  background: rgba(8,12,32,0.97) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow) !important;
  backdrop-filter: blur(18px);
  padding: 6px !important;
}
.navbar .dropdown-item { color: var(--g-muted) !important; border-radius: 6px !important; transition: var(--g-t) !important; }
.navbar .dropdown-item:hover { background: rgba(108,99,255,0.14) !important; color: #fff !important; }
.navbar .dropdown-divider { border-color: var(--g-border) !important; }

/* ════════════════════════════════════════════
   SECTION HEADER / BREADCRUMBS
════════════════════════════════════════════ */
.section-header {
  background: linear-gradient(135deg,
    rgba(12,17,48,0.90) 0%,
    rgba(16,22,58,0.90) 100%) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
  position: relative; overflow: hidden;
}
/* Shimmer top line */
.section-header::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height: 2px;
  background: linear-gradient(90deg,
    var(--g-primary), var(--g-cyan), var(--g-pink), var(--g-primary));
  background-size: 300% 100%;
  animation: shimBar 4s linear infinite;
}
@keyframes shimBar {
  from { background-position: 300% center; }
  to   { background-position: -300% center; }
}

.section-header h1 {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.breadcrumb-item       { color: var(--g-muted) !important; }
.breadcrumb-item a     { color: var(--g-primary) !important; }
.breadcrumb-item.active{ color: var(--g-text) !important; }

.section-title {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   CARDS — glassmorphism + lift on hover
════════════════════════════════════════════ */
.card {
  background: var(--g-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  animation: cardIn 0.38s ease-out both;
}
/* Subtle inner highlight */
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 50%);
  pointer-events: none; border-radius: inherit;
}
.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.45), 0 0 28px rgba(108,99,255,0.10) !important;
  border-color: rgba(108,99,255,0.32) !important;
}

/* Staggered entrance */
@keyframes cardIn {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.row>[class*="col-"]:nth-child(1) .card { animation-delay:.04s; }
.row>[class*="col-"]:nth-child(2) .card { animation-delay:.08s; }
.row>[class*="col-"]:nth-child(3) .card { animation-delay:.13s; }
.row>[class*="col-"]:nth-child(4) .card { animation-delay:.18s; }

.card-header {
  background: linear-gradient(135deg,
    rgba(108,99,255,0.09) 0%,
    rgba(0,212,255,0.04) 100%) !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) var(--g-r) 0 0 !important;
}
.card-header h4 { color: #fff !important; font-weight: 600 !important; margin: 0 !important; }
.card-body { color: var(--g-text) !important; }

/* ── Stat cards ── */
.card.card-statistic-1,
.card.card-statistic-2 {
  background: var(--g-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
}
.card.card-statistic-1:hover,
.card.card-statistic-2:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), var(--g-glow) !important;
}

/* Stat card icon container — colour gradients + glow.
   DO NOT set font-size here (components.css controls 22px on inner i) */
.card.card-statistic-1 .card-icon,
.card.card-statistic-2 .card-icon {
  border-radius: 12px !important;
  /* width/height stay from components.css */
}
.card.card-statistic-1 .card-icon.bg-primary,
.card.card-statistic-2 .card-icon.bg-primary {
  background: linear-gradient(135deg,#6C63FF,#9B94FF) !important;
  box-shadow: 0 6px 18px rgba(108,99,255,0.40) !important;
}
.card.card-statistic-1 .card-icon.bg-success,
.card.card-statistic-2 .card-icon.bg-success {
  background: linear-gradient(135deg,#00B851,#00E87A) !important;
  box-shadow: 0 6px 18px rgba(0,184,81,0.38) !important;
}
.card.card-statistic-1 .card-icon.bg-warning,
.card.card-statistic-2 .card-icon.bg-warning {
  background: linear-gradient(135deg,#D99400,#FFD54F) !important;
  box-shadow: 0 6px 18px rgba(217,148,0,0.38) !important;
}
.card.card-statistic-1 .card-icon.bg-danger,
.card.card-statistic-2 .card-icon.bg-danger {
  background: linear-gradient(135deg,#CC0035,#FF6B9D) !important;
  box-shadow: 0 6px 18px rgba(204,0,53,0.35) !important;
}
.card.card-statistic-1 .card-icon.bg-info,
.card.card-statistic-2 .card-icon.bg-info {
  background: linear-gradient(135deg,#0099BB,#00D4FF) !important;
  box-shadow: 0 6px 18px rgba(0,212,255,0.38) !important;
}

/* Stat card text */
.card.card-statistic-1 .card-wrap .card-header h4,
.card.card-statistic-2 .card-wrap .card-header h4 {
  color: var(--g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.card.card-statistic-1 .card-wrap .card-body,
.card.card-statistic-2 .card-wrap .card-body {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
}

/* ════════════════════════════════════════════
   TABLES
════════════════════════════════════════════ */
.table { color: var(--g-text) !important; }

.table thead th {
  color: var(--g-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-top: none !important;
  background: rgba(108,99,255,0.06) !important;
  white-space: nowrap;
}
.thead-light th {
  background: rgba(108,99,255,0.07) !important;
  color: var(--g-primary) !important;
  border-color: var(--g-border) !important;
}

.table tbody td {
  border-top: 1px solid rgba(108,99,255,0.07) !important;
  color: var(--g-text) !important;
  vertical-align: middle !important;
}
.table tbody tr:hover { background: rgba(108,99,255,0.08) !important; }

.table-striped tbody tr:nth-of-type(odd)  { background: rgba(5,7,20,0.50) !important; }
.table-striped tbody tr:nth-of-type(even) { background: rgba(12,17,48,0.30) !important; }
.table-striped tbody tr:hover { background: rgba(108,99,255,0.09) !important; }

.table-danger { background: rgba(255,77,109,0.07) !important; }

.table-img { border: 2px solid var(--g-border) !important; border-radius: var(--g-rs) !important; }

/* DataTables controls */
.dataTables_filter input,
.dataTables_length select {
  background: rgba(5,7,20,0.70) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text) !important;
  border-radius: 7px !important;
}
.dataTables_filter label,
.dataTables_length label,
.dataTables_info { color: var(--g-muted) !important; }

.dataTables_paginate .paginate_button {
  background: rgba(12,17,48,0.80) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-muted) !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  transition: var(--g-t) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg,var(--g-primary),var(--g-cyan)) !important;
  border-color: var(--g-primary) !important;
  color: #fff !important;
  box-shadow: var(--g-glow) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.30 !important;
  background: rgba(12,17,48,0.40) !important;
}

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  font-weight: 600 !important;
  border-radius: var(--g-rs) !important;
  transition: var(--g-t) !important;
}

.btn-primary {
  background: linear-gradient(135deg,var(--g-primary),#8B7EFF) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(108,99,255,0.35) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(108,99,255,0.50) !important;
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg,#00B851,#00E87A) !important;
  border: none !important; color: #002a14 !important;
  box-shadow: 0 3px 12px rgba(0,184,81,0.28) !important;
}
.btn-success:hover { transform: translateY(-1px) !important; color: #002a14 !important; }

.btn-warning {
  background: linear-gradient(135deg,#D99400,#FFD54F) !important;
  border: none !important; color: #241700 !important;
  box-shadow: 0 3px 12px rgba(217,148,0,0.28) !important;
}
.btn-warning:hover { transform: translateY(-1px) !important; color: #241700 !important; }

.btn-danger {
  background: linear-gradient(135deg,#CC0035,#FF6B9D) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(204,0,53,0.28) !important;
}
.btn-danger:hover { transform: translateY(-1px) !important; color: #fff !important; }

.btn-info {
  background: linear-gradient(135deg,#0099BB,#00D4FF) !important;
  border: none !important; color: #001922 !important;
  box-shadow: 0 3px 12px rgba(0,212,255,0.28) !important;
}
.btn-info:hover { transform: translateY(-1px) !important; color: #001922 !important; }

.btn-secondary {
  background: rgba(123,130,180,0.15) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text) !important;
}
.btn-secondary:hover {
  background: rgba(123,130,180,0.28) !important;
  border-color: rgba(108,99,255,0.35) !important;
  color: #fff !important; transform: translateY(-1px) !important;
}

.btn-outline-primary {
  border: 1px solid var(--g-primary) !important;
  color: var(--g-primary) !important;
  background: rgba(108,99,255,0.06) !important;
}
.btn-outline-primary:hover {
  background: var(--g-primary) !important;
  color: #fff !important; transform: translateY(-1px) !important;
}

.btn-outline-secondary {
  border: 1px solid var(--g-border) !important;
  color: var(--g-muted) !important; background: transparent !important;
}
.btn-outline-secondary:hover {
  background: rgba(108,99,255,0.10) !important;
  color: #fff !important; transform: translateY(-1px) !important;
}

/* Table action icon links — colour + subtle hover, NO scale transform */
.btn-icon {
  color: var(--g-muted) !important;
  transition: color 0.20s ease !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}
.btn-icon:hover { color: var(--g-primary) !important; background: rgba(108,99,255,0.10) !important; }
.btn-icon.text-danger       { color: var(--g-red) !important; }
.btn-icon.text-danger:hover { color: var(--g-red) !important; background: rgba(255,77,109,0.10) !important; }

/* add-button wrapper */
.add-button { background: none !important; border: none !important; padding: 0 !important; }
.add-button a { color: #fff !important; text-decoration: none !important; }

/* ════════════════════════════════════════════
   FORMS
════════════════════════════════════════════ */
.form-control,
.custom-select {
  background: rgba(5,7,20,0.65) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-rs) !important;
  color: var(--g-text) !important;
  transition: border-color 0.22s, box-shadow 0.22s !important;
}
.form-control:focus,
.custom-select:focus {
  background: rgba(10,14,40,0.85) !important;
  border-color: var(--g-primary) !important;
  box-shadow: 0 0 0 3px rgba(108,99,255,0.16) !important;
  color: #fff !important;
}
.form-control::placeholder { color: var(--g-muted) !important; opacity: 0.6; }

.form-group label {
  color: var(--g-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

select.form-control option { background: #0C1130 !important; color: var(--g-text) !important; }

.input-group-text {
  background: rgba(108,99,255,0.10) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-primary) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background: linear-gradient(135deg,var(--g-primary),var(--g-cyan)) !important;
  border-color: var(--g-primary) !important;
}

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
.badge {
  border-radius: 5px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.badge-success  { background:rgba(0,184,81,0.14)!important;  color:#00E87A!important; border:1px solid rgba(0,184,81,0.24)!important; }
.badge-warning  { background:rgba(217,148,0,0.14)!important; color:#FFD54F!important; border:1px solid rgba(217,148,0,0.24)!important; }
.badge-danger   { background:rgba(204,0,53,0.14)!important;  color:#FF6B9D!important; border:1px solid rgba(204,0,53,0.24)!important; }
.badge-info     { background:rgba(0,212,255,0.12)!important; color:#00D4FF!important; border:1px solid rgba(0,212,255,0.22)!important; }
.badge-primary  { background:rgba(108,99,255,0.14)!important;color:#9B94FF!important; border:1px solid rgba(108,99,255,0.24)!important; }
.badge-secondary{ background:rgba(123,130,180,0.12)!important;color:#9CA3D0!important;border:1px solid rgba(123,130,180,0.22)!important; }

/* ════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════ */
.alert {
  border-radius: var(--g-r) !important;
  font-weight: 500 !important;
}
.alert-success { background:rgba(0,184,81,0.10)!important;  color:#00E87A!important; border:1px solid rgba(0,184,81,0.22)!important; }
.alert-warning { background:rgba(217,148,0,0.10)!important; color:#FFD54F!important; border:1px solid rgba(217,148,0,0.22)!important; }
.alert-danger  { background:rgba(204,0,53,0.10)!important;  color:#FF6B9D!important; border:1px solid rgba(204,0,53,0.22)!important; }
.alert-info    { background:rgba(0,212,255,0.10)!important; color:#00D4FF!important; border:1px solid rgba(0,212,255,0.22)!important; }
.alert .close  { color:currentColor!important; opacity:0.65!important; }
.alert .close:hover { opacity:1!important; }

/* ════════════════════════════════════════════
   MODALS
════════════════════════════════════════════ */
.modal-content {
  background: rgba(8,12,32,0.97) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow), var(--g-glow) !important;
  backdrop-filter: blur(20px) !important;
  color: var(--g-text) !important;
}
.modal-header {
  border-bottom: 1px solid var(--g-border) !important;
  background: linear-gradient(135deg,rgba(108,99,255,0.09),rgba(0,212,255,0.04)) !important;
  border-radius: var(--g-r) var(--g-r) 0 0 !important;
}
.modal-title { color: #fff !important; font-weight: 700 !important; }
.modal-footer { border-top: 1px solid var(--g-border) !important; }
.close { color: var(--g-muted) !important; opacity: 1 !important; }
.close:hover { color: #fff !important; }

/* ════════════════════════════════════════════
   DROPDOWNS
════════════════════════════════════════════ */
.dropdown-menu {
  background: rgba(8,12,32,0.97) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow) !important;
  padding: 6px !important;
}
.dropdown-item { color: var(--g-muted) !important; border-radius: 6px !important; transition: var(--g-t) !important; }
.dropdown-item:hover { background: rgba(108,99,255,0.13) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--g-border) !important; }
.dropdown-header {
  color: var(--g-primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.main-footer {
  /* padding-left:280px and padding:20px 30px from style.css — preserved */
  background: rgba(5,7,20,0.88) !important;
  border-top: 1px solid var(--g-border) !important;
  color: var(--g-muted) !important;
}

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
.page-link {
  background: rgba(12,17,48,0.75) !important;
  border-color: var(--g-border) !important;
  color: var(--g-muted) !important;
  transition: var(--g-t) !important;
}
.page-link:hover,
.page-item.active .page-link {
  background: linear-gradient(135deg,var(--g-primary),var(--g-cyan)) !important;
  border-color: var(--g-primary) !important;
  color: #fff !important;
  box-shadow: var(--g-glow) !important;
}
.page-item.disabled .page-link { opacity: 0.30 !important; }

/* ════════════════════════════════════════════
   PROGRESS
════════════════════════════════════════════ */
.progress { background: rgba(12,17,48,0.75) !important; border-radius: 999px !important; }
.progress-bar {
  background: linear-gradient(90deg,var(--g-primary),var(--g-cyan)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(108,99,255,0.35);
}

/* ════════════════════════════════════════════
   NAV TABS
════════════════════════════════════════════ */
.nav-tabs { border-bottom: 1px solid var(--g-border) !important; }
.nav-tabs .nav-link { color: var(--g-muted) !important; border-radius: 7px 7px 0 0 !important; transition: var(--g-t) !important; border:1px solid transparent!important; }
.nav-tabs .nav-link:hover { color: var(--g-primary) !important; background: rgba(108,99,255,0.07) !important; }
.nav-tabs .nav-link.active { background: rgba(108,99,255,0.13) !important; border-color: var(--g-border) var(--g-border) transparent !important; color: #fff !important; }

/* ════════════════════════════════════════════
   SELECT2
════════════════════════════════════════════ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(5,7,20,0.65) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-rs) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--g-text) !important; }
.select2-dropdown { background: rgba(8,12,32,0.97) !important; border: 1px solid var(--g-border) !important; border-radius: 10px !important; }
.select2-results__option { color: var(--g-muted) !important; }
.select2-container--default .select2-results__option--highlighted { background: rgba(108,99,255,0.18) !important; color: #fff !important; }
.select2-search__field { background: rgba(5,7,20,0.80) !important; border: 1px solid var(--g-border) !important; border-radius: 7px !important; color: var(--g-text) !important; }

/* ════════════════════════════════════════════
   FLATPICKR
════════════════════════════════════════════ */
.flatpickr-calendar {
  background: rgba(8,12,32,0.97) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow) !important;
  color: var(--g-text) !important;
}
.flatpickr-day { color: var(--g-muted) !important; border-radius: 6px !important; }
.flatpickr-day:hover { background: rgba(108,99,255,0.18) !important; color: #fff !important; border-color: transparent !important; }
.flatpickr-day.selected { background: linear-gradient(135deg,var(--g-primary),var(--g-cyan)) !important; border-color: var(--g-primary) !important; color: #fff !important; }
.flatpickr-months, .flatpickr-month, .flatpickr-current-month { color: #fff !important; fill: #fff !important; }
.flatpickr-weekday { color: var(--g-primary) !important; }

/* ════════════════════════════════════════════
   SUMMERNOTE
════════════════════════════════════════════ */
.note-editor { border: 1px solid var(--g-border) !important; border-radius: var(--g-r) !important; }
.note-toolbar { background: rgba(8,12,32,0.90) !important; border-bottom: 1px solid var(--g-border) !important; border-radius: var(--g-r) var(--g-r) 0 0 !important; }
.note-editable { background: rgba(5,7,20,0.60) !important; color: var(--g-text) !important; }
.note-statusbar { background: rgba(5,7,20,0.80) !important; border-top: 1px solid var(--g-border) !important; }

/* ════════════════════════════════════════════
   SWEETALERT2
════════════════════════════════════════════ */
.swal2-popup {
  background: rgba(8,12,32,0.98) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow), var(--g-glow) !important;
  color: var(--g-text) !important;
}
.swal2-title { color: #fff !important; }
.swal2-html-container { color: var(--g-muted) !important; }

/* ════════════════════════════════════════════
   TIMELINE
════════════════════════════════════════════ */
.timeline-item,
.border-left.border-warning { border-left: 2px solid var(--g-primary) !important; }

/* ════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 { color: var(--g-text) !important; }

.text-muted   { color: var(--g-muted) !important; }
.text-primary { color: var(--g-primary) !important; }
.text-success { color: #00E87A !important; }
.text-danger  { color: var(--g-red) !important; }
.text-warning { color: var(--g-amber) !important; }
.text-info    { color: var(--g-cyan) !important; }
.text-white   { color: #fff !important; }

hr   { border-color: var(--g-border) !important; }
code { color: var(--g-cyan) !important; background: rgba(0,212,255,0.08) !important; padding: 2px 6px !important; border-radius: 4px !important; }

a { color: var(--g-primary) !important; }
a:hover { color: var(--g-cyan) !important; }

/* Preloader */
.preload { background: var(--g-dark) !important; }

/* Scrollbar */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--g-dark); }
::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-primary); }

::selection { background: rgba(108,99,255,0.35); color: #fff; }

/* ════════════════════════════════════════════
   RESPONSIVE
   Match breakpoints from style.css exactly
════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* body bg effects off on tablets */
  body::after { opacity: 0.2; }

  /* No hover lift on touch */
  .card:hover { transform: none !important; }
  .card.card-statistic-1:hover,
  .card.card-statistic-2:hover { transform: none !important; }

  .btn:hover { transform: none !important; }
}

@media (max-width: 767px) {
  .card { animation: none !important; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575px) {
  /* Remove background effects on very small screens for performance */
  body::before, body::after { display: none; }
}