/* GuardNova Premium SaaS Design System v5.0
   Uses template's native: body[data-sidebartype] + #main-wrapper
   ================================================================ */

/* ── TOKENS ── */
:root {
  --gn-blue:          #3B5BDB;
  --gn-purple:        #7C3AED;
  --gn-teal:          #00D4AA;
  --gn-gradient:      linear-gradient(135deg, #3B5BDB 0%, #7C3AED 100%);
  --gn-primary:       #3B5BDB;
  --gn-success:       #12B886;
  --gn-warning:       #F59F00;
  --gn-danger:        #FA5252;
  --gn-info:          #228BE6;
  --gn-bg:            #F4F6FB;
  --gn-card:          #FFFFFF;
  --gn-text:          #1A1D23;
  --gn-text-2:        #374151;
  --gn-muted:         #6B7280;
  --gn-border:        #E5E9F2;
  --gn-border-light:  #F0F3FA;
  --gn-r-sm: 10px; --gn-r: 14px; --gn-r-lg: 18px; --gn-r-xl: 24px;
  --gn-shadow:      0 2px 8px rgba(0,0,0,.06);
  --gn-shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --gn-shadow-lg:   0 8px 32px rgba(0,0,0,.10);
  --gn-shadow-card: 0 1px 3px rgba(59,91,219,.06), 0 4px 16px rgba(0,0,0,.05);
}

/* ── BASE ── */
body {
  font-family: 'Inter', sans-serif !important;
  background: var(--gn-bg) !important;
  color: var(--gn-text) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
}
#main-wrapper {
  overflow-x: hidden !important;
  min-width: 0 !important;
}

/* ================================================================
   SIDEBAR — targets template's .left-sidebar
   ================================================================ */
.left-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #E5E9F2 !important;
  box-shadow: 2px 0 16px rgba(0,0,0,.06) !important;
}

/* ── Brand logo area ── */
.brand-logo,
.left-sidebar .brand-logo {
  background: #ffffff !important;
  border-bottom: 1px solid #F0F3FA !important;
  padding: 0 12px !important;
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Full logo link */
.brand-logo .logo-img {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

/* Icon-only link — hidden by default, shown in mini mode */
.brand-logo .logo-icon {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.brand-logo .logo-icon img {
  height: 36px !important;
  width: 36px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Full logo img — explicit show */
.brand-logo .logo-img img {
  height: 60px !important;
  width: auto !important;
  max-width: 155px !important;
  object-fit: contain !important;
  display: block;
}

/* ── Mini sidebar — template sets body[data-sidebartype="mini-sidebar"] ── */
/* Template handles width (87px) and hide-menu hiding natively */
/* We just need to handle logo swap and icon-pill centering */
body[data-sidebartype="mini-sidebar"] .brand-logo {
  justify-content: center !important;
  padding: 0 8px !important;
}
body[data-sidebartype="mini-sidebar"] .brand-logo .logo-img {
  display: none !important;
}
body[data-sidebartype="mini-sidebar"] .brand-logo .logo-icon {
  display: flex !important;
}
/* Show icon-pill centered in mini mode */
body[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-item > .sidebar-link {
  justify-content: center !important;
  padding: 9px !important;
  gap: 0 !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-item > .sidebar-link.has-arrow::after {
  display: none !important;
}
/* On hover, restore full layout */
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .brand-logo {
  justify-content: flex-start !important;
  padding: 0 14px !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .brand-logo .logo-img {
  display: flex !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .brand-logo .logo-icon {
  display: none !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item > .sidebar-link {
  justify-content: flex-start !important;
  padding: 7px 10px !important;
  gap: 11px !important;
}
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item > .sidebar-link.has-arrow::after {
  display: inline-block !important;
}

/* ── Sidebar scroll area ── */
.scroll-sidebar { background: transparent !important; }
.sidebar-nav { background: transparent !important; }
/* Override template's 24px padding — simplebar copies this as inline style */
.left-sidebar .scroll-sidebar {
  padding: 0 !important;
}
/* Override the inline style simplebar sets on .simplebar-content */
/* !important beats inline styles */
.left-sidebar .scroll-sidebar .simplebar-content,
.left-sidebar .simplebar-content {
  padding: 0 !important;
}

/* ── Nav lists ── */
.sidebar-nav ul#sidebarnav {
  padding: 15px !important;
  margin: 0 !important;
  list-style: none !important;
}
.sidebar-nav ul.first-level,
.sidebar-nav ul.second-level,
.sidebar-nav ul.two-level {
  padding: 2px 0 2px 6px !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Section caps */
.sidebar-nav .nav-small-cap {
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  padding: 14px 8px 4px !important;
}

/* ── Sidebar item ── */
.sidebar-nav .sidebar-item { margin-bottom: 1px !important; list-style: none !important; }

/* ── Sidebar link base ── */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px 7px 8px !important;
  border-radius: 10px !important;
  color: #4B5563 !important;
  font-weight: 500 !important;
  font-size: .875rem !important;
  text-decoration: none !important;
  transition: all .18s ease !important;
  position: relative !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: transparent !important;
}

/* ── Icon pill ── */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link > .icon-pill {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F3F4F6 !important;
  transition: all .18s ease !important;
  flex-shrink: 0 !important;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link > .icon-pill .ti,
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link > .icon-pill i {
  font-size: 1.05rem !important;
  color: #4B5563 !important;
  transition: color .18s ease !important;
}

/* ── Arrow — right-side chevron like WowDash ── */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.has-arrow::after {
  content: '\ea61' !important;
  font-family: 'tabler-icons' !important;
  /*font-size: .75rem !important;*/
  line-height: 1 !important;
  color: #9CA3AF !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  /*width: auto !important;*/
  height: auto !important;
  border: none !important;
  transform: rotate(0deg) !important;
  transition: transform .22s ease, color .18s ease !important;
  top: auto;
  bottom: auto;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active.has-arrow::after {
  transform: rotate(90deg) !important;
  color: #3B5BDB !important;
}

/* ── HOVER ── */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link:hover {
  background: #F3F4F6 !important;
  color: #3B5BDB !important;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link:hover > .icon-pill {
  background: #EEF2FF !important;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link:hover > .icon-pill .ti,
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link:hover > .icon-pill i {
  color: #3B5BDB !important;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link:hover.has-arrow::after {
  color: #3B5BDB !important;
}

/* ── ACTIVE ── */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active {
  background: #EEF2FF !important;
  color: #3B5BDB !important;
  font-weight: 600 !important;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active > .icon-pill {
  background: linear-gradient(135deg, #3B5BDB 0%, #7C3AED 100%) !important;
  box-shadow: 0 4px 12px rgba(59,91,219,.35) !important;
}
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active > .icon-pill .ti,
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active > .icon-pill i {
  color: #fff !important;
}
/* Active left bar */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 20px !important;
  background: linear-gradient(135deg, #3B5BDB, #7C3AED) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* ── Sub-menu container ── */
.sidebar-nav ul.first-level,
.sidebar-nav ul.second-level,
.sidebar-nav ul.two-level {
  padding: 2px 0 4px 10px !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── Sub-menu links ── */
.left-sidebar .sidebar-nav .first-level .sidebar-item > .sidebar-link,
.left-sidebar .sidebar-nav .second-level .sidebar-item > .sidebar-link,
.left-sidebar .sidebar-nav .two-level .sidebar-item > .sidebar-link {
  padding: 6px 10px 6px 6px !important;
  font-size: .835rem !important;
  gap: 8px !important;
  border-radius: 8px !important;
  color: #6B7280 !important;
  background: transparent !important;
}
.left-sidebar .sidebar-nav .first-level .sidebar-item > .sidebar-link:hover,
.left-sidebar .sidebar-nav .second-level .sidebar-item > .sidebar-link:hover,
.left-sidebar .sidebar-nav .two-level .sidebar-item > .sidebar-link:hover {
  background: #F3F4F6 !important;
  color: #3B5BDB !important;
}
.left-sidebar .sidebar-nav .first-level .sidebar-item > .sidebar-link.active,
.left-sidebar .sidebar-nav .second-level .sidebar-item > .sidebar-link.active,
.left-sidebar .sidebar-nav .two-level .sidebar-item > .sidebar-link.active {
  background: #EEF2FF !important;
  color: #3B5BDB !important;
  font-weight: 600 !important;
}
/* Sub-item arrow (for nested has-arrow) */
.left-sidebar .sidebar-nav .first-level .sidebar-item > .sidebar-link.has-arrow::after,
.left-sidebar .sidebar-nav .two-level .sidebar-item > .sidebar-link.has-arrow::after {
  content: '\ea61' !important;
  font-family: 'tabler-icons' !important;
  font-size: .7rem !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  transform: rotate(0deg) !important;
  color: #9CA3AF !important;
}
.left-sidebar .sidebar-nav .first-level .sidebar-item > .sidebar-link.active.has-arrow::after,
.left-sidebar .sidebar-nav .two-level .sidebar-item > .sidebar-link.active.has-arrow::after {
  transform: rotate(90deg) !important;
  color: #3B5BDB !important;
}

/* Sub-item colored dot */
.sidebar-nav .round-16 {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 50% !important;
  background: #CBD5E1 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: background .18s ease !important;
}
/* Hide the ti-circle icon inside — dot comes from round-16 background */
.sidebar-nav .round-16 i { display: none !important; }
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link:hover .round-16 { background: #3B5BDB !important; }
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.active .round-16 { background: #3B5BDB !important; }

/* ─â/* -- Profile card -- */
.fixed-profile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 12px 14px !important;
  padding: 10px 12px !important;
  background: rgba(79,70,229,.07) !important;
  border: 1px solid rgba(79,70,229,.14) !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  position: relative !important;
}
.fixed-profile .profile-avatar {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.fixed-profile .profile-avatar img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid rgba(79,70,229,.3) !important;
}
.fixed-profile .profile-avatar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 9px !important;
  height: 9px !important;
  background: #22C55E !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
}
.fixed-profile .profile-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.fixed-profile .profile-info h6 {
  color: #0F172A !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fixed-profile .profile-info span {
  color: #6B7280 !important;
  font-size: .7rem !important;
  text-transform: capitalize !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.fixed-profile .profile-info span::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22C55E !important;
  flex-shrink: 0 !important;
}
.fixed-profile .profile-logout { margin: 0 !important; }
.fixed-profile .profile-logout .btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(79,70,229,.2) !important;
  color: #4F46E5 !important;
  background: rgba(79,70,229,.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .18s !important;
}
.fixed-profile .profile-logout .btn:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #fff !important;
}
.fixed-profile .profile-logout .btn i { margin: 0 !important; font-size: 1rem !important; }
/* Disabled sidebar */
.menubar_disabled .sidebar-item:not(:first-child) .sidebar-link {
  opacity: .38 !important;
  pointer-events: none !important;
}

/* ================================================================
   TOPBAR / HEADER
   ================================================================ */
header.topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #E5E9F2 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
}
header.topbar .navbar { padding: 0 24px !important; }
header.topbar .nav-link { color: #4B5563 !important; }
header.topbar .nav-icon-hover {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .18s ease !important;
}
header.topbar .nav-icon-hover:hover {
  background: #F3F4F6 !important;
  color: #3B5BDB !important;
}
header.topbar .notification {
  width: 8px !important;
  height: 8px !important;
  background: #FA5252 !important;
  border: 2px solid #fff !important;
}
header.topbar .user-profile-img img {
  border-radius: 50% !important;
  border: 2px solid #E5E9F2 !important;
}

/* ================================================================
   PAGE WRAPPER
   ================================================================ */
.page-wrapper {
  background: var(--gn-bg) !important;
  min-height: 100vh !important;
}
.body-wrapper {
  padding-top: calc(70px + 20px) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 20px !important;
}
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  padding-left: 24px !important;
  padding-right: 24px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.page-wrapper {
  overflow-x: hidden !important;
  min-width: 0 !important;
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: #ffffff !important;
  border: 1px solid #E5E9F2 !important;
  border-radius: var(--gn-r) !important;
  box-shadow: var(--gn-shadow-card) !important;
  transition: box-shadow .2s ease !important;
}
.card:hover { box-shadow: var(--gn-shadow-md) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid #F0F3FA !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  color: #1A1D23 !important;
}
.card-body { padding: 20px !important; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid #F0F3FA !important;
  padding: 14px 20px !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  border-radius: var(--gn-r-sm) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  padding: 8px 18px !important;
  transition: all .18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px !important;
}
.btn-primary {
  background: var(--gn-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59,91,219,.3) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #2f4ec4 0%, #6d28d9 100%) !important;
  box-shadow: 0 6px 18px rgba(59,91,219,.4) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-outline-primary {
  border: 1.5px solid #3B5BDB !important;
  color: #3B5BDB !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: #3B5BDB !important;
  color: #fff !important;
}
.btn-success { background: #12B886 !important; border-color: #12B886 !important; color: #fff !important; }
.btn-danger  { background: #FA5252 !important; border-color: #FA5252 !important; color: #fff !important; }
.btn-warning { background: #F59F00 !important; border-color: #F59F00 !important; color: #fff !important; }
.btn-sm { padding: 5px 12px !important; font-size: .8rem !important; border-radius: 8px !important; }
.btn-lg { padding: 11px 24px !important; font-size: .95rem !important; }

/* ================================================================
   TABLES
   ================================================================ */
.table { font-size: .875rem !important; }
.table thead th {
  background: #F8FAFF !important;
  color: #374151 !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #E5E9F2 !important;
  white-space: nowrap !important;
}
.table tbody tr:hover td { background: #F8FAFF !important; }
.table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #F0F3FA !important;
  color: #374151 !important;
  vertical-align: middle !important;
}
.table-bordered td, .table-bordered th { border-color: #E5E9F2 !important; }

/* ================================================================
   FORMS
   ================================================================ */
.form-control, .form-select {
  border: 1.5px solid #E5E9F2 !important;
  border-radius: var(--gn-r-sm) !important;
  padding: 9px 14px;
  font-size: .875rem !important;
  color: #1A1D23 !important;
  background: #fff !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.form-control:focus, .form-select:focus {
  border-color: #3B5BDB !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,91,219,.12) !important;
}
.form-control::placeholder { color: #9CA3AF !important; }
.form-label {
  font-weight: 600 !important;
  font-size: .82rem !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}
.input-group-text {
  background: #F8FAFF !important;
  border: 1.5px solid #E5E9F2 !important;
  color: #6B7280 !important;
  border-radius: var(--gn-r-sm) !important;
}
.form-check-input:checked {
  background-color: #3B5BDB !important;
  border-color: #3B5BDB !important;
}

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 4px 7px !important;
  border-radius: 20px !important;
}
.badge.bg-primary, .badge.text-bg-primary { background: #EEF2FF !important; color: #3B5BDB !important; }
.badge.bg-success, .badge.text-bg-success { background: #ECFDF5 !important; color: #01BEC0 !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: #FEF2F2 !important; color: #DC2626 !important; }
.badge.bg-warning, .badge.text-bg-warning { background: #FFFBEB !important; color: #D97706 !important; }
.badge.bg-info,    .badge.text-bg-info    { background: #EFF6FF !important; color: #2563EB !important; }
.badge.bg-secondary { background: #F3F4F6 !important; color: #6B7280 !important; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--gn-r-xl) !important;
  box-shadow: var(--gn-shadow-lg) !important;
}
.modal-header {
  border-bottom: 1px solid #F0F3FA !important;
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 100%) !important;
  border-radius: var(--gn-r-xl) var(--gn-r-xl) 0 0 !important;
}
.modal-title { font-weight: 700 !important; font-size: 1rem !important; color: #1A1D23 !important; }
.modal-body { padding: 24px !important; }
.modal-footer {
  border-top: 1px solid #F0F3FA !important;
  padding: 16px 24px !important;
  background: #FAFBFF !important;
  border-radius: 0 0 var(--gn-r-xl) var(--gn-r-xl) !important;
}

/* ================================================================
   ALERTS
   ================================================================ */
.alert {
  border: none !important;
  border-radius: var(--gn-r) !important;
  padding: 14px 18px !important;
  border-left: 4px solid transparent !important;
}
.alert-primary { background: #EEF2FF !important; color: #3B5BDB !important; border-left-color: #3B5BDB !important; }
.alert-success { background: #ECFDF5 !important; color: #059669 !important; border-left-color: #059669 !important; }
.alert-danger   { background: #FEF2F2 !important; color: #DC2626 !important; border-left-color: #DC2626 !important; }
.alert-warning  { background: #FFFBEB !important; color: #D97706 !important; border-left-color: #D97706 !important; }

/* ================================================================
   TABS & PILLS
   ================================================================ */
.nav-tabs { border-bottom: 2px solid #E5E9F2 !important; gap: 4px !important; }
.nav-tabs .nav-link {
  border: none !important;
  border-radius: 0 !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  margin-bottom: -2px !important;
}
.nav-tabs .nav-link:hover { color: #3B5BDB !important; background: transparent !important; }
.nav-tabs .nav-link.active {
  color: #3B5BDB !important;
  border-bottom: 2px solid #3B5BDB !important;
  background: transparent !important;
  font-weight: 700 !important;
}
.nav-pills .nav-link {
  border-radius: 10px !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}
.nav-pills .nav-link.active {
  background: var(--gn-gradient) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59,91,219,.3) !important;
}

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination { gap: 4px !important; }
.page-link {
  border: 1.5px solid #E5E9F2 !important;
  border-radius: 8px !important;
  color: #4B5563 !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  padding: 6px 12px !important;
}
.page-link:hover { background: #EEF2FF !important; border-color: #3B5BDB !important; color: #3B5BDB !important; }
.page-item.active .page-link {
  background: var(--gn-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.page-item.disabled .page-link { opacity: .4 !important; }

/* ================================================================
   DROPDOWNS
   ================================================================ */
.dropdown-menu {
  border: 1px solid #E5E9F2 !important;
  border-radius: var(--gn-r) !important;
  box-shadow: var(--gn-shadow-lg) !important;
  padding: 6px !important;
  font-size: .875rem !important;
}
.dropdown-item {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  transition: all .15s ease !important;
}
.dropdown-item:hover { background: #F3F4F6 !important; color: #3B5BDB !important; }
.dropdown-item.active, .dropdown-item:active { background: #EEF2FF !important; color: #3B5BDB !important; }
.content-dd { min-width: 320px !important; border-radius: var(--gn-r-lg) !important; }

/* ================================================================
   DATATABLES
   ================================================================ */
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid #E5E9F2 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: .875rem !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #3B5BDB !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid #E5E9F2 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  padding: 5px 10px !important;
  border: 1.5px solid #E5E9F2 !important;
  color: #4B5563 !important;
  margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #EEF2FF !important;
  border-color: #3B5BDB !important;
  color: #3B5BDB !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--gn-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.dataTables_info { font-size: .82rem !important; color: #6B7280 !important; }

/* ================================================================
   SELECT2
   ================================================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid #E5E9F2 !important;
  border-radius: var(--gn-r-sm) !important;
  min-height: 40px !important;
  padding: 4px 10px !important;
  font-size: .875rem !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #3B5BDB !important;
  box-shadow: 0 0 0 3px rgba(59,91,219,.12) !important;
}
.select2-dropdown {
  border: 1px solid #E5E9F2 !important;
  border-radius: var(--gn-r) !important;
  box-shadow: var(--gn-shadow-lg) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: #EEF2FF !important;
  color: #3B5BDB !important;
}

/* ================================================================
   FULLCALENDAR
   ================================================================ */
.fc { font-family: 'Inter', sans-serif !important; }
.fc .fc-toolbar-title { font-size: 1rem !important; font-weight: 700 !important; color: #1A1D23 !important; }
.fc .fc-button {
  background: #fff !important;
  border: 1.5px solid #E5E9F2 !important;
  color: #4B5563 !important;
  border-radius: 8px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
}
.fc .fc-button:hover { background: #EEF2FF !important; border-color: #3B5BDB !important; color: #3B5BDB !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--gn-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.fc .fc-col-header-cell { background: #F8FAFF !important; }
.fc .fc-col-header-cell-cushion {
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  padding: 10px 8px !important;
}
.fc .fc-daygrid-day.fc-day-today { background: rgba(59,91,219,.05) !important; }
.fc .fc-event {
  border: none !important;
  border-radius: 6px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  padding: 2px 6px;
}
.fc-theme-standard td, .fc-theme-standard th { border-color: #F0F3FA !important; }

/* ================================================================
   SWEETALERT2
   ================================================================ */
.swal2-popup {
  border-radius: var(--gn-r-xl) !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: var(--gn-shadow-lg) !important;
  padding: 32px !important;
}
.swal2-title { font-size: 1.1rem !important; font-weight: 700 !important; color: #1A1D23 !important; }
.swal2-html-container { font-size: .875rem !important; color: #6B7280 !important; }
.swal2-confirm {
  background: var(--gn-gradient) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
}
.swal2-cancel {
  background: #F3F4F6 !important;
  color: #374151;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: #1A1D23 !important;
}
.text-muted { color: #6B7280 !important; }

/* ================================================================
   SCROLLBAR / PRELOADER / MISC
   ================================================================ */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: #F3F4F6 !important; }
::-webkit-scrollbar-thumb { background: #D1D5DB !important; border-radius: 10px !important; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF !important; }

.preloader {
  background: #fff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader .loder-spiner img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

.customizer-btn {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--gn-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(59,91,219,.4) !important;
  z-index: 1060 !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 767.98px) {
  .body-wrapper {
    padding-top: calc(70px + 16px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
  }
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl { padding-left: 16px !important; padding-right: 16px !important; }
  .card-body { padding: 16px !important; }
  header.topbar .navbar { padding: 0 16px !important; }
}

/* ================================================================
   APP TOGGLER — animated hamburger → X
   ================================================================ */
.app-toggler {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.app-toggler span {
  display: block;
  height: 2px;
  background: #4B5563;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
  transform-origin: center;
}
.app-toggler span:nth-child(1) { width: 22px; }
.app-toggler span:nth-child(2) { width: 16px; }
.app-toggler span:nth-child(3) { width: 22px; }

/* Active (mini-sidebar open) → X */
body[data-sidebartype="mini-sidebar"] .app-toggler span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
  width: 22px !important;
}
body[data-sidebartype="mini-sidebar"] .app-toggler span:nth-child(2) {
  opacity: 0 !important;
  width: 0 !important;
}
body[data-sidebartype="mini-sidebar"] .app-toggler span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
  width: 22px !important;
}

/* Hover tint */
.nav-link:hover .app-toggler span { background: #3B5BDB; }

/* ================================================================
   STAT CARDS — modern icon pill layout
   ================================================================ */
.stat-card {
  border-radius: var(--gn-r) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.stat-card:hover {
  box-shadow: var(--gn-shadow-md) !important;
  transform: translateY(-2px) !important;
}
.stat-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.stat-icon-wrap .ti {
  font-size: 1.5rem !important;
}