/* Stokapi - Modern Design System */

:root {
    /* Tropical Color Palette */
    --tropical-blue: #0EA5E9;
    --tropical-teal: #14B8A6;
    --tropical-green: #10B981;
    --ocean-dark: #0C4A6E;
    --sand-light: #FEF3C7;
    --coral: #FB7185;

    /* Functional Colors */
    --primary: #0EA5E9;
    --secondary: #14B8A6;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #06B6D4;

    /* Neutrals */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Layout Spacing */
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --mobile-nav-height: 70px;
    --mobile-nav-safe-area: env(safe-area-inset-bottom, 0px);

    /* Spacing Scale */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 4px rgba(14, 165, 233, 0.2);

    /* Premium Multi-layer Shadows */
    --shadow-premium-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.06),
                         0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-premium: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
                      0 10px 15px -3px rgba(0, 0, 0, 0.08),
                      0 20px 25px -5px rgba(0, 0, 0, 0.06);
    --shadow-premium-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08),
                         0 20px 40px -10px rgba(0, 0, 0, 0.1),
                         0 40px 60px -15px rgba(0, 0, 0, 0.08);
    --shadow-premium-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.1),
                         0 40px 80px -20px rgba(0, 0, 0, 0.12),
                         0 60px 100px -30px rgba(0, 0, 0, 0.08);

    /* Glow Effects */
    --shadow-glow-blue: 0 0 20px rgba(14, 165, 233, 0.25),
                        0 0 40px rgba(14, 165, 233, 0.15);
    --shadow-glow-teal: 0 0 20px rgba(20, 184, 166, 0.25),
                        0 0 40px rgba(20, 184, 166, 0.15);
    --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.25);
    --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.25);

    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: 12px;

    /* Premium Gradients */
    --gradient-premium-blue: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    --gradient-premium-teal: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    --gradient-premium-purple: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-premium-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --gradient-premium-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --gradient-premium-danger: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    /* Premium Borders */
    --border-subtle: 1px solid rgba(0, 0, 0, 0.06);
    --border-light: 1px solid var(--gray-200);

    /* Border Radius */
    --radius-sm: 0.375rem;  /* 6px */
    --radius: 0.5rem;       /* 8px */
    --radius-md: 0.75rem;   /* 12px */
    --radius-lg: 1rem;      /* 16px */
    --radius-xl: 1.25rem;   /* 20px */
    --radius-full: 9999px;  /* Pill shape */

    /* Transitions */
    --transition: all 0.2s ease-in-out;
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Z-Index Scale (standardized stacking order) */
    --z-dropdown: 100;        /* Dropdowns within content */
    --z-sticky: 200;          /* Sticky headers, cards */
    --z-sidebar: 1000;        /* Sidebar navigation */
    --z-modal-backdrop: 1040; /* Modal backdrop */
    --z-modal: 1050;          /* Modals */
    --z-autocomplete: 1060;   /* Autocomplete inside modals */
    --z-notification: 1100;   /* Toast notifications (highest) */
}

/* ============================================
   Skeleton Loaders - Placeholder animations
   ============================================ */

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

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

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.75rem;
    margin-bottom: 0.375rem;
}

.skeleton-text-lg {
    height: 1.5rem;
    margin-bottom: 0.75rem;
}

.skeleton-heading {
    height: 2rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow);
}

.skeleton-table-row {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--gray-100);
}

.skeleton-table-cell {
    flex: 1;
    height: 1rem;
}

.skeleton-stat-card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow);
}

.skeleton-stat-card .skeleton-stat-value {
    height: 2.5rem;
    width: 50%;
    margin-bottom: 0.5rem;
}

.skeleton-stat-card .skeleton-stat-label {
    height: 0.875rem;
    width: 70%;
}

/* ============================================
   Empty State Component (Premium)
   ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.empty-state-message {
    color: var(--gray-500);
    max-width: 320px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Table cell empty state - compact */
td .empty-state {
    padding: 1rem;
}

td .empty-state-icon {
    font-size: 1.5rem !important;
}

td .empty-state-title {
    font-size: 0.875rem;
}

/* Empty value utility - for inline empty/null values in tables and text */
.empty-value {
    color: var(--gray-400);
    font-style: normal;
}

.empty-value::before {
    content: "—";
}

/* QBO Disconnected Card
   ============================================ */

.qbo-disconnected-card {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
    margin: 2rem auto;
    max-width: 400px;
}

.qbo-disconnected-icon {
    font-size: 3rem;
    color: var(--danger);
    margin-bottom: 1rem;
}

.qbo-disconnected-card h4 {
    color: var(--danger);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.qbo-disconnected-card p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.qbo-disconnected-card .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
}

/* Skip Link - Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
    z-index: var(--z-notification);
    transition: top 0.2s ease;
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--tropical-teal);
    outline-offset: 2px;
}

/* Modern Layout with Sidebar */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--ocean-dark) 0%, var(--gray-900) 100%);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-lg);
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
}

.sidebar-brand .emoji {
    font-size: 1.75rem;
}

.sidebar-user {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tropical-blue), var(--tropical-teal));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.sidebar-nav {
    padding: 1rem 0;
}

.nav-section-title {
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-400);
    letter-spacing: 0.05em;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--gray-300);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.nav-item:focus {
    outline: none;
}

.nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: 2px solid var(--tropical-blue);
    outline-offset: -2px;
}

.nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.nav-badge {
    margin-left: auto;
    background: rgba(245, 158, 11, 0.25);
    color: #FCD34D;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Danger badge for urgent items (e.g. TOF anomalies with critical severity) */
.sidebar .nav-badge.badge-danger {
    background: rgba(239, 68, 68, 0.25);
    color: #FCA5A5;
}

/* Pinned pages section */
.pinned-section-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pinned-section-title i {
    font-size: 0.7rem;
    opacity: 0.6;
}

.pinned-item {
    position: relative;
    padding-right: 2.25rem;
}

.pinned-item span {
    flex: 1;
    min-width: 0;
}

.pinned-item .pin-remove-btn {
    display: none;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 0.75rem;
    padding: 0.125rem;
    cursor: pointer;
    line-height: 1;
    border-radius: var(--radius-sm);
    z-index: 1;
}

.pinned-item .pin-remove-btn:hover {
    color: var(--coral);
    background: rgba(255, 255, 255, 0.1);
}

.pinned-item:hover .pin-remove-btn,
.pinned-item:focus-within .pin-remove-btn {
    display: block;
}

#pinnedSection {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Pin context menu */
.pin-context-menu {
    position: fixed;
    z-index: 9999;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.25rem;
    min-width: 180px;
    animation: contextMenuIn 0.12s ease-out;
    transform-origin: top left;
}

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

.pin-context-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s ease;
}

.pin-context-menu button:hover {
    background: var(--gray-100);
}

.pin-context-menu button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Secondary nav items - less frequently used */
.nav-item-secondary {
    opacity: 0.7;
    font-size: 0.8125rem;
}

.nav-item-secondary:hover {
    opacity: 1;
}

.nav-section-badge {
    background: rgba(245, 158, 11, 0.25);
    color: #FCD34D;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page views - hidden by default, shown by JS router */
.page-view {
    display: none;
}

.topbar {
    height: var(--topbar-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
}

.topbar-title-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.topbar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* Breadcrumbs */
.breadcrumbs {
    line-height: 1;
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0 0 0.25rem 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.breadcrumbs li + li::before {
    content: '\203A';
    color: var(--gray-300);
    margin-right: 0.125rem;
}

.breadcrumbs a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs li[aria-current="page"] span {
    color: var(--gray-400);
    font-weight: 500;
}

@media (max-width: 768px) {
    .breadcrumbs {
        display: none;
    }

    .topbar-title-group {
        flex: 1;
        min-width: 0;
    }
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content-wrapper {
    padding: var(--space-8);
    overflow-x: hidden;
    max-width: 100%;
}

/* Modern Cards */
.card {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    overflow: visible;
    transition: var(--transition);
}

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

.card-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card-body {
    padding: var(--space-6);
    overflow: visible;
}

/* ============================================
   Page Header Component
   Standardized header for all list pages
   ============================================ */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

.page-header h2 i {
    color: var(--primary);
}

.page-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Search Input - Standardized width */
.input-search {
    width: 250px;
    min-width: 200px;
    max-width: 300px;
}

/* Search Bar Component - with icon */
.search-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.search-bar .search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--gray-400);
    pointer-events: none;
    z-index: 1;
    font-size: 0.875rem;
}

.search-bar .form-control {
    padding-left: 2.25rem;
}

.search-bar .form-control:focus + .search-icon,
.search-bar .form-control:focus ~ .search-icon {
    color: var(--primary);
}

@media (max-width: 576px) {
    .search-bar {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header h2 {
        font-size: 1.25rem;
    }

    .page-header-actions {
        justify-content: flex-end;
    }

    .input-search {
        width: 100%;
        max-width: none;
    }
}

/* Sticky summary cards - lower z-index to stay below dropdowns */
.card.sticky-top {
    z-index: 10;
}

/* Stats Grid Layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

/* Note: .stat-card styles are defined in the PREMIUM STAT CARDS section below */

/* Filter label in card header */
.filter-label {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.375rem;
}

/* Filter row - horizontal group of filters */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-100);
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 140px;
    flex: 1;
    max-width: 200px;
}

.filter-group .form-control,
.filter-group .form-select {
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .filter-row {
        gap: 0.75rem;
    }

    .filter-group {
        min-width: 120px;
        flex: 1 1 calc(50% - 0.375rem);
        max-width: none;
    }
}

/* Stat card elements - base styles (enhanced in PREMIUM STAT CARDS section) */

/* Stat Icon Color Variants (standalone, outside stat-card context) */
.stat-icon.danger {
    background: linear-gradient(135deg, var(--danger), #DC2626);
}

.stat-icon.warning {
    background: linear-gradient(135deg, var(--warning), #F97316);
}

.stat-icon.success {
    background: linear-gradient(135deg, var(--success), var(--tropical-green));
}

/* ============================================
   ANOMALY CARDS (AI Detection)
   ============================================ */

.anomaly-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.anomaly-card {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--gray-300);
    overflow: hidden;
    transition: var(--transition);
}

.anomaly-card:hover {
    box-shadow: var(--shadow-lg);
}

.anomaly-card.high {
    border-left-color: var(--danger);
}

.anomaly-card.medium {
    border-left-color: var(--warning);
}

.anomaly-card.low {
    border-left-color: var(--info);
}

.anomaly-card-header {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.anomaly-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.anomaly-card.high .anomaly-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.anomaly-card.medium .anomaly-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.anomaly-card.low .anomaly-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.anomaly-card-title {
    flex: 1;
    min-width: 0;
}

.anomaly-card-title h6 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.anomaly-card-title p {
    margin: 0.125rem 0 0 0;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.anomaly-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.anomaly-card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--gray-600);
    white-space: nowrap;
}

.anomaly-card-meta .meta-item i {
    color: var(--gray-400);
    font-size: 0.75rem;
}

.anomaly-card-meta .meta-item.amount {
    font-weight: 600;
    color: var(--gray-800);
}

/* Technical Details */
.anomaly-details {
    border-top: 1px solid var(--gray-100);
    font-size: 0.8rem;
}

.anomaly-details summary {
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    color: var(--gray-500);
    user-select: none;
}

.anomaly-details summary:hover {
    color: var(--primary);
}

.anomaly-details pre {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    font-size: 0.75rem;
    overflow-x: auto;
}

/* Formatted anomaly details */
.anomaly-details-formatted {
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
}

.anomaly-details-formatted .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--gray-100);
}

.anomaly-details-formatted .detail-row:last-child {
    border-bottom: none;
}

.anomaly-details-formatted .detail-label {
    color: var(--gray-600);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.anomaly-details-formatted .detail-label i {
    color: var(--gray-400);
}

.anomaly-details-formatted .detail-value {
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.85rem;
}

/* Mobile: Stack meta items */
@media (max-width: 768px) {
    .anomaly-card-header {
        flex-wrap: wrap;
    }

    .anomaly-card-meta {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--gray-100);
    }
}

/* Anomaly Card Review Actions */
.anomaly-card-review {
    padding: var(--space-2) var(--space-4);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.anomaly-card-actions {
    flex-shrink: 0;
}

/* Reviewed anomaly styling */
.anomaly-card.reviewed,
.anomaly-group.reviewed {
    opacity: 0.7;
}

.anomaly-card.reviewed:hover,
.anomaly-group.reviewed:hover {
    opacity: 1;
}

/* Review info text */
.review-info {
    color: var(--gray-500);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.review-info i {
    color: var(--success);
}

/* ============================================
   AI INSIGHTS PANEL & ENHANCED ANOMALY UI
   ============================================ */

.ai-insights-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--gray-200);
}

.ai-insights-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--gray-200);
}

.ai-insights-card .card-header h5 {
    color: var(--primary);
}

.ai-insights-card .card-header h5 i {
    color: var(--warning);
}

.insight-metric {
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
}

.insight-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
}

.insight-value.text-danger {
    color: var(--danger);
}

.insight-value.text-success {
    color: var(--success);
}

.key-insights {
    padding-top: var(--space-3);
    border-top: 1px solid var(--gray-200);
}

.key-insights ul {
    padding-left: 1.25rem;
    color: var(--gray-600);
}

/* Anomaly checkbox for selection */
.anomaly-checkbox {
    flex-shrink: 0;
    margin-right: var(--space-2);
}

.anomaly-checkbox .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

/* Selected anomaly card */
.anomaly-card.selected {
    background: rgba(59, 130, 246, 0.05);
    box-shadow: 0 0 0 2px var(--primary);
}

/* Batch actions bar */
.batch-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-800);
    color: white;
    gap: var(--space-3);
}

.batch-actions-bar .selected-count {
    font-size: 0.9rem;
}

.batch-actions-bar .batch-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* AI Explanation panel */
.anomaly-explanation {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border-top: 1px solid var(--gray-200);
    padding: var(--space-3) var(--space-4);
}

.explanation-loading {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.explanation-loading i.spin {
    animation: spin 1s linear infinite;
}

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

.explanation-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.explanation-section {
    margin-bottom: var(--space-2);
}

.explanation-section strong {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-700);
    font-size: 0.8rem;
    margin-bottom: var(--space-1);
}

.explanation-section strong i {
    color: var(--primary);
}

.explanation-section p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.explanation-section ol {
    margin: 0;
    padding-left: 1.5rem;
}

.explanation-confidence {
    font-size: 0.75rem;
}

.explanation-error {
    font-size: 0.85rem;
}

/* Anomaly filters */
.anomaly-filters {
    margin-top: var(--space-2);
}

.anomaly-filters .search-bar {
    position: relative;
}

.anomaly-filters .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.anomaly-filters .input-search {
    padding-left: 2rem;
}

/* Mobile responsive anomaly filters */
@media (max-width: 768px) {
    .anomaly-filters {
        flex-direction: column;
        align-items: stretch !important;
    }

    .anomaly-filters .search-bar {
        max-width: 100% !important;
    }

    .batch-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .batch-actions-bar .batch-buttons {
        justify-content: center;
    }
}

/* ============================================
   ANOMALY GROUPS (Duplicate Patterns)
   ============================================ */

.anomaly-group {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-4);
    border-left: 4px solid var(--gray-300);
    overflow: hidden;
}

.anomaly-group.high {
    border-left-color: var(--danger);
}

.anomaly-group.medium {
    border-left-color: var(--warning);
}

.anomaly-group.low {
    border-left-color: var(--info);
}

.anomaly-group-header {
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.anomaly-group-title {
    flex: 1;
}

.anomaly-group-title i {
    color: var(--primary);
    margin-right: var(--space-2);
}

.anomaly-group-title h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.anomaly-group-title p {
    margin: var(--space-1) 0 0 0;
    color: var(--gray-600);
    font-size: 0.8rem;
}

.anomaly-group-total {
    text-align: right;
    flex-shrink: 0;
}

.anomaly-group-total span {
    display: block;
    font-size: 0.7rem;
}

.anomaly-group-total strong {
    font-size: 1.1rem;
    color: var(--gray-900);
}

/* Group comparison table */
.anomaly-group-table {
    padding: 0;
}

.anomaly-group-table .table-wrapper {
    margin: 0;
    border-radius: 0;
}

.anomaly-group-table .modern-table {
    margin: 0;
}

.anomaly-group-table .modern-table.compact th,
.anomaly-group-table .modern-table.compact td {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8rem;
}

/* Group actions */
.anomaly-group-actions {
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Extra small buttons for review actions */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Mobile: Stack group header */
@media (max-width: 768px) {
    .anomaly-group-header {
        flex-direction: column;
    }

    .anomaly-group-total {
        text-align: left;
        padding-top: var(--space-2);
        border-top: 1px solid var(--gray-200);
        width: 100%;
    }

    .anomaly-group-actions {
        justify-content: flex-start;
    }
}

/* Modern Buttons */
.btn {
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

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

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Button Active States - Immediate feedback on click */
.btn:active,
.btn.active {
    transform: translateY(1px) scale(0.98);
    box-shadow: none;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

.btn-primary:active {
    background: linear-gradient(135deg, #0284C7, #0D9488);
}

.btn-success:active {
    background: #059669;
}

.btn-danger:active {
    background: #DC2626;
}

.btn-outline:active {
    background: var(--gray-100);
    transform: translateY(1px) scale(0.98);
}

/* Active/selected state for filter buttons */
.btn-outline.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.btn-outline.active:hover {
    background: var(--tropical-teal);
    border-color: var(--tropical-teal);
    color: white;
}

/* Button Focus States - Accessibility for keyboard navigation */
.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* Close Button Focus States - Accessibility */
.btn-close:focus {
    outline: none;
}

.btn-close:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
    opacity: 1;
}

/* Button Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Button Loading State - uses Bootstrap spinner-border injected via JS */
.btn.btn-loading {
    pointer-events: none;
    cursor: wait !important;
    opacity: 0.85;
}

/* Global loading cursor when async operations are in progress */
body.loading-cursor,
body.loading-cursor * {
    cursor: wait !important;
}

/* ============================================
   Standardized Badge System
   ============================================ */

/* Base badge styles */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    vertical-align: middle;
}

/* Soft style badges (default) - light background with colored text */
/* Use high specificity selectors to override Bootstrap */
.badge.badge-success,
span.badge-success,
.badge-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
}

.badge.badge-warning,
span.badge-warning,
.badge-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #D97706 !important;
}

.badge.badge-danger,
span.badge-danger,
.badge-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #DC2626 !important;
}

.badge.badge-info,
span.badge-info,
.badge-info {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #0891B2 !important;
}

.badge-primary,
.badge.bg-primary {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #0284C7 !important;
}

.badge-secondary,
.badge.bg-secondary {
    background: rgba(100, 116, 139, 0.15) !important;
    color: #475569 !important;
}

.badge-dark,
.badge.bg-dark {
    background: #1e293b !important;
    color: white !important;
}

/* Solid style badges - full color background */
.badge-solid-success {
    background: var(--success) !important;
    color: white !important;
}

.badge-solid-warning {
    background: var(--warning) !important;
    color: white !important;
}

.badge-solid-danger {
    background: var(--danger) !important;
    color: white !important;
}

.badge-solid-info {
    background: var(--info) !important;
    color: white !important;
}

.badge-solid-primary {
    background: var(--primary) !important;
    color: white !important;
}

/* Semantic badges - Role badges */
.badge-role-admin {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
}

.badge-role-manager {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.2);
}

.badge-role-fund-manager {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

.badge-role-stock-manager {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.badge-role-tour-manager {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.badge-role-ops-coordinator {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2);
}

.badge-role-employee {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

/* Semantic badges - Status badges */
.badge-status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.badge-status-inactive {
    background: rgba(100, 116, 139, 0.15);
    color: #64748B;
}

.badge-status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.badge-status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.badge-status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

/* Semantic badges - Invoice status */
.badge-invoice-paid {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.badge-invoice-partial {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.badge-invoice-overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

.badge-invoice-open {
    background: rgba(6, 182, 212, 0.15);
    color: #0891B2;
}

/* Semantic badges - Sync status */
.badge-sync-connected {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.badge-sync-disconnected {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

.badge-sync-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

/* Badge with icon */
.badge i {
    font-size: 0.7rem;
}

/* Badge sizes */
.badge-sm {
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
}

.badge-lg {
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
}

/* Inactive table rows */
.table-row-inactive {
    opacity: 0.6;
    background-color: rgba(100, 116, 139, 0.05) !important;
}

.table-row-inactive td {
    color: var(--text-secondary);
}

/* ============================================
   Pagination Styles
   ============================================ */

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.pagination-info {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition);
}

.page-item .page-link:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--primary);
}

.page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
    background: var(--gray-50);
}

/* Pagination Focus States - Accessibility */
.page-item .page-link:focus {
    outline: none;
}

.page-item .page-link:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
    z-index: 1;
}

.pagination-sm .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

/* Bank Account Type Badges - Enhanced visibility */
.badge-cash-box {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    border: none;
}

.badge-shared {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
    border: none;
}

/* Default Payment Account Badge - Enhanced */
.badge-default-account {
    background: #10B981;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* Active Default Badge - Enhanced */
.badge-active-default {
    background: #ECFDF5;
    color: #065F46;
    font-size: 0.75rem;
    padding: 6px 10px;
    border: 1.5px solid #10B981;
    font-weight: 600;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Form Validation States */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success);
    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");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
    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-width='1.5' d='M4 4l4 4m0-4L4 8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

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

.valid-feedback {
    display: none;
    color: var(--success);
    font-size: 0.8rem;
    margin-top: var(--space-1);
}

.invalid-feedback {
    display: none;
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: var(--space-1);
}

.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
    display: block;
}

.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Native HTML5 validation support */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--success);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--danger);
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback {
    display: block;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback {
    display: block;
}

/* ============================================
   Drag & Drop File Upload Zone
   ============================================ */
.drop-zone {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--gray-50);
    position: relative;
}

.drop-zone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.drop-zone-active {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    transform: scale(1.01);
}

.drop-zone-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.drop-zone-content {
    pointer-events: none;
}

.drop-zone-icon {
    font-size: 3rem;
    color: var(--gray-400);
    margin-bottom: 0.5rem;
    display: block;
    transition: color 0.2s ease;
}

.drop-zone:hover .drop-zone-icon,
.drop-zone-active .drop-zone-icon {
    color: var(--primary);
}

.drop-zone-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
}

.drop-zone-hint {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

/* Compact drop zone variant - for inline use in cards */
.drop-zone.drop-zone-compact {
    padding: 1rem 1.5rem;
    border-radius: 8px;
}

.drop-zone.drop-zone-compact .drop-zone-icon {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.drop-zone.drop-zone-compact .drop-zone-text {
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* File Preview */
.file-preview {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.file-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.file-preview-name {
    font-weight: 500;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
}

.file-preview-content {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    background: var(--gray-50);
}

.file-preview-content img {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
}

/* Alerts */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-left: 4px solid var(--success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-left: 4px solid var(--warning);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-left: 4px solid var(--danger);
}

.alert-info {
    background: rgba(6, 182, 212, 0.1);
    color: var(--info);
    border-left: 4px solid var(--info);
}

.alert-secondary {
    background: rgba(107, 114, 128, 0.1);
    color: var(--gray-600);
    border-left: 4px solid var(--gray-400);
}

.alert-light {
    background: rgba(249, 250, 251, 0.8);
    color: var(--gray-600);
    border-left: 4px solid var(--gray-300);
}

/* Alert content layout */
.alert-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-content .alert-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.alert-content .alert-message {
    flex: 1;
    line-height: 1.4;
}

.alert-content .btn-close {
    flex-shrink: 0;
    margin: -0.25rem -0.25rem -0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Inline Alerts (embedded in page content) */
.alert-inline {
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    animation: alertInlineIn 0.3s ease;
}

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

.alert-inline .alert-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-inline .alert-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 1px;
}

.alert-inline .alert-message {
    flex: 1;
    line-height: 1.5;
}

.alert-inline .btn-close {
    flex-shrink: 0;
    font-size: 0.65rem;
    opacity: 0.6;
    padding: 0.5rem;
}

.alert-inline .btn-close:hover {
    opacity: 1;
}

/* Floating Alerts (toast notifications) */
.alert-floating {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: var(--z-notification);
    min-width: 320px;
    max-width: 450px;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: alertSlideIn 0.3s ease-out;
    background: white;
}

.alert-floating.alert-success {
    background: rgba(16, 185, 129, 0.95);
    color: white;
    border-left: none;
}

.alert-floating.alert-warning {
    background: rgba(245, 158, 11, 0.95);
    color: white;
    border-left: none;
}

.alert-floating.alert-danger {
    background: rgba(239, 68, 68, 0.95);
    color: white;
    border-left: none;
}

.alert-floating.alert-info {
    background: rgba(6, 182, 212, 0.95);
    color: white;
    border-left: none;
}

.alert-floating .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.alert-floating .btn-close:hover {
    opacity: 1;
}

.alert-floating .btn-close:focus {
    outline: none;
}

.alert-floating .btn-close:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    opacity: 1;
}

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

/* Alert dismiss animation */
.alert-floating.alert-dismissing {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Autocomplete Suggestions */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 250px;
    overflow-y: auto;
    z-index: var(--z-autocomplete);
    margin-top: 4px;
    display: none;
}

.autocomplete-suggestions:not(:empty) {
    display: block;
}

.autocomplete-suggestion {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: var(--transition);
    background: white;
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestion:hover {
    background: var(--gray-50);
}

.autocomplete-suggestion-name {
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.autocomplete-suggestion-email {
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* Mobile Menu Button - Hidden on desktop */
.btn-mobile-menu {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-700);
    padding: 0.5rem;
    margin-right: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: var(--transition);
}

.btn-mobile-menu:hover {
    background: var(--gray-100);
    color: var(--primary);
}

/* Sidebar Backdrop - Hidden by default */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sidebar) - 2); /* Below mobile sidebar */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .btn-mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar {
        transform: translateX(-100%);
        z-index: calc(var(--z-sidebar) - 1); /* Above backdrop, below modals */
        transition: transform 0.3s ease;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* Sidebar close button - visible only on mobile */
    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: var(--radius);
        color: white;
        font-size: 1.25rem;
        cursor: pointer;
        transition: var(--transition);
        flex-shrink: 0;
    }

    .sidebar-close-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .sidebar-close-btn:active {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(0.95);
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .content-wrapper {
        max-width: 100%;
        overflow-x: auto;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 0.75rem 1rem;
    }

    .topbar-title {
        font-size: 1.1rem;
    }

    /* Hide Quick Action text on mobile */
    #quickActionBtn span {
        display: none;
    }

    #quickActionBtn {
        padding: 0.5rem 0.75rem;
    }
}

/* Autocomplete Suggestions Dropdown */
.item-search-cell {
    position: relative;
    overflow: visible !important;
}

/* Ensure tables don't clip dropdowns */
table {
    overflow: visible;
}

table tbody,
table tr,
table td {
    overflow: visible;
}

/* Fix Bootstrap table-responsive clipping dropdowns */
.table-responsive {
    overflow: visible !important;
}

.suggestions-dropdown,
.item-suggestions,
.receipt-item-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-autocomplete);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 250px;
    overflow-y: auto;
    display: none;
}

.suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--gray-50);
}

.suggestion-item:focus {
    outline: none;
}

.suggestion-item:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: -2px;
    background: var(--gray-50);
}

.suggestion-item .fw-bold {
    color: var(--gray-800);
}

.suggestion-item .text-muted {
    font-size: 0.8rem;
    display: block;
    margin-top: 2px;
}

.suggestion-item .text-success {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 4px;
}

/* Suggestion section header (for "Recent" label) */
.suggestion-section-header {
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.suggestion-section-header i {
    margin-right: 6px;
}

/* Suggestion footer (for "Create New" action) */
.suggestion-footer {
    padding: 12px;
    text-align: center;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--primary);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    cursor: pointer;
    transition: background 0.15s ease;
}

.suggestion-footer:hover {
    background: var(--gray-100);
}

.suggestion-footer i {
    margin-right: 6px;
}

/* Highlighted suggestion (keyboard navigation) */
.suggestion-highlighted {
    background: var(--gray-100) !important;
}

/* Highlight matched text */
.suggestion-item mark {
    background: rgba(14, 165, 233, 0.15);
    color: var(--tropical-blue);
    padding: 0 2px;
    border-radius: 2px;
}

/* Receipt Drop Zone */
.receipt-drop-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--gray-50);
}

.receipt-drop-zone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.receipt-drop-zone:focus {
    outline: none;
}

.receipt-drop-zone:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: 2px;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

.receipt-drop-zone.drag-over {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    border-style: solid;
}

.receipt-drop-zone p {
    margin: 0.5rem 0;
    color: var(--gray-600);
    font-weight: 500;
}

/* Drop zone actions */
.drop-zone-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================================
   Receipt Drop Zone - Responsive Design
   ============================================ */

/* Drop zone icon styling */
.drop-zone-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.drop-zone-icon-desktop {
    color: var(--gray-400);
}

.drop-zone-icon-mobile {
    color: var(--primary);
}

/* Drop zone text */
.drop-zone-text {
    font-weight: 500;
    color: var(--gray-700);
}

/* Button styling */
.btn-camera {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-camera i {
    font-size: 1.25rem;
}

.btn-gallery {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
}

/* Desktop view (default) - hide mobile elements */
.drop-zone-icon-mobile,
.drop-zone-text-mobile,
.btn-camera,
.btn-gallery {
    display: none !important;
}

/* Desktop view - show desktop elements */
.drop-zone-icon-desktop,
.drop-zone-text-desktop {
    display: block;
}

.btn-browse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* QR Upload button (desktop only) */
.btn-qr-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-left: 0.5rem;
}

/* Mobile view (max-width: 768px) */
@media (max-width: 768px) {
    /* Hide desktop elements */
    .drop-zone-icon-desktop,
    .drop-zone-text-desktop,
    .btn-browse,
    .btn-qr-upload {
        display: none !important;
    }

    /* Show mobile elements */
    .drop-zone-icon-mobile,
    .drop-zone-text-mobile {
        display: block !important;
    }

    .btn-camera,
    .btn-gallery {
        display: inline-flex !important;
    }

    /* Mobile drop zone styling */
    .receipt-drop-zone {
        padding: 1.5rem 1rem;
        border-style: solid;
        border-color: var(--primary);
        background: rgba(14, 165, 233, 0.05);
    }

    .drop-zone-actions {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .drop-zone-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }

    .btn-camera {
        font-size: 1.1rem;
    }

    .btn-gallery {
        background: var(--gray-100);
        border: 1px solid var(--gray-300);
        color: var(--gray-700);
        transition: var(--transition);
    }

    .btn-gallery:hover {
        background: var(--gray-200);
    }
}

/* ============================================
   Inline QR Code Zone (Desktop only)
   ============================================ */
.receipt-upload-container {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.receipt-drop-zone-with-qr {
    flex: 1;
}

.inline-qr-zone {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--gray-50);
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
}

.inline-qr-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inline-qr-header i {
    font-size: 0.875rem;
}

.inline-qr-code {
    background: white;
    padding: 8px;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    min-height: 116px;
}

.inline-qr-code img,
.inline-qr-code canvas {
    display: block;
}

.inline-qr-loading {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-qr-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--gray-500);
    font-size: 0.75rem;
}

.inline-qr-error .btn-link {
    font-size: 0.7rem;
    padding: 0;
}

.inline-qr-timer {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inline-qr-timer.timer-warning {
    color: var(--warning);
    font-weight: 600;
}

.inline-qr-uploaded {
    font-size: 0.7rem;
    color: var(--success);
    font-weight: 600;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Hide QR zone on mobile */
@media (max-width: 991px) {
    .receipt-upload-container {
        display: block;
    }

    .inline-qr-zone {
        display: none !important;
    }
}

/* ============================================
   Expense QR Code - Larger (1/3 of container)
   ============================================ */
#inlineQRZone {
    flex: 0 0 33%;
    min-width: 200px;
    max-width: 280px;
    padding: 1.5rem;
}

#inlineQRCode {
    min-width: 180px;
    min-height: 180px;
    padding: 12px;
}

#inlineQRCode img,
#inlineQRCode canvas {
    width: 156px !important;
    height: 156px !important;
}

/* ============================================
   Sales Receipt QR Code - Medium (1/4 of container)
   ============================================ */
#receiptPaymentProofQRZone {
    flex: 0 0 25%;
    min-width: 160px;
    max-width: 220px;
    padding: 1.25rem;
}

#receiptPaymentProofQRCode {
    min-width: 140px;
    min-height: 140px;
    padding: 10px;
}

#receiptPaymentProofQRCode img,
#receiptPaymentProofQRCode canvas {
    width: 120px !important;
    height: 120px !important;
}

/* ============================================
   Stock Expense QR Code - Larger for modal
   ============================================ */
#stockExpenseQRZone {
    flex: 0 0 180px;
    min-width: 180px;
    padding: 1.25rem;
}

#stockExpenseQRCode {
    min-width: 160px;
    min-height: 160px;
    padding: 10px;
}

#stockExpenseQRCode img,
#stockExpenseQRCode canvas {
    width: 140px !important;
    height: 140px !important;
}

/* ============================================
   TOF Expense QR Code - Larger (1/3 of container)
   ============================================ */
#tofExpenseQRZone {
    flex: 0 0 33%;
    min-width: 200px;
    max-width: 280px;
    padding: 1.5rem;
}

#tofExpenseQRCode {
    min-width: 180px;
    min-height: 180px;
    padding: 12px;
}

#tofExpenseQRCode img,
#tofExpenseQRCode canvas {
    width: 156px !important;
    height: 156px !important;
}

/* ============================================
   ETDF QR Code - Larger (1/3 of container)
   ============================================ */
#etdfQRZone {
    flex: 0 0 33%;
    min-width: 200px;
    max-width: 280px;
    padding: 1.5rem;
}

#etdfQRCode {
    min-width: 180px;
    min-height: 180px;
    padding: 12px;
}

#etdfQRCode img,
#etdfQRCode canvas {
    width: 156px !important;
    height: 156px !important;
}

/* Receipt Previews */
.receipt-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.receipt-preview-item {
    position: relative;
    width: 100px;
    text-align: center;
}

.receipt-preview-thumb {
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    border: 2px solid var(--gray-200);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    position: relative;
}

.receipt-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.receipt-preview-name {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
    word-break: break-all;
}

.receipt-preview-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--coral);
    color: white;
    border: 2px solid white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.receipt-preview-remove:hover {
    background: #DC2626;
    transform: scale(1.1);
}

.receipt-uploading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Receipt Gallery Modal */
.receipt-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.receipt-gallery-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--gray-50);
}

.receipt-gallery-preview {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    overflow: hidden;
    cursor: pointer;
}

.receipt-gallery-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.receipt-gallery-preview img:hover {
    transform: scale(1.05);
}

.receipt-gallery-info {
    padding: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.receipt-gallery-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receipt-gallery-size {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.receipt-gallery-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--gray-200);
    background: white;
}

.receipt-gallery-actions .btn {
    flex: 1;
    text-align: center;
}

/* Receipt Preview Grid (inline in expense detail) */
.receipt-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.receipt-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.receipt-preview-item:hover {
    background: var(--gray-100);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.receipt-preview-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    background: white;
}

.receipt-preview-pdf {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 6px;
}

.receipt-preview-pdf i {
    font-size: 2.5rem;
    color: var(--coral);
}

.receipt-preview-name {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--gray-600);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ============================================
   Payment Modal
   ============================================ */

/* Selected row in invoice table */
.payment-selected {
    background-color: rgba(16, 185, 129, 0.08) !important;
    box-shadow: inset 4px 0 0 var(--success);
}

.payment-selected td {
    background-color: transparent !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    /* Note: removed position:fixed to allow native select dropdowns to display properly */
}

/* General Modal Styles */
.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-modal) !important;
    align-items: flex-start !important; /* Start from top to allow scrolling tall modals */
    justify-content: center !important;
    background: transparent !important; /* No background on container */
    overflow-y: auto; /* Allow modal container to scroll if needed */
    overscroll-behavior: contain; /* Prevent scroll chaining to body */
    padding: 2rem 0; /* Vertical padding for scrollable area */
}

/* Only show modal when it has .show class */
.modal:not(.show) {
    display: none !important;
}

.modal.show {
    display: flex !important;
}

/* Dark backdrop as pseudo-element behind modal content */
.modal.show::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1; /* Behind the modal-dialog */
    pointer-events: none; /* Don't block clicks on modal content */
}

/* Hide Bootstrap's backdrop - we use ::before pseudo-element instead */
.modal-backdrop {
    display: none !important;
}

.modal .modal-dialog {
    position: relative !important;
    z-index: 1 !important; /* Above the backdrop */
    width: 100%;
    max-width: 500px;
    margin: 0 1rem; /* Horizontal margin only - vertical handled by modal padding */
    max-height: none; /* Allow natural height, scrolling handled by modal container */
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Don't shrink when content is tall */
}

.modal .modal-dialog.modal-sm { max-width: 300px; }
.modal .modal-dialog.modal-lg { max-width: 800px; }
.modal .modal-dialog.modal-xl { max-width: 1140px; }

.modal .modal-content {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 4rem) !important; /* Max height with room for padding */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* When form is direct child of modal-content, make it flex too */
.modal .modal-content > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important; /* Required for flex child to allow shrinking */
    overflow: hidden !important;
}

.modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0 !important; /* Don't shrink header */
    gap: var(--space-3);
}

.modal .modal-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.3;
}

/* Modal header icon styling - consistent icon appearance */
.modal .modal-title i,
.modal .modal-title .bi {
    font-size: 1.125rem;
    opacity: 0.85;
    flex-shrink: 0;
}

/* ============================================
   Modal Header Variants - Semantic Styling
   ============================================

   Usage patterns:
   - Default: Standard modal (no extra class needed)
   - Primary: Create/new item modals (.modal-header-primary)
   - Success: Confirmation/completion modals (.modal-header-success)
   - Warning: Caution modals (.modal-header-warning)
   - Danger: Delete/destructive action modals (.modal-header-danger)
   - Info: Information/detail view modals (.modal-header-info)
   ============================================ */

/* Default modal header - subtle gradient for premium feel */
.modal .modal-header {
    background: linear-gradient(to bottom, white, var(--gray-50));
}

/* Primary variant - for create/new actions */
.modal .modal-header-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #0284c7 100%);
    border-bottom-color: transparent;
    color: white;
}

.modal .modal-header-primary .modal-title {
    color: white;
}

.modal .modal-header-primary .modal-title i {
    opacity: 0.9;
}

.modal .modal-header-primary .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

/* Success variant - for confirmations, completions */
.modal .modal-header-success {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    border-bottom-color: transparent;
    color: white;
}

.modal .modal-header-success .modal-title {
    color: white;
}

.modal .modal-header-success .modal-title i {
    opacity: 0.9;
}

.modal .modal-header-success .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

/* Warning variant - for caution modals */
.modal .modal-header-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
    border-bottom-color: transparent;
    color: white;
}

.modal .modal-header-warning .modal-title {
    color: white;
}

.modal .modal-header-warning .modal-title i {
    opacity: 0.9;
}

.modal .modal-header-warning .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

/* Danger variant - for delete/destructive actions */
.modal .modal-header-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    border-bottom-color: transparent;
    color: white;
}

.modal .modal-header-danger .modal-title {
    color: white;
}

.modal .modal-header-danger .modal-title i {
    opacity: 0.9;
}

.modal .modal-header-danger .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

/* Info variant - for detail views, information */
.modal .modal-header-info {
    background: linear-gradient(135deg, var(--info) 0%, #0891b2 100%);
    border-bottom-color: transparent;
    color: white;
}

.modal .modal-header-info .modal-title {
    color: white;
}

.modal .modal-header-info .modal-title i {
    opacity: 0.9;
}

.modal .modal-header-info .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

/* Secondary/neutral variant - for general modals */
.modal .modal-header-secondary {
    background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
    border-bottom-color: transparent;
    color: white;
}

.modal .modal-header-secondary .modal-title {
    color: white;
}

.modal .modal-header-secondary .modal-title i {
    opacity: 0.9;
}

.modal .modal-header-secondary .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

/* Icon-accent variant - subtle header with colored icon */
.modal .modal-header-icon-primary .modal-title i {
    color: var(--primary);
    opacity: 1;
}

.modal .modal-header-icon-success .modal-title i {
    color: var(--success);
    opacity: 1;
}

.modal .modal-header-icon-warning .modal-title i {
    color: var(--warning);
    opacity: 1;
}

.modal .modal-header-icon-danger .modal-title i {
    color: var(--danger);
    opacity: 1;
}

.modal .modal-header-icon-info .modal-title i {
    color: var(--info);
    opacity: 1;
}

/* ============================================
   Premium Modal Palette - Operations/Schedule
   ============================================ */

.modal .modal-dialog.modal-premium-shell .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 28px 54px -30px rgba(15, 23, 42, 0.55);
    overflow: hidden;
}

.modal .modal-dialog.modal-premium-shell .modal-header {
    border-bottom: none;
    padding: 1rem 1.35rem;
}

.modal .modal-dialog.modal-premium-shell .modal-header .modal-title {
    color: white;
    font-weight: 600;
}

.modal .modal-dialog.modal-premium-shell .modal-header .modal-title i,
.modal .modal-dialog.modal-premium-shell .modal-header .modal-title .bi {
    opacity: 0.92;
}

.modal .modal-dialog.modal-premium-shell .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

.modal .modal-dialog.modal-premium-shell .modal-header .btn-close:hover {
    opacity: 1;
}

.modal .modal-dialog.modal-premium-shell .modal-body.modal-body-premium {
    background: #fafbfc;
}

.modal .modal-dialog.modal-premium-shell .modal-footer.modal-footer-premium {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-navy {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-planning {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-mauve {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-success {
    background: linear-gradient(135deg, #166534 0%, #14532d 100%);
}

.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-warning {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}

/* Close button base styling for consistency */
.modal .btn-close {
    padding: 0.5rem;
    margin: -0.5rem -0.25rem -0.5rem auto;
    background-size: 0.75rem;
    border-radius: var(--radius-sm);
    opacity: 0.6;
    transition: var(--transition);
}

.modal .btn-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

.modal .btn-close:focus {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.modal .modal-body {
    padding: 1.5rem;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important; /* Required for flex child to scroll */
    overscroll-behavior: contain; /* Prevent scroll chaining to body */
}

.modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0 !important; /* Don't shrink footer */
}

/* Payment modal styling */
.payment-modal .modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.payment-modal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.payment-modal .modal-footer {
    border-top: none;
    padding-top: 0;
}

.payment-modal .modal-title {
    font-weight: 600;
    color: var(--gray-800);
}

/* Invoice summary in modal */
.payment-modal .invoice-summary {
    text-align: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.payment-modal .invoice-summary .invoice-number {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--gray-800);
}

.payment-modal .invoice-summary .customer-name {
    color: var(--gray-500);
    font-size: 0.9rem;
}

/* Amount display in modal */
.payment-modal .amount-display {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.payment-modal .amount-box {
    flex: 1;
    text-align: center;
    padding: 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}

.payment-modal .amount-box .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.payment-modal .amount-box .value {
    font-size: 1.25rem;
    font-weight: 600;
}

.payment-modal .amount-box .value.text-danger {
    color: var(--danger);
}

.payment-modal .amount-box .value.text-success {
    color: var(--success);
}

/* Quick amount chips */
.payment-modal .quick-amount-chips {
    display: flex;
    gap: 0.5rem;
}

.payment-modal .quick-chip {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid var(--primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.payment-modal .quick-chip:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
}

.payment-modal .quick-chip:active {
    transform: translateY(0);
}

/* Payment input */
.payment-modal .payment-input {
    margin-bottom: 1rem;
}

.payment-modal .payment-input .input-group-lg .form-control {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: right;
}

.payment-modal .payment-input .input-group-lg .input-group-text {
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--gray-100);
    border-color: var(--gray-300);
}

/* Deposit account info */
.payment-modal .deposit-info {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}

.payment-modal .deposit-info i {
    color: var(--primary);
}

/* Modal action buttons */
.payment-modal .modal-footer .btn-success {
    padding: 0.75rem 2rem;
    font-weight: 500;
}

/* =========================================
   Settings Tabs
   ========================================= */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
    padding-bottom: 2px;
    max-width: 100%;
}

/* Ensure settings page content doesn't overflow */
#settingsContent {
    max-width: 100%;
    overflow-x: hidden;
}

.settings-tabs::-webkit-scrollbar {
    height: 4px;
}

.settings-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.settings-tabs::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.settings-tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    color: var(--gray-600);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.settings-tab:hover {
    color: var(--gray-800);
    background: var(--gray-50);
}

.settings-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.settings-tab i {
    font-size: 1rem;
}

.settings-tab-content {
    animation: fadeIn 0.2s ease;
}

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

/* Mobile: Bottom sheet style */
@media (max-width: 575.98px) {
    .payment-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
    }

    .payment-modal .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }

    .payment-modal .modal-body {
        padding: 1.5rem;
    }

    .payment-modal .quick-amounts {
        flex-direction: column;
    }

    .payment-modal .quick-amounts .btn {
        padding: 0.75rem;
    }

    .payment-modal .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.5rem 1.5rem;
    }

    .payment-modal .modal-footer .btn {
        width: 100%;
        padding: 0.875rem;
    }

    .payment-modal .modal-footer .btn-success {
        order: -1;
    }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   ============================================ */

/* Tablet breakpoint (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }

    .main-content {
        margin-left: 200px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Mobile breakpoint enhancements */
@media (max-width: 768px) {
    /* Base adjustments */
    body {
        font-size: 14px;
    }

    /* Content wrapper */
    .content-wrapper {
        padding: 1rem;
    }

    /* Cards */
    .card {
        border-radius: var(--radius);
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start !important;
    }

    .card-header .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tables - horizontal scroll */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .modern-table {
        min-width: 600px;
        font-size: 0.85rem;
    }

    .modern-table th,
    .modern-table td {
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }

    /* Stat cards */
    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* Forms */
    .form-control {
        padding: 0.625rem 0.875rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .form-select {
        font-size: 16px;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.375rem;
    }

    /* Buttons - touch friendly */
    .btn {
        padding: 0.625rem 1rem;
        min-height: 44px; /* Apple HIG minimum touch target */
    }

    .btn-sm {
        padding: 0.5rem 0.75rem;
        min-height: 38px;
    }

    .btn-group {
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
        max-width: 100%;
    }

    .btn-group .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Modals - almost full screen */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 1rem);
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-body {
        padding: 1rem;
        max-height: 60vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* Row/column adjustments */
    .row {
        --bs-gutter-x: 1rem;
    }

    .col-md-6,
    .col-md-4,
    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Filter bars */
    .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .d-flex.gap-2 > * {
        flex: 1 1 auto;
        min-width: 120px;
    }

    /* Badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Page headers */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 h2 {
        text-align: center;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 .btn,
    .d-flex.justify-content-between.align-items-center.mb-4 .d-flex {
        width: 100%;
        justify-content: center;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-link {
        padding: 0.5rem 0.75rem;
        min-width: 40px;
        text-align: center;
    }

    /* Activity items */
    .activity-link {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start !important;
    }

    .activity-link .text-end {
        text-align: left !important;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Receipt previews */
    .receipt-previews {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Quick action dropdown */
    #quickActionBtn + .dropdown-menu {
        width: calc(100vw - 2rem);
        left: auto;
        right: 0;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Even more compact on small phones */
    .content-wrapper {
        padding: 0.75rem;
    }

    .topbar {
        padding: 0.5rem 0.75rem;
    }

    .topbar-title {
        font-size: 1rem;
    }

    /* Stack page header buttons */
    .d-flex.justify-content-between.align-items-center.mb-4 .d-flex.gap-2 {
        flex-direction: column;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 .btn {
        width: 100%;
    }

    /* Card headers stack completely */
    .card-header.d-flex {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Table font smaller */
    .modern-table {
        font-size: 0.8rem;
    }

    /* Receipts single column */
    .receipt-previews {
        grid-template-columns: 1fr;
    }

    /* Stats single value display */
    .stat-value {
        font-size: 1.25rem;
    }

    /* Modals full screen on small phones */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    .modal-body {
        max-height: calc(100vh - 130px);
    }
}

/* Landscape phone adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-body {
        max-height: 50vh;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Print styles */
@media print {
    .sidebar,
    .topbar,
    .btn,
    .modal-backdrop,
    .nav-item {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* Input widths for forms */
.input-width-auto {
    width: auto;
}

.input-width-sm {
    width: 120px;
}

.input-width-md {
    width: 200px;
}

.input-width-lg {
    width: 300px;
}

/* Brand color backgrounds (for headers, accents) */
.bg-brand-primary {
    background: linear-gradient(135deg, var(--tropical-blue), var(--tropical-teal));
    color: white;
}

.bg-brand-success {
    background: linear-gradient(135deg, #059669, #10B981) !important;
    color: white !important;
}

.bg-brand-info {
    background: linear-gradient(135deg, #0284C7, #38BDF8) !important;
    color: white !important;
}

/* Text colors using design system */
.text-brand-primary {
    color: var(--primary);
}

.text-brand-success {
    color: #059669;
}

.text-brand-info {
    color: #0284C7;
}

/* Activity item link styling */
.activity-link {
    cursor: pointer;
    transition: background 0.15s ease;
}

.activity-link:hover {
    background: var(--gray-50);
}

.activity-link:focus {
    outline: none;
}

.activity-link:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: -2px;
    background: var(--gray-50);
}

/* Clickable customer name link (subtle, no underline) */
.customer-link {
    cursor: pointer;
    color: inherit;
    transition: color 0.15s ease;
}

.customer-link:hover {
    color: var(--tropical-blue);
}

/* Dropdown item enhanced styling */
.dropdown-item-enhanced {
    display: block;
    padding: 12px 20px;
    color: var(--gray-800);
    text-decoration: none;
    transition: background 0.2s ease;
}

.dropdown-item-enhanced:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.dropdown-item-enhanced:focus {
    outline: none;
}

.dropdown-item-enhanced:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: -2px;
    background: var(--gray-50);
}

/* Sticky card positioning */
.sticky-card {
    position: sticky;
    top: 80px;
}

/* Summary card header (invoice/receipt totals) */
.summary-card-header {
    background: var(--primary);
    color: white;
    padding: 1rem 1.5rem;
}

.summary-card-header.success {
    background: #059669;
}

/* Max width container */
.max-w-600 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Column width helpers for tables */
.col-width-100 {
    width: 100px;
}

.col-width-120 {
    width: 120px;
}

/* Large input styling (for payment amounts) */
.input-amount-lg {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Z-index utility classes (use CSS variables) */
.z-dropdown {
    z-index: var(--z-dropdown);
}

.z-sticky {
    z-index: var(--z-sticky);
}

.z-sidebar {
    z-index: var(--z-sidebar);
}

.z-modal-backdrop {
    z-index: var(--z-modal-backdrop);
}

.z-modal {
    z-index: var(--z-modal);
}

.z-autocomplete {
    z-index: var(--z-autocomplete);
}

.z-notification {
    z-index: var(--z-notification);
}

/* ============================================
   Premium UI Components
   ============================================ */

/* Glass Morphism Card */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-premium);
}

.card-glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-premium);
}

/* Elevation Classes */
.elevation-1 {
    box-shadow: var(--shadow-sm);
}

.elevation-2 {
    box-shadow: var(--shadow);
}

.elevation-3 {
    box-shadow: var(--shadow-premium-sm);
}

.elevation-4 {
    box-shadow: var(--shadow-premium);
}

.elevation-5 {
    box-shadow: var(--shadow-premium-lg);
}

/* Card Hover Lift Effect */
.card-hover-lift {
    transition: var(--transition-smooth);
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium-lg);
}

/* Card with Glow on Hover */
.card-hover-glow {
    transition: var(--transition-smooth);
}

.card-hover-glow:hover {
    box-shadow: var(--shadow-glow-blue);
}

/* Premium Button Styles */
.btn-premium {
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: var(--transition-smooth);
}

.btn-premium:hover::before {
    left: 100%;
}

/* Button Press Animation */
.btn-press {
    transition: var(--transition-fast);
}

.btn-press:active {
    transform: scale(0.97);
}

/* Apply to all standard buttons */
.btn {
    transition: var(--transition-fast);
}

.btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* Premium Focus Ring */
.focus-ring:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Gradient Text */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--tropical-blue), var(--tropical-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtle Border Gradient Card */
.card-gradient-border {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
}

.card-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--tropical-blue), var(--tropical-teal));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ============================================
   CSS Tooltips - Fast, styled tooltips
   ============================================ */

/* Base tooltip styles using title attribute */
[title] {
    position: relative;
}

/* Icon buttons with fast CSS tooltips */
.btn-group-sm [title],
.btn-sm[title] {
    position: relative;
}

.btn-group-sm [title]::after,
.btn-sm[title]:not(.btn-primary):not(.btn-success):not(.btn-danger)::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 0.375rem 0.625rem;
    background: var(--gray-800);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: var(--shadow);
}

/* Arrow for tooltip */
.btn-group-sm [title]::before,
.btn-sm[title]:not(.btn-primary):not(.btn-success):not(.btn-danger)::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    border: 5px solid transparent;
    border-top-color: var(--gray-800);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
}

/* Show tooltip on hover - faster than native title */
.btn-group-sm [title]:hover::after,
.btn-group-sm [title]:hover::before,
.btn-sm[title]:not(.btn-primary):not(.btn-success):not(.btn-danger):hover::after,
.btn-sm[title]:not(.btn-primary):not(.btn-success):not(.btn-danger):hover::before {
    opacity: 1;
    visibility: visible;
}

/* Hide native title tooltip by clearing it on hover via JS is complex,
   so we rely on the fast CSS tooltip appearing before the native one */

/* Prevent tooltip on buttons with visible text (like "Pay", "History") */
.btn-sm:has(> :not(i:only-child))::after,
.btn-sm:has(> :not(i:only-child))::before {
    display: none;
}

/* ============================================
   AUTH PAGES - Unified Design System
   Login, Register, Forgot Password, Reset Password
   ============================================ */

/* Auth page background - matches brand while being professional */
.auth-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--ocean-dark) 0%, #164E63 50%, #115E59 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Decorative background pattern */
.auth-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(20, 184, 166, 0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Auth container */
.auth-container {
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
}

/* Auth card - main white card */
.auth-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: authSlideUp 0.5s ease-out;
}

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

/* Auth header - brand gradient top section */
.auth-header {
    background: linear-gradient(135deg, var(--tropical-teal), var(--tropical-blue));
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Subtle wave decoration in header */
.auth-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 20px;
    background: white;
    border-radius: 100% 100% 0 0;
}

.auth-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.auth-header .auth-logo {
    height: 48px;
    width: 48px;
    object-fit: contain;
    animation: authLogoFloat 3s ease-in-out infinite;
}

@keyframes authLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.auth-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Auth body - form area */
.auth-body {
    padding: var(--space-8) var(--space-6);
}

/* Auth form inputs with icons */
.auth-input-group {
    position: relative;
    margin-bottom: var(--space-4);
}

.auth-input-group label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
}

.auth-input-icon {
    position: relative;
}

.auth-input-icon i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 1.1rem;
    transition: color 0.2s ease;
    pointer-events: none;
}

.auth-input-icon .form-control {
    padding-left: 2.75rem;
    height: 48px;
    font-size: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.auth-input-icon .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.auth-input-icon .form-control:focus + i,
.auth-input-icon:focus-within i {
    color: var(--primary);
}

/* Auth submit button */
.btn-auth {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--tropical-teal), var(--tropical-blue));
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.btn-auth:active {
    transform: translateY(0);
}

.btn-auth:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Auth links */
.auth-link {
    color: var(--gray-500);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: var(--primary);
}

.auth-link-primary {
    color: var(--primary);
    font-weight: 600;
}

.auth-link-primary:hover {
    text-decoration: underline;
}

/* Auth footer section */
.auth-footer {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
    margin-top: var(--space-6);
}

.auth-footer p {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin: 0;
}

/* Auth divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--gray-400);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.auth-divider span {
    padding: 0 var(--space-4);
}

/* Auth feature list */
.auth-features {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0 0;
}

.auth-features li {
    padding: var(--space-2) 0;
    color: var(--gray-600);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.auth-features li i {
    color: var(--tropical-teal);
    font-size: 1rem;
}

/* Auth version text */
.auth-version {
    text-align: center;
    margin-top: var(--space-6);
    color: var(--gray-400);
    font-size: 0.8rem;
}

/* Password requirements hint */
.auth-hint {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: var(--space-1);
}

/* Auth page responsive */
@media (max-width: 480px) {
    .auth-page {
        padding: var(--space-4);
        align-items: flex-start;
        padding-top: var(--space-8);
    }

    .auth-card {
        border-radius: var(--radius-md);
    }

    .auth-header {
        padding: var(--space-6) var(--space-4);
    }

    .auth-header h1 {
        font-size: 1.5rem;
    }

    .auth-body {
        padding: var(--space-6) var(--space-4);
    }
}

/* Auth container variants */
.auth-container-wide {
    max-width: 500px;
}

/* Auth header variants - for different page themes */
.auth-header-warning {
    background: linear-gradient(135deg, #F97316, #EA580C);
}

/* Button variant for warning-themed auth pages */
.btn-auth-warning {
    background: linear-gradient(135deg, #F97316, #EA580C);
}

.btn-auth-warning:hover {
    background: linear-gradient(135deg, #EA580C, #C2410C);
    transform: translateY(-2px);
}

/* Invalid token state - for reset password page */
.invalid-token {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.invalid-token-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.invalid-token-icon i {
    font-size: 2.5rem;
    color: var(--danger);
}

.invalid-token h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--space-2);
}

.invalid-token p {
    color: var(--gray-500);
    margin-bottom: var(--space-6);
    font-size: 0.9rem;
}

/* ============================================
   TABLE REFINEMENTS - Premium Look
   ============================================ */

/* Subtle row highlight on hover */
.modern-table tbody tr {
    transition: background-color 0.15s ease;
}

/* Amount columns - right aligned with better styling */
.modern-table .col-amount {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Positive amounts */
.modern-table .amount-positive {
    color: var(--success);
}

/* Negative amounts / balances due */
.modern-table .amount-negative {
    color: var(--danger);
}

/* Neutral amounts */
.modern-table .amount-neutral {
    color: var(--gray-700);
}

/* Table row with left border indicator */
.modern-table tbody tr.row-highlight-success {
    border-left: 3px solid var(--success);
}

.modern-table tbody tr.row-highlight-warning {
    border-left: 3px solid var(--warning);
}

.modern-table tbody tr.row-highlight-danger {
    border-left: 3px solid var(--danger);
}

/* ============================================
   REFINED ACTION BUTTONS - Consistent Style
   ============================================ */

/* Action button group - consistent spacing */
.action-btn-group {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

/* Unified outline button style for table actions */
.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--gray-600);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.btn-action:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-action.btn-action-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.btn-action.btn-action-success:hover {
    border-color: var(--success);
    color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

/* ============================================
   CARD HEADER REFINEMENTS
   ============================================ */

/* Section header with count badge */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.section-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-header h3 i {
    color: var(--primary);
}

.section-count {
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

/* ============================================
   LANDING PAGE - Color Harmony Update
   These classes can be used to unify landing with app
   ============================================ */

/* If we want to harmonize landing page colors */
.landing-gradient-primary {
    background: linear-gradient(135deg, var(--ocean-dark) 0%, #0C4A6E 50%, var(--tropical-teal) 100%);
}

.landing-btn-primary {
    background: white;
    color: var(--ocean-dark);
    padding: 1rem 2rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-md);
}

.landing-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   FORM IMPROVEMENTS
   ============================================ */

/* Inline form row - for filters */
.form-row-inline {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-row-inline .form-group {
    margin-bottom: 0;
}

/* Compact form control for filters */
.form-control-compact {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    height: 38px;
}

/* Select with icon */
.select-with-icon {
    position: relative;
}

.select-with-icon .form-select {
    padding-left: 2.25rem;
}

.select-with-icon i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

/* ============================================
   PREMIUM DESIGN SYSTEM
   Inspired by Linear, Notion, and Stripe
   ============================================ */

/* ============================================
   PREMIUM SIDEBAR - Enhanced Navigation
   ============================================ */

.sidebar {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(20, 184, 166, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.sidebar-header {
    position: relative;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sidebar close button - hidden on desktop */
.sidebar-close-btn {
    display: none;
}

.sidebar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar-brand img {
    filter: drop-shadow(0 2px 8px rgba(14, 165, 233, 0.3));
}

.sidebar-user {
    position: relative;
    padding: 1rem 1.5rem;
    margin: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

.sidebar-user:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.sidebar-avatar {
    background: var(--gradient-premium-blue);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
    font-size: 0.875rem;
    font-weight: 700;
}

.nav-item {
    margin: 2px 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    border-left: none;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--tropical-blue);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.nav-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.nav-item.active {
    background: linear-gradient(90deg, var(--tropical-blue) 0%, rgba(14, 165, 233, 0.25) 100%);
    border-left: none;
    font-weight: 600;
}

.nav-item.active::before {
    height: 80%;
    width: 4px;
    background: white;
}

.nav-item i {
    font-size: 1rem;
    opacity: 0.7;
    transition: var(--transition-fast);
}

.nav-item:hover i,
.nav-item.active i {
    opacity: 1;
}

.nav-section-title {
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.08em;
}

/* Logout link - distinct styling */
.nav-item[onclick*="logout"] {
    color: var(--coral);
    opacity: 0.8;
}

.nav-item[onclick*="logout"]:hover {
    background: rgba(251, 113, 133, 0.1);
    opacity: 1;
}

/* ============================================
   COLLAPSIBLE SIDEBAR SECTIONS
   ============================================ */

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 1.5rem);
    margin: 0 0.75rem;
    padding: 1.25rem 0.75rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    transition: color 0.15s ease;
}

.nav-section-header:hover {
    color: var(--gray-300);
}

.nav-section-header:focus {
    outline: none;
}

.nav-section-header:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.nav-section-header .nav-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    margin: 0;
}

.nav-section-chevron {
    font-size: 0.7rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
}

.nav-section-header:hover .nav-section-chevron {
    opacity: 1;
}

.nav-section-header[aria-expanded="false"] .nav-section-chevron {
    transform: rotate(-90deg);
}

.nav-section-items {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.3s ease-out;
    opacity: 1;
}

.nav-section-items.collapsed {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.6, 1),
                opacity 0.2s ease-in;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .nav-section-chevron,
    .nav-section-items {
        transition: none;
    }
}

/* ============================================
   NESTED SUB-MENUS
   ============================================ */

.nav-submenu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 1.5rem);
    margin: 2px 0.75rem;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--gray-400);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
}

.nav-submenu-header:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-200);
}

.nav-submenu-header:focus {
    outline: none;
}

.nav-submenu-header:focus-visible {
    outline: 2px solid var(--tropical-blue);
    outline-offset: 2px;
}

.nav-submenu-header i:first-child {
    width: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

.nav-submenu-header span {
    flex: 1;
}

.nav-submenu-header .nav-badge {
    flex: 0 0 auto;
    margin-left: 0;
}

.nav-submenu-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.nav-submenu-header:hover .nav-submenu-chevron {
    opacity: 1;
}

.nav-submenu-header[aria-expanded="true"] .nav-submenu-chevron {
    transform: rotate(90deg);
}

.nav-submenu-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    opacity: 0;
}

.nav-submenu-items.expanded {
    max-height: 500px;
    opacity: 1;
}

.nav-subitem {
    padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
    font-size: 0.8125rem !important;
    margin: 1px 0.75rem !important;
    position: relative;
    overflow: hidden;
}

.nav-subitem::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--tropical-blue);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease;
}

.nav-subitem.active::before {
    height: 60%;
}

.nav-subitem.active {
    background: rgba(14, 165, 233, 0.12);
}

/* Respect reduced motion preference for sub-menus */
@media (prefers-reduced-motion: reduce) {
    .nav-submenu-chevron,
    .nav-submenu-items {
        transition: none;
    }
}

/* ============================================
   SIDEBAR COMPACT MODE (Icons Only)
   ============================================ */

:root {
    --sidebar-width-collapsed: 70px;
}

.sidebar-footer {
    position: sticky;
    bottom: 0;
    padding: 0.75rem;
    background: linear-gradient(180deg, transparent 0%, var(--gray-900) 30%);
    margin-top: auto;
}

.sidebar-collapse-toggle {
    width: 100%;
    padding: 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    color: var(--gray-400);
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.sidebar-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-collapse-toggle i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Collapsed sidebar state */
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-width-collapsed);
}

/* Hide text elements and pinned section in collapsed mode */
body.sidebar-collapsed .sidebar-brand span,
body.sidebar-collapsed .sidebar-user-info > div:last-child,
body.sidebar-collapsed .nav-section-header,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .sidebar-collapse-toggle span,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed #pinnedSection {
    display: none;
}

/* Show nav-section-items but compact in collapsed mode */
body.sidebar-collapsed .nav-section-items {
    display: block;
    padding: 0;
    margin: 0;
}

/* Hide submenus completely in collapsed mode */
body.sidebar-collapsed .nav-submenu-header,
body.sidebar-collapsed .nav-submenu-items {
    display: none !important;
}

/* Add small separator between sections in collapsed mode */
body.sidebar-collapsed .nav-section-items {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

/* Adjust header in collapsed mode */
body.sidebar-collapsed .sidebar-header {
    padding: 1rem 0.5rem;
    justify-content: center;
}

body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-brand img {
    margin-right: 0 !important;
}

/* Adjust user section in collapsed mode */
body.sidebar-collapsed .sidebar-user {
    padding: 0.5rem;
    margin: 0.25rem 0.5rem;
}

body.sidebar-collapsed .sidebar-user-info {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

/* Adjust nav items in collapsed mode */
body.sidebar-collapsed .nav-item {
    padding: 0.75rem;
    justify-content: center;
    margin: 2px 0.5rem;
    border-radius: var(--radius);
}

body.sidebar-collapsed .nav-item i {
    width: auto;
    font-size: 1.2rem;
    margin: 0;
}

/* Hide section titles in collapsed mode */
body.sidebar-collapsed .nav-section-title {
    display: none;
}

/* Rotate icon in collapsed mode */
body.sidebar-collapsed .sidebar-collapse-toggle i {
    transform: rotate(180deg);
}

/* Tooltips for collapsed sidebar items */
body.sidebar-collapsed .nav-item {
    position: relative;
}

body.sidebar-collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-800);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1001;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

body.sidebar-collapsed .nav-item:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Don't show tooltip for items without data-tooltip */
body.sidebar-collapsed .nav-item:not([data-tooltip])::after {
    display: none;
}

/* Sidebar footer adjustments in collapsed mode */
body.sidebar-collapsed .sidebar-footer {
    padding: 0.5rem;
}

body.sidebar-collapsed .sidebar-collapse-toggle {
    padding: 0.75rem;
}

/* Don't apply collapsed mode on mobile */
@media (max-width: 768px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }

    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }

    /* Show everything in mobile mode regardless of collapsed state */
    body.sidebar-collapsed .sidebar-brand span,
    body.sidebar-collapsed .sidebar-user-info > div:last-child,
    body.sidebar-collapsed .nav-section-header,
    body.sidebar-collapsed .nav-section-items,
    body.sidebar-collapsed .nav-item span,
    body.sidebar-collapsed .nav-badge,
    body.sidebar-collapsed .sidebar-collapse-toggle span,
    body.sidebar-collapsed .nav-section-title,
    body.sidebar-collapsed .nav-submenu-header,
    body.sidebar-collapsed .nav-submenu-items,
    body.sidebar-collapsed #pinnedSection {
        display: initial !important;
    }

    body.sidebar-collapsed .nav-section-items {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    body.sidebar-collapsed .nav-item::after {
        display: none;
    }

    /* Hide collapse toggle on mobile */
    .sidebar-footer {
        display: none;
    }
}

/* ============================================
   QUICK SEARCH (CMD+K)
   ============================================ */

.quick-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.quick-search-overlay.active {
    display: flex;
}

.quick-search-modal {
    width: 100%;
    max-width: 560px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: quickSearchSlideIn 0.15s ease-out;
}

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

.quick-search-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.quick-search-header > i {
    color: var(--gray-400);
    font-size: 1.1rem;
}

.quick-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--gray-900);
    background: transparent;
}

.quick-search-input::placeholder {
    color: var(--gray-400);
}

.quick-search-hint {
    background: var(--gray-100);
    color: var(--gray-500);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-family: inherit;
    border: 1px solid var(--gray-200);
}

.quick-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.quick-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.1s ease;
}

.quick-search-item:hover,
.quick-search-item.selected {
    background: var(--gray-50);
}

.quick-search-item.selected {
    background: var(--gray-100);
}

.quick-search-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius);
    color: var(--gray-600);
    font-size: 1rem;
}

.quick-search-item.selected .quick-search-item-icon {
    background: var(--primary);
    color: white;
}

.quick-search-item-content {
    flex: 1;
    min-width: 0;
}

.quick-search-item-name {
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-search-item-section {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.quick-search-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--gray-500);
}

.quick-search-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.quick-search-section-title {
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.05em;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

.quick-search-section-title:first-child {
    border-top: none;
}

.quick-search-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    font-size: 0.75rem;
    color: var(--gray-500);
}

.quick-search-footer kbd {
    background: white;
    border: 1px solid var(--gray-300);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.65rem;
    margin: 0 0.125rem;
}

/* Mobile adjustments for quick search */
@media (max-width: 768px) {
    .quick-search-overlay {
        padding: 1rem;
        padding-top: 3rem;
    }

    .quick-search-modal {
        max-width: 100%;
    }

    .quick-search-footer {
        display: none;
    }

    .quick-search-results {
        max-height: 60vh;
    }
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-nav-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1100;
    padding-bottom: var(--mobile-nav-safe-area);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /* Add padding to main content to prevent content being hidden behind bottom nav */
    .main-content {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-safe-area) + 48px);
    }

    /* Ensure all page containers have bottom spacing */
    .page-content,
    #pageContent,
    .dashboard-content {
        padding-bottom: calc(var(--mobile-nav-height) + 32px);
    }

    /* Hide mobile nav when modal is open to prevent overlap with modal footer buttons */
    body.modal-open .mobile-bottom-nav {
        display: none !important;
    }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0;
    gap: 0.25rem;
}

.mobile-nav-item i {
    font-size: 1.25rem;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--primary);
}

.mobile-nav-item.mobile-nav-action {
    color: white;
    position: relative;
}

.mobile-nav-item.mobile-nav-action::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    background: var(--gradient-premium-blue);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-nav-item.mobile-nav-action:active::before {
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.mobile-nav-item.mobile-nav-action span {
    display: none;
}

.mobile-nav-item.mobile-nav-action i {
    font-size: 1.5rem;
}

/* ============================================
   MOBILE BOTTOM SHEET
   ============================================ */

/* Desktop: Hide bottom sheet completely */
.bottom-sheet-overlay,
.bottom-sheet {
    display: none;
}

/* Mobile: Show bottom sheet with proper styling */
@media (max-width: 768px) {
    .bottom-sheet-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .bottom-sheet-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .bottom-sheet {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
        z-index: 1250;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: env(safe-area-inset-bottom, 0);
        max-height: 80vh;
        overflow-y: auto;
    }

    .bottom-sheet.active {
        transform: translateY(0);
    }
}

.bottom-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    margin: 0.75rem auto;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.bottom-sheet-header h5 {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
}

.bottom-sheet-content {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.bottom-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.5rem;
}

.bottom-sheet-item i {
    font-size: 1.5rem;
    color: var(--primary);
}

.bottom-sheet-item:hover {
    background: var(--gray-100);
    border-color: var(--primary);
}

.bottom-sheet-item:active {
    transform: scale(0.98);
}

/* ============================================
   MOBILE SWIPE AREA (for gesture navigation)
   ============================================ */

.swipe-edge-area {
    display: none;
}

@media (max-width: 768px) {
    .swipe-edge-area {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 20px;
        height: 100%;
        z-index: 999;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav,
    .mobile-nav-item,
    .mobile-nav-item.mobile-nav-action::before,
    .bottom-sheet-overlay,
    .bottom-sheet,
    .bottom-sheet-item {
        transition: none;
    }
}

/* ============================================
   PREMIUM TOPBAR - Glass Effect
   ============================================ */

.topbar {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-subtle);
    box-shadow: var(--shadow-premium-sm);
    padding: 0 2rem;
}

.topbar-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-800);
}

/* ============================================
   PREMIUM BUTTONS - Enhanced Styling
   ============================================ */

.btn {
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: var(--transition-smooth);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-primary {
    background: var(--gradient-premium-blue);
    border: none;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
    background: var(--gradient-premium-blue);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-success {
    background: var(--gradient-premium-success);
    border: none;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    background: var(--gradient-premium-success);
}

.btn-outline-primary {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

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

.btn-outline-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background: var(--gray-100);
    border-color: var(--gray-500);
    color: var(--gray-900);
}

/* Quick Action Button - Premium styling */
.btn-primary[onclick*="QuickAction"],
.topbar-actions .btn-primary {
    background: var(--gradient-premium-teal);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

.btn-primary[onclick*="QuickAction"]:hover,
.topbar-actions .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.4);
}

/* ============================================
   PREMIUM CARDS - Refined Styling
   ============================================ */

.card {
    background: white;
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    transition: var(--transition-smooth);
}

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

.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: var(--border-subtle);
    background: linear-gradient(to bottom, white, var(--gray-50));
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.card-title i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* ============================================
   TASK QUEUE - Premium Dashboard Priority Actions
   ============================================ */

/* Card container - glassmorphism with depth */
.task-queue-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.8);
    overflow: hidden;
    position: relative;
}

/* Header - bold, clear hierarchy */
.task-queue-card .card-header {
    background: linear-gradient(135deg, var(--gray-900) 0%, #1e293b 100%);
    border-bottom: none;
    padding: 1.125rem 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay on header */
.task-queue-card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.task-queue-card .card-header .card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.task-queue-card .card-header .card-title > i {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.7);
}

/* Critical count badge - prominent and pulsing */
.task-queue-critical-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.625rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 13px;
    box-shadow:
        0 2px 8px rgba(239, 68, 68, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.2);
    animation: pulse-critical 2s ease-in-out infinite;
    position: relative;
}

.task-queue-critical-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 15px;
    background: inherit;
    opacity: 0.4;
    filter: blur(4px);
    z-index: -1;
}

@keyframes pulse-critical {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Refresh button - sleek dark theme */
.task-queue-card .btn-refresh {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.task-queue-card .btn-refresh:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    color: white;
}

.task-queue-card .btn-refresh:active {
    transform: scale(0.92);
}

.task-queue-card .btn-refresh i {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.task-queue-card .btn-refresh:hover i {
    transform: rotate(360deg);
}

/* Task list container */
.task-queue-list {
    display: flex;
    flex-direction: column;
}

/* Individual task item - card-like treatment */
.task-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.task-item:last-child {
    border-bottom: none;
}

/* Hover state - lift effect */
.task-item:hover {
    background: linear-gradient(90deg, var(--gray-50) 0%, white 100%);
    transform: translateX(4px);
}

/* Severity indicator - prominent left accent */
.task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--info);
    transition: all 0.2s ease;
}

.task-item:hover::before {
    width: 5px;
    top: 4px;
    bottom: 4px;
}

/* === CRITICAL SEVERITY === */
.task-severity-critical {
    background: linear-gradient(90deg, rgba(254, 226, 226, 0.5) 0%, white 50%);
}

.task-severity-critical:hover {
    background: linear-gradient(90deg, rgba(254, 202, 202, 0.6) 0%, var(--gray-50) 50%);
}

.task-severity-critical::before {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.task-severity-critical .task-type-icon {
    animation: icon-pulse-critical 2s ease-in-out infinite;
}

@keyframes icon-pulse-critical {
    0%, 100% { box-shadow: 0 2px 12px rgba(239, 68, 68, 0.25); }
    50% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4); }
}

/* === HIGH SEVERITY === */
.task-severity-high {
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.4) 0%, white 50%);
}

.task-severity-high:hover {
    background: linear-gradient(90deg, rgba(253, 230, 138, 0.4) 0%, var(--gray-50) 50%);
}

.task-severity-high::before {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

/* === NORMAL SEVERITY === */
.task-severity-normal::before {
    background: linear-gradient(180deg, var(--primary) 0%, #0284c7 100%);
}

/* Severity badge - inline pill */
.task-severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.task-severity-critical .task-severity-badge {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.task-severity-high .task-severity-badge {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.task-severity-normal .task-severity-badge {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

/* Task type icon - larger, bolder */
.task-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    position: relative;
}

.task-item:hover .task-type-icon {
    transform: scale(1.08);
}

/* Entity type icon colors - vibrant, clear */
.task-type-icon.tour {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15);
}

.task-type-icon.stock_alert {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.15);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.15);
}

.task-type-icon.expense {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.15);
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.15);
}

.task-type-icon.supplier {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.15);
}

.task-type-icon.invoice {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.15);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15);
}

.task-type-icon.tof {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    color: #9333ea;
    border: 1px solid rgba(168, 85, 247, 0.15);
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.15);
}

.task-type-icon.worker_document {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.15);
    box-shadow: 0 2px 12px rgba(6, 182, 212, 0.15);
}

.task-type-icon.company {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: #4b5563;
    border: 1px solid rgba(107, 114, 128, 0.15);
    box-shadow: 0 2px 12px rgba(107, 114, 128, 0.1);
}

.task-type-icon.transfer {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.15);
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.15);
}

.task-type-icon.anomaly {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.15);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15);
}

/* Task content area */
.task-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Task header with badge */
.task-item-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.task-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* Task description */
.task-item-description {
    font-size: 0.8125rem;
    color: var(--gray-500);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-item-description i {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Task action button - prominent CTA */
.task-item-action {
    flex-shrink: 0;
}

.task-item-action .btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Default button state */
.task-item-action .btn {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
}

.task-item:hover .task-item-action .btn {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

/* Severity-specific button colors on hover */
.task-severity-critical:hover .task-item-action .btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.4);
}

.task-severity-high:hover .task-item-action .btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
}

.task-item-action .btn i {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.task-item:hover .task-item-action .btn i {
    transform: translateX(2px);
}

/* Dismiss button (Admin/Manager only) */
.task-dismiss-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
}

.task-item:hover .task-dismiss-btn {
    opacity: 1;
}

.task-dismiss-btn:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* Card footer - summary */
.task-queue-card .card-footer {
    background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
    border-top: 1px solid var(--gray-100);
    padding: 0.875rem 1.5rem;
}

.task-queue-summary {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.task-queue-summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.task-queue-summary-item:first-child {
    color: var(--gray-500);
    font-weight: 400;
}

.task-queue-summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
}

.task-queue-summary-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
}

.task-queue-summary-dot.critical {
    background: #ef4444;
}

.task-queue-summary-dot.high {
    background: #f59e0b;
}

.task-queue-summary-dot.normal {
    background: var(--primary);
}

.task-queue-overflow {
    padding: 0.75rem 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gray-500);
    border-top: 1px solid var(--gray-200);
}

/* Empty state */
.task-queue-empty {
    padding: 3.5rem 2rem;
    text-align: center;
}

.task-queue-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 1.75rem;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

.task-queue-empty-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.task-queue-empty-text {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
}

/* Loading state */
.task-queue-loading {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray-500);
}

.task-queue-loading-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 1rem;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.task-queue-loading-text {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    color: var(--gray-600);
}

/* Responsive */
@media (max-width: 768px) {
    .task-queue-card .card-header {
        padding: 1rem 1.25rem;
    }

    .task-queue-card .card-header .card-title {
        font-size: 0.9375rem;
    }

    .task-item {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

    .task-item::before {
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        height: auto;
        border-radius: 0 4px 4px 0;
    }

    .task-type-icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
        border-radius: 10px;
    }

    .task-item-content {
        flex: 1 1 calc(100% - 56px);
        min-width: calc(100% - 56px);
    }

    .task-item-action {
        width: 100%;
        margin-top: 0.25rem;
    }

    .task-item-action .btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
    }

    .task-queue-summary {
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }

    .task-queue-card .card-footer {
        padding: 0.75rem 1.25rem;
    }
}

/* ============================================
   PREMIUM STAT CARDS - Dashboard Metrics
   Ultra-refined design with glassmorphism,
   multi-layer depth, and fluid animations

   Accessibility Notes:
   - All color variants meet WCAG 2.1 AA contrast (4.5:1 for text)
   - Focus states use visible outline for keyboard users
   - Animations respect prefers-reduced-motion
   - Interactive cards have appropriate cursor and feedback
   ============================================ */

/* Keyframe animations for premium effects */
@keyframes stat-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes stat-glow-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes stat-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Base stat card - refined glassmorphism */
.stat-card {
    /* Glass background with subtle gradient */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    /* Refined border with inner glow effect */
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        /* Outer shadow for depth */
        var(--shadow-premium-sm),
        /* Inner highlight for glass effect */
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        /* Subtle bottom shadow */
        0 1px 3px rgba(0, 0, 0, 0.04);

    border-radius: var(--radius-lg);
    padding: 0;
    position: relative;
    overflow: hidden;

    /* Premium spring animation */
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;

    /* Prevent content overflow during animations */
    isolation: isolate;
}

/* Top accent line - appears on hover */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-premium-blue);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        opacity 0.2s ease-out,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

/* Shimmer effect overlay */
.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 5;
}

/* Hover state - elevated with glow */
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow:
        /* Primary depth shadow */
        0 12px 24px -8px rgba(0, 0, 0, 0.12),
        0 20px 40px -12px rgba(0, 0, 0, 0.08),
        /* Subtle ambient occlusion */
        0 0 0 1px rgba(0, 0, 0, 0.02),
        /* Inner highlight maintained */
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.stat-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Shimmer on hover - runs once */
.stat-card:hover::after {
    animation: stat-shimmer 0.8s ease-out;
}

/* Active/pressed state */
.stat-card:active {
    transform: translateY(-2px) scale(0.995);
    transition-duration: 0.1s;
}

/* Clickable stat cards */
a.stat-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Focus state for keyboard navigation - WCAG 2.1 AA compliant */
a.stat-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    /* Ensure focus ring is always visible over content */
    z-index: 1;
}

/* Color-matched focus rings for variants */
a.stat-card.warning:focus-visible,
a.stat-card.stat-warning:focus-visible {
    outline-color: var(--warning);
}

a.stat-card.danger:focus-visible,
a.stat-card.stat-danger:focus-visible {
    outline-color: var(--danger);
}

a.stat-card.success:focus-visible,
a.stat-card.stat-success:focus-visible {
    outline-color: var(--success);
}

a.stat-card.info:focus-visible,
a.stat-card.stat-info:focus-visible {
    outline-color: var(--info);
}

/* ---- STAT HEADER (Colored gradient section) ---- */
.stat-card .stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    margin: 0;
    position: relative;
    overflow: hidden;

    /* Default: premium blue gradient */
    background: var(--gradient-premium-blue);

    /* Subtle texture overlay */
    background-image:
        var(--gradient-premium-blue),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.05) 0%, transparent 50%);
}

/* Header shine effect */
.stat-card .stat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 100%
    );
    pointer-events: none;
}

/* Header label */
.stat-card .stat-header .stat-label {
    color: white;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

/* Header icon container */
.stat-card .stat-header .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;

    /* Glass effect on colored background */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;

    /* Subtle inner shadow for depth */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1);

    transition: var(--transition-spring);
    position: relative;
    z-index: 1;
}

/* Icon hover in header - subtle float animation */
.stat-card:hover .stat-header .stat-icon {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ---- STAT BODY (Value + footer) ---- */
.stat-card .stat-body,
.stat-card > .stat-value,
.stat-card > .stat-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.stat-card .stat-body {
    padding: 1rem 1.25rem 1.25rem;
}

/* Direct children value/footer when no stat-body wrapper */
.stat-card > .stat-value {
    padding-top: 1rem;
}

.stat-card > .stat-footer {
    padding-bottom: 1.25rem;
}

/* Stat value - large number display */
.stat-card .stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--gray-900);
    line-height: 1.1;
    transition: var(--transition-smooth);
}

/* Value on hover - subtle color shift */
.stat-card:hover .stat-value {
    color: var(--gray-800);
}

/* Value suffix (e.g., "approved") */
.stat-card .stat-value-suffix {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    letter-spacing: 0;
    margin-left: 0.375rem;
}

/* Stat label (when outside header) */
.stat-card .stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
}

/* Stat footer - meta information
   Note: Using gray-500 for WCAG AA contrast compliance (4.5:1 min) */
.stat-card .stat-footer {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;

    transition: var(--transition-fast);
}

.stat-card .stat-footer i {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Footer hover - subtle enhancement */
.stat-card:hover .stat-footer {
    color: var(--gray-600);
}

/* Stat meta (alternative to footer)
   Note: Using gray-500 for WCAG AA contrast compliance */
.stat-card .stat-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-card .stat-meta i {
    font-size: 0.875rem;
}

/* ============================================
   STAT CARD VARIANTS - Color themes
   ============================================ */

/* --- WARNING Variant (Orange/Amber) --- */
.stat-card.warning::before,
.stat-card.stat-warning::before {
    background: var(--gradient-premium-warning);
}

.stat-card.warning .stat-header,
.stat-card.stat-warning .stat-header {
    background: var(--gradient-premium-warning);
    background-image:
        var(--gradient-premium-warning),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}

.stat-card.warning:hover,
.stat-card.stat-warning:hover {
    box-shadow:
        0 12px 24px -8px rgba(245, 158, 11, 0.2),
        0 20px 40px -12px rgba(245, 158, 11, 0.15),
        0 0 0 1px rgba(245, 158, 11, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- DANGER Variant (Red) --- */
.stat-card.danger::before,
.stat-card.stat-danger::before {
    background: var(--gradient-premium-danger);
}

.stat-card.danger .stat-header,
.stat-card.stat-danger .stat-header {
    background: var(--gradient-premium-danger);
    background-image:
        var(--gradient-premium-danger),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}

.stat-card.danger:hover,
.stat-card.stat-danger:hover {
    box-shadow:
        0 12px 24px -8px rgba(239, 68, 68, 0.2),
        0 20px 40px -12px rgba(239, 68, 68, 0.15),
        0 0 0 1px rgba(239, 68, 68, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- SUCCESS Variant (Green) --- */
.stat-card.success::before,
.stat-card.stat-success::before {
    background: var(--gradient-premium-success);
}

.stat-card.success .stat-header,
.stat-card.stat-success .stat-header {
    background: var(--gradient-premium-success);
    background-image:
        var(--gradient-premium-success),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}

.stat-card.success:hover,
.stat-card.stat-success:hover {
    box-shadow:
        0 12px 24px -8px rgba(16, 185, 129, 0.2),
        0 20px 40px -12px rgba(16, 185, 129, 0.15),
        0 0 0 1px rgba(16, 185, 129, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- INFO Variant (Teal/Cyan) --- */
.stat-card.info::before,
.stat-card.stat-info::before {
    background: var(--gradient-premium-teal);
}

.stat-card.info .stat-header,
.stat-card.stat-info .stat-header {
    background: var(--gradient-premium-teal);
    background-image:
        var(--gradient-premium-teal),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}

.stat-card.info:hover,
.stat-card.stat-info:hover {
    box-shadow:
        0 12px 24px -8px rgba(6, 182, 212, 0.2),
        0 20px 40px -12px rgba(6, 182, 212, 0.15),
        0 0 0 1px rgba(6, 182, 212, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ============================================
   STAT CARD - Icon-only layout (no header)
   For cards without .stat-header
   ============================================ */

.stat-card:not(:has(.stat-header)) {
    padding: 1.25rem;
}

.stat-card:not(:has(.stat-header)) .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 0.75rem;

    /* Default: soft blue background */
    background: linear-gradient(
        135deg,
        rgba(14, 165, 233, 0.08) 0%,
        rgba(6, 182, 212, 0.12) 100%
    );
    color: var(--primary);

    /* Subtle depth */
    box-shadow:
        inset 0 -1px 2px rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(14, 165, 233, 0.08);

    transition: var(--transition-spring);
}

/* Icon hover for non-header cards */
.stat-card:not(:has(.stat-header)):hover .stat-icon {
    transform: scale(1.08) translateY(-2px);
    background: var(--gradient-premium-blue);
    color: white;
    box-shadow:
        0 8px 16px -4px rgba(14, 165, 233, 0.35),
        0 4px 8px -2px rgba(14, 165, 233, 0.2);
}

/* Warning icon variant */
.stat-card.warning:not(:has(.stat-header)) .stat-icon,
.stat-card.stat-warning:not(:has(.stat-header)) .stat-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.12) 100%);
    color: var(--warning);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(245, 158, 11, 0.08);
}

.stat-card.warning:not(:has(.stat-header)):hover .stat-icon,
.stat-card.stat-warning:not(:has(.stat-header)):hover .stat-icon {
    background: var(--gradient-premium-warning);
    color: white;
    box-shadow: 0 8px 16px -4px rgba(245, 158, 11, 0.35), 0 4px 8px -2px rgba(245, 158, 11, 0.2);
}

/* Danger icon variant */
.stat-card.danger:not(:has(.stat-header)) .stat-icon,
.stat-card.stat-danger:not(:has(.stat-header)) .stat-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.12) 100%);
    color: var(--danger);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(239, 68, 68, 0.08);
}

.stat-card.danger:not(:has(.stat-header)):hover .stat-icon,
.stat-card.stat-danger:not(:has(.stat-header)):hover .stat-icon {
    background: var(--gradient-premium-danger);
    color: white;
    box-shadow: 0 8px 16px -4px rgba(239, 68, 68, 0.35), 0 4px 8px -2px rgba(239, 68, 68, 0.2);
}

/* Success icon variant */
.stat-card.success:not(:has(.stat-header)) .stat-icon,
.stat-card.stat-success:not(:has(.stat-header)) .stat-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.12) 100%);
    color: var(--success);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(16, 185, 129, 0.08);
}

.stat-card.success:not(:has(.stat-header)):hover .stat-icon,
.stat-card.stat-success:not(:has(.stat-header)):hover .stat-icon {
    background: var(--gradient-premium-success);
    color: white;
    box-shadow: 0 8px 16px -4px rgba(16, 185, 129, 0.35), 0 4px 8px -2px rgba(16, 185, 129, 0.2);
}

/* Info icon variant */
.stat-card.info:not(:has(.stat-header)) .stat-icon,
.stat-card.stat-info:not(:has(.stat-header)) .stat-icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(20, 184, 166, 0.12) 100%);
    color: var(--info);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(6, 182, 212, 0.08);
}

.stat-card.info:not(:has(.stat-header)):hover .stat-icon,
.stat-card.stat-info:not(:has(.stat-header)):hover .stat-icon {
    background: var(--gradient-premium-teal);
    color: white;
    box-shadow: 0 8px 16px -4px rgba(6, 182, 212, 0.35), 0 4px 8px -2px rgba(6, 182, 212, 0.2);
}

/* ============================================
   CLICKABLE STAT CARDS - Enhanced feedback
   Note: Clickable cards use ::after for arrow indicator,
   which replaces the shimmer effect (intentional tradeoff)
   ============================================ */

a.stat-card.stat-card-clickable {
    cursor: pointer;
}

/* Clickable cards get a subtle arrow indicator on hover
   This replaces the shimmer effect for better UX affordance */
a.stat-card.stat-card-clickable::after {
    content: '';
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 20px;
    height: 20px;
    /* Chevron arrow SVG - accessible color #6B7280 (gray-500) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0;
    transform: translateX(-4px);
    transition: var(--transition-smooth);
    z-index: 2;
}

a.stat-card.stat-card-clickable:hover::after {
    opacity: 0.5;
    transform: translateX(0);
}

/* ============================================
   ACTIVE/SELECTED STATE
   ============================================ */

.stat-card.stat-card-active {
    box-shadow:
        0 0 0 2px var(--primary),
        var(--shadow-premium-sm);
    transform: none;
}

.stat-card.stat-card-active.warning {
    box-shadow: 0 0 0 2px var(--warning), var(--shadow-premium-sm);
}

.stat-card.stat-card-active.danger {
    box-shadow: 0 0 0 2px var(--danger), var(--shadow-premium-sm);
}

.stat-card.stat-card-active.success {
    box-shadow: 0 0 0 2px var(--success), var(--shadow-premium-sm);
}

.stat-card.stat-card-active.info {
    box-shadow: 0 0 0 2px var(--info), var(--shadow-premium-sm);
}

/* Active indicator dot */
.stat-card.stat-card-active::after {
    content: '';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: stat-glow-pulse 2s ease-in-out infinite;
    z-index: 10;
}

.stat-card.stat-card-active.warning::after { background: var(--warning); }
.stat-card.stat-card-active.danger::after { background: var(--danger); }
.stat-card.stat-card-active.success::after { background: var(--success); }
.stat-card.stat-card-active.info::after { background: var(--info); }

/* Disable hover transforms on active cards */
.stat-card.stat-card-active:hover {
    transform: none;
}

.stat-card.stat-card-active::before {
    display: none;
}

/* ============================================
   REDUCED MOTION - Accessibility
   Respects user preference for reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .stat-card .stat-icon,
    .stat-card .stat-value,
    .stat-card .stat-footer,
    .stat-card .stat-header,
    .stat-card::before,
    .stat-card::after {
        transition: none !important;
        animation: none !important;
    }

    /* Remove all transforms on hover */
    .stat-card:hover {
        transform: none;
    }

    .stat-card:hover .stat-icon,
    .stat-card:hover .stat-header .stat-icon {
        transform: none;
    }

    /* Maintain visual feedback without motion */
    .stat-card:hover::before {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Keep focus states visible but static */
    .stat-card.stat-card-active::after {
        animation: none;
        opacity: 1;
    }

    /* Disable shimmer effect completely */
    .stat-card:hover::after {
        display: none;
    }
}

/* ============================================
   HIGH CONTRAST MODE - Enhanced visibility
   ============================================ */

@media (prefers-contrast: more) {
    .stat-card {
        border: 2px solid var(--gray-900);
    }

    .stat-card .stat-header {
        border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    }

    .stat-card .stat-value {
        color: var(--gray-900);
        font-weight: 900;
    }

    .stat-card .stat-footer,
    .stat-card .stat-meta {
        color: var(--gray-700);
    }

    /* Enhanced focus indicator */
    a.stat-card:focus-visible {
        outline: 3px solid var(--gray-900);
        outline-offset: 4px;
    }
}

/* ============================================
   PREMIUM TABLES - Clean & Modern
   ============================================ */

.table-wrapper {
    background: white;
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: var(--shadow-premium);
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.2s ease-in-out;
}

/* Keep table content within rounded corners */
.table-wrapper .modern-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.modern-table {
    width: 100%;
    margin: 0;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}

.modern-table thead {
    background: linear-gradient(to bottom, var(--gray-50), white);
}

.modern-table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    padding: 1rem 1.25rem;
    border-bottom: var(--border-subtle);
    white-space: nowrap;
}

.modern-table tbody {
    transition: opacity 0.2s ease;
}

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

.modern-table tbody tr {
    transition: var(--transition-fast);
}

.modern-table tbody tr:hover {
    background: linear-gradient(to right, rgba(14, 165, 233, 0.04), rgba(14, 165, 233, 0.01));
}

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

/* Table footer (total rows) */
.modern-table tfoot {
    background: var(--gray-50);
}

.modern-table tfoot td {
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--gray-200);
    font-weight: 600;
    color: var(--gray-800);
}

.modern-table tfoot td:last-child {
    font-variant-numeric: tabular-nums;
}

/* Table links */
.modern-table a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
}

.modern-table a:hover {
    color: var(--ocean-dark);
}

/* Amount columns */
.modern-table td:has(strong) {
    font-variant-numeric: tabular-nums;
}

/* ============================================
   PREMIUM BADGES - Refined Status Indicators
   ============================================ */

.badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Supplier status badges */
.badge-supplier-approved {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.12));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-supplier-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.12));
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-qbo {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(14, 165, 233, 0.12));
    color: #0891B2;
    border: 1px solid rgba(6, 182, 212, 0.2);
    font-size: 0.625rem;
}

/* Employee Status Badges - with borders for extra emphasis */
.badge-status-active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.12));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-status-inactive {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(75, 85, 99, 0.12));
    color: #4B5563;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* ============================================
   PREMIUM FORMS - Clean Input Styling
   ============================================ */

.form-control,
.form-select {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--gray-800);
    background: white;
    transition: var(--transition-fast);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--gray-300);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
    outline: none;
}

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

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-700);
    margin-bottom: 0.375rem;
}

/* Form groups with enhanced spacing */
.form-group {
    margin-bottom: 1.25rem;
}

/* ============================================
   PREMIUM MODALS - Additional Enhancements
   Note: Main modal styling is in the "General Modal Styles" section above.
   These are additional premium refinements.
   ============================================ */

/* Premium shadow for modal content */
.modal-content {
    box-shadow: var(--shadow-premium-xl);
}

/* Enhanced title typography */
.modal-title {
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: var(--border-subtle);
    background: var(--gray-50);
}

/* Modal backdrop */
.modal-backdrop.show {
    opacity: 0.6;
    backdrop-filter: blur(4px);
}

/* ============================================
   PREMIUM ACTIVITY FEED - Dashboard Items
   ============================================ */

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    margin: 0 -1rem;
    border-radius: var(--radius);
    transition: var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.activity-item:hover {
    background: var(--gray-50);
}

.activity-item:first-child {
    margin-top: -0.5rem;
}

.activity-type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    margin-right: 0.75rem;
}

.activity-type-invoice {
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
}

.activity-type-payment {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.activity-type-expense {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.activity-type-sales {
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
}

.activity-details {
    flex: 1;
    min-width: 0;
}

.activity-details strong {
    font-weight: 600;
    color: var(--gray-900);
}

.activity-amount {
    text-align: right;
    white-space: nowrap;
}

.activity-amount strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.activity-time {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* ============================================
   PREMIUM FILTER BUTTONS - Tab Style
   Only applies to plain buttons, not outline-* variants
   ============================================ */

.btn-group .btn:not([class*="btn-outline"]) {
    border-radius: 0;
    border: 1.5px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: var(--transition-fast);
}

.btn-group .btn:not([class*="btn-outline"]):first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.btn-group .btn:not([class*="btn-outline"]):last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.btn-group .btn:not([class*="btn-outline"]):hover {
    background: var(--gray-50);
    z-index: 1;
}

.btn-group .btn:not([class*="btn-outline"]).active,
.btn-group .btn:not([class*="btn-outline"]):active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    z-index: 2;
}

.btn-group .btn:not([class*="btn-outline"]) + .btn:not([class*="btn-outline"]) {
    margin-left: -1.5px;
}

/* ============================================
   PREMIUM PAGINATION - Modern Style
   ============================================ */

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-top: var(--border-subtle);
    background: var(--gray-50);
}

.pagination-info {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.pagination {
    gap: 0.25rem;
}

.pagination .page-item .page-link {
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    transition: var(--transition-fast);
    min-width: 32px;
    text-align: center;
}

.pagination .page-item .page-link:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    color: white;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* ============================================
   PREMIUM PAGE HEADER - Enhanced Typography
   ============================================ */

.page-header h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.page-header h2 i {
    font-size: 1.25rem;
    opacity: 0.9;
}

.page-header-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-500);
    letter-spacing: 0.01em;
}

/* ============================================
   PREMIUM DASHBOARD SECTIONS
   ============================================ */

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Section Headers */
.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i {
    color: var(--gray-400);
    font-size: 1rem;
}

/* ============================================
   PREMIUM ALERTS / NOTIFICATIONS
   ============================================ */

.alert-floating {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium-lg);
    padding: 1rem 1.25rem;
    backdrop-filter: blur(8px);
}

.alert-floating.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    color: white;
}

.alert-floating.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    color: white;
}

.alert-floating.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
    color: white;
}

.alert-floating.alert-info {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.95));
    color: white;
}

/* ============================================
   PREMIUM DROPZONE - File Upload
   ============================================ */

.dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    background: var(--gray-50);
    transition: var(--transition-smooth);
    cursor: pointer;
}

.dropzone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.04);
}

.dropzone.dragover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
    transform: scale(1.01);
}

.dropzone-icon {
    font-size: 2.5rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
    transition: var(--transition-smooth);
}

.dropzone:hover .dropzone-icon {
    color: var(--primary);
    transform: scale(1.1);
}

/* ============================================
   Stock Item Photo Dropzone
   ============================================ */

.stock-item-photo-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    background: var(--gray-50);
    transition: var(--transition-smooth);
    cursor: pointer;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stock-item-photo-dropzone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.04);
}

.stock-item-photo-dropzone.drag-over {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
    border-style: solid;
    transform: scale(1.01);
}

.stock-item-photo-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stock-item-photo-preview img {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.stock-item-photo-dropzone:hover .stock-item-photo-preview img {
    transform: scale(1.02);
}

/* ============================================
   Asset Document Upload Zone
   ============================================ */

.doc-upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    background: var(--gray-50);
    transition: var(--transition-smooth);
    cursor: pointer;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-upload-zone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.04);
}

.doc-upload-zone.dragover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
    border-style: solid;
    transform: scale(1.01);
}

.doc-upload-zone.has-file {
    border-color: var(--success);
    border-style: solid;
    background: rgba(34, 197, 94, 0.04);
}

.doc-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Document status badges in asset documents table */
.doc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.doc-status-badge.status-valid {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.doc-status-badge.status-expiring-soon {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning-dark);
}

.doc-status-badge.status-critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    animation: pulse-danger 2s infinite;
}

.doc-status-badge.status-expired {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.doc-status-badge.status-permanent {
    background: var(--gray-100);
    color: var(--gray-600);
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Document type icon */
.doc-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.doc-type-icon.type-permit {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.doc-type-icon.type-insurance {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.doc-type-icon.type-certificate {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning-dark);
}

.doc-type-icon.type-registration {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* ============================================
   PREMIUM SCROLL - Custom Scrollbar
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   PREMIUM ANIMATIONS
   ============================================ */

/* Fade in up animation for content */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-wrapper > * {
    animation: fadeInUp 0.3s ease-out;
}

/* Stagger animation for list items */
.stats-grid > *:nth-child(1) { animation-delay: 0s; }
.stats-grid > *:nth-child(2) { animation-delay: 0.05s; }
.stats-grid > *:nth-child(3) { animation-delay: 0.1s; }
.stats-grid > *:nth-child(4) { animation-delay: 0.15s; }

/* Pulse animation for loading states */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ============================================
   PREMIUM RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .topbar {
        padding: 0 1rem;
    }

    .content-wrapper {
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card .stat-value {
        font-size: 1.5rem;
    }

    .pagination-container {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================
   PREMIUM TABLE ACTION BUTTONS
   ============================================ */

.table-actions {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.table-actions .btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

.table-actions .btn-sm {
    padding: 0.25rem 0.5rem;
}

.table-actions .btn i {
    font-size: 0.875rem;
}

/* View button - subtle outline */
.table-actions .btn-outline-secondary {
    border-color: var(--gray-200);
    color: var(--gray-500);
}

.table-actions .btn-outline-secondary:hover {
    border-color: var(--gray-400);
    color: var(--gray-700);
    background: var(--gray-50);
}

/* Pay button - prominent */
.table-actions .btn-success {
    background: var(--gradient-premium-success);
    border: none;
    padding: 0.375rem 0.875rem;
}

/* ============================================
   PREMIUM CONTENT BACKGROUND PATTERN
   ============================================ */

.main-content {
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.02) 0%, transparent 50%),
        linear-gradient(225deg, rgba(20, 184, 166, 0.02) 0%, transparent 50%),
        var(--gray-50);
}

/* ============================================
   PREMIUM HOVER EFFECTS - Microinteractions
   ============================================ */

/* Interactive row highlight - using border on first cell instead of ::before
   (::before on tr breaks table column alignment in some browsers) */
.modern-table tbody tr td:first-child {
    border-left: 3px solid transparent;
    transition: border-color var(--transition-fast);
}

.modern-table tbody tr:hover td:first-child {
    border-left-color: var(--primary);
}

/* Button icon animation */
.btn i {
    transition: var(--transition-fast);
}

.btn:hover i {
    transform: scale(1.1);
}

/* Link underline animation */
.modern-table a {
    position: relative;
}

.modern-table a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--primary);
    transition: width 0.2s ease;
}

.modern-table a:hover::after {
    width: 100%;
}

/* ============================================
   FIX: Search input icon position
   ============================================ */

.search-bar .search-icon {
    transition: var(--transition-fast);
}

/* ============================================
   PREMIUM LOADING SPINNER
   ============================================ */

.spinner-border {
    border-width: 2px;
}

.btn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* ============================================
   EMPLOYEE & OFFICE ACTION BUTTONS - Enhanced visibility
   ============================================ */

/* Override btn-group styles for action button groups in tables */
.btn-group.btn-group-sm .btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

/* Primary edit button */
.btn-group .btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: transparent !important;
}

.btn-group .btn-outline-primary:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* Info button (transfer) */
.btn-group .btn-outline-info {
    border-color: var(--info) !important;
    color: var(--info) !important;
    background: transparent !important;
}

.btn-group .btn-outline-info:hover {
    background: var(--info) !important;
    color: white !important;
    border-color: var(--info) !important;
}

/* Warning button (reset password, reconnect) */
.btn-group .btn-outline-warning {
    border-color: #f59e0b !important;
    color: #d97706 !important;
    background: transparent !important;
}

.btn-group .btn-outline-warning:hover {
    background: #f59e0b !important;
    color: white !important;
    border-color: #f59e0b !important;
}

/* Secondary button (deactivate) */
.btn-group .btn-outline-secondary {
    border-color: var(--gray-400) !important;
    color: var(--gray-600) !important;
    background: transparent !important;
}

.btn-group .btn-outline-secondary:hover {
    background: var(--gray-600) !important;
    color: white !important;
    border-color: var(--gray-600) !important;
}

/* Success button (activate) */
.btn-group .btn-outline-success {
    border-color: var(--success) !important;
    color: var(--success) !important;
    background: transparent !important;
}

.btn-group .btn-outline-success:hover {
    background: var(--success) !important;
    color: white !important;
    border-color: var(--success) !important;
}

/* Danger button (delete) */
.btn-group .btn-outline-danger {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background: transparent !important;
}

.btn-group .btn-outline-danger:hover {
    background: var(--danger) !important;
    color: white !important;
    border-color: var(--danger) !important;
}

/* Fix icon visibility in action buttons */
.btn-group .btn i {
    font-size: 0.9rem;
    line-height: 1;
}

/* ============================================
   OFFICE CARDS ACTION BUTTONS
   ============================================ */

.office-card .btn-outline-primary,
.office-card .btn-outline-warning,
.office-card .btn-outline-danger {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.office-card .btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.office-card .btn-outline-primary:hover {
    background: var(--primary);
    color: white;
}

.office-card .btn-outline-warning {
    border-color: #f59e0b;
    color: #d97706;
}

.office-card .btn-outline-warning:hover {
    background: #f59e0b;
    color: white;
}

.office-card .btn-outline-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.office-card .btn-outline-danger:hover {
    background: var(--danger);
    color: white;
}

/* ============================================
   FORM LINE ITEM DELETE BUTTON - Enhanced visibility
   ============================================ */

.line-item-row .btn-outline-danger,
.expense-line-item .btn-outline-danger {
    border-color: var(--danger);
    color: var(--danger);
    opacity: 0.7;
    transition: var(--transition-fast);
}

.line-item-row .btn-outline-danger:hover,
.expense-line-item .btn-outline-danger:hover {
    opacity: 1;
    background: var(--danger);
    color: white;
}

.line-item-row .btn-outline-danger:disabled,
.expense-line-item .btn-outline-danger:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================
   FOCUS STATES - Accessibility enhancement
   ============================================ */

/* Enhanced focus ring for all interactive elements */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Pagination focus states */
.pagination .page-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    z-index: 3;
}

/* Tab focus states */
.nav-tabs .nav-link:focus-visible,
.settings-tabs .nav-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   DISABLED STATE IMPROVEMENTS
   ============================================ */

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--gray-100);
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================
   STOCK EXPENSE CARDS - Premium Design
   ============================================ */

.stock-expense-card .card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    transition: var(--transition-smooth);
    overflow: hidden;
    position: relative;
}

.stock-expense-card .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    transition: var(--transition-smooth);
}

.stock-expense-card .card:hover {
    box-shadow: var(--shadow-premium-lg);
}

/* Pending (incomplete) card accent */
.stock-expense-card .card.expense-pending::before {
    background: linear-gradient(180deg, var(--warning), #D97706);
}

/* Complete card accent */
.stock-expense-card .card.expense-complete::before {
    background: linear-gradient(180deg, var(--success), #059669);
}

/* Card Header */
.stock-expense-card .card-header {
    background: white;
    border-bottom: 1px solid var(--gray-100);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stock-expense-card .card-header .supplier-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gray-800);
}

.stock-expense-card .card-header .supplier-name i {
    color: var(--gray-400);
    font-size: 1rem;
}

/* Status Badge - Premium styling */
.stock-expense-card .expense-status {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.stock-expense-card .expense-status.status-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.stock-expense-card .expense-status.status-complete {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Card Body */
.stock-expense-card .card-body {
    padding: 1.25rem;
    background: white;
}

/* Info Grid - Two column layout */
.stock-expense-card .expense-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stock-expense-card .expense-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stock-expense-card .expense-info-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stock-expense-card .expense-info-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-800);
}

/* Amount - Prominent styling */
.stock-expense-card .expense-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.01em;
}

/* Category Badge */
.stock-expense-card .expense-category-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(14, 165, 233, 0.12)) !important;
    color: #0891B2 !important;
    border: 1px solid rgba(6, 182, 212, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    width: fit-content;
}

/* PO Link */
.stock-expense-card .expense-po-link {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gray-200);
    font-size: 0.8125rem;
}

.stock-expense-card .expense-po-link .po-label {
    color: var(--gray-500);
    font-weight: 500;
}

.stock-expense-card .expense-po-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
}

.stock-expense-card .expense-po-link a:hover {
    color: #0284C7;
    text-decoration: underline;
}

/* Card Footer */
.stock-expense-card .card-footer {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    padding: 1rem 1.25rem;
}

/* Upload Button - Pending state */
.stock-expense-card .btn-upload-or {
    width: 100%;
    background: linear-gradient(135deg, var(--warning), #D97706);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
}

.stock-expense-card .btn-upload-or:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, #F59E0B, #B45309);
}

.stock-expense-card .btn-upload-or:active {
    transform: translateY(0);
}

.stock-expense-card .btn-upload-or i {
    font-size: 1rem;
}

/* Complete state footer */
.stock-expense-card .expense-complete-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--success);
    font-weight: 500;
    font-size: 0.875rem;
}

.stock-expense-card .expense-complete-status i {
    margin-right: 0.375rem;
}

.stock-expense-card .btn-view-receipt {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--success);
    color: var(--success);
    background: transparent;
    font-weight: 500;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.stock-expense-card .btn-view-receipt:hover {
    background: var(--success);
    color: white;
}

/* Empty State */
.stock-expense-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
}

.stock-expense-empty .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.5rem;
}

.stock-expense-empty .empty-icon.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.15));
    color: var(--success);
}

.stock-expense-empty .empty-icon.neutral {
    background: var(--gray-100);
    color: var(--gray-400);
}

.stock-expense-empty h5 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.stock-expense-empty p {
    color: var(--gray-500);
    font-size: 0.9375rem;
    max-width: 300px;
    margin: 0 auto;
}

/* Tabs - Premium styling */
#stockExpenseTabs {
    border-bottom: 2px solid var(--gray-100);
    gap: 0.5rem;
}

#stockExpenseTabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--gray-500);
    background: transparent;
    border-radius: 0;
    transition: var(--transition-fast);
}

#stockExpenseTabs .nav-link:hover {
    color: var(--gray-700);
    border-bottom-color: var(--gray-300);
}

#stockExpenseTabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: transparent;
}

#stockExpenseTabs .nav-link .badge {
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-left: 0.5rem;
}

#stockExpenseTabs .nav-link .badge.bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15)) !important;
    color: #DC2626 !important;
}

#stockExpenseTabs .nav-link .badge.bg-secondary {
    background: var(--gray-100) !important;
    color: var(--gray-600) !important;
}

/* Search and Filter Row */
.stock-expense-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.stock-expense-filters .search-bar {
    flex: 1 1 300px;
    max-width: 400px;
}

.stock-expense-filters .search-bar .form-control {
    width: 100%;
}

.stock-expense-filters .category-filter {
    flex: 0 0 200px;
    width: 200px;
}

/* Card Grid */
.stock-expense-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

/* Animation for cards */
.stock-expense-card {
    animation: fadeInUp 0.3s ease-out;
    animation-fill-mode: both;
}

.stock-expense-card:nth-child(1) { animation-delay: 0s; }
.stock-expense-card:nth-child(2) { animation-delay: 0.05s; }
.stock-expense-card:nth-child(3) { animation-delay: 0.1s; }
.stock-expense-card:nth-child(4) { animation-delay: 0.15s; }
.stock-expense-card:nth-child(5) { animation-delay: 0.2s; }
.stock-expense-card:nth-child(6) { animation-delay: 0.25s; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .stock-expense-grid {
        grid-template-columns: 1fr;
    }

    .stock-expense-filters {
        flex-direction: column;
    }

    .stock-expense-filters .search-bar,
    .stock-expense-filters .category-filter {
        width: 100%;
        min-width: unset;
    }
}

/* ========================================
   PHASE 2: ASSET SELECTION & AI PREVIEW
   ======================================== */

/* Asset Type Buttons */
.asset-type-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.asset-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    flex: 1;
}

.asset-type-btn:hover {
    border-color: var(--primary);
    background: var(--tropical-blue);
    background: rgba(14, 165, 233, 0.05);
}

.asset-type-btn.active {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
}

.asset-type-btn i {
    font-size: 24px;
    margin-bottom: 6px;
    opacity: 0.7;
}

.asset-type-btn.active i {
    opacity: 1;
}

.asset-type-btn span {
    font-size: 14px;
    font-weight: 500;
}

/* Asset Info Card */
.asset-info-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 12px 16px;
}

/* Conditional Fields Card */
.conditional-fields-card {
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 8px;
    padding: 16px;
}

/* AI Preview Panel */
.ai-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-preview-header .card-title {
    display: flex;
    align-items: center;
}

.ai-preview-normal {
    background: rgba(16, 185, 129, 0.1);
    border-bottom: 2px solid var(--success);
}

.ai-preview-warning {
    background: rgba(245, 158, 11, 0.1);
    border-bottom: 2px solid var(--warning);
}

.ai-preview-danger {
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 2px solid var(--danger);
}

/* AI Score Badge */
.ai-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--gray-200);
    color: var(--gray-700);
}

.ai-score-badge.score-normal {
    background: rgba(16, 185, 129, 0.2);
    color: #059669;
}

.ai-score-badge.score-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #D97706;
}

.ai-score-badge.score-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #DC2626;
}

/* AI Baseline Info */
.ai-baseline-info {
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

/* AI Deviation Info */
.ai-deviation-info {
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 6px;
}

/* AI Messages */
.ai-messages {
    border-top: 1px solid var(--gray-200);
    padding-top: 12px;
    margin-top: 8px;
}

.ai-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.ai-message i {
    margin-top: 2px;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .asset-type-buttons {
        gap: 8px;
    }

    .asset-type-btn {
        min-width: 70px;
        padding: 12px 16px;
    }

    .asset-type-btn i {
        font-size: 20px;
    }

    .asset-type-btn span {
        font-size: 12px;
    }
}

/* ============================================
   ASSET MANAGEMENT - Premium Visual Design
   ============================================ */

/* Asset Type Color System */
:root {
    /* Boat - Ocean Blue */
    --asset-boat-primary: #0284C7;
    --asset-boat-light: rgba(2, 132, 199, 0.1);
    --asset-boat-border: rgba(2, 132, 199, 0.3);
    --asset-boat-gradient: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);

    /* Vehicle - Emerald Green */
    --asset-vehicle-primary: #059669;
    --asset-vehicle-light: rgba(5, 150, 105, 0.1);
    --asset-vehicle-border: rgba(5, 150, 105, 0.3);
    --asset-vehicle-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);

    /* Campsite - Amber/Orange */
    --asset-campsite-primary: #D97706;
    --asset-campsite-light: rgba(217, 119, 6, 0.1);
    --asset-campsite-border: rgba(217, 119, 6, 0.3);
    --asset-campsite-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

/* Asset Cards Grid (for card view layout) */
.asset-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-6);
}

/* Premium Asset Card */
.asset-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all 0.25s ease;
    position: relative;
    border: 1px solid var(--gray-100);
}

.asset-card:hover {
    box-shadow: var(--shadow-lg);
}

/* Asset Type Accent Border */
.asset-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-300);
}

.asset-card.asset-boat::before {
    background: var(--asset-boat-gradient);
}

.asset-card.asset-vehicle::before {
    background: var(--asset-vehicle-gradient);
}

.asset-card.asset-campsite::before {
    background: var(--asset-campsite-gradient);
}

/* Asset Card Header */
.asset-card-header {
    padding: var(--space-5) var(--space-5) var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Asset Icon Container */
.asset-icon-container {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    background: var(--gray-100);
    color: var(--gray-500);
}

.asset-boat .asset-icon-container {
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
}

.asset-vehicle .asset-icon-container {
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-primary);
}

.asset-campsite .asset-icon-container {
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-primary);
}

/* Asset Card Title Area */
.asset-card-title {
    flex: 1;
    min-width: 0;
}

.asset-card-title h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-card-code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.asset-boat .asset-card-code {
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
}

.asset-vehicle .asset-card-code {
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-primary);
}

.asset-campsite .asset-card-code {
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-primary);
}

/* Asset Card Body */
.asset-card-body {
    padding: 0 var(--space-5) var(--space-4);
}

/* Asset Stats Row */
.asset-stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.asset-stat {
    display: flex;
    flex-direction: column;
    min-width: 70px;
}

.asset-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.asset-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.asset-stat-value i {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Asset Card Footer */
.asset-card-footer {
    padding: var(--space-3) var(--space-5);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.asset-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.asset-card-office {
    font-size: 0.8rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.asset-card-office i {
    color: var(--gray-400);
}

/* Asset Card Actions */
.asset-card-actions {
    display: flex;
    gap: var(--space-2);
}

.asset-card-actions .btn {
    padding: var(--space-2);
    border-radius: var(--radius);
    transition: all 0.15s ease;
}

/* ============================================
   Asset Status Badges - Premium Design
   ============================================ */

.asset-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Active Status - Vibrant Green with Pulse */
.asset-status-badge.status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    position: relative;
}

.asset-status-badge.status-active::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #10B981;
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Maintenance Status - Warning Amber */
.asset-status-badge.status-maintenance {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.asset-status-badge.status-maintenance::before {
    content: '\F6E6'; /* Bootstrap icon wrench */
    font-family: 'bootstrap-icons';
    font-size: 0.65rem;
}

/* Retired Status - Muted Gray */
.asset-status-badge.status-retired {
    background: rgba(100, 116, 139, 0.15);
    color: #64748B;
}

.asset-status-badge.status-retired::before {
    content: '\F62C'; /* Bootstrap icon archive */
    font-family: 'bootstrap-icons';
    font-size: 0.65rem;
}

/* Under Repair Status - Orange */
.asset-status-badge.status-under_repair {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}

.asset-status-badge.status-under_repair::before {
    content: '\F829'; /* Bootstrap icon wrench */
    font-family: 'bootstrap-icons';
    font-size: 0.65rem;
}

/* Drydock Status - Blue */
.asset-status-badge.status-drydock {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.asset-status-badge.status-drydock::before {
    content: '\F5D5'; /* Bootstrap icon water */
    font-family: 'bootstrap-icons';
    font-size: 0.65rem;
}

/* ============================================
   Asset Type Filter Pills
   ============================================ */

.asset-type-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.asset-type-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    border: 2px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-type-pill:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.asset-type-pill.active {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
}

.asset-type-pill i {
    font-size: 1rem;
}

.asset-type-pill.pill-boat.active {
    border-color: var(--asset-boat-primary);
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
}

.asset-type-pill.pill-vehicle.active {
    border-color: var(--asset-vehicle-primary);
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-primary);
}

.asset-type-pill.pill-campsite.active {
    border-color: var(--asset-campsite-primary);
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-primary);
}

/* ============================================
   Asset Table - Premium Styling
   ============================================ */

/* Asset Type Cell Icon Badge */
.asset-type-icon-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.asset-type-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.asset-type-icon.type-boat {
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
}

.asset-type-icon.type-vehicle {
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-primary);
}

.asset-type-icon.type-campsite {
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-primary);
}

.asset-type-label {
    font-weight: 500;
    color: var(--gray-700);
    text-transform: capitalize;
}

/* Asset Name Cell */
.asset-name-cell {
    display: flex;
    flex-direction: column;
}

.asset-name-primary {
    font-weight: 600;
    color: var(--gray-900);
}

.asset-name-code {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* Asset Details Cell - Inline Stats */
.asset-details-cell {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.asset-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 500;
}

.asset-detail-chip i {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ============================================
   Document Cards - Premium Design
   ============================================ */

.document-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.document-card {
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    padding: var(--space-4);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.document-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow);
}

/* Document Status Indicator Line */
.document-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--success);
}

.document-card.doc-expiring-soon::before {
    background: var(--warning);
}

.document-card.doc-expired::before {
    background: var(--danger);
}

.document-card.doc-permanent::before {
    background: var(--gray-400);
}

/* Document Card Header */
.document-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.document-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--gray-500);
    flex-shrink: 0;
}

.document-card.doc-valid .document-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.document-card.doc-expiring-soon .document-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.document-card.doc-expired .document-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.document-card-info {
    flex: 1;
    min-width: 0;
}

.document-card-title {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.95rem;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-card-type {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Document Expiry Badge */
.document-expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.document-expiry-badge.expiry-valid {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.document-expiry-badge.expiry-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.document-expiry-badge.expiry-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

.document-expiry-badge.expiry-permanent {
    background: rgba(100, 116, 139, 0.15);
    color: #64748B;
}

/* Document Card Body */
.document-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.document-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--gray-600);
}

.document-meta-row i {
    color: var(--gray-400);
    width: 16px;
    text-align: center;
}

/* Document Card Footer */
.document-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--gray-100);
}

/* ============================================
   Asset Detail Modal - Premium Design
   ============================================ */

.asset-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.asset-detail-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.asset-detail-icon.type-boat {
    background: var(--asset-boat-gradient);
    color: white;
}

.asset-detail-icon.type-vehicle {
    background: var(--asset-vehicle-gradient);
    color: white;
}

.asset-detail-icon.type-campsite {
    background: var(--asset-campsite-gradient);
    color: white;
}

.asset-detail-info h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.asset-detail-info .asset-code-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-right: var(--space-2);
}

/* Asset Specs Grid */
.asset-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.asset-spec-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: var(--space-4);
    text-align: center;
    transition: all 0.2s ease;
}

.asset-spec-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.asset-spec-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-2);
    font-size: 1.1rem;
    color: var(--gray-500);
}

.asset-spec-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.asset-spec-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Asset Section Title */
.asset-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--gray-200);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.asset-section-title i {
    color: var(--primary);
}

.asset-section-title.section-boat i {
    color: var(--asset-boat-primary);
}

.asset-section-title.section-vehicle i {
    color: var(--asset-vehicle-primary);
}

.asset-section-title.section-campsite i {
    color: var(--asset-campsite-primary);
}

/* ============================================
   Document Upload Drop Zone - Enhanced
   ============================================ */

.doc-drop-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    position: relative;
    overflow: hidden;
}

.doc-drop-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.doc-drop-zone:hover {
    border-color: var(--primary);
    transform: scale(1.01);
}

.doc-drop-zone:hover::before {
    opacity: 1;
}

.doc-drop-zone.drop-active {
    border-color: var(--primary);
    border-style: solid;
    background: rgba(14, 165, 233, 0.08);
    transform: scale(1.02);
}

.doc-drop-zone-icon {
    font-size: 3.5rem;
    color: var(--gray-400);
    margin-bottom: var(--space-3);
    transition: all 0.25s ease;
}

.doc-drop-zone:hover .doc-drop-zone-icon {
    color: var(--primary);
    transform: translateY(-4px);
}

.doc-drop-zone-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-1);
}

.doc-drop-zone-hint {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: var(--space-3);
}

.doc-drop-zone-formats {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.doc-format-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
}

.doc-format-tag i {
    font-size: 0.8rem;
}

/* ============================================
   Empty State for Assets
   ============================================ */

.asset-empty-state {
    text-align: center;
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-200);
}

.asset-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 2.5rem;
    color: var(--gray-400);
}

.asset-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.asset-empty-description {
    font-size: 0.95rem;
    color: var(--gray-500);
    max-width: 400px;
    margin: 0 auto var(--space-5);
    line-height: 1.6;
}

/* ============================================
   Asset Quick Actions (Table Row Hover)
   ============================================ */

.asset-quick-actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.modern-table tbody tr:hover .asset-quick-actions {
    opacity: 1;
}

.asset-quick-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.asset-quick-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.asset-quick-btn.btn-view:hover {
    border-color: var(--info);
    color: var(--info);
    background: rgba(6, 182, 212, 0.05);
}

.asset-quick-btn.btn-edit:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.asset-quick-btn.btn-maintenance:hover {
    border-color: var(--warning);
    color: var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.asset-quick-btn.btn-activate:hover {
    border-color: var(--success);
    color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.asset-quick-btn.btn-status {
    border-color: var(--gray-300);
    color: var(--gray-600);
}

.asset-quick-btn.btn-status:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

/* ============================================
   Asset Info Panels in Forms
   ============================================ */

.asset-type-fields-panel {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-top: var(--space-4);
}

.asset-type-fields-panel.panel-boat {
    background: var(--asset-boat-light);
    border-color: var(--asset-boat-border);
}

.asset-type-fields-panel.panel-vehicle {
    background: var(--asset-vehicle-light);
    border-color: var(--asset-vehicle-border);
}

.asset-type-fields-panel.panel-campsite {
    background: var(--asset-campsite-light);
    border-color: var(--asset-campsite-border);
}

.asset-type-fields-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
}

.panel-boat .asset-type-fields-title {
    color: var(--asset-boat-primary);
    border-bottom-color: var(--asset-boat-border);
}

.panel-vehicle .asset-type-fields-title {
    color: var(--asset-vehicle-primary);
    border-bottom-color: var(--asset-vehicle-border);
}

.panel-campsite .asset-type-fields-title {
    color: var(--asset-campsite-primary);
    border-bottom-color: var(--asset-campsite-border);
}

/* ============================================
   Responsive - Asset Cards Mobile
   ============================================ */

@media (max-width: 768px) {
    .asset-cards-grid {
        grid-template-columns: 1fr;
    }

    .asset-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .asset-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .document-cards-grid {
        grid-template-columns: 1fr;
    }

    .asset-type-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
    }

    .asset-type-pill {
        flex-shrink: 0;
    }

    /* Mobile: Asset action buttons always visible */
    .asset-quick-actions {
        opacity: 1;
    }

    .asset-quick-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* Mobile: Stack page header actions */
    .page-view .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .page-view .page-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* Mobile: Wrap btn-group on narrow screens */
    .page-view .btn-group {
        flex-wrap: wrap;
    }

    .page-view .btn-group > .btn {
        flex: 1 1 auto;
        min-width: 80px;
    }
}

@media (max-width: 576px) {
    /* Extra small screens: Simplified asset spec grid */
    .asset-specs-grid {
        grid-template-columns: 1fr;
    }

    /* Stack asset detail header vertically */
    .asset-detail-info h3 {
        font-size: 1.25rem;
    }

    .asset-detail-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    /* Document cards footer buttons */
    .document-card-footer {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .document-card-footer .btn {
        flex: 1;
        min-width: 44px;
    }
}

/* ============================================
   ASSET MANAGEMENT - Premium Enhancements
   Enhanced visual styling for a polished look
   ============================================ */

/* Enhanced Asset Type Color System - Deeper, Richer */
:root {
    /* Boat - Deep Ocean Blue with gradient sheen */
    --asset-boat-dark: #0369A1;
    --asset-boat-glow: rgba(14, 165, 233, 0.25);
    --asset-boat-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);

    /* Vehicle - Forest Green with depth */
    --asset-vehicle-dark: #047857;
    --asset-vehicle-glow: rgba(16, 185, 129, 0.25);
    --asset-vehicle-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);

    /* Campsite - Rich Amber with warmth */
    --asset-campsite-dark: #B45309;
    --asset-campsite-glow: rgba(245, 158, 11, 0.25);
    --asset-campsite-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

/* ============================================
   Premium Table Row Styling for Assets
   ============================================ */

.modern-table tbody tr:has(.asset-name-cell) {
    transition: all 0.2s ease;
}

.modern-table tbody tr:has(.asset-name-cell):hover {
    background: linear-gradient(90deg, var(--gray-50) 0%, white 50%, var(--gray-50) 100%);
}

/* Asset name with subtle hover effect */
.asset-name-primary {
    transition: color 0.15s ease;
}

.modern-table tbody tr:hover .asset-name-primary {
    color: var(--primary);
}

/* Enhanced type icons with subtle animation */
.asset-type-icon {
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.modern-table tbody tr:hover .asset-type-icon {
    transform: scale(1.05);
}

.asset-type-icon.type-boat {
    box-shadow: var(--asset-boat-shadow);
}

.asset-type-icon.type-vehicle {
    box-shadow: var(--asset-vehicle-shadow);
}

.asset-type-icon.type-campsite {
    box-shadow: var(--asset-campsite-shadow);
}

/* Enhanced detail chips with type-specific colors */
.asset-detail-chip {
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.asset-detail-chip:hover {
    background: var(--gray-200);
    transform: translateY(-1px);
}

/* Type-colored detail chips for boats */
.modern-table tbody tr:has(.type-boat) .asset-detail-chip {
    background: var(--asset-boat-light);
    color: var(--asset-boat-dark);
}

.modern-table tbody tr:has(.type-boat) .asset-detail-chip:hover {
    background: var(--asset-boat-border);
}

/* Type-colored detail chips for vehicles */
.modern-table tbody tr:has(.type-vehicle) .asset-detail-chip {
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-dark);
}

.modern-table tbody tr:has(.type-vehicle) .asset-detail-chip:hover {
    background: var(--asset-vehicle-border);
}

/* Type-colored detail chips for campsites */
.modern-table tbody tr:has(.type-campsite) .asset-detail-chip {
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-dark);
}

.modern-table tbody tr:has(.type-campsite) .asset-detail-chip:hover {
    background: var(--asset-campsite-border);
}

/* ============================================
   Premium Status Badge Enhancements
   ============================================ */

.asset-status-badge {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
}

.asset-status-badge.status-active {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

.asset-status-badge.status-maintenance {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15);
    animation: maintenancePulse 3s ease-in-out infinite;
}

@keyframes maintenancePulse {
    0%, 100% { box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); }
}

.asset-status-badge.status-retired {
    border-color: rgba(100, 116, 139, 0.3);
    opacity: 0.85;
}

.asset-status-badge.status-under_repair {
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.15);
}

.asset-status-badge.status-drydock {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

/* ============================================
   Premium Quick Action Buttons
   ============================================ */

.asset-quick-btn {
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.asset-quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.asset-quick-btn.btn-view {
    position: relative;
}

.asset-quick-btn.btn-view::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--info), transparent);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.2s ease;
}

.asset-quick-btn.btn-view:hover::after {
    opacity: 0.15;
}

/* ============================================
   Asset Detail Modal - Premium Enhancements
   ============================================ */

/* Enhanced header with glass morphism effect */
.asset-detail-header {
    background: linear-gradient(135deg, var(--gray-50) 0%, white 50%, var(--gray-50) 100%);
    border: 1px solid var(--gray-100);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Type-specific header borders */
.modal-body:has(.type-boat) .asset-detail-header {
    border-left: 4px solid var(--asset-boat-primary);
}

.modal-body:has(.type-vehicle) .asset-detail-header {
    border-left: 4px solid var(--asset-vehicle-primary);
}

.modal-body:has(.type-campsite) .asset-detail-header {
    border-left: 4px solid var(--asset-campsite-primary);
}

/* Enhanced icon with glow effect on type */
.asset-detail-icon {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.asset-detail-icon.type-boat {
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
}

.asset-detail-icon.type-vehicle {
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.35);
}

.asset-detail-icon.type-campsite {
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
}

/* Enhanced asset code badge */
.asset-detail-info .asset-code-badge {
    background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    letter-spacing: 0.05em;
}

/* ============================================
   Premium Specification Cards
   ============================================ */

.asset-spec-card {
    background: linear-gradient(145deg, white 0%, var(--gray-50) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.asset-spec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gray-200);
    transition: background 0.2s ease;
}

.asset-spec-card:hover::before {
    background: var(--primary);
}

/* Type-specific spec card accents */
.section-boat + .asset-specs-grid .asset-spec-card:hover::before {
    background: var(--asset-boat-gradient);
}

.section-vehicle + .asset-specs-grid .asset-spec-card:hover::before {
    background: var(--asset-vehicle-gradient);
}

.section-campsite + .asset-specs-grid .asset-spec-card:hover::before {
    background: var(--asset-campsite-gradient);
}

/* Enhanced spec icon with subtle gradient */
.asset-spec-icon {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.asset-spec-card:hover .asset-spec-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
}

/* Type-specific icon colors on hover */
.section-boat + .asset-specs-grid .asset-spec-card:hover .asset-spec-icon {
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
}

.section-vehicle + .asset-specs-grid .asset-spec-card:hover .asset-spec-icon {
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-primary);
}

.section-campsite + .asset-specs-grid .asset-spec-card:hover .asset-spec-icon {
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-primary);
}

/* Enhanced spec value typography */
.asset-spec-value {
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Premium Section Titles
   ============================================ */

.asset-section-title {
    position: relative;
    padding-left: var(--space-3);
}

.asset-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    border-radius: 2px;
    background: var(--primary);
}

.asset-section-title.section-boat::before {
    background: var(--asset-boat-gradient);
}

.asset-section-title.section-vehicle::before {
    background: var(--asset-vehicle-gradient);
}

.asset-section-title.section-campsite::before {
    background: var(--asset-campsite-gradient);
}

/* ============================================
   Document Cards - Premium Enhancements
   ============================================ */

.document-card {
    background: linear-gradient(145deg, white 0%, var(--gray-50) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.document-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Enhanced status indicator with glow */
.document-card::before {
    box-shadow: 2px 0 8px rgba(16, 185, 129, 0.3);
}

.document-card.doc-expiring-soon::before {
    box-shadow: 2px 0 8px rgba(245, 158, 11, 0.3);
    animation: expiryWarningPulse 2s ease-in-out infinite;
}

@keyframes expiryWarningPulse {
    0%, 100% { box-shadow: 2px 0 8px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 2px 0 16px rgba(245, 158, 11, 0.5); }
}

.document-card.doc-expired::before {
    box-shadow: 2px 0 8px rgba(239, 68, 68, 0.4);
    animation: expiryDangerPulse 1.5s ease-in-out infinite;
}

@keyframes expiryDangerPulse {
    0%, 100% { box-shadow: 2px 0 8px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 2px 0 16px rgba(239, 68, 68, 0.6); }
}

/* Enhanced document icon */
.document-icon {
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.document-card:hover .document-icon {
    transform: scale(1.05);
}

/* Expiry badge enhancements */
.document-expiry-badge {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.document-expiry-badge.expiry-warning {
    animation: badgeWarningPulse 2s ease-in-out infinite;
}

@keyframes badgeWarningPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.document-expiry-badge.expiry-danger {
    animation: badgeDangerPulse 1.5s ease-in-out infinite;
}

@keyframes badgeDangerPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2); }
    50% { transform: scale(1.03); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); }
}

/* ============================================
   Document Expiry Countdown Display
   ============================================ */

.doc-expiry-countdown {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 500;
}

.doc-expiry-countdown.countdown-valid {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.doc-expiry-countdown.countdown-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.doc-expiry-countdown.countdown-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.doc-expiry-countdown i {
    font-size: 0.9rem;
}

.doc-expiry-days {
    font-weight: 700;
    font-size: 0.95rem;
}

/* ============================================
   Empty Documents State Enhancement
   ============================================ */

.doc-empty-state {
    padding: var(--space-8);
    text-align: center;
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s ease;
}

.doc-empty-state:hover {
    border-color: var(--primary);
    border-style: solid;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.03) 0%, white 100%);
    transform: scale(1.01);
}

.doc-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 1.75rem;
    color: var(--gray-400);
    transition: all 0.25s ease;
}

.doc-empty-state:hover .doc-empty-icon {
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
    transform: translateY(-4px);
}

.doc-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: var(--space-1);
}

.doc-empty-hint {
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* ============================================
   Asset Type Filter Buttons Enhancement
   ============================================ */

.btn-group:has([onclick*="filterAssetsByType"]) {
    background: var(--gray-100);
    padding: 4px;
    border-radius: var(--radius-md);
    gap: 4px;
}

.btn-group:has([onclick*="filterAssetsByType"]) .btn {
    border: none;
    background: transparent;
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.btn-group:has([onclick*="filterAssetsByType"]) .btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
}

.btn-group:has([onclick*="filterAssetsByType"]) .btn.active {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Type-specific active states */
.btn-group:has([onclick*="filterAssetsByType"]) .btn.active:has(i.bi-water),
.btn-group:has([onclick*="filterAssetsByType"]) .btn.active[onclick*="'boat'"] {
    color: var(--asset-boat-primary);
}

.btn-group:has([onclick*="filterAssetsByType"]) .btn.active:has(i.bi-truck),
.btn-group:has([onclick*="filterAssetsByType"]) .btn.active[onclick*="'vehicle'"] {
    color: var(--asset-vehicle-primary);
}

.btn-group:has([onclick*="filterAssetsByType"]) .btn.active:has(i.bi-tree),
.btn-group:has([onclick*="filterAssetsByType"]) .btn.active[onclick*="'campsite'"] {
    color: var(--asset-campsite-primary);
}

/* ============================================
   Asset Info Card (in expense form) Enhancement
   ============================================ */

.asset-info-card {
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    position: relative;
    overflow: hidden;
}

.asset-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
}

.asset-info-card.info-boat::before {
    background: var(--asset-boat-gradient);
}

.asset-info-card.info-vehicle::before {
    background: var(--asset-vehicle-gradient);
}

.asset-info-card.info-campsite::before {
    background: var(--asset-campsite-gradient);
}

/* ============================================
   Tour Selection Styles
   ============================================ */

/* Tour Chips Container */
.tour-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual Tour Chip */
.tour-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.tour-chip:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.tour-chip.selected {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
}

.tour-chip-code {
    font-weight: 600;
}

.tour-chip-date {
    color: var(--gray-500);
    font-size: 0.8rem;
}

.tour-chip-boat {
    color: var(--asset-boat);
    font-size: 0.8rem;
}

/* Tour Search Container */
.tour-search {
    position: relative;
    width: 100%;
    max-width: none;
}

.tour-search .autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 300px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}

/* Tour Info Card (selected tour display) */
.tour-info-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, white 100%);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: 12px 16px;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .tour-chips {
        gap: 6px;
    }

    .tour-chip {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .tour-chip-date,
    .tour-chip-boat {
        display: none;
    }
}

/* ============================================
   Add Asset Button Enhancement
   ============================================ */

.page-header-actions .btn-primary:has(i.bi-plus-circle) {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    transition: all 0.25s ease;
}

.page-header-actions .btn-primary:has(i.bi-plus-circle):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

/* ============================================
   Asset Modal Header Enhancements
   ============================================ */

.modal:has(.asset-detail-header) .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.modal:has(.asset-detail-header) .modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal:has(.asset-detail-header) .modal-header .modal-title i {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Type-specific modal title icons */
.modal-header .modal-title i.bi-water {
    background: var(--asset-boat-light);
    color: var(--asset-boat-primary);
}

.modal-header .modal-title i.bi-truck,
.modal-header .modal-title i.bi-car-front {
    background: var(--asset-vehicle-light);
    color: var(--asset-vehicle-primary);
}

.modal-header .modal-title i.bi-tree {
    background: var(--asset-campsite-light);
    color: var(--asset-campsite-primary);
}

/* ============================================
   Responsive Enhancements
   ============================================ */

@media (max-width: 768px) {
    .asset-detail-icon {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .asset-spec-card:hover {
        transform: none;
    }

    .document-card:hover {
        transform: none;
    }

    /* Reduce animation intensity on mobile */
    .document-card.doc-expiring-soon::before,
    .document-card.doc-expired::before {
        animation: none;
    }
}

/* ============================================
   Print Styles for Assets
   ============================================ */

@media print {
    .asset-quick-actions {
        display: none;
    }

    .asset-status-badge::before {
        animation: none;
    }

    .asset-detail-icon {
        box-shadow: none;
        border: 2px solid currentColor;
    }

    .document-card::before {
        box-shadow: none;
    }
}

/* ============================================
   TOF SETTLE - Tour Operating Fund Settlement
   Premium card-based design with proper workflow
   ============================================ */

/* TOF Page Premium Tab Navigation */
.tof-tab-group {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 3px;
    gap: 2px;
}

.tof-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.tof-tab-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--gray-800);
}

.tof-tab-btn.active {
    background: white;
    color: var(--primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.tof-tab-btn i {
    font-size: 1rem;
}

.tof-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--warning);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 10px;
    margin-left: var(--space-1);
}

/* Legacy TOF tabs - keep for backward compatibility */
.tof-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--gray-100);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
}

.tof-tab {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: transparent;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.tof-tab:hover {
    color: var(--gray-800);
    background: rgba(255, 255, 255, 0.5);
}

.tof-tab.active {
    background: white;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.tof-tab i {
    font-size: 1.125rem;
}

/* TOF Summary Grid Specific */
.tof-summary-grid {
    margin-bottom: var(--space-6);
}

/* TOF Allocate Form Card */
.tof-allocate-body {
    padding: var(--space-6);
}

.tof-allocate-form {
    max-width: 700px;
}

.tof-form-section {
    margin-bottom: var(--space-5);
}

.tof-form-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.tof-form-label.warning {
    color: var(--warning);
}

.tof-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50%;
}

.tof-form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* TOF Tour Info Card */
.tof-tour-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--info-light, #e0f2fe) 0%, #f0f9ff 100%);
    border: 1px solid var(--info, #0ea5e9);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
}

.tof-tour-info-main {
    flex: 1;
}

.tof-tour-code {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.tof-tour-dates {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.tof-tour-info-stats {
    display: flex;
    gap: var(--space-4);
}

.tof-tour-stat {
    text-align: center;
    padding: var(--space-2) var(--space-3);
    background: white;
    border-radius: var(--radius-sm);
}

.tof-tour-stat.suggested {
    background: var(--success-light, #dcfce7);
}

.tof-tour-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.tof-tour-stat.suggested .tof-tour-stat-value {
    color: var(--success);
}

.tof-tour-stat-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    margin-top: 2px;
}

/* TOF Amount Row */
.tof-amount-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.tof-amount-field,
.tof-notes-field {
    display: flex;
    flex-direction: column;
}

.tof-reason-row {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--warning-light, #fef3c7);
    border-radius: var(--radius);
    border-left: 3px solid var(--warning);
}

/* TOF Transfer Preview */
.tof-transfer-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
}

.tof-transfer-flow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tof-transfer-account {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tof-transfer-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.tof-transfer-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9375rem;
}

.tof-transfer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
}

.tof-transfer-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}

/* TOF Submit Row */
.tof-submit-row {
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-100);
}

/* TOF Empty State */
.tof-empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}

.tof-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--gray-100);
    border-radius: 50%;
    margin-bottom: var(--space-5);
}

.tof-empty-icon i {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.tof-empty-state h4 {
    margin: 0 0 var(--space-2);
    font-size: 1.25rem;
    color: var(--gray-700);
}

.tof-empty-state p {
    margin: 0 0 var(--space-5);
    color: var(--gray-500);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* TOF Responsive */
@media (max-width: 768px) {
    .tof-tab-group {
        width: 100%;
    }

    .tof-tab-btn {
        flex: 1;
        justify-content: center;
    }

    .tof-tour-info-card {
        flex-direction: column;
        align-items: stretch;
    }

    .tof-tour-info-stats {
        justify-content: center;
    }

    .tof-amount-row {
        grid-template-columns: 1fr;
    }

    .tof-transfer-preview {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .tof-transfer-flow {
        justify-content: center;
    }

    .tof-transfer-amount {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--gray-200);
    }
}

/* TOF Settle Container */
.tof-settle-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 1200px) {
    .tof-settle-container {
        grid-template-columns: 1fr;
    }
}

/* TOF Summary Card - Sticky Sidebar */
.tof-summary-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-6));
}

.tof-summary-header {
    background: linear-gradient(135deg, var(--ocean-dark), #1e3a5f);
    color: white;
    padding: var(--space-5);
}

.tof-summary-header h4 {
    margin: 0 0 var(--space-1);
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tof-summary-header p {
    margin: 0;
    opacity: 0.85;
    font-size: 0.875rem;
}

.tof-summary-body {
    padding: var(--space-5);
}

/* Fund Progress Bar */
.tof-fund-progress {
    margin-bottom: var(--space-5);
}

.tof-fund-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
}

.tof-fund-progress-label {
    font-size: 0.8125rem;
    color: var(--gray-600);
    font-weight: 500;
}

.tof-fund-progress-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.tof-fund-progress-value.remaining {
    color: var(--success);
}

.tof-fund-progress-value.overspent {
    color: var(--danger);
}

.tof-fund-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.tof-fund-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.4s ease-out, background 0.3s ease;
}

.tof-fund-progress-fill.under-budget {
    background: linear-gradient(90deg, var(--success), var(--tropical-teal));
}

.tof-fund-progress-fill.near-budget {
    background: linear-gradient(90deg, var(--warning), #F97316);
}

.tof-fund-progress-fill.over-budget {
    background: linear-gradient(90deg, var(--danger), #DC2626);
}

/* Fund Details */
.tof-fund-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tof-fund-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.tof-fund-detail-row:last-child {
    border-bottom: none;
}

.tof-fund-detail-label {
    color: var(--gray-600);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tof-fund-detail-label i {
    width: 18px;
    color: var(--gray-400);
}

.tof-fund-detail-value {
    font-weight: 600;
    color: var(--gray-800);
}

.tof-fund-detail-value.allocated {
    color: var(--primary);
}

.tof-fund-detail-value.spent {
    color: var(--warning);
}

.tof-fund-detail-value.remaining {
    color: var(--success);
}

/* Main Content Area */
.tof-settle-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* TOF Selector Card */
.tof-selector-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-6);
}

.tof-selector-card h3 {
    margin: 0 0 var(--space-4);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tof-selector-card h3 i {
    color: var(--primary);
}

/* TOF Expense Entry Card */
.tof-expense-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tof-expense-card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tof-expense-card-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tof-expense-card-header h3 i {
    color: var(--tropical-teal);
}

.tof-expense-count {
    background: var(--gray-100);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
}

.tof-expense-card-body {
    padding: var(--space-6);
}

/* Expense Form */
.tof-expense-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.tof-expense-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .tof-expense-form-row {
        grid-template-columns: 1fr;
    }
}

.tof-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tof-form-group.full-width {
    grid-column: 1 / -1;
}

.tof-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.tof-form-label .required {
    color: var(--danger);
}

/* Amount Input - Larger for emphasis */
.tof-amount-input-wrapper {
    position: relative;
}

.tof-amount-input-wrapper .currency-prefix {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-500);
}

.tof-amount-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.5rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 1.25rem;
    font-weight: 600;
    transition: var(--transition);
}

.tof-amount-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Receipt Dropzone - Premium Design */
.tof-receipt-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    background: var(--gray-50);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.tof-receipt-dropzone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.04);
}

.tof-receipt-dropzone.drag-over {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
    border-style: solid;
    transform: scale(1.01);
}

.tof-receipt-dropzone.has-file {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.04);
}

.tof-receipt-dropzone-icon {
    font-size: 2.5rem;
    color: var(--gray-400);
    margin-bottom: var(--space-3);
    transition: var(--transition);
}

.tof-receipt-dropzone:hover .tof-receipt-dropzone-icon {
    color: var(--primary);
    transform: scale(1.1);
}

.tof-receipt-dropzone.has-file .tof-receipt-dropzone-icon {
    color: var(--success);
}

.tof-receipt-dropzone-text {
    color: var(--gray-600);
    font-size: 0.9375rem;
    margin-bottom: var(--space-2);
}

.tof-receipt-dropzone-hint {
    color: var(--gray-500);
    font-size: 0.8125rem;
}

.tof-receipt-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Receipt Preview in Dropzone */
.tof-receipt-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    margin-top: var(--space-3);
}

.tof-receipt-preview-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tof-receipt-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tof-receipt-preview-thumb i {
    font-size: 1.25rem;
    color: var(--gray-400);
}

.tof-receipt-preview-info {
    flex: 1;
    min-width: 0;
}

.tof-receipt-preview-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tof-receipt-preview-size {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.tof-receipt-preview-remove {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.tof-receipt-preview-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Add Expense Button */
.tof-add-expense-btn {
    width: 100%;
    padding: var(--space-4);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    background: linear-gradient(135deg, var(--tropical-teal), var(--success));
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.tof-add-expense-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.tof-add-expense-btn:active {
    transform: translateY(0);
}

.tof-add-expense-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Recorded Expenses Section */
.tof-recorded-expenses {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tof-recorded-expenses-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tof-recorded-expenses-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tof-recorded-expenses-header h3 i {
    color: var(--success);
}

.tof-recorded-expenses-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* Empty State for Recorded Expenses */
.tof-expenses-empty {
    padding: var(--space-8);
    text-align: center;
}

.tof-expenses-empty-icon {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: var(--space-4);
}

.tof-expenses-empty-text {
    color: var(--gray-500);
    font-size: 0.9375rem;
}

/* Recorded Expenses List */
.tof-expenses-list {
    padding: 0;
}

.tof-expense-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--gray-100);
    transition: var(--transition);
}

.tof-expense-item:last-child {
    border-bottom: none;
}

.tof-expense-item:hover {
    background: var(--gray-50);
}

.tof-expense-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    flex-shrink: 0;
}

.tof-expense-item-icon.has-receipt {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.tof-expense-item-details {
    flex: 1;
    min-width: 0;
}

.tof-expense-item-category {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9375rem;
}

.tof-expense-item-memo {
    font-size: 0.8125rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tof-expense-item-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    flex-shrink: 0;
}

.tof-expense-item-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.tof-expense-item-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.tof-expense-item-btn:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.tof-expense-item-btn.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Cash Verification Section - Collapsible */
.tof-cash-verification {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 2px solid transparent;
    transition: var(--transition);
}

.tof-cash-verification.active {
    border-color: var(--primary);
}

.tof-cash-verification-header {
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.tof-cash-verification-header:hover {
    background: var(--gray-50);
}

.tof-cash-verification-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tof-cash-verification-header h3 i {
    color: var(--warning);
}

.tof-cash-verification-toggle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.tof-cash-verification-toggle i {
    transition: transform 0.3s ease;
}

.tof-cash-verification.expanded .tof-cash-verification-toggle i {
    transform: rotate(180deg);
}

.tof-cash-verification-body {
    padding: 0 var(--space-6) var(--space-6);
    display: none;
}

.tof-cash-verification.expanded .tof-cash-verification-body {
    display: block;
}

/* Cash Verification Content */
.tof-cash-expected {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.tof-cash-expected-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
}

.tof-cash-expected-row.total {
    border-top: 2px solid var(--gray-200);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}

.tof-cash-expected-label {
    color: var(--gray-600);
    font-size: 0.9375rem;
}

.tof-cash-expected-value {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.tof-cash-expected-value.total {
    font-size: 1.25rem;
    color: var(--success);
}

/* Discrepancy Alert */
.tof-discrepancy-alert {
    padding: var(--space-4);
    border-radius: var(--radius);
    margin-top: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.tof-discrepancy-alert.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.tof-discrepancy-alert.danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.tof-discrepancy-alert.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.tof-discrepancy-alert i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tof-discrepancy-alert.warning i {
    color: var(--warning);
}

.tof-discrepancy-alert.danger i {
    color: var(--danger);
}

.tof-discrepancy-alert.success i {
    color: var(--success);
}

.tof-discrepancy-alert-content h4 {
    margin: 0 0 var(--space-1);
    font-size: 0.9375rem;
    font-weight: 600;
}

.tof-discrepancy-alert.warning h4 {
    color: var(--warning);
}

.tof-discrepancy-alert.danger h4 {
    color: var(--danger);
}

.tof-discrepancy-alert.success h4 {
    color: var(--success);
}

.tof-discrepancy-alert-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Complete Settlement Button */
.tof-settle-btn {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--ocean-dark));
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.tof-settle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
}

.tof-settle-btn:active {
    transform: translateY(0);
}

.tof-settle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* TOF Category Pills */
.tof-category-select {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tof-category-option {
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: white;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.tof-category-option:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tof-category-option.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .tof-tabs {
        flex-direction: column;
    }

    .tof-settle-container {
        grid-template-columns: 1fr;
    }

    .tof-summary-card {
        position: static;
    }

    .tof-expense-form-row {
        grid-template-columns: 1fr;
    }

    .tof-expense-item {
        flex-wrap: wrap;
    }

    .tof-expense-item-amount {
        order: -1;
        width: 100%;
        text-align: right;
        margin-bottom: var(--space-2);
    }

    .tof-expense-item-actions {
        margin-left: auto;
    }
}

/* =============================================================================
   TOF SETTLE - REDESIGNED UI
   ============================================================================= */

/* Receipt Dropzone */
.receipt-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--gray-50);
}

.receipt-dropzone:hover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

.receipt-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.1);
    transform: scale(1.01);
}

.receipt-dropzone.has-file {
    border-style: solid;
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dropzone-icon {
    font-size: 2.5rem;
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.receipt-dropzone:hover .dropzone-icon {
    transform: translateY(-3px);
    color: var(--primary);
}

.dropzone-text {
    color: var(--gray-600);
}

.dropzone-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.receipt-filename {
    font-weight: 500;
    color: var(--gray-700);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expense highlight animation */
.expense-new {
    animation: expense-highlight 2s ease-out;
}

@keyframes expense-highlight {
    0% {
        background-color: rgba(16, 185, 129, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

/* TOF Settle gradient background */
.bg-gradient-light {
    background: linear-gradient(to right, var(--gray-50), var(--gray-100));
}

/* Expense item in list */
.expense-item {
    transition: background-color 0.3s ease;
}

.expense-item:hover {
    background-color: var(--gray-50);
}

/* Progress bar colors */
.progress {
    background-color: var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.progress-bar {
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* TOF Settle responsive */
@media (max-width: 991.98px) {
    #tof-settle .col-lg-8,
    #tof-settle .col-lg-4 {
        width: 100%;
    }

    #tof-settle .sticky-top {
        position: relative;
        top: 0;
    }
}

/* Suki Card Photo Upload */
.suki-photo-box {
    width: 100%;
    aspect-ratio: 4/3;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: var(--gray-50);
    transition: all 0.2s ease;
}

.suki-photo-box:hover {
    border-color: var(--primary);
    background-color: rgba(14, 165, 233, 0.05);
}

.suki-photo-box.suki-photo-dragover {
    border-color: var(--primary);
    background-color: rgba(14, 165, 233, 0.1);
    border-style: solid;
}

.suki-photo-placeholder {
    font-size: 2rem;
    color: var(--gray-400);
}

.suki-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suki-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.suki-photo-box:hover .suki-photo-overlay {
    opacity: 1;
}

/* =============================================================================
   UNIFIED SCHEDULE STYLES
   Harmonized styling for Van, Boat, and Campsite schedules
   ============================================================================= */

/* Schedule Navigation - Premium button group */
.schedule-nav {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.schedule-nav .btn {
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--gray-600);
    border-radius: 7px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.schedule-nav .btn:hover {
    color: var(--gray-900);
    background: rgba(255,255,255,0.7);
}

.schedule-nav .btn-today {
    background: white;
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.schedule-nav .btn-today:hover {
    background: white;
    color: var(--primary-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Schedule Summary Cards - Premium Design */
.schedule-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.schedule-stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--gray-200);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.schedule-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, transparent);
    transition: background 0.25s ease;
}

.schedule-stat-card:hover {
    border-color: var(--gray-300);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.schedule-stat-card:hover::before {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.schedule-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.schedule-stat-card:hover .schedule-stat-icon {
    transform: scale(1.05);
}

.schedule-stat-icon.primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}
.schedule-stat-icon.success {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%);
    color: #059669;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
}
.schedule-stat-icon.warning {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.06) 100%);
    color: #d97706;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12);
}
.schedule-stat-icon.danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.06) 100%);
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}
.schedule-stat-icon.info {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(2, 132, 199, 0.06) 100%);
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}
.schedule-stat-icon.secondary {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(107, 114, 128, 0.05) 100%);
    color: #6b7280;
}

.schedule-stat-content {
    flex: 1;
    min-width: 0;
}

.schedule-stat-value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.schedule-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* Schedule Alert Cards - Premium style */
.schedule-alert-card {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.schedule-alert-card.warning { border: 1px solid rgba(245, 158, 11, 0.3); }
.schedule-alert-card.danger { border: 1px solid rgba(239, 68, 68, 0.3); }

.schedule-alert-header {
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.schedule-alert-header.warning { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; }
.schedule-alert-header.danger { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #991b1b; }

.schedule-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: auto;
}

.schedule-alert-badge.warning { background: rgba(245, 158, 11, 0.2); color: #b45309; }
.schedule-alert-badge.danger { background: rgba(239, 68, 68, 0.2); color: #dc2626; }

.schedule-alert-body { background: white; padding: 0; }

.schedule-alert-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
    transition: all 0.15s ease;
    position: relative;
}

.schedule-alert-item:last-child { border-bottom: none; }
.schedule-alert-item:hover { background: var(--gray-50); }

.schedule-alert-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: all 0.15s ease;
}

.schedule-alert-item:hover::before { opacity: 1; }
.schedule-alert-card.warning .schedule-alert-item::before { background: #f59e0b; }
.schedule-alert-card.danger .schedule-alert-item::before { background: #ef4444; }

.schedule-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.schedule-alert-icon.warning { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #d97706; }
.schedule-alert-icon.danger { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; }

.schedule-alert-content { flex: 1; min-width: 0; }
.schedule-alert-title { font-weight: 600; font-size: 0.9rem; color: var(--gray-900); }
.schedule-alert-subtitle { font-size: 0.8rem; color: var(--gray-500); }
.schedule-alert-action { flex-shrink: 0; }

/* Schedule Legend */
/* Premium Legend */
.schedule-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, var(--gray-50) 0%, #FAFAFA 100%);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--gray-100);
    margin-top: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.schedule-legend-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.schedule-legend-item:hover {
    color: var(--gray-800);
}

.schedule-legend-box {
    width: 24px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.schedule-legend-box.available { background: var(--gray-100); }
.schedule-legend-box.own { background: rgba(34, 197, 94, 0.3); border-left: 3px solid #22C55E; }
.schedule-legend-box.partner { background: rgba(59, 130, 246, 0.3); border-left: 3px solid #3B82F6; }
.schedule-legend-box.needs-partner { background: rgba(249, 115, 22, 0.3); border-left: 3px solid #F97316; }
.schedule-legend-box.pending { background: rgba(156, 163, 175, 0.3); border-left: 3px solid #9CA3AF; }
.schedule-legend-box.expedition-en2cr { background: linear-gradient(135deg, #1E3A5F, #2D5A8A); }
.schedule-legend-box.expedition-cr2en { background: linear-gradient(135deg, #0F766E, #14B8A6); }
.schedule-legend-box.expedition-lin { background: linear-gradient(135deg, #4338CA, #6366F1); }
.schedule-legend-box.island-hopping { background: rgba(93, 173, 226, 0.6); }
.schedule-legend-box.maintenance { background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 5px, #fde68a 5px, #fde68a 10px); }
.schedule-legend-box.chartered-out { background: repeating-linear-gradient(45deg, #F3F4F6, #F3F4F6 5px, #E5E7EB 5px, #E5E7EB 10px); border-left: 3px solid #6B7280; }
.schedule-legend-box.capacity-low { background: rgba(34, 197, 94, 0.3); }
.schedule-legend-box.capacity-medium { background: rgba(234, 179, 8, 0.4); }
.schedule-legend-box.capacity-high { background: rgba(249, 115, 22, 0.4); }
.schedule-legend-box.capacity-over { background: rgba(239, 68, 68, 0.4); border: 1px solid #ef4444; }

/* Charter Summary Card */
.charter-summary-card {
    background: white;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-top: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Chartered-Out card (gray) */
.charter-summary-card.charter-out {
    border-color: var(--gray-200);
}

/* Chartered-In card (purple) */
.charter-summary-card.charter-in {
    border-color: rgba(139, 92, 246, 0.3);
}

.charter-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-bottom: 1px solid var(--gray-200);
}

/* Chartered-In header (purple gradient) */
.charter-summary-card.charter-in .charter-summary-header {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border-bottom-color: rgba(139, 92, 246, 0.2);
}

.charter-summary-header .header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gray-700);
}

.charter-summary-card.charter-in .charter-summary-header .header-title {
    color: #6D28D9;
}

.charter-summary-header .header-title i {
    font-size: 1.125rem;
    color: var(--gray-500);
}

.charter-summary-card.charter-in .charter-summary-header .header-title i {
    color: #8B5CF6;
}

.charter-summary-header .badge {
    background: var(--gray-600);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.charter-summary-card.charter-in .charter-summary-header .badge {
    background: #8B5CF6;
}

.charter-summary-body {
    padding: 0.75rem;
}

.charter-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.charter-summary-item:hover {
    background: var(--gray-50);
}

.charter-summary-item .boat-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.charter-summary-item .boat-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(107, 114, 128, 0.08) 100%);
    color: var(--gray-600);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.charter-summary-item .boat-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-800);
}

.charter-summary-item .boat-code {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.charter-summary-item .charter-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.charter-summary-item .detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 4px;
    background: var(--gray-100);
    color: var(--gray-600);
}

.charter-summary-item .detail-chip.client {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.charter-summary-item .detail-chip.dates {
    background: rgba(107, 114, 128, 0.1);
    color: var(--gray-600);
}

.charter-summary-item .detail-chip.purpose {
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
}

.charter-summary-item .detail-chip.partner {
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
}

.charter-summary-item .detail-chip.rate {
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
}

.charter-summary-item .edit-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0.375rem;
    border-radius: 4px;
    color: var(--gray-400);
}

.charter-summary-item:hover .edit-btn {
    opacity: 1;
}

.charter-summary-item .edit-btn:hover {
    color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

/* Unassigned Tours - Grouped by date */
.unassigned-tours-grouped {
    padding: 1rem;
}

.unassigned-date-group {
    margin-bottom: 1rem;
}

.unassigned-date-group:last-child {
    margin-bottom: 0;
}

.unassigned-date-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.unassigned-tours-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tour-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
    color: #EA580C;
    border: 1px solid rgba(249, 115, 22, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tour-chip:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.2);
}

.tour-chip.expedition {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.1) 0%, rgba(30, 58, 95, 0.05) 100%);
    color: #1E3A5F;
    border-color: rgba(30, 58, 95, 0.2);
}

.tour-chip.expedition:hover {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.2) 0%, rgba(30, 58, 95, 0.1) 100%);
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.2);
}

.tour-chip.island_hopping {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(8, 145, 178, 0.05) 100%);
    color: #0891B2;
    border-color: rgba(8, 145, 178, 0.2);
}

.tour-chip.island_hopping:hover {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.2) 0%, rgba(8, 145, 178, 0.1) 100%);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.2);
}

.tour-chip i {
    font-size: 0.625rem;
}

/* Schedule date headers */
.schedule-date-header .date-day {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
}

.schedule-date-header .date-num {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.2;
}

.schedule-date-header .date-month {
    font-size: 0.65rem;
    color: var(--gray-500);
}

.schedule-date-header.today {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.04)) !important;
}

/* Apple Calendar-style circled date for today */
.schedule-date-header.today .date-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--tropical-blue, #0EA5E9), #0284C7);
    color: white !important;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.35);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .schedule-stats { grid-template-columns: repeat(2, 1fr); }
    .schedule-stat-card { padding: 0.875rem 1rem; }
    .schedule-stat-value { font-size: 1.25rem; }
    .schedule-nav { padding: 3px; }
    .schedule-nav .btn { padding: 0.375rem 0.75rem; }
}

/* ============================================
   BOAT SCHEDULE PREMIUM STYLES
   ============================================ */

/* Section Headers */
.section-header.fleet-header td,
.section-header.partner-header td {
    padding: 0.875rem 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.section-header.fleet-header td {
    background: linear-gradient(90deg, #F0FDFA 0%, #CCFBF1 100%);
    border-left-color: #14B8A6;
    color: #0F766E;
}

.section-header.partner-header td {
    background: linear-gradient(90deg, #F5F3FF 0%, #EDE9FE 100%);
    border-left-color: #8B5CF6;
    color: #6D28D9;
}

.section-header.fleet-header td i,
.section-header.partner-header td i {
    font-size: 1rem;
    margin-right: 0.5rem;
}

.section-subheader td {
    background: linear-gradient(90deg, #FFFBEB 0%, #FEF3C7 100%);
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.75rem;
    color: #92400E;
    border-left: 3px solid #F59E0B;
}

/* Premium Tour Blocks - Shared base for all expedition types */
.schedule-block[class*="expedition-"] {
    color: white;
    border-radius: 8px;
    padding: 0.5rem 0.625rem;
    min-height: 44px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Glass shine effect for all expedition types */
.schedule-block[class*="expedition-"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

/* EN2CR - Navy blue (classic expedition) */
.schedule-block.expedition-en2cr {
    background: linear-gradient(135deg, #1E3A5F 0%, #2D5A8A 100%);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
}
.schedule-block.expedition-en2cr:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.4);
}

/* CR2EN - Lighter teal (return route) */
.schedule-block.expedition-cr2en {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.3);
}
.schedule-block.expedition-cr2en:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.4);
}

/* LIN - Lighter indigo (linear route) */
.schedule-block.expedition-lin {
    background: linear-gradient(135deg, #4338CA 0%, #6366F1 100%);
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.3);
}
.schedule-block.expedition-lin:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(67, 56, 202, 0.4);
}

.schedule-block.ih-block {
    background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
    color: white;
    border-radius: 8px;
    padding: 0.5rem 0.625rem;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Glass shine effect */
.schedule-block.ih-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

.schedule-block.ih-block:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.4);
}

.schedule-block .block-code {
    font-weight: 600;
    font-size: 0.7rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-block .block-day {
    font-size: 0.625rem;
    opacity: 0.85;
    display: block;
    margin-top: 1px;
}

.schedule-block .block-direction {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    line-height: 1;
    opacity: 0.9;
}

/* Charter Out Blocks */
.schedule-block.charter-out-block {
    background: repeating-linear-gradient(
        45deg,
        #E5E7EB,
        #E5E7EB 4px,
        #F3F4F6 4px,
        #F3F4F6 8px
    );
    color: #6B7280;
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    border: 1px dashed #9CA3AF;
    font-style: italic;
}

.schedule-block.charter-out-block .block-code {
    font-weight: 500;
    font-size: 0.65rem;
}

/* Boat Rows */
.resource-row {
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.resource-row:hover {
    background-color: rgba(59, 130, 246, 0.03);
    border-left-color: #3B82F6;
}

.resource-row.chartered-in {
    background-color: rgba(139, 92, 246, 0.04);
}

.resource-row.chartered-in:hover {
    background-color: rgba(139, 92, 246, 0.08);
    border-left-color: #8B5CF6;
}

/* Boat Info Cell */
.resource-name {
    min-width: 180px;
    padding: 0.75rem 1rem !important;
}

.resource-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.resource-info strong {
    font-size: 0.875rem;
    color: var(--gray-900);
}

.resource-info small {
    font-size: 0.75rem;
}

/* Premium Boat Info (new structure) */
.boat-info-premium {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.boat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.boat-icon.fleet-icon {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.08) 100%);
    color: #0D9488;
}

.boat-icon.partner-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #7C3AED;
}

.boat-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.boat-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boat-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* EXT Badge */
.badge-external {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
    border-radius: 4px;
    margin-left: 0.5rem;
}

/* Schedule Cells */
.schedule-cell {
    padding: 0.25rem;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

/* Empty cell "+" hover effect */
.schedule-cell.available {
    position: relative;
    cursor: pointer;
}

.schedule-cell.available::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--gray-300);
    opacity: 0;
    transition: all 0.2s ease;
}

.schedule-cell.available:hover {
    background: rgba(14, 165, 233, 0.06);
}

.schedule-cell.available:hover::after {
    opacity: 1;
    color: var(--tropical-blue, #0EA5E9);
}

.schedule-timeline tbody tr td:not(.resource-name) {
    border-left: 1px solid var(--gray-100);
}

/* Today Column Highlight */
.schedule-timeline tbody tr td.today-col,
.schedule-timeline thead tr th.today {
    background-color: rgba(14, 165, 233, 0.03);
}

/* Stat Card for Chartered Out */
.schedule-stat-icon.charter {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(107, 114, 128, 0.08) 100%);
    color: #6B7280;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.12);
}

/* Premium Filter Bar */
.schedule-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.premium-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.25rem;
}

/* Date Range Display */
.schedule-date-range {
    font-size: 0.875rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-date-range i {
    font-size: 1rem;
    color: var(--gray-400);
}

/* Add Partner Button */
.btn-add-partner {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-add-partner:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Boat Schedule Responsive */
@media (max-width: 992px) {
    .resource-name {
        min-width: 140px;
    }

    .boat-info-premium {
        gap: 0.5rem;
    }

    .boat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .schedule-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-name {
        min-width: 120px;
    }

    .boat-icon {
        display: none;
    }
}

/* ============================================
   Audit Timeline
   ============================================ */

.audit-timeline {
    position: relative;
    padding-left: 30px;
}

.audit-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.audit-timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.audit-timeline-item:last-child {
    margin-bottom: 0;
}

.audit-timeline-marker {
    position: absolute;
    left: -24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--gray-200);
}

.audit-timeline-content {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1rem;
}

.audit-timeline-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.audit-timeline-actor {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.audit-timeline-description {
    color: var(--gray-800);
}

.audit-timeline-changes {
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 0.75rem;
    border: 1px solid var(--gray-200);
}

.audit-timeline-changes .table {
    font-size: 0.8rem;
}

.audit-timeline-changes .table td,
.audit-timeline-changes .table th {
    padding: 0.35rem 0.5rem;
    word-break: break-word;
}

/* Timeline severity indicators */
.audit-timeline-item[data-severity="warning"] .audit-timeline-marker {
    background: var(--warning);
}

.audit-timeline-item[data-severity="error"] .audit-timeline-marker {
    background: var(--danger);
}

.audit-timeline-item[data-severity="critical"] .audit-timeline-marker {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

/* ============================================================================
   Document Forms (Invoice, Sales Receipt) - Premium UI
   ============================================================================ */

/* Hide number spinners */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinners {
    -moz-appearance: textfield;
}

/* Line Items Container */
.doc-line-items {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--gray-200);
}

/* Line Header */
.doc-line-header {
    display: grid;
    grid-template-columns: 130px 1fr 80px 120px 40px;
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

/* Line Item Row */
.doc-line-item {
    display: grid;
    grid-template-columns: 130px 1fr 80px 120px 40px;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.doc-line-item:last-of-type {
    margin-bottom: 0;
}

.doc-line-item input {
    width: 100%;
}

.doc-line-item .form-control {
    font-size: 0.875rem;
}

/* Delete button in line item */
.doc-line-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    transition: var(--transition);
}

.doc-line-delete:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.doc-line-delete:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Add Line Button (dashed) */
.doc-add-line-btn {
    width: 100%;
    padding: var(--space-3);
    margin-top: var(--space-3);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    background: transparent;
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.doc-add-line-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(14, 165, 233, 0.05);
}

/* Item search within line items */
.doc-line-item .item-search-cell {
    position: relative;
}

.doc-line-item .suggestions-dropdown {
    position: absolute;
    z-index: var(--z-dropdown);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    display: none;
    box-shadow: var(--shadow-md);
}

/* Summary Lines */
.doc-summary-lines {
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: var(--space-3);
}

.doc-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
    gap: var(--space-2);
}

.doc-summary-line:last-child {
    border-bottom: none;
}

.doc-summary-line-desc {
    flex: 1;
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-summary-line-amount {
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
}

/* Summary Divider */
.doc-summary-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
    margin: var(--space-3) 0;
}

/* Summary Total */
.doc-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 600;
    padding-bottom: var(--space-3);
}

.doc-summary-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Submit Button Premium */
.doc-submit-btn {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary), var(--ocean-dark));
    color: white;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
    transition: all 0.2s ease;
    cursor: pointer;
}

.doc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
    color: white;
}

.doc-submit-btn:active {
    transform: translateY(0);
}

/* Cancel Button */
.doc-cancel-btn {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    font-size: 0.9375rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-600);
    transition: var(--transition);
    cursor: pointer;
}

.doc-cancel-btn:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
    color: var(--gray-700);
}

/* Mobile field labels (hidden on desktop, shown on mobile) */
.doc-field-label {
    display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .doc-line-header {
        display: none;
    }

    .doc-line-item {
        display: flex !important;
        flex-direction: column;
        grid-template-columns: none;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .doc-line-item > * {
        width: 100%;
    }

    /* Show mobile field labels */
    .doc-field-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        margin-bottom: var(--space-1);
    }

    /* Wrapper for field + label on mobile */
    .doc-field-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .doc-line-delete {
        width: 100%;
        justify-content: center;
        padding: var(--space-2);
        background: rgba(239, 68, 68, 0.05);
        color: var(--danger);
        height: auto;
    }
}

/* Sales Receipt specific (green theme) */
.doc-form--sales-receipt .doc-summary-total-value {
    color: var(--success);
}

.doc-form--sales-receipt .doc-submit-btn {
    background: linear-gradient(135deg, var(--success), #059669);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.doc-form--sales-receipt .doc-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.doc-form--sales-receipt .doc-add-line-btn:hover {
    border-color: var(--success);
    color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

/* Expense specific (coral/danger theme) */
.doc-submit-btn--expense {
    background: linear-gradient(135deg, #E11D48, #BE123C);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}

.doc-submit-btn--expense:hover {
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.45);
}

/* ============================================
   FINANCE SECTION - Enhanced UX Styles
   Invoices, Sales Receipts, Expenses
   ============================================ */

/* Finance Summary Stats Row */
.finance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.finance-stat-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--gray-300);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.finance-stat-card:hover {
    box-shadow: var(--shadow-md);
}

.finance-stat-card.stat-success {
    border-left-color: var(--success);
}

.finance-stat-card.stat-warning {
    border-left-color: var(--warning);
}

.finance-stat-card.stat-danger {
    border-left-color: var(--danger);
}

.finance-stat-card.stat-info {
    border-left-color: var(--info);
}

.finance-stat-card.stat-primary {
    border-left-color: var(--primary);
}

.finance-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.finance-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.finance-stat-value.text-success { color: var(--success); }
.finance-stat-value.text-warning { color: var(--warning); }
.finance-stat-value.text-danger { color: var(--danger); }
.finance-stat-value.text-info { color: var(--info); }

.finance-stat-subtext {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* Finance Filter Bar - Enhanced */
.finance-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
}

.finance-filter-bar .btn-group .btn {
    position: relative;
}

.finance-filter-bar .btn-group .btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 600;
}

.finance-filter-bar .btn-group .btn.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--primary);
    border-radius: var(--radius-full);
}

/* Active Filter Indicator */
.filter-active-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
}

.filter-active-indicator .clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 0.625rem;
    transition: var(--transition);
}

.filter-active-indicator .clear-filter:hover {
    background: #0284C7;
}

/* Enhanced Invoice Status Badges */
.badge-finance {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-finance i {
    font-size: 0.625rem;
}

.badge-finance-paid {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-finance-paid i { color: #10B981; }

.badge-finance-partial {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-finance-partial i { color: #F59E0B; }

.badge-finance-open {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.25) 100%);
    color: #0284C7;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.badge-finance-open i { color: #0EA5E9; }

.badge-finance-overdue {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.25) 100%);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: overdue-pulse 2s ease-in-out infinite;
}

.badge-finance-overdue i { color: #EF4444; }

@keyframes overdue-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Finance Table Enhancements */
.finance-table .col-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
}

.finance-table .amount-balance {
    font-weight: 700;
}

.finance-table .amount-balance.has-balance {
    color: var(--danger);
}

.finance-table .amount-balance.fully-paid {
    color: var(--success);
}

/* Overdue Row Highlight */
.finance-table tbody tr.row-overdue {
    background: rgba(239, 68, 68, 0.03);
}

.finance-table tbody tr.row-overdue:hover {
    background: rgba(239, 68, 68, 0.06);
}

.finance-table tbody tr.row-overdue td:first-child {
    position: relative;
}

.finance-table tbody tr.row-overdue td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--danger);
}

/* Due Soon Row Highlight */
.finance-table tbody tr.row-due-soon {
    background: rgba(245, 158, 11, 0.03);
}

.finance-table tbody tr.row-due-soon:hover {
    background: rgba(245, 158, 11, 0.06);
}

.finance-table tbody tr.row-due-soon td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--warning);
}

/* Quick Actions in Table */
.finance-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.finance-actions .btn-pay {
    background: var(--success);
    color: white;
    border: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    transition: var(--transition);
}

.finance-actions .btn-pay:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Finance Detail Page Summary Card */
.finance-summary-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.finance-summary-card .summary-header {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
}

.finance-summary-card .summary-header h5 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
}

.finance-summary-card .summary-body {
    padding: var(--space-5);
}

.finance-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
}

.finance-summary-row.total-row {
    border-top: 2px solid var(--gray-200);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
}

.finance-summary-row .label {
    color: var(--gray-600);
    font-size: 0.875rem;
}

.finance-summary-row .value {
    font-weight: 600;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.finance-summary-row.total-row .label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
}

.finance-summary-row.total-row .value {
    font-size: 1.25rem;
    font-weight: 700;
}

.finance-summary-row.balance-due .value {
    color: var(--danger);
}

.finance-summary-row.fully-paid .value {
    color: var(--success);
}

/* Payment History Timeline */
.payment-timeline {
    position: relative;
    padding-left: var(--space-6);
}

.payment-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.payment-timeline-item {
    position: relative;
    padding-bottom: var(--space-4);
}

.payment-timeline-item:last-child {
    padding-bottom: 0;
}

.payment-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-6) + 6px);
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--success);
}

.payment-timeline-item .payment-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--success);
}

.payment-timeline-item .payment-date {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.payment-timeline-item .payment-account {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: var(--space-1);
}

/* Receipt Preview Thumbnails */
.receipt-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-3);
}

.receipt-thumbnail {
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--gray-200);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.receipt-thumbnail:hover {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.receipt-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.receipt-thumbnail.is-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
}

.receipt-thumbnail.is-pdf i {
    font-size: 2rem;
    color: var(--danger);
}

.receipt-thumbnail .receipt-count {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    background: var(--gray-900);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* Expense Category Badge */
.expense-category-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-100);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-700);
}

.expense-category-badge i {
    font-size: 1rem;
    opacity: 0.8;
}

.expense-category-badge.cat-fuel {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.expense-category-badge.cat-maintenance {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.expense-category-badge.cat-provisions {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.expense-category-badge.cat-general {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
}

/* Mobile Finance Adjustments */
@media (max-width: 768px) {
    .finance-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .finance-stat-card {
        padding: var(--space-3) var(--space-4);
    }

    .finance-stat-value {
        font-size: 1.25rem;
    }

    .finance-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .finance-filter-bar .btn-group {
        width: 100%;
    }

    .finance-filter-bar .btn-group .btn {
        flex: 1;
    }

    .finance-actions {
        flex-direction: column;
        gap: var(--space-1);
    }

    .finance-summary-card .summary-body {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .finance-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FINANCE PAGE - Complete Component System
   ============================================ */

/* Finance Page Container */
.finance-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Finance Summary Grid */
.finance-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.finance-summary-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--gray-300);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.finance-summary-card:hover {
    box-shadow: var(--shadow-md);
}

.finance-summary-card.neutral { border-left-color: var(--gray-400); }
.finance-summary-card.revenue { border-left-color: var(--success); }
.finance-summary-card.pending { border-left-color: var(--warning); }
.finance-summary-card.expense { border-left-color: var(--danger); }
.finance-summary-card.info { border-left-color: var(--info); }

.finance-summary-card.clickable {
    cursor: pointer;
}
.finance-summary-card.clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.finance-summary-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
}

.finance-summary-label i {
    font-size: 0.875rem;
}

.finance-summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.finance-summary-value.revenue { color: var(--success); }
.finance-summary-value.pending { color: var(--warning); }
.finance-summary-value.expense { color: var(--danger); }

.finance-summary-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--gray-400);
}

.finance-summary-meta i {
    font-size: 0.6875rem;
}

/* Finance Table Card */
.finance-table-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.finance-table-card > .card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

/* Remove inner border-radius when table is inside finance-table-card */
.finance-table-card .table-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.finance-table-card .table-wrapper .modern-table {
    border-radius: 0;
}

/* Remove inner border-radius when table is inside any card (full-width tables) */
.card .card-body.p-0 .table-wrapper,
.card .card-body[style*="padding: 0"] .table-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.card .card-body.p-0 .table-wrapper .modern-table,
.card .card-body[style*="padding: 0"] .table-wrapper .modern-table {
    border-radius: 0;
}

/* Remove inner border-radius for premium-table-card (Tours, Assets, etc.) */
.premium-table-card .table-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.premium-table-card .table-wrapper .modern-table {
    border-radius: 0;
    overflow: visible;
}

/* Also remove from premium-table class directly */
.premium-table-card .modern-table.premium-table {
    border-radius: 0 !important;
}

.premium-table-card .table-wrapper .modern-table thead,
.premium-table-card .table-wrapper .modern-table tbody {
    border-radius: 0;
}

/* Premium Select for filters */
.premium-select {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    background: white;
    min-width: 140px;
    transition: all 0.2s ease;
}

.premium-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    outline: none;
}

/* Premium Date Range */
.premium-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.premium-date-range input {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
    transition: all 0.2s ease;
}

.premium-date-range input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    outline: none;
}

.premium-date-range .date-separator {
    color: var(--gray-400);
    font-size: 0.875rem;
}

.finance-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.finance-table-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.finance-table-title h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.count-badge {
    background: var(--gray-200);
    color: var(--gray-600);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.finance-table-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Finance Filter Group */
.finance-filter-group {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 3px;
    gap: 2px;
}

.finance-filter-btn {
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.finance-filter-btn:hover {
    background: white;
    color: var(--gray-800);
}

.finance-filter-btn.active {
    background: white;
    color: var(--primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.finance-filter-btn.active.warning {
    color: var(--warning);
}

.finance-filter-btn.active.danger {
    color: var(--danger);
}

/* Finance Search */
.finance-search {
    position: relative;
    display: flex;
    align-items: center;
}

.finance-search .search-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--gray-400);
    pointer-events: none;
}

.finance-search input {
    padding-left: var(--space-8);
    width: 220px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    height: 36px;
    font-size: 0.875rem;
}

.finance-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Finance Table Specific Styles */
.finance-table {
    width: 100%;
}

.finance-table thead th {
    background: var(--gray-50);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

.finance-table tbody td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.finance-table tbody tr:hover {
    background: var(--gray-50);
}

.finance-doc-number {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--gray-900);
    text-decoration: none;
    transition: var(--transition-fast);
}

.finance-doc-number i {
    opacity: 0;
    transform: translateX(-4px);
    transition: var(--transition-fast);
    font-size: 0.75rem;
}

.finance-doc-number:hover {
    color: var(--primary);
}

.finance-doc-number:hover i {
    opacity: 1;
    transform: translateX(0);
}

.finance-customer-link {
    color: var(--gray-800);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
}

.finance-customer-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.finance-customer-email {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 2px;
}

.finance-date {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.finance-date.overdue {
    color: var(--danger);
    font-weight: 600;
}

.finance-date.due-soon {
    color: var(--warning);
    font-weight: 500;
}

.finance-date-relative {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.6875rem;
    color: var(--gray-400);
    margin-top: 2px;
}

.finance-date-relative.overdue {
    color: var(--danger);
}

.finance-date-relative.due-soon {
    color: var(--warning);
}

.finance-date-relative i {
    font-size: 0.625rem;
}

.amount-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.balance-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.balance-cell.has-balance {
    color: var(--danger);
}

.balance-cell.paid {
    color: var(--success);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

.balance-cell.paid i {
    font-size: 0.875rem;
}

/* Finance Status Badges */
.finance-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.finance-status-badge i {
    font-size: 0.625rem;
}

.finance-status-badge.paid {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.finance-status-badge.partial {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.finance-status-badge.open {
    background: rgba(14, 165, 233, 0.1);
    color: #0284C7;
}

.finance-status-badge.overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.finance-status-badge.due-soon {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

/* Finance Actions Cell */
.finance-actions-cell {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.finance-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition-fast);
}

.finance-action-btn i {
    font-size: 0.875rem;
}

.finance-action-btn.primary {
    background: var(--gray-100);
    color: var(--gray-600);
}

.finance-action-btn.primary:hover {
    background: var(--primary);
    color: white;
}

.finance-action-btn.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.finance-action-btn.success:hover {
    background: var(--success);
    color: white;
}

.finance-action-btn.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.finance-action-btn.danger:hover {
    background: var(--danger);
    color: white;
}

/* Finance Empty State */
.finance-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.finance-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 50%;
    margin-bottom: var(--space-4);
}

.finance-empty-icon i {
    font-size: 1.5rem;
    color: var(--gray-400);
}

.finance-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.finance-empty-message {
    font-size: 0.875rem;
    color: var(--gray-500);
    max-width: 300px;
    margin-bottom: var(--space-4);
}

.finance-empty-action,
.modern-table a.finance-empty-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.finance-empty-action:hover,
.modern-table a.finance-empty-action:hover {
    background: #0284C7;
    color: white;
    text-decoration: none;
}

.modern-table a.finance-empty-action::after {
    display: none;
}

/* Mobile Finance Responsive */
@media (max-width: 768px) {
    .finance-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .finance-summary-card {
        padding: var(--space-4);
    }

    .finance-summary-value {
        font-size: 1.25rem;
    }

    .finance-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .finance-table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .finance-filter-group {
        width: 100%;
    }

    .finance-filter-btn {
        flex: 1;
        text-align: center;
    }

    .finance-search {
        width: 100%;
    }

    .finance-search input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .finance-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   GEMA CONVERSATIONS - DEPRECATED
   These styles are now handled by gema-widget.css for the dark mode console.
   Keeping section header for reference only.
   ============================================================================= */

/* Responsive adjustments */
@media (max-width: 768px) {
    .gema-message {
        max-width: 90%;
    }

    .gema-conversation {
        padding: var(--space-2);
    }
}

/* =============================================================================
   WAIVER REVEAL ANIMATION
   For showing matched waiver names with a "magic" reveal effect
   ============================================================================= */

.waiver-reveal-container {
    text-align: center;
    padding: var(--space-3);
    margin-top: var(--space-2);
    min-height: 48px;
}

.waiver-reveal-message {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #0369a1;
    animation: fadeInUp 0.5s ease-out forwards;
}

.revealed-name {
    font-weight: 600;
    color: #0284c7;
    opacity: 0;
    display: inline-block;
    transform: scale(0.5) translateY(10px);
    filter: blur(4px);
}

.revealed-name.reveal-animate {
    animation: magicReveal 0.8s ease-out 0.3s forwards;
}

@keyframes magicReveal {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
        filter: blur(4px);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) translateY(-2px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

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

.sparkle {
    animation: sparkle 1.5s ease-in-out infinite;
    font-size: 1rem;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Waiver guest list styles */
.waiver-guest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--gray-200);
    transition: background-color 0.15s ease;
    font-size: 0.85rem;
}

.waiver-guest-item:last-child {
    border-bottom: none;
}

.waiver-guest-item:hover {
    background-color: var(--gray-50);
}

.waiver-guest-item.has-waiver .waiver-icon {
    color: var(--success);
}

.waiver-guest-item.no-waiver .waiver-icon {
    color: var(--danger);
    opacity: 0.7;
}

.waiver-guest-item.pending .waiver-icon {
    color: var(--warning);
}

.waiver-guest-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.waiver-guest-name {
    font-weight: 400;
    color: var(--gray-700);
}

.waiver-guest-name.text-muted {
    color: var(--gray-500);
}

.waiver-unlinked-section {
    background-color: #fef3c7;
    border-radius: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
}

.waiver-unlinked-header {
    font-weight: 600;
    color: #92400e;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.waiver-unlinked-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2);
    background: white;
    border-radius: var(--space-1);
    margin-bottom: var(--space-2);
}

.waiver-unlinked-item:last-child {
    margin-bottom: 0;
}

.waiver-ai-name {
    color: var(--gray-600);
    font-style: italic;
    font-size: 0.875rem;
}

/* =============================================================================
   GUEST LIST - Manual and Excluded Guests
   ============================================================================= */

/* Manual guests - light blue background */
tr.guest-manual {
    background-color: #e0f2fe !important;
}

tr.guest-manual:hover {
    background-color: #bae6fd !important;
}

/* Excluded guests - grayed out */
tr.guest-excluded {
    background-color: var(--gray-100) !important;
    opacity: 0.7;
}

tr.guest-excluded td {
    color: var(--gray-500);
}

tr.guest-excluded:hover {
    background-color: var(--gray-200) !important;
}

/* Booking section separators (Transferred In / Out) */
tr.booking-section-separator td {
    background: #f5f6f8;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #7b8794;
    padding: 8px 12px !important;
    border-top: 1px solid #e2e6ea;
    border-bottom: 1px solid #e2e6ea;
}
tr.booking-section-separator td i {
    color: #9ca8b4;
}

/* Transferred-out bookings - muted */
tr.booking-transferred-out {
    opacity: 0.6;
}
tr.booking-transferred-out:hover {
    opacity: 0.85;
}

/* Strikethrough text for excluded guests */
.text-decoration-line-through {
    text-decoration: line-through;
}

/* =============================================================================
   TOUR DETAIL PAGE - Premium Redesign
   Modeled after the invoice/finance page premium styling
   ============================================================================= */

/* Tour Status Badges (gradient style) */
.tour-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.tour-status-badge.scheduled {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.25));
    color: #0284C7;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.tour-status-badge.in-progress {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.25));
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.tour-status-badge.completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.tour-status-badge.cancelled {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tour Detail Cards (colored left border) */
.tour-detail-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.tour-detail-card:hover {
    box-shadow: var(--shadow-md);
}

/* Keep semantic classes for future use but no colored borders by default */
.tour-detail-card.card-info,
.tour-detail-card.card-guests,
.tour-detail-card.card-bookings,
.tour-detail-card.card-assignments,
.tour-detail-card.card-campsites,
.tour-detail-card.card-tof,
.tour-detail-card.card-dispatches,
.tour-detail-card.card-expenses,
.tour-detail-card.card-waivers,
.tour-detail-card.card-photos {
    /* Semantic classes available but no colored border by default */
}

/* Tour Photos Gallery */
.tour-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.tour-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.tour-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.tour-photo-thumb:hover img {
    transform: scale(1.05);
}

.tour-photo-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0;
    font-size: 14px;
    color: var(--danger);
}

.tour-photo-thumb:hover .tour-photo-delete {
    opacity: 1;
}

/* Tour Detail Card Header */
.tour-detail-card .tour-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.tour-detail-card .tour-card-header h5 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tour-detail-card .tour-card-header h5 i {
    color: var(--gray-400);
    font-size: 1rem;
}

/* Tour Detail Card Body */
.tour-detail-card .tour-card-body {
    padding: var(--space-3);
}

/* No padding variant for full-width tables */
.tour-detail-card .tour-card-body.p-0 {
    padding: 0;
}

/* Padding top 0 */
.tour-detail-card .tour-card-body.pt-0 {
    padding-top: 0;
}

/* Integrated warning band (no rounded corners) */
.tour-card-warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.12));
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
    color: #B45309;
    font-size: 0.875rem;
}

.tour-card-warning i {
    color: #D97706;
    font-size: 0.875rem;
}

.tour-card-warning strong {
    color: #B45309;
}

/* Guest Quality Badges (premium gradient) */
.guest-quality-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.guest-quality-badge.complete {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.2));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.guest-quality-badge.partial {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.2));
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.guest-quality-badge.minimal {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(107, 114, 128, 0.2));
    color: var(--gray-600);
    border: 1px solid rgba(107, 114, 128, 0.25);
}

.guest-quality-badge.manual {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.2));
    color: #0284C7;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.guest-quality-badge.excluded {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.2));
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Guest History Popover */
.guest-history-popover-wrapper .popover-body {
    padding: 0.75rem;
    min-width: 250px;
    max-width: 350px;
}

.guest-history-popover .list-group-item {
    font-size: 0.85rem;
}

.returning-guest-badge {
    transition: all 0.15s ease;
}

.returning-guest-badge:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Tour Detail Table */
.tour-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.tour-detail-table thead th {
    background: var(--gray-50);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}

.tour-detail-table tbody td {
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    color: var(--gray-700);
}

.tour-detail-table tbody tr:last-child td {
    border-bottom: none;
}

.tour-detail-table tbody tr:hover {
    background: linear-gradient(to right, rgba(14, 165, 233, 0.04), rgba(14, 165, 233, 0.01));
}

.tour-detail-table tfoot td {
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    border-top: 2px solid var(--gray-200);
    background: var(--gray-50);
}

/* Tour Action Buttons (premium) */
.tour-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tour-action-btn:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.tour-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.tour-action-btn.success:hover {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.tour-action-btn.primary:hover {
    background: rgba(14, 165, 233, 0.15);
    color: var(--primary);
}

.tour-action-btn i {
    font-size: 0.875rem;
}

/* Tour Info Stats Grid */
.tour-info-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.tour-info-stat {
    text-align: center;
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
}

.tour-info-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: var(--space-1);
}

.tour-info-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

/* TOF Summary Grid */
.tof-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.tof-summary-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius);
    border-left: 3px solid var(--gray-300);
}

.tof-summary-item.allocated {
    border-left-color: var(--primary);
}

.tof-summary-item.spent {
    border-left-color: var(--danger);
}

.tof-summary-item.balance {
    border-left-color: var(--success);
}

.tof-summary-item.balance.negative {
    border-left-color: var(--danger);
}

.tof-summary-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    margin-bottom: var(--space-1);
}

.tof-summary-value {
    font-size: 1.125rem;
    font-weight: 700;
}

.tof-summary-value.allocated { color: var(--primary); }
.tof-summary-value.spent { color: var(--danger); }
.tof-summary-value.balance { color: var(--success); }
.tof-summary-value.balance.negative { color: var(--danger); }

/* Tour Detail Page Specifics */
.tour-detail-page .page-header {
    margin-bottom: var(--space-5);
}

.tour-detail-page .page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
}

/* Booking Balance Styling */
.tour-detail-table .balance-positive {
    color: var(--danger);
    font-weight: 600;
}

.tour-detail-table .balance-zero {
    color: var(--success);
}

/* Assignment Item Styling */
.assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.assignment-item:last-child {
    border-bottom: none;
}

.assignment-item .assignment-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.assignment-item .assignment-info i {
    color: var(--gray-400);
}

.assignment-item .assignment-label {
    font-weight: 500;
    color: var(--gray-600);
}

.assignment-item .assignment-value {
    font-weight: 600;
    color: var(--gray-800);
}

.assignment-warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--warning);
    font-size: 0.875rem;
}

/* Crew List Styling */
.crew-list {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--gray-100);
}

.crew-list-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: var(--space-2);
}

.crew-member {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.crew-member i {
    color: var(--gray-400);
}

.crew-member .badge {
    font-size: 0.625rem;
}

/* Expense Category Tiles */
.expense-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.expense-category-tile {
    text-align: center;
    padding: var(--space-2);
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
}

.expense-category-tile i {
    display: block;
    font-size: 1rem;
    color: var(--gray-500);
    margin-bottom: var(--space-1);
}

.expense-category-tile .category-label {
    font-size: 0.6875rem;
    color: var(--gray-500);
    text-transform: capitalize;
    margin-bottom: 2px;
}

.expense-category-tile .category-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
}

/* Dispatch Badge */
.dispatch-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.2));
    color: #6366F1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

/* Responsive adjustments for tour detail */
@media (max-width: 991.98px) {
    .tour-info-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .tof-summary-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .expense-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .tour-detail-card .tour-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .tour-info-stats {
        grid-template-columns: 1fr 1fr;
    }

    .tour-detail-table {
        font-size: 0.8125rem;
    }

    .tour-detail-table thead th,
    .tour-detail-table tbody td {
        padding: var(--space-1) var(--space-2);
    }
}

/* =============================================================================
   DATE MISMATCH CARD
   ============================================================================= */

.date-mismatch-card {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-4, 1.25rem);
}

.date-mismatch-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3, 1rem);
    font-size: 0.9375rem;
}

.date-mismatch-header i {
    color: #e65100;
    font-size: 1.125rem;
}

.date-mismatch-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 1.25rem);
    margin-bottom: var(--space-3, 1rem);
}

.date-mismatch-side {
    text-align: center;
    padding: var(--space-3, 1rem);
    border-radius: var(--radius-md, 0.5rem);
    min-width: 140px;
}

.date-mismatch-side.gcal {
    background: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.3);
}

.date-mismatch-side.current {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.date-mismatch-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #6c757d);
    margin-bottom: 0.25rem;
}

.date-mismatch-date {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.date-mismatch-arrow {
    font-size: 1.25rem;
    color: var(--text-tertiary, #6c757d);
}

.date-mismatch-impact {
    text-align: center;
    margin-bottom: var(--space-3, 1rem);
}

.date-mismatch-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2, 0.625rem);
}

@media (max-width: 575.98px) {
    .date-mismatch-comparison {
        flex-direction: column;
        gap: var(--space-2, 0.625rem);
    }

    .date-mismatch-arrow {
        transform: rotate(90deg);
    }

    .date-mismatch-actions {
        flex-direction: column;
    }

    .date-mismatch-actions .btn {
        width: 100%;
    }
}

/* =============================================================================
   DEPARTURE DOCUMENTS
   ============================================================================= */

.departure-docs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.departure-doc-item {
    display: grid;
    grid-template-columns: 24px auto 1fr auto auto;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.departure-doc-label {
    white-space: nowrap;
}

.departure-doc-item:last-child {
    border-bottom: none;
}

.departure-doc-item.has-doc .departure-doc-label {
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}

.departure-doc-item.missing-doc {
    opacity: 0.7;
}

.departure-doc-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.departure-doc-file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.departure-doc-file a {
    color: var(--primary, #667eea);
}

.departure-doc-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary, #6c757d);
    white-space: nowrap;
}

.departure-doc-delete {
    padding: 2px 6px;
    line-height: 1;
}

.departure-doc-type-select {
    max-width: 220px;
}

.departure-doc-upload {
    border-top: 1px solid var(--border-light, #f0f0f0);
    padding-top: var(--space-3, 0.75rem);
}

/* Document Completeness Alarm */
.document-completeness-alarm {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1.25rem);
}

.doc-alarm-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2, 0.5rem);
    font-size: 0.9375rem;
}

.doc-alarm-header i {
    color: #e65100;
    font-size: 1.125rem;
}

.doc-alarm-list {
    margin: 0;
    padding-left: 1.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #475569);
}

.doc-alarm-list li {
    margin-bottom: 0.125rem;
}

/* Unpaid Bookings Alarm (danger variant) */
.unpaid-bookings-alarm {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #f87171;
    border-left-color: #dc2626;
}

.unpaid-bookings-alarm .doc-alarm-header i {
    color: #dc2626;
}

/* PO Unit Label */
.po-unit-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    min-width: 2.5rem;
    justify-content: center;
}

/* ===== Tour Ready Banner ===== */
.tour-ready-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
    border: 1px solid #34d399;
    border-left: 4px solid #10b981;
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-4, 1.25rem);
    animation: tourReadySlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tour-ready-banner::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: tourReadyShimmer 2s 0.8s ease-in-out;
    pointer-events: none;
}

.tour-ready-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    z-index: 1;
}

.tour-ready-check {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.tour-ready-checkmark {
    width: 44px;
    height: 44px;
}

.tour-ready-circle {
    stroke: #10b981;
    stroke-width: 2.5;
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: tourReadyCircle 0.5s 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.tour-ready-tick {
    stroke: #059669;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: tourReadyTick 0.35s 0.7s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.tour-ready-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.tour-ready-text strong {
    font-size: 1rem;
    color: #065f46;
}

.tour-ready-text span {
    font-size: 0.875rem;
    color: #047857;
}

/* Confetti */
.tour-ready-confetti-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.tour-ready-confetti {
    position: absolute;
    top: -10px;
    border-radius: 1px;
    opacity: 0;
    animation: tourReadyConfettiFall 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Keyframes */
@keyframes tourReadySlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tourReadyShimmer {
    from { left: -100%; }
    to { left: 100%; }
}

@keyframes tourReadyCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes tourReadyTick {
    to { stroke-dashoffset: 0; }
}

@keyframes tourReadyConfettiFall {
    0% { opacity: 1; top: -10px; }
    80% { opacity: 1; }
    100% { opacity: 0; top: 100%; }
}

/* Dark mode support */
[data-bs-theme="dark"] .tour-ready-banner {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
    border-color: #10b981;
}
[data-bs-theme="dark"] .tour-ready-text strong { color: #a7f3d0; }
[data-bs-theme="dark"] .tour-ready-text span { color: #6ee7b7; }
[data-bs-theme="dark"] .tour-ready-circle { stroke: #34d399; }
[data-bs-theme="dark"] .tour-ready-tick { stroke: #6ee7b7; }

/* Responsive: stack departure doc items on small screens */
@media (max-width: 576px) {
    .departure-doc-item {
        grid-template-columns: 24px 1fr auto;
        gap: var(--space-1, 0.25rem);
    }

    .departure-doc-file {
        grid-column: 2 / -1;
    }
}