/* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           DESIGN TOKENS - Based on design.md
           ═══════════════════════════════════════════════════════════════ */
        
        :root {
            /* Colors */
            --color-primary: #059669;
            --color-primary-dark: #047857;
            --color-primary-light: #d1fae5;
            --color-primary-50: #ecfdf5;
            --color-primary-100: #d1fae5;
            --color-primary-200: #a7f3d0;
            --color-success: #10b981;
            --color-warning: #f59e0b;
            --color-danger: #dc2626;
            --color-info: #3b82f6;
            
            /* RGB values for rgba() usage */
            --primary-rgb: 5, 150, 105;
            --success-rgb: 16, 185, 129;
            --warning-rgb: 245, 158, 11;
            --danger-rgb: 220, 38, 38;
            --info-rgb: 59, 130, 246;
            
            /* Neutral */
            --color-white: #ffffff;
            --color-gray-50: #f8fafc;
            --color-gray-100: #f1f5f9;
            --color-gray-200: #e2e8f0;
            --color-gray-300: #cbd5e1;
            --color-gray-400: #94a3b8;
            --color-gray-500: #64748b;
            --color-gray-600: #475569;
            --color-gray-700: #334155;
            --color-gray-800: #1e293b;
            --color-gray-900: #0f172a;
            
            /* Semantic */
            --bg-page: #f1f5f9;
            --bg-card: var(--color-white);
            --bg-hover: var(--color-primary-50);
            --text-main: #0f172a;
            --text-muted: #475569;
            --text-light: #cbd5e1;
            --border-color: #e2e8f0;
            --border-light: #f1f5f9;
            
            /* Spacing */
            --space-1: 0.25rem;
            --space-2: 0.5rem;
            --space-3: 0.75rem;
            --space-4: 1rem;
            --space-5: 1.25rem;
            --space-6: 1.5rem;
            --space-8: 2rem;
            --space-10: 2.5rem;
            --space-12: 3rem;
            
            /* Typography - Bolder, more visible */
            --font-sans: 'Inter', 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
            --text-xs: 0.6875rem;
            --text-sm: 0.8125rem;
            --text-base: 0.9375rem;
            --text-lg: 1.0625rem;
            --text-xl: 1.25rem;
            --text-2xl: 1.5rem;
            --text-3xl: 1.875rem;
            --text-4xl: 2.25rem;
            
            /* Font Weights - Bolder scale */
            --font-light: 300;
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;
            
            /* Border Radius */
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --radius-xl: 18px;
            --radius-full: 9999px;
            
            /* Shadows - Stronger */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
            --shadow-md: 0 2px 6px rgba(0,0,0,0.04);
            --shadow-lg: 0 4px 12px rgba(0,0,0,0.05);
            --shadow-xl: 0 8px 24px rgba(0,0,0,0.06);
            
            /* Shadow colors - for glow effects */
            --shadow-primary: 0 4px 14px 0 rgba(var(--primary-rgb), 0.4);
            --shadow-success: 0 4px 14px 0 rgba(var(--success-rgb), 0.4);
            --shadow-warning: 0 4px 14px 0 rgba(var(--warning-rgb), 0.4);
            --shadow-danger: 0 4px 14px 0 rgba(var(--danger-rgb), 0.4);
            --shadow-info: 0 4px 14px 0 rgba(var(--info-rgb), 0.4);
            
            /* Transitions */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Layout */
            --sidebar-width: 270px;
            --topbar-height: 64px;
            
            /* iOS Safe Areas */
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
            
            /* Mobile Bottom Nav */
            --bottom-nav-height: 62px;
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           BASE STYLES - Clean & Modern
           ═══════════════════════════════════════════════════════════════ */
        
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: var(--font-sans);
            font-size: var(--text-base);
            line-height: 1.5;
            color: var(--text-main);
            background: var(--bg-page);
            min-height: 100vh;
            min-height: -webkit-fill-available;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            padding-top: var(--safe-top);
            padding-bottom: var(--safe-bottom);
            padding-left: var(--safe-left);
            padding-right: var(--safe-right);
            overscroll-behavior: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        html {
            height: -webkit-fill-available;
        }
        
        /* Typography hierarchy */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-sans);
            font-weight: var(--font-semibold);
            line-height: 1.3;
            color: var(--color-gray-800);
            margin-bottom: 0.5em;
        }
        
        h1 { font-size: var(--text-3xl); }
        h2 { font-size: var(--text-2xl); }
        h3 { font-size: var(--text-xl); }
        h4 { font-size: var(--text-lg); }
        
        p { margin-bottom: 1rem; }
        small { font-size: var(--text-sm); color: var(--text-muted); }
        
        /* Page title styling */
        .page-title {
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
        }
        
        .card-title {
            font-size: var(--text-lg);
            font-weight: var(--font-semibold);
        }
        
        .stat-value {
            font-size: var(--text-2xl);
            font-weight: var(--font-bold);
            font-family: var(--font-display);
            line-height: 1.1;
            letter-spacing: -0.02em;
        }
        
        .stat-label {
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
        }
        
        .nav-item {
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
        }
        
        /* Better button text */
        .btn {
            font-family: var(--font-sans);
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
        }
        
        /* Monospace for numbers */
        .mono {
            font-family: var(--font-mono);
            font-size: 0.9em;
            letter-spacing: -0.02em;
        }
        
        /* Improved table typography */
        .data-table th {
            font-size: 0.6875rem;
            font-weight: var(--font-bold);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
        }
        
        .data-table td {
            font-size: var(--text-sm);
        }
        
        /* Badge improvements */
        .badge {
            font-size: 0.6875rem;
            font-weight: var(--font-semibold);
            letter-spacing: 0.02em;
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           LOGIN PAGE - Clean & Simple
           ═══════════════════════════════════════════════════════════════ */
        
        .login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-4);
            position: relative;
            background: #f1f5f9;
        }
        
        .login-card {
            position: relative;
            width: 100%;
            max-width: 400px;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            padding: var(--space-10) var(--space-8);
            animation: fadeInUp 0.5s ease forwards;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Simple accent bar */
        .login-accent-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--color-primary);
            z-index: 3;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: var(--space-8);
        }
        
        .login-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto var(--space-4);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .login-logo .login-icon-bg {
            width: 80px;
            height: 80px;
            background: var(--color-primary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-logo i {
            font-size: 1.75rem;
            color: var(--color-white);
        }
        
        .login-logo-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .login-title {
            font-size: var(--text-xl);
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: var(--space-1);
            letter-spacing: -0.03em;
        }
        
        .login-subtitle {
            color: var(--text-muted);
            font-size: var(--text-xs);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        
        /* Premium Form Styles */
        .form-group {
            margin-bottom: var(--space-5);
            position: relative;
            z-index: 1;
        }
        
        .form-group label {
            display: block;
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--color-gray-700);
            margin-bottom: var(--space-2);
        }
        
        .form-group .input-icon {
            position: absolute;
            left: 16px;
            bottom: 15px;
            color: var(--color-gray-400);
            z-index: 2;
            pointer-events: none;
            font-size: 1.1rem;
            transition: color var(--transition-fast);
        }
        
        .form-group:focus-within .input-icon {
            color: var(--color-primary);
        }
        
        .form-input {
            width: 100%;
            padding: 14px 16px 14px 48px;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: var(--text-base);
            font-family: var(--font-sans);
            transition: all var(--transition-fast);
            background: var(--color-gray-50);
            color: var(--color-gray-900);
            font-weight: 500;
            height: 50px;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--color-primary);
            background: var(--color-white);
            box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1), 0 0 20px rgba(var(--primary-rgb), 0.1);
        }
        
        .form-input::placeholder {
            color: var(--color-gray-400);
            font-weight: 400;
        }
        
        /* Premium Button */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-6);
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
            font-family: var(--font-sans);
            border-radius: var(--radius-md);
            border: none;
            cursor: pointer;
            transition: all var(--transition-normal);
            letter-spacing: 0.02em;
            min-height: 44px;
            position: relative;
            overflow: hidden;
        }
        
        /* Primary Button */
        .btn-primary {
            width: 100%;
            padding: 14px 24px;
            background: var(--color-primary);
            color: var(--color-white);
            font-size: var(--text-base);
            letter-spacing: 0.03em;
            border-radius: var(--radius-md);
            height: 48px;
        }
        
        .btn-primary:hover {
            background: var(--color-primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .btn-primary .btn-text {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        /* Error message */
        .error-message {
            background: var(--color-danger-light);
            color: var(--color-danger-dark);
            padding: 12px 16px;
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            margin-bottom: var(--space-4);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            border: 1px solid #fecaca;
            font-weight: 500;
            animation: shakeX 0.4s ease;
        }
        
        @keyframes shakeX {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-6px); }
            50% { transform: translateX(6px); }
            75% { transform: translateX(-3px); }
        }
        
        .error-message i {
            font-size: 1rem;
            flex-shrink: 0;
        }
        
        /* Remember me */
        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-5);
            position: relative;
            z-index: 1;
        }
        
        .form-options label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            color: var(--text-muted);
            cursor: pointer;
            user-select: none;
        }
        
        .form-options input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--color-primary);
            border-radius: var(--radius-sm);
            cursor: pointer;
        }
        
        /* Login footer */
        .login-footer {
            text-align: center;
            margin-top: var(--space-8);
            padding-top: var(--space-5);
            border-top: 1px solid var(--border-light);
            position: relative;
            z-index: 1;
        }
        
        .login-footer p {
            font-size: var(--text-xs);
            color: var(--text-muted);
            margin: 0;
        }
        
        .login-footer .legal {
            margin-top: var(--space-1);
            font-size: 0.6rem;
            color: var(--color-gray-300);
        }
        
        /* Login loading spinner */
        .login-loading {
            display: inline-block;
            width: 22px;
            height: 22px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        /* Password toggle */
        .password-toggle {
            position: absolute;
            right: 14px;
            bottom: 14px;
            z-index: 2;
            background: none;
            border: none;
            color: var(--color-gray-400);
            cursor: pointer;
            padding: 4px;
            font-size: 1.1rem;
            transition: color var(--transition-fast);
        }
        
        .password-toggle:hover {
            color: var(--color-gray-600);
        }
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           SIDEBAR — Dark Premium Design
           ═══════════════════════════════════════════════════════════════ */
        
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: var(--sidebar-width);
            background: #ffffff;
            padding: var(--space-5) var(--space-4);
            display: flex;
            flex-direction: column;
            z-index: 100;
            transition: transform var(--transition-slow);
            border-right: 1px solid #e2e8f0;
        }
        
        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
            padding: var(--space-2) var(--space-2) var(--space-4);
            border-bottom: 1px solid #e2e8f0;
        }
        
        .sidebar-logo {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
            background: #ecfdf5;
            border-radius: var(--radius-md);
        }
        
        .sidebar-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: inherit;
        }
        
        .sidebar-logo i {
            font-size: 1.25rem;
            color: var(--color-primary);
        }
        
        .sidebar-title {
            font-size: var(--text-xl);
            font-weight: 700;
            color: var(--color-gray-800);
            letter-spacing: -0.03em;
            line-height: 1.2;
        }
        
        .sidebar-title small {
            display: block;
            font-size: 0.6rem;
            font-weight: 600;
            color: var(--color-gray-400);
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        
        .sidebar-subtitle {
            font-size: var(--text-xs);
            color: var(--color-gray-400);
            font-weight: 500;
        }
        
        /* Navigation */
        .nav-menu {
            list-style: none;
            flex: 1;
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: 0.7rem var(--space-4);
            border-radius: var(--radius-md);
            color: var(--color-gray-500);
            cursor: pointer;
            transition: all var(--transition-fast) ease;
            margin-bottom: 2px;
            font-weight: 500;
            font-size: var(--text-sm);
            text-decoration: none;
            position: relative;
            min-height: 44px;
        }
        
        .nav-item:hover {
            background: #f8fafc;
            color: var(--color-gray-700);
        }
        
        .nav-item.active {
            background: #ecfdf5;
            color: var(--color-primary);
            font-weight: 600;
        }
        
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 20px;
            background: var(--color-primary);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        }
        
        .nav-item i {
            width: 22px;
            font-size: 1.15rem;
            text-align: center;
            transition: all var(--transition-fast) ease;
            flex-shrink: 0;
        }
        
        .nav-item.active i {
            color: var(--color-primary);
        }
        
        .nav-item span {
            font-size: var(--text-sm);
            font-weight: 500;
        }
        
        .nav-item.active span {
            font-weight: 600;
        }
        
        .nav-badge {
            margin-left: auto;
            background: #f1f5f9;
            color: var(--color-gray-600);
            font-size: var(--text-xs);
            font-weight: 600;
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-full);
            min-width: 28px;
            text-align: center;
        }
        
        .nav-item.active .nav-badge {
            background: var(--color-primary-100);
            color: var(--color-primary);
        }
        
        .nav-divider {
            height: 1px;
            background: #e2e8f0;
            margin: var(--space-4) 0;
        }
        
        .nav-item.logout {
            color: #dc2626;
            background: transparent;
            margin-top: auto;
            border-radius: var(--radius-md);
        }
        
        .nav-item.logout:hover {
            background: #fef2f2;
            color: #b91c1c;
        }
        
        .nav-item.logout:hover i {
            color: #b91c1c;
        }
        
        .nav-item.logout i {
            color: #dc2626;
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MAIN CONTENT
           ═══════════════════════════════════════════════════════════════ */
        
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* Top Bar — Premium glass */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            height: var(--topbar-height);
            border-bottom: 1px solid rgba(5, 150, 105, 0.06);
            padding: 0 var(--space-8);
            display: flex;
            align-items: center;
            justify-content: space-between;
            backdrop-filter: blur(20px) saturate(1.8);
            -webkit-backdrop-filter: blur(20px) saturate(1.8);
            background: rgba(255, 255, 255, 0.72);
            padding-top: var(--safe-top);
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        }
        
        .page-title {
            font-size: var(--text-2xl);
            font-weight: 800;
            color: var(--color-gray-900);
            letter-spacing: -0.02em;
        }
        
        .refresh-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
            background: var(--color-white);
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            white-space: nowrap;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }
        
        .refresh-tag i {
            font-size: 0.7rem;
        }
        
        @media (max-width: 640px) {
            /* Responsive visibility overrides */
            .desktop-only { display: none !important; }
            .mobile-only { display: revert !important; }
            
            .page-title {
                font-size: var(--text-xl);
            }
            
            .topbar {
                padding: 0 var(--space-4);
                height: auto;
                min-height: var(--topbar-height);
                padding-top: calc(var(--safe-top) + 0.5rem);
                padding-bottom: 0.5rem;
            }
            
            .topbar-actions {
                gap: var(--space-2);
            }
            
            .refresh-tag {
                font-size: 0.65rem;
                padding: 0.2rem 0.45rem;
            }
            .refresh-tag span {
                display: none;
            }
            
            .section-header {
                margin-bottom: var(--space-3);
                padding-bottom: var(--space-2);
                flex-wrap: wrap;
            }
            .section-header h1 {
                font-size: var(--text-xl);
                font-weight: 700;
            }
            .section-header .header-actions {
                width: 100%;
                justify-content: flex-start;
            }
            
            .page-section {
                margin-bottom: var(--space-5);
            }
            
            /* Better card spacing on mobile */
            .card {
                margin-bottom: var(--space-4);
            }
            .card-body {
                padding: var(--space-4);
            }
        }
        
        .topbar-actions {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
        
        .icon-btn {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: var(--bg-page);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: var(--text-lg);
            color: var(--text-muted);
            transition: all var(--transition-fast);
        }
        
        .icon-btn:hover {
            background: var(--color-primary-100);
            color: var(--color-primary);
        }
        
        .icon-btn:active {
            transform: scale(0.92);
        }
        
        /* ── Enhanced Button Interaction ── */
        .btn, .btn-primary, .btn-secondary, .btn-sm {
            transition: all var(--transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .btn:active, .btn-primary:active, .btn-secondary:active, .btn-sm:active {
            transform: scale(0.96);
        }
        .btn-primary {
            transition: all var(--transition-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
        }
        .btn-primary:active {
            transform: translateY(0) scale(0.97);
        }
        
        /* ── Stats / Numbers ── */
        @keyframes countPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.08); color: var(--color-primary); }
            100% { transform: scale(1); }
        }
        .stat-card.anim-card .stat-value {
            animation: countPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
        }
        
        /* ── Sidebar Active Indicator ── */
        .nav-item.active {
            animation: navActiveIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes navActiveIn {
            from { opacity: 0.7; transform: translateX(-4px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .nav-item {
            transition: all var(--transition-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .nav-item:hover {
            transform: translateX(3px);
        }
        .nav-item.active:hover {
            transform: translateX(0);
        }
        
        /* Page Content */
        .page-content {
            flex: 1;
            padding: var(--space-6) var(--space-8);
            max-width: 1600px;
            width: 100%;
        }
        
        /* ── View transition wrapper ── */
        .view-wrapper {
            animation: viewIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        @keyframes viewIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* ── Staggered list item animation ── */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(12px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        
        .anim-item {
            animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        
        .anim-item:nth-child(1) { animation-delay: 0.02s; }
        .anim-item:nth-child(2) { animation-delay: 0.05s; }
        .anim-item:nth-child(3) { animation-delay: 0.08s; }
        .anim-item:nth-child(4) { animation-delay: 0.11s; }
        .anim-item:nth-child(5) { animation-delay: 0.14s; }
        .anim-item:nth-child(6) { animation-delay: 0.17s; }
        .anim-item:nth-child(7) { animation-delay: 0.20s; }
        .anim-item:nth-child(8) { animation-delay: 0.23s; }
        .anim-item:nth-child(9) { animation-delay: 0.26s; }
        .anim-item:nth-child(10) { animation-delay: 0.29s; }
        .anim-item:nth-child(11) { animation-delay: 0.32s; }
        .anim-item:nth-child(12) { animation-delay: 0.35s; }
        .anim-item:nth-child(13) { animation-delay: 0.38s; }
        .anim-item:nth-child(14) { animation-delay: 0.41s; }
        .anim-item:nth-child(15) { animation-delay: 0.44s; }
        .anim-item:nth-child(n+16) { animation-delay: 0.47s; }
        
        /* ── Card fade-in ── */
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .anim-card {
            animation: cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        
        .anim-card:nth-child(1) { animation-delay: 0.05s; }
        .anim-card:nth-child(2) { animation-delay: 0.12s; }
        .anim-card:nth-child(3) { animation-delay: 0.19s; }
        .anim-card:nth-child(4) { animation-delay: 0.26s; }
        
        /* ── Pop-in for badges / pills ── */
        @keyframes popIn {
            0% { opacity: 0; transform: scale(0.6); }
            70% { transform: scale(1.1); }
            100% { opacity: 1; transform: scale(1); }
        }
        
        .anim-pop {
            animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        
        /* ── Glow pulse for active/hover states ── */
        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.3); }
            50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
        }
        
        /* ── Bottom nav slide up ── */
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        
        /* ── Number counter shimmer ── */
        @keyframes numberFlash {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        /* ── Ripple effect for buttons ── */
        @keyframes ripple {
            to { transform: scale(4); opacity: 0; }
        }
        
        /* ── Custom scrollbar ── */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
            transition: background 0.2s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        
        /* Firefox scrollbar */
        * {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        
        @media (max-width: 640px) {
            .page-content {
                padding: var(--space-3) var(--space-3);
                padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 1rem);
            }
            .section-header {
                margin-bottom: var(--space-3);
                padding-bottom: var(--space-2);
                flex-wrap: wrap;
            }
            .section-header h1 {
                font-size: var(--text-xl);
                font-weight: 700;
            }
        }
        
        /* Page sections with nice spacing */
        .page-section {
            margin-bottom: var(--space-8);
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-3);
            border-bottom: 3px solid var(--border-color);
            gap: var(--space-3);
        }
        
        .section-header h1 {
            font-size: var(--text-2xl);
            font-weight: 800;
            color: var(--color-gray-900);
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        
        .section-header .header-subtitle {
            font-size: var(--text-xs);
            color: var(--text-muted);
            font-weight: 500;
        }
        
        .section-header .header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MOBILE BOTTOM NAVIGATION
           ═══════════════════════════════════════════════════════════════ */
        
        .mobile-bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--color-white);
            border-top: 1px solid #e2e8f0;
            padding: 0 calc(0.5rem + var(--safe-right)) calc(var(--safe-bottom)) calc(0.5rem + var(--safe-left));
            box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
        }
        
        .bottom-nav-inner {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: var(--bottom-nav-height);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 4px 10px;
            border: none;
            background: none;
            cursor: pointer;
            color: var(--color-gray-400);
            transition: color var(--transition-fast) ease;
            position: relative;
            min-width: 52px;
            min-height: 44px;
            -webkit-tap-highlight-color: transparent;
            border-radius: var(--radius-md);
            touch-action: manipulation;
        }
        
        .bottom-nav-item i {
            font-size: 1.45rem;
        }
        
        .bottom-nav-item span {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        
        .bottom-nav-item.active {
            color: var(--color-primary);
        }
        
        .bottom-nav-item.active span {
            color: var(--color-primary);
            font-weight: 700;
        }
        
        .bottom-nav-item.logout {
            color: #dc2626;
            background: transparent;
        }
        
        .bottom-nav-item.logout i {
            color: #dc2626;
        }
        
        @media (max-width: 768px) {
            .mobile-bottom-nav {
                display: block;
            }
            
            .main-content {
                padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 1rem);
            }
            
            .sidebar {
                display: none !important;
            }
            
            .topbar {
                padding-left: 1rem !important;
            }
            
            /* Make topbar title smaller on tablet/mobile */
            .topbar .page-title {
                font-size: var(--text-xl);
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           STATS CARDS
           ═══════════════════════════════════════════════════════════════ */
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
            margin-bottom: var(--space-6);
        }
        
        @media (max-width: 640px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.625rem;
            }
        }
        
        @media (min-width: 641px) and (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        .stat-card {
            position: relative;
            background: var(--bg-card);
            border-radius: 12px;
            padding: var(--space-5) var(--space-5);
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            transition: box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease;
            overflow: hidden;
            border: 1px solid #f1f5f9;
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--color-primary);
        }
        
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            border-color: #e2e8f0;
        }
        
        .stat-card:hover .stat-value {
            color: var(--color-primary);
        }
        
        .stat-card.warning::before {
            background: linear-gradient(90deg, var(--color-warning), #fbbf24);
        }
        
        .stat-card.danger::before {
            background: linear-gradient(90deg, var(--color-danger), #ef4444);
        }
        
        .stat-icon {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        /* Compact stat cards (for rapports open bordereaux) */
        .stat-card.compact {
            padding: var(--space-4) var(--space-5);
            text-align: center;
        }
        .stat-card.compact .stat-value {
            font-size: var(--text-lg);
            margin-bottom: 0.15rem;
        }
        .stat-card.compact .stat-label {
            font-size: var(--text-xs);
            font-weight: 500;
        }
        .stats-grid.mini {
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.75rem;
        }
        @media (max-width: 639px) {
            .stats-grid.mini {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }
        }
        
        .stat-icon {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: var(--space-3);
            box-shadow: 0 3px 10px rgba(0,0,0,0.12);
            position: relative;
            overflow: hidden;
        }
        .stat-icon i { position: relative; z-index: 1; }
        .stat-icon::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-lg);
            opacity: 0.12;
        }
        
        .stat-icon.green {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            color: white;
        }
        .stat-icon.green::after { background: linear-gradient(135deg, #34d399 0%, transparent 100%); }
        
        .stat-icon.blue {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
        }
        .stat-icon.blue::after { background: linear-gradient(135deg, #60a5fa 0%, transparent 100%); }
        
        .stat-icon.yellow {
            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
            color: white;
        }
        .stat-icon.yellow::after { background: linear-gradient(135deg, #fbbf24 0%, transparent 100%); }
        
        .stat-icon.red {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            color: white;
        }
        .stat-icon.red::after { background: linear-gradient(135deg, #fca5a5 0%, transparent 100%); }
        
        .stat-icon.emerald {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        .stat-icon.emerald::after { background: linear-gradient(135deg, #6ee7b7 0%, transparent 100%); }
        
        .stat-icon.amber {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }
        .stat-icon.amber::after { background: linear-gradient(135deg, #fcd34d 0%, transparent 100%); }
        
        /* Stat subvalue - compact montant */
        .stat-subvalue {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--color-primary);
            margin-top: -0.25rem;
            margin-bottom: 0.15rem;
            font-family: var(--font-mono);
            letter-spacing: -0.01em;
        }
        
        /* Mini grid for totals (2x2) */
        .stat-value-mini-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.4rem 0.8rem;
            margin: 0.35rem 0 0.5rem;
        }
        .stat-mini-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.2;
        }
        .stat-mini-num {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-gray-900);
            font-family: var(--font-mono);
            letter-spacing: -0.02em;
        }
        .stat-mini-lbl {
            font-size: 0.6rem;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        
        .stat-value {
            font-size: var(--text-xl);
            font-weight: 800;
            color: var(--color-gray-900);
            line-height: 1.1;
            margin-bottom: var(--space-1);
            font-family: var(--font-mono);
            letter-spacing: -0.02em;
        }
        
        .stat-label {
            font-size: var(--text-sm);
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        
        .stat-change {
            font-size: var(--text-xs);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.2rem;
            margin-top: var(--space-2);
        }
        
        .stat-change.up { color: var(--color-success); }
        .stat-change.down { color: var(--color-danger); }
        
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           FOCUS VISIBLE - Keyboard accessibility
           ═══════════════════════════════════════════════════════════════ */
        
        :focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }
        
        button:focus-visible,
        .btn:focus-visible,
        .icon-btn:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
        
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 0px;
        }
        
        a:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           CARDS - Modern, polished style
           ═══════════════════════════════════════════════════════════════ */
        
        .card {
            background: var(--bg-card);
            border-radius: 12px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            margin-bottom: var(--space-6);
            overflow: hidden;
            transition: box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease;
            border: 1px solid #f1f5f9;
        }
        
        .card:hover {
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            border-color: #e2e8f0;
        }
        
        .card-header {
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            background: #ffffff;
            flex-wrap: wrap;
            min-height: 56px;
        }
        
        @media (max-width: 640px) {
            .card-header {
                padding: var(--space-3) var(--space-4);
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-2);
                min-height: auto;
            }
        }
        
        .card-title {
            font-size: var(--text-base);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--text-main);
            letter-spacing: -0.01em;
        }
        
        .card-title i {
            color: var(--color-primary);
            font-size: 1.15rem;
            width: 24px;
            text-align: center;
        }
        
        .card-body {
            padding: var(--space-5);
        }
        
        .card-body.no-padding {
            padding: 0;
        }
        
        @media (max-width: 640px) {
            .card-body {
                padding: var(--space-4);
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           TABLES - Clean and readable
           ═══════════════════════════════════════════════════════════════ */
        
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
        }
        
        .data-table th {
            background: var(--color-gray-100);
            padding: var(--space-3) 0.875rem;
            text-align: left;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-gray-600);
            border-bottom: 2px solid var(--color-gray-300);
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 2;
        }
        
        .data-table th:first-child {
            padding-left: var(--space-5);
        }
        
        .data-table th:last-child {
            padding-right: var(--space-5);
        }
        
        .data-table td {
            padding: 0.875rem 0.875rem;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
            color: var(--text-main);
            font-size: var(--text-sm);
        }
        
        .data-table td strong {
            font-weight: 700;
            color: var(--color-gray-900);
        }
        
        .data-table td:first-child {
            padding-left: var(--space-5);
            font-weight: 600;
        }
        
        .data-table td:last-child {
            padding-right: var(--space-6);
        }
        
        .data-table tbody tr {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        
        .data-table tbody tr:hover {
            background: rgba(5, 150, 105, 0.04);
        }
        
        .data-table tbody tr:nth-child(even) {
            background: rgba(0,0,0,0.015);
        }
        
        .data-table tbody tr:nth-child(even):hover {
            background: rgba(5, 150, 105, 0.04);
        }
        
        .data-table tbody tr:last-child td {
            border-bottom: none;
        }
        
        .data-table tbody tr:active {
            background: rgba(5, 150, 105, 0.08);
        }
        
        /* Table scroll shadow on mobile */
        .table-responsive {
            position: relative;
        }
        
        .table-responsive::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 30px;
            background: linear-gradient(to right, transparent, rgba(0,0,0,0.03));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .table-responsive:hover::after,
        .table-responsive:active::after {
            opacity: 1;
        }
        
        @media (max-width: 640px) {
            .data-table th,
            .data-table td {
                padding: var(--space-3);
            }
            .data-table th:first-child,
            .data-table td:first-child {
                padding-left: var(--space-4);
            }
            .data-table th:last-child,
            .data-table td:last-child {
                padding-right: var(--space-4);
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           BADGES
           ═══════════════════════════════════════════════════════════════ */
        
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            font-size: var(--text-xs);
            font-weight: 700;
            border-radius: var(--radius-full);
            letter-spacing: 0.03em;
            line-height: 1.4;
            transition: all var(--transition-fast);
            border: 1.5px solid transparent;
        }
        
        .badge:hover {
            transform: scale(1.08);
            filter: brightness(1.1);
        }
        
        .badge-sm {
            font-size: 0.7rem;
            padding: 0.15rem 0.55rem;
        }
        .badge-sm:hover {
            transform: scale(1.06);
        }
        
        /* Centre badges */
        .badge-centre-92903 { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
        .badge-centre-12903 { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
        .badge-centre-22900 { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
        .badge-centre-82900 { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
        
        .badge-success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }
        .badge-success:hover {
            background: #a7f3d0;
            border-color: #6ee7b7;
        }
        
        .badge-info, .badge-blue {
            background: #dbeafe;
            color: #1e40af;
            border: 1px solid #bfdbfe;
        }
        .badge-info:hover, .badge-blue:hover {
            background: #bfdbfe;
        }
        
        .badge-warning, .badge-yellow {
            background: #fef3c7;
            color: #92400e;
            border: 1px solid #fde68a;
        }
        .badge-warning:hover, .badge-yellow:hover {
            background: #fde68a;
        }
        
        .badge-gray {
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
        }
        .badge-gray:hover {
            background: #e5e7eb;
        }
        
        .badge-danger {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }
        .badge-danger:hover {
            background: #fecaca;
        }
        
        .empty-cell {
            text-align: center;
            padding: 3rem 1rem !important;
            color: #94a3b8;
            font-size: 0.95rem;
            background: transparent !important;
        }
        .empty-cell i {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 0.75rem;
            color: #cbd5e1;
        }
        .empty-cell strong {
            color: var(--text-muted);
            font-weight: 600;
        }
        .empty-cell i {
            font-size: 1.5rem;
            margin-right: 0.5rem;
            vertical-align: middle;
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           SEARCH - Modern input style
           ═══════════════════════════════════════════════════════════════ */
        
        .search-box {
            position: relative;
            min-width: 0;
        }
        
        /* Header toolbar with filter chips + search */
        .header-toolbar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .filter-chips {
            display: flex;
            gap: 0.35rem;
            align-items: center;
        }
        .chip {
            padding: 0.25rem 0.65rem;
            border-radius: 9999px;
            font-size: 0.72rem;
            font-weight: 600;
            border: 1.5px solid #e2e8f0;
            background: white;
            color: #64748b;
            cursor: pointer;
            transition: all 150ms ease;
            min-height: 30px;
            white-space: nowrap;
        }
        .chip:hover {
            border-color: var(--color-primary-light);
            color: var(--color-primary);
            background: #f0fdf4;
        }
        .chip.active {
            background: var(--color-primary);
            color: white;
            border-color: var(--color-primary);
        }
        
        .search-box input {
            height: 44px;
            padding: 0.5rem 1rem;
            padding-left: 2.8rem;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            width: 280px;
            max-width: 100%;
            transition: all var(--transition-fast);
            background: var(--bg-card);
            color: var(--text-main);
            font-weight: 500;
        }
        
        .search-box input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
            width: 320px;
            max-width: 100%;
            background: var(--bg-card);
        }
        
        .search-box input::placeholder {
            color: var(--text-light);
            font-weight: 400;
        }
        
        .search-box i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 1rem;
            pointer-events: none;
            transition: color var(--transition-fast);
        }
        
        .search-box:focus-within i {
            color: var(--color-primary);
        }
        
        .search-box .search-clear {
            position: absolute;
            right: var(--space-2);
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--color-gray-400);
            cursor: pointer;
            padding: var(--space-1);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
            opacity: 0;
            pointer-events: none;
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .search-box .search-clear.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .search-box .search-clear:hover {
            color: var(--color-gray-600);
            background: var(--color-gray-100);
        }
        
        @media (max-width: 640px) {
            .search-box {
                width: 100%;
            }
            .search-box input {
                width: 100%;
                height: 44px;
                font-size: var(--text-base);
                padding: var(--space-3) var(--space-4);
                padding-left: var(--space-10);
            }
            .search-box input:focus {
                width: 100%;
            }
            .header-toolbar {
                width: 100%;
                flex-direction: column;
                gap: 0.5rem;
            }
            .filter-chips {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 0.25rem;
            }
            .chip {
                font-size: 0.68rem;
                padding: 0.2rem 0.55rem;
                min-height: 28px;
                flex-shrink: 0;
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           PAGINATION
           ═══════════════════════════════════════════════════════════════ */
        
        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-4) var(--space-5);
            border-top: 1px solid var(--border-color);
        }
        .pagination-info {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-right: auto;
            font-weight: 500;
        }
        
        .page-btn {
            min-width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(0,0,0,0.06);
            background: var(--bg-card);
            border-radius: 10px;
            cursor: pointer;
            font-weight: 700;
            font-size: var(--text-sm);
            transition: all var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--text-muted);
            padding: 0 0.6rem;
            letter-spacing: 0.02em;
            user-select: none;
        }
        
        .page-btn:hover:not(:disabled) {
            border-color: rgba(5, 150, 105, 0.15);
            color: var(--color-primary);
            background: rgba(5, 150, 105, 0.04);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
        }
        
        .page-btn:active:not(:disabled) {
            transform: scale(0.95);
            box-shadow: none;
        }
        
        .page-btn.active {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            border-color: transparent;
            color: var(--color-white);
            box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
        }
        
        .page-btn.active:hover {
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            border-color: transparent;
            color: var(--color-white);
            box-shadow: 0 6px 18px rgba(5, 150, 105, 0.4);
            transform: translateY(-1px);
        }
        
        .page-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        @media (max-width: 640px) {
            .pagination {
                gap: var(--space-1);
                padding: var(--space-3);
                flex-wrap: wrap;
            }
            .page-btn {
                min-width: 36px;
                height: 36px;
                font-size: 0.8125rem;
                padding: 0 0.4rem;
            }
        }
        
        /* Toggle group (for majorations view switch) */
        .toggle-group {
            display: inline-flex;
            background: var(--bg-page);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }
        .toggle-btn {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.5rem 0.75rem;
            border: none;
            background: transparent;
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }
        .toggle-btn i {
            font-size: 1rem;
        }
        .toggle-btn:hover {
            color: var(--color-primary);
            background: rgba(var(--primary-rgb), 0.05);
        }
        .toggle-btn.active {
            background: var(--color-primary);
            color: var(--color-white);
        }
        .toggle-btn.active i {
            color: var(--color-white);
        }
        .toggle-btn:first-child {
            border-right: 1px solid var(--border-color);
        }
        
        /* Substance best medication display */
        .substance-best {
            display: inline-flex;
            flex-direction: column;
            gap: 0.1rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            transition: all var(--transition-fast);
        }
        .substance-best:hover {
            background: rgba(var(--primary-rgb), 0.08);
        }
        .substance-best-name {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-main);
        }
        .substance-best-code {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-family: var(--font-mono);
        }
        .substance-best-maj {
            font-size: 0.75rem;
            color: var(--color-danger);
            font-weight: 700;
        }
        
        @media (max-width: 640px) {
            .toggle-btn {
                padding: 0.4rem 0.6rem;
                font-size: 0.75rem;
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MODAL HEADERS - Healthcare themed color palette
           ═══════════════════════════════════════════════════════════════ */
        
        /* Facture - Same style as beneficiaire with icon header */
        .facture-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: var(--space-4) var(--space-5);
            background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
            color: white;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-5) calc(-1 * var(--space-5));
            position: relative;
            overflow: hidden;
        }
        .facture-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
            pointer-events: none;
        }
        .facture-icon { font-size: 2.5rem; position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
        .facture-name { display: flex; flex-direction: column; gap: 0.3rem; position: relative; z-index: 1; flex: 1; }
        .facture-header .facture-label { font-size: var(--text-xs); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
        .facture-header .facture-value { font-size: var(--text-2xl); font-weight: 800; font-family: var(--font-mono); }
        .facture-badge { position: relative; z-index: 1; }
        .facture-badge .badge { background: rgba(255,255,255,0.25); color: white; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3); }
        
        /* Bordereau - Healthcare blue (administration) */
        .bordereau-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: var(--space-4) var(--space-5);
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
            color: white;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-5) calc(-1 * var(--space-5));
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
        }
        .bordereau-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
        }
        .bordereau-number { display: flex; flex-direction: column; gap: 0.3rem; position: relative; z-index: 1; flex: 1; }
        .bordereau-icon { font-size: 2.5rem; position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); line-height: 1; }
        .bordereau-header .bordereau-label { font-size: var(--text-xs); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
        .bordereau-header .bordereau-value { font-size: var(--text-2xl); font-weight: 800; font-family: var(--font-mono); }
        .bordereau-status { position: relative; z-index: 1; }
        .bordereau-status .badge { font-size: var(--text-sm); padding: 0.4rem 0.8rem; border-radius: var(--radius-md); }
        .bordereau-header .badge-yellow { background: rgba(254, 243, 199, 0.95); color: #92400e; }
        .bordereau-header .badge-blue { background: rgba(219, 234, 254, 0.95); color: #1e40af; }
        
        /* Bénéficiaire - Healthcare cyan (people/family) */
        .beneficiaire-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: var(--space-4) var(--space-5);
            background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%);
            color: white;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-5) calc(-1 * var(--space-5));
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
        }
        .beneficiaire-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
        }
        .beneficiaire-icon { font-size: 2.5rem; position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
        .beneficiaire-name { display: flex; flex-direction: column; gap: 0.3rem; position: relative; z-index: 1; }
        .beneficiaire-header .beneficiaire-label { font-size: var(--text-xs); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
        .beneficiaire-header .beneficiaire-value { font-size: var(--text-2xl); font-weight: 800; }
        
        /* Médicament - Soft violet purple (pharmaceutical) */
        .medicament-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: var(--space-4) var(--space-5);
            background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
            color: white;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-5) calc(-1 * var(--space-5));
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
        }
        .medicament-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
        }
        .medicament-icon { font-size: 2.5rem; position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
        .medicament-name { display: flex; flex-direction: column; gap: 0.25rem; }
        .medicament-header .medicament-label { font-size: 0.7rem; opacity: 0.8; text-transform: uppercase; }
        .medicament-header .medicament-value { font-size: var(--text-xl); font-weight: 800; }
        
        /* Beneficiaire stats mini */
        .stats-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; }
        .stat-mini { text-align: center; padding: 0.5rem; background: var(--bg-page); border-radius: var(--radius-sm); }
        .stat-mini-value { display: block; font-size: 1.25rem; font-weight: 700; color: var(--color-primary); }
        .stat-mini-label { display: block; font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }
        
        /* Family list - Modern card style */
        .family-list { display: flex; flex-direction: column; gap: var(--space-3); }
        .family-item { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: var(--space-4); 
            background: linear-gradient(135deg, var(--color-gray-50) 0%, white 100%);
            border-radius: var(--radius-lg); 
            border: 1px solid var(--border-color);
            transition: all var(--transition-fast);
        }
        .family-item:hover {
            transform: translateX(4px);
            box-shadow: var(--shadow-md);
            border-color: var(--color-primary);
        }
        .family-item.active { 
            border-left: 4px solid var(--color-primary);
            background: linear-gradient(135deg, var(--color-primary-50) 0%, rgba(209, 250, 229, 0.3) 100%);
        }
        .family-info { display: flex; align-items: center; gap: var(--space-3); }
        .family-name { font-weight: 600; font-size: var(--text-base); color: var(--text-main); }
        .family-assure { font-size: var(--text-xs); color: var(--color-gray-400); font-family: var(--font-mono); }
        .badge-sm { font-size: var(--text-xs); padding: 0.25rem 0.5rem; border-radius: var(--radius-md); font-weight: 600; }
        .badge-success { background: var(--color-primary-100); color: var(--color-primary-dark); }
        .badge-info { background: #dbeafe; color: #1e40af; }
        
        /* Mini facture list */
        .facture-list-mini { display: flex; flex-direction: column; gap: var(--space-3); }
        .facture-item-mini {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-4);
            background: linear-gradient(135deg, var(--color-gray-50) 0%, white 100%);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--color-primary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .facture-item-mini:hover { 
            background: var(--color-primary-50); 
            transform: translateX(4px); 
            box-shadow: var(--shadow-md);
        }
        .facture-item-left { display: flex; flex-direction: column; gap: var(--space-1); }
        .facture-item-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-base); }
        .facture-item-date { font-size: var(--text-xs); color: var(--color-gray-400); }
        .facture-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
        .facture-item-mont { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary); font-size: var(--text-base); }
        .facture-item-rang { font-size: var(--text-xs); color: var(--color-gray-400); }
        .empty-state-mini { text-align: center; padding: 1.5rem; color: var(--text-muted); }
        .empty-state-mini i { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
        
        .beneficiaire-prenom { font-size: 0.9rem; opacity: 0.9; font-weight: 400; }
        .beneficiaire-name { display: flex; flex-direction: column; gap: 0.15rem; }
        
        .stats-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
        .stat-mini { text-align: center; padding: 0.5rem; background: var(--bg-page); border-radius: var(--radius); }
        .stat-mini-value { display: block; font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }
        .stat-mini-label { display: block; font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           RESPONSIVE STYLES
           ═══════════════════════════════════════════════════════════════ */
        
        @media (max-width: 640px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
            }
        }
        
        @media (min-width: 641px) and (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MODAL RESPONSIVE (Mobile optimized)
           ═══════════════════════════════════════════════════════════════ */
        
        @media (max-width: 520px) {
            .modal-overlay { align-items: flex-end; padding: 0; }
            .modal-overlay.show .modal-box {
                transform: scale(1) translateY(0);
            }
            .modal-box {
                max-width: 100%;
                width: 100%;
                max-height: 92vh;
                border-radius: var(--radius-xl) var(--radius-xl) 0 0;
                transform: translateY(100%);
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                overflow-y: auto;
                padding-top: 14px;
            }
            /* Mobile drag handle */
            .modal-box::before {
                content: '';
                position: absolute;
                top: 6px;
                left: 50%;
                transform: translateX(-50%);
                width: 36px;
                height: 4px;
                background: rgba(0,0,0,0.15);
                border-radius: 4px;
                z-index: 25;
            }
            .modal-header { padding: 0.875rem 1rem; }
            .modal-body { padding: 1rem; max-height: calc(92vh - 130px); }
            
            /* Mobile modal headers - compact */
            .facture-header, .bordereau-header, .beneficiaire-header, .medicament-header {
                margin: -1rem -1rem 0.5rem -1rem;
                padding: 0.875rem 1rem;
                border-radius: 12px 12px 0 0;
                flex-direction: row;
                align-items: center;
                gap: 0.75rem;
            }
            .facture-icon, .bordereau-icon, .beneficiaire-icon, .medicament-icon {
                font-size: 2rem;
            }
            .beneficiaire-header .beneficiaire-name {
                flex-direction: column;
                gap: 0.2rem;
            }
            .facture-header .facture-value,
            .bordereau-header .bordereau-value,
            .beneficiaire-header .beneficiaire-value,
            .medicament-header .medicament-value { font-size: 1.1rem; }
            .facture-header .facture-label,
            .bordereau-header .bordereau-label,
            .beneficiaire-header .beneficiaire-label,
            .medicament-header .medicament-label { font-size: 0.65rem; }
            .beneficiaire-prenom { font-size: 0.85rem; }
            
            /* Mobile facture section */
            .facture-section { padding: 0.5rem 0; }
            .facture-row { gap: 0.5rem; margin-bottom: 0.4rem; }
            .facture-label { font-size: 0.6rem; }
            .facture-value { font-size: 0.85rem; }
            
            /* Mobile facture list items */
            .facture-list-mini { gap: 0.4rem; }
            .facture-item-mini { 
                padding: 0.5rem 0.6rem;
                border-left-width: 2px;
            }
            .facture-item-num { font-size: 0.8rem; }
            .facture-item-date { font-size: 0.65rem; }
            .facture-item-mont { font-size: 0.8rem; }
            
            /* Mobile family items */
            .family-list { gap: 0.4rem; }
            .family-item { padding: 0.4rem 0.5rem; }
            .family-name { font-size: 0.8rem; }
            .family-assure { font-size: 0.65rem; }
            
            /* Mobile stats mini */
            .stats-grid-mini { gap: 0.4rem; }
            .stat-mini { padding: 0.4rem; }
            .stat-mini-value { font-size: 1rem; }
            .stat-mini-label { font-size: 0.6rem; }
            
            /* Mobile section titles */
            .section-title { font-size: 0.75rem; margin-bottom: 0.4rem; }
            
            /* Mobile line items compact */
            .line-items-compact { gap: 0.35rem; }
            .line-item-c { padding: 0.35rem 0.5rem; }
            .lic-top { font-size: 0.8rem; gap: 0.25rem; }
            .lic-dose { font-size: 0.7rem; }
            .lic-cond { font-size: 0.7rem; }
            .lic-code { font-size: 0.65rem; }
            .lic-bot { font-size: 0.72rem; gap: 0.25rem; }
            
            /* Mobile amount grid */
            .amount-grid { margin-top: var(--space-3); gap: var(--space-2); }
            .amount-item { padding: var(--space-3); }
            .amount-value { font-size: 1rem; }
            .amount-label { font-size: 0.65rem; }
            
            /* Mobile medicament cards */
            .medicament-cards { padding: 0.5rem; gap: 0.3rem; }
            .mc-row { padding: 0.4rem 0.5rem; }
            .mc-label { font-size: 0.72rem; min-width: 65px; }
            .mc-value { font-size: 0.82rem; }
            /* Mobile medicament majoration */
            .medicament-maj { padding: 0.25rem 0.5rem 0.5rem; }
            .maj-grid { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
            .maj-stat { padding: 0.4rem 0.3rem; }
            .maj-num { font-size: 0.85rem; }
            .maj-lbl { font-size: 0.6rem; }
            /* Mobile bordereau ref card */
            .bordereau-ref-card { padding: 0.5rem 0.6rem; font-size: 0.8rem; }
        }
        
        @media (min-width: 521px) {
            .modal-overlay { align-items: center; justify-content: center; }
            .modal-box { max-width: 480px; }
        }
        
        .facture-section { 
            padding: var(--space-4) 0; 
        }
        .facture-section:last-child { border-bottom: none; }
        
        .section-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--color-gray-700);
            margin: var(--space-3) 0 var(--space-2) 0;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .section-title:first-child { margin-top: 0; }
        .section-title i {
            font-size: 1rem;
            color: var(--color-primary);
        }
        
        .facture-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-3); }
        .facture-row:last-child { margin-bottom: 0; }
        .facture-col { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
        .facture-col.full { flex: 1; }
        
        .facture-label {
            font-size: var(--text-xs);
            text-transform: uppercase;
            opacity: 0.5;
            letter-spacing: 0.05em;
            font-weight: 500;
        }
        .facture-value { font-size: var(--text-base); font-weight: 500; }
        .facture-value.big { font-size: var(--text-lg); font-weight: 600; }
        .facture-value.mono { font-family: var(--font-mono); font-size: var(--text-base); }
        .rang-num { margin-left: 0.25rem; font-size: 0.75rem; opacity: 0.6; }
        
        /* Line items compact */
        .line-items-compact { display: flex; flex-direction: column; gap: 0.4rem; }
        .line-item-c {
            background: rgba(255,255,255,0.5);
            border-radius: var(--radius-sm);
            border-left: 3px solid #10b981;
            padding: 0.45rem 0.7rem;
        }
        .lic-top { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.85rem; }
        .lic-name { font-weight: 600; color: #0f172a; }
        .lic-dose { font-size: 0.75rem; color: #64748b; }
        .lic-sep { color: #cbd5e1; font-size: 0.7rem; }
        .lic-cond { font-size: 0.75rem; color: #059669; font-weight: 500; }
        .lic-code { font-size: 0.7rem; color: #94a3b8; }
        .lic-bot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.78rem; margin-top: 0.15rem; color: #475569; }
        .lic-ppa { color: #475569; }
        .lic-qte { color: #475569; }
        .lic-total { color: #0f172a; font-weight: 600; }
        .lic-as { color: #dc2626; }
        .lic-bul { color: #cbd5e1; font-size: 0.6rem; }
        .lic-top strong, .lic-bot strong { font-weight: 700; }
        
        /* Bordereau ref card in facture modal */
        .bordereau-ref-card {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.65rem 0.75rem;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 150ms ease;
        }
        .bordereau-ref-card:hover {
            background: #dcfce7;
            border-color: #86efac;
        }
        .bordereau-ref-card i { font-size: 1rem; color: #059669; }
        
        /* Medicament compact */
        /* Medicament modal card layout */
        .medicament-cards {
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        .mc-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.65rem;
            background: var(--bg-page);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: background var(--transition-fast);
        }
        .mc-row:hover { background: #f1f5f9; }
        .mc-label {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            min-width: 80px;
        }
        .mc-value {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text-main);
            text-align: right;
        }
        .mc-value.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
        .mc-value strong { font-weight: 700; color: #0f172a; }
        .mc-ppat .mc-value { color: #059669; font-size: 0.95rem; }
        .mc-ppat { border-left: 3px solid #059669; }
        
        .medicament-compact { display: none; }
        
        /* Medicament majoration stats */
        .medicament-maj {
            padding: 0.5rem 0.75rem 0.75rem;
        }
        .maj-title {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }
        .maj-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 0.5rem;
        }
        .maj-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.6rem 0.5rem;
            background: #f8fafc;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
        }
        .maj-num {
            font-size: 1rem;
            font-weight: 700;
            font-family: var(--font-mono);
            color: #0f172a;
            letter-spacing: 0.01em;
        }
        .maj-lbl {
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-top: 0.2rem;
        }
        .maj-red .maj-num { color: #dc2626; }
        .maj-amber .maj-num { color: #d97706; }
        .maj-green .maj-num { color: #059669; }
        
        /* Majoration notes */
        .maj-notes {
            margin-top: 0.75rem;
            padding: 0.5rem 0.75rem;
            background: #fffbeb;
            border-radius: 8px;
            border: 1px solid #fde68a;
            font-size: 0.82rem;
            color: #92400e;
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
        }
        .maj-notes i {
            font-size: 0.9rem;
            margin-top: 0.1rem;
            flex-shrink: 0;
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MODAL - Modern glass morphism style
           ═══════════════════════════════════════════════════════════════ */
        
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: var(--space-4);
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
        }
        
        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-box {
            background: var(--bg-card);
            border-radius: 20px;
            width: 100%;
            max-width: 580px;
            max-height: 90vh;
            overflow: hidden;
            transform: scale(0.92) translateY(24px);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4);
        }
        
        .modal-overlay.show .modal-box {
            transform: scale(1) translateY(0);
        }
        
        .modal-header {
            display: none;
        }
        
        .modal-title {
            font-size: var(--text-lg);
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            gap: var(--space-3);
            letter-spacing: -0.01em;
        }
        
        .modal-title i {
            color: rgba(255,255,255,0.9);
        }
        
        .modal-close {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: rgba(255,255,255,0.2);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: white;
            font-size: 1.25rem;
            font-weight: 300;
        }
        
        .modal-close:hover {
            background: rgba(255,255,255,0.35);
            transform: rotate(90deg);
        }
        
        .modal-close i {
            line-height: 1;
        }
        
        /* Back button in modal header */
        .modal-back-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: rgba(255,255,255,0.2);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: white;
            font-size: 1.25rem;
            flex-shrink: 0;
        }
        .modal-back-btn:hover {
            background: rgba(255,255,255,0.35);
            transform: translateX(-2px);
        }
        
        .modal-body {
            padding: var(--space-4) var(--space-5);
            overflow-y: auto;
            max-height: calc(90vh - 140px);
            position: relative;
        }
        
        .modal-loading-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.88);
            backdrop-filter: blur(4px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            z-index: 10;
            border-radius: 0 0 var(--radius-xl) var(--radius-xl);
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        
        .modal-loading-overlay .modal-loading-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid var(--border-color);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        /* Amount breakdown for facture modal - 3 column modern cards */
        .amount-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-3);
            margin-top: var(--space-4);
        }
        
        @media (max-width: 520px) {
            .amount-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-2);
            }
            .amount-item { padding: var(--space-3); }
            .amount-value { font-size: 1rem; }
        }
        
        .amount-item {
            text-align: center;
            padding: var(--space-4) var(--space-3);
            background: linear-gradient(135deg, var(--color-gray-50) 0%, white 100%);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
            transition: all var(--transition-fast);
        }
        
        .amount-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }
        
        .amount-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }
        
        .amount-item.total::before {
            background: linear-gradient(90deg, var(--color-primary), var(--color-success));
        }
        
        .amount-item.pharmacie::before {
            background: linear-gradient(90deg, var(--color-info), #60a5fa);
        }
        
        .amount-item.assure::before {
            background: linear-gradient(90deg, var(--color-warning), #fbbf24);
        }
        
        .amount-label {
            display: block;
            font-size: var(--text-xs);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-gray-500);
            margin-bottom: var(--space-2);
        }
        
        .amount-value {
            font-size: var(--text-xl);
            font-weight: 700;
            display: block;
            font-family: var(--font-mono);
        }
        
        .amount-value.total { color: var(--color-primary); }
        .amount-value.pharmacie { color: var(--color-info); }
        .amount-value.assure { color: var(--color-warning); }
        
        /* Line items in facture modal */
        .line-items {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .line-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.6rem 0.75rem;
            background: var(--bg-page);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: all var(--transition-fast);
        }
        .line-item:hover {
            border-color: var(--color-primary-light);
        }
        .line-item:last-child { border-bottom: none; }
        .line-info { flex: 1; min-width: 0; }
        .line-name { display: block; font-weight: 600; color: var(--text-main); font-size: 0.85rem; }
        .line-details { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
        .line-price { text-align: right; flex-shrink: 0; margin-left: 0.75rem; }
        .line-total { display: block; font-weight: 700; font-size: 0.9rem; color: var(--color-primary); }
        
        /* Family members in beneficiaire modal */
        .family-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .family-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 0.75rem;
            background: var(--bg-page);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: all var(--transition-fast);
        }
        .family-item.active {
            border-color: var(--color-primary);
            background: rgba(5, 150, 105, 0.05);
        }
        .family-item:hover {
            border-color: var(--color-primary-light);
        }
        .family-info {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .family-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-main);
        }
        .family-assure {
            font-size: 0.75rem;
            font-family: var(--font-mono);
            color: var(--text-muted);
        }
        
        /* Mini facture list (modals) */
        .facture-list-mini {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .facture-item-mini {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.6rem 0.75rem;
            background: var(--bg-page);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .facture-item-mini:hover {
            background: var(--bg-hover);
            border-color: var(--color-primary-light);
        }
        .facture-item-mini-left {
            flex: 1;
            min-width: 0;
        }
        .facture-item-mini-num {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-main);
        }
        .facture-item-mini-patient {
            font-size: 0.8rem;
            color: var(--text-main);
            margin-top: 0.15rem;
        }
        .facture-item-mini-date {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 0.1rem;
        }
        .facture-item-mini-right {
            text-align: right;
            flex-shrink: 0;
            margin-left: 0.75rem;
        }
        .facture-item-mini-mont {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--color-primary);
            white-space: nowrap;
        }
        
        .empty-state-mini {
            text-align: center;
            padding: 1.5rem 1rem;
            color: var(--text-muted);
            font-size: 0.85rem;
        }
        .empty-state-mini i {
            font-size: 1.2rem;
            margin-right: 0.4rem;
            vertical-align: middle;
        }
        
        .modal-footer {
            padding: var(--space-4) var(--space-6);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: var(--space-3);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           TOAST NOTIFICATIONS
           ═══════════════════════════════════════════════════════════════ */
        
        .toast {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.75rem 1.25rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.875rem;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
            animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: #fff;
        }
        .toast.success {
            background: #059669;
        }
        .toast.error {
            background: #dc2626;
        }
        .toast i {
            font-size: 1.1rem;
        }
        
        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(1rem);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           DETAIL ROWS
           ═══════════════════════════════════════════════════════════════ */
        
        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-3) 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .detail-row:last-child {
            border-bottom: none;
        }
        
        .detail-label {
            color: var(--text-muted);
            font-weight: 500;
        }
        
        .detail-value {
            font-weight: 600;
            color: var(--text-main);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           ALERT CARDS
           ═══════════════════════════════════════════════════════════════ */
        
        .alert-card {
            padding: var(--space-4);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-3);
            border-left: 4px solid;
        }
        
        .alert-card.warning {
            background: #fef3c7;
            border-color: var(--color-warning);
        }
        
        .alert-card.danger {
            background: #fee2e2;
            border-color: var(--color-danger);
        }
        
        .alert-title {
            font-weight: 600;
            margin-bottom: var(--space-1);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .alert-info {
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           EMPTY STATE
           ═══════════════════════════════════════════════════════════════ */
        
        .empty-state {
            text-align: center;
            padding: var(--space-12);
            color: var(--text-muted);
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: var(--space-4);
            opacity: 0.5;
        }
        
        .empty-state p {
            font-size: var(--text-sm);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           LOADING — Logo + Progress Bar
           ═══════════════════════════════════════════════════════════════ */
        
        /* ── Full-viewport loading overlay (post-login) ─────────────── */
        .loading-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: var(--bg-page);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 2s ease, visibility 2s ease;
        }
        .loading-overlay.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .loading-overlay-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            text-align: center;
        }
        .loading-overlay-logo {
            width: 72px;
            height: 72px;
            object-fit: contain;
            margin-bottom: 0.25rem;
            animation: loadingLogoIn 6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            opacity: 0;
            transform: scale(0.5);
        }
        @keyframes loadingLogoIn {
            0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
            60% { opacity: 1; transform: scale(1.1) rotate(3deg); }
            80% { transform: scale(0.95) rotate(-1deg); }
            100% { opacity: 1; transform: scale(1) rotate(0deg); }
        }
        .loading-overlay-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary);
            margin: 0;
            letter-spacing: -0.01em;
            animation: loadingFadeIn 3s 2.5s ease both;
        }
        .loading-overlay-sub {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin: -0.75rem 0 0;
            animation: loadingFadeIn 3s 3.5s ease both, loadingPulse 8s 6s ease-in-out infinite;
        }
        .loading-overlay-bar {
            width: 200px;
            height: 3px;
            background: var(--color-gray-100);
            border-radius: 4px;
            overflow: hidden;
            animation: loadingFadeIn 3s 5s ease both;
        }
        .loading-overlay-bar-inner {
            height: 100%;
            width: 30%;
            background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
            border-radius: 4px;
            animation: loadingBar 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        @keyframes loadingFadeIn {
            0% { opacity: 0; transform: translateY(15px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes loadingBar {
            0% { transform: translateX(-100%); }
            50% { transform: translateX(200%); }
            100% { transform: translateX(-100%); }
        }
        @keyframes loadingPulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        /* Old .loading is now replaced by .loading-overlay above */
        
        .app-loading {
            filter: blur(3px);
            opacity: 0.6;
            pointer-events: none;
            transition: opacity 0.45s ease, filter 0.45s ease;
        }
        
        .view-loading {
            display: flex;
            flex-direction: column;
            min-height: 30vh;
            padding: 3rem 1rem;
            gap: 0.75rem;
        }
        
        .view-loading .loading-text {
            font-size: 0.95rem;
        }
        
        /* Skeleton loading placeholders */
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .skel {
            background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 37%, #e8e8e8 63%);
            background-size: 200% 100%;
            animation: shimmer 1.8s ease-in-out infinite;
            border-radius: 6px;
        }
        
        .skel-h { height: 1rem; }
        .skel-h-sm { height: 0.75rem; }
        .skel-h-lg { height: 1.5rem; }
        .skel-h-xl { height: 2rem; }
        .skel-w-25 { width: 25%; }
        .skel-w-40 { width: 40%; }
        .skel-w-50 { width: 50%; }
        .skel-w-60 { width: 60%; }
        .skel-w-75 { width: 75%; }
        .skel-w-80 { width: 80%; }
        .skel-w-90 { width: 90%; }
        .skel-w-full { width: 100%; }
        .skel-round { border-radius: 999px; }
        .skel-mb { margin-bottom: 0.75rem; }
        .skel-mr { margin-right: 0.5rem; }
        .skel-inline { display: inline-block; }
        .skel-block { display: block; }
        
        /* Skeleton table rows */
        .skel-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .skel-row:last-child { border-bottom: none; }
        
        .skel-cell { height: 0.85rem; border-radius: 4px; }
        
        /* Skeleton stat cards */
        .skel-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 1.5rem;
            border: 1px solid var(--border-color);
        }
        
        .skel-card .skel-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
        }
        
        /* Skeleton list items */
        .skel-list-item {
            display: flex;
            align-items: center;
            padding: 0.875rem 1rem;
            border-bottom: 1px solid var(--border-color);
            gap: 0.75rem;
        }
        
        .skel-list-item:last-child { border-bottom: none; }
        
        .loading-text {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-primary);
            letter-spacing: 0.02em;
        }
        
        .loading-sub {
            font-size: var(--text-xs);
            color: var(--color-gray-400);
            margin-top: -0.5rem;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .spin {
            animation: spin 1s linear infinite;
        }
        
        /* Responsive visibility helpers */
        .desktop-only { display: revert; }
        .mobile-only { display: none !important; }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           TOAST
           ═══════════════════════════════════════════════════════════════ */
        
        .toast {
            position: fixed;
            bottom: var(--space-6);
            right: var(--space-6);
            background: var(--bg-card);
            padding: var(--space-4) var(--space-5);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            z-index: 2000;
            animation: slideIn 0.3s ease;
        }
        
        @media (max-width: 768px) {
            .toast {
                bottom: calc(var(--bottom-nav-height) + var(--space-4) + var(--safe-bottom));
                left: var(--space-4);
                right: var(--space-4);
                transform: none;
                justify-content: center;
            }
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .toast.success { border-left: 4px solid var(--color-success); }
        .toast.error { border-left: 4px solid var(--color-danger); }
        .toast i { font-size: var(--text-xl); }
        .toast.success i { color: var(--color-success); }
        .toast.error i { color: var(--color-danger); }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           GRID LAYOUTS
           ═══════════════════════════════════════════════════════════════ */
        
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: var(--space-6);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MOBILE LIST ITEMS (UNIFIED STYLE)
           ═══════════════════════════════════════════════════════════════ */
        
        @media (max-width: 640px) {
            .beneficiaires-body,
            .factures-body,
            .fact-recent-body,
            .medicaments-body,
            .bordereaux-body {
                padding: 0 !important;
                margin: 0 !important;
            }
            
            .beneficiaires-list,
            .factures-list,
            .fact-recent-list,
            .medicaments-list,
            .bordereaux-list {
                display: flex;
                flex-direction: column;
                padding: 0 !important;
                margin: 0 !important;
                background: transparent;
                border-radius: 0;
            }
            
            .beneficiaires-table,
            .factures-table,
            .fact-recent-table,
            .medicaments-table,
            .bordereaux-table { display: none !important; }
            .beneficiaires-grid { display: none !important; }
            
            /* Common Item Styles - Flat list with divider */
            .beneficiaire-item,
            .facture-item,
            .fact-recent-item,
            .medicament-item,
            .bordereau-item {
                background: #ffffff;
                padding: 0.75rem 1rem;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                position: relative;
                transition: background var(--transition-fast) ease;
                border-bottom: 1px solid #f1f5f9;
                border-radius: 0;
                box-shadow: none;
            }
            .beneficiaire-item:last-child,
            .facture-item:last-child,
            .fact-recent-item:last-child,
            .medicament-item:last-child,
            .bordereau-item:last-child {
                border-bottom: none;
            }
            .beneficiaire-item:active,
            .facture-item:active,
            .fact-recent-item:active,
            .medicament-item:active,
            .bordereau-item:active {
                background: #f1f5f9;
                transform: none;
                box-shadow: none;
            }
            
            /* Header Row */
            .beneficiaire-item-header,
            .facture-item-header,
            .fact-recent-item-header,
            .medicament-item-header,
            .bordereau-item-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .beneficiaire-item-info,
            .facture-item-info,
            .fact-recent-item-info,
            .medicament-item-info,
            .bordereau-item-info {
                flex: 1;
                min-width: 0;
            }
            
            /* Badges */
            .beneficiaire-item-badges,
            .facture-item-badges,
            .fact-recent-item-badges,
            .medicament-item-badges,
            .bordereau-item-badges {
                display: flex;
                gap: 0.35rem;
                flex-wrap: nowrap;
                flex-shrink: 0;
            }
            
            /* Chevron arrow for clickability */
            .item-chevron {
                color: var(--color-gray-400);
                font-size: 0.875rem;
                margin-left: 0.25rem;
                flex-shrink: 0;
                align-self: center;
                transition: transform var(--transition-fast);
            }
            .beneficiaire-item:active .item-chevron,
            .facture-item:active .item-chevron,
            .medicament-item:active .item-chevron,
            .bordereau-item:active .item-chevron {
                transform: translateX(3px);
            }
            
            /* Name / Title */
            .beneficiaire-item-name,
            .facture-item-title,
            .fact-recent-item-title,
            .medicament-item-title,
            .bordereau-item-title {
                font-size: 0.9375rem;
                font-weight: 700;
                color: var(--text-main);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                letter-spacing: -0.01em;
                line-height: 1.3;
            }
            
            /* ID / Subtitle */
            .beneficiaire-item-id,
            .facture-item-id,
            .fact-recent-item-id,
            .medicament-item-id,
            .bordereau-item-id {
                font-size: 0.7rem;
                color: #94a3b8;
                margin-top: 0.15rem;
                line-height: 1.4;
            }
            
            /* Third line / Sub info (badges row) */
            .facture-item-sub,
            .medicament-item-sub,
            .fact-recent-item-sub {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                margin-top: 0.3rem;
                font-size: 0.7rem;
                color: var(--text-muted);
            }
            
            /* Footer / Secondary Info */
            .beneficiaire-item-footer,
            .facture-item-footer,
            .fact-recent-item-footer,
            .medicament-item-footer,
            .bordereau-item-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 0.5rem;
                font-size: 0.75rem;
                color: var(--text-muted);
            }
            
            .list-empty {
                text-align: center;
                padding: 2.5rem 1rem;
                color: #94a3b8;
                font-size: 0.9rem;
            }
            .list-empty i {
                font-size: 1.8rem;
                display: block;
                margin-bottom: 0.5rem;
                color: #cbd5e1;
            }
        }
        
        @media (min-width: 641px) {
            .beneficiaires-list,
            .factures-list,
            .fact-recent-list,
            .medicaments-list,
            .bordereaux-list { display: none; }
            .beneficiaires-table,
            .factures-table,
            .fact-recent-table,
            .medicaments-table,
            .bordereaux-table { display: block; }
        }
        
        /* Mobile-first responsive */
        @media (max-width: 500px) {
            .grid-2 { grid-template-columns: 1fr; }
            .stat-cards { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
            .stat-card { padding: 1rem; }
            .stat-icon { width: 44px; height: 44px; font-size: 1.25rem; }
            .stat-value { font-size: 1.125rem; font-weight: 800; }
            .stat-label { font-size: 0.7rem; }
            .card { padding: 0.875rem; }
            .card-header { padding: 0.75rem 1rem; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
            .card-title { font-size: 1rem; font-weight: 700; }
            .data-table { font-size: 0.75rem; }
            .data-table th, .data-table td { padding: 0.5rem; }
            .page-btn { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
            .nav-item { padding: 0.625rem 0.75rem; font-size: 0.85rem; }
            .nav-item i { font-size: 1rem; }
            .topbar { padding: 0.75rem 1rem; }
            .search-box { width: 100%; }
            /* Table horizontal scroll with shadow cue */
            .data-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .data-table { min-width: 500px; }
            /* Pagination compact */
            .pagination { gap: 0.25rem; flex-wrap: wrap; }
            .page-btn { min-width: 36px; height: 36px; font-size: 0.75rem; padding: 0 0.4rem; }
            .page-btn.ellipsis { min-width: 24px; }
            /* Login page responsive */
            .login-card { padding: 2rem 1.5rem; max-width: 100%; margin: 0 0.5rem; }
            .login-logo { width: 80px; height: 80px; }
            .login-title { font-size: 1.5rem; }
            .login-subtitle { font-size: 0.8rem; }
            /* Stats on small mobile */
            .stats-grid { gap: 0.6rem; }
            .stat-card { padding: 0.75rem; }
            .stat-icon.green, .stat-icon.blue, .stat-icon.yellow, .stat-icon.red,
            .stat-icon.emerald, .stat-icon.amber { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 0.5rem; }
            .stat-value { font-size: 1rem; font-weight: 800; }
            .stat-subvalue { font-size: 0.7rem; }
            .stat-label { font-size: 0.65rem; }
            .stat-mini-num { font-size: 0.85rem; }
            .stat-mini-lbl { font-size: 0.55rem; }
            /* View skeleton loading centering */
            .view-loading { min-height: 35vh; }
            /* Bottom nav compact at very small screens */
            .bottom-nav-item { padding: 4px 6px; min-width: 0; }
            .bottom-nav-item i { font-size: 1.2rem; }
            .bottom-nav-item span { font-size: 0.6rem; }
        }
        
        @media (min-width: 768px) {
            .grid-3 { grid-template-columns: repeat(3, 1fr); }
            .grid-4 { grid-template-columns: repeat(4, 1fr); }
        }
        
        @media (min-width: 1024px) {
            .sidebar { width: var(--sidebar-width); }
            .main-content { margin-left: var(--sidebar-width); }
            .stat-cards { grid-template-columns: repeat(4, 1fr); }
        }
        
        @media (min-width: 1440px) {
            .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
            .stat-cards { grid-template-columns: repeat(5, 1fr); }
        }
        
        /* Touch optimizations */
        @media (hover: none) and (pointer: coarse) {
            .nav-item { min-height: 44px; }
            .btn { min-height: 44px; padding: 0.75rem 1.5rem; }
            .form-input { min-height: 44px; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.open {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .mobile-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 99;
                display: none;
            }
            
            .mobile-overlay.show {
                display: block;
            }
        }
        
        @media (min-width: 1024px) {
            .mobile-overlay {
                display: none !important;
                }
            }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           CLEAN DESIGN REFINEMENTS - Polish & consistency
           ═══════════════════════════════════════════════════════════════ */
        
        /* Page title hierarchy */
        .page-title {
            font-size: var(--text-2xl);
            font-weight: 700;
            letter-spacing: -0.01em;
            color: var(--text-main);
            margin: 0;
        }
        .page-subtitle {
            font-size: var(--text-sm);
            color: var(--text-muted);
            font-weight: 400;
            margin-top: var(--space-1);
        }
        
        /* Card section headers - consistent across all sections */
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--border-light);
            flex-wrap: wrap;
        }
        .section-header h3 {
            font-size: var(--text-sm);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--text-muted);
            margin: 0;
        }
        
        /* Cleaner interactive focus states */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           MOBILE UI ENHANCEMENTS
           ═══════════════════════════════════════════════════════════════ */
        
        /* Sticky card header on mobile for search */
        @media (max-width: 640px) {
            .card-header.sticky-mobile {
                position: sticky;
                top: calc(var(--topbar-height) + var(--safe-top));
                z-index: 20;
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            }
            .card-header.sticky-mobile + .card-body {
                border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            }
            
            /* Pull-to-refresh hint at top of scrollable lists */
            .pull-hint {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.5rem;
                font-size: 0.7rem;
                color: var(--text-muted);
                opacity: 0.6;
                gap: 0.35rem;
            }
            .pull-hint i {
                font-size: 0.8rem;
                animation: pullHintBounce 2s ease-in-out infinite;
            }
            
            @keyframes pullHintBounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(3px); }
            }
            
            /* Improved empty state on mobile */
            .list-empty {
                padding: 2.5rem 1rem !important;
            }
            .list-empty i {
                font-size: 2.5rem !important;
                opacity: 0.5;
            }
            .empty-cell {
                padding: 3rem 1rem !important;
            }
            .empty-cell i {
                font-size: 2.5rem;
            }
            
            /* Subtle accent bar always visible on items */
            .beneficiaire-item::before,
            .facture-item::before,
            .fact-recent-item::before,
            .medicament-item::before,
            .bordereau-item::before {
                opacity: 0.3;
            }
            .beneficiaire-item:active::before,
            .facture-item:active::before,
            .fact-recent-item:active::before,
            .medicament-item:active::before,
            .bordereau-item:active::before {
                opacity: 1;
            }
            
            /* Enhanced item on active */
            .beneficiaire-item:active,
            .facture-item:active,
            .fact-recent-item:active,
            .medicament-item:active,
            .bordereau-item:active {
                background: var(--bg-hover);
                transform: scale(0.98);
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            }
            
            /* Search box enhancement on mobile */
            .search-box {
                height: 40px;
                border-radius: 20px;
            }
            .search-box:focus-within {
                border-color: var(--color-primary);
                box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
            }
            
            /* Bottom nav iOS-like blur enhancement */
            .mobile-bottom-nav {
                backdrop-filter: blur(24px) saturate(1.6);
                -webkit-backdrop-filter: blur(24px) saturate(1.6);
                background: rgba(255,255,255,0.88);
            }
        }
        
        /* Extra small screens */
        @media (max-width: 380px) {
            .bottom-nav-item { min-width: 42px; padding: 2px 4px; }
            .bottom-nav-item i { font-size: 1rem; }
            .bottom-nav-item span { font-size: 0.5rem; letter-spacing: 0; }
            .card-header { flex-direction: column; gap: 0.4rem; }
            .search-box { width: 100%; }
            .stat-card { padding: 0.625rem; }
            .stat-icon.green, .stat-icon.blue, .stat-icon.yellow, .stat-icon.red,
            .stat-icon.emerald, .stat-icon.amber { width: 34px; height: 34px; font-size: 1rem; margin-bottom: 0.4rem; }
            .stat-value { font-size: 0.875rem !important; }
            .stat-label { font-size: 0.6rem; }
            .badge { font-size: 0.6rem; padding: 0.15rem 0.35rem; }
        }
        
        /* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
           PRINT STYLES
           ═══════════════════════════════════════════════════════════════ */
        
        @media print {
            .sidebar, .topbar, .modal-footer, .pagination { display: none !important; }
            .main-content { margin: 0 !important; }
            .card { box-shadow: none; border: 1px solid #ddd; }
        }

/* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS - Consolidated
   ═══════════════════════════════════════════════════════════════ */

/* Better touch targets & spacing for phones */
@media (max-width: 640px) {
    .page-content {
        padding: 0.5rem;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 0.75rem);
    }
    .section-header {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .section-header h1 {
        font-size: 1.1rem;
    }
    
    /* Stat cards - tighter and more readable */
    .stat-card {
        padding: 0.75rem;
    }
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.15rem;
        margin-bottom: 0.35rem;
    }
    .stat-value {
        font-size: 1.25rem;
    }
    .stat-label {
        font-size: 0.68rem;
    }
    .stats-grid {
        gap: 0.5rem;
    }
    
    /* Cards - tighter */
    .card {
        border-radius: 10px;
    }
    .card-header {
        padding: 0.625rem 0.75rem;
    }
    .card-body {
        padding: 0.625rem 0.75rem;
    }
    .card-title {
        font-size: 0.95rem;
    }

    /* List items - flat style on mobile */
    .beneficiaire-item,
    .facture-item,
    .fact-recent-item,
    .medicament-item,
    .bordereau-item {
        padding: 0.75rem 1rem;
        border-radius: 0;
        border-bottom: 1px solid #f1f5f9;
        box-shadow: none;
        margin-bottom: 0;
    }
    .beneficiaire-item:last-child,
    .facture-item:last-child,
    .fact-recent-item:last-child,
    .medicament-item:last-child,
    .bordereau-item:last-child {
        border-bottom: none;
    }
    .beneficiaire-item:active,
    .facture-item:active,
    .fact-recent-item:active,
    .medicament-item:active,
    .bordereau-item:active {
        background: #f1f5f9;
        transform: none;
        box-shadow: none;
    }
    
    .item-header {
        gap: 0.375rem;
        margin-bottom: 0.25rem;
    }
    .item-info {
        gap: 0.25rem;
    }
    .item-badges {
        gap: 0.2rem;
    }
    
    /* Better text sizes on mobile */
    .item-primary {
        font-size: 0.85rem;
    }
    .item-secondary {
        font-size: 0.75rem;
    }
    
    /* Bottom nav refinement */
    .mobile-bottom-nav {
        padding: 0 calc(0.375rem + var(--safe-right)) calc(var(--safe-bottom)) calc(0.375rem + var(--safe-left));
    }
    .bottom-nav-inner {
        height: 56px;
    }
    .bottom-nav-item {
        min-width: 44px;
        min-height: 40px;
        padding: 2px 6px;
    }
    .bottom-nav-item i {
        font-size: 1.3rem;
    }
    .bottom-nav-item span {
        font-size: 0.65rem;
    }
    
    /* Full-width buttons easier to tap */
    .btn-mobile-full {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    
    /* Pagination touch-friendly */
    .page-btn {
        min-width: 40px;
        height: 40px;
    }
    
    /* Search */
    .search-box input {
        height: 40px;
        font-size: 0.9rem;
    }
}

@media (max-width: 500px) {
    .page-content {
        padding: 0.375rem;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 0.75rem);
    }
    .stat-card {
        padding: 0.625rem;
    }
    .stat-value {
        font-size: 1.15rem;
    }
    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .bottom-nav-inner {
        height: 50px;
    }
    .bottom-nav-item i {
        font-size: 1.15rem;
    }
    .bottom-nav-item span {
        font-size: 0.6rem;
    }
    .card-header {
        padding: 0.5rem 0.625rem;
    }
    .card-body {
        padding: 0.5rem 0.625rem;
    }
    .beneficiaire-item,
    .facture-item,
    .fact-recent-item,
    .medicament-item,
    .bordereau-item {
        padding: 0.5rem 0.625rem;
    }
}

/* Bottom sheet modals - refined */
@media (max-width: 520px) {
    .modal-box {
        padding-top: 10px;
        max-height: 90vh;
    }
    .modal-body {
        padding: 0.75rem;
        max-height: calc(90vh - 110px);
    }
    .modal-header {
        padding: 0.625rem 0.75rem;
    }
    .facture-header, .bordereau-header, .beneficiaire-header, .medicament-header {
        padding: 0.625rem 0.75rem;
        margin: -0.75rem -0.75rem 0.375rem -0.75rem;
        gap: 0.5rem;
    }
    .facture-icon, .bordereau-icon, .beneficiaire-icon, .medicament-icon {
        font-size: 1.75rem;
    }
    .facture-header .facture-value,
    .bordereau-header .bordereau-value,
    .beneficiaire-header .beneficiaire-value,
    .medicament-header .medicament-value {
        font-size: 1rem;
    }
}

/* Desktop sidebar refinements */
@media (min-width: 1025px) {
    .sidebar {
        width: 280px;
    }
    .main-content {
        margin-left: 280px;
    }
}

/* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS - Clean, organized overrides
   ═══════════════════════════════════════════════════════════════ */

/* Up to 380px - Very small phones */
@media (max-width: 380px) {
    .stat-card { padding: 0.75rem; }
    .stat-card .stat-value { font-size: 1.15rem; }
    .stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
    .page-title { font-size: 1.1rem; }
    .list-item { padding: 0.625rem 0.75rem; }
    .bottom-nav-item { min-width: 48px; }
    .bottom-nav-item i { font-size: 1.15rem; }
    .bottom-nav-item span { font-size: 0.6rem; }
    .table-mobile .item-info { gap: 0.25rem; }
    .badge { font-size: 0.6rem; padding: 0.15rem 0.35rem; }
    .pagination-btn { width: 38px; height: 38px; font-size: 0.8rem; }
}

/* 381px to 520px - Small phones (main mobile target) */
@media (min-width: 381px) and (max-width: 520px) {
    .stat-card { padding: 0.875rem; }
    .stat-card .stat-value { font-size: 1.25rem; }
    .stat-card .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .page-title { font-size: 1.15rem; }
    .list-item { padding: 0.75rem 0.875rem; border-radius: 10px; }
    .bottom-nav-item { min-width: 52px; }
    .bottom-nav-item i { font-size: 1.25rem; }
    .bottom-nav-item span { font-size: 0.62rem; }
    .pagination-btn { width: 42px; height: 42px; font-size: 0.85rem; }
    .search-box { height: 42px; font-size: 0.85rem; }
    .btn { height: 42px; font-size: 0.85rem; }
}

/* 521px to 767px - Large phones / small tablets */
@media (min-width: 521px) and (max-width: 767px) {
    .stat-card { padding: 1rem; }
    .stat-card .stat-value { font-size: 1.35rem; }
    .stat-card .stat-icon { width: 44px; height: 44px; font-size: 1.2rem; }
    .page-title { font-size: 1.25rem; }
    .list-item { padding: 0.875rem 1rem; border-radius: 12px; }
    .bottom-nav-item { min-width: 56px; }
    .bottom-nav-item i { font-size: 1.35rem; }
    .bottom-nav-item span { font-size: 0.65rem; }
    .pagination-btn { width: 44px; height: 44px; font-size: 0.9rem; }
    .search-box { height: 44px; font-size: 0.9rem; }
    .btn { height: 44px; font-size: 0.9rem; }
}

/* Mobile bottom nav - unified clean style */
@media (max-width: 767px) {
    .bottom-nav {
        height: 56px;
        background: #ffffff;
        border-top: 1px solid #f1f5f9;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
        padding-bottom: var(--safe-bottom, 0px);
    }
    .bottom-nav-item {
        min-height: 48px;
        gap: 2px;
        color: #94a3b8;
        transition: color 0.15s ease;
    }
    .bottom-nav-item.active {
        color: var(--color-primary);
    }
    .bottom-nav-item i {
        font-size: 1.35rem;
        transition: transform 0.15s ease;
    }
    .bottom-nav-item.active i {
        transform: scale(1.1);
    }
    .bottom-nav-item span {
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* Page content padding for bottom nav */
    .page-content {
        padding-bottom: calc(56px + var(--safe-bottom, 0px) + 1rem);
    }

    /* Better top bar for mobile */
    .topbar {
        min-height: 52px;
        padding: 0.5rem 0.75rem;
        background: #ffffff;
        border-bottom: 1px solid #f1f5f9;
    }

    /* Cards cleaner mobile */
    .card {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        border: 1px solid #f1f5f9;
    }

    /* Stats row - better spacing */
    .stats-row {
        gap: 0.625rem;
    }

    /* List items cleaner */
    .list-item {
        background: #ffffff;
        border: 1px solid #f1f5f9;
        border-radius: 10px;
        margin-bottom: 0.375rem;
        transition: none;
    }

    /* Modals - bottom sheet style on mobile */
    .modal-dialog {
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        overflow-y: auto;
    }
    .modal-content {
        border: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }
    .modal-header {
        border-radius: 16px 16px 0 0;
        padding: 0.75rem 1rem;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-backdrop {
        background: rgba(0,0,0,0.4);
    }

    /* Search box cleaner */
    .search-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0 0.875rem;
    }
    .search-box:focus {
        background: #ffffff;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(5,150,105,0.1);
    }

    /* Pagination cleaner */
    .pagination-btn {
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #475569;
        font-weight: 500;
    }
    .pagination-btn.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #ffffff;
    }

    /* Table mobile items */
    .table-mobile .item-row {
        background: #ffffff;
        border: 1px solid #f1f5f9;
        border-radius: 10px;
        padding: 0.75rem;
        margin-bottom: 0.375rem;
    }
    .table-mobile .item-header {
        font-size: 0.8rem;
        color: #64748b;
    }
    .table-mobile .item-value {
        font-size: 0.9rem;
        color: #1e293b;
    }
    .table-mobile .item-badges {
        gap: 0.25rem;
    }
}

/* On mobile, allow sticky headers to work inside cards */
@media (max-width: 767px) {
    .card {
        overflow: visible;
    }
}
@media (hover: none) and (pointer: coarse) {
    .btn, 
    .bottom-nav-item,
    .list-item,
    .pagination-btn,
    .nav-item {
        cursor: default;
        -webkit-tap-highlight-color: transparent;
    }
    .btn:active,
    .list-item:active {
        transform: scale(0.98);
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* Better page padding for mobile */
@media (max-width: 640px) {
    .page-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* iOS PWA safe area fix for bottom nav */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        .bottom-nav {
            padding-bottom: env(safe-area-inset-bottom, 0px);
            height: calc(56px + env(safe-area-inset-bottom, 0px));
        }
    }
}
    

/* ═══════════════════════════════════════════════════════════════
/* BORDEREAUX — Paiement Status (Mobile)
/* ═══════════════════════════════════════════════════════════════
.bordereau-item-paiement {
    padding: 0 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.bordereau-item-paiement.paye {
    color: var(--success, #10b981);
}
.bordereau-item-paiement.non-paye {
    color: var(--danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════