/* ==========================================================================
   AI Global Ventures Invoice Management System
   Premium Modern UI Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Palette */
  --brand-primary:   #4f46e5;
  --brand-primary-light: #818cf8;
  --brand-primary-dark:  #3730a3;
  --brand-secondary: #06b6d4;
  --brand-accent:    #f59e0b;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-info:    #06b6d4;

  /* Neutrals */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Surfaces */
  --surface-white: #ffffff;
  --surface-bg:    #f0f2f8;
  --surface-card:  #ffffff;

  /* Typography */
  --font-sans: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Sizing */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;

  /* Shadows */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.15);

  /* Transitions */
  --transition-fast:   all .15s ease;
  --transition-normal: all .25s ease;
  --transition-slow:   all .4s ease;

  /* KPI Card Gradients */
  --grad-income:    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --grad-invoice:   linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --grad-paid:      linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --grad-unpaid:    linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --grad-expense:   linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --grad-customers: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
  --grad-services:  linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
  --grad-products:  linear-gradient(135deg, #96fbc4 0%, #f9f586 100%);
}

/* Dark mode tokens */
[data-pc-theme="dark"] {
  --surface-bg:   #0f1117;
  --surface-card: #1a1d2e;
  --gray-100: #1e2130;
  --gray-200: #252840;
}

/* --------------------------------------------------------------------------
   2. Base & Typography
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans) !important;
  background-color: var(--surface-bg) !important;
  color: var(--gray-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  color: var(--gray-800);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   3. Sidebar — Premium Redesign
   -------------------------------------------------------------------------- */
.pc-sidebar {
  background: linear-gradient(180deg, #1a1d2e 0%, #252840 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.15) !important;
  z-index: 1050;
}

/* Logo area */
.pc-sidebar .m-header {
  background: transparent !important;
  padding: 1.5rem 1.25rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.pc-sidebar .m-header .b-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none !important;
}

.pc-sidebar .m-header .b-brand .logo {
  max-height: 42px !important;
  max-width: 180px !important;
  object-fit: contain;
}

/* Scrollbar */
.pc-sidebar .navbar-content {
  padding: .75rem 0 1rem !important;
}

.pc-sidebar .navbar-content::-webkit-scrollbar { width: 4px; }
.pc-sidebar .navbar-content::-webkit-scrollbar-track { background: transparent; }
.pc-sidebar .navbar-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 4px;
}

/* Section captions */
.pc-sidebar .pc-navbar .pc-caption {
  padding: 1.25rem 1.25rem .35rem !important;
}

.pc-sidebar .pc-navbar .pc-caption > label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
}

.pc-sidebar .pc-navbar .pc-caption > i { display: none !important; }

/* Nav items */
.pc-sidebar .pc-navbar .pc-item {
  margin: 2px .75rem !important;
}

.pc-sidebar .pc-navbar .pc-item > .pc-link {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .65rem .85rem !important;
  border-radius: var(--radius-md) !important;
  color: rgba(255,255,255,.60) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  transition: var(--transition-fast) !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.pc-sidebar .pc-navbar .pc-item > .pc-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(99,102,241,.15), transparent);
  opacity: 0;
  transition: var(--transition-fast);
  border-radius: inherit;
}

.pc-sidebar .pc-navbar .pc-item > .pc-link:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.07) !important;
}

.pc-sidebar .pc-navbar .pc-item > .pc-link:hover::before { opacity: 1; }

.pc-sidebar .pc-navbar .pc-item > .pc-link .pc-micon,
.pc-sidebar .pc-navbar .pc-item > .pc-link .pc-micon i,
.pc-sidebar .pc-navbar .pc-item > .pc-link .pc-micon svg {
  width: 18px !important;
  height: 18px !important;
  color: rgba(255,255,255,.50) !important;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.pc-sidebar .pc-navbar .pc-item > .pc-link:hover .pc-micon i,
.pc-sidebar .pc-navbar .pc-item > .pc-link:hover .pc-micon svg {
  color: var(--brand-primary-light) !important;
}

.pc-sidebar .pc-navbar .pc-item > .pc-link .pc-mtext {
  font-size: .865rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pc-sidebar .pc-navbar .pc-item > .pc-link .pc-arrow {
  margin-left: auto !important;
  color: rgba(255,255,255,.30) !important;
  font-size: .75rem !important;
  transition: transform .25s ease !important;
}

/* Active state */
.pc-sidebar .pc-navbar .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar .pc-item.pc-trigger > .pc-link {
  background: linear-gradient(90deg, rgba(99,102,241,.25), rgba(99,102,241,.08)) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--brand-primary-light) !important;
}

.pc-sidebar .pc-navbar .pc-item.active > .pc-link .pc-micon i,
.pc-sidebar .pc-navbar .pc-item.active > .pc-link .pc-micon svg,
.pc-sidebar .pc-navbar .pc-item.pc-trigger > .pc-link .pc-micon i {
  color: var(--brand-primary-light) !important;
}

/* ── Sub-menu container ─────────────────────────────────────── */
.pc-sidebar .pc-navbar .pc-submenu {
  background: transparent !important;
  padding: .25rem 0 .25rem 0 !important;
  position: relative !important;
}

/* Remove the theme's vertical connector line */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-submenu::after {
  display: none !important;
  content: none !important;
}

/* Remove ALL dot-bullet pseudo-elements on submenu links */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item > .pc-link::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-link::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-submenu .pc-link::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── Sub-menu items ─────────────────────────────────────────── */
.pc-sidebar .pc-navbar .pc-submenu .pc-item {
  margin: 1px .75rem !important;
}

/* Override theme's hardcoded padding (padding: 12px 30px 12px 60px) */
.pc-sidebar .pc-navbar .pc-submenu .pc-item .pc-link,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link {
  padding: .5rem .85rem .5rem 2.75rem !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.50) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-fast) !important;
  text-decoration: none !important;
  display: block !important;
  position: relative !important;
}

/* Accent dot — our own clean version (left border line) */
.pc-sidebar .pc-navbar .pc-submenu .pc-item .pc-link::before {
  content: '' !important;
  position: absolute !important;
  left: 1.1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.25) !important;
  transition: var(--transition-fast) !important;
}

.pc-sidebar .pc-navbar .pc-submenu .pc-item .pc-link:hover::before,
.pc-sidebar .pc-navbar .pc-submenu .pc-item.active .pc-link::before {
  background: var(--brand-primary-light) !important;
  box-shadow: 0 0 6px rgba(129,140,248,.6) !important;
}

.pc-sidebar .pc-navbar .pc-submenu .pc-item .pc-link:hover,
.pc-sidebar .pc-navbar .pc-submenu .pc-item.active .pc-link {
  color: #ffffff !important;
  background: rgba(255,255,255,.07) !important;
}

.pc-sidebar .pc-navbar .pc-submenu .pc-item.active .pc-link {
  color: var(--brand-primary-light) !important;
}

/* Sidebar version badge */
.pc-sidebar .theme-version { display: none !important; }

/* --------------------------------------------------------------------------
   4. Header — Premium Top Bar
   -------------------------------------------------------------------------- */
.pc-header {
  background: var(--surface-card) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(12px);
  z-index: 1040;
}

.pc-header .header-wrapper {
  padding: 0 1.5rem !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Action icon buttons (hamburger, language, settings) ── */
.pc-header .pc-head-link {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gray-500) !important;
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-200) !important;
  transition: var(--transition-fast) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.pc-header .pc-head-link:hover,
.pc-header .pc-head-link:focus {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.25) !important;
  outline: none !important;
}

.pc-header .pc-head-link i {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Vertical divider ── */
.pc-header .header-divider {
  width: 1px !important;
  height: 28px !important;
  background: var(--gray-200) !important;
  flex-shrink: 0 !important;
  margin: 0 .25rem !important;
}

/* ── User profile trigger ── */
.pc-header .header-user-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: .35rem .6rem .35rem .35rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
  cursor: pointer !important;
}

.pc-header .header-user-btn:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
}

.pc-header .header-user-btn .user-avtar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.pc-header .header-user-btn .user-info .user-name-sm {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 120px !important;
  display: block !important;
  line-height: 1.25 !important;
}

.pc-header .header-user-btn .user-info .user-role-sm {
  font-size: .72rem !important;
  color: var(--gray-500) !important;
  text-transform: capitalize !important;
  display: block !important;
  line-height: 1.2 !important;
}

.pc-header .header-user-btn .chevron-icon {
  font-size: .75rem !important;
  color: var(--gray-400) !important;
  flex-shrink: 0 !important;
  transition: transform var(--transition-fast) !important;
}

.pc-header .header-user-btn[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg) !important;
}

/* ── User profile dropdown ── */
.pc-header .dropdown-user-profile {
  min-width: 290px !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin-top: .5rem !important;
}

.pc-header .dropdown-user-profile .dropdown-header {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  padding: 1.25rem !important;
  color: white !important;
}

.pc-header .dropdown-user-profile .dropdown-header .user-name {
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 185px !important;
  display: block !important;
  line-height: 1.3 !important;
}

.pc-header .dropdown-user-profile .dropdown-header .user-role {
  font-size: .78rem !important;
  color: rgba(255,255,255,.65) !important;
  text-transform: capitalize !important;
  margin-top: .1rem !important;
}

.pc-header .dropdown-user-profile .dropdown-header .user-greeting {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  font-size: .73rem !important;
  color: rgba(255,255,255,.55) !important;
  margin-top: .65rem !important;
  background: rgba(255,255,255,.1) !important;
  padding: .25rem .6rem !important;
  border-radius: 20px !important;
}

.pc-header .dropdown-user-profile .dropdown-body {
  padding: .4rem 0 !important;
}

.pc-header .dropdown-user-profile .dropdown-item {
  padding: .6rem 1.1rem !important;
  font-size: .875rem !important;
  color: var(--gray-700) !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  border-radius: 0 !important;
  transition: var(--transition-fast) !important;
}

.pc-header .dropdown-user-profile .dropdown-item:hover {
  background: var(--gray-50) !important;
  color: var(--brand-primary) !important;
  padding-left: 1.3rem !important;
}

.pc-header .dropdown-user-profile .dropdown-item.text-danger {
  color: #dc3545 !important;
}

.pc-header .dropdown-user-profile .dropdown-item.text-danger:hover {
  background: #fff5f5 !important;
  color: #dc3545 !important;
  padding-left: 1.3rem !important;
}

.pc-header .dropdown-user-profile .dropdown-item .item-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--gray-100) !important;
  flex-shrink: 0 !important;
  font-size: 1rem !important;
  transition: var(--transition-fast) !important;
}

.pc-header .dropdown-user-profile .dropdown-item:hover .item-icon {
  background: rgba(79,70,229,.1) !important;
  color: var(--brand-primary) !important;
}

.pc-header .dropdown-user-profile .dropdown-item.text-danger .item-icon {
  background: #fff5f5 !important;
  color: #dc3545 !important;
}

.pc-header .dropdown-user-profile .dropdown-divider {
  margin: .3rem .75rem !important;
  border-color: var(--gray-100) !important;
}

/* ── Language dropdown ── */
.pc-header .lang-dropdown {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  padding: 0 !important;
  min-width: 200px !important;
  overflow: hidden !important;
  margin-top: .5rem !important;
}

.pc-header .lang-dropdown .lang-dropdown-header {
  padding: .75rem 1rem .6rem !important;
  border-bottom: 1px solid var(--gray-100) !important;
  background: var(--gray-50) !important;
}

.pc-header .lang-dropdown .lang-dropdown-header span {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--gray-400) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.pc-header .lang-dropdown .lang-dropdown-body {
  padding: .4rem !important;
}

.pc-header .lang-dropdown .dropdown-item {
  border-radius: 8px !important;
  padding: .55rem .75rem !important;
  font-size: .875rem !important;
  color: var(--gray-700) !important;
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  transition: var(--transition-fast) !important;
}

.pc-header .lang-dropdown .dropdown-item .lang-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--gray-300) !important;
  flex-shrink: 0 !important;
}

.pc-header .lang-dropdown .dropdown-item:hover {
  background: var(--gray-100) !important;
  color: var(--brand-primary) !important;
}

.pc-header .lang-dropdown .dropdown-item.active {
  background: rgba(79,70,229,.08) !important;
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
}

.pc-header .lang-dropdown .dropdown-item.active .lang-dot {
  background: var(--brand-primary) !important;
}

/* dark mode */
[data-pc-theme="dark"] .pc-header .pc-head-link {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.65) !important;
}

[data-pc-theme="dark"] .pc-header .header-user-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}

[data-pc-theme="dark"] .pc-header .header-divider {
  background: rgba(255,255,255,.1) !important;
}

[data-pc-theme="dark"] .pc-header .dropdown-user-profile,
[data-pc-theme="dark"] .pc-header .lang-dropdown {
  background: #252840 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

[data-pc-theme="dark"] .pc-header .dropdown-user-profile .dropdown-item,
[data-pc-theme="dark"] .pc-header .lang-dropdown .dropdown-item {
  color: rgba(255,255,255,.75) !important;
}

[data-pc-theme="dark"] .pc-header .dropdown-user-profile .dropdown-item:hover,
[data-pc-theme="dark"] .pc-header .lang-dropdown .dropdown-item:hover {
  background: rgba(255,255,255,.07) !important;
}

[data-pc-theme="dark"] .pc-header .dropdown-user-profile .dropdown-divider,
[data-pc-theme="dark"] .pc-header .lang-dropdown .lang-dropdown-header {
  border-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .pc-header .lang-dropdown .lang-dropdown-header {
  background: rgba(255,255,255,.04) !important;
}

[data-pc-theme="dark"] .pc-header .dropdown-user-profile .dropdown-item .item-icon {
  background: rgba(255,255,255,.08) !important;
}

/* --------------------------------------------------------------------------
   5. Main Content Area
   -------------------------------------------------------------------------- */
.pc-container {
  background: var(--surface-bg) !important;
  min-height: 100vh;
}

.pc-content {
  padding: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   6. Page Header & Breadcrumb
   -------------------------------------------------------------------------- */
.page-header {
  margin-bottom: 1.5rem !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--surface-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--gray-200) !important;
}

.page-header .page-header-title h5 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--gray-800) !important;
  margin: 0 !important;
}

.page-header .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.page-header .breadcrumb .breadcrumb-item {
  font-size: .82rem !important;
  color: var(--gray-500) !important;
}

.page-header .breadcrumb .breadcrumb-item a {
  color: var(--brand-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: var(--transition-fast) !important;
}

.page-header .breadcrumb .breadcrumb-item a:hover { color: var(--brand-primary-dark) !important; }

.page-header .breadcrumb .breadcrumb-item.active { color: var(--gray-600) !important; }

.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--gray-400) !important;
}

/* --------------------------------------------------------------------------
   7. Cards — Premium Style
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-card) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
  overflow: hidden;
}

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

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 1.1rem 1.5rem !important;
  display: flex;
  align-items: center;
}

.card-header h5 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin: 0 !important;
}

.card-body { padding: 1.5rem !important; }

/* --------------------------------------------------------------------------
   8. Dashboard KPI Cards
   -------------------------------------------------------------------------- */
.kpi-card {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  position: relative;
  cursor: default;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
}

.kpi-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.kpi-card .card-body {
  padding: 1.5rem !important;
  position: relative;
  z-index: 2;
}

/* KPI Icon wrapper */
.kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
}

.kpi-icon.income    { background: var(--grad-income); }
.kpi-icon.invoice   { background: var(--grad-invoice); }
.kpi-icon.paid      { background: var(--grad-paid); }
.kpi-icon.unpaid    { background: var(--grad-unpaid); }
.kpi-icon.expense   { background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); }
.kpi-icon.customers { background: var(--grad-customers); }
.kpi-icon.services  { background: var(--grad-services); }
.kpi-icon.products  { background: var(--grad-products); }
.kpi-icon.orders    { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kpi-icon.amount    { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.kpi-icon.due       { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.kpi-icon i,
.kpi-icon svg {
  color: white !important;
  width: 24px !important;
  height: 24px !important;
}

.kpi-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: .25rem;
}

.kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 100px;
  margin-top: .35rem;
}

.kpi-trend.up   { background: rgba(16,185,129,.12); color: var(--color-success); }
.kpi-trend.down { background: rgba(239,68,68,.12);  color: var(--color-danger); }
.kpi-trend.neutral { background: rgba(107,114,128,.10); color: var(--gray-500); }

/* Decorative blob on cards */
.kpi-card::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
  z-index: 1;
}

.kpi-card::before {
  content: '';
  position: absolute;
  bottom: -20px;
  right: 40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   9. Chart Cards
   -------------------------------------------------------------------------- */
.chart-card .card-header {
  padding: 1.25rem 1.5rem .75rem !important;
  border-bottom: none !important;
}

.chart-card .chart-header-title h5 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--gray-800) !important;
  margin: 0 !important;
}

.chart-card .chart-header-title p {
  font-size: .8rem !important;
  color: var(--gray-500) !important;
  margin: 0 !important;
}

.chart-card .card-body { padding: .75rem 1.5rem 1.5rem !important; }

/* --------------------------------------------------------------------------
   10. Tables — Premium Data Tables
   -------------------------------------------------------------------------- */
.table-responsive { border-radius: var(--radius-md) !important; }

.table {
  margin: 0 !important;
  font-size: .875rem !important;
  color: var(--gray-700) !important;
}

.table thead {
  background: var(--gray-50) !important;
}

.table thead th {
  font-size: .75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--gray-500) !important;
  border-bottom: 2px solid var(--gray-200) !important;
  padding: .85rem 1rem !important;
  white-space: nowrap !important;
  background: var(--gray-50) !important;
}

.table tbody tr {
  transition: background .15s ease !important;
  border-bottom: 1px solid var(--gray-100) !important;
}

.table tbody tr:last-child { border-bottom: none !important; }

.table tbody tr:hover { background: rgba(79,70,229,.025) !important; }

.table tbody td {
  padding: .85rem 1rem !important;
  vertical-align: middle !important;
  color: var(--gray-700) !important;
  border-bottom: 1px solid var(--gray-100) !important;
}

.table tbody td:last-child { white-space: nowrap; }

/* Sticky header for long tables */
.table-sticky thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 1px 0 var(--gray-200) !important;
}

/* --------------------------------------------------------------------------
   11. Status Badges — Modern Pills
   -------------------------------------------------------------------------- */
.badge {
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: .3em .75em !important;
  border-radius: 100px !important;
  letter-spacing: .04em !important;
}

.text-bg-success { background: rgba(16,185,129,.12) !important; color: #059669 !important; }
.text-bg-warning { background: rgba(245,158,11,.12) !important; color: #d97706 !important; }
.text-bg-danger  { background: rgba(239,68,68,.12) !important;  color: #dc2626 !important; }
.text-bg-info    { background: rgba(6,182,212,.12) !important;  color: #0891b2 !important; }
.text-bg-primary { background: rgba(79,70,229,.12) !important;  color: #4338ca !important; }
.text-bg-secondary { background: rgba(107,114,128,.12) !important; color: #4b5563 !important; }
.text-bg-dark    { background: rgba(17,24,39,.12) !important;   color: var(--gray-800) !important; }

/* --------------------------------------------------------------------------
   12. Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-size: .875rem !important;
  font-weight: 600 !important;
  padding: .55rem 1.15rem !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  letter-spacing: .01em !important;
  border: none !important;
}

.btn-primary,
.btn-secondary {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.30) !important;
}

.btn-primary:hover,
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, #312e81 100%) !important;
  box-shadow: 0 6px 16px rgba(79,70,229,.40) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) !important;
}

.btn-outline-secondary {
  background: transparent !important;
  border: 1.5px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
}

.btn-outline-secondary:hover {
  background: var(--gray-100) !important;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(239,68,68,.25) !important;
}

.btn-danger:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(239,68,68,.35) !important;
}

.btn-sm {
  font-size: .8rem !important;
  padding: .35rem .85rem !important;
}

.btn-lg {
  font-size: 1rem !important;
  padding: .75rem 1.75rem !important;
  border-radius: var(--radius-lg) !important;
}

.btn i, .btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* --------------------------------------------------------------------------
   13. Forms — Modern Clean Style
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: 1.25rem !important; }

.form-label,
label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--gray-700) !important;
  margin-bottom: .45rem !important;
  text-transform: capitalize !important;
  letter-spacing: .01em !important;
}

.form-control,
.form-select {
  font-size: .875rem !important;
  color: var(--gray-700) !important;
  background: var(--surface-card) !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: .6rem .9rem !important;
  height: auto !important;
  min-height: 42px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--gray-400) !important; }

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

.form-control.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

.invalid-feedback {
  font-size: .78rem !important;
  color: var(--color-danger) !important;
  margin-top: .3rem !important;
}

.form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.input-group .form-control {
  border-right: none !important;
}

.input-group .input-group-text {
  background: var(--gray-100) !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gray-600) !important;
  font-size: .875rem !important;
}

/* --------------------------------------------------------------------------
   14. Select2 — Modern Selects
   -------------------------------------------------------------------------- */
.select2-container .select2-selection--single {
  height: 42px !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-card) !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  padding-left: .9rem !important;
  color: var(--gray-700) !important;
  font-size: .875rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px !important;
}

.select2-container .select2-selection--multiple {
  min-height: 42px !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--brand-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: .2rem .6rem !important;
  font-size: .78rem !important;
}

.select2-dropdown {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

.select2-container--default .select2-results__option {
  padding: .55rem .9rem !important;
  font-size: .875rem !important;
  color: var(--gray-700) !important;
  transition: var(--transition-fast) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-primary) !important;
  color: white !important;
}

.select2-results__option--selectable { background-color: transparent !important; }

/* --------------------------------------------------------------------------
   15. Modals
   -------------------------------------------------------------------------- */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  padding: 1.1rem 1.5rem !important;
  border-bottom: none !important;
}

.modal-header .modal-title {
  color: white !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.modal-header .btn-close {
  filter: invert(1) !important;
  opacity: .8 !important;
}

.modal-header .btn-close:hover { opacity: 1 !important; }

.modal-body { padding: 1.5rem !important; }

.modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
  gap: .75rem !important;
}

.modal-backdrop.show { opacity: .5 !important; }

/* --------------------------------------------------------------------------
   16. Alerts
   -------------------------------------------------------------------------- */
.alert {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 1rem 1.25rem !important;
  font-size: .875rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: .75rem !important;
}

.alert-success {
  background: rgba(16,185,129,.1) !important;
  color: #065f46 !important;
  border-left: 4px solid var(--color-success) !important;
}

.alert-danger {
  background: rgba(239,68,68,.08) !important;
  color: #991b1b !important;
  border-left: 4px solid var(--color-danger) !important;
}

.alert-warning {
  background: rgba(245,158,11,.08) !important;
  color: #92400e !important;
  border-left: 4px solid var(--color-warning) !important;
}

.alert-info {
  background: rgba(6,182,212,.08) !important;
  color: #0e7490 !important;
  border-left: 4px solid var(--color-info) !important;
}

/* --------------------------------------------------------------------------
   17. DataTables 2.0 — Layout, Search, Pagination
   --------------------------------------------------------------------------
   DataTables 2.0 uses a flex-based layout via:
     .dt-container > .dt-layout-table > .dt-layout-row > .dt-layout-cell.dt-start | .dt-end
   Do NOT use floats here — they conflict with the flex layout.
   -------------------------------------------------------------------------- */

/* ── Wrapper ──────────────────────────────────────────── */
.dt-container {
  margin-top: 0 !important;
  width: 100% !important;
}

.dt-layout-table { width: 100% !important; }

/* ── Each toolbar row (top & bottom) ─────────────────── */
.dt-layout-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .5rem .75rem !important;
  padding: .75rem 0 !important;
  width: 100% !important;
}

/* Add a separator line above the bottom row (info + pagination) */
.dt-layout-row:last-child {
  border-top: 1px solid var(--gray-100) !important;
  padding-top: .6rem !important;
  margin-top: .1rem !important;
}

/* ── Left cell (buttons, info) ───────────────────────── */
.dt-layout-cell.dt-start {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  min-width: 0 !important;
}

/* ── Right cell (search, pagination) ─────────────────── */
.dt-layout-cell.dt-end {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .5rem !important;
}

/* ── Export Buttons ──────────────────────────────────── */
.dt-buttons {
  display: flex !important;
  align-items: center !important;
  gap: .3rem !important;
  flex-wrap: wrap !important;
}

.dt-buttons .btn {
  font-size: .75rem !important;
  font-weight: 600 !important;
  padding: .35rem .8rem !important;
  border-radius: var(--radius-md) !important;
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: none !important;
  transition: var(--transition-fast) !important;
  letter-spacing: .01em !important;
}

.dt-buttons .btn:hover {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
  transform: none !important;
  box-shadow: 0 3px 8px rgba(79,70,229,.25) !important;
}

/* Per-button accent colours */
.btn-dt-excel:hover { background: #16a34a !important; border-color: #16a34a !important; box-shadow: 0 3px 8px rgba(22,163,74,.25) !important; }
.btn-dt-pdf:hover   { background: #dc2626 !important; border-color: #dc2626 !important; box-shadow: 0 3px 8px rgba(220,38,38,.25) !important; }
.btn-dt-copy:hover  { background: #0891b2 !important; border-color: #0891b2 !important; box-shadow: 0 3px 8px rgba(8,145,178,.25) !important; }
.btn-dt-colvis:hover { background: #7c3aed !important; border-color: #7c3aed !important; box-shadow: 0 3px 8px rgba(124,58,237,.25) !important; }

/* ── Length (Show N entries) ─────────────────────────── */
.dt-length {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
}

.dt-length label {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  font-size: .82rem !important;
  color: var(--gray-500) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.dt-length select {
  font-size: .82rem !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: .3rem .55rem !important;
  color: var(--gray-700) !important;
  background: var(--surface-card) !important;
  cursor: pointer !important;
  transition: border-color .2s ease !important;
}

.dt-length select:focus {
  border-color: var(--brand-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
}

/* ── Search box (right-aligned via .dt-end parent) ────── */
.dt-search {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

.dt-search label {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--gray-600) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* The search input itself */
.dt-search input[type="search"],
.dt-search input {
  font-size: .82rem !important;
  font-weight: 400 !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: .4rem .85rem .4rem 2rem !important;
  color: var(--gray-700) !important;
  background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat .6rem center !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  min-width: 200px !important;
  width: auto !important;
}

.dt-search input[type="search"]:focus,
.dt-search input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  outline: none !important;
}

/* ── Info text (Showing X to Y of Z) ─────────────────── */
.dt-info {
  font-size: .8rem !important;
  color: var(--gray-400) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ── Pagination ───────────────────────────────────────── */
.dt-paging .pagination {
  margin: 0 !important;
  gap: .2rem !important;
  flex-wrap: nowrap !important;
}

.dt-paging .page-item .page-link {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--gray-600) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  padding: .3rem .6rem !important;
  min-width: 32px !important;
  text-align: center !important;
  transition: var(--transition-fast) !important;
  background: var(--surface-card) !important;
}

.dt-paging .page-item .page-link:hover {
  background: rgba(79,70,229,.06) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.dt-paging .page-item.active .page-link {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(79,70,229,.30) !important;
}

.dt-paging .page-item.disabled .page-link {
  opacity: .4 !important;
  pointer-events: none !important;
}

/* ── Responsive: stack on small screens ──────────────── */
@media (max-width: 640px) {
  .dt-layout-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .dt-layout-cell.dt-end {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .dt-search input[type="search"],
  .dt-search input {
    min-width: 100% !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   18. Dropdown Menus
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: .5rem !important;
  min-width: 200px !important;
  animation: dropdownIn .15s ease !important;
}

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

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  padding: .55rem .85rem !important;
  font-size: .875rem !important;
  color: var(--gray-700) !important;
  transition: var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
}

.dropdown-item:hover {
  background: var(--gray-100) !important;
  color: var(--brand-primary) !important;
}

.dropdown-item.text-danger:hover {
  background: rgba(239,68,68,.08) !important;
  color: var(--color-danger) !important;
}

.dropdown-item i,
.dropdown-item svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gray-500) !important;
}

.dropdown-item:hover i,
.dropdown-item:hover svg { color: var(--brand-primary) !important; }

.dropdown-item.text-danger:hover i,
.dropdown-item.text-danger:hover svg { color: var(--color-danger) !important; }

.dropdown-divider {
  margin: .35rem 0 !important;
  border-color: var(--gray-200) !important;
}

/* --------------------------------------------------------------------------
   19. Nav Tabs — Modern Underline
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--gray-200) !important;
  gap: .25rem !important;
}

.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: .65rem 1rem !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: var(--gray-500) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  transition: var(--transition-fast) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--brand-primary) !important;
  background: rgba(79,70,229,.04) !important;
}

.nav-tabs .nav-link.active {
  color: var(--brand-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--brand-primary) !important;
}

/* --------------------------------------------------------------------------
   20. Action Buttons in Tables
   -------------------------------------------------------------------------- */
.avtar {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--transition-fast) !important;
  cursor: pointer;
}

.avtar.avtar-xs {
  width: 32px !important;
  height: 32px !important;
}

.avtar.avtar-s  { width: 36px !important; height: 36px !important; }
.avtar.avtar-sm { width: 40px !important; height: 40px !important; }

.avtar:hover { transform: translateY(-2px) !important; }

.btn-link-primary  { background: rgba(79,70,229,.1) !important; color: var(--brand-primary) !important; }
.btn-link-primary:hover  { background: var(--brand-primary) !important; color: white !important; }

.btn-link-success  { background: rgba(16,185,129,.1) !important; color: var(--color-success) !important; }
.btn-link-success:hover  { background: var(--color-success) !important; color: white !important; }

.btn-link-warning  { background: rgba(245,158,11,.1) !important; color: var(--color-warning) !important; }
.btn-link-warning:hover  { background: var(--color-warning) !important; color: white !important; }

.btn-link-danger   { background: rgba(239,68,68,.1) !important;  color: var(--color-danger) !important; }
.btn-link-danger:hover   { background: var(--color-danger) !important;  color: white !important; }

.btn-link-secondary { background: rgba(107,114,128,.1) !important; color: var(--gray-600) !important; }
.btn-link-secondary:hover { background: var(--gray-600) !important; color: white !important; }

.btn-link-info  { background: rgba(6,182,212,.1) !important; color: var(--color-info) !important; }
.btn-link-info:hover  { background: var(--color-info) !important; color: white !important; }

/* --------------------------------------------------------------------------
   21. Action Dropdown Fix (prevents overflow clipping)
   -------------------------------------------------------------------------- */
.dt-responsive,
.table-responsive {
  overflow: visible !important;
}

.card-body { overflow: visible !important; }

.action-dropdown .dropdown-menu {
  position: fixed !important;
  z-index: 9999 !important;
}

/* --------------------------------------------------------------------------
   22. SweetAlert2 — Modern
   -------------------------------------------------------------------------- */
div:where(.swal2-container) h2:where(.swal2-title) {
  font-size: 1.15em !important;
  font-weight: 700 !important;
  font-family: var(--font-sans) !important;
}

div:where(.swal2-container) .swal2-html-container {
  font-size: .9em !important;
  font-family: var(--font-sans) !important;
  color: var(--gray-600) !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  font-size: .875em !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: .6rem 1.5rem !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.30) !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
  background: var(--gray-200) !important;
  color: var(--gray-700) !important;
  font-size: .875em !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: .6rem 1.5rem !important;
}

div:where(.swal2-icon) {
  width: 4.5em !important;
  height: 4.5em !important;
}

.swal2-popup {
  border-radius: var(--radius-xl) !important;
  padding: 2rem 2rem 1.5rem !important;
  font-family: var(--font-sans) !important;
}

/* --------------------------------------------------------------------------
   23. Offcanvas (Theme Settings)
   -------------------------------------------------------------------------- */
.pct-offcanvas {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-2xl) !important;
}

.pct-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 1.25rem 1.5rem !important;
}

.pct-offcanvas .offcanvas-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--gray-800) !important;
}

/* --------------------------------------------------------------------------
   24. Pre-loader
   -------------------------------------------------------------------------- */
.loader-bg {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
}

.loader-track { background: rgba(255,255,255,.2) !important; }
.loader-fill  { background: rgba(255,255,255,.8) !important; }

/* --------------------------------------------------------------------------
   25. Footer
   -------------------------------------------------------------------------- */
.pc-footer {
  background: var(--surface-card) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: .85rem 1.5rem !important;
}

.pc-footer .footer-wrapper p {
  font-size: .82rem !important;
  color: var(--gray-500) !important;
  margin: 0 !important;
}

.pc-footer .footer-link .list-inline-item a {
  font-size: .82rem !important;
  color: var(--gray-500) !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
}

.pc-footer .footer-link .list-inline-item a:hover { color: var(--brand-primary) !important; }

/* --------------------------------------------------------------------------
   26. Invoice & Document Cards
   -------------------------------------------------------------------------- */
.invoice-logo { width: 200px !important; }

.head-invoice img { width: 200px !important; }

.cdx-invoice .body-invoice .table tr td {
  padding: 10px 12px !important;
}

/* --------------------------------------------------------------------------
   27. Settings Tabs
   -------------------------------------------------------------------------- */
.account-tabs .nav-item .nav-link {
  position: relative;
  padding: .75rem 1.25rem !important;
  font-weight: 600 !important;
  color: var(--gray-600) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  transition: var(--transition-fast) !important;
}

.account-tabs .nav-item .nav-link:hover {
  color: var(--brand-primary) !important;
  background: rgba(79,70,229,.06) !important;
}

.account-tabs .nav-item .nav-link.active {
  color: var(--brand-primary) !important;
  background: rgba(79,70,229,.1) !important;
}

/* --------------------------------------------------------------------------
   28. Table Avatar Icons
   --------------------------------------------------------------------------
   Used in customer, user, and any table with profile images.
   .table-avatar-wrap keeps a fixed square container so the image
   always renders as a consistent circle regardless of source dimensions.
   -------------------------------------------------------------------------- */

.table-avatar-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.table-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}

/* Legacy classes used in older table pages */
.user-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--gray-200) !important;
  vertical-align: middle !important;
}

.avatar-sm {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Table user cell layout */
.table-user {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  white-space: nowrap !important;
}

/* ── Cart / action button groups (used in older pages) ── */
.cart-action {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
}

/* --------------------------------------------------------------------------
   29. Utility Enhancements
   -------------------------------------------------------------------------- */
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow-md  { box-shadow: var(--shadow-md) !important; }
.shadow-lg  { box-shadow: var(--shadow-lg) !important; }
.shadow-xl  { box-shadow: var(--shadow-xl) !important; }

.rounded    { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* Transitions */
.fade-in  { animation: fadeIn  .4s ease both; }
.slide-up { animation: slideUp .4s ease both; }

@keyframes fadeIn  { from { opacity: 0; }                       to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   29. Responsive — Mobile First
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pc-content { padding: 1rem !important; }

  .page-header { padding: 1rem !important; margin-bottom: 1rem !important; }

  .kpi-card .kpi-value { font-size: 1.3rem !important; }

  .card-body { padding: 1rem !important; }

  .card-header { padding: .85rem 1rem !important; }

  .table thead th, .table tbody td {
    font-size: .78rem !important;
    padding: .65rem .75rem !important;
  }

  .dt-search, .dt-length { padding: 0 !important; margin-bottom: .5rem !important; }

  .dt-buttons { float: none !important; margin-bottom: .5rem !important; }

  .btn { font-size: .82rem !important; padding: .5rem 1rem !important; }

  .modal-content { border-radius: var(--radius-lg) !important; }
}

@media (max-width: 576px) {
  .pc-content { padding: .75rem !important; }

  .kpi-icon { width: 44px !important; height: 44px !important; }

  .kpi-value { font-size: 1.2rem !important; }

  .header_li { display: none !important; }
}

/* --------------------------------------------------------------------------
   30. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  .table-responsive {
    overflow: visible !important;
    height: auto !important;
    display: block !important;
  }

  .pc-sidebar, .pc-header, .pc-footer { display: none !important; }

  .pc-container { margin: 0 !important; padding: 0 !important; }
}

/* --------------------------------------------------------------------------
   31. Custom Scrollbar (webkit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* --------------------------------------------------------------------------
   32. Landing / Logo sizing
   -------------------------------------------------------------------------- */
.b-brand .logo         { max-width: 180px !important; }
.setting-logo          { width: 280px !important; }
.landing-logo          { max-width: 200px !important; }
.auth-main .auth-wrapper.v2 .logo { max-width: 260px !important; }

.codex-brand img   { width: 260px !important; }

/* --------------------------------------------------------------------------
   33. Dark Mode Adjustments
   -------------------------------------------------------------------------- */
[data-pc-theme="dark"] .card {
  background: #1a1d2e !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .card-header {
  border-bottom-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .page-header {
  background: #1a1d2e !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] h1, [data-pc-theme="dark"] h2,
[data-pc-theme="dark"] h3, [data-pc-theme="dark"] h4,
[data-pc-theme="dark"] h5, [data-pc-theme="dark"] h6 {
  color: rgba(255,255,255,.9) !important;
}

[data-pc-theme="dark"] .table thead th {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.5) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .table tbody td {
  color: rgba(255,255,255,.75) !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
}

[data-pc-theme="dark"] .table tbody tr:hover {
  background: rgba(79,70,229,.08) !important;
}

[data-pc-theme="dark"] .form-control,
[data-pc-theme="dark"] .form-select {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.85) !important;
}

[data-pc-theme="dark"] .pc-header {
  background: #1a1d2e !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .pc-footer {
  background: #1a1d2e !important;
  border-top-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .dropdown-menu {
  background: #252840 !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-pc-theme="dark"] .dropdown-item { color: rgba(255,255,255,.75) !important; }

[data-pc-theme="dark"] .dropdown-item:hover {
  background: rgba(255,255,255,.07) !important;
  color: white !important;
}

[data-pc-theme="dark"] .kpi-label { color: rgba(255,255,255,.45) !important; }
[data-pc-theme="dark"] .kpi-value { color: rgba(255,255,255,.9) !important; }

/* --------------------------------------------------------------------------
   34. Color preset override for Select2, DateRangePicker
   -------------------------------------------------------------------------- */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--brand-primary) !important;
}

.daterangepicker .btn-primary {
  background: var(--brand-primary) !important;
}

/* --------------------------------------------------------------------------
   35. Pricing & Testaments
   -------------------------------------------------------------------------- */
.testaments-cards::after { background: transparent !important; }

.pricingpricing .price-card .product-list li::before {
  content: '\eb55';
  color: var(--color-danger);
}

.pricingpricing .price-card .product-list li.enable::before {
  content: "\ea5e";
  color: var(--color-success);
}

.pricingpricing .price-card .product-list li { opacity: 1 !important; }

/* --------------------------------------------------------------------------
   36. Color type picker
   -------------------------------------------------------------------------- */
.color_type {
  position: relative;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  transition: all .15s ease-in-out;
  margin-right: 10px;
  margin-top: 10px;
  width: 48px;
  height: 48px;
  flex: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.cutom_colorr.active::after,
.cutom_colorr.custom::after {
  content: "✓";
  color: #fff;
  font-size: 26px;
  background: none !important;
  font-weight: 900;
  background-color: transparent !important;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   37. Miscellaneous
   -------------------------------------------------------------------------- */
.modal-body .select2-container { z-index: 1024 !important; width: 100% !important; }
.modal-backdrop ~ .select2-container { width: 100% !important; z-index: 10000 !important; }

.select2-container, .modal-body .select2-container { z-index: 1024 !important; width: 100% !important; }

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 8px !important;
  margin-left: 8px !important;
}

/* Active mode indicator */
.active-mode { border: 2px solid var(--brand-primary) !important; }

/* Form group spacing */
form label { text-transform: capitalize !important; }