/* ================================================================
   KConnect Admin — Razorpay-Inspired Design System
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  --kc-primary:          #2563EB;
  --kc-primary-dark:     #1D4ED8;
  --kc-primary-light:    #EFF6FF;
  --kc-primary-mid:      #BFDBFE;
  --kc-primary-rgb:      37, 99, 235;

  --kc-bg:               #F4F6FA;
  --kc-surface:          #FFFFFF;
  --kc-border:           #E2E8F0;
  --kc-border-light:     #F1F5F9;

  --kc-text-primary:     #0F172A;
  --kc-text-secondary:   #475569;
  --kc-text-muted:       #94A3B8;

  --kc-success:          #16A34A;
  --kc-success-light:    #F0FDF4;
  --kc-warning:          #D97706;
  --kc-warning-light:    #FFFBEB;
  --kc-error:            #DC2626;
  --kc-error-light:      #FEF2F2;
  --kc-info:             #0891B2;
  --kc-info-light:       #F0F9FF;
  --kc-purple:           #7C3AED;
  --kc-purple-light:     #F5F3FF;

  --kc-sidebar-bg:       #1A2236;
  --kc-sidebar-hover:    #243047;
  --kc-sidebar-active:   #2563EB;
  --kc-sidebar-text:     rgba(255, 255, 255, 0.68);
  --kc-sidebar-icon:     rgba(255, 255, 255, 0.45);
  --kc-sidebar-width:    250px;
  --kc-sidebar-sm:       70px;

  --kc-topbar-height:    60px;

  --kc-radius-xs:        4px;
  --kc-radius-sm:        6px;
  --kc-radius:           8px;
  --kc-radius-md:        10px;
  --kc-radius-lg:        14px;
  --kc-radius-xl:        20px;
  --kc-radius-full:      9999px;

  --kc-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.05);
  --kc-shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0,0,0,0.03);
  --kc-shadow:           0 4px 14px rgba(0, 0, 0, 0.08);
  --kc-shadow-md:        0 8px 24px rgba(0, 0, 0, 0.1);
  --kc-shadow-lg:        0 16px 48px rgba(0, 0, 0, 0.14);
  --kc-shadow-primary:   0 4px 14px rgba(37, 99, 235, 0.35);

  --kc-t:                all 0.18s ease;
}

/* ── 2. Typography — Inter ────────────────────────────────────── */
body,
body * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

body {
  background-color: var(--kc-bg) !important;
  color: var(--kc-text-primary) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  color: var(--kc-text-primary);
  letter-spacing: -0.015em;
}

a { transition: color 0.15s ease; }
a:hover { text-decoration: none !important; }

/* ── 3. Custom Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── 4. Focus Ring ────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--kc-primary) !important;
  outline-offset: 2px !important;
}
*:focus:not(:focus-visible) { outline: none !important; }

/* ── 5. Page Layout ───────────────────────────────────────────── */
.page-content {
  background: var(--kc-bg) !important;
  padding: 24px !important;
}
.container-fluid { padding: 0 !important; }

/* ── 6. Topbar ────────────────────────────────────────────────── */
#page-topbar {
  background: var(--kc-surface) !important;
  box-shadow: 0 1px 0 var(--kc-border) !important;
  height: var(--kc-topbar-height) !important;
  position: fixed !important;
  top: 0; left: 0; right: 0 !important;
  z-index: 1002 !important;
}

.navbar-header {
  height: var(--kc-topbar-height) !important;
}

/* Brand box matches dark sidebar */
.navbar-brand-box {
  background: var(--kc-sidebar-bg) !important;
  border-right: none !important;
  width: var(--kc-sidebar-width) !important;
  height: var(--kc-topbar-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.header-item {
  color: var(--kc-text-secondary) !important;
  font-size: 13px !important;
  height: var(--kc-topbar-height) !important;
  border: none !important;
  background: transparent !important;
  transition: var(--kc-t) !important;
}
.header-item:hover {
  color: var(--kc-primary) !important;
  background: var(--kc-primary-light) !important;
}

/* ── 7. Sidebar ───────────────────────────────────────────────── */
.vertical-menu {
  background: var(--kc-sidebar-bg) !important;
  box-shadow: none !important;
  border-right: none !important;
  width: var(--kc-sidebar-width) !important;
  top: var(--kc-topbar-height) !important;
  bottom: 0 !important;
  position: fixed !important;
  left: 0 !important;
  z-index: 1001 !important;
  overflow: hidden !important;
}

/* SimpleBar inner */
.vertical-menu .h-100 { height: 100% !important; }

/* Section title */
#sidebar-menu .menu-title {
  color: rgba(255,255,255,0.28) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 20px 24px 8px !important;
  margin: 0 !important;
}

/* Top-level items */
#sidebar-menu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sidebar-menu > ul > li {
  margin: 1px 10px !important;
}

#sidebar-menu > ul > li > a {
  color: var(--kc-sidebar-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  border-radius: var(--kc-radius) !important;
  transition: var(--kc-t) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
}

#sidebar-menu > ul > li > a i {
  font-size: 18px !important;
  color: var(--kc-sidebar-icon) !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  transition: var(--kc-t) !important;
}

#sidebar-menu > ul > li > a:hover {
  color: #fff !important;
  background: var(--kc-sidebar-hover) !important;
}
#sidebar-menu > ul > li > a:hover i { color: rgba(255,255,255,0.9) !important; }

#sidebar-menu > ul > li.mm-active > a,
#sidebar-menu > ul > li > a.active {
  color: #fff !important;
  background: var(--kc-primary) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.4) !important;
}
#sidebar-menu > ul > li.mm-active > a i,
#sidebar-menu > ul > li > a.active i { color: rgba(255,255,255,0.95) !important; }

/* Chevron arrow */
#sidebar-menu a.has-arrow::after {
  border-color: rgba(255,255,255,0.35) transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
  margin-left: auto !important;
  margin-right: 2px !important;
  transition: var(--kc-t) !important;
}
#sidebar-menu a.has-arrow.mm-active::after,
#sidebar-menu li.mm-active > a.has-arrow::after {
  border-color: rgba(255,255,255,0.7) transparent transparent transparent !important;
  transform: rotate(-180deg) !important;
}

/* Submenu */
#sidebar-menu .sub-menu {
  padding: 2px 0 6px !important;
  background: transparent !important;
  margin: 0 !important;
}

#sidebar-menu .sub-menu li {
  margin: 0 10px !important;
}

#sidebar-menu .sub-menu li a {
  color: rgba(255,255,255,0.5) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  padding: 8px 14px 8px 48px !important;
  display: block !important;
  transition: var(--kc-t) !important;
  border-radius: var(--kc-radius-sm) !important;
  position: relative !important;
}

#sidebar-menu .sub-menu li a::before {
  content: '' !important;
  width: 5px; height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.25) !important;
  position: absolute !important;
  left: 28px; top: 50% !important;
  transform: translateY(-50%) !important;
  transition: var(--kc-t) !important;
}

#sidebar-menu .sub-menu li a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
}
#sidebar-menu .sub-menu li a:hover::before { background: rgba(255,255,255,0.8) !important; }

#sidebar-menu .sub-menu li.mm-active > a,
#sidebar-menu .sub-menu li > a.active {
  color: #93C5FD !important;
  background: rgba(37,99,235,0.25) !important;
}
#sidebar-menu .sub-menu li.mm-active > a::before { background: #93C5FD !important; }

/* Collapsed sidebar (desktop) */
body[data-sidebar-size=sm] .vertical-menu {
  width: var(--kc-sidebar-sm) !important;
  overflow: visible !important;
}

body[data-sidebar-size=sm] .navbar-brand-box {
  width: var(--kc-sidebar-sm) !important;
}

body[data-sidebar-size=sm] #sidebar-menu > ul > li { margin: 1px 6px !important; }
body[data-sidebar-size=sm] #sidebar-menu > ul > li > a {
  padding: 10px 0 !important;
  justify-content: center !important;
  border-radius: var(--kc-radius) !important;
}
body[data-sidebar-size=sm] #sidebar-menu > ul > li > a span { display: none !important; }
body[data-sidebar-size=sm] #sidebar-menu > ul > li > a i { width: auto !important; font-size: 20px !important; }
body[data-sidebar-size=sm] #sidebar-menu > ul > li > a::after { display: none !important; }
body[data-sidebar-size=sm] #sidebar-menu .menu-title { display: none !important; }

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
  width: 220px !important;
  background: var(--kc-sidebar-hover) !important;
  color: #fff !important;
  border-radius: var(--kc-radius-sm) var(--kc-radius-md) var(--kc-radius-md) var(--kc-radius-sm) !important;
  position: relative !important;
  z-index: 9999 !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul {
  background: var(--kc-sidebar-bg) !important;
  position: absolute !important;
  left: var(--kc-sidebar-sm) !important;
  top: 0 !important;
  width: 200px !important;
  border-radius: 0 var(--kc-radius-md) var(--kc-radius-md) 0 !important;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.35) !important;
  z-index: 9999 !important;
  padding: 8px 0 !important;
  display: none !important;
}

body[data-sidebar-size=sm] #sidebar-menu > ul > li:hover .sub-menu {
  display: block !important;
}

/* ── 8. Main Content Offset ───────────────────────────────────── */
.main-content {
  margin-left: var(--kc-sidebar-width) !important;
  min-height: 100vh !important;
  padding-top: var(--kc-topbar-height) !important;
  transition: margin 0.25s ease !important;
}

body[data-sidebar-size=sm] .main-content {
  margin-left: var(--kc-sidebar-sm) !important;
}

/* ── 9. Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-border) !important;
  border-radius: var(--kc-radius-lg) !important;
  box-shadow: var(--kc-shadow-xs) !important;
  margin-bottom: 20px !important;
}

.card:hover {
  box-shadow: var(--kc-shadow-sm) !important;
}

.card-header {
  background: var(--kc-surface) !important;
  border-bottom: 1px solid var(--kc-border-light) !important;
  padding: 14px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--kc-text-primary) !important;
  border-radius: var(--kc-radius-lg) var(--kc-radius-lg) 0 0 !important;
}

.card-body { padding: 18px !important; }

.card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kc-text-primary) !important;
  margin-bottom: 4px !important;
}

.card-subtitle {
  font-size: 12px !important;
  color: var(--kc-text-muted) !important;
}

/* ── 10. Buttons ──────────────────────────────────────────────── */
.btn {
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--kc-radius) !important;
  padding: 7px 16px !important;
  transition: var(--kc-t) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.45 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-primary {
  background: var(--kc-primary) !important;
  border-color: var(--kc-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--kc-primary-rgb), 0.3) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--kc-primary-dark) !important;
  border-color: var(--kc-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(var(--kc-primary-rgb), 0.4) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--kc-success) !important;
  border-color: var(--kc-success) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(22,163,74,0.28) !important;
}
.btn-success:hover { opacity: 0.9 !important; box-shadow: 0 4px 10px rgba(22,163,74,0.38) !important; color: #fff !important; }

.btn-danger {
  background: var(--kc-error) !important;
  border-color: var(--kc-error) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(220,38,38,0.25) !important;
}
.btn-danger:hover { opacity: 0.9 !important; color: #fff !important; }

.btn-warning {
  background: var(--kc-warning) !important;
  border-color: var(--kc-warning) !important;
  color: #fff !important;
}
.btn-warning:hover { opacity: 0.9 !important; color: #fff !important; }

.btn-info {
  background: var(--kc-info) !important;
  border-color: var(--kc-info) !important;
  color: #fff !important;
}
.btn-info:hover { opacity: 0.9 !important; color: #fff !important; }

.btn-secondary {
  background: #F1F5F9 !important;
  border-color: var(--kc-border) !important;
  color: var(--kc-text-secondary) !important;
}
.btn-secondary:hover { background: #E2E8F0 !important; color: var(--kc-text-primary) !important; }

.btn-outline-primary {
  color: var(--kc-primary) !important;
  border-color: var(--kc-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: var(--kc-primary) !important; color: #fff !important; }

.btn-outline-success {
  color: var(--kc-success) !important;
  border-color: var(--kc-success) !important;
}
.btn-outline-success:hover { background: var(--kc-success) !important; color: #fff !important; }

.btn-outline-danger {
  color: var(--kc-error) !important;
  border-color: var(--kc-error) !important;
}
.btn-outline-danger:hover { background: var(--kc-error) !important; color: #fff !important; }

.btn-sm {
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: var(--kc-radius-sm) !important;
  gap: 4px !important;
}

.btn-lg {
  font-size: 14px !important;
  padding: 10px 22px !important;
  border-radius: var(--kc-radius-md) !important;
}

.btn-link {
  color: var(--kc-primary) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.btn-link:hover { color: var(--kc-primary-dark) !important; }

/* Legacy custom buttons */
.btn-submit {
  background: var(--kc-primary) !important;
  border-color: var(--kc-primary) !important;
  color: #fff !important;
  border-radius: var(--kc-radius) !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 6px rgba(var(--kc-primary-rgb), 0.3) !important;
}
.btn-submit:hover { background: var(--kc-primary-dark) !important; border-color: var(--kc-primary-dark) !important; color: #fff !important; }

.btn-darkblue {
  background: #3B4BC8 !important;
  border-color: #3B4BC8 !important;
  color: #fff !important;
  border-radius: var(--kc-radius) !important;
}
.btn-darkblue:hover { background: #2D3AAF !important; color: #fff !important; }

/* ── 11. Forms ────────────────────────────────────────────────── */
.form-label, label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kc-text-secondary) !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.form-control, .form-select {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--kc-text-primary) !important;
  background: #fff !important;
  border: 1.5px solid var(--kc-border) !important;
  border-radius: var(--kc-radius) !important;
  padding: 7px 12px !important;
  height: auto !important;
  min-height: 38px !important;
  transition: var(--kc-t) !important;
  box-shadow: none !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--kc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--kc-primary-rgb), 0.12) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--kc-text-muted) !important; font-weight: 400 !important; }

.form-control-sm, .form-select-sm {
  font-size: 12px !important;
  padding: 5px 10px !important;
  min-height: 32px !important;
  border-radius: var(--kc-radius-sm) !important;
}

textarea.form-control { min-height: 88px !important; resize: vertical !important; }

.input-group {
  border-radius: var(--kc-radius) !important;
}

.input-group .form-control:not(:first-child) { border-left: none !important; border-radius: 0 var(--kc-radius) var(--kc-radius) 0 !important; }
.input-group .form-control:not(:last-child)  { border-radius: var(--kc-radius) 0 0 var(--kc-radius) !important; }

.input-group-text {
  background: var(--kc-border-light) !important;
  border: 1.5px solid var(--kc-border) !important;
  color: var(--kc-text-muted) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
}

.form-check-input {
  border: 1.5px solid var(--kc-border) !important;
  border-radius: 4px !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}
.form-check-input:checked {
  background-color: var(--kc-primary) !important;
  border-color: var(--kc-primary) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--kc-primary-rgb), 0.12) !important; }

.form-check-label { font-weight: 400 !important; cursor: pointer !important; }

.form-text { font-size: 11.5px !important; color: var(--kc-text-muted) !important; margin-top: 4px !important; }

.invalid-feedback { font-size: 11.5px !important; }
.valid-feedback   { font-size: 11.5px !important; }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--kc-border) !important;
  border-radius: var(--kc-radius) !important;
  min-height: 38px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--kc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--kc-primary-rgb), 0.12) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  color: var(--kc-text-primary) !important;
  padding-left: 12px !important;
  font-size: 13px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  right: 6px !important;
}
.select2-dropdown {
  border: 1px solid var(--kc-border) !important;
  border-radius: var(--kc-radius-md) !important;
  box-shadow: var(--kc-shadow-md) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--kc-primary) !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--kc-border) !important;
  border-radius: var(--kc-radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}
.select2-results__option { font-size: 13px !important; padding: 7px 12px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--kc-primary-light) !important;
  border-color: var(--kc-primary-mid) !important;
  color: var(--kc-primary) !important;
  border-radius: var(--kc-radius-full) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
}

/* Flatpickr */
.flatpickr-calendar {
  border-radius: var(--kc-radius-md) !important;
  box-shadow: var(--kc-shadow-md) !important;
  border: 1px solid var(--kc-border) !important;
  font-family: 'Inter', sans-serif !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--kc-primary) !important;
  border-color: var(--kc-primary) !important;
}
.flatpickr-day:hover {
  background: var(--kc-primary-light) !important;
  border-color: transparent !important;
}

/* ── 12. Tables ───────────────────────────────────────────────── */
.table {
  color: var(--kc-text-primary) !important;
  font-size: 13px !important;
  border-color: var(--kc-border) !important;
  margin-bottom: 0 !important;
}

.table > :not(caption) > * > * {
  padding: 11px 14px !important;
  vertical-align: middle !important;
  border-bottom-color: var(--kc-border-light) !important;
}

.table thead th,
.table > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--kc-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: var(--kc-border-light) !important;
  border-bottom: 1px solid var(--kc-border) !important;
  border-top: none !important;
  white-space: nowrap !important;
  padding: 10px 14px !important;
}

.table tbody tr { transition: background 0.12s ease !important; }
.table tbody tr:hover { background: #F8FAFF !important; }

.table-bordered > :not(caption) > * > * {
  border-width: 1px !important;
  border-color: var(--kc-border) !important;
}

/* DataTables */
.dataTables_wrapper { font-size: 13px !important; color: var(--kc-text-primary) !important; }

.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--kc-border) !important;
  border-radius: var(--kc-radius) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: var(--kc-text-primary) !important;
  margin-left: 6px !important;
  transition: var(--kc-t) !important;
  background: #fff !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--kc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--kc-primary-rgb), 0.12) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  font-size: 12px !important;
  color: var(--kc-text-secondary) !important;
  font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--kc-border) !important;
  border-radius: var(--kc-radius-sm) !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: var(--kc-text-primary) !important;
  margin: 0 6px !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 14px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--kc-radius-xs) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
  color: var(--kc-text-secondary) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: var(--kc-t) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--kc-primary-light) !important;
  color: var(--kc-primary) !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--kc-primary) !important;
  color: #fff !important;
  border-color: var(--kc-primary) !important;
  box-shadow: 0 2px 6px rgba(var(--kc-primary-rgb), 0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 11.5px !important;
  color: var(--kc-text-muted) !important;
  padding-top: 14px !important;
}

/* DataTable sort icon overrides */
table.dataTable {
  margin-top: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.dataTable thead .sorting      { background-image: none !important; }
table.dataTable thead .sorting_asc  { background-image: none !important; }
table.dataTable thead .sorting_desc { background-image: none !important; }

table.dataTable thead .sorting::after     { content: ' ↕'; color: #CBD5E1; font-size: 10px; }
table.dataTable thead .sorting_asc::after  { content: ' ↑'; color: var(--kc-primary); font-size: 10px; }
table.dataTable thead .sorting_desc::after { content: ' ↓'; color: var(--kc-primary); font-size: 10px; }

/* DataTable action buttons (Excel, CSV etc) */
button.dt-button,
div.dt-button,
a.dt-button,
input.dt-button {
  background: var(--kc-success) !important;
  border: none !important;
  border-radius: var(--kc-radius) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  line-height: 1.5 !important;
  transition: var(--kc-t) !important;
  box-shadow: 0 2px 4px rgba(22,163,74,0.28) !important;
}
button.dt-button:hover { opacity: 0.88 !important; box-shadow: 0 4px 8px rgba(22,163,74,0.38) !important; }

/* Bootstrap pagination */
.pagination .page-link {
  border-radius: var(--kc-radius-xs) !important;
  border: 1px solid var(--kc-border) !important;
  color: var(--kc-text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  transition: var(--kc-t) !important;
  margin: 0 1px !important;
}
.pagination .page-item.active .page-link {
  background: var(--kc-primary) !important;
  border-color: var(--kc-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--kc-primary-rgb), 0.28) !important;
}
.pagination .page-link:hover {
  background: var(--kc-primary-light) !important;
  color: var(--kc-primary) !important;
}

/* ── 13. Badges ───────────────────────────────────────────────── */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 3px 9px !important;
  border-radius: var(--kc-radius-full) !important;
}

.badge.bg-primary   { background: var(--kc-primary-light) !important; color: var(--kc-primary) !important; }
.badge.bg-success   { background: var(--kc-success-light) !important; color: var(--kc-success) !important; }
.badge.bg-danger    { background: var(--kc-error-light)   !important; color: var(--kc-error)   !important; }
.badge.bg-warning   { background: var(--kc-warning-light) !important; color: #92400E           !important; }
.badge.bg-info      { background: var(--kc-info-light)    !important; color: var(--kc-info)    !important; }
.badge.bg-secondary { background: #F1F5F9 !important; color: var(--kc-text-secondary) !important; }
.badge.bg-purple    { background: var(--kc-purple-light)  !important; color: var(--kc-purple)  !important; }

.badge.bg-primary-solid { background: var(--kc-primary) !important; color: #fff !important; }
.badge.bg-success-solid { background: var(--kc-success) !important; color: #fff !important; }
.badge.bg-danger-solid  { background: var(--kc-error)   !important; color: #fff !important; }

/* ── 14. Modals ───────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--kc-radius-lg) !important;
  box-shadow: var(--kc-shadow-lg) !important;
  overflow: hidden !important;
}

.modal-header {
  background: var(--kc-surface) !important;
  border-bottom: 1px solid var(--kc-border) !important;
  padding: 16px 20px !important;
}

.modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kc-text-primary) !important;
}

.modal-body { padding: 20px !important; }

.modal-footer {
  border-top: 1px solid var(--kc-border) !important;
  padding: 12px 20px !important;
  background: var(--kc-border-light) !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.btn-close { opacity: 0.4 !important; transition: opacity 0.15s !important; }
.btn-close:hover { opacity: 0.75 !important; }

/* ── 15. Alerts ───────────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: var(--kc-radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 16px 12px 48px !important;
  position: relative !important;
}

.alert::before {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: 'boxicons' !important;
  font-size: 18px !important;
}

.alert-success {
  background: var(--kc-success-light) !important;
  color: #166534 !important;
  border-left: 4px solid var(--kc-success) !important;
}
.alert-danger {
  background: var(--kc-error-light) !important;
  color: #991B1B !important;
  border-left: 4px solid var(--kc-error) !important;
}
.alert-warning {
  background: var(--kc-warning-light) !important;
  color: #92400E !important;
  border-left: 4px solid var(--kc-warning) !important;
}
.alert-info {
  background: var(--kc-info-light) !important;
  color: #075985 !important;
  border-left: 4px solid var(--kc-info) !important;
}

/* ── 16. Nav Tabs ─────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--kc-border) !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
}
.nav-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kc-text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 9px 16px !important;
  transition: var(--kc-t) !important;
  margin-bottom: -2px !important;
  white-space: nowrap !important;
}
.nav-tabs .nav-link:hover { color: var(--kc-primary) !important; background: var(--kc-primary-light) !important; }
.nav-tabs .nav-link.active {
  color: var(--kc-primary) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--kc-primary) !important;
  background: transparent !important;
}

.nav-pills .nav-link {
  border-radius: var(--kc-radius) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kc-text-secondary) !important;
  padding: 7px 14px !important;
  transition: var(--kc-t) !important;
}
.nav-pills .nav-link.active {
  background: var(--kc-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--kc-primary-rgb), 0.28) !important;
}

/* ── 17. Breadcrumb & Page Title ──────────────────────────────── */
.page-title-box { padding: 20px 0 16px !important; }
.page-title-box h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--kc-text-primary) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.breadcrumb-item { font-size: 12px !important; color: var(--kc-text-muted) !important; }
.breadcrumb-item a { color: var(--kc-primary) !important; text-decoration: none !important; font-weight: 500 !important; }
.breadcrumb-item.active { color: var(--kc-text-secondary) !important; font-weight: 500 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--kc-text-muted) !important; }

/* ── 18. Dropdowns ────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--kc-border) !important;
  border-radius: var(--kc-radius-md) !important;
  box-shadow: var(--kc-shadow-md) !important;
  padding: 6px !important;
  min-width: 175px !important;
  animation: dropIn 0.15s ease !important;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  border-radius: var(--kc-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--kc-text-secondary) !important;
  font-weight: 500 !important;
  transition: var(--kc-t) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--kc-primary-light) !important;
  color: var(--kc-primary) !important;
}
.dropdown-item.text-danger,
.dropdown-item.kc-drop-danger {
  color: var(--kc-error) !important;
}
.dropdown-item.text-danger:hover,
.dropdown-item.kc-drop-danger:hover {
  background: var(--kc-error-light) !important;
  color: var(--kc-error) !important;
}
.kc-drop-item i { font-size: 16px !important; }
.dropdown-divider {
  border-color: var(--kc-border) !important;
  margin: 4px 0 !important;
}
.dropdown-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--kc-text-muted) !important;
  padding: 8px 12px 4px !important;
}

/* Topbar user dropdown button */
#page-header-user-dropdown {
  background: transparent !important;
  border: none !important;
  border-radius: var(--kc-radius) !important;
  padding: 6px 10px !important;
  transition: var(--kc-t) !important;
}
#page-header-user-dropdown:hover,
#page-header-user-dropdown:focus,
#page-header-user-dropdown[aria-expanded="true"] {
  background: var(--kc-primary-light) !important;
}

.bg-soft-light { background: transparent !important; border: none !important; }

/* ── 19. Accordion ────────────────────────────────────────────── */
.accordion-item {
  border: 1px solid var(--kc-border) !important;
  border-radius: var(--kc-radius-md) !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}
.accordion-button {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kc-text-primary) !important;
  background: var(--kc-surface) !important;
  padding: 13px 16px !important;
}
.accordion-button:not(.collapsed) {
  color: var(--kc-primary) !important;
  background: var(--kc-primary-light) !important;
  box-shadow: none !important;
}
.accordion-body { padding: 14px 16px !important; font-size: 13px !important; }

/* ── 20. Tooltips ─────────────────────────────────────────────── */
.tooltip .tooltip-inner {
  background: var(--kc-text-primary) !important;
  font-size: 12px !important;
  border-radius: var(--kc-radius-sm) !important;
  padding: 5px 10px !important;
  max-width: 220px !important;
}

/* ── 21. SweetAlert2 ──────────────────────────────────────────── */
.swal2-popup {
  border-radius: var(--kc-radius-lg) !important;
  font-size: 14px !important;
  box-shadow: var(--kc-shadow-lg) !important;
}
.swal2-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--kc-text-primary) !important;
}
.swal2-content, .swal2-html-container {
  font-size: 13.5px !important;
  color: var(--kc-text-secondary) !important;
}
.swal2-confirm {
  background: var(--kc-primary) !important;
  border-radius: var(--kc-radius) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 20px !important;
}
.swal2-cancel {
  border-radius: var(--kc-radius) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 20px !important;
}

/* ── 22. Color Utilities ──────────────────────────────────────── */
.text-primary   { color: var(--kc-primary)        !important; }
.text-success   { color: var(--kc-success)        !important; }
.text-danger    { color: var(--kc-error)           !important; }
.text-warning   { color: var(--kc-warning)        !important; }
.text-info      { color: var(--kc-info)            !important; }
.text-muted     { color: var(--kc-text-muted)     !important; }
.text-secondary { color: var(--kc-text-secondary) !important; }

.bg-primary     { background-color: var(--kc-primary)  !important; }
.bg-success     { background-color: var(--kc-success)  !important; }
.bg-danger      { background-color: var(--kc-error)    !important; }
.bg-warning     { background-color: var(--kc-warning)  !important; }
.bg-info        { background-color: var(--kc-info)      !important; }
.bg-light       { background-color: var(--kc-bg)       !important; }

.bg-soft-primary { background-color: var(--kc-primary-light) !important; color: var(--kc-primary) !important; }
.bg-soft-success { background-color: var(--kc-success-light) !important; color: var(--kc-success) !important; }
.bg-soft-danger  { background-color: var(--kc-error-light)   !important; color: var(--kc-error)   !important; }
.bg-soft-warning { background-color: var(--kc-warning-light) !important; color: var(--kc-warning) !important; }
.bg-soft-info    { background-color: var(--kc-info-light)    !important; color: var(--kc-info)    !important; }

.shadow    { box-shadow: var(--kc-shadow) !important; }
.shadow-sm { box-shadow: var(--kc-shadow-xs) !important; }
.shadow-lg { box-shadow: var(--kc-shadow-lg) !important; }
.border    { border-color: var(--kc-border) !important; }

/* ── 23. Animations ───────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf4 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--kc-radius-sm);
}

/* ── 24. Footer ───────────────────────────────────────────────── */
/* Footer lives inside .main-content which already handles the sidebar
   offset — no extra margin-left or width manipulation needed here.    */
footer.footer {
  background: var(--kc-surface) !important;
  border-top: 1px solid var(--kc-border) !important;
  padding: 14px 24px !important;
  color: var(--kc-text-muted) !important;
  font-size: 12px !important;
}
.kc-footer-react {
  background: var(--kc-surface);
  border-top: 1px solid var(--kc-border);
  padding: 14px 24px;
  color: var(--kc-text-muted);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── 25. Status Indicators ────────────────────────────────────── */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%; display: inline-block; vertical-align: middle;
  margin-right: 5px;
}
.status-dot.active   { background: var(--kc-success); box-shadow: 0 0 0 2px rgba(22,163,74,0.2); }
.status-dot.inactive { background: var(--kc-text-muted); }
.status-dot.pending  { background: var(--kc-warning); box-shadow: 0 0 0 2px rgba(217,119,6,0.2); }

/* ── 26. Table Action Icon Buttons ────────────────────────────── */
.btn-icon {
  width: 30px; height: 30px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  border: none !important;
  transition: var(--kc-t) !important;
  cursor: pointer !important;
  gap: 0 !important;
}
.btn-icon-edit   { background: var(--kc-primary-light) !important; color: var(--kc-primary) !important; }
.btn-icon-edit:hover { background: var(--kc-primary) !important; color: #fff !important; }
.btn-icon-delete { background: var(--kc-error-light) !important; color: var(--kc-error) !important; }
.btn-icon-delete:hover { background: var(--kc-error) !important; color: #fff !important; }
.btn-icon-view   { background: var(--kc-info-light) !important; color: var(--kc-info) !important; }
.btn-icon-view:hover { background: var(--kc-info) !important; color: #fff !important; }

/* ── 27. Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .vertical-menu {
    left: -250px !important;
    transition: left 0.25s ease !important;
  }
  body.sidebar-enable .vertical-menu {
    left: 0 !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.25) !important;
  }
  .main-content {
    margin-left: 0 !important;
  }
  .page-content {
    padding: 16px !important;
  }
  footer.footer {
    margin-left: 0 !important;
  }

  /* Mobile brand box: enough room for name + logo */
  .navbar-brand-box {
    width: 150px !important;
  }
}

@media (max-width: 576px) {
  .page-content { padding: 12px !important; }
  .card-body    { padding: 14px !important; }
  .modal-body   { padding: 16px !important; }
  .table > :not(caption) > * > * { padding: 9px 10px !important; }
}

/* ── 28. Misc Fixes ───────────────────────────────────────────── */
.validate-star { color: var(--kc-error) !important; }
.textWrapping  { white-space: normal !important; word-wrap: break-word !important; }
.tab-scrool    { overflow-x: auto !important; }

/* Remove number input spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
input[type=number] { -moz-appearance: textfield !important; }

/* Ensure DataTable stays inside card */
.dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid var(--kc-border) !important; }

/* Row/Column gutter consistency */
.row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.row.g-4 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* Smooth page content scroll */
.page-content { scroll-behavior: smooth; }

/* Print */
@media print {
  .vertical-menu, #page-topbar { display: none !important; }
  .main-content { margin-left: 0 !important; padding-top: 0 !important; }
}