/* ============================================================
   OUTBOUND SWITCH - FLAGSHIP DESIGN SYSTEM
   ============================================================
   Aesthetic: Calm, luxurious, modern sleep-tech / wellness
   Inspiration: Apple hardware UI, Linear, Calm, Arc browser
   Version: 2.0 - Premium Edition
   ============================================================ */

/* ---- Google Font Import ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
  /* --- Color Palette - Refined & Premium --- */
  --color-bg:           #F8FAFC;
  --color-bg-subtle:    #F1F5F9;
  --color-bg-muted:     #E2E8F0;
  --color-surface:      #FFFFFF;
  --color-surface-hover:#FAFBFC;
  --color-surface-glass:rgba(255, 255, 255, 0.75);
  --color-surface-elevated: #FFFFFF;

  /* Primary - Refined Indigo */
  --color-primary:      #6366F1;
  --color-primary-hover:#4F46E5;
  --color-primary-light:#EEF2FF;
  --color-primary-subtle:rgba(99, 102, 241, 0.08);
  --color-primary-muted: rgba(99, 102, 241, 0.12);

  /* Secondary - Sky Blue */
  --color-secondary:    #0EA5E9;
  --color-secondary-hover:#0284C7;
  --color-secondary-light:#F0F9FF;

  /* Accent - Warm Amber */
  --color-accent:       #F59E0B;
  --color-accent-light: #FFFBEB;

  /* Semantic Colors */
  --color-success:      #10B981;
  --color-success-light:#ECFDF5;
  --color-success-hover:#059669;

  --color-warning:      #F59E0B;
  --color-warning-light:#FFFBEB;

  --color-danger:       #EF4444;
  --color-danger-light: #FEF2F2;
  --color-danger-hover: #DC2626;

  /* Text Colors - Refined Contrast */
  --color-text:         #0F172A;
  --color-text-secondary:#475569;
  --color-text-tertiary:#94A3B8;
  --color-text-inverse: #FFFFFF;

  /* Border & Divider */
  --color-border:       #E2E8F0;
  --color-border-subtle:#F1F5F9;
  --color-border-focus: #6366F1;
  --color-divider:      #F1F5F9;

  /* --- Premium Gradients --- */
  --gradient-primary:   linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --gradient-teal:      linear-gradient(135deg, #06B6D4 0%, #0EA5E9 50%, #3B82F6 100%);
  --gradient-rose:      linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #DB2777 100%);
  --gradient-indigo:    linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
  --gradient-emerald:   linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
  --gradient-warm:      linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);
  --gradient-surface:   linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  --gradient-dark:      linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  --gradient-sidebar:   linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  --gradient-mesh:      radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.04) 0px, transparent 50%),
                        radial-gradient(at 80% 0%, rgba(14, 165, 233, 0.03) 0px, transparent 50%),
                        radial-gradient(at 0% 50%, rgba(245, 158, 11, 0.02) 0px, transparent 50%);

  /* --- Typography - Premium Scale --- */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:          'SF Mono', 'Fira Code', 'Fira Mono', 'Consolas', monospace;

  --text-xs:            0.75rem;    /* 12px */
  --text-sm:            0.8125rem;  /* 13px */
  --text-base:          0.875rem;   /* 14px */
  --text-md:            0.9375rem;  /* 15px */
  --text-lg:            1.0625rem;  /* 17px */
  --text-xl:            1.25rem;    /* 20px */
  --text-2xl:           1.5rem;     /* 24px */
  --text-3xl:           1.875rem;   /* 30px */
  --text-4xl:           2.25rem;    /* 36px */
  --text-5xl:           3rem;       /* 48px */

  --leading-tight:      1.25;
  --leading-snug:       1.375;
  --leading-normal:     1.5;
  --leading-relaxed:    1.625;
  --leading-loose:      1.75;

  --tracking-tighter:  -0.05em;
  --tracking-tight:    -0.025em;
  --tracking-normal:    0;
  --tracking-wide:      0.025em;
  --tracking-wider:     0.05em;
  --tracking-widest:    0.1em;

  /* --- Spacing Scale --- */
  --space-0:  0;
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2px */
  --space-1:  0.25rem;   /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2:  0.5rem;    /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3:  0.75rem;   /* 12px */
  --space-3-5: 0.875rem; /* 14px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-9:  2.25rem;   /* 36px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* --- Border Radius - Softer & Premium --- */
  --radius-none: 0;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* --- Shadows - Soft & Layered --- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.04);

  /* Colored Shadows */
  --shadow-primary: 0 4px 14px rgba(99, 102, 241, 0.25);
  --shadow-primary-lg: 0 8px 25px rgba(99, 102, 241, 0.3);
  --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
  --shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25);

  /* Card Shadows */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 20px 40px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
  --shadow-card-elevated: 0 12px 24px -4px rgba(15, 23, 42, 0.1);

  /* Glass Shadow */
  --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1);

  /* --- Transitions - Natural & Relaxing --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast:    150ms var(--ease-out-expo);
  --transition-base:    250ms var(--ease-out-expo);
  --transition-slow:    400ms var(--ease-out-expo);
  --transition-slower:  600ms var(--ease-out-expo);
  --transition-slowest: 800ms var(--ease-out-expo);

  /* --- Z-Index Scale --- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-popover:  600;
  --z-toast:    700;

  /* --- Layout --- */
  --sidebar-width:      280px;
  --sidebar-collapsed:  72px;
  --header-height:      72px;
  --content-max-width:  1440px;
}


/* ============================================================
   2. BASE RESET & GLOBAL STYLES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  color: var(--color-text) !important;
  background-color: var(--color-bg) !important;
  background-image: var(--gradient-mesh) !important;
  background-attachment: fixed !important;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Premium Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--color-text) !important;
  line-height: var(--leading-tight) !important;
  margin-bottom: 0.5em !important;
}

h1, .h1 { font-size: var(--text-3xl) !important; font-weight: 700 !important; letter-spacing: var(--tracking-tighter) !important; }
h2, .h2 { font-size: var(--text-2xl) !important; font-weight: 700 !important; }
h3, .h3 { font-size: var(--text-xl) !important; }
h4, .h4 { font-size: var(--text-lg) !important; }
h5, .h5 { font-size: var(--text-md) !important; }
h6, .h6 { font-size: var(--text-base) !important; }

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.text-muted {
  color: var(--color-text-tertiary) !important;
}

.font-weight-semibold {
  font-weight: 600 !important;
}

b, strong {
  font-weight: 600;
}

/* Label Style */
.label-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}


/* ============================================================
   4. HEADER / NAVBAR - Premium Glassmorphism
   ============================================================ */
.navbar.navbar-dark,
.navbar.navbar-expand-md.navbar-dark {
  background: var(--color-surface-glass) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  height: var(--header-height) !important;
  padding: 0 var(--space-6) !important;
  z-index: var(--z-fixed) !important;
  transition: all var(--transition-base) !important;
}

.navbar.navbar-dark.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Brand */
.navbar-brand.wmin-200,
.navbar-brand {
  min-width: var(--sidebar-width) !important;
  padding: 0 var(--space-6) !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid var(--color-border) !important;
  border-left: none !important;
  height: 100% !important;
  margin: 0 !important;
}

.navbar-brand h5,
.c-nav-brand h5 {
  color: var(--color-text) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  margin: 0 !important;
}

.navbar-brand h5 b {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

.border_left_line {
  min-width: var(--sidebar-width) !important;
  border-left: none !important;
  border-right: 1px solid var(--color-border) !important;
}

.left_boder_line {
  border-left: none !important;
}

/* Client Badge - Premium Pill */
.badge.bg-success {
  background: linear-gradient(135deg, var(--color-success-light) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
  color: var(--color-success) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-1-5) var(--space-3) !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1) !important;
}

/* Navbar Links */
.navbar-nav-link,
.navbar .navbar-nav-link,
.header-nav-link {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
  border: none !important;
  border-bottom: none !important;
}

.navbar-nav-link:hover,
.header-nav-link:hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
  border: none !important;
  border-bottom: none !important;
}

.button-link:hover,
.button-link:focus {
  border-bottom: none !important;
}

/* Sidebar Toggle */
.sidebar-control,
.sidebar-main-toggle,
.sidebar-mobile-main-toggle {
  color: var(--color-text-tertiary) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
  background: transparent !important;
}

.sidebar-control:hover,
.sidebar-main-toggle:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
}

/* User Dropdown */
.dropdown-user .navbar-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2-5) !important;
}

.dropdown-user .rounded-round,
.dropdown-user .btn-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-circle) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

.dropdown-user .rounded-circle,
.dropdown-user img.rounded-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-circle) !important;
  object-fit: cover !important;
  border: 2px solid var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Dropdown Menu - Premium */
.dropdown-menu {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: var(--space-2) !important;
  min-width: 220px !important;
  margin-top: var(--space-2) !important;
  animation: dropdownSlide 200ms var(--ease-out-expo) !important;
}

.dropdown-item {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  padding: var(--space-2-5) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
}

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

.dropdown-item i {
  font-size: var(--text-base) !important;
  color: var(--color-text-tertiary) !important;
  width: 20px !important;
  margin-right: 0 !important;
  transition: color var(--transition-fast) !important;
}

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

.dropdown-divider {
  border-color: var(--color-divider) !important;
  margin: var(--space-1-5) 0 !important;
}

@keyframes dropdownSlide {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================================
   5. SIDEBAR - Clean & Premium
   ============================================================ */
.sidebar.sidebar-main,
.sidebar.sidebar-light {
  background: var(--gradient-sidebar) !important;
  border-right: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  width: var(--sidebar-width) !important;
  z-index: var(--z-sticky) !important;
  transition: width var(--transition-slow), transform var(--transition-slow) !important;
}

.sidebar-content {
  z-index: var(--z-sticky) !important;
}

/* Sidebar User Card */
.sidebar-user,
.sidebar .sidebar-user {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.sidebar-user .card-body {
  padding: var(--space-5) var(--space-6) !important;
  border-bottom: none !important;
}

.sidebar-user .font-weight-semibold {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}

.sidebar-user .opacity-50,
.sidebar-user .font-size-sm {
  font-size: var(--text-xs) !important;
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
}

.sidebar-user img.rounded-circle {
  border-radius: var(--radius-md) !important;
  border: 2px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Sidebar Mobile Toggler */
.sidebar-mobile-toggler {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: var(--space-4) var(--space-5) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
}

/* Navigation Header */
.nav-item-header,
.nav-sidebar .nav-item-header {
  padding: var(--space-6) var(--space-6) var(--space-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-tertiary) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
}

/* Nav Items */
.nav-sidebar .nav-item {
  margin: 2px var(--space-3) !important;
}

.nav-sidebar .nav-link,
.sidebar-light .nav-sidebar .nav-link {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  padding: var(--space-2-5) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  border-left: none !important;
  transition: all var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}

.nav-sidebar .nav-link:hover,
.sidebar-light .nav-sidebar .nav-link:not(.disabled):hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
  border-left: none !important;
  transform: translateX(2px) !important;
}

.nav-sidebar .nav-link.active,
.sidebar-light .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light .nav-sidebar > .nav-item-open > .nav-link:not(.disabled),
.sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar > .nav-item-open > .nav-link:not(.disabled) {
  background: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  border-left: none !important;
}

.sidebar-light .nav-group-sub .nav-item > .nav-link.active,
.sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar .nav-item > .nav-link.active {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
  border-left: none !important;
}

/* Side Menu Icon */
.side-menu_icon {
  font-size: var(--text-md) !important;
  color: var(--color-text-tertiary) !important;
  transition: color var(--transition-fast) !important;
  width: 22px !important;
  text-align: center !important;
}

.nav-link.active .side-menu_icon,
.nav-link:hover .side-menu_icon {
  color: var(--color-primary) !important;
}

/* Sidebar Card */
.card.card-sidebar-mobile {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Sidebar Collapsed State */
.sidebar-xs .sidebar-main {
  width: var(--sidebar-collapsed) !important;
}

.sidebar-xs .sidebar-main .nav-sidebar .nav-link span,
.sidebar-xs .sidebar-main .sidebar-user .media-body,
.sidebar-xs .sidebar-main .nav-item-header > div {
  display: none !important;
}

/* Sub Menu */
.nav-group-sub {
  background: transparent !important;
  padding-left: var(--space-5) !important;
}

.nav-group-sub .nav-link {
  font-size: var(--text-xs) !important;
  padding: var(--space-2) var(--space-3) !important;
}


/* ============================================================
   6. PAGE LAYOUT & CONTENT
   ============================================================ */
.navbar-top-custom,
.virtual-body {
  padding-top: var(--header-height) !important;
}

.page-content {
  display: flex !important;
  min-height: calc(100vh - var(--header-height)) !important;
}

.content-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
}

/* Page Header */
.page-header,
.page-header-light {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-8) var(--space-8) var(--space-4) !important;
}

.page-header-content {
  padding: 0 !important;
}

.page-title h4 {
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: var(--tracking-tight) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}

.page-title h4 i {
  color: var(--color-primary) !important;
  font-size: var(--text-xl) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-primary-subtle) !important;
  border-radius: var(--radius-md) !important;
}

.page-title h4 .font-weight-semibold {
  font-weight: 700 !important;
}

/* Breadcrumbs */
.breadcrumb-line {
  background: transparent !important;
  border: none !important;
  padding: var(--space-3) 0 0 !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--text-xs) !important;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--color-text-tertiary) !important;
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
}

.breadcrumb-item.active {
  color: var(--color-text-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-tertiary) !important;
  content: "›" !important;
  font-weight: 400 !important;
}

.breadcrumb-item i {
  font-size: var(--text-xs) !important;
}

/* Main Content Area */
.content {
  padding: var(--space-6) var(--space-8) !important;
}

/* Header Elements Hidden */
.page-header .header-elements.d-none {
  display: none !important;
}


/* ============================================================
   7. CARDS - Premium with Subtle Depth
   ============================================================ */
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all var(--transition-base) !important;
  overflow: hidden !important;
  margin-bottom: var(--space-6) !important;
}

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

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--color-divider) !important;
  padding: var(--space-5) var(--space-6) !important;
  font-weight: 600 !important;
}

.card-header h3,
.card-header h5,
.card-header .card-title {
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin: 0 !important;
}

.card-body {
  padding: var(--space-6) !important;
}

/* ============================================================
   STATS CARDS - Premium Gradient Design
   ============================================================ */

/* Stat Card Base */
.stat-card-premium {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: white;
  border: none;
}

.stat-card-premium::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -25%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.stat-card-premium::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

/* Teal Card */
.card.bg-teal,
.card-body.bg-teal,
.card.card-body.bg-teal {
  background: var(--gradient-teal) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 8px 32px rgba(6, 182, 212, 0.25), 0 4px 12px rgba(6, 182, 212, 0.1) !important;
  color: white !important;
  position: relative !important;
  overflow: hidden !important;
}

.card.bg-teal::before,
.card-body.bg-teal::before,
.card.card-body.bg-teal::before {
  content: '' !important;
  position: absolute !important;
  top: -60% !important;
  right: -20% !important;
  width: 220px !important;
  height: 220px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.card.bg-teal::after,
.card-body.bg-teal::after,
.card.card-body.bg-teal::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40% !important;
  left: -15% !important;
  width: 180px !important;
  height: 180px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

/* Pink Card */
.card.bg-pink,
.card-body.bg-pink,
.card.card-body.bg-pink {
  background: var(--gradient-rose) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.25), 0 4px 12px rgba(236, 72, 153, 0.1) !important;
  color: white !important;
  position: relative !important;
  overflow: hidden !important;
}

.card.bg-pink::before,
.card-body.bg-pink::before,
.card.card-body.bg-pink::before {
  content: '' !important;
  position: absolute !important;
  top: -60% !important;
  right: -20% !important;
  width: 220px !important;
  height: 220px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.card.bg-pink::after,
.card-body.bg-pink::after,
.card.card-body.bg-pink::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40% !important;
  left: -15% !important;
  width: 180px !important;
  height: 180px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

/* Primary Card */
.card.bg-primary,
.card-body.bg-primary,
.card.card-body.bg-primary {
  background: var(--gradient-indigo) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25), 0 4px 12px rgba(99, 102, 241, 0.1) !important;
  color: white !important;
  position: relative !important;
  overflow: hidden !important;
}

.card.bg-primary::before,
.card-body.bg-primary::before,
.card.card-body.bg-primary::before {
  content: '' !important;
  position: absolute !important;
  top: -60% !important;
  right: -20% !important;
  width: 220px !important;
  height: 220px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.card.bg-primary::after,
.card-body.bg-primary::after,
.card.card-body.bg-primary::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40% !important;
  left: -15% !important;
  width: 180px !important;
  height: 180px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

/* Stat Card Content */
.card.text-white h6,
.card.text-white .fs-22,
.card.text-white .fs-20,
.card.text-white .font-weight-semibold,
.card.text-white span,
.card.text-white b,
.card.text-white div {
  color: white !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Stat Card Icon */
.card.text-white .font-s-36,
.card.bg-teal .font-s-36,
.card.bg-pink .font-s-36,
.card.bg-primary .font-s-36 {
  font-size: 2.5rem !important;
  opacity: 0.9 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hide Background Image */
.has-bg-image {
  background-image: none !important;
}

/* Bordered Cards */
.card.border-top-success,
.card-body.border-top-success {
  border-top: 3px solid var(--color-success) !important;
}

.card.border-bottom-success,
.card-body.border-bottom-success {
  border-bottom: 3px solid var(--color-success) !important;
}


/* ============================================================
   8. BUTTONS - Premium with Micro-interactions
   ============================================================ */
.btn {
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2-5) var(--space-5) !important;
  transition: all var(--transition-fast) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--color-primary-subtle) !important;
}

.btn:active {
  transform: scale(0.98) !important;
}

/* Primary Button */
.btn-primary,
.btn-theme,
.light-green-theme {
  background: var(--gradient-primary) !important;
  color: var(--color-text-inverse) !important;
  border: none !important;
  box-shadow: var(--shadow-sm), var(--shadow-primary) !important;
}

.btn-primary:hover,
.btn-theme:hover,
.light-green-theme:hover {
  background: var(--gradient-primary-hover) !important;
  box-shadow: var(--shadow-md), var(--shadow-primary-lg) !important;
  transform: translateY(-2px) !important;
}

.btn-primary:active,
.btn-theme:active,
.light-green-theme:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Secondary / Light Button */
.btn-light,
.btn-secondary,
.btn-outline-custom-secondary {
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-light:hover,
.btn-secondary:hover,
.btn-outline-custom-secondary:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-1px) !important;
}

/* Danger Button */
.btn-danger,
.btn.bg-danger {
  background: var(--color-danger) !important;
  color: var(--color-text-inverse) !important;
  border-color: var(--color-danger) !important;
  box-shadow: var(--shadow-sm), var(--shadow-danger) !important;
}

.btn-danger:hover,
.btn.bg-danger:hover {
  background: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
  transform: translateY(-2px) !important;
}

/* Success Button */
.btn-success {
  background: var(--color-success) !important;
  color: var(--color-text-inverse) !important;
  border-color: var(--color-success) !important;
  box-shadow: var(--shadow-sm), var(--shadow-success) !important;
}

.btn-success:hover {
  background: var(--color-success-hover) !important;
  border-color: var(--color-success-hover) !important;
  transform: translateY(-2px) !important;
}

/* Ghost Button */
.btn-link {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-2) var(--space-3) !important;
}

.btn-link:hover {
  color: var(--color-primary) !important;
  background: var(--color-primary-subtle) !important;
}

/* Block Button */
.btn-block {
  width: 100% !important;
}

/* Button Sizes */
.btn-sm {
  font-size: var(--text-xs) !important;
  padding: var(--space-1-5) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
}

.btn-lg {
  font-size: var(--text-md) !important;
  padding: var(--space-3-5) var(--space-6) !important;
  border-radius: var(--radius-lg) !important;
}


/* ============================================================
   9. FORMS & INPUTS - Refined & Modern
   ============================================================ */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  font-family: var(--font-family) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2-5) var(--space-4) !important;
  transition: all var(--transition-fast) !important;
  box-shadow: var(--shadow-xs) !important;
  line-height: 1.5 !important;
  height: auto !important;
}

.form-control:hover {
  border-color: var(--color-text-tertiary) !important;
}

.form-control:focus,
input.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-primary-subtle), var(--shadow-sm) !important;
  outline: none !important;
}

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

/* Labels */
label,
.form-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
  margin-bottom: var(--space-2) !important;
  display: block !important;
}

/* Input Group */
.input-group {
  border-radius: var(--radius-md) !important;
}

.input-group-text {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-tertiary) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2-5) var(--space-4) !important;
}

/* React Select */
.css-yk16xz-control,
.css-1pahdxg-control,
.Select-control {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  min-height: 42px !important;
  box-shadow: var(--shadow-xs) !important;
  font-size: var(--text-sm) !important;
  border-width: 1.5px !important;
}

.css-1pahdxg-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-primary-subtle) !important;
}

/* Date Picker */
.reporting-theme-date {
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2-5) var(--space-4) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-family) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--transition-fast) !important;
}

.reporting-theme-date:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-primary-subtle) !important;
  outline: none !important;
}


/* ============================================================
   10. TABLES - Clean & Premium
   ============================================================ */
.table {
  font-family: var(--font-family) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead th {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
  padding: var(--space-4) var(--space-5) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

.table thead tr.bg-dark,
.table thead .bg-dark {
  background: var(--color-bg-subtle) !important;
}

.table thead tr.bg-dark th,
.table thead .bg-dark th {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-secondary) !important;
}

.table tbody td {
  padding: var(--space-4) var(--space-5) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--color-text) !important;
  font-weight: 400 !important;
}

.table tbody tr {
  transition: background var(--transition-fast) !important;
}

.table tbody tr:hover {
  background: var(--color-primary-subtle) !important;
}

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

/* Table Wrapper */
.datatable-scroll,
.table-responsive {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  background: var(--color-surface) !important;
}

.table-responsive .table,
.datatable-scroll .table {
  margin-bottom: 0 !important;
}

/* Table Action Icons */
.fa-edit,
.fa-trash {
  padding: var(--space-2) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  font-size: var(--text-sm) !important;
}

.fa-edit {
  color: var(--color-primary) !important;
}

.fa-edit:hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary-hover) !important;
}

.fa-trash {
  color: var(--color-danger) !important;
}

.fa-trash:hover {
  background: var(--color-danger-light) !important;
  color: var(--color-danger-hover) !important;
}


/* ============================================================
   11. BADGES - Premium Pills
   ============================================================ */
.badge {
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: var(--space-1) var(--space-2-5) !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: var(--tracking-wide) !important;
}

.badge-success,
.badge.badge-success {
  background: var(--color-success-light) !important;
  color: var(--color-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.badge-danger,
.badge.badge-danger {
  background: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.badge-warning,
.badge.badge-warning {
  background: var(--color-warning-light) !important;
  color: var(--color-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

.badge-primary,
.badge.badge-primary {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}


/* ============================================================
   12. MODALS - Premium Overlay
   ============================================================ */
.modal-dialog {
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: var(--space-8) auto !important;
  animation: modalEntrance 300ms var(--ease-out-expo) !important;
}

.modal-content,
.modal-content.rounded-0,
.modal-content.dark-theme {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
}

.modal-header,
.modal-header.rounded-0,
.modal-header.dark-theme {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  padding: var(--space-6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header.bg-dark,
.modal-header.bg-danger {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.modal-header.bg-danger .modal-title {
  color: var(--color-danger) !important;
}

.modal-title {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

.modal-title.fs-25 {
  font-size: var(--text-lg) !important;
}

.modal-body {
  padding: var(--space-6) !important;
}

.modal-footer {
  background: var(--color-bg-subtle) !important;
  border-top: 1px solid var(--color-divider) !important;
  padding: var(--space-4) var(--space-6) !important;
  gap: var(--space-3) !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Close Button */
.modal-header .close,
.modal-header button.close {
  background: var(--color-bg-subtle) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-circle) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--text-xl) !important;
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
  transition: all var(--transition-fast) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.modal-header .close:hover {
  background: var(--color-border) !important;
  color: var(--color-text) !important;
}

.modal-backdrop {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

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

@keyframes modalEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cancel Button */
.btn-theme-cancel {
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2-5) var(--space-5) !important;
}

.btn-theme-cancel:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
}


/* ============================================================
   13. PAGINATION - Premium Navigation
   ============================================================ */
.pagination {
  padding-left: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-1) !important;
  margin: var(--space-5) 0 !important;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
  font-family: var(--font-family) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-3-5) !important;
  transition: all var(--transition-fast) !important;
  min-width: 40px !important;
  text-align: center !important;
}

.pagination > li > a:hover,
.page-link:hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.pagination > li.active > a,
.page-item.active .page-link {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: var(--shadow-primary) !important;
}

.pagination > li:hover > a,
.pagination > li.active:hover > a {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  color: white !important;
}


/* ============================================================
   14. PROGRESS BARS - Smooth & Modern
   ============================================================ */
.progress {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  height: 8px !important;
  overflow: hidden !important;
}

.progress-bar {
  border-radius: var(--radius-pill) !important;
  transition: width 1000ms var(--ease-out-expo) !important;
}

.progress-bar-white,
.progress-bar.bg-white {
  background: rgba(255, 255, 255, 0.9) !important;
}


/* ============================================================
   15. TABS - Clean Underline Style
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--color-border) !important;
  gap: var(--space-1) !important;
}

.nav-tabs .nav-link {
  font-family: var(--font-family) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-text-tertiary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  transition: all var(--transition-fast) !important;
  background: transparent !important;
  position: relative !important;
}

.nav-tabs .nav-link:hover {
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border) !important;
  background: transparent !important;
}

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

.nav-tabs-highlight .nav-link.active:before {
  background-color: var(--color-primary) !important;
}

.tab-content {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  border-top: none !important;
}


/* ============================================================
   16. ALERTS - Modern Bordered Style
   ============================================================ */
.alert {
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  padding: var(--space-4) var(--space-5) !important;
  border: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
}

.alert-warning {
  background: var(--color-warning-light) !important;
  color: #92400E !important;
  border-left: 4px solid var(--color-warning) !important;
}

.alert-danger {
  background: var(--color-danger-light) !important;
  color: #991B1B !important;
  border-left: 4px solid var(--color-danger) !important;
}

.alert-success {
  background: var(--color-success-light) !important;
  color: #065F46 !important;
  border-left: 4px solid var(--color-success) !important;
}


/* ============================================================
   17. LOGIN PAGE - Premium Glassmorphism
   ============================================================ */
.bg-loginAuth {
  background: var(--gradient-dark) !important;
  background-image: none !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.bg-loginAuth::before {
  content: '' !important;
  position: absolute !important;
  top: -40% !important;
  left: -30% !important;
  width: 80vw !important;
  height: 80vw !important;
  max-width: 800px !important;
  max-height: 800px !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: floatBlob 20s ease-in-out infinite !important;
}

.bg-loginAuth::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40% !important;
  right: -30% !important;
  width: 70vw !important;
  height: 70vw !important;
  max-width: 700px !important;
  max-height: 700px !important;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 60%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: floatBlob 25s ease-in-out infinite reverse !important;
}

@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(5%, 5%) scale(1.05); }
  50% { transform: translate(-3%, 8%) scale(0.95); }
  75% { transform: translate(-5%, -3%) scale(1.02); }
}

.user_card,
.user_card.login-mt-16 {
  background: var(--color-surface-glass) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-3xl) !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
  width: 440px !important;
  height: auto !important;
  padding: var(--space-12) var(--space-10) !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  animation: loginCardEntrance 800ms var(--ease-out-expo) !important;
}

@keyframes loginCardEntrance {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user_card .brand_logo img {
  filter: brightness(0) invert(0) !important;
  opacity: 0.85 !important;
}

.user_card h5.light-black-color,
.user_card h5.mb-0 {
  color: var(--color-text) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
}

.user_card .text-muted,
.user_card .d-block.text-muted {
  color: var(--color-text-tertiary) !important;
  font-size: var(--text-sm) !important;
  margin-top: var(--space-2) !important;
}

.user_card .form_style {
  margin-top: var(--space-8) !important;
  width: 100% !important;
}

.user_card .input-group {
  background: transparent !important;
}

.user_card .input-group-text {
  background: var(--color-bg-subtle) !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--color-text-tertiary) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.user_card .form-control {
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-left: none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3-5) var(--space-4) !important;
}

.user_card .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}

.user_card .form-control:focus + .input-group-text,
.user_card .input-group:focus-within .input-group-text {
  border-color: var(--color-primary) !important;
}

.login_container {
  padding: 0 !important;
  margin-top: var(--space-8) !important;
}

.user_card .btn.btn-primary,
.user_card .btn.light-green-theme {
  background: var(--gradient-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3-5) var(--space-6) !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-normal) !important;
  box-shadow: var(--shadow-primary-lg) !important;
  transition: all var(--transition-base) !important;
}

.user_card .btn.btn-primary:hover,
.user_card .btn.light-green-theme:hover {
  background: var(--gradient-primary-hover) !important;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.45) !important;
  transform: translateY(-3px) !important;
}

.user_card .btn.btn-primary:active,
.user_card .btn.light-green-theme:active {
  transform: translateY(0) !important;
}


/* ============================================================
   18. LOADING STATES - Elegant Indicators
   ============================================================ */
.loading-container-app {
  z-index: var(--z-toast) !important;
}

.loading-content-app {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  color: white !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  padding: var(--space-2-5) var(--space-5) !important;
  box-shadow: var(--shadow-lg), var(--shadow-primary) !important;
  animation: loadingPulse 2s ease-in-out infinite !important;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

/* Custom Loader */
.react-loader-spinner svg {
  filter: hue-rotate(230deg) saturate(1.3) !important;
}


/* ============================================================
   19. ERROR / 404 PAGE
   ============================================================ */
.error-title,
.error-title-ad {
  font-size: 10rem !important;
  font-weight: 800 !important;
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
}


/* ============================================================
   20. FILTER BARS
   ============================================================ */
.bg-light.border.rounded {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: var(--space-4) !important;
}

.border-left-1 {
  border-left: 1px solid var(--color-divider) !important;
}


/* ============================================================
   21. DATA TABLE HEADER / FOOTER
   ============================================================ */
.datatable-header,
.dataTables_wrapper .datatable-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 var(--space-5) 0 !important;
  gap: var(--space-4) !important;
}

.dataTables_filter input {
  font-family: var(--font-family) !important;
  font-size: var(--text-sm) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2-5) var(--space-4) !important;
  transition: all var(--transition-fast) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-xs) !important;
  width: 300px !important;
}

.dataTables_filter input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-primary-subtle) !important;
  outline: none !important;
}

.datatable-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-5) 0 0 !important;
}


/* ============================================================
   22. STATS TABLE HEADERS
   ============================================================ */
.card-header.header-elements-inline[style*="background: rgb(238, 238, 238)"],
.card-header.header-elements-inline[style*="background:#eee"],
.card-header[style*="background: rgb(238"] {
  background: var(--color-bg-subtle) !important;
  border-radius: 0 !important;
  padding: var(--space-4) var(--space-6) !important;
  border-bottom: 1px solid var(--color-border) !important;
}


/* ============================================================
   23. UTILITY OVERRIDES
   ============================================================ */

/* Backgrounds */
.bg-dark {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
}

.bg-light {
  background: var(--color-bg-subtle) !important;
}

.bg-teal-400 { background: var(--gradient-teal) !important; }
.bg-warning-400 { background: var(--color-warning) !important; }

/* Text Colors */
.text-success, .text-success-600 {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-white { color: white !important; }

.text-theme {
  color: var(--color-primary) !important;
}

/* Font Sizes */
.fs-14 { font-size: var(--text-base) !important; }
.fs-16 { font-size: var(--text-md) !important; }
.fs-18 { font-size: var(--text-lg) !important; }
.fs-20 { font-size: var(--text-xl) !important; }
.fs-22 { font-size: var(--text-xl) !important; }
.font-s-16 { font-size: var(--text-md) !important; }
.font-s-18 { font-size: var(--text-lg) !important; }
.font-s-32 { font-size: var(--text-3xl) !important; }
.font-s-36 { font-size: var(--text-3xl) !important; }

/* Border Utilities */
.border-top-success { border-top-color: var(--color-success) !important; }
.border-bottom-success { border-bottom-color: var(--color-success) !important; }

/* Width Utilities */
.w-27em { width: 100% !important; max-width: 27em !important; }
.width-27x { width: 100% !important; max-width: 27em !important; }

/* Spacing */
.rounded-2 { border-radius: var(--radius-xl) !important; }

/* Theme Colors */
.bg-theme,
.btn-theme,
.theme-loading,
.c-bg_theme {
  background-color: var(--color-primary) !important;
}

.theme-icon { color: var(--color-primary) !important; }
.theme-icon:hover { color: var(--color-primary-hover) !important; }


/* ============================================================
   24. ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Gentle Page Entrance */
.content {
  animation: contentEntrance 500ms var(--ease-out-expo) !important;
}

@keyframes contentEntrance {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card Entrance Animation */
.card {
  animation: cardEntrance 600ms var(--ease-out-expo) !important;
  animation-fill-mode: both !important;
}

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

/* Staggered Card Entrance */
.row > .col-md-4:nth-child(1) .card { animation-delay: 0ms !important; }
.row > .col-md-4:nth-child(2) .card { animation-delay: 100ms !important; }
.row > .col-md-4:nth-child(3) .card { animation-delay: 200ms !important; }

.row > .col-md-12:nth-child(1) .card { animation-delay: 150ms !important; }
.row > .col-md-12:nth-child(2) .card { animation-delay: 250ms !important; }
.row > .col-md-12:nth-child(3) .card { animation-delay: 350ms !important; }


/* ============================================================
   25. NOTIFICATION OVERRIDES (PNotify)
   ============================================================ */
.ui-pnotify {
  font-family: var(--font-family) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  border: none !important;
}

.brighttheme-info {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  border-radius: var(--radius-lg) !important;
}


/* ============================================================
   26. RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width: 991.98px) {
  .navbar-brand.wmin-200,
  .navbar-brand {
    min-width: auto !important;
    border-right: none !important;
  }

  .border_left_line {
    min-width: auto !important;
  }

  .sidebar.sidebar-main {
    box-shadow: var(--shadow-2xl) !important;
  }
}

@media (max-width: 767.98px) {
  .user_card {
    width: 92vw !important;
    max-width: 440px !important;
    padding: var(--space-10) var(--space-6) !important;
  }

  .content {
    padding: var(--space-5) !important;
  }

  .page-header,
  .page-header-light {
    padding: var(--space-5) var(--space-5) 0 !important;
  }

  .error-title-ad {
    font-size: 5rem !important;
  }
}


/* ============================================================
   27. CHART REFINEMENTS
   ============================================================ */
.chart canvas {
  border-radius: var(--radius-md) !important;
}


/* ============================================================
   28. REACT-DATEPICKER OVERRIDES
   ============================================================ */
.react-datepicker {
  font-family: var(--font-family) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

.react-datepicker__header {
  background: var(--color-bg-subtle) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background: var(--gradient-primary) !important;
  border-radius: var(--radius-md) !important;
}

.react-datepicker__day:hover {
  background: var(--color-primary-light) !important;
  border-radius: var(--radius-md) !important;
}

.react-datepicker-popper {
  z-index: var(--z-dropdown) !important;
}


/* ============================================================
   29. SIDEBAR COLLAPSED (xs) REFINEMENTS
   ============================================================ */
.sidebar-xs .sidebar-main.sidebar-light {
  background: var(--color-surface) !important;
}

.sidebar-xs .sidebar-main.sidebar-light .nav-sidebar > .nav-item-submenu > .nav-group-sub {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  margin-left: 4px !important;
}


/* ============================================================
   30. MISC POLISH & REFINEMENTS
   ============================================================ */

/* Spinner Animation */
.icon-spinner2.spinner {
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Circular Progress Bar */
.CircularProgressbar-path {
  stroke: var(--color-primary) !important;
}

.CircularProgressbar-trail {
  stroke: var(--color-border) !important;
}

.CircularProgressbar-text {
  fill: var(--color-text) !important;
  font-family: var(--font-family) !important;
  font-weight: 700 !important;
}

/* Focus Visible for Accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Theme Colors */
.btn-theme-icon-color,
.user-theme-color {
  background: var(--gradient-primary) !important;
  color: white !important;
}

/* Datepicker Clearable */
.react-datepicker__close-icon::after {
  background: var(--color-text-tertiary) !important;
  font-size: var(--text-base) !important;
}

/* Table within Card */
.card > .table-responsive:first-child,
.card-body > .table-responsive:first-child {
  border-top: none !important;
  border-radius: 0 !important;
}

.card > .table-responsive,
.card-body + .table-responsive {
  border: none !important;
  border-top: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
}

/* Stats Section Styling */
.card-body.d-sm-flex {
  padding: var(--space-5) var(--space-6) !important;
  gap: var(--space-8) !important;
  border-bottom: 1px solid var(--color-divider) !important;
}

/* Icon Sizing in Stats */
.icon-1x { font-size: var(--text-sm) !important; color: var(--color-primary) !important; }
.icon-2x { font-size: var(--text-xl) !important; }

/* Right Align Table Cells */
.right_align td {
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
}

/* Card Border Classes */
.card.border-left-dark-alpha {
  border-left: 1px solid var(--color-border) !important;
}

.card.border-right-dark-alpha {
  border-right: 1px solid var(--color-border) !important;
}

/* Select in Card Header */
.card-header .header-elements {
  display: flex !important;
  align-items: center !important;
}

.card-header .form-group {
  margin-bottom: 0 !important;
}

/* Stats Summary Row */
.card-body.py-0 {
  padding-top: var(--space-5) !important;
  padding-bottom: 0 !important;
}

.card-body .col-4 h5 {
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

.card-body .col-4 .text-muted.fs-14 {
  font-size: var(--text-xs) !important;
  color: var(--color-text-tertiary) !important;
}

/* Invoice and Table Pages */
.card.card-body {
  padding: var(--space-6) !important;
}


/* ============================================================
   31. EMPTY & SKELETON STATES
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-tertiary);
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  max-width: 400px;
  margin: 0 auto;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-bg-muted) 50%, var(--color-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

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


/* ============================================================
   32. FRAMER MOTION INTEGRATION HELPERS
   ============================================================ */
.motion-card {
  will-change: transform, opacity;
}

.motion-fade-in {
  animation: fadeIn 500ms var(--ease-out-expo);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.motion-slide-up {
  animation: slideUp 500ms var(--ease-out-expo);
}

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

.motion-scale-in {
  animation: scaleIn 300ms var(--ease-out-expo);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


/* ============================================================
   33. PREMIUM COMPONENT CLASSES
   ============================================================ */

/* Glass Card Variant */
.card-glass {
  background: var(--color-surface-glass) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Elevated Card */
.card-elevated {
  box-shadow: var(--shadow-card-elevated) !important;
}

/* Interactive Card */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* Premium Badge */
.badge-premium {
  background: var(--gradient-primary);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  box-shadow: var(--shadow-primary);
}

/* Subtle Divider */
.divider-subtle {
  border: none;
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-6) 0;
}

/* Section Header */
.section-header {
  margin-bottom: var(--space-6);
}

.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}

.section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Stat Number Display */
.stat-number {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.stat-number-sm {
  font-size: var(--text-xl);
}

.stat-number-lg {
  font-size: var(--text-4xl);
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-1);
}

/* Icon Container */
.icon-container {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-size: var(--text-xl);
}

.icon-container-sm {
  width: 36px;
  height: 36px;
  font-size: var(--text-md);
}

.icon-container-lg {
  width: 64px;
  height: 64px;
  font-size: var(--text-2xl);
}

/* Success Icon Container */
.icon-container-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* Danger Icon Container */
.icon-container-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* Warning Icon Container */
.icon-container-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* ============================================================
   REACT-DATEPICKER PREMIUM STYLES
   ============================================================ */

/* Premium Datepicker Input */
.premium-datepicker,
.react-datepicker__input-container input,
.reporting-theme-date {
  width: 100% !important;
  padding: 0.625rem 1rem !important;
  border-radius: 10px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  font-size: 0.875rem !important;
  font-family: var(--font-family) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.premium-datepicker:focus,
.react-datepicker__input-container input:focus,
.reporting-theme-date:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.premium-datepicker:hover,
.react-datepicker__input-container input:hover {
  border-color: var(--color-primary) !important;
}

/* Datepicker Dropdown */
.react-datepicker {
  font-family: var(--font-family) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1) !important;
  background: var(--color-surface) !important;
  overflow: hidden !important;
}

.react-datepicker__header {
  background: var(--color-bg-subtle) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 1rem !important;
  border-radius: 0 !important;
}

.react-datepicker__current-month,
.react-datepicker-time__header {
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  color: var(--color-text) !important;
  margin-bottom: 0.5rem !important;
}

.react-datepicker__day-names {
  margin-top: 0.5rem !important;
}

.react-datepicker__day-name {
  color: var(--color-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  width: 2.25rem !important;
  line-height: 2.25rem !important;
  margin: 0.125rem !important;
}

.react-datepicker__day {
  width: 2.25rem !important;
  line-height: 2.25rem !important;
  margin: 0.125rem !important;
  border-radius: 8px !important;
  color: var(--color-text) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  transition: all 0.15s ease !important;
}

.react-datepicker__day:hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background: var(--gradient-primary) !important;
  color: white !important;
  font-weight: 600 !important;
}

.react-datepicker__day--today {
  border: 2px solid var(--color-primary) !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.react-datepicker__day--today.react-datepicker__day--selected {
  border: none !important;
  color: white !important;
}

.react-datepicker__day--disabled {
  color: var(--color-text-tertiary) !important;
  opacity: 0.5 !important;
}

.react-datepicker__navigation {
  top: 1rem !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 8px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  transition: all 0.15s ease !important;
}

.react-datepicker__navigation:hover {
  background: var(--color-primary-subtle) !important;
  border-color: var(--color-primary) !important;
}

.react-datepicker__navigation--previous {
  left: 1rem !important;
}

.react-datepicker__navigation--next {
  right: 1rem !important;
}

.react-datepicker__navigation-icon::before {
  border-color: var(--color-text-secondary) !important;
  border-width: 2px 2px 0 0 !important;
  width: 6px !important;
  height: 6px !important;
}

/* Time Picker */
.react-datepicker__time-container {
  border-left: 1px solid var(--color-border) !important;
  width: 100px !important;
}

.react-datepicker__time-box {
  width: 100% !important;
}

.react-datepicker__time-list-item {
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.react-datepicker__time-list-item:hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
}

.react-datepicker__time-list-item--selected {
  background: var(--gradient-primary) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Close Button for Clearable */
.react-datepicker__close-icon {
  right: 0.75rem !important;
}

.react-datepicker__close-icon::after {
  background-color: var(--color-text-tertiary) !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
}

.react-datepicker__close-icon:hover::after {
  background-color: var(--color-danger) !important;
}

/* Triangle Arrow */
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  border-bottom-color: var(--color-bg-subtle) !important;
}

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  border-top-color: var(--color-surface) !important;
}

/* ============================================================
   REACT-SELECT ADDITIONAL STYLES
   ============================================================ */
.select__control {
  border-radius: 10px !important;
  border-color: var(--color-border) !important;
  min-height: 42px !important;
}

.select__control--is-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.select__menu {
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--color-border) !important;
  overflow: hidden !important;
}

.select__option--is-focused {
  background: var(--color-primary-subtle) !important;
}

.select__option--is-selected {
  background: var(--color-primary) !important;
}

/* ============================================================
   SHIMMER ANIMATION FOR LOADING STATES
   ============================================================ */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle) 0%,
    var(--color-bg-muted) 50%,
    var(--color-bg-subtle) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ============================================================
   PULSE ANIMATION FOR LIVE INDICATORS
   ============================================================ */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================================
   SPINNER ANIMATION
   ============================================================ */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-subtle);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* ============================================================
   FORM FOCUS STATES
   ============================================================ */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* ============================================================
   CUSTOM CHECKBOX TOGGLE
   ============================================================ */
.custom-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--color-border);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-toggle.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.custom-toggle-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-toggle.active .custom-toggle-thumb {
  transform: translateX(20px);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-teal {
  background: var(--gradient-teal);
}

.bg-gradient-rose {
  background: var(--gradient-rose);
}

.border-gradient {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              var(--gradient-primary) border-box;
}

/* Premium Card Hover Effect */
.premium-hover {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Glass Effect Utility */
.glass {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Success Subtle Background */
.bg-success-subtle {
  background: var(--color-success-light) !important;
}

.text-success {
  color: var(--color-success) !important;
}

/* Danger Subtle Background */
.bg-danger-subtle {
  background: var(--color-danger-light) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}