/* ==========================================================================
   Phonoverse Design System  —  "pv-theme"
   Light, indigo (#5B4CF0), Stripe / Linear / Vercel inspired.
   Loaded AFTER bootstrap / Velzon so it re-skins every existing page
   without touching markup, routes or business logic.
   ========================================================================== */

/* -------- 1. Tokens -------------------------------------------------- */
:root,
[data-bs-theme="light"],
html[data-layout],
html[data-sidebar] {
  --pv-primary: #5B4CF0;
  --pv-primary-600: #4A3BDB;
  --pv-primary-700: #3D30B8;
  --pv-primary-50: #F2F0FF;
  --pv-primary-100: #E7E4FF;
  --pv-primary-200: #D0CBFF;
  --pv-ink: #0F1222;
  --pv-text: #1F2437;
  --pv-muted: #667085;
  --pv-faint: #98A2B3;
  --pv-bg: #F7F8FB;
  --pv-surface: #FFFFFF;
  --pv-border: #E7E9F0;
  --pv-border-strong: #D5D9E4;
  --pv-success: #12A150;
  --pv-warning: #D98A06;
  --pv-danger: #E5484D;
  --pv-info: #0E8FD8;
  --pv-radius-sm: 8px;
  --pv-radius: 10px;
  --pv-radius-lg: 14px;
  --pv-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --pv-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --pv-shadow-md: 0 4px 6px -2px rgba(16, 24, 40, .05), 0 12px 24px -6px rgba(16, 24, 40, .08);
  --pv-ring: 0 0 0 4px rgba(91, 76, 240, .14);
  --pv-sidebar-w: 232px;
  --pv-sidebar-w-collapsed: 60px;
  --pv-topbar-h: 54px;
  --pv-ease: cubic-bezier(.4, 0, .2, 1);
  --pv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- map onto Bootstrap / Velzon variables so every legacy page follows ---- */
  --vz-primary: #5B4CF0;
  --vz-primary-rgb: 91, 76, 240;
  --vz-primary-text-emphasis: #3D30B8;
  --vz-primary-bg-subtle: #EFEDFF;
  --vz-primary-border-subtle: #D0CBFF;
  --vz-success: #12A150;
  --vz-success-rgb: 18, 161, 80;
  --vz-success-text-emphasis: #0B7A3B;
  --vz-success-bg-subtle: #E6F6EC;
  --vz-success-border-subtle: #BDE8CE;
  --vz-warning: #D98A06;
  --vz-warning-rgb: 217, 138, 6;
  --vz-warning-text-emphasis: #9A5F00;
  --vz-warning-bg-subtle: #FEF4E0;
  --vz-warning-border-subtle: #F8DDA6;
  --vz-danger: #E5484D;
  --vz-danger-rgb: 229, 72, 77;
  --vz-danger-text-emphasis: #B42328;
  --vz-danger-bg-subtle: #FDECEC;
  --vz-danger-border-subtle: #F8C6C8;
  --vz-info: #0E8FD8;
  --vz-info-rgb: 14, 143, 216;
  --vz-info-text-emphasis: #08689F;
  --vz-info-bg-subtle: #E5F3FC;
  --vz-info-border-subtle: #B7DCF3;
  --vz-secondary: #667085;
  --vz-secondary-rgb: 102, 112, 133;
  --vz-secondary-bg-subtle: #F1F3F8;
  --vz-light: #F3F4F8;
  --vz-body-bg: #F7F8FB;
  --vz-body-color: #1F2437;
  --vz-body-font-family: var(--pv-font);
  --vz-font-sans-serif: var(--pv-font);
  --vz-border-color: #E7E9F0;
  --vz-card-bg: #fff;
  --vz-card-border-color: #E7E9F0;
  --vz-heading-color: #0F1222;
  --vz-link-color: #5B4CF0;
  --vz-link-hover-color: #3D30B8;
  --vz-link-color-rgb: 91, 76, 240;
  --vz-secondary-color: #667085;
  --vz-emphasis-color: #0F1222;
  --bs-primary: #5B4CF0;
  --bs-primary-rgb: 91, 76, 240;
  --bs-body-font-family: var(--pv-font);
  --bs-body-bg: #F7F8FB;
  --bs-body-color: #1F2437;
  --bs-border-color: #E7E9F0;
  --bs-link-color: #5B4CF0;
  --bs-link-hover-color: #3D30B8;
  --bs-link-color-rgb: 91, 76, 240;
  --vz-vertical-menu-width: var(--pv-sidebar-w);
  --vz-header-bg: #fff;
  --vz-footer-bg: transparent;
}

/* -------- 2. Base ---------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--pv-font) !important;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pv-text);
  background: var(--pv-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  padding-top: 0 !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pv-font);
  color: var(--pv-ink);
  font-weight: 600;
  letter-spacing: -.012em;
}
h1, .h1 { font-size: 1.75rem; } h2, .h2 { font-size: 1.5rem; } h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .875rem; }
.ff-secondary { font-family: var(--pv-font) !important; }
a { color: var(--pv-primary); text-decoration: none; transition: color .15s var(--pv-ease); }
a:hover { color: var(--pv-primary-700); }
.text-muted { color: var(--pv-muted) !important; }
.text-primary { color: var(--pv-primary) !important; }
.bg-primary { background-color: var(--pv-primary) !important; }
.border-primary { border-color: var(--pv-primary) !important; }
::selection { background: var(--pv-primary-100); color: var(--pv-ink); }
hr { border-color: var(--pv-border); opacity: 1; }
.fs-10 { font-size: 10px !important; } .fs-11 { font-size: 11px !important; } .fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; } .fs-14 { font-size: 14px !important; } .fs-15 { font-size: 14.5px !important; }
.fs-16 { font-size: 15px !important; }
:focus-visible { outline: 2px solid var(--pv-primary); outline-offset: 2px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #CBD1DE transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD1DE; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #AEB6C7; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* -------- 3. App shell ---------------------------------------------- */
#layout-wrapper { min-height: 100vh; }

/* Sidebar */
.app-menu.navbar-menu {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--pv-sidebar-w) !important;
  background: #fff !important;
  border-right: 1px solid var(--pv-border);
  box-shadow: none !important;
  z-index: 1003;
  display: flex; flex-direction: column;
  padding: 0;
  transition: width .22s var(--pv-ease), transform .25s var(--pv-ease);
  margin-top: 0 !important;
}
.app-menu .sidebar-background { display: none !important; }
.app-menu .navbar-brand-box {
  position: static !important; width: auto !important;
  height: var(--pv-topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--pv-border);
  text-align: left;
}
.pv-logo { display: flex; align-items: center; gap: 10px; color: var(--pv-ink) !important; min-width: 0; }
.pv-logo-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--pv-primary); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.02em;
  box-shadow: 0 1px 2px rgba(91, 76, 240, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pv-logo-text { font-weight: 650; font-size: 16px; letter-spacing: -.02em; color: var(--pv-ink); white-space: nowrap; }
.pv-logo-text small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--pv-faint); line-height: 1; margin-top: 2px; }
.app-menu .logo-light, .app-menu .logo-dark, #vertical-hover { display: none !important; }

.app-menu #scrollbar {
  flex: 1 1 auto; height: auto !important; overflow-y: auto; overflow-x: hidden; padding: 14px 12px 20px;
}
.app-menu #scrollbar > .container-fluid { padding: 0 !important; }
.app-menu .navbar-nav { padding: 0 !important; gap: 2px; min-height: 0 !important; }
.app-menu .menu-title {
  padding: 14px 10px 6px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pv-faint) !important; opacity: 1;
}
.app-menu .menu-title i { display: none; }
.app-menu .nav-item { margin: 0; }
.app-menu .nav-link.menu-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px !important; margin: 0;
  font-size: 13.5px; font-weight: 500; color: #475066 !important;
  border-radius: var(--pv-radius-sm); border: 0 !important; background: transparent;
  transition: background .15s var(--pv-ease), color .15s var(--pv-ease);
  position: relative;
}
.app-menu .nav-link.menu-link i { margin: 0 !important; width: 18px !important; height: 18px; font-size: 18px !important; color: #7B8498; transition: color .15s; }
.app-menu .nav-link.menu-link:hover { background: #F3F4F9; color: var(--pv-ink) !important; }
.app-menu .nav-link.menu-link:hover i { color: var(--pv-text); }
.app-menu .nav-link.menu-link.active,
.app-menu .nav-link.menu-link[aria-expanded="true"].active {
  background: var(--pv-primary-50) !important; color: var(--pv-primary-700) !important;
}
.app-menu .nav-link.menu-link.active i { color: var(--pv-primary); }
.app-menu .nav-link.menu-link.active::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pv-primary);
}
/* chevron for collapsible groups */
.app-menu .menu-link[data-bs-toggle="collapse"]::after {
  content: ''; margin-left: auto; width: 14px; height: 14px; flex: 0 0 14px;
  background: #98A2B3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s var(--pv-ease);
  font-family: inherit !important; position: static; transform: none; right: auto; top: auto;
}
.app-menu .menu-link[data-bs-toggle="collapse"][aria-expanded="true"]::after { transform: rotate(90deg); }
.app-menu .menu-link .badge { margin-left: auto; }
.app-menu .menu-link[data-bs-toggle="collapse"] .badge + *, .app-menu .menu-link .badge ~ ::after { margin-left: 8px; }

.app-menu .menu-dropdown { padding: 0; }
.app-menu .menu-dropdown .nav-sm {
  margin: 2px 0 4px 19px; padding: 2px 0 2px 12px; border-left: 1px solid var(--pv-border); gap: 1px;
}
.app-menu .nav-sm .nav-link {
  padding: 6px 10px !important; font-size: 13px; font-weight: 500; color: #667085 !important;
  border-radius: 7px; border: 0 !important; background: transparent !important; gap: 9px;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.app-menu .nav-sm .nav-link i { margin: 0 !important; width: 15px !important; height: 15px; font-size: 15px !important; opacity: .85; }
.app-menu .nav-sm .nav-link:hover { color: var(--pv-ink) !important; background: #F3F4F9 !important; }
.app-menu .nav-sm .nav-link.active { color: var(--pv-primary-700) !important; background: var(--pv-primary-50) !important; font-weight: 600; }
.app-menu .nav-sm .nav-link::before { display: none !important; }
.app-menu .nav-sm .nav-link .badge { margin-left: auto; }

.pv-sidebar-foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--pv-border); }
.pv-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--pv-radius); background: #F7F8FB; min-width: 0; }
.pv-sidebar-user .pv-avatar { width: 32px; height: 32px; font-size: 12px; }
.pv-sidebar-user .meta { min-width: 0; line-height: 1.2; }
.pv-sidebar-user .meta b { display: block; font-size: 13px; font-weight: 600; color: var(--pv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sidebar-user .meta span { font-size: 11.5px; color: var(--pv-muted); text-transform: capitalize; }

/* Topbar */
#page-topbar {
  position: fixed !important; top: 0; right: 0; left: var(--pv-sidebar-w) !important;
  width: auto !important; height: var(--pv-topbar-h) !important;
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pv-border); box-shadow: none !important;
  z-index: 1002; display: block !important; padding: 0 !important;
  transition: left .22s var(--pv-ease);
}
#page-topbar .layout-width { height: 100%; }
#page-topbar .navbar-header { height: 100%; padding: 0 24px !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pv-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pv-icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pv-radius-sm);
  border: 1px solid transparent; background: transparent; color: #596176; cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.pv-icon-btn:hover { background: #F1F3F8; color: var(--pv-ink); }
.pv-icon-btn i { font-size: 19px; }
.pv-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--pv-muted); }
.pv-crumb .sep { width: 14px; height: 14px; color: #C3C9D6; }
.pv-crumb strong { color: var(--pv-ink); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-topbar-right { display: flex; align-items: center; gap: 6px; }
.pv-user-btn {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 999px;
  border: 1px solid var(--pv-border); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pv-user-btn:hover { border-color: var(--pv-border-strong); box-shadow: var(--pv-shadow-xs); }
.pv-user-btn .name { font-size: 13px; font-weight: 600; color: var(--pv-ink); line-height: 1.15; text-align: left; }
.pv-user-btn .role { font-size: 11px; color: var(--pv-muted); text-transform: capitalize; line-height: 1.15; display: block; font-weight: 500; }
.pv-user-btn .chev { width: 14px; height: 14px; color: #98A2B3; }
.pv-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, #6E60F5, #4A3BDB); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

/* Main content */
.main-content {
  margin-left: var(--pv-sidebar-w) !important;
  padding: calc(var(--pv-topbar-h) + 28px) 0 0 !important;
  min-height: 100vh; display: flex; flex-direction: column;
  transition: margin-left .22s var(--pv-ease);
}
.main-content > .container-fluid { max-width: 1480px !important; width: 100%; margin: 0 auto; padding: 0 28px !important; flex: 1 0 auto; }
.main-content .page-content { padding: 0 !important; margin: 0 !important; }
.main-content .page-content > .container-fluid { padding: 0 !important; max-width: none; }
.footer { position: static !important; left: auto !important; right: auto !important; background: transparent !important; border: 0 !important; padding: 28px 28px 24px !important; color: var(--pv-faint) !important; font-size: 12.5px; box-shadow: none !important; }
.footer .container-fluid { padding: 0 !important; }
.footer .text-primary { color: var(--pv-muted) !important; }

/* Collapsed rail (desktop) */
@media (min-width: 992px) {
  body.pv-collapsed { --pv-sidebar-w: var(--pv-sidebar-w-collapsed); }
  body.pv-collapsed .app-menu .pv-logo-text,
  body.pv-collapsed .app-menu .menu-title,
  body.pv-collapsed .app-menu .nav-link.menu-link > span,
  body.pv-collapsed .app-menu .menu-link .badge,
  body.pv-collapsed .app-menu .menu-link[data-bs-toggle="collapse"]::after,
  body.pv-collapsed .app-menu .menu-dropdown,
  body.pv-collapsed .app-menu .pv-sidebar-user .meta { display: none !important; }
  body.pv-collapsed .app-menu .navbar-brand-box { justify-content: center; padding: 0 !important; }
  body.pv-collapsed .app-menu .nav-link.menu-link { justify-content: center; padding: 10px !important; }
  body.pv-collapsed .app-menu .nav-link.menu-link.active::before { left: -12px; }
  body.pv-collapsed .app-menu .pv-sidebar-user { justify-content: center; padding: 6px; }
}

/* Mobile / tablet drawer */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(15, 18, 34, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 1002; display: none; opacity: 0; transition: opacity .2s; }
@media (max-width: 991.98px) {
  .app-menu.navbar-menu { transform: translateX(-100%); box-shadow: var(--pv-shadow-md) !important; }
  body.vertical-sidebar-enable .app-menu.navbar-menu { transform: none; }
  body.vertical-sidebar-enable .sidebar-overlay { display: block; opacity: 1; }
  #page-topbar { left: 0 !important; }
  .main-content { margin-left: 0 !important; }
  #page-topbar .navbar-header { padding: 0 14px !important; }
  .main-content > .container-fluid { padding: 0 16px !important; }
  .pv-user-btn .meta, .pv-user-btn .chev { display: none; }
  .pv-user-btn { padding: 3px; }
}
@media (max-width: 575.98px) {
  .main-content { padding-top: calc(var(--pv-topbar-h) + 18px) !important; }
  .main-content > .container-fluid { padding: 0 12px !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* -------- 4. Page header ------------------------------------------- */
.page-title-box {
  padding: 0 0 4px !important; margin: 0 0 4px !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  flex-wrap: wrap; gap: 12px;
}
.page-title-box h4, .page-title-box .page-title { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 2px !important; color: var(--pv-ink); }
.page-title-box p { font-size: 13.5px; color: var(--pv-muted); }
.page-title-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb { margin: 0; font-size: 13px; }
.breadcrumb-item + .breadcrumb-item::before { color: #C3C9D6; }
.breadcrumb-item.active { color: var(--pv-muted); }
.alert + .row, .page-content .alert { margin-top: 0; }

/* -------- 5. Cards -------------------------------------------------- */
.card {
  background: var(--pv-surface); border: 1px solid var(--pv-border) !important; border-radius: var(--pv-radius-lg) !important;
  box-shadow: var(--pv-shadow-xs) !important; margin-bottom: 20px;
  transition: box-shadow .2s var(--pv-ease), border-color .2s var(--pv-ease), transform .2s var(--pv-ease);
}
.row > [class*="col"] > .card.h-100, .row > [class*="col"] > .card:last-child { margin-bottom: 0; }
.row.g-4 > [class*="col"] > .card, .row.g-3 > [class*="col"] > .card { margin-bottom: 0; }
.card-animate:hover { box-shadow: var(--pv-shadow-md) !important; border-color: var(--pv-border-strong) !important; transform: translateY(-1px); }
.card-header, .bg-card-hd {
  background: transparent !important; border-bottom: 1px solid var(--pv-border) !important; padding: 16px 20px !important;
  border-radius: var(--pv-radius-lg) var(--pv-radius-lg) 0 0 !important; font-weight: 600; color: var(--pv-ink);
}
.card-header.border-0 { border-bottom: 0 !important; padding-bottom: 4px !important; }
.card-header .card-title, .card-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--pv-ink); margin: 0; }
.card-body { padding: 20px; }
.card-footer { background: #FAFBFD !important; border-top: 1px solid var(--pv-border) !important; padding: 12px 20px; border-radius: 0 0 var(--pv-radius-lg) var(--pv-radius-lg) !important; }
.card.border-danger { border-color: #F8C6C8 !important; } .card.border-warning { border-color: #F8DDA6 !important; }
.card.border-success { border-color: #BDE8CE !important; }

/* KPI cards (existing "card-animate" stat tiles + explicit .pv-kpi) */
.card-animate .card-body h2, .card-animate .card-body h3, .card-animate .card-body .counter-value, .pv-kpi .value {
  font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; color: var(--pv-ink) !important;
  font-variant-numeric: tabular-nums;
}
.card-animate .card-body > .d-flex > div:first-child > p:first-child,
.card-animate .card-body p.fw-medium { font-size: 13px; font-weight: 500 !important; color: var(--pv-muted) !important; margin-bottom: 8px !important; }
.avatar-sm .avatar-title.rounded-circle, .avatar-title.rounded-circle.fs-3 { border-radius: 11px !important; }
.avatar-title { font-weight: 600; }
.avatar-sm { height: 2.6rem; width: 2.6rem; }
.avatar-title.fs-3 { font-size: 20px !important; }
.avatar-title.bg-primary-subtle { background: var(--pv-primary-50) !important; color: var(--pv-primary) !important; }

/* -------- 6. Buttons ------------------------------------------------ */
.btn {
  font-family: var(--pv-font); font-weight: 550; font-size: 13.5px; letter-spacing: -.005em;
  border-radius: var(--pv-radius-sm); padding: 8px 14px; line-height: 1.35;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s var(--pv-ease), border-color .15s, color .15s, box-shadow .15s, transform .08s;
  box-shadow: none; border-width: 1px;
}
.btn:active { transform: translateY(.5px); }
.btn:focus, .btn:focus-visible { box-shadow: var(--pv-ring) !important; outline: 0; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; } .btn-lg { padding: 11px 20px; font-size: 15px; }
.btn i { font-size: 1.1em; margin: 0 !important; }
.btn-primary { background: var(--pv-primary); border-color: var(--pv-primary); color: #fff; box-shadow: 0 1px 2px rgba(91, 76, 240, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-check:checked + .btn-primary, .btn-primary.active { background: var(--pv-primary-600) !important; border-color: var(--pv-primary-600) !important; color: #fff !important; }
.btn-primary:disabled, .btn-primary.disabled { background: #A9A1F7; border-color: #A9A1F7; box-shadow: none; }
.btn-secondary { background: #fff; border-color: var(--pv-border-strong); color: var(--pv-text); box-shadow: var(--pv-shadow-xs); }
.btn-secondary:hover, .btn-secondary:focus { background: #F7F8FB !important; border-color: #C3C9D6 !important; color: var(--pv-ink) !important; }
.btn-light { background: #fff; border-color: var(--pv-border-strong); color: var(--pv-text); box-shadow: var(--pv-shadow-xs); }
.btn-light:hover { background: #F7F8FB; border-color: #C3C9D6; color: var(--pv-ink); }
.btn-success { background: var(--pv-success); border-color: var(--pv-success); color: #fff; } .btn-success:hover { background: #0E8A43 !important; border-color: #0E8A43 !important; }
.btn-danger { background: var(--pv-danger); border-color: var(--pv-danger); color: #fff; } .btn-danger:hover { background: #CC3338 !important; border-color: #CC3338 !important; }
.btn-warning { background: #F5A524; border-color: #F5A524; color: #3B2600; } .btn-warning:hover { background: #E19410 !important; border-color: #E19410 !important; color: #3B2600 !important; }
.btn-info { background: var(--pv-info); border-color: var(--pv-info); color: #fff; } .btn-info:hover { background: #0B78B7 !important; border-color: #0B78B7 !important; color: #fff !important; }
.btn-dark { background: var(--pv-ink); border-color: var(--pv-ink); color: #fff; } .btn-dark:hover { background: #262B44 !important; border-color: #262B44 !important; }
.btn-outline-primary { color: var(--pv-primary); border-color: var(--pv-primary-200); background: #fff; }
.btn-outline-primary:hover { background: var(--pv-primary-50) !important; border-color: var(--pv-primary) !important; color: var(--pv-primary-700) !important; }
.btn-outline-secondary, .btn-outline-dark { color: var(--pv-text); border-color: var(--pv-border-strong); background: #fff; }
.btn-outline-secondary:hover, .btn-outline-dark:hover { background: #F7F8FB !important; color: var(--pv-ink) !important; border-color: #C3C9D6 !important; }
.btn-outline-success { color: var(--pv-success); border-color: #BDE8CE; background: #fff; } .btn-outline-success:hover { background: var(--pv-success) !important; color: #fff !important; border-color: var(--pv-success) !important; }
.btn-outline-danger { color: var(--pv-danger); border-color: #F8C6C8; background: #fff; } .btn-outline-danger:hover { background: var(--pv-danger) !important; color: #fff !important; border-color: var(--pv-danger) !important; }
.btn-outline-warning { color: #9A5F00; border-color: #F8DDA6; background: #fff; } .btn-outline-warning:hover { background: #F5A524 !important; color: #3B2600 !important; border-color: #F5A524 !important; }
.btn-outline-info { color: var(--pv-info); border-color: #B7DCF3; background: #fff; } .btn-outline-info:hover { background: var(--pv-info) !important; color: #fff !important; border-color: var(--pv-info) !important; }
/* Velzon soft / ghost variants */
.btn-soft-primary { background: var(--pv-primary-50); color: var(--pv-primary-700); border-color: transparent; } .btn-soft-primary:hover { background: var(--pv-primary) !important; color: #fff !important; }
.btn-soft-secondary { background: #F1F3F8; color: #475066; border-color: transparent; } .btn-soft-secondary:hover { background: #667085 !important; color: #fff !important; }
.btn-soft-success { background: #E6F6EC; color: #0B7A3B; border-color: transparent; } .btn-soft-success:hover { background: var(--pv-success) !important; color: #fff !important; }
.btn-soft-danger { background: #FDECEC; color: #B42328; border-color: transparent; } .btn-soft-danger:hover { background: var(--pv-danger) !important; color: #fff !important; }
.btn-soft-warning { background: #FEF4E0; color: #9A5F00; border-color: transparent; } .btn-soft-warning:hover { background: #F5A524 !important; color: #3B2600 !important; }
.btn-soft-info { background: #E5F3FC; color: #08689F; border-color: transparent; } .btn-soft-info:hover { background: var(--pv-info) !important; color: #fff !important; }
.btn-ghost-secondary, .btn-ghost-primary { background: transparent; border-color: transparent; color: #596176; } .btn-ghost-secondary:hover, .btn-ghost-primary:hover { background: #F1F3F8 !important; color: var(--pv-ink) !important; }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-close { opacity: .5; border-radius: 8px; } .btn-close:hover { opacity: .9; }
.btn-group > .btn { box-shadow: none; }

/* -------- 7. Forms -------------------------------------------------- */
.form-label, label.form-label { font-size: 13px; font-weight: 550; color: var(--pv-text); margin-bottom: 6px; }
.form-control, .form-select, .input-group-text, textarea.form-control {
  font-family: var(--pv-font); font-size: 14px; color: var(--pv-ink); background-color: #fff;
  border: 1px solid var(--pv-border-strong); border-radius: var(--pv-radius-sm); padding: 8.5px 12px; min-height: 38px;
  box-shadow: var(--pv-shadow-xs); transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control-sm, .form-select-sm { min-height: 32px; padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.form-control-lg, .form-select-lg { min-height: 46px; font-size: 15px; }
.form-control::placeholder { color: #A3ABBB; }
.form-control:hover, .form-select:hover { border-color: #B9C0CF; }
.form-control:focus, .form-select:focus { border-color: var(--pv-primary) !important; box-shadow: var(--pv-ring) !important; outline: 0; background: #fff; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: #F5F6FA; color: #8A93A6; }
.input-group-text { background: #F5F6FA; color: var(--pv-muted); box-shadow: none; }
.input-group > .form-control:focus { z-index: 3; }
.form-check-input { width: 1.05em; height: 1.05em; border: 1px solid #B9C0CF; margin-top: .22em; }
.form-check-input:checked { background-color: var(--pv-primary); border-color: var(--pv-primary); }
.form-check-input:focus { box-shadow: var(--pv-ring); border-color: var(--pv-primary); }
.form-switch .form-check-input { width: 2.2em; height: 1.2em; }
.form-text, .text-muted.small { font-size: 12.5px; }
.is-invalid, .form-control.is-invalid { border-color: var(--pv-danger) !important; }
.invalid-feedback { font-size: 12.5px; }
.form-control[type="file"] { padding: 6px 10px; }
.form-control[type="file"]::file-selector-button { background: #F1F3F8; border: 0; border-radius: 6px; padding: 5px 12px; margin-right: 10px; font-weight: 550; color: var(--pv-text); cursor: pointer; }

/* Tom Select / Choices / flatpickr */
.ts-wrapper .ts-control, .ts-control {
  border: 1px solid var(--pv-border-strong) !important; border-radius: var(--pv-radius-sm) !important; padding: 7px 10px !important; min-height: 38px;
  box-shadow: var(--pv-shadow-xs) !important; font-size: 14px; background: #fff;
}
.ts-wrapper.focus .ts-control { border-color: var(--pv-primary) !important; box-shadow: var(--pv-ring) !important; }
.ts-dropdown { border: 1px solid var(--pv-border) !important; border-radius: var(--pv-radius) !important; box-shadow: var(--pv-shadow-md) !important; overflow: hidden; margin-top: 4px; }
.ts-dropdown .option { padding: 8px 12px; } .ts-dropdown .active { background: var(--pv-primary-50) !important; color: var(--pv-primary-700) !important; }
.ts-wrapper.multi .ts-control > div { background: var(--pv-primary-50); color: var(--pv-primary-700); border-radius: 6px; padding: 2px 8px; border: 0; }
.choices__inner { border-radius: var(--pv-radius-sm); border-color: var(--pv-border-strong); background: #fff; min-height: 38px; }
.is-focused .choices__inner { border-color: var(--pv-primary); box-shadow: var(--pv-ring); }
.flatpickr-calendar { border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-md); border: 1px solid var(--pv-border); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--pv-primary); border-color: var(--pv-primary); }
.dropzone { border: 1.5px dashed var(--pv-border-strong) !important; border-radius: var(--pv-radius-lg) !important; background: #FAFBFD !important; transition: border-color .2s, background .2s; }
.dropzone:hover { border-color: var(--pv-primary) !important; background: var(--pv-primary-50) !important; }

/* -------- 8. Tables ------------------------------------------------- */
.table-responsive { border-radius: var(--pv-radius); }
.table { --bs-table-bg: transparent; --vz-table-bg: transparent; color: var(--pv-text); margin-bottom: 0; font-size: 13.5px; vertical-align: middle; border-color: var(--pv-border); }
.table > :not(caption) > * > * { padding: 13px 16px; border-bottom-color: var(--pv-border); background-color: transparent; box-shadow: none; }
.table thead th, .table > thead > tr > th, .table-light, .table-light > th, .table-light > tr > th, thead.table-light th {
  background: #FAFBFD !important; color: var(--pv-muted) !important; font-size: 11.5px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--pv-border) !important; white-space: nowrap; padding-top: 11px !important; padding-bottom: 11px !important;
}
.table-light { --bs-table-bg: #FAFBFD; --vz-table-bg: #FAFBFD; }
.table tbody tr { transition: background .12s var(--pv-ease); }
.table-hover > tbody > tr:hover > *, .table tbody tr:hover > td { background-color: #F9FAFE; --bs-table-accent-bg: transparent; color: var(--pv-text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #FBFCFE; --bs-table-accent-bg: transparent; }
.table-bordered { border: 0; } .table-bordered > :not(caption) > * { border-width: 0 0 1px; } .table-bordered > :not(caption) > * > * { border-width: 0; }
.table-borderless > :not(caption) > * > * { border-bottom: 1px solid var(--pv-border); }
.table tbody tr:last-child > td { border-bottom: 0; }
.card > .table-responsive, .card-body > .table-responsive { border: 1px solid var(--pv-border); border-radius: var(--pv-radius); overflow: auto; }
.card-body.p-0 > .table-responsive, .card > .table-responsive:only-child { border: 0; border-radius: 0 0 var(--pv-radius-lg) var(--pv-radius-lg); }
.table .btn-sm, .table .btn-icon { padding: 4px 8px; }
.table img.rounded, .table img.avatar-xs, .table img.avatar-sm { border-radius: 8px; object-fit: cover; }
.table a:not(.btn) { font-weight: 550; }
.table .text-muted { font-size: 12.5px; }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
/* DataTables, if present */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--pv-border-strong); border-radius: var(--pv-radius-sm); padding: 6px 10px; }

/* -------- 9. Badges / pills ---------------------------------------- */
.badge {
  font-family: var(--pv-font); font-weight: 600; font-size: 11.5px; letter-spacing: .005em; padding: 4px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; vertical-align: middle; border: 1px solid transparent;
}
.badge.bg-primary, .badge-soft-primary, .badge.bg-primary-subtle { background: var(--pv-primary-50) !important; color: var(--pv-primary-700) !important; border-color: var(--pv-primary-100); }
.badge.bg-success, .badge-soft-success, .badge.bg-success-subtle { background: #E6F6EC !important; color: #0B7A3B !important; border-color: #C8EBD6; }
.badge.bg-warning, .badge-soft-warning, .badge.bg-warning-subtle { background: #FEF4E0 !important; color: #9A5F00 !important; border-color: #F8E3B5; }
.badge.bg-danger, .badge-soft-danger, .badge.bg-danger-subtle { background: #FDECEC !important; color: #B42328 !important; border-color: #F9D3D4; }
.badge.bg-info, .badge-soft-info, .badge.bg-info-subtle { background: #E5F3FC !important; color: #08689F !important; border-color: #C3E1F5; }
.badge.bg-secondary, .badge-soft-secondary, .badge.bg-secondary-subtle, .badge.bg-light, .badge.bg-dark { background: #F1F3F8 !important; color: #475066 !important; border-color: #E3E6EE; }
.badge.rounded-pill { border-radius: 999px; }
.topbar-badge { padding: 2px 6px; font-size: 10px; }
.text-success { color: var(--pv-success) !important; } .text-danger { color: var(--pv-danger) !important; } .text-warning { color: #C77D00 !important; } .text-info { color: var(--pv-info) !important; }
.bg-success-subtle { background: #E6F6EC !important; } .bg-danger-subtle { background: #FDECEC !important; } .bg-warning-subtle { background: #FEF4E0 !important; } .bg-info-subtle { background: #E5F3FC !important; } .bg-primary-subtle { background: var(--pv-primary-50) !important; }
.bg-light { background: #F5F6FA !important; }
.border { border-color: var(--pv-border) !important; }
.rounded { border-radius: var(--pv-radius-sm) !important; } .rounded-3 { border-radius: var(--pv-radius) !important; }
.shadow-sm { box-shadow: var(--pv-shadow-sm) !important; } .shadow { box-shadow: var(--pv-shadow-md) !important; }

/* -------- 10. Alerts / toasts / modals ---------------------------- */
.alert { border-radius: var(--pv-radius); border-width: 1px; padding: 12px 16px; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; box-shadow: none; }
.alert > i { margin-top: 2px; }
.alert-dismissible .btn-close { padding: 14px 14px; }
.alert-success { background: #F0FAF4; border-color: #C8EBD6; color: #0B7A3B; } .alert-danger { background: #FEF3F3; border-color: #F9D3D4; color: #B42328; }
.alert-warning { background: #FFF8EB; border-color: #F8E3B5; color: #8A5400; } .alert-info { background: #EFF8FE; border-color: #C3E1F5; color: #08689F; }
.alert-primary { background: var(--pv-primary-50); border-color: var(--pv-primary-100); color: var(--pv-primary-700); }
.toastify { border-radius: var(--pv-radius) !important; box-shadow: var(--pv-shadow-md) !important; font-family: var(--pv-font); font-size: 13.5px; font-weight: 500; padding: 12px 16px !important; }
.modal-backdrop.show { opacity: 1; background: rgba(15, 18, 34, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-content { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-lg); box-shadow: 0 24px 64px -12px rgba(16, 24, 40, .25); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--pv-border); padding: 16px 22px; } .modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 22px; } .modal-footer { border-top: 1px solid var(--pv-border); padding: 14px 22px; background: #FAFBFD; gap: 8px; }
.modal.fade .modal-dialog { transition: transform .2s var(--pv-ease), opacity .2s; }
.dropdown-menu { border: 1px solid var(--pv-border); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-md); padding: 6px; font-size: 13.5px; min-width: 200px; margin-top: 8px !important; animation: pv-pop .14s var(--pv-ease); }
@keyframes pv-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-item { border-radius: 7px; padding: 8px 10px; font-weight: 500; color: var(--pv-text); display: flex; align-items: center; gap: 9px; }
.dropdown-item:hover, .dropdown-item:focus { background: #F3F4F9; color: var(--pv-ink); }
.dropdown-item i { color: #7B8498; font-size: 16px !important; margin: 0 !important; }
.dropdown-header { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pv-faint); padding: 8px 10px 4px; }
.dropdown-divider { border-color: var(--pv-border); margin: 6px 0; }
.dropdown-item.text-danger:hover { background: #FDECEC; }
.tooltip-inner { background: var(--pv-ink); border-radius: 7px; font-size: 12px; padding: 5px 9px; }
.popover { border-color: var(--pv-border); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-md); }

/* -------- 11. Tabs / pagination / misc ---------------------------- */
.nav-tabs { border-bottom: 1px solid var(--pv-border); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--pv-muted); font-weight: 550; font-size: 13.5px; padding: 10px 14px; margin-bottom: -1px; border-radius: 0; transition: color .15s, border-color .15s; }
.nav-tabs .nav-link:hover { color: var(--pv-ink); border-color: var(--pv-border-strong); }
.nav-tabs .nav-link.active { color: var(--pv-primary-700); border-bottom-color: var(--pv-primary); background: transparent; }
.nav-pills .nav-link { border-radius: var(--pv-radius-sm); font-weight: 550; color: var(--pv-muted); font-size: 13.5px; }
.nav-pills .nav-link.active { background: var(--pv-primary-50); color: var(--pv-primary-700); }
.pagination { gap: 4px; margin: 0; }
.page-link { border: 1px solid var(--pv-border); border-radius: 8px !important; color: var(--pv-text); font-size: 13px; font-weight: 550; padding: 6px 12px; min-width: 34px; text-align: center; margin: 0 !important; }
.page-link:hover { background: #F3F4F9; color: var(--pv-ink); border-color: var(--pv-border-strong); }
.page-item.active .page-link { background: var(--pv-primary); border-color: var(--pv-primary); color: #fff; }
.page-item.disabled .page-link { background: #FAFBFD; color: #B9C0CF; }
.progress { height: 8px; background: #EDEFF5; border-radius: 999px; } .progress-bar { background: var(--pv-primary); border-radius: 999px; }
.list-group-item { border-color: var(--pv-border); }
.accordion-item { border-color: var(--pv-border); } .accordion-button:not(.collapsed) { background: var(--pv-primary-50); color: var(--pv-primary-700); box-shadow: none; }
.accordion-button:focus { box-shadow: var(--pv-ring); }
code { color: var(--pv-primary-700); background: var(--pv-primary-50); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; }
.empty-state, .pv-empty { text-align: center; padding: 48px 16px; color: var(--pv-muted); }
.spinner-border { color: var(--pv-primary); }
.img-thumbnail { border-radius: var(--pv-radius-sm); border-color: var(--pv-border); }
.apexcharts-tooltip { border-radius: 10px !important; box-shadow: var(--pv-shadow-md) !important; border: 1px solid var(--pv-border) !important; font-family: var(--pv-font) !important; }
.apexcharts-tooltip-title { background: #FAFBFD !important; border-bottom: 1px solid var(--pv-border) !important; font-family: var(--pv-font) !important; }
.apexcharts-text, .apexcharts-legend-text { font-family: var(--pv-font) !important; fill: var(--pv-muted); }
.apexcharts-gridline { stroke: #EEF0F6 !important; }
.pv-chart-wrap { position: relative; }

/* Reusable components */
.pv-kpi { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.pv-kpi .label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--pv-muted); }
.pv-kpi .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--pv-primary-50); color: var(--pv-primary); font-size: 18px; }
.pv-kpi .meta { font-size: 12.5px; color: var(--pv-muted); display: flex; align-items: center; gap: 6px; }
.pv-kpi.tone-success .icon { background: #E6F6EC; color: var(--pv-success); } .pv-kpi.tone-warning .icon { background: #FEF4E0; color: #C77D00; }
.pv-kpi.tone-danger .icon { background: #FDECEC; color: var(--pv-danger); } .pv-kpi.tone-info .icon { background: #E5F3FC; color: var(--pv-info); }
.pv-delta { font-weight: 600; font-size: 12px; padding: 2px 7px; border-radius: 999px; }
.pv-delta.up { color: #0B7A3B; background: #E6F6EC; } .pv-delta.down { color: #B42328; background: #FDECEC; }
.pv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }

/* Skeleton / page entrance (subtle) */
.main-content .container-fluid > * { animation: pv-in .28s var(--pv-ease) both; }
@keyframes pv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

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

/* ==========================================================================
   12. Compact / professional density (Razorpay / PayU style)
   Navy sidebar, 13px base type, tight spacing. Overrides earlier sections.
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] {
  --pv-bg: #F4F6FA;
  --pv-border: #E3E7EF;
  --pv-nav: #0B1B3F;
  --pv-nav-text: #B6C2DC;
  --pv-radius-sm: 6px; --pv-radius: 8px; --pv-radius-lg: 10px;
  --vz-body-bg: #F4F6FA;
}
body { font-size: 13px; line-height: 1.45; }
h1, .h1 { font-size: 1.5rem; } h2, .h2 { font-size: 1.3rem; } h3, .h3 { font-size: 1.1rem; }
h4, .h4 { font-size: 1rem; } h5, .h5 { font-size: .9rem; } h6, .h6 { font-size: .8rem; }

/* --- sidebar: deep navy --- */
.app-menu.navbar-menu { background: var(--pv-nav) !important; border-right: 0; }
.app-menu .navbar-brand-box { height: var(--pv-topbar-h); padding: 0 14px !important; border-bottom: 1px solid rgba(255,255,255,.07); }
.pv-logo, .pv-logo-text { color: #fff !important; }
.pv-logo-text small { color: #7F8FB5; }
.pv-logo-mark { width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; font-size: 13px; }
.app-menu #scrollbar { padding: 8px 8px 12px; }
.app-menu .navbar-nav { gap: 1px; }
.app-menu .menu-title { padding: 10px 10px 4px; font-size: 10.5px; color: #6C7DA6 !important; }
.app-menu .nav-link.menu-link { padding: 7px 10px !important; gap: 10px; font-size: 13px; color: var(--pv-nav-text) !important; border-radius: 6px; }
.app-menu .nav-link.menu-link i { width: 16px !important; height: 16px; font-size: 16px !important; color: #7F8FB5; }
.app-menu .nav-link.menu-link:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.app-menu .nav-link.menu-link:hover i { color: #fff; }
.app-menu .nav-link.menu-link.active, .app-menu .nav-link.menu-link[aria-expanded="true"].active { background: var(--pv-primary) !important; color: #fff !important; }
.app-menu .nav-link.menu-link.active i { color: #fff; }
.app-menu .nav-link.menu-link.active::before { display: none; }
.app-menu .menu-link[data-bs-toggle="collapse"]::after { background: #6C7DA6; width: 12px; height: 12px; flex-basis: 12px; }
.app-menu .menu-link[data-bs-toggle="collapse"].active::after { background: #fff; }
.app-menu .menu-dropdown .nav-sm { margin: 1px 0 3px 17px; padding: 1px 0 1px 10px; border-left: 1px solid rgba(255,255,255,.1); }
.app-menu .nav-sm .nav-link { padding: 5px 8px !important; font-size: 12.5px; color: #93A3C7 !important; border-radius: 5px; gap: 8px; }
.app-menu .nav-sm .nav-link i { width: 14px !important; height: 14px; font-size: 14px !important; }
.app-menu .nav-sm .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.app-menu .nav-sm .nav-link.active { background: rgba(91,76,240,.28) !important; color: #fff !important; }
.app-menu .badge, .app-menu .menu-link .badge { background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: transparent !important; padding: 2px 7px; font-size: 10.5px; }
.pv-sidebar-foot { padding: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.pv-sidebar-user { background: rgba(255,255,255,.06); padding: 6px 8px; }
.pv-sidebar-user .meta b { color: #fff; font-size: 12.5px; } .pv-sidebar-user .meta span { color: #8EA0C8; font-size: 11px; }
.pv-sidebar-user .pv-avatar { width: 28px; height: 28px; font-size: 11px; }
.app-menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }

/* --- topbar --- */
#page-topbar .navbar-header { padding: 0 18px !important; }
.pv-icon-btn { width: 32px; height: 32px; } .pv-icon-btn i, .pv-icon-btn svg { font-size: 17px; width: 17px; height: 17px; }
.pv-crumb strong { font-size: 13.5px; }
.pv-avatar { width: 26px; height: 26px; font-size: 11px; }
.pv-user-btn { padding: 3px 8px 3px 3px; gap: 8px; } .pv-user-btn .name { font-size: 12.5px; } .pv-user-btn .role { font-size: 10.5px; }

/* --- content area --- */
.main-content { padding-top: calc(var(--pv-topbar-h) + 16px) !important; }
.main-content > .container-fluid { padding: 0 18px !important; max-width: 1600px !important; }
.footer { padding: 14px 18px 12px !important; font-size: 12px; }
.row { --bs-gutter-x: 1rem; }
.row.g-4, .g-4 { --bs-gutter-x: .875rem; --bs-gutter-y: .875rem; }
.row.g-3, .g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
.mb-4 { margin-bottom: .875rem !important; } .mb-3 { margin-bottom: .625rem !important; } .mt-4 { margin-top: .875rem !important; } .mt-3 { margin-top: .625rem !important; }
.my-4 { margin-top: .875rem !important; margin-bottom: .875rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1rem !important; } .p-3 { padding: .75rem !important; }

/* --- page header --- */
.page-title-box { padding: 0 !important; margin: 0 0 2px !important; gap: 8px; }
.page-title-box h4, .page-title-box .page-title { font-size: 17px; font-weight: 650; margin: 0 !important; }
.page-title-box p { font-size: 12.5px; margin: 1px 0 0; }
.row.mb-4:has(> .col-12 > .page-title-box) { margin-bottom: .5rem !important; }

/* --- cards --- */
.card { margin-bottom: 14px; border-radius: var(--pv-radius-lg) !important; box-shadow: 0 1px 1px rgba(16,24,40,.03) !important; }
.card-header, .bg-card-hd { padding: 11px 14px !important; }
.card-header.border-0 { padding-bottom: 2px !important; }
.card-title, .card-header .card-title { font-size: 13.5px; }
.card-body { padding: 14px; }
.card-footer { padding: 9px 14px; }
.card-animate:hover { transform: none; box-shadow: var(--pv-shadow-sm) !important; }
.card-animate .card-body h2, .card-animate .card-body h3, .card-animate .card-body .counter-value, .pv-kpi .value { font-size: 22px; margin-bottom: 4px !important; }
.card-animate .card-body > .d-flex > div:first-child > p:first-child, .card-animate .card-body p.fw-medium { font-size: 12px; margin-bottom: 4px !important; }
.card-animate .card-body p { font-size: 12px; }
.avatar-sm { height: 2.1rem; width: 2.1rem; } .avatar-title.fs-3 { font-size: 16px !important; }
.avatar-sm .avatar-title.rounded-circle, .avatar-title.rounded-circle.fs-3 { border-radius: 8px !important; }
.pv-kpi { padding: 14px; gap: 6px; } .pv-kpi .icon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }

/* --- buttons --- */
.btn { font-size: 12.5px; padding: 6px 12px; border-radius: 6px; gap: 5px; }
.btn-sm { padding: 3px 8px; font-size: 12px; border-radius: 5px; } .btn-lg { padding: 8px 16px; font-size: 14px; }
.btn-icon { width: 30px; height: 30px; }
.btn-success { background: #0F9D58; border-color: #0F9D58; } .btn-success:hover { background: #0B8049 !important; border-color: #0B8049 !important; }

/* --- forms --- */
.form-label, label.form-label { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: #3A4258; }
.form-control, .form-select, .input-group-text, textarea.form-control { font-size: 13px; padding: 5.5px 10px; min-height: 34px; border-radius: 6px; box-shadow: none; }
.form-control-sm, .form-select-sm { min-height: 28px; padding: 3px 8px; font-size: 12px; } .form-control-lg, .form-select-lg { min-height: 40px; font-size: 14px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(91,76,240,.14) !important; }
.ts-control { min-height: 34px; padding: 4px 8px !important; font-size: 13px; border-radius: 6px !important; box-shadow: none !important; }
.form-text, .text-muted.small { font-size: 11.5px; }

/* --- tables: dense --- */
.table { font-size: 12.5px; }
.table > :not(caption) > * > * { padding: 8px 12px; }
.table thead th, .table > thead > tr > th, .table-light, .table-light > th, thead.table-light th { font-size: 10.5px !important; letter-spacing: .04em; padding-top: 8px !important; padding-bottom: 8px !important; background: #F7F9FC !important; }
.table .btn-sm, .table .btn-icon { padding: 3px 7px; }
.badge { font-size: 10.5px; padding: 3px 8px; font-weight: 600; }

/* --- misc --- */
.alert { padding: 8px 12px; font-size: 12.5px; border-radius: 8px; gap: 8px; margin-bottom: 12px; }
.modal-header { padding: 12px 16px; } .modal-body { padding: 16px; } .modal-footer { padding: 10px 16px; } .modal-title { font-size: 14.5px; }
.dropdown-menu { font-size: 12.5px; padding: 4px; min-width: 170px; } .dropdown-item { padding: 6px 8px; }
.nav-tabs .nav-link { padding: 7px 12px; font-size: 12.5px; } .nav-pills .nav-link { font-size: 12.5px; padding: 6px 12px; }
.page-link { padding: 4px 9px; font-size: 12px; min-width: 28px; }
.accordion-button { padding: .7rem 1rem; font-size: 13px; }
.list-group-item { padding: 8px 12px; }
.fs-13 { font-size: 12px !important; } .fs-14 { font-size: 13px !important; } .fs-15 { font-size: 13px !important; } .fs-16 { font-size: 14px !important; }
@media (max-width: 991.98px) {
  .main-content > .container-fluid { padding: 0 12px !important; }
  #page-topbar .navbar-header { padding: 0 10px !important; }
}

/* ==========================================================================
   13. Light sidebar (no blue), uniform spacing & tables on every page
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] {
  --pv-gap: 16px;          /* single spacing unit used for page padding, card gaps, grid gutters */
  --pv-cell-y: 9px;        /* table cell padding (vertical) */
  --pv-cell-x: 14px;       /* table cell padding (horizontal) */
}

/* ---- Sidebar: clean white, grouped sections ---- */
.app-menu.navbar-menu { background: #fff !important; border-right: 1px solid var(--pv-border); }
.app-menu .navbar-brand-box { border-bottom: 1px solid var(--pv-border); }
.pv-logo, .pv-logo-text { color: var(--pv-ink) !important; }
.pv-logo-text small { color: var(--pv-faint); }
.app-menu #scrollbar { padding: 6px 10px 12px; }
.app-menu .navbar-nav { gap: 1px; }
.app-menu .menu-title {
  padding: 16px 10px 6px; margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #8A93A6 !important; display: flex; align-items: center; gap: 8px;
}
.app-menu .menu-title:first-child { padding-top: 8px; }
.app-menu .menu-title::after { content: ''; flex: 1; height: 1px; background: var(--pv-border); }
.app-menu .nav-link.menu-link { color: #3F475C !important; font-weight: 500; padding: 7px 10px !important; }
.app-menu .nav-link.menu-link i { color: #7B8498; }
.app-menu .nav-link.menu-link:hover { background: #F3F4F8; color: var(--pv-ink) !important; }
.app-menu .nav-link.menu-link:hover i { color: var(--pv-text); }
.app-menu .nav-link.menu-link.active, .app-menu .nav-link.menu-link[aria-expanded="true"].active { background: var(--pv-primary-50) !important; color: var(--pv-primary-700) !important; font-weight: 600; }
.app-menu .nav-link.menu-link.active i { color: var(--pv-primary); }
.app-menu .nav-link.menu-link.active::before { display: block; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pv-primary); }
.app-menu .menu-link[data-bs-toggle="collapse"]::after { background: #A3ABBB; }
.app-menu .menu-link[data-bs-toggle="collapse"].active::after { background: var(--pv-primary); }
.app-menu .menu-dropdown .nav-sm { border-left: 1px solid var(--pv-border); }
.app-menu .nav-sm .nav-link { color: #667085 !important; }
.app-menu .nav-sm .nav-link:hover { background: #F3F4F8 !important; color: var(--pv-ink) !important; }
.app-menu .nav-sm .nav-link.active { background: var(--pv-primary-50) !important; color: var(--pv-primary-700) !important; }
.app-menu .badge, .app-menu .menu-link .badge { background: #EEF0F6 !important; color: #475066 !important; border-color: transparent !important; }
.app-menu .badge.bg-danger { background: #FDECEC !important; color: #B42328 !important; }
.pv-sidebar-foot { border-top: 1px solid var(--pv-border); }
.pv-sidebar-user { background: #F6F7FA; }
.pv-sidebar-user .meta b { color: var(--pv-ink); } .pv-sidebar-user .meta span { color: var(--pv-muted); }
.app-menu ::-webkit-scrollbar-thumb { background: #D5D9E4; }
body.pv-collapsed .app-menu .menu-title { display: none !important; }

/* ---- Uniform page spacing ---- */
.main-content { padding-top: calc(var(--pv-topbar-h) + var(--pv-gap)) !important; }
.main-content > .container-fluid { padding: 0 var(--pv-gap) !important; max-width: 1600px !important; }
.main-content .page-content, .main-content .page-content > .container-fluid, .main-content .container-fluid > .container-fluid,
.main-content .container-xxl, .main-content .container-lg, .main-content .container { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; margin-top: 0 !important; max-width: none !important; }
.footer { padding: var(--pv-gap) var(--pv-gap) 12px !important; }
.row { --bs-gutter-x: var(--pv-gap); --bs-gutter-y: var(--pv-gap); margin-bottom: 0; }
.row.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.row.g-1, .row.g-2 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
.row.g-3, .row.g-4, .row.g-5 { --bs-gutter-x: var(--pv-gap); --bs-gutter-y: var(--pv-gap); }
/* spacing between stacked blocks is the same everywhere */
.row.mb-1, .row.mb-2, .row.mb-3, .row.mb-4, .row.mb-5, .mb-4, .mb-5 { margin-bottom: var(--pv-gap) !important; }
.card { margin-bottom: var(--pv-gap); }
.row > [class*="col"] > .card:last-child { margin-bottom: 0; }
.row > [class*="col"]:empty { display: none; }
.card-header, .bg-card-hd { padding: 12px var(--pv-gap) !important; }
.card-body { padding: var(--pv-gap); }
.card-footer { padding: 10px var(--pv-gap); }
.page-title-box { margin: 0 0 var(--pv-gap) !important; }
.row:has(> .col-12 > .page-title-box) { --bs-gutter-y: 0; margin-bottom: 0 !important; }
.alert { margin-bottom: var(--pv-gap); }

/* ---- Uniform tables ---- */
.table { font-size: 13px !important; --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: var(--pv-cell-y) var(--pv-cell-x) !important; font-size: 13px; line-height: 1.4; vertical-align: middle; }
.table thead th, .table > thead > tr > th, thead.table-light th, .table-light > th {
  font-size: 11px !important; padding: 9px var(--pv-cell-x) !important; background: #F6F8FB !important; color: #5B6478 !important;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600 !important; white-space: nowrap; border-bottom: 1px solid var(--pv-border) !important;
}
.table tbody td { border-bottom: 1px solid #EEF0F5 !important; }
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table td .btn-sm, .table td .btn-icon { padding: 3px 7px; min-height: 26px; }
.table td img { max-height: 40px; }
.table-responsive, .card .table-responsive { border: 1px solid var(--pv-border); border-radius: var(--pv-radius); background: #fff; }
.card > .table-responsive, .card-body.p-0 > .table-responsive { border: 0; border-radius: 0; border-top: 1px solid var(--pv-border); }
.card-header.border-0 + .card-body { padding-top: 0; }
.table-responsive > .table { margin: 0; }
.dataTables_wrapper .row { margin-top: 0; }
@media (max-width: 991.98px) {
  :root { --pv-gap: 12px; --pv-cell-x: 10px; }
}

/* ==========================================================================
   14. Soft-dark sidebar, clear active state, shimmer, tighter title spacing
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] { --pv-side: #20242F; --pv-side-2: #292E3B; }

/* ---- Sidebar: soft charcoal (neutral, no blue) ---- */
.app-menu.navbar-menu { background: var(--pv-side) !important; border-right: 1px solid #14161D; }
.app-menu .navbar-brand-box { border-bottom: 1px solid rgba(255,255,255,.07); }
.pv-logo, .pv-logo-text { color: #fff !important; }
.pv-logo-text small { color: #8A91A3; }
.app-menu .menu-title { color: #7D8497 !important; }
.app-menu .menu-title::after { background: rgba(255,255,255,.08); }
.app-menu .nav-link.menu-link { color: #C3C8D4 !important; }
.app-menu .nav-link.menu-link i { color: #8E95A8; }                 /* neutral grey icons */
.app-menu .nav-link.menu-link:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.app-menu .nav-link.menu-link:hover i { color: #E6E8EE; }
/* ACTIVE: bright pill + accent bar, clearly visible */
.app-menu .nav-link.menu-link.active,
.app-menu .nav-link.menu-link[aria-expanded="true"].active,
.app-menu .nav-link.menu-link.pv-active {
  background: var(--pv-side-2) !important; color: #fff !important; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.25);
}
.app-menu .nav-link.menu-link.active i, .app-menu .nav-link.menu-link.pv-active i { color: #fff; }
.app-menu .nav-link.menu-link.active::before, .app-menu .nav-link.menu-link.pv-active::before {
  display: block; content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #F5A524;
}
.app-menu .menu-link[data-bs-toggle="collapse"]::after { background: #7D8497; }
.app-menu .menu-link[data-bs-toggle="collapse"].active::after, .app-menu .menu-link[data-bs-toggle="collapse"].pv-active::after { background: #fff; }
.app-menu .menu-dropdown .nav-sm { border-left: 1px solid rgba(255,255,255,.1); }
.app-menu .nav-sm .nav-link { color: #A3AABB !important; position: relative; }
.app-menu .nav-sm .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.app-menu .nav-sm .nav-link.active, .app-menu .nav-sm .nav-link.pv-active { background: var(--pv-side-2) !important; color: #fff !important; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.app-menu .nav-sm .nav-link.active::before, .app-menu .nav-sm .nav-link.pv-active::before {
  display: block !important; content: ''; position: absolute; left: -11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 3px var(--pv-side);
}
.app-menu .badge, .app-menu .menu-link .badge { background: rgba(255,255,255,.12) !important; color: #E6E8EE !important; }
.app-menu .badge.bg-danger { background: rgba(229,72,77,.22) !important; color: #FF9A9D !important; }
.pv-sidebar-foot { border-top: 1px solid rgba(255,255,255,.07); }
.pv-sidebar-user { background: rgba(255,255,255,.05); }
.pv-sidebar-user .meta b { color: #fff; } .pv-sidebar-user .meta span { color: #8A91A3; }
.app-menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }
.app-menu .pv-avatar { background: #3A4152; }

/* ---- Topbar icons stay neutral ---- */
.pv-icon-btn { color: #596176; }

/* ---- Shimmer ---- */
@keyframes pv-shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.card { position: relative; overflow: hidden; }
.card.pv-sheen::after, .card-animate:hover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); animation: pv-shimmer .9s var(--pv-ease) var(--d, 0ms) 1 forwards;
}
.card-animate:hover::after { animation-duration: .8s; }
/* card with dropdowns/tom-select must not clip menus */
.card:has(.dropdown-menu.show), .card:has(.ts-dropdown), .card:has(.choices__list--dropdown) { overflow: visible; }
.pv-skeleton { position: relative; overflow: hidden; background: #EEF0F5; border-radius: 6px; min-height: 12px; }
.pv-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); animation: pv-shimmer 1.2s linear infinite; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); }
.btn-primary:hover::after { animation: pv-shimmer .7s var(--pv-ease) 1 forwards; }
@media (prefers-reduced-motion: reduce) { .card.pv-sheen::after, .card-animate:hover::after, .btn-primary:hover::after { animation: none; } }

/* ---- Tighter space around page title ---- */
.main-content { padding-top: calc(var(--pv-topbar-h) + 10px) !important; }
.page-title-box { margin: 0 0 10px !important; }
.page-title-box h4, .page-title-box .page-title { line-height: 1.25; }
.page-title-box p { margin: 0; line-height: 1.3; }
.row:has(> .col-12 > .page-title-box) { margin-bottom: 0 !important; }
.page-content > .row:first-child, .page-content > .container-fluid > .row:first-child { margin-top: 0; }
.page-content > .container-fluid > .row.mb-4:first-child, .row.mb-4:has(> .col-12 > .page-title-box) { margin-bottom: 0 !important; }

/* ==========================================================================
   15. Page title in a boxed header with soft shadow + load shimmer
   ========================================================================== */
.page-title-box {
  position: relative; overflow: hidden;
  background: #fff !important; border: 1px solid var(--pv-border) !important; border-radius: var(--pv-radius-lg) !important;
  padding: 14px var(--pv-gap) !important; margin: 0 0 14px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px -4px rgba(16,24,40,.08) !important;
}
.page-title-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pv-primary); border-radius: 3px 0 0 3px; }
.page-title-box.pv-sheen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-120%); animation: pv-shimmer 1s var(--pv-ease) 1 forwards;
}
.page-title-box h4, .page-title-box .page-title { font-size: 17px; line-height: 1.3; }
.page-title-box p { margin-top: 2px; }
.main-content { padding-top: calc(var(--pv-topbar-h) + 14px) !important; }
.row:has(> .col-12 > .page-title-box) { margin-bottom: 0 !important; }
.row:has(> .col-12 > .page-title-box) > .col-12 { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .page-title-box.pv-sheen::after { animation: none; } }

/* ==========================================================================
   16. Sidebar: just a shade darker than the page background (light grey)
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] { --pv-side: #E8EBF2; --pv-side-2: #FFFFFF; }
.app-menu.navbar-menu { background: var(--pv-side) !important; border-right: 1px solid #D9DDE7; }
.app-menu .navbar-brand-box { border-bottom: 1px solid #D9DDE7; }
.pv-logo, .pv-logo-text { color: var(--pv-ink) !important; }
.pv-logo-text small { color: #7A8296; }
.app-menu .menu-title { color: #7A8296 !important; }
.app-menu .menu-title::after { background: #D5D9E4; }
.app-menu .nav-link.menu-link { color: #3A4256 !important; }
.app-menu .nav-link.menu-link i { color: #6B7388; }
.app-menu .nav-link.menu-link:hover { background: rgba(255,255,255,.6); color: var(--pv-ink) !important; }
.app-menu .nav-link.menu-link:hover i { color: var(--pv-ink); }
.app-menu .nav-link.menu-link.active, .app-menu .nav-link.menu-link[aria-expanded="true"].active, .app-menu .nav-link.menu-link.pv-active {
  background: #fff !important; color: var(--pv-ink) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px #D9DDE7;
}
.app-menu .nav-link.menu-link.active i, .app-menu .nav-link.menu-link.pv-active i { color: var(--pv-ink); }
.app-menu .menu-link[data-bs-toggle="collapse"]::after { background: #98A0B3; }
.app-menu .menu-link[data-bs-toggle="collapse"].active::after, .app-menu .menu-link[data-bs-toggle="collapse"].pv-active::after { background: var(--pv-ink); }
.app-menu .menu-dropdown .nav-sm { border-left: 1px solid #D0D5E0; }
.app-menu .nav-sm .nav-link { color: #566078 !important; }
.app-menu .nav-sm .nav-link:hover { background: rgba(255,255,255,.6) !important; color: var(--pv-ink) !important; }
.app-menu .nav-sm .nav-link.active, .app-menu .nav-sm .nav-link.pv-active { background: #fff !important; color: var(--pv-ink) !important; box-shadow: 0 1px 2px rgba(16,24,40,.07), 0 0 0 1px #D9DDE7; }
.app-menu .nav-sm .nav-link.active::before, .app-menu .nav-sm .nav-link.pv-active::before { box-shadow: 0 0 0 3px var(--pv-side); }
.app-menu .badge, .app-menu .menu-link .badge { background: #fff !important; color: #475066 !important; box-shadow: 0 0 0 1px #D9DDE7; }
.app-menu .badge.bg-danger { background: #FDECEC !important; color: #B42328 !important; box-shadow: 0 0 0 1px #F8C6C8; }
.pv-sidebar-foot { border-top: 1px solid #D9DDE7; }
.pv-sidebar-user { background: #fff; box-shadow: 0 0 0 1px #D9DDE7; }
.pv-sidebar-user .meta b { color: var(--pv-ink); } .pv-sidebar-user .meta span { color: var(--pv-muted); }
.app-menu ::-webkit-scrollbar-thumb { background: #C3C9D8; }
.app-menu .pv-avatar { background: linear-gradient(135deg, #6E60F5, #4A3BDB); }

/* ==========================================================================
   17. PAGE LAYOUT TOKENS  — change here, every page follows.
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] {
  --pv-page-top: 18px;        /* gap between topbar and the page title (all pages) */
  --pv-title-size: 18px;      /* page title font size */
  --pv-title-gap: 16px;       /* gap between title block and content below */
  --pv-page-x: 20px;          /* left/right page padding */
}
.main-content { padding-top: calc(var(--pv-topbar-h) + var(--pv-page-top)) !important; }
.main-content > .container-fluid { padding-left: var(--pv-page-x) !important; padding-right: var(--pv-page-x) !important; }
@media (max-width: 991.98px) { :root { --pv-page-x: 12px; --pv-page-top: 14px; } }

/* Neutralise every per-page wrapper so the title always starts at the same point */
.pv-page > .container, .pv-page > .container-fluid, .pv-page > .page-content,
.pv-page > .page-content > .container-fluid, .pv-page > div > .container, .pv-page > .container-fluid > .container {
  max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  padding-top: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
.pv-page .container.py-4, .pv-page .container-fluid.py-4, .pv-page > .container-fluid > .container.py-4,
.pv-page .page-header.py-4, .pv-page .d-flex.py-4:first-child { padding-top: 0 !important; padding-bottom: 0 !important; }
.pv-page .container-fluid.px-4, .pv-page .container-fluid.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pv-page > .container-fluid[style*="margin-top"] { margin-top: 0 !important; }
.pv-page [class*="col"].mt-5:first-child, .pv-page [class*="col"].mt-4:first-child, .pv-page [class*="col"].mt-3:first-child,
.pv-page .row:first-child > [class*="col"].mt-5 { margin-top: 0 !important; }
.pv-page > :first-child, .pv-page > :first-child > :first-child, .pv-page > :first-child > :first-child > :first-child { margin-top: 0; }
.pv-page .page-content { margin: 0 !important; padding: 0 !important; }

/* Title block: identical look on every page, no box */
.page-title-box, .pv-page .page-header {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible;
  padding: 0 !important; margin: 0 0 var(--pv-title-gap) !important;
}
.page-title-box::before, .page-title-box.pv-sheen::after { display: none !important; }
.page-title-box h4, .page-title-box .page-title, .pv-page h3.fw-bold:first-of-type, .pv-page .page-header h1, .pv-page .page-header h2, .pv-page .page-header h3 {
  font-size: var(--pv-title-size) !important; font-weight: 650 !important; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 2px !important; color: var(--pv-ink);
}
.pv-page .d-flex.justify-content-between.align-items-center.mb-4:first-child, .pv-page .container > .d-flex.mb-4:first-child { margin-bottom: var(--pv-title-gap) !important; }
.pv-page p.text-muted.mb-0.fs-6 { font-size: 13px !important; }

/* ==========================================================================
   18. SIDEBAR COLOUR TOKENS — soft warm-lilac, change here only.
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] {
  --pv-side: #EEEBF6;         /* background (a shade darker than the page) */
  --pv-side-hover: rgba(255,255,255,.65);
  --pv-side-line: #DDD8EC;    /* borders & dividers */
  --pv-side-text: #3B3A52;
  --pv-side-muted: #7B7894;
  --pv-side-icon: #6E6B8A;
  --pv-side-accent: #5B4CF0;  /* active marker */
}
.app-menu.navbar-menu { background: var(--pv-side) !important; border-right-color: var(--pv-side-line); }
.app-menu .navbar-brand-box, .pv-sidebar-foot { border-color: var(--pv-side-line); }
.pv-logo-text small, .app-menu .menu-title { color: var(--pv-side-muted) !important; }
.app-menu .menu-title::after { background: var(--pv-side-line); }
.app-menu .nav-link.menu-link { color: var(--pv-side-text) !important; }
.app-menu .nav-link.menu-link i { color: var(--pv-side-icon); }
.app-menu .nav-link.menu-link:hover, .app-menu .nav-sm .nav-link:hover { background: var(--pv-side-hover) !important; }
.app-menu .nav-link.menu-link.active, .app-menu .nav-link.menu-link[aria-expanded="true"].active, .app-menu .nav-link.menu-link.pv-active,
.app-menu .nav-sm .nav-link.active, .app-menu .nav-sm .nav-link.pv-active {
  background: #fff !important; color: var(--pv-ink) !important; box-shadow: 0 1px 2px rgba(60,50,120,.10), 0 0 0 1px var(--pv-side-line);
}
.app-menu .nav-link.menu-link.active::before, .app-menu .nav-link.menu-link.pv-active::before { background: var(--pv-side-accent); }
.app-menu .nav-sm .nav-link.active::before, .app-menu .nav-sm .nav-link.pv-active::before { background: var(--pv-side-accent); box-shadow: 0 0 0 3px var(--pv-side); }
.app-menu .menu-dropdown .nav-sm { border-left-color: var(--pv-side-line); }
.app-menu .nav-sm .nav-link { color: var(--pv-side-muted) !important; }
.app-menu .nav-sm .nav-link:hover { color: var(--pv-ink) !important; }
.app-menu .badge, .app-menu .menu-link .badge, .pv-sidebar-user { box-shadow: 0 0 0 1px var(--pv-side-line); }
.app-menu ::-webkit-scrollbar-thumb { background: #CDC8E0; }

/* ==========================================================================
   19. SIDEBAR back to deep navy  (single place: --pv-side* tokens below)
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] {
  --pv-side: #0B1B3F; --pv-side-hover: rgba(255,255,255,.06); --pv-side-line: rgba(255,255,255,.08);
  --pv-side-text: #C3CCE2; --pv-side-muted: #7F8FB5; --pv-side-icon: #8394BC; --pv-side-accent: #5B4CF0;
}
.app-menu.navbar-menu { background: var(--pv-side) !important; border-right: 0; }
.app-menu .navbar-brand-box, .pv-sidebar-foot { border-color: var(--pv-side-line); }
.pv-logo, .pv-logo-text { color: #fff !important; }
.pv-logo-text small, .app-menu .menu-title { color: var(--pv-side-muted) !important; }
.app-menu .menu-title::after { background: var(--pv-side-line); }
.app-menu .nav-link.menu-link { color: var(--pv-side-text) !important; }
.app-menu .nav-link.menu-link i { color: var(--pv-side-icon); }
.app-menu .nav-link.menu-link:hover, .app-menu .nav-sm .nav-link:hover { background: var(--pv-side-hover) !important; color: #fff !important; }
.app-menu .nav-link.menu-link:hover i { color: #fff; }
.app-menu .nav-link.menu-link.active, .app-menu .nav-link.menu-link[aria-expanded="true"].active, .app-menu .nav-link.menu-link.pv-active {
  background: var(--pv-side-accent) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.25); font-weight: 600;
}
.app-menu .nav-link.menu-link.active i, .app-menu .nav-link.menu-link.pv-active i { color: #fff; }
.app-menu .nav-link.menu-link.active::before, .app-menu .nav-link.menu-link.pv-active::before { display: none; }
.app-menu .menu-link[data-bs-toggle="collapse"]::after { background: var(--pv-side-muted); }
.app-menu .menu-link[data-bs-toggle="collapse"].active::after, .app-menu .menu-link[data-bs-toggle="collapse"].pv-active::after { background: #fff; }
.app-menu .menu-dropdown .nav-sm { border-left-color: var(--pv-side-line); }
.app-menu .nav-sm .nav-link { color: #98A7CB !important; }
.app-menu .nav-sm .nav-link.active, .app-menu .nav-sm .nav-link.pv-active { background: rgba(91,76,240,.30) !important; color: #fff !important; box-shadow: none; }
.app-menu .nav-sm .nav-link.active::before, .app-menu .nav-sm .nav-link.pv-active::before { background: #fff; box-shadow: 0 0 0 3px var(--pv-side); }
.app-menu .badge, .app-menu .menu-link .badge { background: rgba(255,255,255,.14) !important; color: #fff !important; box-shadow: none; }
.app-menu .badge.bg-danger { background: rgba(229,72,77,.28) !important; color: #FFB3B5 !important; }
.pv-sidebar-user { background: rgba(255,255,255,.06); box-shadow: none; }
.pv-sidebar-user .meta b { color: #fff; } .pv-sidebar-user .meta span { color: #8EA0C8; }
.app-menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.app-menu .pv-avatar { background: #2A3B66; }

/* ==========================================================================
   20. KPI / STAT CARDS — one look on every page
   Covers: .card-animate (Velzon), .stats-card, .stat-card, .pv-kpi
   ========================================================================== */
.card-animate, .stats-card, .stat-card {
  border: 1px solid var(--pv-border) !important; border-radius: var(--pv-radius-lg) !important; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; transition: box-shadow .18s var(--pv-ease), border-color .18s;
}
.card-animate:hover, .stats-card:hover, .stat-card:hover { transform: none !important; box-shadow: var(--pv-shadow-md) !important; border-color: var(--pv-border-strong) !important; }
.card-animate .card-body, .stats-card .card-body, .stat-card .card-body { padding: 14px 16px !important; }
/* label */
.stats-card h6, .stats-card .text-muted.mb-1, .stat-card .text-muted.small, .stat-card .small.text-muted, .card-animate p.fw-medium {
  font-size: 12px !important; font-weight: 500 !important; color: var(--pv-muted) !important; margin: 0 0 4px !important; text-transform: none; letter-spacing: 0;
}
/* value */
.stats-card h3, .stats-card h2, .stat-card .fs-4, .stat-card .fw-bold.fs-4, .card-animate h2, .card-animate h3 {
  font-size: 22px !important; font-weight: 650 !important; letter-spacing: -.03em; line-height: 1.15; color: var(--pv-ink) !important; margin: 0 !important;
  font-variant-numeric: tabular-nums;
}
.stats-card small, .card-animate .card-body p.mb-0.text-muted:not(.fw-medium) { font-size: 12px; color: var(--pv-muted) !important; }
/* icon tile */
.stats-icon, .stat-icon, .card-animate .avatar-sm .avatar-title {
  width: 38px !important; height: 38px !important; border-radius: 10px !important; display: grid !important; place-items: center; font-size: 17px !important; flex: none;
}
.stats-icon i, .stat-icon i { font-size: 17px !important; }
.card-animate .avatar-sm { width: 38px; height: 38px; }
.stats-icon.bg-opacity-10, .stat-icon.bg-opacity-10 { --bs-bg-opacity: .12; }
/* mobile */
@media (max-width: 767.98px) {
  .stats-card h3, .card-animate h2, .stat-card .fs-4 { font-size: 19px !important; }
  .stats-card .card-body, .card-animate .card-body, .stat-card .card-body { padding: 12px !important; }
}
/* stat rows: same gap as the rest of the layout */
.row.g-3 > [class*="col"] > .stats-card, .row.g-3 > [class*="col"] > .stat-card { margin-bottom: 0 !important; }

/* ==========================================================================
   21. SIDEBAR: light (tokens above can be edited in one place)
   ========================================================================== */
:root, html[data-layout], html[data-sidebar] {
  --pv-side: #EEEBF6; --pv-side-hover: rgba(255,255,255,.7); --pv-side-line: #DDD8EC;
  --pv-side-text: #3B3A52; --pv-side-muted: #7B7894; --pv-side-icon: #6E6B8A; --pv-side-accent: #5B4CF0;
}
.app-menu.navbar-menu { background: var(--pv-side) !important; border-right: 1px solid var(--pv-side-line); }
.pv-logo, .pv-logo-text { color: var(--pv-ink) !important; }
.app-menu .nav-link.menu-link:hover, .app-menu .nav-sm .nav-link:hover { background: var(--pv-side-hover) !important; color: var(--pv-ink) !important; }
.app-menu .nav-link.menu-link:hover i { color: var(--pv-ink); }
.app-menu .nav-link.menu-link.active, .app-menu .nav-link.menu-link[aria-expanded="true"].active, .app-menu .nav-link.menu-link.pv-active,
.app-menu .nav-sm .nav-link.active, .app-menu .nav-sm .nav-link.pv-active {
  background: #fff !important; color: var(--pv-ink) !important; box-shadow: 0 1px 2px rgba(60,50,120,.10), 0 0 0 1px var(--pv-side-line); font-weight: 600;
}
.app-menu .nav-link.menu-link.active i, .app-menu .nav-link.menu-link.pv-active i { color: var(--pv-side-accent); }
.app-menu .nav-link.menu-link.active::before, .app-menu .nav-link.menu-link.pv-active::before { display: block; background: var(--pv-side-accent); }
.app-menu .menu-link[data-bs-toggle="collapse"].active::after, .app-menu .menu-link[data-bs-toggle="collapse"].pv-active::after { background: var(--pv-ink); }
.app-menu .nav-sm .nav-link { color: var(--pv-side-muted) !important; }
.app-menu .nav-sm .nav-link.active::before, .app-menu .nav-sm .nav-link.pv-active::before { background: var(--pv-side-accent); }
.app-menu .badge, .app-menu .menu-link .badge { background: #fff !important; color: #475066 !important; box-shadow: 0 0 0 1px var(--pv-side-line); }
.app-menu .badge.bg-danger { background: #FDECEC !important; color: #B42328 !important; box-shadow: 0 0 0 1px #F8C6C8; }
.pv-sidebar-user { background: #fff; box-shadow: 0 0 0 1px var(--pv-side-line); }
.pv-sidebar-user .meta b { color: var(--pv-ink); } .pv-sidebar-user .meta span { color: var(--pv-muted); }
.app-menu ::-webkit-scrollbar-thumb { background: #CDC8E0; }
.app-menu .pv-avatar { background: linear-gradient(135deg, #6E60F5, #4A3BDB); }

/* ---- KPI cards on all pages: lower height ---- */
.card-animate .card-body, .stats-card .card-body, .stat-card .card-body { padding: 10px 14px !important; }
.stats-card h3, .card-animate h2, .card-animate h3, .stat-card .fs-4 { font-size: 19px !important; }
.card-animate h2.mt-2, .card-animate h2.mt-0 { margin-top: 2px !important; }
.card-animate .card-body p, .stats-card small { margin-bottom: 0 !important; }
.stats-icon, .stat-icon, .card-animate .avatar-sm .avatar-title { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
.card-animate .avatar-sm { width: 34px; height: 34px; }
.row.g-3 > [class*="col"] > .stats-card, .row.g-4 > [class*="col"] > .card-animate { height: auto; }