/* Celebration Services Theme - Soft, Pastel Visual Enhancements */

/* ============================================
   DARK MODE COLOR SYSTEM - Centralized
   ============================================
   WCAG AA compliant contrast ratios
   Consistent across all components
   ============================================ */

/* Dark Mode Color Variables (using CSS custom properties for consistency) */
:root {
    /* Dark mode backgrounds - hierarchical surfaces */
    --dm-bg-primary: #1E293B;        /* Main background (slate-800) */
    --dm-bg-secondary: #0F172A;      /* Sidebar, deepest (slate-900) */
    --dm-surface: #334155;           /* Cards, elevated (slate-700) */
    --dm-surface-elevated: #475569;  /* Modals, dropdowns (slate-600) */
    --dm-surface-hover: #475569;     /* Hover states (slate-600) */
    
    /* Dark mode text - accessibility compliant */
    --dm-text-primary: #F1F5F9;      /* Primary text (slate-50) - 15.8:1 contrast */
    --dm-text-secondary: #CBD5E1;    /* Secondary text (slate-300) - 9.6:1 contrast */
    --dm-text-muted: #94A3B8;        /* Muted text (slate-400) - 6.2:1 contrast */
    --dm-text-disabled: #64748B;     /* Disabled text (slate-500) - 4.5:1 contrast */
    
    /* Dark mode borders - subtle, not glowing */
    --dm-border: rgba(71, 85, 105, 0.3);      /* Standard borders */
    --dm-border-subtle: rgba(71, 85, 105, 0.2);  /* Subtle dividers */
    --dm-border-strong: rgba(71, 85, 105, 0.5);   /* Strong borders */
    --dm-border-hover: rgba(71, 85, 105, 0.4);    /* Hover borders */
    
    /* Dark mode accent colors - purple as accent only */
    --dm-accent-purple: #C4B5FD;     /* Light purple for dark mode */
    --dm-accent-purple-hover: #DDD6FE;
    --dm-accent-purple-bg: rgba(196, 181, 253, 0.1);
    
    /* Dark mode shadows */
    --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dm-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --dm-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Modern gradient backgrounds - refined saturation */
.iq-sidebar {
    background: linear-gradient(180deg, #FCFBFF 0%, #F8F7FF 100%);
}

/* ============================================
   SIDEBAR DARK MODE - ROOT CAUSE ANALYSIS
   ============================================
   
   PROBLEM IDENTIFIED:
   ===================
   
   1. SELECTOR MISMATCH (PRIMARY ISSUE) - FIXED:
      - System uses: html[data-bs-theme="dark"] (from master-layout.blade.php)
      - celebration-theme.css NOW uses: [data-bs-theme="dark"] (FIXED - all 238 instances replaced)
      - backend.css uses: [data-bs-theme=dark]
      - RESULT: celebration-theme.css dark mode rules NOW MATCH correctly!
      
   2. CSS LOADING ORDER:
      - backend.css loads FIRST (line 7 in _head.blade.php)
      - celebration-theme.css loads SECOND (line 8)
      - provide.css also contains sidebar styles
      - RESULT: backend.css styles may override, but more importantly,
        celebration-theme.css dark mode selectors don't match the actual
        HTML attribute structure
      
   3. BOOTSTRAP CSS VARIABLES:
      - Sidebar SCSS (_sidebar-default.scss) uses: var(--bs-gray-900)
      - Bootstrap variables ARE defined for dark mode in _root.scss
      - Dark mode variables use: [data-bs-theme="dark"] selector
      - RESULT: Bootstrap variables work, but celebration-theme.css overrides
        don't apply because selector doesn't match
      
   4. SIDEBAR HTML STRUCTURE:
      - File: resources/views/partials/_body_sidebar.blade.php
      - Structure: <div class="iq-sidebar sidebar-default">
      - No data-theme attribute on sidebar itself
      - RESULT: Sidebar inherits from html[data-bs-theme="dark"], but
        celebration-theme.css uses wrong selector
      
   5. HARDCODED BACKGROUNDS:
      - Sidebar SCSS sets: background: var(--bs-gray-900)
      - This SHOULD be dark (#212529 or dark mode equivalent)
      - But if Bootstrap variables don't update, it stays light
      - RESULT: Sidebar may show dark background from Bootstrap, but
        menu items, text, and other elements don't get dark mode styling
        because celebration-theme.css selectors don't match
   
   SOLUTION APPLIED:
   ==================
   ✅ FIXED: Changed ALL [theme="dark"] selectors to [data-bs-theme="dark"] to match
   the actual HTML attribute used by the system. (238 instances replaced)
   
   ============================================ */

/* Sidebar container - dark background */
/* NOTE: Selector changed from [data-bs-theme="dark"] to [data-bs-theme="dark"] to match actual HTML attribute */
[data-bs-theme="dark"] .iq-sidebar,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .sidebar-default {
    background: var(--dm-bg-secondary) !important;
    border-right: 1px solid var(--dm-border) !important;
}

/* Sidebar header and body - transparent to show dark background */
[data-bs-theme="dark"] .iq-sidebar-header,
[data-bs-theme="dark"] .sidebar-header,
[data-bs-theme="dark"] .iq-sidebar-body,
[data-bs-theme="dark"] .sidebar-body,
[data-bs-theme="dark"] .iq-sidebar-menu,
[data-bs-theme="dark"] .sidebar-list {
    background: transparent !important;
    border-color: var(--dm-border) !important;
}

/* Sidebar logo and branding */
[data-bs-theme="dark"] .iq-sidebar-logo,
[data-bs-theme="dark"] .iq-sidebar-logo .header-logo,
[data-bs-theme="dark"] .iq-sidebar .navbar-brand,
[data-bs-theme="dark"] .sidebar .navbar-brand {
    color: var(--dm-text-primary) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .iq-sidebar-logo a,
[data-bs-theme="dark"] .iq-sidebar-logo a span,
[data-bs-theme="dark"] .navbar-brand .logo-title {
    color: var(--dm-text-primary) !important;
}

/* Sidebar menu items - base styles */
[data-bs-theme="dark"] .side-menu li a,
[data-bs-theme="dark"] .side-menu .nav-link,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-link,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav .nav-item .nav-link,
[data-bs-theme="dark"] .iq-sidebar-menu .navbar-nav .nav-item .nav-link,
[data-bs-theme="dark"] .sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled) {
    color: var(--dm-text-secondary) !important;
    background: transparent !important;
}

/* Sidebar menu items - hover state */
[data-bs-theme="dark"] .side-menu li a:hover,
[data-bs-theme="dark"] .side-menu .nav-link:hover,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-link:hover,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav .nav-item .nav-link:hover,
[data-bs-theme="dark"] .iq-sidebar-menu .navbar-nav .nav-item .nav-link:hover,
[data-bs-theme="dark"] .sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled):hover:not(.active):not([aria-expanded="true"]) {
    color: var(--dm-text-primary) !important;
    background: var(--dm-surface) !important;
}

/* Sidebar menu items - active state */
[data-bs-theme="dark"] .side-menu li.active > a,
[data-bs-theme="dark"] .side-menu .nav-link.active,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-link.active,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav .nav-item .nav-link.active,
[data-bs-theme="dark"] .iq-sidebar-menu .navbar-nav .nav-item .nav-link.active,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav .nav-item .nav-link[aria-expanded="true"],
[data-bs-theme="dark"] .sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled).active,
[data-bs-theme="dark"] .sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled)[aria-expanded="true"] {
    color: #ffffff !important;
    background: #5F60B9 !important;
    box-shadow: 0 2px 8px rgba(95, 96, 185, 0.3) !important;
}

/* Sidebar menu titles/section headers */
[data-bs-theme="dark"] .side-menu-title,
[data-bs-theme="dark"] .iq-sidebar-menu .side-menu-title,
[data-bs-theme="dark"] .category-main,
[data-bs-theme="dark"] .iq-sidebar-menu .category-main {
    color: var(--dm-text-muted) !important;
    background: transparent !important;
    border-color: var(--dm-border) !important;
}

/* Sidebar SVG icons - normal state */
[data-bs-theme="dark"] .side-menu svg,
[data-bs-theme="dark"] .iq-sidebar-menu svg,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav svg,
[data-bs-theme="dark"] .iq-sidebar-menu .svg-icon svg,
[data-bs-theme="dark"] .iq-sidebar-menu .svg-icon i svg {
    stroke: var(--dm-text-secondary) !important;
    fill: var(--dm-text-secondary) !important;
    color: var(--dm-text-secondary) !important;
}

/* Sidebar SVG icons - active state */
[data-bs-theme="dark"] .side-menu li.active svg,
[data-bs-theme="dark"] .side-menu .nav-link.active svg,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-link.active svg,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav .nav-item.active svg,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-item.active .svg-icon svg,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-item.active .svg-icon i svg {
    stroke: #ffffff !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Sidebar SVG icons - hover state */
[data-bs-theme="dark"] .side-menu li:hover svg,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-item:hover .svg-icon svg {
    stroke: var(--dm-text-primary) !important;
    fill: var(--dm-text-primary) !important;
}

/* Sidebar user info section */
[data-bs-theme="dark"] .iq-sidebar .user-info,
[data-bs-theme="dark"] .iq-sidebar .user-detail,
[data-bs-theme="dark"] .iq-sidebar .user-box {
    color: var(--dm-text-primary) !important;
    background: transparent !important;
    border-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .iq-sidebar .user-detail p,
[data-bs-theme="dark"] .iq-sidebar .user-detail span,
[data-bs-theme="dark"] .iq-sidebar .user-info p {
    color: var(--dm-text-secondary) !important;
}

/* Sidebar menu list items - ensure no white backgrounds */
[data-bs-theme="dark"] .iq-sidebar .side-menu li,
[data-bs-theme="dark"] .iq-sidebar-menu .side-menu li,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav .nav-item,
[data-bs-theme="dark"] .iq-sidebar-menu .navbar-nav .nav-item,
[data-bs-theme="dark"] .sidebar-default .navbar-nav .nav-item {
    background: transparent !important;
}

[data-bs-theme="dark"] .iq-sidebar .side-menu,
[data-bs-theme="dark"] .iq-sidebar-menu .side-menu,
[data-bs-theme="dark"] .iq-sidebar .navbar-nav,
[data-bs-theme="dark"] .iq-sidebar-menu .navbar-nav,
[data-bs-theme="dark"] .sidebar-default .navbar-nav {
    background: transparent !important;
}

/* Sidebar submenu items */
[data-bs-theme="dark"] .iq-sidebar .submenu li a,
[data-bs-theme="dark"] .iq-sidebar-menu .submenu li a,
[data-bs-theme="dark"] .iq-sidebar .sub-nav li a,
[data-bs-theme="dark"] .iq-sidebar-menu .submenu .nav-link {
    background: transparent !important;
    color: var(--dm-text-secondary) !important;
}

[data-bs-theme="dark"] .iq-sidebar .submenu li a:hover,
[data-bs-theme="dark"] .iq-sidebar-menu .submenu li a:hover,
[data-bs-theme="dark"] .iq-sidebar .sub-nav li a:hover,
[data-bs-theme="dark"] .iq-sidebar-menu .submenu .nav-link:hover {
    background: var(--dm-surface) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .iq-sidebar .submenu li.active a,
[data-bs-theme="dark"] .iq-sidebar-menu .submenu li.active .nav-link {
    color: var(--dm-accent-purple) !important;
    background: transparent !important;
}

/* Sidebar dividers and separators */
[data-bs-theme="dark"] .iq-sidebar hr,
[data-bs-theme="dark"] .sidebar hr,
[data-bs-theme="dark"] .iq-sidebar .divider,
[data-bs-theme="dark"] .sidebar .divider {
    border-color: var(--dm-border) !important;
    background: transparent !important;
}

/* Sidebar scrollbar */
[data-bs-theme="dark"] .iq-sidebar .data-scrollbar,
[data-bs-theme="dark"] .sidebar .data-scrollbar {
    background: transparent !important;
}

/* Sidebar tooltips */
[data-bs-theme="dark"] .iq-sidebar .custom-tooltip,
[data-bs-theme="dark"] .iq-sidebar .tooltip-text {
    background: var(--dm-surface-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Sidebar right icon (collapse indicator) */
[data-bs-theme="dark"] .iq-sidebar-menu .right-icon,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-link .right-icon {
    color: var(--dm-text-muted) !important;
}

[data-bs-theme="dark"] .iq-sidebar-menu .nav-link.active .right-icon,
[data-bs-theme="dark"] .iq-sidebar-menu .nav-link[aria-expanded="true"] .right-icon {
    color: #ffffff !important;
}

/* Override white backgrounds from other CSS files - specific selectors */
[data-bs-theme="dark"] .iq-sidebar .nav-link:not(.active):not([aria-expanded="true"]),
[data-bs-theme="dark"] .iq-sidebar .nav-item:not(.active),
[data-bs-theme="dark"] .iq-sidebar .side-menu li:not(.active),
[data-bs-theme="dark"] .iq-sidebar ul,
[data-bs-theme="dark"] .iq-sidebar ol,
[data-bs-theme="dark"] .iq-sidebar .list-unstyled {
    background-color: transparent !important;
}

/* Ensure sidebar containers don't have white backgrounds */
[data-bs-theme="dark"] .iq-sidebar .card,
[data-bs-theme="dark"] .iq-sidebar .card-body,
[data-bs-theme="dark"] .iq-sidebar .panel,
[data-bs-theme="dark"] .iq-sidebar .widget {
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
}

/* Modern card styling - refined borders and shadows */
.card {
    box-shadow: 0 1px 3px rgba(167, 139, 250, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px);
    border-color: rgba(167, 139, 250, 0.3) !important;
}

[data-bs-theme="dark"] .card {
    box-shadow: var(--dm-shadow-sm) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
}

[data-bs-theme="dark"] .card:hover {
    box-shadow: var(--dm-shadow-md) !important;
    border-color: var(--dm-border-hover) !important;
}

/* Celebration-themed button styles with joyful gradients */
.btn-primary {
    background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(167, 139, 250, 0.25) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%) !important;
    box-shadow: 0 5px 15px rgba(167, 139, 250, 0.35) !important;
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3) !important;
}

/* Celebration success button */
.btn-success {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-2px);
}

/* Celebration warning button */
.btn-warning {
    background: linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(251, 191, 36, 0.25) !important;
    color: #92400E !important;
    font-weight: 600 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.35) !important;
    transform: translateY(-2px);
}

/* Sidebar menu items with soft celebration styling */
.side-menu li a {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    margin: 2px 0 !important;
}

.side-menu li a:hover {
    background: rgba(167, 139, 250, 0.08) !important;
    transform: translateX(3px);
}

.side-menu li.active > a {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.15) 0%, rgba(196, 181, 253, 0.1) 100%) !important;
    border-left: 4px solid #A78BFA !important;
    box-shadow: 2px 0 8px rgba(167, 139, 250, 0.15) !important;
    font-weight: 600 !important;
    color: #6D28D9 !important;
}

/* ============================================
   STANDARDIZED STATUS BADGE STYLES
   ============================================ */

/* Base badge - standardized foundation */
.badge {
    display: inline-block !important;
    border-radius: 10px !important;
    padding: 0.45rem 0.9rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

/* Primary badge - standard style */
.badge.bg-primary {
    background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%) !important;
    color: #ffffff !important;
    border-color: rgba(167, 139, 250, 0.2) !important;
}

/* Table row hover effects - handled in comprehensive table section below */

/* Soft input focus states */
.form-control:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1) !important;
    outline: none !important;
}

/* Soft progress bars with pastel gradients */
.progress-bar {
    background: linear-gradient(90deg, #A78BFA 0%, #C4B5FD 100%) !important;
    border-radius: 6px !important;
}

.progress {
    border-radius: 6px !important;
    background-color: rgba(167, 139, 250, 0.1) !important;
}

/* Soft link colors */
a {
    color: #A78BFA !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: #8B5CF6 !important;
}

/* Standardized status badges - solid variants */
.badge.bg-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: rgba(5, 150, 105, 0.2) !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #ffffff !important;
    border-color: rgba(217, 119, 6, 0.2) !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    color: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
    color: #ffffff !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
}

/* Celebration-specific badge styling - standardized */
.celebration-badge-awaiting {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #B45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15) !important;
}

.celebration-badge-confirmed {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
}

.celebration-badge-active {
    background: rgba(167, 139, 250, 0.12) !important;
    color: #6D28D9 !important;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(167, 139, 250, 0.15) !important;
}

.celebration-badge-progress {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #1E40AF !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15) !important;
}

.celebration-badge-completed {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
}

.celebration-badge-cancelled {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15) !important;
    opacity: 0.9 !important;
}

.celebration-badge-rejected {
    background: rgba(75, 85, 99, 0.12) !important;
    color: #374151 !important;
    border: 1px solid rgba(75, 85, 99, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(75, 85, 99, 0.15) !important;
}

.celebration-badge-hold {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #B45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15) !important;
}

.celebration-badge-default {
    background: rgba(75, 85, 99, 0.12) !important;
    color: #374151 !important;
    border: 1px solid rgba(75, 85, 99, 0.25) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(75, 85, 99, 0.15) !important;
}

/* Dashboard cards with soft celebration styling */
.dashboard-card {
    border-radius: 18px !important;
    background: linear-gradient(135deg, #ffffff 0%, #FAF9FF 100%) !important;
    box-shadow: 0 2px 10px rgba(167, 139, 250, 0.08) !important;
    border: 1px solid rgba(233, 229, 255, 0.5) !important;
}

[data-bs-theme="dark"] .dashboard-card {
    background: linear-gradient(135deg, #2A2538 0%, #1E1B2E 100%) !important;
    border-color: rgba(58, 53, 69, 0.5) !important;
}

/* Soft icon styling */
.side-menu svg {
    filter: drop-shadow(0 1px 2px rgba(167, 139, 250, 0.08));
    transition: filter 0.2s ease !important;
}

.side-menu li:hover svg {
    filter: drop-shadow(0 2px 4px rgba(167, 139, 250, 0.15));
}

/* Reduced contrast for better readability */
/* Secondary text - modern refined colors */
.text-muted {
    color: #64748B !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #94A3B8 !important;
}

/* Soft modal styling */
.modal-content {
    border-radius: 16px !important;
    border: 1px solid rgba(233, 229, 255, 0.6) !important;
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.12) !important;
}

/* Soft dropdown menus */
.dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid rgba(233, 229, 255, 0.6) !important;
    box-shadow: 0 4px 16px rgba(167, 139, 250, 0.1) !important;
    padding: 8px !important;
}

.dropdown-item {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover {
    background: rgba(167, 139, 250, 0.08) !important;
}

/* Soft tabs */
.nav-tabs .nav-link {
    border-radius: 10px 10px 0 0 !important;
    transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
    background: rgba(167, 139, 250, 0.05) !important;
}

.nav-tabs .nav-link.active {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 181, 253, 0.05) 100%) !important;
    border-color: #A78BFA #A78BFA transparent !important;
}

/* Soft pagination */
.pagination .page-link {
    border-radius: 8px !important;
    border-color: rgba(233, 229, 255, 0.6) !important;
    color: #A78BFA !important;
    margin: 0 2px !important;
    transition: all 0.2s ease !important;
}

.pagination .page-link:hover {
    background: rgba(167, 139, 250, 0.08) !important;
    border-color: #A78BFA !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%) !important;
    border-color: #A78BFA !important;
}

/* Soft alert styling */
.alert {
    border-radius: 12px !important;
    border: 1px solid rgba(233, 229, 255, 0.6) !important;
}

.alert-primary {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 181, 253, 0.05) 100%) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
    color: #6D28D9 !important;
}

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

::-webkit-scrollbar-track {
    background: rgba(233, 229, 255, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A78BFA 0%, #C4B5FD 100%);
    border-radius: 10px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8B5CF6 0%, #A78BFA 100%);
}

/* Smooth transitions throughout */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Override for elements that shouldn't transition */
*:not(.no-transition) {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ============================================
   DASHBOARD LAYOUT - Lighter, Experience-Oriented
   ============================================ */

/* Increase white space in dashboard container */
.container-fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

@media (max-width: 991px) {
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* KPI Cards - Make them feel like "overview" cards, not "operations" */
/* Modern KPI Cards - Clean, informative design with original colors */
/* Modern KPI Cards - Clean SaaS-style design */
.card.total-booking-card,
.card.total-service-card,
.card.total-provider-card,
.card.total-revenue {
    border-radius: 12px !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    background: #5F60B9 !important;
    position: relative !important;
}

[data-bs-theme="dark"] .card.total-booking-card,
[data-bs-theme="dark"] .card.total-service-card,
[data-bs-theme="dark"] .card.total-provider-card,
[data-bs-theme="dark"] .card.total-revenue {
    background: #5F60B9 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: var(--dm-shadow-sm) !important;
}

/* KPI Cards Row - Consistent modern spacing with tight grouping */
.row > [class*="col-lg-3"]:has(.total-booking-card),
.row > [class*="col-lg-3"]:has(.total-service-card),
.row > [class*="col-lg-3"]:has(.total-revenue) {
    margin-bottom: 0 !important;
}

/* KPI cards container - Visual grouping */
.col-md-12:has(.row:has(.total-booking-card)) {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Ensure proper spacing between content and icon */
.card.total-booking-card .card-body .row > .col,
.card.total-service-card .card-body .row > .col,
.card.total-provider-card .card-body .row > .col,
.card.total-revenue .card-body .row > .col {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Improve alignment of content */
.card.total-booking-card .d-flex.flex-wrap,
.card.total-service-card .d-flex.flex-wrap,
.card.total-provider-card .d-flex.flex-wrap,
.card.total-revenue .d-flex.flex-wrap {
    align-items: flex-start !important;
    gap: 0 !important;
}

.card.total-booking-card .card-body,
.card.total-service-card .card-body,
.card.total-provider-card .card-body,
.card.total-revenue .card-body {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: relative !important;
    background: transparent !important;
    color: #ffffff !important;
    gap: 0.5rem !important;
}

.card.total-booking-card:hover,
.card.total-service-card:hover,
.card.total-provider-card:hover,
.card.total-revenue:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* KPI Card Content - Modern hierarchy: dominant number, subtle label */
.card.total-booking-card h4.booking-text,
.card.total-service-card h4.booking-text,
.card.total-provider-card h4.booking-text,
.card.total-revenue h4.booking-text {
    font-size: 2.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    letter-spacing: -0.05em !important;
    line-height: 1 !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

[data-bs-theme="dark"] .card.total-booking-card h4.booking-text,
[data-bs-theme="dark"] .card.total-service-card h4.booking-text,
[data-bs-theme="dark"] .card.total-provider-card h4.booking-text,
[data-bs-theme="dark"] .card.total-revenue h4.booking-text {
    color: #ffffff !important;
}

.card.total-booking-card p.booking-text,
.card.total-service-card p.booking-text,
.card.total-provider-card p.booking-text,
.card.total-revenue p.booking-text {
    font-size: 0.8125rem !important;
    opacity: 0.9 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: none !important;
}

[data-bs-theme="dark"] .card.total-booking-card p.booking-text,
[data-bs-theme="dark"] .card.total-service-card p.booking-text,
[data-bs-theme="dark"] .card.total-provider-card p.booking-text,
[data-bs-theme="dark"] .card.total-revenue p.booking-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* KPI Card Icons - Minimal, modern design (reduced decorative prominence) */
.iq-card-icon {
    height: 36px !important;
    width: 36px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
}

.card.total-booking-card:hover .iq-card-icon,
.card.total-service-card:hover .iq-card-icon,
.card.total-provider-card:hover .iq-card-icon,
.card.total-revenue:hover .iq-card-icon {
    background: rgba(255, 255, 255, 0.12) !important;
    opacity: 0.8 !important;
}

/* Make SVG icons inside card icons smaller and more subtle */
.iq-card-icon svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

/* KPI Card Layout - Number first, label below, icon top-right */
.card.total-booking-card .card-body .row,
.card.total-service-card .card-body .row,
.card.total-provider-card .card-body .row,
.card.total-revenue .card-body .row {
    position: relative !important;
    margin: 0 !important;
}

.card.total-booking-card .card-body .row > .col,
.card.total-service-card .card-body .row > .col,
.card.total-provider-card .card-body .row > .col,
.card.total-revenue .card-body .row > .col {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-right: 3rem !important;
}

.card.total-booking-card .card-body .row > .col-auto,
.card.total-service-card .card-body .row > .col-auto,
.card.total-provider-card .card-body .row > .col-auto,
.card.total-revenue .card-body .row > .col-auto {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    padding: 0 !important;
}

/* Dashboard Row Spacing - Improved vertical rhythm */
.dashboard .row > [class*="col-"] {
    margin-bottom: 1.5rem !important;
}

/* Dashboard main container - Better vertical flow */
.container-fluid {
    padding-top: 1rem !important;
}

/* Section grouping - Visual rhythm */
.container-fluid > .row {
    margin-bottom: 0 !important;
}

/* Bottom section spacing - Clear separation */
.container-fluid > .row:last-of-type {
    margin-bottom: 2rem !important;
}

/* Dashboard Container - Improved vertical flow */
.container-fluid > .row:first-of-type {
    margin-bottom: 0 !important;
}

/* Alert banner spacing - Connected to header */
.container-fluid .row .col-md-12:has(.alert-warning) {
    margin-bottom: 1.5rem !important;
}

/* KPI Cards Row - Primary focus area */
.container-fluid .row .col-md-12:has(.row:has(.total-booking-card)) {
    margin-bottom: 1.25rem !important;
}

/* Chart row - Connected to KPI cards above */
.container-fluid .row .col-md-12:has(.card:has(#monthly-revenue)) {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
}

/* Smooth visual flow: Alert → KPIs → Chart */
.container-fluid .row .col-md-12:has(.alert-warning) + .col-md-12:has(.row:has(.total-booking-card)) {
    margin-top: 0 !important;
}

/* KPI cards inner row - Tight grouping */
.row:has(.total-booking-card) {
    margin-bottom: 0 !important;
    gap: 1rem !important;
}

/* Chart card - Connected spacing */
.card:has(#monthly-revenue) {
    margin-top: 0 !important;
}

/* Page Title - Enhanced visual hierarchy with better flow */
.page-title-wrap {
    margin-bottom: 1.75rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.page-title-wrap h2.page-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0 !important;
}

/* Chart Card - Modern, connected to KPIs above */
.card:has(#monthly-revenue) {
    border-radius: 12px !important;
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .card:has(#monthly-revenue) {
    background: #2A2538 !important;
    border-color: rgba(58, 53, 69, 0.8) !important;
}

.card:has(#monthly-revenue):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}

.card:has(#monthly-revenue) .card-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
}

.card:has(#monthly-revenue) .card-header,
.card:has(#monthly-revenue) h4 {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
}

[data-bs-theme="dark"] .card:has(#monthly-revenue) h4 {
    color: #E2E8F0 !important;
}

.card:has(#monthly-revenue) .d-flex.justify-content-between {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

[data-bs-theme="dark"] .card:has(#monthly-revenue) .d-flex.justify-content-between {
    border-bottom-color: rgba(58, 53, 69, 0.6) !important;
}

/* Recent Lists - Modern styling with improved spacing */
.card.top-providers,
.card.recent-activities {
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
}

[data-bs-theme="dark"] .card.top-providers,
[data-bs-theme="dark"] .card.recent-activities {
    background: #2A2538 !important;
    border-color: rgba(58, 53, 69, 0.8) !important;
}

.card.top-providers .card-header,
.card.recent-activities .card-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .card.top-providers .card-header,
[data-bs-theme="dark"] .card.recent-activities .card-header {
    border-bottom-color: rgba(58, 53, 69, 0.6) !important;
}

.card.top-providers .card-header h4,
.card.recent-activities .card-header h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

.card.top-providers .card-body,
.card.recent-activities .card-body {
    padding: 1.25rem 1.5rem 1.5rem 1.5rem !important;
}

/* Common List - Increase spacing, reduce density */
.common-list {
    padding: 0 !important;
    margin: 0 !important;
}

.common-list li {
    padding: 1.25rem 0 !important;
    margin-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(233, 229, 255, 0.3) !important;
    transition: all 0.2s ease !important;
}

.common-list li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.common-list li:hover {
    padding-left: 0.5rem !important;
    background: rgba(167, 139, 250, 0.03) !important;
    border-radius: 12px !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* List Media - More spacing */
.common-list li .media {
    gap: 1rem !important;
}

.common-list li .media .h-avatar {
    flex-shrink: 0 !important;
}

.common-list li .media-body h5 {
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.common-list li .media-body span {
    font-size: 0.875rem !important;
    color: var(--text-light-color) !important;
    opacity: 0.8 !important;
}

/* Badge in lists - standardized styling */
.common-list li .badge {
    padding: 0.45rem 0.9rem !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid transparent !important;
}

/* Avatar sizing - Slightly larger for better visibility */
.common-list .avatar-50 {
    width: 50px !important;
    height: 50px !important;
}

/* Card Headers - More breathing room */
.card-header {
    padding: 1.75rem 2rem 1.25rem 2rem !important;
}

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

/* General Card Body - Increased padding */
.card-body {
    padding: 2rem !important;
}

@media (max-width: 991px) {
    .card-body {
        padding: 1.5rem !important;
    }
    
    .card-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem !important;
    }
}

/* Reduce visual density in dashboard sections */
.dashboard .row {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

.dashboard .row > [class*="col-"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Chart container - More spacious, reduced dominance */
/* Chart Container - Clean, minimal styling */
#monthly-revenue {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
}

.custom-chart {
    padding: 0.25rem 0 !important;
    margin: 0 !important;
}

/* Chart area - reduce visual noise */
#monthly-revenue .apexcharts-canvas {
    margin: 0 auto !important;
}

/* Chart toolbar - subtle styling */
#monthly-revenue .apexcharts-toolbar {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.card:has(#monthly-revenue):hover .apexcharts-toolbar {
    opacity: 1 !important;
}

/* Link styling in headers - Softer */
.btn-link,
.btn-link-hover {
    font-size: 0.9rem !important;
    color: var(--c1) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-link:hover,
.btn-link-hover:hover {
    color: var(--c2) !important;
    text-decoration: underline !important;
}

/* Rating display - More subtle */
.common-list_rating {
    font-size: 0.875rem !important;
    color: var(--text-light-color) !important;
    opacity: 0.9 !important;
}

.common-list_rating i {
    color: #FFD700 !important;
    font-size: 0.9rem !important;
}

/* Soft form controls */
.form-control,
.form-select {
    border-radius: 10px !important;
    border-color: rgba(233, 229, 255, 0.8) !important;
    transition: all 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1) !important;
}

/* Soft checkbox and radio styling */
.form-check-input:checked {
    background-color: #A78BFA !important;
    border-color: #A78BFA !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1) !important;
}

/* Soft switch styling */
.form-switch .form-check-input:checked {
    background-color: #A78BFA !important;
}

/* ============================================
   TABLE UI IMPROVEMENTS - CELEBRATION THEME
   ============================================ */

/* Base table styling - refined borders */
.table {
    border-color: rgba(226, 232, 240, 0.8) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* Table header - modern contrast and refined colors */
.table thead th {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    border-bottom: 2px solid rgba(226, 232, 240, 0.8) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid rgba(226, 232, 240, 0.6) !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: none !important;
    letter-spacing: 0.015em !important;
    padding: 1rem 0.875rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.table thead th:first-child {
    border-left: none !important;
    padding-left: 1.25rem !important;
}

.table thead th:last-child {
    border-right: none !important;
    padding-right: 1.25rem !important;
}

[data-bs-theme="dark"] .table thead th {
    background: var(--dm-surface-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border-strong) !important;
    border-right-color: var(--dm-border) !important;
    font-weight: 600 !important;
}

/* Table body - refined borders and text colors */
.table tbody td {
    border-color: rgba(226, 232, 240, 0.5) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
    border-left: none !important;
    border-right: 1px solid rgba(226, 232, 240, 0.5) !important;
    border-bottom: none !important;
    padding: 1rem 0.875rem !important;
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.table tbody td:first-child {
    padding-left: 1.25rem !important;
}

.table tbody td:last-child {
    padding-right: 1.25rem !important;
    border-right: none !important;
}

[data-bs-theme="dark"] .table tbody td {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    background-color: transparent !important;
}

/* Table rows - refined spacing and borders */
.table tbody tr {
    transition: all 0.2s ease !important;
    background-color: transparent !important;
}

.table tbody tr:first-child td {
    border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
}

.table tbody tr:last-child td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
}

/* Row hover state - refined modern styling */
.table tbody tr:hover {
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.6) 0%, rgba(241, 245, 249, 0.4) 100%) !important;
    transform: translateX(2px) !important;
    box-shadow: -2px 0 8px rgba(167, 139, 250, 0.08) !important;
}

.table tbody tr:hover td {
    border-color: rgba(226, 232, 240, 0.8) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background: var(--dm-surface-hover) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover td {
    border-color: var(--dm-border-hover) !important;
    color: var(--dm-text-primary) !important;
}

/* Row focus state - accessibility */
.table tbody tr:focus-within {
    outline: 2px solid rgba(167, 139, 250, 0.4) !important;
    outline-offset: -2px !important;
    background: rgba(167, 139, 250, 0.1) !important;
}

/* Checkbox alignment - improved */
.table tbody td:has(input[type="checkbox"]),
.table thead th:has(input[type="checkbox"]) {
    text-align: center !important;
    vertical-align: middle !important;
    width: 50px !important;
    padding: 1rem 0.5rem !important;
}

.table input[type="checkbox"],
.table .form-check-input {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.table input[type="checkbox"]:checked,
.table .form-check-input:checked {
    background-color: #A78BFA !important;
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15) !important;
}

.table input[type="checkbox"]:hover,
.table .form-check-input:hover {
    border-color: #A78BFA !important;
    transform: scale(1.05) !important;
}

.table input[type="checkbox"]:focus,
.table .form-check-input:focus {
    outline: 2px solid rgba(167, 139, 250, 0.5) !important;
    outline-offset: 2px !important;
    border-color: #A78BFA !important;
}

/* Status badge styling in tables - standardized */
.table .badge {
    display: inline-block !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    margin: 0.125rem 0.25rem !important;
    letter-spacing: 0.01em !important;
    border: 1px solid transparent !important;
}

/* Action column alignment */
.table tbody td.text-end,
.table thead th.text-end {
    text-align: right !important;
    padding-right: 1.25rem !important;
}

.table tbody td.text-end .btn-group,
.table tbody td.text-end .btn {
    margin-left: 0.25rem !important;
    margin-right: 0 !important;
}

.table tbody td.text-end .btn:first-child {
    margin-left: 0 !important;
}

/* Border and divider refinement - modern borders */
.table-responsive {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

[data-bs-theme="dark"] .table-responsive {
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
}

.table-responsive .table {
    margin-bottom: 0 !important;
    border: none !important;
}

/* Striped table rows - refined modern styling */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(248, 250, 252, 0.4) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--dm-bg-primary) !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: transparent !important;
}

/* Table borders - modern refined styling */
.table-bordered {
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.table-bordered thead th,
.table-bordered tbody td {
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

[data-bs-theme="dark"] .table-bordered {
    border-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .table-bordered thead th,
[data-bs-theme="dark"] .table-bordered tbody td {
    border-color: var(--dm-border) !important;
}

/* Empty table state - removed duplicate, see comprehensive styling below */

/* Link styling in tables */
.table a.btn-link,
.table a.btn-link-hover {
    color: #6D28D9 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.table a.btn-link:hover,
.table a.btn-link-hover:hover {
    color: #8B5CF6 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 92, 246, 0.3) !important;
}

/* Icon alignment in tables */
.table td i,
.table th i {
    vertical-align: middle !important;
    margin: 0 0.25rem !important;
}

/* Avatar/images in tables */
.table td img,
.table td .avatar {
    vertical-align: middle !important;
    margin-right: 0.75rem !important;
}

/* Responsive table improvements */
@media (max-width: 991px) {
    .table thead th,
    .table tbody td {
        padding: 0.875rem 0.625rem !important;
        font-size: 0.85rem !important;
    }
    
    .table thead th:first-child,
    .table tbody td:first-child {
        padding-left: 0.875rem !important;
    }
    
    .table thead th:last-child,
    .table tbody td:last-child {
        padding-right: 0.875rem !important;
    }
}

/* Modern divider lines */
hr {
    border-color: rgba(226, 232, 240, 0.8) !important;
    opacity: 1 !important;
}

/* Soft breadcrumb */
.breadcrumb {
    background: rgba(167, 139, 250, 0.04) !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
}

.breadcrumb-item a {
    color: #A78BFA !important;
}

.breadcrumb-item.active {
    color: #7C7C8A !important;
}

/* ============================================
   CELEBRATION LOGO STYLING
   ============================================ */

/* Celebration logo icon - maintains dimensions */
.celebration-logo {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    color: var(--c1) !important;
    transition: all 0.3s ease !important;
}

/* Logo hover effect */
.header-logo:hover .celebration-logo {
    color: var(--c2) !important;
    transform: scale(1.05) !important;
}

/* Sidebar logo container adjustments */
.iq-sidebar-logo .header-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Ensure logo doesn't cause layout shifts */
.iq-sidebar-logo .celebration-logo {
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

/* Dark mode logo adjustments */
[data-bs-theme="dark"] .celebration-logo {
    color: var(--c1) !important;
    opacity: 0.95 !important;
}

[data-bs-theme="dark"] .header-logo:hover .celebration-logo {
    color: var(--c2) !important;
    opacity: 1 !important;
}

/* ============================================
   CELEBRATION-ORIENTED HEADINGS & TYPOGRAPHY
   ============================================ */

/* Page titles - Celebration-themed styling */
.page-title,
h1.page-title,
h2.page-title {
    background: linear-gradient(135deg, #6D28D9 0%, #A78BFA 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1rem !important;
}

[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] h1.page-title,
[data-bs-theme="dark"] h2.page-title {
    background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   MODERN TYPOGRAPHY HIERARCHY
   ============================================ */

/* Main headings - Modern admin dashboard hierarchy */
h1, .h1 {
    color: #1E293B !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
}

h2, .h2 {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    margin-bottom: 1.25rem !important;
}

h3, .h3 {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
}

h4, .h4 {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

h5, .h5 {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

h6, .h6 {
    color: #64748B !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

/* Dark mode headings */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] .h1 {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] h2, [data-bs-theme="dark"] .h2 {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] h3, [data-bs-theme="dark"] .h3 {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] h4, [data-bs-theme="dark"] .h4 {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] h5, [data-bs-theme="dark"] .h5 {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] h6, [data-bs-theme="dark"] .h6 {
    color: var(--dm-text-secondary) !important;
}

/* Card titles - Modern admin styling */
.card-header h4,
.card-header h5,
.card-title {
    color: #334155 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
}

[data-bs-theme="dark"] .card-header h4,
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-title {
    color: var(--dm-text-primary) !important;
}

/* Section headings with celebration accent */
.section-title,
.page-section-title {
    position: relative !important;
    padding-left: 1rem !important;
}

.section-title::before,
.page-section-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 80% !important;
    background: linear-gradient(180deg, #A78BFA 0%, #C4B5FD 100%) !important;
    border-radius: 2px !important;
}

/* ============================================
   REDUCE GENERIC ADMIN LOOK - CELEBRATION STYLE
   ============================================ */

/* Card headers - Modern neutral styling */
.card-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: rgba(248, 250, 252, 0.5) !important;
    padding: 1.25rem 1.5rem !important;
}

[data-bs-theme="dark"] .card-header {
    border-bottom: 1px solid rgba(58, 53, 69, 0.8) !important;
    background: rgba(30, 27, 46, 0.5) !important;
}

/* Celebration-themed table headers - refined (duplicate removed, using main definition above) */

/* Form labels - Modern admin styling */
.form-label,
label {
    color: #475569 !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] label {
    color: var(--dm-text-secondary) !important;
}

/* Celebration-themed buttons - remove generic admin styling */
.btn-secondary {
    background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2) !important;
    border-radius: 12px !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%) !important;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important;
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25) !important;
    border-radius: 12px !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.35) !important;
    transform: translateY(-2px);
}

/* Celebration-themed alerts with emotional clarity */
.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #059669 !important;
    border-left: 5px solid #10B981 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

.alert-info {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
    color: #6D28D9 !important;
    border-left: 5px solid #A78BFA !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.15) !important;
}

/* Modern System Notice Banner - Subtle, informative styling */
.alert-warning {
    background: rgba(248, 250, 252, 0.8) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-left: 3px solid rgba(167, 139, 250, 0.4) !important;
    color: #475569 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.2s ease !important;
}

.alert-warning:hover {
    border-left-color: rgba(167, 139, 250, 0.6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .alert-warning {
    background: rgba(30, 27, 46, 0.6) !important;
    border-color: rgba(58, 53, 69, 0.8) !important;
    border-left-color: rgba(167, 139, 250, 0.5) !important;
    color: #E2E8F0 !important;
}

.alert-warning .h5 {
    margin-bottom: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: inherit !important;
}

.alert-warning .d-flex {
    align-items: center !important;
    gap: 0.625rem !important;
    flex-wrap: wrap !important;
}

.alert-warning i.fas.fa-info-circle {
    font-size: 1rem !important;
    opacity: 0.7 !important;
    color: #64748B !important;
    flex-shrink: 0 !important;
}

[data-bs-theme="dark"] .alert-warning i.fas.fa-info-circle {
    color: var(--dm-text-muted) !important;
}

.alert-warning a.text-primary {
    font-weight: 500 !important;
    color: #6D28D9 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(109, 40, 217, 0.3) !important;
    transition: all 0.2s ease !important;
    padding-bottom: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

.alert-warning a.text-primary:hover {
    color: #8B5CF6 !important;
    border-bottom-color: rgba(139, 92, 246, 0.5) !important;
}

.alert-warning a.text-primary i.fas.fa-external-link-alt {
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.alert-warning a.text-primary:hover i.fas.fa-external-link-alt {
    opacity: 1 !important;
}

[data-bs-theme="dark"] .alert-warning a.text-primary {
    color: var(--dm-accent-purple) !important;
    border-bottom-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .alert-warning a.text-primary:hover {
    color: var(--dm-accent-purple-hover) !important;
    border-bottom-color: var(--dm-border-hover) !important;
}

/* Remove aggressive border-warning class styling if present */
.alert-warning.border.border-warning {
    border-color: rgba(226, 232, 240, 0.9) !important;
    border-left-color: rgba(167, 139, 250, 0.4) !important;
}

.alert-warning.text-warning {
    color: #475569 !important;
}

[data-bs-theme="dark"] .alert-warning.text-warning {
    color: var(--dm-text-primary) !important;
}

/* Softer breadcrumbs - celebration style */
.breadcrumb-item + .breadcrumb-item::before {
    content: "→" !important;
    color: #A78BFA !important;
    font-weight: 600 !important;
    padding: 0 0.5rem !important;
}

/* Modern admin separators - Subtle dividers */
hr {
    border: none !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    margin: 1.5rem 0 !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] hr {
    border-top-color: var(--dm-border) !important;
}

/* Celebration-themed stat/metric cards */
.stat-card,
.metric-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 249, 255, 0.7) 100%) !important;
    border: 1px solid rgba(233, 229, 255, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(167, 139, 250, 0.08) !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover,
.metric-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.15) !important;
}

/* Standardized subtle status badges - for admin dashboard tables */
.badge.bg-success-subtle,
.badge.text-success.bg-success-subtle {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    font-weight: 600 !important;
}

.badge.bg-warning-subtle,
.badge.text-warning.bg-warning-subtle {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #B45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    font-weight: 600 !important;
}

.badge.bg-danger-subtle,
.badge.text-danger.bg-danger-subtle {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    font-weight: 600 !important;
}

.badge.bg-info-subtle,
.badge.text-info.bg-info-subtle {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #1E40AF !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    font-weight: 600 !important;
}

.badge.bg-primary-subtle,
.badge.text-primary.bg-primary-subtle {
    background: rgba(167, 139, 250, 0.12) !important;
    color: #6D28D9 !important;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
    font-weight: 600 !important;
}

.badge.bg-dark-subtle,
.badge.text-dark.bg-dark-subtle {
    background: rgba(75, 85, 99, 0.12) !important;
    color: #374151 !important;
    border: 1px solid rgba(75, 85, 99, 0.25) !important;
    font-weight: 600 !important;
}

.badge.bg-light-subtle,
.badge.text-dark.bg-light-subtle {
    background: rgba(243, 244, 246, 0.8) !important;
    color: #4B5563 !important;
    border: 1px solid rgba(209, 213, 219, 0.5) !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .badge.bg-success-subtle,
[data-bs-theme="dark"] .badge.text-success.bg-success-subtle {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6EE7B7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-warning-subtle,
[data-bs-theme="dark"] .badge.text-warning.bg-warning-subtle {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #FCD34D !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-danger-subtle,
[data-bs-theme="dark"] .badge.text-danger.bg-danger-subtle {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #FCA5A5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-info-subtle,
[data-bs-theme="dark"] .badge.text-info.bg-info-subtle {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93C5FD !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.text-primary.bg-primary-subtle {
    background: rgba(167, 139, 250, 0.2) !important;
    color: #C4B5FD !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
}

/* Celebration-themed text colors */
.text-primary {
    color: #6D28D9 !important;
}

.text-success {
    color: #059669 !important;
}

.text-warning {
    color: #92400E !important;
}

.text-danger {
    color: #DC2626 !important;
}

.text-info {
    color: #6D28D9 !important;
}

/* ============================================
   EMPTY STATES - CELEBRATION THEME
   ============================================ */

/* ============================================
   DASHBOARD MODERNIZATION - COMPREHENSIVE UI IMPROVEMENTS
   ============================================
   Modernize dashboard while preserving all functionality
   Focus: Alignment, spacing, grid system, typography
   ============================================ */

/* ============================================
   MODERN DASHBOARD STAT CARDS - EQUAL HEIGHTS & ALIGNMENT
   ============================================
   Ensure all KPI cards have equal heights and consistent alignment
   ============================================ */

/* KPI Cards Container - Force equal height using flexbox */
.col-md-12:has(.row:has(.total-booking-card)) .row,
.row:has(.total-booking-card),
.row:has(.total-service-card),
.row:has(.total-revenue) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

/* KPI Card Columns - Equal height and consistent spacing */
.col-md-12:has(.row:has(.total-booking-card)) .row > [class*="col-lg-3"],
.row:has(.total-booking-card) > [class*="col-lg-3"],
.row:has(.total-service-card) > [class*="col-lg-3"],
.row:has(.total-revenue) > [class*="col-lg-3"] {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* KPI Card Links/Wrappers - Fill column height */
.col-md-12:has(.row:has(.total-booking-card)) .row > [class*="col-lg-3"] > a,
.row:has(.total-booking-card) > [class*="col-lg-3"] > a,
.row:has(.total-revenue) > [class*="col-lg-3"] > a,
.col-md-12:has(.row:has(.total-booking-card)) .row > [class*="col-lg-3"] > div:not(.card),
.row:has(.total-service-card) > [class*="col-lg-3"] > div:not(.card) {
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* KPI Cards - Fill wrapper and maintain equal height */
.col-md-12:has(.row:has(.total-booking-card)) .row > [class*="col-lg-3"] > a > .card,
.row:has(.total-booking-card) > [class*="col-lg-3"] > a > .card,
.row:has(.total-revenue) > [class*="col-lg-3"] > a > .card,
.col-md-12:has(.row:has(.total-booking-card)) .row > [class*="col-lg-3"] > div > .card,
.row:has(.total-service-card) > [class*="col-lg-3"] > div > .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 140px !important;
    margin: 0 !important;
}

/* KPI Card Body - Consistent padding and alignment */
.card.total-booking-card .card-body,
.card.total-service-card .card-body,
.card.total-provider-card .card-body,
.card.total-revenue .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 140px !important;
    padding: 1.5rem 1.5rem 1.25rem 1.5rem !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: relative !important;
}

/* KPI Card Content Row - Proper alignment */
.card.total-booking-card .card-body .row,
.card.total-service-card .card-body .row,
.card.total-provider-card .card-body .row,
.card.total-revenue .card-body .row {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
}

/* KPI Card Content Column - Consistent spacing for icon */
.card.total-booking-card .card-body .row > .col,
.card.total-service-card .card-body .row > .col,
.card.total-provider-card .card-body .row > .col,
.card.total-revenue .card-body .row > .col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 3.5rem !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* KPI Card Icon Column - Absolute positioning for consistent placement */
.card.total-booking-card .card-body .row > .col-auto,
.card.total-service-card .card-body .row > .col-auto,
.card.total-provider-card .card-body .row > .col-auto,
.card.total-revenue .card-body .row > .col-auto {
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
}

/* KPI Card Value and Label - Consistent alignment */
.card.total-booking-card .card-body .row > .col > div,
.card.total-service-card .card-body .row > .col > div,
.card.total-provider-card .card-body .row > .col > div,
.card.total-revenue .card-body .row > .col > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* KPI Card Value (h4) - Consistent typography */
.card.total-booking-card h4.booking-text,
.card.total-service-card h4.booking-text,
.card.total-provider-card h4.booking-text,
.card.total-revenue h4.booking-text {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.1 !important;
    width: 100% !important;
}

/* KPI Card Label (p) - Consistent typography */
.card.total-booking-card p.booking-text,
.card.total-service-card p.booking-text,
.card.total-provider-card p.booking-text,
.card.total-revenue p.booking-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

/* ============================================
   MODERN SECTION LAYOUT - RESPONSIVE 12-COLUMN GRID
   ============================================
   Recent Providers, Customers, Upcoming Bookings
   ============================================ */

/* Section Cards Row - Responsive grid with consistent spacing */
/* Target the row that contains the three section cards */
.container-fluid > .row:has(.col-xl-4:has(.top-providers)),
.container-fluid > .row:has(.col-xl-4:has(.recent-activities)),
.row:has(.col-xl-4:has(.top-providers)),
.row:has(.col-xl-4:has(.recent-activities)) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Direct targeting for better browser compatibility */
/* Ensure three section cards align in same row - Bootstrap should handle this, but enforce it */
@media (min-width: 1200px) {
    /* XL screens: 3 cards per row (33.33% each) */
    .col-xl-4.col-sm-6:has(.top-providers),
    .col-xl-4.col-sm-6:has(.recent-activities) {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (max-width: 1199px) and (min-width: 576px) {
    /* SM-MD screens: 2 cards per row (50% each) */
    .col-xl-4.col-sm-6:has(.top-providers),
    .col-xl-4.col-sm-6:has(.recent-activities) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Note: Bootstrap's default .col-xl-4 already handles 33.33% width at xl breakpoint */
/* We only need to ensure flex display for equal heights */

/* Section Card Columns - Equal heights */
/* Ensure all three cards align properly - Let Bootstrap handle width */
.col-xl-4:has(.top-providers),
.col-xl-4:has(.recent-activities) {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 1.5rem !important;
}

/* Small screen columns */
.col-sm-6:has(.top-providers),
.col-sm-6:has(.recent-activities) {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 1.5rem !important;
}

/* Section Cards - Fill column height */
.col-xl-4:has(.top-providers) > .card,
.col-xl-4:has(.recent-activities) > .card,
.col-sm-6:has(.top-providers) > .card,
.col-sm-6:has(.recent-activities) > .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    margin-bottom: 0 !important;
}

/* Section Card Bodies - Consistent height */
.card.top-providers .card-body,
.card.recent-activities .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 200px !important;
}

/* ============================================
   MODERN TYPOGRAPHY - ENHANCED HIERARCHY
   ============================================
   ============================================ */

/* Page Title - Modern, bold hierarchy */
.page-title-wrap h2.page-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .page-title-wrap h2.page-title {
    color: var(--dm-text-primary) !important;
}

/* Section Headers (H4) - Clear hierarchy */
.card.top-providers .card-header h4,
.card.recent-activities .card-header h4,
.card:has(#monthly-revenue) h4 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .card.top-providers .card-header h4,
[data-bs-theme="dark"] .card.recent-activities .card-header h4,
[data-bs-theme="dark"] .card:has(#monthly-revenue) h4 {
    color: var(--dm-text-primary) !important;
}

/* List Item Headers (H5) - Readable hierarchy */
.common-list li .media-body h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
    margin-bottom: 0.375rem !important;
}

[data-bs-theme="dark"] .common-list li .media-body h5 {
    color: var(--dm-text-primary) !important;
}

/* Body Text - Improved readability */
.common-list li .media-body span,
.common-list li .media-body {
    font-size: 0.875rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

[data-bs-theme="dark"] .common-list li .media-body span,
[data-bs-theme="dark"] .common-list li .media-body {
    color: var(--dm-text-secondary) !important;
}

/* ============================================
   MODERN TABLE STYLING - ENHANCED CLARITY
   ============================================
   ============================================ */

/* Table Row Spacing - Improved readability */
.table tbody tr {
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.table tbody td {
    padding: 1.125rem 0.875rem !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
}

/* Table Header Clarity - Enhanced contrast */
.table thead th {
    padding: 1.125rem 0.875rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important;
    background: rgba(248, 250, 252, 0.8) !important;
    border-bottom: 2px solid rgba(226, 232, 240, 0.8) !important;
}

[data-bs-theme="dark"] .table thead th {
    color: var(--dm-text-primary) !important;
    background: var(--dm-surface-elevated) !important;
    border-bottom-color: var(--dm-border-strong) !important;
}

/* Table Row Hover - Subtle interaction */
.table tbody tr:hover {
    background: rgba(248, 250, 252, 0.5) !important;
    transform: translateX(1px) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background: var(--dm-surface-hover) !important;
}

/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================
   ============================================ */

/* Mobile: Stack KPI cards */
@media (max-width: 991px) {
    .row:has(.total-booking-card) > [class*="col-lg-3"],
    .row:has(.total-service-card) > [class*="col-lg-3"],
    .row:has(.total-revenue) > [class*="col-lg-3"] {
        margin-bottom: 1rem !important;
    }
    
    .card.total-booking-card,
    .card.total-service-card,
    .card.total-provider-card,
    .card.total-revenue {
        min-height: 120px !important;
    }
    
    .card.total-booking-card .card-body,
    .card.total-service-card .card-body,
    .card.total-provider-card .card-body,
    .card.total-revenue .card-body {
        min-height: 120px !important;
        padding: 1.25rem 1.25rem 1rem 1.25rem !important;
    }
    
    .card.total-booking-card .card-body .row > .col {
        padding-right: 3rem !important;
    }
    
    .iq-card-icon {
        top: 1.25rem !important;
        right: 1.25rem !important;
    }
}

/* Tablet: Adjust section card spacing */
@media (max-width: 1199px) and (min-width: 992px) {
    .col-xl-4:has(.top-providers),
    .col-xl-4:has(.recent-activities) {
        margin-bottom: 1.5rem !important;
    }
}

/* ============================================
   DATATABLES EMPTY STATE - COLSPAN FIX
   ============================================
   
   PROBLEM:
   - Using display: flex on <td> breaks table layout
   - Table cells MUST use display: table-cell for colspan to work
   - Flex display prevents the cell from spanning all columns
   
   SOLUTION:
   - Use display: table-cell (not flex) on the <td> element
   - Use traditional table-cell centering methods
   - Ensure colspan attribute works properly
   - Use inner wrapper for flexbox if needed for content layout
   
   ============================================ */

/* DataTables empty state - FIXED: proper table-cell display for colspan */
.dataTables_empty,
.table tbody tr td.dataTables_empty {
    /* CRITICAL: Must use table-cell display for colspan to work */
    display: table-cell !important;
    
    /* Ensure cell spans all columns - colspan is set by DataTables, we just need proper display */
    text-align: center !important;
    vertical-align: middle !important;
    
    /* Styling */
    padding: 4rem 2rem !important;
    color: #64748B !important;
    font-size: 0.9375rem !important;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.6) 0%, rgba(241, 245, 249, 0.4) 100%) !important;
    border-radius: 16px !important;
    border: 1px dashed rgba(226, 232, 240, 0.6) !important;
    position: relative !important;
    min-height: 200px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    
    /* Remove any width constraints that might prevent spanning */
    width: auto !important;
    max-width: none !important;
}

/* Decorative icon using SVG - positioned above text (works with table-cell display) */
.dataTables_empty::before,
.table tbody tr td.dataTables_empty::before {
    content: '' !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 1.25rem auto !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A78BFA' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.593m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z' /%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.4 !important;
}

/* Style the actual text content from DataTables - ensure proper alignment */
.dataTables_empty,
.table tbody tr td.dataTables_empty {
    color: #475569 !important;
}

/* Ensure text content is properly aligned and centered */
.dataTables_empty > *,
.table tbody tr td.dataTables_empty > * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* CRITICAL FIX: Ensure DataTables empty state spans ALL columns */
/* DataTables sets colspan attribute, but we must ensure table-cell display */
table.dataTable tbody tr td.dataTables_empty {
    /* Must be table-cell for colspan to work */
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 4rem 2rem !important;
}

/* Ensure empty state works for all row types */
table.dataTable tbody tr:only-child td.dataTables_empty,
table.dataTable tbody tr.odd td.dataTables_empty,
table.dataTable tbody tr.even td.dataTables_empty {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Remove any width constraints that prevent spanning */
table.dataTable tbody tr td.dataTables_empty[colspan] {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Ensure the empty state row doesn't have column-like constraints */
table.dataTable tbody tr:has(td.dataTables_empty) {
    display: table-row !important;
}

/* Prevent any wrapper from acting like a column */
table.dataTable tbody tr:has(td.dataTables_empty) td.dataTables_empty {
    /* Remove any flex/grid that breaks table layout */
    display: table-cell !important;
}

/* Additional global fix: Ensure ALL DataTables empty states use table-cell */
.dataTable tbody td.dataTables_empty,
table.dataTable tbody td.dataTables_empty,
.dataTables_wrapper table tbody td.dataTables_empty {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Override any flex/grid display that might be applied elsewhere */
.dataTables_empty[style*="display: flex"],
.dataTables_empty[style*="display:grid"] {
    display: table-cell !important;
}

/* No data available messages - refined modern styling */
.no-data,
.no-data-available,
.empty-state {
    padding: 4rem 2rem !important;
    text-align: center !important;
    color: #64748B !important;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.6) 0%, rgba(241, 245, 249, 0.4) 100%) !important;
    border-radius: 16px !important;
    border: 1px dashed rgba(226, 232, 240, 0.6) !important;
    margin: 2rem 0 !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Decorative icon for no-data states */
.no-data::before,
.no-data-available::before,
.empty-state::before {
    content: '' !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 1.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A78BFA' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.593m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z' /%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
}

.no-data h4,
.no-data-available h4,
.empty-state h4 {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
}

.no-data p,
.no-data-available p,
.empty-state p {
    color: #64748B !important;
    font-size: 0.9375rem !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}

/* Dark mode support for empty states */
[data-bs-theme="dark"] .dataTables_empty,
[data-bs-theme="dark"] .table tbody tr td.dataTables_empty {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

[data-bs-theme="dark"] .dataTables_empty::before,
[data-bs-theme="dark"] .table tbody tr td.dataTables_empty::before {
    opacity: 0.5 !important;
    color: var(--dm-text-muted) !important;
}

[data-bs-theme="dark"] .dataTables_empty::after {
    color: var(--dm-text-secondary) !important;
}

[data-bs-theme="dark"] .no-data,
[data-bs-theme="dark"] .no-data-available,
[data-bs-theme="dark"] .empty-state {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

[data-bs-theme="dark"] .no-data h4,
[data-bs-theme="dark"] .no-data-available h4,
[data-bs-theme="dark"] .empty-state h4 {
    color: var(--dm-text-secondary) !important;
}

[data-bs-theme="dark"] .no-data p,
[data-bs-theme="dark"] .no-data-available p,
[data-bs-theme="dark"] .empty-state p {
    color: #9CA3AF !important;
}

/* ============================================
   LOADING STATES - CELEBRATION THEME
   ============================================ */

/* DataTables processing overlay */
.dataTables_processing {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.95) 0%, rgba(196, 181, 253, 0.95) 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1.5rem 2rem !important;
    backdrop-filter: blur(10px) !important;
}

.dataTables_processing::before {
    content: '✨ ' !important;
    margin-right: 0.5rem !important;
}

/* Loading spinners - celebration colors */
.spinner-border-primary {
    border-color: #A78BFA !important;
    border-right-color: transparent !important;
}

.spinner-grow-primary {
    background-color: #A78BFA !important;
}

/* Processing text styling */
.processing,
.loading-text {
    color: #6D28D9 !important;
    font-weight: 500 !important;
    font-style: italic !important;
}

.processing::after {
    content: '...' !important;
    animation: dots 1.5s steps(4, end) infinite !important;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ============================================
   ENHANCED VISUAL HIERARCHY
   ============================================ */

/* Page title wrapper - refined borders */
.page-title-wrap {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* Card body spacing improvements */
.card-body {
    padding: 2rem !important;
}

@media (max-width: 991px) {
    .card-body {
        padding: 1.5rem !important;
    }
}

/* Form group spacing */
.form-group,
.mb-3 {
    margin-bottom: 1.5rem !important;
}

/* Input group spacing - refined colors */
.input-group {
    margin-bottom: 1rem !important;
}

.input-group-text {
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    color: #475569 !important;
    border-radius: 10px 0 0 10px !important;
}

/* Select2 styling - refined borders */
.select2-container--default .select2-selection--single {
    border-color: rgba(226, 232, 240, 0.9) !important;
    border-radius: 10px !important;
    height: 38px !important;
    line-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #334155 !important;
    line-height: 38px !important;
    padding-left: 12px !important;
}

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

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1) !important;
}

/* ============================================
   ENHANCED HOVER & FOCUS STATES
   ============================================ */

/* Table row hover - celebration feel */
.table tbody tr {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.table tbody tr:hover {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.06) 0%, rgba(196, 181, 253, 0.03) 100%) !important;
    transform: translateX(2px) !important;
    box-shadow: -2px 0 8px rgba(167, 139, 250, 0.1) !important;
}

/* Card hover enhancements */
.card:hover .card-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(250, 249, 255, 0.5) 100%) !important;
}

[data-bs-theme="dark"] .card:hover .card-header {
    background: linear-gradient(180deg, rgba(42, 37, 56, 0.7) 0%, rgba(30, 27, 46, 0.5) 100%) !important;
}

/* Link hover states */
a:not(.btn):hover {
    color: #8B5CF6 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(139, 92, 246, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* Button focus states - accessibility */
.btn:focus-visible {
    outline: 3px solid rgba(167, 139, 250, 0.5) !important;
    outline-offset: 2px !important;
    border-radius: 12px !important;
}

/* Input focus states - enhanced */
.form-control:focus,
.form-select:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
    transition: all 0.2s ease !important;
}

/* ============================================
   IMPROVED SPACING & TYPOGRAPHY
   ============================================ */

/* Better spacing for action buttons */
.btn-group .btn {
    margin: 0 2px !important;
}

.btn-group .btn:first-child {
    margin-left: 0 !important;
}

.btn-group .btn:last-child {
    margin-right: 0 !important;
}

/* Improved spacing for table actions */
.table .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
}

/* Better spacing for helper text */
.text-muted.small {
    line-height: 1.6 !important;
    margin-top: 0.25rem !important;
}

/* Improved spacing for badges in tables */
.table .badge {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
    margin: 0 2px !important;
}

/* Better spacing for icons */
i.fas,
i.far,
i.fal,
svg {
    margin: 0 0.25rem !important;
}

/* Improved spacing for flex containers */
.d-flex.gap-2 {
    gap: 0.75rem !important;
}

.d-flex.gap-3 {
    gap: 1rem !important;
}

/* ============================================
   DECORATIVE CELEBRATION ELEMENTS
   ============================================ */

/* Subtle celebration accent for success states */
.celebration-accent::after {
    content: ' ✨' !important;
    opacity: 0.6 !important;
    font-size: 0.9em !important;
}

/* Celebration-themed dividers */
.divider-celebration {
    position: relative !important;
    text-align: center !important;
    margin: 2rem 0 !important;
}

.divider-celebration::before,
.divider-celebration::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: 40% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.4) 100%) !important;
}

.divider-celebration::before {
    left: 0 !important;
}

.divider-celebration::after {
    right: 0 !important;
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.4) 0%, transparent 100%) !important;
}

/* ============================================
   PAGE HEADER VISUAL HIERARCHY IMPROVEMENTS
   ============================================ */

/* Page header card - stronger visual presence */
.card.card-block.card-stretch {
    margin-bottom: 1.5rem !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.08) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 249, 255, 0.9) 100%) !important;
}

[data-bs-theme="dark"] .card.card-block.card-stretch {
    background: linear-gradient(135deg, rgba(42, 37, 56, 0.95) 0%, rgba(30, 27, 46, 0.9) 100%) !important;
}

/* Page header body - improved padding and spacing */
.card.card-block.card-stretch .card-body.p-0 {
    padding: 0 !important;
}

.card.card-block.card-stretch .card-body.p-0 > .d-flex {
    padding: 1.75rem 2rem !important;
    min-height: 80px !important;
    align-items: flex-start !important;
}

/* Page title - visually stronger */
.card.card-block.card-stretch h5.fw-bold,
.card.card-block.card-stretch .flex-grow-1 h5.fw-bold,
.card.card-block.card-stretch > .card-body > .d-flex > div > h5.fw-bold {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #6D28D9 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

[data-bs-theme="dark"] .card.card-block.card-stretch h5.fw-bold,
[data-bs-theme="dark"] .card.card-block.card-stretch .flex-grow-1 h5.fw-bold,
[data-bs-theme="dark"] .card.card-block.card-stretch > .card-body > .d-flex > div > h5.fw-bold {
    color: #C4B5FD !important;
}

/* Helper text - refined modern colors */
.card.card-block.card-stretch .text-muted.small,
.card.card-block.card-stretch p.text-muted.small {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #64748B !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
    max-width: 700px !important;
}

[data-bs-theme="dark"] .card.card-block.card-stretch .text-muted.small,
[data-bs-theme="dark"] .card.card-block.card-stretch p.text-muted.small {
    color: #94A3B8 !important;
}

/* Action buttons in header - better alignment */
.card.card-block.card-stretch .card-body.p-0 .d-flex > a.btn,
.card.card-block.card-stretch .card-body.p-0 .d-flex > .float-end {
    margin-top: 0 !important;
    align-self: flex-start !important;
}

/* Badge in header - improved styling */
.card.card-block.card-stretch .badge {
    font-size: 0.8125rem !important;
    padding: 0.45rem 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid transparent !important;
}

/* Clear separation between header and table card */
.card.card-block.card-stretch + .card {
    margin-top: 0 !important;
    border-top: 2px solid rgba(233, 229, 255, 0.5) !important;
    padding-top: 0 !important;
}

/* Alternative: Add spacing if cards are siblings */
.row > .col-lg-12 > .card.card-block.card-stretch + .card {
    margin-top: 1.5rem !important;
    border-top: none !important;
    position: relative !important;
}

.row > .col-lg-12 > .card.card-block.card-stretch + .card::before {
    content: '' !important;
    position: absolute !important;
    top: -1.5rem !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(233, 229, 255, 0.6) 20%, rgba(233, 229, 255, 0.6) 80%, transparent 100%) !important;
}

/* Improved spacing for title with badge */
.card.card-block.card-stretch .d-flex.align-items-center.gap-2 {
    margin-bottom: 0.75rem !important;
    gap: 0.75rem !important;
}

/* Flex container improvements */
.card.card-block.card-stretch .flex-grow-1 {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .card.card-block.card-stretch .card-body.p-0 > .d-flex {
        padding: 1.25rem 1.5rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .card.card-block.card-stretch h5.fw-bold {
        font-size: 1.25rem !important;
    }
    
    .card.card-block.card-stretch .card-body.p-0 .d-flex > a.btn,
    .card.card-block.card-stretch .card-body.p-0 .d-flex > .float-end {
        align-self: stretch !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* Title wrapper improvements - refined borders */
.page-title-wrap {
    margin-bottom: 2rem !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 2px solid rgba(226, 232, 240, 0.8) !important;
}

.page-title-wrap h2.page-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================
   STANDARDIZED UI PATTERNS - REUSABLE CLASSES
   ============================================ */

/* Standardized filter bar */
.table-filters-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}

.input-group-search {
    min-width: 200px !important;
}

.input-group-search .input-group-text {
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    color: #475569 !important;
}

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

.input-group-search .form-control:focus {
    border-color: rgba(226, 232, 240, 0.9) !important;
}

/* Standardized bulk action form */
#quick-action-form {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

#quick-action-form .select2 {
    min-width: 150px !important;
}

.quick-action-field {
    min-width: 120px !important;
}

#quick-action-type {
    min-width: 150px !important;
}

/* Standardized table container */
.table-container {
    margin-top: 1.5rem !important;
}

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

.table-container .table-responsive {
    margin-top: 1rem !important;
}

/* Standardized page header spacing */
.page-header-card {
    margin-bottom: 1.5rem !important;
}

.page-header-card .card-body {
    padding: 1.75rem 2rem !important;
}

.page-header-card .flex-grow-1 {
    min-width: 0 !important;
}

/* Consistent filter spacing */
.datatable-filter {
    min-width: 150px !important;
}

.datatable-filter .select2 {
    width: 100% !important;
}

/* Standardized action button groups */
.table-actions {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.table-actions .btn {
    margin: 0 !important;
}

/* Consistent top bar layout */
.table-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* Responsive adjustments for patterns */
@media (max-width: 991px) {
    .table-filters-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .input-group-search {
        min-width: 100% !important;
    }
    
    #quick-action-form {
        flex-direction: column !important;
    }
    
    #quick-action-form .select2,
    #quick-action-form select {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .table-top-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ============================================
   TYPOGRAPHY & COLOR REFINEMENTS - MODERN ADMIN
   ============================================ */

/* Card body - Neutral background (general rule, KPI cards override below) */
.card-body {
    background: #ffffff !important;
    color: #334155 !important;
}

[data-bs-theme="dark"] .card-body {
    background: var(--dm-surface) !important;
    color: var(--dm-text-primary) !important;
}

/* KPI Card bodies - Override general rule to show card background color */
.card.total-booking-card .card-body,
.card.total-service-card .card-body,
.card.total-provider-card .card-body,
.card.total-revenue .card-body {
    background: transparent !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .card.total-booking-card .card-body,
[data-bs-theme="dark"] .card.total-service-card .card-body,
[data-bs-theme="dark"] .card.total-provider-card .card-body,
[data-bs-theme="dark"] .card.total-revenue .card-body {
    background: transparent !important;
    color: #ffffff !important;
}

/* Card dividers - Subtle separation */
.card-body > hr,
.card-body hr {
    margin: 1.25rem 0 !important;
    border-top-color: rgba(226, 232, 240, 0.6) !important;
}

[data-bs-theme="dark"] .card-body > hr,
[data-bs-theme="dark"] .card-body hr {
    border-top-color: var(--dm-border) !important;
}

/* Page title divider - Refined */
.page-title-wrap {
    border-bottom-color: rgba(226, 232, 240, 0.6) !important;
}

[data-bs-theme="dark"] .page-title-wrap {
    border-bottom-color: var(--dm-border) !important;
}

/* Body text - Neutral, readable */
body {
    color: #334155 !important;
    line-height: 1.6 !important;
}

[data-bs-theme="dark"] body {
    color: var(--dm-text-primary) !important;
    background-color: var(--dm-bg-primary) !important;
}

[data-bs-theme="dark"] html {
    background-color: var(--dm-bg-primary) !important;
}

/* ============================================
   COMPREHENSIVE DARK MODE - ADDITIONAL COMPONENTS
   ============================================ */

/* Dark mode table links */
[data-bs-theme="dark"] .table a.btn-link,
[data-bs-theme="dark"] .table a.btn-link-hover {
    color: var(--dm-accent-purple) !important;
}

[data-bs-theme="dark"] .table a.btn-link:hover,
[data-bs-theme="dark"] .table a.btn-link-hover:hover {
    color: var(--dm-accent-purple-hover) !important;
}

/* Dark mode breadcrumbs */
[data-bs-theme="dark"] .breadcrumb {
    background: var(--dm-surface) !important;
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--dm-accent-purple) !important;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--dm-text-muted) !important;
}

/* Dark mode dashboard cards */
[data-bs-theme="dark"] .dashboard-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow-sm) !important;
}

/* Dark mode chart container */
[data-bs-theme="dark"] .card:has(#monthly-revenue) {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .card:has(#monthly-revenue) h4 {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .card.top-providers,
[data-bs-theme="dark"] .card.recent-activities {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .card.top-providers .card-header,
[data-bs-theme="dark"] .card.recent-activities .card-header {
    border-bottom-color: var(--dm-border) !important;
    background: var(--dm-surface-elevated) !important;
}

/* Dark mode select2 and dropdowns */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--dm-surface-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--dm-surface-elevated) !important;
    border-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .select2-results__option {
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--dm-surface-hover) !important;
    color: var(--dm-text-primary) !important;
}

/* Dark mode pagination */
[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: var(--dm-surface-hover) !important;
    border-color: var(--dm-border-hover) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--dm-accent-purple) !important;
    border-color: var(--dm-accent-purple) !important;
    color: #ffffff !important;
}

/* Dark mode badges - ensure readability */
[data-bs-theme="dark"] .badge.bg-success-subtle,
[data-bs-theme="dark"] .badge.text-success.bg-success-subtle {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6EE7B7 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-warning-subtle,
[data-bs-theme="dark"] .badge.text-warning.bg-warning-subtle {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #FCD34D !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-danger-subtle,
[data-bs-theme="dark"] .badge.text-danger.bg-danger-subtle {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #FCA5A5 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-info-subtle,
[data-bs-theme="dark"] .badge.text-info.bg-info-subtle {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93C5FD !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.text-primary.bg-primary-subtle {
    background: var(--dm-accent-purple-bg) !important;
    color: var(--dm-accent-purple) !important;
    border-color: var(--dm-border) !important;
}

/* Dark mode table top bar */
[data-bs-theme="dark"] .table-top-bar {
    border-bottom-color: var(--dm-border) !important;
}

/* Dark mode input groups */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--dm-surface-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

/* Dark mode buttons - maintain brand colors but ensure contrast */
[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .btn-secondary {
    background: var(--dm-surface-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .btn-secondary:hover {
    background: var(--dm-surface-hover) !important;
    border-color: var(--dm-border-hover) !important;
}

/* Dark mode common list items */
[data-bs-theme="dark"] .common-list li {
    border-bottom-color: var(--dm-border) !important;
}

[data-bs-theme="dark"] .common-list li:hover {
    background-color: var(--dm-surface-hover) !important;
}

/* ============================================
   MODERN LOGIN PAGE - CLEAN, MINIMAL DESIGN
   ============================================
   Modernize login page to match dashboard design
   ============================================ */

/* Login Content Container - Modern spacing */
.modern-login.login-content {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
}

[data-bs-theme="dark"] .modern-login.login-content {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

/* Modern Login Card - Clean, elevated design */
.modern-login-card {
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}

.modern-login-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
}

[data-bs-theme="dark"] .modern-login-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .modern-login-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Modern Logo - Refined sizing */
.modern-logo-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.modern-logo {
    max-height: 50px !important;
    width: auto !important;
    transition: transform 0.2s ease !important;
}

.modern-logo:hover {
    transform: scale(1.05) !important;
}

/* Service Booking Icon - Primary Logo on Login Page */
.modern-logo-icon.modern-logo-primary {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #5F60B9 0%, #4C4DA8 100%) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(95, 96, 185, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    margin: 0 auto !important;
}

.modern-logo-wrapper:hover .modern-logo-icon.modern-logo-primary {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 24px rgba(95, 96, 185, 0.4) !important;
}

.modern-logo-icon.modern-logo-primary svg {
    width: 48px !important;
    height: 48px !important;
}

[data-bs-theme="dark"] .modern-logo-icon.modern-logo-primary {
    background: linear-gradient(135deg, #6D5DD3 0%, #5F60B9 100%) !important;
    box-shadow: 0 4px 16px rgba(109, 93, 211, 0.4) !important;
}

/* Event Planner Icon - Decorative accent (for other pages) */
.modern-logo-icon:not(.modern-logo-primary) {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #5F60B9 0%, #4C4DA8 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(95, 96, 185, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
    z-index: 1 !important;
}

.modern-logo-wrapper:hover .modern-logo-icon:not(.modern-logo-primary) {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 4px 12px rgba(95, 96, 185, 0.4) !important;
}

.modern-logo-icon:not(.modern-logo-primary) svg {
    width: 18px !important;
    height: 18px !important;
}

[data-bs-theme="dark"] .modern-logo-icon:not(.modern-logo-primary) {
    background: linear-gradient(135deg, #6D5DD3 0%, #5F60B9 100%) !important;
    box-shadow: 0 2px 8px rgba(109, 93, 211, 0.4) !important;
}

/* Modern Login Title - Clean typography */
.modern-login-title {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

[data-bs-theme="dark"] .modern-login-title {
    color: var(--dm-text-primary) !important;
}

/* Modern Login Subtitle - Subtle text */
.modern-login-subtitle {
    font-size: 0.9375rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

[data-bs-theme="dark"] .modern-login-subtitle {
    color: var(--dm-text-secondary) !important;
}

/* Modern Form Group - Consistent spacing */
.modern-form-group {
    margin-bottom: 1.5rem !important;
}

/* Modern Form Label - Clear hierarchy */
.modern-form-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    letter-spacing: 0.01em !important;
}

[data-bs-theme="dark"] .modern-form-label {
    color: var(--dm-text-primary) !important;
}

/* Modern Form Control - Clean input styling */
.modern-form-control {
    border-radius: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    color: #1e293b !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    height: auto !important;
}

.modern-form-control:focus {
    border-color: #5F60B9 !important;
    box-shadow: 0 0 0 3px rgba(95, 96, 185, 0.1) !important;
    outline: none !important;
    background: #ffffff !important;
}

.modern-form-control::placeholder {
    color: #94a3b8 !important;
    opacity: 0.7 !important;
}

[data-bs-theme="dark"] .modern-form-control {
    background: var(--dm-surface-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] .modern-form-control:focus {
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15) !important;
    background: var(--dm-surface-elevated) !important;
}

[data-bs-theme="dark"] .modern-form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

/* Modern Forgot Link - Subtle styling */
.modern-forgot-link {
    font-size: 0.875rem !important;
    color: #5F60B9 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.modern-forgot-link:hover {
    color: #4C4DA8 !important;
    text-decoration: underline !important;
}

[data-bs-theme="dark"] .modern-forgot-link {
    color: #A78BFA !important;
}

[data-bs-theme="dark"] .modern-forgot-link:hover {
    color: #C4B5FD !important;
}

/* Modern Login Button - Primary action */
.modern-login-btn {
    background: linear-gradient(135deg, #5F60B9 0%, #4C4DA8 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(95, 96, 185, 0.25) !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.01em !important;
}

.modern-login-btn:hover {
    background: linear-gradient(135deg, #4C4DA8 0%, #3D3E8F 100%) !important;
    box-shadow: 0 6px 16px rgba(95, 96, 185, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.modern-login-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(95, 96, 185, 0.3) !important;
}

[data-bs-theme="dark"] .modern-login-btn {
    background: linear-gradient(135deg, #5F60B9 0%, #4C4DA8 100%) !important;
    box-shadow: 0 4px 12px rgba(95, 96, 185, 0.4) !important;
}

[data-bs-theme="dark"] .modern-login-btn:hover {
    background: linear-gradient(135deg, #6D5DD3 0%, #5F60B9 100%) !important;
    box-shadow: 0 6px 16px rgba(95, 96, 185, 0.5) !important;
}

/* Modern Demo Buttons - Subtle secondary actions */
.modern-demo-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    padding: 1rem 0 !important;
    border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

[data-bs-theme="dark"] .modern-demo-buttons {
    border-top-color: var(--dm-border) !important;
    border-bottom-color: var(--dm-border) !important;
}

.modern-demo-btn {
    background: rgba(95, 96, 185, 0.08) !important;
    border: 1px solid rgba(95, 96, 185, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #5F60B9 !important;
    transition: all 0.2s ease !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.modern-demo-btn:hover {
    background: rgba(95, 96, 185, 0.12) !important;
    border-color: rgba(95, 96, 185, 0.3) !important;
    color: #4C4DA8 !important;
    transform: translateY(-1px) !important;
}

[data-bs-theme="dark"] .modern-demo-btn {
    background: rgba(167, 139, 250, 0.1) !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
    color: #A78BFA !important;
}

[data-bs-theme="dark"] .modern-demo-btn:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
    color: #C4B5FD !important;
}

/* Modern Signup Link - Clean text styling */
.modern-signup-link {
    font-size: 0.9375rem !important;
    padding-top: 1rem !important;
}

.modern-signup-link-text {
    color: #5F60B9 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    margin-left: 0.5rem !important;
    transition: color 0.2s ease !important;
}

.modern-signup-link-text:hover {
    color: #4C4DA8 !important;
    text-decoration: underline !important;
}

[data-bs-theme="dark"] .modern-signup-link-text {
    color: #A78BFA !important;
}

[data-bs-theme="dark"] .modern-signup-link-text:hover {
    color: #C4B5FD !important;
}

/* ============================================
   WORKFLOW TABS - UI Filter Wrapper
   ============================================ */
/* Workflow tabs container - 8px spacing scale */
.workflow-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: #ffffff !important;
}

[data-bs-theme="dark"] .workflow-tabs {
    background: var(--dm-surface) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Individual workflow tab button */
.workflow-tabs .workflow-tab {
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    margin-bottom: -1px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.workflow-tabs .workflow-tab:hover {
    color: #334155 !important;
    background: rgba(95, 96, 185, 0.04) !important;
    border-bottom-color: rgba(95, 96, 185, 0.3) !important;
}

.workflow-tabs .workflow-tab.active {
    color: #5F60B9 !important;
    font-weight: 600 !important;
    border-bottom-color: #5F60B9 !important;
    background: rgba(95, 96, 185, 0.08) !important;
}

[data-bs-theme="dark"] .workflow-tabs .workflow-tab {
    color: var(--dm-text-secondary) !important;
}

[data-bs-theme="dark"] .workflow-tabs .workflow-tab:hover {
    color: var(--dm-text-primary) !important;
    background: rgba(167, 139, 250, 0.08) !important;
    border-bottom-color: rgba(167, 139, 250, 0.3) !important;
}

[data-bs-theme="dark"] .workflow-tabs .workflow-tab.active {
    color: #A78BFA !important;
    border-bottom-color: #A78BFA !important;
    background: rgba(167, 139, 250, 0.12) !important;
}

/* Tab count badges */
.workflow-tabs .tab-count {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    min-width: 24px !important;
    text-align: center !important;
}

/* Tab label */
.workflow-tabs .tab-label {
    display: inline-block !important;
}

/* Responsive workflow tabs */
@media (max-width: 992px) {
    .workflow-tabs {
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .workflow-tabs .workflow-tab {
        padding: 12px 16px !important;
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 768px) {
    .workflow-tabs .workflow-tab {
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
    }
    
    .workflow-tabs .tab-count {
        font-size: 0.6875rem !important;
        padding: 1px 6px !important;
    }
}

/* ============================================
   FILTER TOOLBAR - Active Filters Display
   ============================================ */
/* Filter toolbar container - 8px spacing scale */
.filter-toolbar-active {
    padding: 16px !important;
    background: rgba(95, 96, 185, 0.04) !important;
    border: 1px solid rgba(95, 96, 185, 0.15) !important;
    border-radius: 10px !important;
    margin-top: 16px !important;
}

[data-bs-theme="dark"] .filter-toolbar-active {
    background: rgba(167, 139, 250, 0.08) !important;
    border-color: rgba(167, 139, 250, 0.2) !important;
}

/* Active filter chips */
.filter-chip {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.filter-chip:hover {
    opacity: 0.85 !important;
    transform: translateY(-1px) !important;
}

.filter-chip i {
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.filter-chip i:hover {
    opacity: 1 !important;
}

/* Clear Filters button */
#clearFiltersBtn {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

#clearFiltersBtn:hover {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    transform: translateY(-1px) !important;
}

[data-bs-theme="dark"] #clearFiltersBtn {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--dm-text-primary) !important;
}

[data-bs-theme="dark"] #clearFiltersBtn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Filter toolbar spacing improvements */
.filter-toolbar-active .d-flex {
    gap: 8px !important;
}

.filter-toolbar-active .text-muted {
    font-size: 0.875rem !important;
    color: #64748b !important;
}

[data-bs-theme="dark"] .filter-toolbar-active .text-muted {
    color: var(--dm-text-secondary) !important;
}

/* Responsive filter toolbar */
@media (max-width: 768px) {
    .filter-toolbar-active {
        padding: 12px !important;
    }
    
    .filter-chip {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
    
    #clearFiltersBtn {
        font-size: 0.75rem !important;
        padding: 4px 12px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
}

/* Modern Alert - Refined styling */
.modern-alert {
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .modern-login-card {
        border-radius: 12px !important;
        margin: 1rem !important;
    }
    
    .modern-login-title {
        font-size: 1.5rem !important;
    }
    
    .modern-demo-buttons {
        flex-direction: column !important;
    }
    
    .modern-demo-btn {
        width: 100% !important;
    }
}

/* ============================================
   UX ENHANCEMENTS - Improved User Experience
   ============================================ */

/* 1. MODERN LOADING SPINNER */
#loading {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 249, 255, 0.98) 100%) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

[data-bs-theme="dark"] #loading {
    background: linear-gradient(135deg, rgba(30, 27, 46, 0.98) 0%, rgba(42, 37, 56, 0.98) 100%) !important;
}

#loading-center {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
}

#loading-center::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 3px solid rgba(167, 139, 250, 0.15) !important;
    border-radius: 50% !important;
}

#loading-center::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 3px solid transparent !important;
    border-top-color: #A78BFA !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading state fade out */
#loading.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. SMOOTH PAGE TRANSITIONS */
.content-page {
    animation: fadeInUp 0.4s ease-out !important;
}

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

/* 3. ENHANCED FORM INTERACTIONS */
.form-control,
.form-select {
    border-radius: 10px !important;
    border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    transition: all 0.25s ease !important;
    background-color: #ffffff !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: rgba(167, 139, 250, 0.4) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #A78BFA !important;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12) !important;
    outline: none !important;
}

/* Form labels - Better hierarchy */
.form-label,
label:not(.btn):not(.custom-control-label) {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    margin-bottom: 0.5rem !important;
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] label:not(.btn):not(.custom-control-label) {
    color: var(--dm-text-secondary) !important;
}

/* Form validation states */
.form-control.is-valid {
    border-color: #10B981 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310B981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    padding-right: 2.75rem !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
}

.form-control.is-invalid {
    border-color: #EF4444 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3e%3ccircle cx='6' cy='6' r='4.5' stroke='%23EF4444' stroke-width='1.5'/%3e%3cpath stroke='%23EF4444' stroke-linecap='round' stroke-width='1.5' d='M6 3.75v2.5M6 8.25h.005'/%3e%3c/svg%3e") !important;
    padding-right: 2.75rem !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
}

.invalid-feedback {
    font-size: 0.8125rem !important;
    color: #DC2626 !important;
    margin-top: 0.375rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

.invalid-feedback::before {
    content: '!' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    background: #FEE2E2 !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #DC2626 !important;
}

/* 4. ENHANCED BUTTONS */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Button ripple effect */
.btn::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s ease, height 0.6s ease !important;
}

.btn:active::after {
    width: 200px !important;
    height: 200px !important;
}

/* Button loading state */
.btn.btn-loading {
    pointer-events: none !important;
    opacity: 0.75 !important;
}

.btn.btn-loading::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 8px !important;
    border: 2px solid transparent !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    vertical-align: middle !important;
}

/* 5. IMPROVED TABLE INTERACTIONS */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border-bottom: 2px solid rgba(167, 139, 250, 0.15) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748B !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

[data-bs-theme="dark"] .table thead th {
    background: linear-gradient(135deg, var(--dm-surface-elevated) 0%, var(--dm-surface) 100%) !important;
    border-bottom-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

.table tbody tr {
    transition: all 0.2s ease !important;
}

.table tbody tr:hover {
    background: rgba(167, 139, 250, 0.04) !important;
    transform: scale(1.002) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background: rgba(167, 139, 250, 0.08) !important;
}

.table tbody td {
    padding: 1rem 1.25rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

[data-bs-theme="dark"] .table tbody td {
    border-bottom-color: var(--dm-border) !important;
}

/* Table actions - Better visibility */
.table .action-btn,
.table [class*="btn-sm"] {
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

.table tbody tr:hover .action-btn,
.table tbody tr:hover [class*="btn-sm"] {
    opacity: 1 !important;
}

/* 6. EMPTY STATE STYLING */
.empty-state,
.no-data,
.dataTables_empty {
    text-align: center !important;
    padding: 4rem 2rem !important;
    color: #94A3B8 !important;
}

.empty-state::before,
.no-data::before {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(196, 181, 253, 0.1) 100%) !important;
    border-radius: 50% !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A78BFA' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 40px !important;
}

/* 7. IMPROVED NOTIFICATIONS/TOASTS */
.swal2-popup {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    padding: 2rem !important;
}

.swal2-title {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

[data-bs-theme="dark"] .swal2-title {
    color: var(--dm-text-primary) !important;
}

.swal2-html-container {
    font-size: 0.9375rem !important;
    color: #64748B !important;
    line-height: 1.6 !important;
}

.swal2-confirm {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 0.75rem 2rem !important;
}

.swal2-cancel {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 0.75rem 2rem !important;
}

/* Toast notifications */
.toast,
.notification-toast {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    animation: slideInRight 0.4s ease !important;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 8. SIDEBAR ENHANCEMENTS */
.iq-sidebar,
.sidebar-default {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.iq-sidebar-menu .nav-item {
    margin: 2px 8px !important;
}

.iq-sidebar-menu .nav-link {
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.25s ease !important;
    position: relative !important;
}

/* Sidebar tooltip on hover */
.sidebar-mini .iq-sidebar-menu .nav-link:hover .tooltip-text,
.sidebar-mini .iq-sidebar-menu .nav-link:hover .custom-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

.sidebar-mini .custom-tooltip {
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateX(-10px) translateY(-50%) !important;
    background: var(--dm-surface-elevated, #1E1B2E) !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-mini .custom-tooltip::before {
    content: '' !important;
    position: absolute !important;
    left: -6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: 6px solid transparent !important;
    border-right-color: var(--dm-surface-elevated, #1E1B2E) !important;
}

/* 9. IMPROVED CARD ACTIONS */
.card .card-header .dropdown-toggle::after {
    display: none !important;
}

.card .card-header-action .btn {
    padding: 0.375rem 0.625rem !important;
    border-radius: 8px !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.card:hover .card-header-action .btn {
    opacity: 1 !important;
}

/* 10. BETTER FOCUS STATES FOR ACCESSIBILITY */
*:focus-visible {
    outline: 2px solid #A78BFA !important;
    outline-offset: 2px !important;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute !important;
    top: -100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #A78BFA !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0 0 10px 10px !important;
    z-index: 10000 !important;
    transition: top 0.3s ease !important;
}

.skip-link:focus {
    top: 0 !important;
}

/* 11. BREADCRUMB ENHANCEMENTS */
.breadcrumb {
    background: rgba(167, 139, 250, 0.04) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

[data-bs-theme="dark"] .breadcrumb {
    background: rgba(167, 139, 250, 0.08) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '›' !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
}

.breadcrumb-item.active {
    color: #64748B !important;
    font-weight: 500 !important;
}

/* 12. IMPROVED AVATAR/IMAGE STYLING */
.avatar,
.h-avatar,
.img-avatar {
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 2px solid rgba(167, 139, 250, 0.15) !important;
    transition: all 0.25s ease !important;
}

.avatar:hover,
.h-avatar:hover {
    border-color: rgba(167, 139, 250, 0.4) !important;
    transform: scale(1.05) !important;
}

/* Avatar sizes */
.avatar-40, .avatar-sm {
    width: 40px !important;
    height: 40px !important;
}

.avatar-50 {
    width: 50px !important;
    height: 50px !important;
}

.avatar-60, .avatar-md {
    width: 60px !important;
    height: 60px !important;
}

.avatar-80, .avatar-lg {
    width: 80px !important;
    height: 80px !important;
}

/* 13. DROPDOWN IMPROVEMENTS */
.dropdown-menu {
    animation: dropdownFadeIn 0.2s ease !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

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

.dropdown-item {
    padding: 0.625rem 1rem !important;
    font-size: 0.9375rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.dropdown-item svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.7 !important;
}

.dropdown-item:hover svg {
    opacity: 1 !important;
}

.dropdown-divider {
    margin: 0.5rem 0 !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
}

/* 14. BETTER RESPONSIVE BEHAVIOR */
@media (max-width: 768px) {
    .card-body {
        padding: 1.25rem !important;
    }
    
    .table-responsive {
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .page-title h2 {
        font-size: 1.5rem !important;
    }
}

/* 15. SUBTLE SKELETON LOADING */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
    border-radius: 8px !important;
}

[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--dm-surface) 25%, var(--dm-surface-elevated) 50%, var(--dm-surface) 75%) !important;
    background-size: 200% 100% !important;
}

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

/* 16. SMOOTH SCROLLING */
html {
    scroll-behavior: smooth !important;
}

/* Scrollable containers */
.scroll-container,
.data-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(167, 139, 250, 0.3) transparent !important;
}

/* 17. CONFIRMATION DIALOGS IMPROVEMENT */
.swal2-icon {
    margin: 1.5rem auto !important;
    border-width: 3px !important;
}

.swal2-icon.swal2-success {
    border-color: #10B981 !important;
    color: #10B981 !important;
}

.swal2-icon.swal2-warning {
    border-color: #F59E0B !important;
    color: #F59E0B !important;
}

.swal2-icon.swal2-error {
    border-color: #EF4444 !important;
    color: #EF4444 !important;
}

.swal2-icon.swal2-info {
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
}

.swal2-icon.swal2-question {
    border-color: #A78BFA !important;
    color: #A78BFA !important;
}

/* 18. COLLAPSIBLE SECTIONS */
.collapse-header {
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
    background: rgba(167, 139, 250, 0.04) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.collapse-header:hover {
    background: rgba(167, 139, 250, 0.08) !important;
}

.collapse-header .collapse-icon {
    transition: transform 0.3s ease !important;
}

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

/* 19. IMPROVED TAB STYLING */
.nav-pills .nav-link {
    border-radius: 10px !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 500 !important;
    color: #64748B !important;
    transition: all 0.25s ease !important;
}

.nav-pills .nav-link:hover {
    background: rgba(167, 139, 250, 0.08) !important;
    color: #A78BFA !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.25) !important;
}

/* 20. SUBTLE SELECTION STYLING */
::selection {
    background: rgba(167, 139, 250, 0.25) !important;
    color: inherit !important;
}

::-moz-selection {
    background: rgba(167, 139, 250, 0.25) !important;
    color: inherit !important;
}