@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================
   ✅ ROOT THEME - Health Premium Professional
   Version 2.0 - Design System
========================================================== */
:root {
    /* ===== Color Palette ===== */
    /* Backgrounds */
    --bg-page: #f3f6fa;
    --bg-surface: #ffffff;
    --bg-soft: #f8fafc;
    --bg-muted: #f1f5f9;
    --bg-panel: #0a1e36;
    --bg-dark: #06142a;

    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --text-inverse: #ffffff;

    /* Primary - CNAM Blue */
    --primary: #2AACE2;
    --primary-hover: #1a8fc0;
    --primary-dark: #0d6f99;
    --primary-light: rgba(42, 172, 226, 0.08);

    /* Secondary - CNAM Green */
    --green: #3AAA35;
    --green-hover: #2d8a29;
    --green-dark: #1e6b1b;
    --green-light: rgba(58, 170, 53, 0.08);

    /* Accent - CNAM Orange */
    --orange: #E88B2D;
    --orange-hover: #d07520;
    --orange-light: rgba(232, 139, 45, 0.08);

    /* Aliases (compat) */
    --teal: #2AACE2;
    --teal-hover: #1a8fc0;
    --teal-light: rgba(42, 172, 226, 0.08);
    --cyan: #2AACE2;
    --cyan-light: rgba(42, 172, 226, 0.08);

    /* Status Colors */
    --success: #3AAA35;
    --success-bg: rgba(58, 170, 53, 0.08);
    --success-border: rgba(58, 170, 53, 0.25);
    --warning: #E88B2D;
    --warning-bg: rgba(232, 139, 45, 0.08);
    --warning-border: rgba(232, 139, 45, 0.25);
    --danger: #dc3545;
    --danger-bg: rgba(220, 53, 69, 0.08);
    --danger-border: rgba(220, 53, 69, 0.25);
    --info: #2AACE2;
    --info-bg: rgba(42, 172, 226, 0.08);
    --info-border: rgba(42, 172, 226, 0.25);

    /* Borders / Shadows */
    --border-light: rgba(15, 23, 42, 0.06);
    --border: rgba(15, 23, 42, 0.1);
    --border-strong: rgba(15, 23, 42, 0.18);
    --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.12);

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ===== Navbar Palette ===== */
    --nav-bg-1: #0a1e36;
    --nav-bg-2: #0f2d4a;
    --nav-text: rgba(255, 255, 255, 0.92);
    --nav-muted: rgba(255, 255, 255, 0.6);
    --nav-hover-bg: rgba(42, 172, 226, 0.12);
    --nav-active-bg: rgba(42, 172, 226, 0.18);
    --nav-active-border: rgba(42, 172, 226, 0.5);
    --nav-glow: 0 10px 28px rgba(42, 172, 226, 0.12);

    /* ===== Buttons / Inputs ===== */
    --btn-glow: 0 8px 24px rgba(42, 172, 226, 0.18);
    --input-bg: #ffffff;
    --input-border: rgba(15, 23, 42, 0.16);
    --input-focus-border: var(--primary);
    --input-focus-ring: rgba(29, 78, 216, 0.15);
    --input-disabled-bg: #f8fafc;
    --input-disabled-border: #e2e8f0;
    --input-disabled-text: #94a3b8;

    /* ===== Transitions ===== */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== Z-Index Scale ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== Brand Colors ===== */
:root {
    --brand-sky: #0ea5e9;
    --brand-blue: #2563eb;
    --brand-teal: #14b8a6;
    --brand-emerald: #10b981;
    --brand-green: #22c55e;
    --brand-lime: #84cc16;
    --brand-amber: #f59e0b;
    --brand-orange: #f97316;
    --brand-rose: #fb7185;
    --brand-red: #ef4444;
    --brand-violet: #2AACE2;
    --brand-purple: #1a8fc0;
    --brand-cyan: #06b6d4;
    --brand-indigo: #6366f1;
    --brand-slate: #64748b;
}

/* ==========================================================
   ✅ CSS RESET & BASE
========================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 0.5em;
}

h1 {
    font-size: 2rem;
    font-weight: 800;
}

h2 {
    font-size: 1.625rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

p {
    margin: 0 0 1em;
    color: var(--text-secondary);
}

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

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

/* ===== Selection ===== */
::selection {
    background: rgba(29, 78, 216, 0.2);
    color: var(--text-primary);
}

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

::-webkit-scrollbar-track {
    background: var(--bg-muted);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    transition: background var(--transition);
}

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

/* ==========================================================
   ✅ LAYOUT
========================================================== */
.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

#div_main_page {
    background: transparent;
    padding: 16px;
    margin-top: 60px;
    padding-bottom: 44px;
    min-height: calc(100vh - 60px);
}

/* ==========================================================
   ✅ NAVBAR - Professional Navigation
   Version 2.0 - Fluide & Stable
   Compatible Bootstrap 5.x
========================================================== */

/* ===== Navbar Base ===== */
.navbar.bg-blue {
    background: linear-gradient(135deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 100%);
    min-height: 60px;
    padding: 0.5rem 1.25rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-fixed);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ===== Brand / Logo ===== */
.navbar.bg-blue .navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.3px;
    color: #fff;
    padding: 0.5rem 0;
    transition: opacity 0.2s ease;
}

.navbar.bg-blue .navbar-brand:hover {
    opacity: 0.9;
    color: #fff;
}

.navbar.bg-blue .navbar-brand i {
    font-style: italic;
}

/* ===== Navigation Links ===== */
.navbar.bg-blue .navbar-nav {
    gap: 4px;
}

.navbar.bg-blue .navbar-nav .nav-item {
    position: relative;
}

.navbar.bg-blue .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar.bg-blue .navbar-nav .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar.bg-blue .navbar-nav .nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Active Link - Couleur dynamique via variable CSS */
.navbar.bg-blue .navbar-nav .nav-link.active,
.navbar.bg-blue .navbar-nav .nav-link.text-warning,
.navbar.bg-blue .navbar-nav .nav-link.nav-link-active {
    --active-color: #fbbf24; /* Fallback */
    color: var(--active-color) !important;
    background-color: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

/* Active Indicator - Barre sous le lien */
.navbar.bg-blue .navbar-nav .nav-link.active::after,
.navbar.bg-blue .navbar-nav .nav-link.text-warning::after,
.navbar.bg-blue .navbar-nav .nav-link.nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 60px;
    height: 3px;
    background: var(--active-color, #fbbf24);
    border-radius: 3px 3px 0 0;
}

/* Nav Link Icons */
.navbar.bg-blue .navbar-nav .nav-link i {
    font-size: 1.05rem;
    opacity: 0.9;
}

/* ===== User Button ===== */
.navbar.bg-blue .btn-group .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.navbar.bg-blue .btn-group .btn-danger:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
}

.navbar.bg-blue .btn-group .btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.navbar.bg-blue .btn-group .btn-danger i {
    font-size: 1.1rem;
    color: #fff;
}

/* User Menu Button - Couleur dynamique de l'environnement */
.navbar.bg-blue .btn-group .btn-user-menu {
    --user-btn-color: #dc2626; /* Fallback */
    background: var(--user-btn-color);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.navbar.bg-blue .btn-group .btn-user-menu:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.navbar.bg-blue .btn-group .btn-user-menu:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    outline: none;
}

.navbar.bg-blue .btn-group .btn-user-menu i {
    font-size: 1.1rem;
    color: #fff;
}

/* ===== Dropdown Menu ===== */
/* ===== Navbar Dropdown Menu ===== */
.navbar.bg-blue .dropdown-menu {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 8px;
    min-width: 240px;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar.bg-blue .dropdown-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Dropdown Header (User Info) */
.navbar.bg-blue .dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-muted));
    border-radius: var(--radius-sm);
    border: none;
}

.navbar.bg-blue .dropdown-header img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar.bg-blue .dropdown-header .user-info {
    flex: 1;
    min-width: 0;
}

.navbar.bg-blue .dropdown-header .user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.navbar.bg-blue .dropdown-header .user-role {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Dropdown Items */
.navbar.bg-blue .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.navbar.bg-blue .dropdown-item:hover {
    background-color: var(--bg-soft);
    color: var(--text-primary);
}

.navbar.bg-blue .dropdown-item:active {
    background-color: var(--bg-muted);
}

.navbar.bg-blue .dropdown-item i {
    font-size: 1.1rem;
    color: var(--text-muted);
    width: 22px;
    text-align: center;
    transition: color 0.15s ease;
}

.navbar.bg-blue .dropdown-item:hover i {
    color: var(--primary);
}

.navbar.bg-blue .dropdown-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

/* Dropdown Item Variants */
.navbar.bg-blue .dropdown-item.text-danger {
    color: var(--danger);
}

.navbar.bg-blue .dropdown-item.text-danger:hover {
    background-color: var(--danger-bg);
    color: var(--danger);
}

.navbar.bg-blue .dropdown-item.text-danger i {
    color: var(--danger);
}

.navbar.bg-blue .dropdown-item.text-success:hover {
    background-color: var(--success-bg);
}

.navbar.bg-blue .dropdown-item.text-success:hover i {
    color: var(--success);
}

/* Dropdown Divider */
.navbar.bg-blue .dropdown-divider {
    margin: 6px 8px;
    border: none;
    height: 1px;
    background: var(--border-light);
}

/* Dropdown Section Label */
.navbar.bg-blue .dropdown-menu .dropdown-label {
    display: block;
    padding: 8px 12px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
}

/* ===== Mobile Toggler ===== */
.navbar.bg-blue .navbar-toggler {
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.navbar.bg-blue .navbar-toggler:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar.bg-blue .navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    outline: none;
}

.navbar.bg-blue .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 22px;
    height: 22px;
}

/* ===== Mobile Menu ===== */
@media (max-width: 991.98px) {
    .navbar.bg-blue {
        padding: 0.5rem 1rem;
    }

    .navbar.bg-blue .navbar-collapse {
        background: rgba(11, 31, 51, 0.95);
        border-radius: var(--radius-sm);
        margin-top: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .navbar.bg-blue .navbar-nav {
        gap: 2px;
    }

    .navbar.bg-blue .navbar-nav .nav-link {
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        justify-content: flex-start;
    }

    .navbar.bg-blue .navbar-nav .nav-link.active::after,
    .navbar.bg-blue .navbar-nav .nav-link.text-warning::after,
    .navbar.bg-blue .navbar-nav .nav-link.nav-link-active::after {
        display: none;
    }

    .navbar.bg-blue .navbar-nav .nav-link.active,
    .navbar.bg-blue .navbar-nav .nav-link.text-warning,
    .navbar.bg-blue .navbar-nav .nav-link.nav-link-active {
        background-color: rgba(251, 191, 36, 0.15); /* Fallback */
    }

    @supports (background-color: color-mix(in srgb, red 50%, transparent)) {
        .navbar.bg-blue .navbar-nav .nav-link.active,
        .navbar.bg-blue .navbar-nav .nav-link.text-warning,
        .navbar.bg-blue .navbar-nav .nav-link.nav-link-active {
            background-color: color-mix(in srgb, var(--active-color, #fbbf24) 15%, transparent);
        }
    }

    .navbar.bg-blue .d-flex {
        justify-content: center;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar.bg-blue .dropdown-menu {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        margin-top: 8px;
        padding: 8px;
        border-radius: var(--radius-sm);
    }

    .navbar.bg-blue .dropdown-header {
        margin-bottom: 4px;
    }
}

/* ===== Notification Badge ===== */
.navbar.bg-blue .nav-link .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===== Navbar Variants ===== */

/* Light Blue Theme */
.navbar.bg-blue.navbar-light-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Dark Theme */
.navbar.bg-blue.navbar-dark-mode {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Teal Theme */
.navbar.bg-blue.navbar-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* ===== Small Screens ===== */
@media (max-width: 575.98px) {
    .navbar.bg-blue .navbar-brand {
        font-size: 1.05rem;
    }

    .navbar.bg-blue .btn-group .btn-danger,
    .navbar.bg-blue .btn-group .btn-user-menu {
        width: 36px;
        height: 36px;
    }

    .navbar.bg-blue .btn-group .btn-danger i,
    .navbar.bg-blue .btn-group .btn-user-menu i {
        font-size: 1rem;
    }

    .navbar.bg-blue .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        transform-origin: bottom center;
    }

    .navbar.bg-blue .dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .navbar.bg-blue .dropdown-header {
        padding: 14px;
    }

    .navbar.bg-blue .dropdown-item {
        padding: 14px 12px;
        font-size: 0.95rem;
    }

    .navbar.bg-blue .dropdown-item i {
        font-size: 1.2rem;
        width: 26px;
    }
}

/* ===== Print ===== */
@media print {
    .navbar.bg-blue {
        display: none !important;
    }
}

/* ==========================================================
   ✅ CARDS - Professional Design
========================================================== */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

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

.card-header {
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-surface) 100%);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.card-header h5,
.card-header .card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 16px 20px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Card Variants */
.card-elevated {
    border: none;
    box-shadow: var(--shadow-md);
}

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

.card-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================
   ✅ BUTTONS - Premium Style
========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.btn:focus {
    outline: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button */
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, #1e3a8a 100%);
    box-shadow: 0 6px 20px rgba(29, 78, 216, 0.35);
    transform: translateY(-1px);
}

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

/* Success Button */
.btn-success {
    color: #fff;
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    border-color: var(--success);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

/* Danger Button */
.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    border-color: var(--danger);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

/* Warning Button */
.btn-warning {
    color: #fff;
    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
    border-color: var(--warning);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--primary);
    background: transparent;
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    background: transparent;
    border-color: var(--border-strong);
}

.btn-outline-secondary:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
    border-color: var(--text-muted);
}

/* Ghost Button */
.btn-ghost {
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
}

/* Icon Button */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
}

/* Pill Button */
.btn-pill {
    border-radius: var(--radius-full);
    padding: 10px 24px;
}

/* Button Sizes */
.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
}

/* Premium Gradient Button */
.btn-gradient {
    color: #fff;
    background: linear-gradient(135deg, var(--teal) 0%, var(--cyan) 50%, var(--primary) 100%);
    border: none;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.3);
}

.btn-gradient:hover {
    box-shadow: 0 8px 28px rgba(20, 184, 166, 0.4);
    transform: translateY(-2px);
}

/* Dark Button (Menu Style) */
.btn-dark {
    color: #fff;
    background: linear-gradient(145deg, var(--nav-bg-1), var(--nav-bg-2));
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: var(--btn-glow);
}

.btn-dark:hover {
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 10px 32px rgba(56, 189, 248, 0.25);
    transform: translateY(-1px);
}

/* ==========================================================
   ✅ FORM CONTROLS - Modern Style
========================================================== */
.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

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

.form-control:hover {
    border-color: var(--border-strong);
}

.form-control:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-ring);
    background: #fff;
}

.form-control:disabled {
    background: var(--input-disabled-bg);
    border-color: var(--input-disabled-border);
    color: var(--input-disabled-text);
    cursor: not-allowed;
}

/* Select - Base (chevron défini plus bas) */
.form-select {
    display: block;
    width: 100%;
    padding: 12px 40px 12px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--input-bg);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-select:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-ring);
}

/* Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Input Group */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-radius: var(--radius) 0 0 var(--radius-sm);
}

.input-group .form-control:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1.5px solid var(--input-border);
}

/* Form Validation States */
.is-valid {
    border-color: var(--success) !important;
}

.is-valid:focus {
    box-shadow: 0 0 0 4px var(--success-bg) !important;
}

.is-invalid {
    border-color: var(--danger) !important;
    animation: shake 0.4s ease;
}

.is-invalid:focus {
    box-shadow: 0 0 0 4px var(--danger-bg) !important;
}

.invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--danger);
}

.valid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--success);
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-5px);
    }
    40%, 80% {
        transform: translateX(5px);
    }
}

/* Checkbox & Radio - Custom */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    background-color: var(--input-bg);
    border: 2px solid var(--border-strong);
    border-radius: 6px;
    appearance: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.5' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--input-focus-ring);
}

.form-check-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

/* Switch */
.form-switch .form-check-input {
    width: 44px;
    height: 24px;
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
    background-position: left center;
    background-size: contain;
    transition: background-position var(--transition);
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ==========================================================
   ✅ TABLES - Professional Design
========================================================== */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0;
}

.table th,
.table td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-light);
}

.table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: var(--bg-soft);
    border-bottom: 2px solid var(--border);
    padding: 10px 14px;
}

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

.table tbody tr:hover {
    background: var(--bg-soft);
}

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

/* Table compacte */
.table-sm th,
.table-sm td {
    padding: 6px 10px !important;
}

.table-sm thead th {
    padding: 8px 10px !important;
    font-size: 0.7rem !important;
}

/* Table Card */
.table-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-card .table {
    margin-bottom: 0;
}

.table-card .table thead th:first-child {
    border-radius: var(--radius-sm) 0 0 0;
}

.table-card .table thead th:last-child {
    border-radius: 0 var(--radius-sm) 0 0;
}

/* Table Striped */
.table-striped tbody tr:nth-of-type(odd) {
    background: var(--bg-soft);
}

.table-striped tbody tr:nth-of-type(odd):hover {
    background: var(--bg-muted);
}

/* ==========================================================
   ✅ BADGES - Modern Style
========================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

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

.badge-success {
    color: #059669;
    background: var(--success-bg);
}

.badge-warning {
    color: #b45309;
    background: var(--warning-bg);
}

.badge-danger {
    color: #dc2626;
    background: var(--danger-bg);
}

.badge-info {
    color: #0284c7;
    background: var(--info-bg);
}

.badge-secondary {
    color: var(--text-secondary);
    background: var(--bg-muted);
}

/* Badge Pill */
.badge-pill {
    border-radius: var(--radius-full);
    padding: 5px 12px;
}

/* Badge Dot */
.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ==========================================================
   ✅ ALERTS - Professional Style
========================================================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin-bottom: 1rem;
}

.alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.alert-message {
    font-size: 0.9rem;
    opacity: 0.9;
}

.alert-success {
    color: #065f46;
    background: var(--success-bg);
    border-color: var(--success-border);
}

.alert-success .alert-icon {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.alert-danger {
    color: #991b1b;
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.alert-danger .alert-icon {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.alert-warning {
    color: #92400e;
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.alert-warning .alert-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.alert-info {
    color: #1e40af;
    background: var(--info-bg);
    border-color: var(--info-border);
}

.alert-info .alert-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--info);
}

/* ==========================================================
   ✅ MODAL - Base styles (voir section MODALS pour styles complets)
========================================================== */
/* Les styles principaux des modals sont définis dans la section MODALS */

.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/12px no-repeat;
    border: none;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.btn-close:hover {
    opacity: 1;
    background-color: var(--bg-muted);
}

/* ==========================================================
   ✅ ENV FORM - Premium Design
========================================================== */
.env-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #f0f6fc 0%, #e3eef8 40%, #f5f0eb 100%);
}

/* ===== Container centré ===== */
.env-login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
}

/* Background Circles */
.env-bg-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.env-bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.env-bg-circle-1 {
    width: 500px;
    height: 500px;
    background: rgba(42, 172, 226, 0.12);
    top: -200px;
    right: -150px;
    animation: floatSlow 12s ease-in-out infinite;
}

.env-bg-circle-2 {
    width: 400px;
    height: 400px;
    background: rgba(42, 172, 226, 0.08);
    bottom: -150px;
    left: -100px;
    animation: floatSlow 15s ease-in-out infinite reverse;
}

.env-bg-circle-3 {
    width: 300px;
    height: 300px;
    background: rgba(232, 139, 45, 0.06);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulseSlow 8s ease-in-out infinite;
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-40px) rotate(3deg);
    }
}

@keyframes pulseSlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0.3;
    }
}

/* Logo */
.env-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 28px 24px;
}

.env-logo {
    max-width: 180px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* ===== Card principale ===== */
.env-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(160deg, #0a1e36, #0f2d4a, #143a5c);
    border: 1px solid rgba(42, 172, 226, 0.1);
    box-shadow: 0 24px 64px rgba(10, 30, 54, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.env-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% 10%, rgba(42, 172, 226, 0.06), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(232, 139, 45, 0.03), transparent 40%);
    z-index: 0;
}

.env-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -30%;
    width: 180%;
    height: 180%;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 50%);
    transform: rotate(10deg);
    z-index: 0;
}

/* Card spécifique connexion */
.env-card#div_connexion {
    position: relative;
    z-index: 10;
    padding: 0 !important;
}

/* Form */
.env-form {
    position: relative;
    z-index: 1;
}

/* Header */
.env-header {
    text-align: center;
    padding: 32px 28px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.env-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(42, 172, 226, 0.15), rgba(42, 172, 226, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.env-icon-wrapper i {
    font-size: 30px;
    background: linear-gradient(145deg, #2AACE2, #E88B2D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.env-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.env-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

/* Alert */
.env-alert {
    margin: 18px 24px 0;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.3s ease;
}

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

.env-alert.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.env-alert.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.env-alert.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* Fields */
.env-fields {
    padding: 28px 28px 20px;
}

.env-field-group {
    margin-bottom: 22px;
}

.env-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.env-label i {
    font-size: 1rem;
    color: #E88B2D;
}

/* Input */
.env-input-wrapper {
    position: relative;
}

.env-input {
    width: 100%;
    height: 52px;
    padding: 0 48px 0 18px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    transition: all var(--transition);
}

.env-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.env-input:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
}

.env-input:focus {
    outline: none;
    border-color: #2AACE2;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(42, 172, 226, 0.12);
}

.env-input.is-invalid {
    border-color: rgba(239, 68, 68, 0.6);
    animation: shake 0.4s ease;
}

.env-input-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
    pointer-events: none;
}

.env-field-hint {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.env-field-error {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f87171;
}

/* Select */
.env-select-wrapper {
    position: relative;
}

.env-select {
    width: 100%;
    height: 52px;
    padding: 0 44px 0 18px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    transition: all var(--transition);
}

.env-select:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.env-select:focus {
    outline: none;
    border-color: #2AACE2;
    box-shadow: 0 0 0 4px rgba(42, 172, 226, 0.12);
}

.env-select option {
    background: var(--nav-bg-1);
    color: #fff;
    padding: 12px;
}

.env-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    transition: transform var(--transition);
}

.env-select:focus + .env-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Color Indicator */
.env-color-indicator {
    margin-top: 10px;
}

.env-color-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 0.85rem;
    font-weight: 600;
    animation: slideDown 0.3s ease;
}

/* Actions */
.env-actions {
    padding: 8px 28px 28px;
}

.env-submit-btn {
    position: relative;
    width: 100%;
    height: 54px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1a8fc0 0%, #2AACE2 50%, #4dc4f0 100%);
    box-shadow: 0 8px 24px rgba(42, 172, 226, 0.3);
    transition: all var(--transition);
    overflow: hidden;
}

.env-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 50%);
    pointer-events: none;
}

.env-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(42, 172, 226, 0.4);
}

.env-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.env-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.env-btn-content,
.env-btn-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Spinner */
.env-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===== Bouton Retour ===== */
.env-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 12px;
    padding: 0 20px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.env-back-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.env-back-btn:focus {
    outline: none;
    border-color: #2AACE2;
    box-shadow: 0 0 0 3px rgba(42, 172, 226, 0.15);
}

.env-back-btn i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.env-back-btn:hover i {
    transform: translateX(-3px);
}

/* Footer */
.env-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    font-weight: 500;
}

.env-page-footer {
    text-align: center;
    margin-top: 28px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ==========================================================
   ✅ USER FORM SPECIFIC STYLES
========================================================== */
.user-icon {
    background: linear-gradient(145deg, rgba(42, 172, 226, 0.15), rgba(42, 172, 226, 0.08)) !important;
}

.user-icon i {
    background: linear-gradient(145deg, #2AACE2, #1a8fc0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.user-btn {
    background: linear-gradient(135deg, #1a8fc0 0%, #2AACE2 50%, #4dc4f0 100%) !important;
    box-shadow: 0 8px 24px rgba(42, 172, 226, 0.3) !important;
}

.user-btn:hover:not(:disabled) {
    box-shadow: 0 12px 32px rgba(42, 172, 226, 0.4) !important;
}

/* ===== Login Button (Bleu) ===== */
.login-btn {
    background: linear-gradient(135deg, #1a8fc0 0%, #2AACE2 50%, #4dc4f0 100%) !important;
    box-shadow: 0 8px 24px rgba(42, 172, 226, 0.3) !important;
}

.login-btn:hover:not(:disabled) {
    box-shadow: 0 12px 32px rgba(42, 172, 226, 0.4) !important;
}

/* ===== Login Icon ===== */
.login-icon {
    background: linear-gradient(145deg, rgba(42, 172, 226, 0.2), rgba(42, 172, 226, 0.1)) !important;
}

.login-icon i {
    background: linear-gradient(145deg, #2AACE2, #4dc4f0) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== Email Button (Orange CNAM) ===== */
.email-btn {
    background: linear-gradient(135deg, #d07520 0%, #E88B2D 50%, #f0a04b 100%) !important;
    box-shadow: 0 8px 24px rgba(232, 139, 45, 0.3) !important;
}

.email-btn:hover:not(:disabled) {
    box-shadow: 0 12px 32px rgba(232, 139, 45, 0.4) !important;
}

/* ===== Email Icon ===== */
.email-icon {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.25), rgba(251, 146, 60, 0.2)) !important;
}

.email-icon i {
    background: linear-gradient(145deg, #f59e0b, #fb923c) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== Password Button (Vert) ===== */
.password-btn {
    background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #059669 100%) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}

.password-btn:hover:not(:disabled) {
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4) !important;
}

/* ===== Password Icon ===== */
.password-icon {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.25), rgba(52, 211, 153, 0.2)) !important;
}

.password-icon i {
    background: linear-gradient(145deg, #10b981, #34d399) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== Toggle Password ===== */
.env-toggle-password {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto !important;
}

.env-toggle-password:hover {
    color: #38bdf8;
}

/* ===== Login Options ===== */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
}

.login-remember:hover {
    color: rgba(255, 255, 255, 0.9);
}

.login-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.login-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.login-checkbox:checked + .login-checkmark {
    background: linear-gradient(135deg, #14b8a6, #38bdf8);
    border-color: #38bdf8;
}

.login-checkbox:checked + .login-checkmark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.login-forgot {
    color: #38bdf8;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.login-forgot:hover {
    color: #fff;
    text-decoration: underline;
}

/* ===== Email Info Box ===== */
.email-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
}

.email-info-box i {
    font-size: 1.2rem;
    color: #38bdf8;
    flex-shrink: 0;
    margin-top: 2px;
}

.email-info-box p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Field Row */
.env-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 576px) {
    .env-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* User Preview */
.user-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-top: 8px;
    border-radius: var(--radius-sm);
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.2);
    animation: slideDown 0.3s ease;
}

.user-preview-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.25), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.user-preview-avatar i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.85);
}

.user-preview-info {
    flex: 1;
    min-width: 0;
}

.user-preview-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-preview-email {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* ==========================================================
   ✅ UTILITIES
========================================================== */
/* Text Colors */
.text-primary {
    color: var(--primary) !important;
}

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

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

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

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

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

/* Background Colors */
.bg-primary {
    background-color: var(--primary) !important;
}

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

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

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

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

/* Font Weights */
.fw-medium {
    font-weight: 500 !important;
}

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

.fw-bold {
    font-weight: 700 !important;
}

.fw-extrabold {
    font-weight: 800 !important;
}

/* Spacing */
.gap-1 {
    gap: 4px !important;
}

.gap-2 {
    gap: 8px !important;
}

.gap-3 {
    gap: 12px !important;
}

.gap-4 {
    gap: 16px !important;
}

.gap-5 {
    gap: 24px !important;
}

/* Border Radius */
.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded {
    border-radius: var(--radius-sm) !important;
}

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

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

.rounded-full {
    border-radius: var(--radius-full) !important;
}

/* Shadows */
.shadow-none {
    box-shadow: none !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

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

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

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Transitions */
.transition {
    transition: all var(--transition) !important;
}

.transition-fast {
    transition: all var(--transition-fast) !important;
}

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

.cursor-not-allowed {
    cursor: not-allowed !important;
}

/* ==========================================================
   ✅ LOADING STATES
========================================================== */
.skeleton {
    background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-soft) 50%, var(--bg-muted) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

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

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

/* ==========================================================
   ✅ FOOTER
========================================================== */
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    font-size: 0.75rem;
    font-weight: 500;
    z-index: var(--z-sticky);
}

/* ==========================================================
   ✅ RESPONSIVE
========================================================== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.625rem;
    }

    h2 {
        font-size: 1.375rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    #div_main_page {
        padding: 12px;
        padding-bottom: 40px;
    }

    .card-body {
        padding: 16px;
    }

    .btn {
        padding: 10px 16px;
    }

    .modal-body {
        padding: 20px;
    }

    .env-header {
        padding: 24px 20px 20px;
    }

    .env-fields {
        padding: 20px 20px 16px;
    }

    .env-actions {
        padding: 8px 20px 24px;
    }

    .env-input,
    .env-select,
    .env-submit-btn {
        height: 48px;
    }
}

@media (max-width: 576px) {
    .env-page-wrapper {
        padding: 20px 12px;
    }

    .env-login-container {
        max-width: 100%;
    }

    .env-card {
        border-radius: 20px;
    }

    .env-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .env-icon-wrapper i {
        font-size: 26px;
    }

    .env-title {
        font-size: 1.375rem;
    }

    .login-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .login-forgot {
        align-self: flex-end;
    }
}

/* ==========================================================
   ✅ DASHBOARD STATISTICS - Modern Design
   Support format "actifs/total"
========================================================== */

/* ===== Dashboard Container ===== */
#div_resultats_dashboard {
    min-height: 200px;
}

/* ===== Stat Card Base ===== */
.stat-card {
    position: relative;
    border-radius: var(--radius-sm);
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #ffffff;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ===== Stat Card Layout ===== */
.stat-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.stat-icon i {
    font-size: 1.3rem;
    color: #fff;
}

.stat-card:hover .stat-icon {
    transform: scale(1.05);
}

.stat-meta {
    flex: 1;
    min-width: 0;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

/* ===== Stat Values (format actifs/total) ===== */
.stat-values {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    font-size: 2rem;
    font-weight: bolder;
    color: var(--text-primary);
    font-family: 'Roboto', sans-serif;
}

.stat-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-actifs {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
}

.stat-actifs-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
    opacity: 0.7;
}

.stat-separator {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 8px;
    padding: 0 4px;
}

.stat-secondary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-total {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
}

.stat-total-label {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-top: 3px;
    color: var(--text-light);
}

/* ===== Stat Card Colors ===== */

/* Red */
.stat-card.stat-red::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.stat-card.stat-red .stat-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.stat-card.stat-red .stat-actifs {
    color: #dc2626;
}

.stat-card.stat-red .stat-actifs-label {
    color: #ef4444;
}

/* Blue */
.stat-card.stat-blue::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.stat-card.stat-blue .stat-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.stat-card.stat-blue .stat-actifs {
    color: #2563eb;
}

.stat-card.stat-blue .stat-actifs-label {
    color: #3b82f6;
}

/* Amber */
.stat-card.stat-amber::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-card.stat-amber .stat-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.stat-card.stat-amber .stat-actifs {
    color: #d97706;
}

.stat-card.stat-amber .stat-actifs-label {
    color: #f59e0b;
}

/* Purple */
.stat-card.stat-purple::before {
    background: linear-gradient(90deg, #1a8fc0, #2AACE2);
}

.stat-card.stat-purple .stat-icon {
    background: linear-gradient(135deg, #1a8fc0, #0d6f99);
    box-shadow: 0 4px 12px rgba(42, 172, 226, 0.3);
}

.stat-card.stat-purple .stat-actifs {
    color: #0d6f99;
}

.stat-card.stat-purple .stat-actifs-label {
    color: #2AACE2;
}

/* Teal */
.stat-card.stat-teal::before {
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}

.stat-card.stat-teal .stat-icon {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.stat-card.stat-teal .stat-actifs {
    color: #0d9488;
}

.stat-card.stat-teal .stat-actifs-label {
    color: #14b8a6;
}

/* Green */
.stat-card.stat-green::before {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.stat-card.stat-green .stat-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.stat-card.stat-green .stat-actifs {
    color: #16a34a;
}

.stat-card.stat-green .stat-actifs-label {
    color: #22c55e;
}

/* Cyan */
.stat-card.stat-cyan::before {
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.stat-card.stat-cyan .stat-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.stat-card.stat-cyan .stat-actifs {
    color: #0891b2;
}

.stat-card.stat-cyan .stat-actifs-label {
    color: #06b6d4;
}

/* Indigo */
.stat-card.stat-indigo::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.stat-card.stat-indigo .stat-icon {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.stat-card.stat-indigo .stat-actifs {
    color: #4f46e5;
}

.stat-card.stat-indigo .stat-actifs-label {
    color: #6366f1;
}

/* Rose */
.stat-card.stat-rose::before {
    background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.stat-card.stat-rose .stat-icon {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.stat-card.stat-rose .stat-actifs {
    color: #e11d48;
}

.stat-card.stat-rose .stat-actifs-label {
    color: #f43f5e;
}

/* ===== Skeleton Loading ===== */
.skel-box {
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

/* ===== Dashboard Header ===== */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.dashboard-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-inverse);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Last Update & Refresh ===== */
.dashboard-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.last-update {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.last-update time,
.last-update #dashboard_last_update {
    font-weight: 600;
    color: #fff;
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.btn-refresh.is-loading i {
    animation: spin-refresh 0.8s linear infinite;
}

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

/* ===== Dashboard Container ===== */
.dashboard-container {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border-radius: var(--radius-sm);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===== Stat Card Animation ===== */
.stat-card {
    animation: stat-card-enter 0.4s ease-out backwards;
}

.stat-card:nth-child(1) {
    animation-delay: 0.05s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.1s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.15s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(5) {
    animation-delay: 0.25s;
}

.stat-card:nth-child(6) {
    animation-delay: 0.3s;
}

.stat-card:nth-child(7) {
    animation-delay: 0.35s;
}

.stat-card:nth-child(8) {
    animation-delay: 0.4s;
}

@keyframes stat-card-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Dashboard Responsive ===== */
@media (max-width: 1199.98px) {
    .stat-actifs {
        font-size: 1.625rem;
    }

    .stat-total {
        font-size: 1rem;
    }
}

@media (max-width: 991.98px) {
    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-icon i {
        font-size: 1.2rem;
    }

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

    .stat-total {
        font-size: 0.95rem;
    }
}

@media (max-width: 767.98px) {
    .dashboard-container {
        padding: 16px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
    }

    .stat-actifs {
        font-size: 1.375rem;
    }

    .stat-separator {
        font-size: 1.25rem;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .stat-card {
        padding: 14px;
    }

    .stat-top {
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-actifs {
        font-size: 1.25rem;
    }

    .stat-total {
        font-size: 0.875rem;
    }

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

    .stat-actifs-label {
        font-size: 0.65rem;
    }

    .stat-total-label {
        font-size: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .skel-box {
        animation: none;
    }
}

/* ==========================================================
   ✅ PAGE LAYOUT - Fond coloré, contenu visible
========================================================== */

/* Main Page Container - Fond avec légère teinte */
#div_main_page {
    min-height: calc(100vh - 60px - 28px);
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
    padding: 24px;
}

/* Zone de contenu principale */
#div_main_page > .col,
#div_main_page > .row > .col {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

/* Container interne */
#div_main_page .container {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

/* ==========================================================
   ✅ CONTENT SECTIONS - Zones colorées
========================================================== */

/* Section Header colorée */
.section-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    color: #fff;
    padding: 20px 24px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin: -24px -24px -24px -24px;
}

/* Content Box */
.content-box {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ==========================================================
   ✅ BUTTONS - Tous les boutons stylisés
========================================================== */

/* Base Button Reset */
.btn {
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-2px);
}

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

.btn i {
    font-size: 1.1em;
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
    color: #fff;
}

/* Secondary Button */
.btn-secondary {
    background: linear-gradient(135deg, #64748b, #475569);
    color: #fff;
    box-shadow: 0 4px 14px rgba(100, 116, 139, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
    color: #fff;
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

.btn-success:hover {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45);
    color: #fff;
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
    color: #fff;
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
    color: #fff;
}

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
}

.btn-info:hover {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.45);
    color: #fff;
}

/* Dark Button */
.btn-dark {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.4);
}

.btn-dark:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.5);
    color: #fff;
}

/* Light Button */
.btn-light {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.btn-light:hover {
    background: linear-gradient(135deg, #fff, #f1f5f9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
   ✅ OUTLINE BUTTONS - Bordures aux couleurs du thème
========================================================== */
.btn-outline-primary {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

.btn-outline-primary:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

.btn-outline-secondary {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 2px solid var(--border) !important;
}

.btn-outline-secondary:hover {
    background: var(--bg-muted) !important;
    color: var(--text-primary) !important;
    border-color: var(--text-muted) !important;
}

.btn-outline-success {
    background: transparent !important;
    color: var(--success) !important;
    border: 2px solid var(--success) !important;
}

.btn-outline-success:hover {
    background: var(--success) !important;
    color: #fff !important;
    border-color: var(--success) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
}

.btn-outline-danger {
    background: transparent !important;
    color: var(--danger) !important;
    border: 2px solid var(--danger) !important;
}

.btn-outline-danger:hover {
    background: var(--danger) !important;
    color: #fff !important;
    border-color: var(--danger) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

.btn-outline-warning {
    background: transparent !important;
    color: var(--warning) !important;
    border: 2px solid var(--warning) !important;
}

.btn-outline-warning:hover {
    background: var(--warning) !important;
    color: #fff !important;
    border-color: var(--warning) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

.btn-outline-info {
    background: transparent !important;
    color: var(--info, #06b6d4) !important;
    border: 2px solid var(--info, #06b6d4) !important;
}

.btn-outline-info:hover {
    background: var(--info, #06b6d4) !important;
    color: #fff !important;
    border-color: var(--info, #06b6d4) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35) !important;
}

.btn-outline-dark {
    background: transparent !important;
    color: var(--nav-bg-1) !important;
    border: 2px solid var(--nav-bg-1) !important;
}

.btn-outline-dark:hover {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2)) !important;
    color: #fff !important;
    border-color: var(--nav-bg-1) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.4) !important;
}

.btn-outline-light {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 2px solid var(--border-light) !important;
}

.btn-outline-light:hover {
    background: var(--bg-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Blue Outline (Custom) - Couleurs navbar */
.btn-outline-blue {
    background: transparent !important;
    color: var(--nav-bg-1) !important;
    border: 2px solid var(--nav-bg-1) !important;
    padding: 10px 20px !important;
}

.btn-outline-blue:hover {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4) !important;
}

/* ==========================================================
   ✅ BUTTON SIZES
========================================================== */
.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
    border-radius: var(--radius-sm);
}

.btn-xl {
    padding: 16px 36px;
    font-size: 1.1rem;
    border-radius: var(--radius-sm);
}

/* Icon Only Button */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
}

/* ==========================================================
   ✅ BUTTON GROUPS
========================================================== */
.btn-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-group .btn {
    border-radius: var(--radius-sm);
}

/* ==========================================================
   ✅ SPECIAL BUTTONS
========================================================== */

/* Gradient Button */
.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    color: #fff;
}

/* Gradient Cyan-Teal */
.btn-gradient-teal {
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.4);
}

.btn-gradient-teal:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.5);
    color: #fff;
}

/* ==========================================================
   ✅ CARDS - Cartes stylisées
========================================================== */
#div_main_page .card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

#div_main_page .card-body {
    padding: 24px;
}

#div_main_page .card-header {
    background: linear-gradient(135deg, #0a1e36, #0f3558);
    color: #fff;
    border-bottom: none;
    padding: 16px 24px;
    font-weight: 600;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.detail-content .card-header,
.modal .card-header {
    background: var(--bg-soft) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}

.modal .card.border-danger .card-header {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
    border-bottom: 1px solid var(--danger-border) !important;
}

/* ==========================================================
   ✅ SEARCH FORM - Zone de recherche avec bordures sombres
========================================================== */
#form_recherche_utilisateurs {
    background: #fff;
    border: 3px solid #1e293b;
    border-radius: var(--radius-sm);
    padding: 24px;
    padding-top: 32px;
    margin-top: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(30, 41, 59, 0.1);
    position: relative;
}

/* Header bar sombre */
#form_recherche_utilisateurs::before {
    content: '🔍 Recherche';
    position: absolute;
    top: -14px;
    left: 20px;
    background: #1e293b;
    color: #fff;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#form_recherche_utilisateurs .btn-primary {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    min-width: 50px;
    height: 48px;
    border: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

#form_recherche_utilisateurs .btn-primary:hover {
    background: linear-gradient(135deg, #334155, #1e293b) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.4);
}

/* ==========================================================
   ✅ BREADCRUMBS - Sur fond clair
========================================================== */
#div-breadcrumbs {
    margin-bottom: 24px;
}

#div-breadcrumbs .breadcrumbs {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    box-shadow: var(--shadow-xs);
}

#div-breadcrumbs .breadcrumbs__item {
    color: var(--text-muted);
}

#div-breadcrumbs .breadcrumbs__item:hover {
    color: var(--primary);
    background: var(--primary-light);
}

#div-breadcrumbs .breadcrumbs__item.is-active {
    color: var(--primary-dark);
    background: var(--primary-light);
    font-weight: 600;
}

#div-breadcrumbs .breadcrumbs__item:not(:last-child)::after {
    border-color: var(--text-light);
}

/* ==========================================================
   ✅ RESULTS CONTAINER - Zone de résultats (hauteur fixe)
========================================================== */
#div_recherche_resultats {
    margin-top: 24px;
    height: calc(100vh - 580px);
    min-height: 600px; /* Hauteur minimale pour afficher 10 lignes DataTable */
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: auto;
    position: relative;
}

#div_recherche_resultats:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%),
    repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(30, 41, 59, 0.02) 10px,
            rgba(30, 41, 59, 0.02) 20px
    );
    border-style: dashed;
}

#div_recherche_resultats:empty::after {
    content: 'Lancez une recherche pour afficher les résultats';
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 40px;
    text-align: center;
}

/* Scrollbar personnalisée pour les résultats */
#div_recherche_resultats::-webkit-scrollbar {
    width: 8px;
}

#div_recherche_resultats::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#div_recherche_resultats::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

#div_recherche_resultats::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ==========================================================
   ✅ TABLE - Tableau des résultats
========================================================== */
#div_recherche_resultats .table {
    margin: 0;
}

#div_recherche_resultats .table thead {
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
}

#div_recherche_resultats .table thead th {
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border: none;
}

#div_recherche_resultats .table tbody tr {
    transition: all 0.15s ease;
    border-bottom: 1px solid #e2e8f0;
}

#div_recherche_resultats .table tbody tr:last-child {
    border-bottom: none;
}

#div_recherche_resultats .table tbody tr:nth-child(even) {
    background: #f8fafc;
}

#div_recherche_resultats .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(30, 58, 95, 0.08), rgba(30, 58, 95, 0.03));
}

#div_recherche_resultats .table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
    color: var(--text-primary);
}

/* ==========================================================
   ✅ FORMS - Inputs stylisés avec bordure bleu nuit
========================================================== */

/* Tous les champs de formulaire */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
textarea,
select {
    background: #fff !important;
    border: 2px solid #1e3a5f !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    color: var(--text-primary) !important;
}

/* Select avec icône bleu nuit */
.form-select,
select {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e3a5f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Focus state */
.form-control:focus,
input:focus,
textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
    background-color: #fff !important;
    outline: none !important;
}

/* Select focus - icône bleue (doit garder le background-image) */
.form-select:focus,
select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    outline: none !important;
}

/* Placeholder */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

/* Labels */
.form-label,
label {
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
}

/* ==========================================================
   ✅ DISABLED & READONLY STATES - États désactivés
========================================================== */

/* Champs disabled */
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.form-control[disabled],
.form-select[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
    background: #f1f5f9 !important;
    border: 2px dashed #94a3b8 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.form-control:disabled::placeholder,
input:disabled::placeholder,
textarea:disabled::placeholder {
    color: #94a3b8 !important;
}

/* Champs readonly */
.form-control:read-only,
.form-control[readonly],
input:read-only,
input[readonly],
textarea:read-only,
textarea[readonly] {
    background: #fef3c7 !important;
    border: 2px solid #f59e0b !important;
    color: #92400e !important;
    cursor: default !important;
}

.form-control:read-only:focus,
.form-control[readonly]:focus,
input:read-only:focus,
input[readonly]:focus,
textarea:read-only:focus,
textarea[readonly]:focus {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
}

/* Select disabled - icône grise */
.form-select:disabled,
select:disabled {
    background-color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
}

/* Input group */
.input-group .form-control,
.input-group .form-select {
    border-radius: 0 !important;
}

.input-group .form-control:first-child,
.input-group .form-select:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.input-group .form-control:last-child,
.input-group .form-select:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.input-group-text {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    border: 2px solid #1e3a5f !important;
    color: #fff !important;
    padding: 12px 16px !important;
}

/* Checkbox et Radio */
.form-check-input {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #1e3a5f !important;
    background-color: #fff !important;
}

.form-check-input:checked {
    background-color: #1e3a5f !important;
    border-color: #1e3a5f !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.2) !important;
    border-color: #1e3a5f !important;
}

.form-check-input:disabled {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    opacity: 0.7 !important;
}

.form-check-input:checked:disabled {
    background-color: #0a1e36 !important;
    border-color: #0a1e36 !important;
    opacity: 0.8 !important;
}

.form-check-label {
    color: var(--text-primary) !important;
    margin-left: 8px !important;
}

/* Form validation states */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success) !important;
    background-image: none !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger) !important;
    background-image: none !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
}

.valid-feedback {
    color: var(--success) !important;
    font-size: 0.85rem !important;
}

.invalid-feedback {
    color: var(--danger) !important;
    font-size: 0.85rem !important;
}

/* ==========================================================
   ✅ SPINNER - Chargement (masqué par défaut)
========================================================== */
/* ==========================================================
   LOADERS - Taille et centrage uniformes
========================================================== */

/* Spinners Bootstrap : caches par defaut */
#div_spinner_rechercher,
#div_spinner,
#div_spinner_profil,
[id^="div_spinner"] {
    display: none !important;
}

.spinner-border.show,
[id^="div_spinner"].show {
    display: inline-block !important;
}

.spinner-border {
    width: 28px;
    height: 28px;
    border-width: 3px;
    border-color: var(--primary);
    border-right-color: transparent;
}

/* Preloader SVG : taille et centrage uniformes */
img[src*="preloader"] {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    margin: 40px auto !important;
    opacity: 0.7;
}

/* ==========================================================
   ✅ HABILITATIONS - Grille des permissions
========================================================== */

/* Container des habilitations */
#form_profil_habilitations {
    padding: 10px 0;
}

#form_profil_habilitations .row {
    margin: 0 -8px;
}

#form_profil_habilitations .col,
#form_profil_habilitations .col-sm-6 {
    padding: 8px;
}

/* Card habilitation */
#form_profil_habilitations .card {
    border: 2px solid #1e3a5f !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    height: 100%;
    overflow: hidden;
    transition: all 0.2s ease;
}

#form_profil_habilitations .card:hover {
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.15) !important;
}

/* Card header - Module principal */
#form_profil_habilitations .card-header {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-bottom: none !important;
    font-size: 0.95rem;
}

#form_profil_habilitations .card-header table {
    width: 100%;
    margin: 0;
}

#form_profil_habilitations .card-header td {
    padding: 0;
    vertical-align: middle;
}

#form_profil_habilitations .card-header strong {
    color: #fff;
    font-weight: 600;
}

#form_profil_habilitations .card-header i {
    margin-right: 8px;
    opacity: 0.9;
}

/* Card body */
#form_profil_habilitations .card-body {
    padding: 0 !important;
    background: #fff;
    max-height: 350px;
    overflow-y: auto;
}

/* Table des sous-habilitations */
#form_profil_habilitations .table {
    margin: 0 !important;
    font-size: 0.85rem;
}

#form_profil_habilitations .table tr:first-child {
    background: #f1f5f9 !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

#form_profil_habilitations .table tr:first-child td {
    padding: 8px 12px !important;
    font-weight: 600;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}

#form_profil_habilitations .table tr:first-child i {
    font-size: 1rem;
    color: #1e3a5f;
}

#form_profil_habilitations .table tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

#form_profil_habilitations .table tr:hover {
    background-color: rgba(30, 58, 95, 0.04) !important;
}

#form_profil_habilitations .table td {
    padding: 10px 12px !important;
    vertical-align: middle;
    border: none !important;
}

/* Niveau 2 - Sous-sous-habilitation */
#form_profil_habilitations .table tr td .bi-arrow-right {
    color: #94a3b8;
    margin-right: 6px;
}

/* Niveau 3 - Troisième niveau */
#form_profil_habilitations .table tr td.text-secondary {
    color: #64748b !important;
    font-size: 0.8rem;
}

/* Switches des habilitations */
#form_profil_habilitations .form-check {
    margin: 0;
    padding: 0;
    min-height: auto;
    display: flex;
    justify-content: center;
}

#form_profil_habilitations .form-check-input {
    width: 36px !important;
    height: 20px !important;
    margin: 0 !important;
    cursor: pointer;
    border: 2px solid #cbd5e1 !important;
    background-color: #e2e8f0 !important;
}

#form_profil_habilitations .form-check-input:checked {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

#form_profil_habilitations .form-check-input:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed;
}

#form_profil_habilitations .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

/* Switch dans le header (module principal) */
#form_profil_habilitations .card-header .form-check-input {
    width: 44px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

#form_profil_habilitations .card-header .form-check-input:checked {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

/* Scrollbar personnalisée pour card-body */
#form_profil_habilitations .card-body::-webkit-scrollbar {
    width: 6px;
}

#form_profil_habilitations .card-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#form_profil_habilitations .card-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

#form_profil_habilitations .card-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Message résultats */
#p_profil_resultats {
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

#p_profil_resultats:empty {
    display: none;
}

#p_profil_resultats.text-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

#p_profil_resultats.text-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ==========================================================
   ✅ CENTRE DE SANTÉ - Page détaillée
========================================================== */

/* Card principale du centre */
.card.border-black {
    border: 2px solid #1e3a5f !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
}

/* ==========================================================
   ✅ DETAIL HEADER - En-tête compact centre de santé
========================================================== */

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #0a1e36 0%, #0f3558 50%, #1a5a8a 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10, 30, 54, 0.3);
}

.detail-header::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(42, 172, 226, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.detail-header::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 30%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(232, 139, 45, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.detail-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.detail-header-logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.detail-header-info {
    min-width: 0;
}

.detail-header-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-header-sigle {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.95rem;
}

.detail-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.detail-header-meta .divinfo-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    padding: 4px 12px;
    backdrop-filter: blur(8px);
}

.detail-header-meta .divinfo-pill i {
    color: #E88B2D;
}

.detail-header-meta .status-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
}

.detail-header-meta .status-ok {
    background: rgba(58, 170, 53, 0.18);
    color: #d4f5d0;
    border-color: rgba(58, 170, 53, 0.35);
}

.detail-header-meta .status-ok .dot {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.detail-header-meta .status-ko {
    background: rgba(220, 53, 69, 0.18);
    color: #fecdd3;
    border-color: rgba(220, 53, 69, 0.35);
}

.detail-header-meta .status-ko .dot {
    background: #fb7185;
    box-shadow: 0 0 6px rgba(251, 113, 133, 0.5);
}

.detail-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.detail-header-actions .btn-menu {
    flex-direction: row;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.8rem !important;
    gap: 0;
    border-radius: 8px !important;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease !important;
}

.detail-header-actions .btn-menu i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    transition: all 0.25s ease;
}

.detail-header-actions .btn-menu:hover {
    background: rgba(42, 172, 226, 0.18) !important;
    border-color: rgba(42, 172, 226, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(42, 172, 226, 0.2);
}

.detail-header-actions .btn-menu:hover i {
    color: #2AACE2;
}

.detail-header-actions .btn-menu:hover i {
    color: #fff;
}

.detail-header-actions .btn-menu-danger {
    border-color: rgba(248, 113, 113, 0.4) !important;
}

.detail-header-actions .btn-menu-danger i {
    color: #f87171;
}

.detail-header-actions .btn-menu-danger:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

/* ==========================================================
   ✅ DETAIL TABS - Onglets horizontaux
========================================================== */

.detail-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    background: #fff;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.detail-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.detail-tab:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.detail-tab.active {
    color: var(--primary-dark);
    background: transparent;
    font-weight: 600;
    border-bottom-color: var(--primary);
}

/* ==========================================================
   ✅ DETAIL CONTENT - Zone de contenu pleine largeur
========================================================== */

.detail-content {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    min-height: 400px;
    box-shadow: var(--shadow);
}

#div_centre_sante_donnees {
    animation: fadeIn 0.3s ease;
}

#div_centre_sante_donnees:empty::before {
    content: 'Sélectionnez une section pour afficher les données...';
    display: block;
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    font-style: italic;
}

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

/* ==========================================================
   ✅ DETAIL HEADER & TABS - Responsive
========================================================== */

@media (max-width: 768px) {
    .detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .detail-tabs-bar {
        gap: 6px;
        padding: 10px 12px;
    }

    .detail-tab {
        font-size: 0.78rem;
        padding: 8px 14px;
    }

    .detail-content {
        padding: 16px;
        min-height: 300px;
    }
}

/* ==========================================================
   ✅ DIVINFO - Styles conservés (pills, status, etc.)
========================================================== */

.divinfo-card {
    padding: 0 !important;
}

.divinfo-title {
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px 20px;
    text-align: center;
    letter-spacing: 0.3px;
}

/* Header avec logo et infos */
.divinfo-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

/* Container logo */
.divinfo-logo-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin-bottom: 16px;
    background: #fff;
}

.divinfo-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Infos sous le logo */
.divinfo-head-infos {
    text-align: center;
    width: 100%;
}

.divinfo-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 12px;
}

/* Métadonnées (pills) */
.divinfo-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.divinfo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

.divinfo-pill i {
    font-size: 0.85rem;
    color: #1e3a5f;
}

.divinfo-pill-muted {
    background: #e2e8f0;
    color: #64748b;
}

/* Badge statut */
.divinfo-status {
    text-align: center;
    padding: 12px 20px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

.status-ok {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-ok .dot {
    background: #22c55e;
}

.status-ko {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-ko .dot {
    background: #ef4444;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Séparateur */
.divinfo-sep {
    margin: 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}

/* Actions */
.divinfo-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 16px;
    background: #f8fafc;
}

.btn-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px !important;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: var(--radius-sm) !important;
    color: #475569 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-menu i {
    font-size: 1.2rem;
    color: #1e3a5f;
}

.btn-menu:hover {
    background: #1e3a5f !important;
    border-color: #1e3a5f !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.btn-menu:hover i {
    color: #fff;
}

.btn-menu-danger,
.btn-menu-danger {
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #dc2626 !important;
}

.btn-menu-danger i,
.btn-menu-danger i {
    color: #dc2626;
}

.btn-menu-danger:hover,
.btn-menu-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

.btn-menu-danger:hover i,
.btn-menu-danger:hover i {
    color: #fff;
}

/* Liste d'informations */
.divinfo-info-list {
    padding: 16px;
}

.info-row {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-label i {
    font-size: 0.85rem;
    color: #1e3a5f;
}

.info-value {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 600;
}

/* ==========================================================
   MODULE CARDS
========================================================== */
.module-card {
    display: block;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: #334155;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #1e40af;
}

.module-card:hover::before {
    transform: scaleX(1);
}

.module-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.module-card-icon i {
    font-size: 1.75rem;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.module-card:hover .module-card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    transform: scale(1.1);
}

.module-card:hover .module-card-icon i {
    color: #ffffff;
}

.module-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1e293b;
}

.module-card-arrow {
    position: absolute;
    bottom: 12px;
    right: 12px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
    color: #3b82f6;
}

.module-card:hover .module-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.card-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}

/* ==========================================================
   ✅ CENTRE TABS - Onglets du centre de santé (droite)
========================================================== */

/* Layout principal */
.centre-tabs-layout {
    padding: 0 !important;
}

.centre-tabs-layout > .row {
    margin: 0;
}

.centre-tabs-layout > .row > [class*="col"] {
    padding: 0;
}

/* Sidebar des onglets */
.centre-tabs-sidebar {
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.centre-tabs-title {
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    color: #fff;
    padding: 16px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.centre-tabs-title i {
    opacity: 0.8;
}

/* Liste des onglets */
.centre-tabs-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Bouton d'onglet */
.centre-tab-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.centre-tab-btn:hover {
    background: #fff;
    border-color: #1e3a5f;
    color: #1e3a5f;
    transform: translateX(4px);
}

.centre-tab-btn.active {
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-color: #1e3a5f;
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

/* Point indicateur */
.centre-tab-dot {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.centre-tab-btn:hover .centre-tab-dot {
    background: #1e3a5f;
}

.centre-tab-btn.active .centre-tab-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

/* Label de l'onglet */
.centre-tab-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flèche */
.centre-tab-arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
    margin-left: 8px;
}

.centre-tab-btn:hover .centre-tab-arrow {
    opacity: 0.6;
    transform: translateX(0);
}

.centre-tab-btn.active .centre-tab-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Contenu des onglets */
.centre-tabs-content {
    padding: 24px;
    min-height: 500px;
    background: #fff;
}

#div_centre_sante_donnees {
    animation: fadeIn 0.3s ease;
}

#div_centre_sante_donnees:empty::before {
    content: 'Sélectionnez une section pour afficher les données...';
    display: block;
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    font-style: italic;
}

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

/* (ancien centre-tabs responsive supprimé — remplacé par detail-tabs) */

/* ==========================================================
   ✅ FORMULAIRE RECHERCHE CENTRES DE SANTÉ
========================================================== */

.form_recherche {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    padding-top: 32px;
    margin-top: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.form_recherche::before {
    content: 'Recherche';
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--primary);
    color: #fff;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================
   ✅ BOUTON IMPORT - Animation
========================================================== */

#button_import {
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    }
    50% {
        box-shadow: 0 4px 24px rgba(239, 68, 68, 0.5);
    }
}

/* ==========================================================
   ✅ CENTRE TAB PANEL - Contenu des onglets
========================================================== */

/* Panel principal */
.centre-tab-panel {
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Header du panel */
.centre-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-bottom: 2px solid #e2e8f0;
}

.centre-tab-title {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.centre-tab-title i {
    font-size: 1.1rem;
    opacity: 0.85;
}

/* Actions du header */
.centre-tab-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Boutons pill */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-pill i {
    font-size: 0.95rem;
}

.btn-pill.btn-soft {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed;
}

.btn-pill.btn-menu {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.btn-pill.btn-menu:hover {
    background: #fff !important;
    color: #1e3a5f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Body du panel */
.centre-tab-body {
    padding: 24px;
    background: #f8fafc;
}

/* ==========================================================
   ✅ INFO GRID - Grille d'informations
========================================================== */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-item {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 16px;
    transition: all 0.2s ease;
}

.info-item:hover {
    border-color: #1e3a5f;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
}

.info-item-wide {
    grid-column: span 2;
}

.info-item .info-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.info-item .info-value {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
}

.info-item .info-value .text-muted {
    color: #94a3b8 !important;
    font-weight: 400;
}

/* Responsive info-grid */
@media (max-width: 575.98px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .info-item-wide {
        grid-column: span 1;
    }
}

/* ==========================================================
   ✅ MAP CARD - Carte géographique
========================================================== */

.map-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.map-card-title {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.map-card-title i {
    opacity: 0.85;
}

.map-canvas {
    flex: 1;
    min-height: 280px;
    background: #e2e8f0;
}

/* Leaflet map styling */
.map-canvas .leaflet-container {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

/* ==========================================================
   ✅ EMPTY STATE - État vide
========================================================== */

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    background: #fff;
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    text-align: center;
}

.empty-state > i {
    font-size: 2.5rem;
    color: #94a3b8;
}

.empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.empty-subtitle {
    font-size: 0.9rem;
    color: #64748b;
}

/* Empty state vertical */
.empty-state.vertical {
    flex-direction: column;
    text-align: center;
}

/* ==========================================================
   ✅ DATA TABLE - Tableaux de données dans les onglets
========================================================== */

.centre-tab-body .table {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0;
}

.centre-tab-body .table thead {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.centre-tab-body .table thead th {
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.centre-tab-body .table tbody tr {
    transition: background-color 0.15s ease;
}

.centre-tab-body .table tbody tr:hover {
    background-color: rgba(30, 58, 95, 0.04);
}

.centre-tab-body .table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.centre-tab-body .table tbody tr:last-child td {
    border-bottom: none;
}

/* ==========================================================
   ✅ CONTACT CARD - Cartes de contacts
========================================================== */

.contact-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.contact-card:hover {
    border-color: #1e3a5f;
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.1);
    transform: translateY(-2px);
}

.contact-card .contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-card .contact-info {
    flex: 1;
    min-width: 0;
}

.contact-card .contact-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-card .contact-value {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
    word-break: break-word;
}

.contact-card .contact-value a {
    color: #1e3a5f;
    text-decoration: none;
}

.contact-card .contact-value a:hover {
    text-decoration: underline;
}

/* ==========================================================
   ✅ SERVICE CARD - Cartes de services
========================================================== */

.service-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 20px;
    transition: all 0.2s ease;
    height: 100%;
}

.service-card:hover {
    border-color: #1e3a5f;
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.1);
}

.service-card .service-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.service-card .service-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 1rem;
}

.service-card .service-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.service-card .service-description {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.service-card .service-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 12px;
}

.service-card .service-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* ==========================================================
   ✅ TAB ACTION BAR - Barre d'actions dans les onglets
========================================================== */

.alert.alert-dark.border-dark,
.tab-action-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    color: #fff !important;
}

.alert.alert-dark.border-dark .btn,
.tab-action-bar .btn {
    border-radius: var(--radius-sm) !important;
}

.alert.alert-dark.border-dark .btn-dark,
.tab-action-bar .btn-dark {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.alert.alert-dark.border-dark .btn-blue,
.tab-action-bar .btn-blue {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.alert.alert-dark.border-dark .btn-blue:hover,
.tab-action-bar .btn-blue:hover {
    background: #fff !important;
    color: #1e3a5f !important;
}

.alert.alert-dark.border-dark .btn-danger,
.tab-action-bar .btn-danger {
    background: #dc2626 !important;
    border: none !important;
    animation: pulse-btn 2s infinite;
}

@keyframes pulse-btn {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

.alert.alert-dark.border-dark .badge,
.tab-action-bar .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* ==========================================================
   ✅ DATA LIST TABLE - Tableaux de données simples
========================================================== */

/* Style pour les tableaux simples (services, coordonnées, etc.) */
.centre-tab-body .table:not(.table-dark),
.centre-tabs-content .table:not(.table-dark) {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0;
}

.centre-tab-body .table:not(.table-dark) tr,
.centre-tabs-content .table:not(.table-dark) tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.15s ease;
}

.centre-tab-body .table:not(.table-dark) tr:last-child,
.centre-tabs-content .table:not(.table-dark) tr:last-child {
    border-bottom: none;
}

.centre-tab-body .table:not(.table-dark) tr:hover,
.centre-tabs-content .table:not(.table-dark) tr:hover {
    background: rgba(30, 58, 95, 0.04);
}

.centre-tab-body .table:not(.table-dark) td,
.centre-tabs-content .table:not(.table-dark) td {
    padding: 10px 12px !important;
    vertical-align: middle;
    border: none !important;
}

.centre-tab-body .table:not(.table-dark) td small,
.centre-tabs-content .table:not(.table-dark) td small {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.centre-tab-body .table:not(.table-dark) td strong,
.centre-tabs-content .table:not(.table-dark) td strong {
    display: block;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 600;
}

/* ==========================================================
   ✅ DATA TABLE DARK - Tableaux avec en-tête sombre
========================================================== */

.table.table-dark thead,
.table.table-dark tfoot,
.table-dark thead,
.table-dark tfoot {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
}

.table.table-dark thead th,
.table.table-dark tfoot th,
.table-dark thead th,
.table-dark tfoot th {
    padding: 10px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none !important;
    white-space: nowrap;
}

.table.table-dark tbody.table-light,
.table-dark tbody.table-light {
    background: #fff !important;
}

.table.table-dark tbody.table-light tr,
.table-dark tbody.table-light tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease;
}

.table.table-dark tbody.table-light tr:hover,
.table-dark tbody.table-light tr:hover {
    background-color: rgba(30, 58, 95, 0.04) !important;
}

.table.table-dark tbody.table-light td,
.table-dark tbody.table-light td {
    padding: 8px 12px !important;
    vertical-align: middle;
    border: none !important;
    color: #1e293b;
}

/* Status indicator */
.table td .bi-circle-fill {
    font-size: 0.6rem;
}

.table td.text-success .bi-circle-fill {
    color: #22c55e !important;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.table td.text-secondary .bi-circle-fill {
    color: #94a3b8 !important;
}

/* Photo thumbnail */
.table td .img-thumbnail {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 2px solid #e2e8f0 !important;
    padding: 0 !important;
}

/* Table links */
.table td a {
    color: #1e3a5f;
    text-decoration: none;
    font-weight: 500;
}

.table td a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

/* ==========================================================
   ✅ PROGRESS BAR - Barre de progression
========================================================== */

.progress {
    background: #e2e8f0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, #1e3a5f, #3b82f6);
    font-weight: 600;
    font-size: 0.85rem;
}

.progress-bar.bg-success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

.progress-bar.bg-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
}

.progress-bar.bg-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

/* Import progress container */
#import-progress-container {
    padding: 20px;
}

#import-progress-container .badge {
    font-size: 1rem;
    padding: 8px 16px;
}

#progress-details {
    margin-top: 16px;
}

#error-list {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 12px;
}

#error-list:empty {
    display: none;
}

/* ==========================================================
   ✅ DATATABLE STYLING - DataTables personnalisé
========================================================== */

.dataTables_wrapper {
    padding: 0;
}

/* Masquer les options en amont (length et filter) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: none !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 2px solid #1e3a5f !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
    font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.15);
}

.dataTables_wrapper .dataTables_info {
    color: #64748b;
    font-size: 0.8rem;
    padding-top: 12px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-sm) !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f1f5f9 !important;
    border-color: #1e3a5f !important;
    color: #1e3a5f !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    border-color: #1e3a5f !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================
   ✅ DATATABLES - Styles harmonisés pour tous les tableaux
========================================================== */

/* Structure de base DataTables */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

/* Cellules DataTables */
.dataTables_wrapper .table th,
.dataTables_wrapper .table td,
table.dataTable th,
table.dataTable td {
    padding: 10px 12px !important;
    vertical-align: middle;
}

/* En-têtes DataTables - Style par défaut (clair) */
.dataTables_wrapper .table thead th,
table.dataTable thead th {
    padding: 12px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 2px solid #e2e8f0 !important;
}

/* ============================================
   TABLE-DARK : En-têtes sombres
============================================ */
.dataTables_wrapper .table.table-dark thead,
.dataTables_wrapper .table.table-dark tfoot,
table.table-dark.dataTable thead,
table.table-dark.dataTable tfoot,
table.dataTable.table-dark thead,
table.dataTable.table-dark tfoot,
.table.table-dark thead,
.table.table-dark tfoot {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
}

.dataTables_wrapper .table.table-dark thead th,
.dataTables_wrapper .table.table-dark tfoot th,
table.table-dark.dataTable thead th,
table.table-dark.dataTable tfoot th,
table.dataTable.table-dark thead th,
table.dataTable.table-dark tfoot th,
.dataTables_wrapper table.table-dark > thead > tr > th,
.dataTables_wrapper table.table-dark > tfoot > tr > th,
.table.table-dark thead th,
.table.table-dark tfoot th {
    color: #fff !important;
    background: transparent !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-color: rgba(255, 255, 255, 0.15) !important;
    padding: 12px 14px !important;
    font-size: 0.75rem !important;
}

/* Corps du tableau avec table-light */
.dataTables_wrapper .table.table-dark tbody.table-light,
.table.table-dark tbody.table-light {
    background: #fff !important;
}

.dataTables_wrapper .table.table-dark tbody.table-light tr,
.table.table-dark tbody.table-light tr {
    background: #fff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease;
}

.dataTables_wrapper .table.table-dark tbody.table-light tr:hover,
.table.table-dark tbody.table-light tr:hover {
    background-color: rgba(30, 58, 95, 0.04) !important;
}

.dataTables_wrapper .table.table-dark tbody.table-light td,
.table.table-dark tbody.table-light td {
    color: #1e293b !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   TABLE-REFERENTIEL : Tables de référence
============================================ */
.dataTables_wrapper .table-referentiel thead,
table.table-referentiel.dataTable thead {
    background: #1e293b !important;
}

.dataTables_wrapper .table-referentiel thead th,
table.table-referentiel.dataTable thead th {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px !important;
    border: none !important;
}

.dataTables_wrapper .table-referentiel tbody tr,
table.table-referentiel.dataTable tbody tr {
    background: #ffffff;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.dataTables_wrapper .table-referentiel tbody tr:nth-child(even),
table.table-referentiel.dataTable tbody tr:nth-child(even) {
    background: #fafbfc;
}

.dataTables_wrapper .table-referentiel tbody tr:hover,
table.table-referentiel.dataTable tbody tr:hover {
    background: #f1f5f9 !important;
    border-left-color: var(--primary);
}

/* ============================================
   Lignes alternées (striped)
============================================ */
.dataTables_wrapper .table-striped tbody tr:nth-of-type(odd),
table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.dataTables_wrapper .table-striped tbody tr:nth-of-type(even),
table.dataTable.table-striped tbody tr:nth-of-type(even) {
    background-color: #fff;
}

/* ============================================
   Hover sur les lignes
============================================ */
.dataTables_wrapper .table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover {
    background-color: rgba(30, 58, 95, 0.04) !important;
}

/* ============================================
   Tri des colonnes DataTables
============================================ */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 26px !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    opacity: 1;
}

/* Icônes de tri pour table-dark */
.table.table-dark thead th.sorting::after,
.table.table-dark thead th.sorting_asc::after,
.table.table-dark thead th.sorting_desc::after {
    filter: brightness(0) invert(1);
}

/* ============================================
   Pagination DataTables
============================================ */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 8px 14px !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #f1f5f9 !important;
    border-color: #1e3a5f !important;
    color: #1e3a5f !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    border-color: #1e3a5f !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   Info et filtres DataTables
============================================ */
.dataTables_wrapper .dataTables_info {
    padding-top: 16px;
    font-size: 0.85rem;
    color: #64748b;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dataTables_wrapper .dataTables_length {
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_length select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* ============================================
   Responsive DataTables
============================================ */
.dataTables_wrapper .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        justify-content: center;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 10px !important;
        font-size: 0.8rem;
    }
}

/* ============================================
   États vides
============================================ */
.dataTables_wrapper .dataTables_empty {
    padding: 40px 20px !important;
    text-align: center;
    color: #64748b;
    font-style: italic;
}

/* ==========================================================
   ✅ ALERT INFO STYLED - Messages d'information
========================================================== */

.centre-tab-body .alert-info,
.centre-tabs-content .alert-info,
#div_centre_sante_donnees .alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04)) !important;
    border: 2px dashed #3b82f6 !important;
    border-radius: var(--radius-sm) !important;
    color: #1e40af !important;
    padding: 24px !important;
    text-align: center;
    font-weight: 500;
}

.centre-tab-body .alert-info::before,
.centre-tabs-content .alert-info::before,
#div_centre_sante_donnees .alert-info::before {
    content: 'ℹ️';
    display: block;
    font-size: 2rem;
    margin-bottom: 12px;
}

.centre-tab-body .alert-danger,
.centre-tabs-content .alert-danger,
#div_centre_sante_donnees .alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04)) !important;
    border: 2px solid #ef4444 !important;
    border-radius: var(--radius-sm) !important;
    color: #dc2626 !important;
    padding: 24px !important;
}

/* ==========================================================
   ✅ LIST ITEM CARD - Items de liste stylisés
========================================================== */

.list-item-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.list-item-card:hover {
    border-color: #1e3a5f;
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.1);
    transform: translateX(4px);
}

.list-item-card .item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.list-item-card .item-content {
    flex: 1;
    min-width: 0;
}

.list-item-card .item-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.list-item-card .item-value {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 600;
}

.list-item-card .item-actions {
    display: flex;
    gap: 8px;
}

.list-item-card .item-actions .btn {
    padding: 8px 12px !important;
}

/* ==========================================================
   ✅ IMPORT BUTTON - Bouton d'import des tables de valeurs
========================================================== */

.btn-import-tables {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4) !important;
    transition: all 0.25s ease !important;
    animation: pulse-import 2s infinite;
}

.btn-import-tables i {
    font-size: 1.2rem;
}

.btn-import-tables:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.5) !important;
    color: #fff !important;
}

.btn-import-tables:active {
    transform: translateY(-1px) scale(1) !important;
}

/* Bouton Import compact (sans animation) */
.btn-import-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
    transition: all 0.2s ease !important;
}

.btn-import-sm:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
    color: #fff !important;
}

.btn-import-sm:active {
    transform: translateY(0) !important;
}

@keyframes pulse-import {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(220, 38, 38, 0.6), 0 0 0 8px rgba(220, 38, 38, 0.1);
    }
}

/* ==========================================================
   ✅ IMPORT MODAL - Modal d'import
========================================================== */

.modal-header-import {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

.modal-header-import .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
}

.modal-header-import .modal-title i {
    font-size: 1.3rem;
}

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

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

/* Modal Header Blue */
.modal-header-blue {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 16px 24px !important;
}

.modal-header-blue .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.modal-header-blue .modal-title i {
    font-size: 1.2rem;
}

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

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

/* ==========================================================
   ✅ AUTOCOMPLETE IN MODAL - jQuery UI Autocomplete dans modal
========================================================== */
.ui-autocomplete {
    z-index: 1060 !important; /* Au-dessus du modal Bootstrap (1055) */
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    background: #fff;
}

.ui-autocomplete .ui-menu-item {
    padding: 0;
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border-light);
}

.ui-autocomplete .ui-menu-item:last-child .ui-menu-item-wrapper {
    border-bottom: none;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--primary-light);
    color: var(--primary);
}

/* ==========================================================
   ✅ FORM LIAISON - Formulaires de liaison (centre, agence, etc.)
========================================================== */

.form-liaison {
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* En-tête du formulaire */
.form-liaison-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
}

.form-liaison-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-liaison-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.form-liaison-intro h6 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.form-liaison-intro small {
    font-size: 0.85rem;
}

/* Zone de recherche */
.form-liaison-search {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.form-liaison-search .form-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.form-liaison-search .form-label i {
    color: var(--primary);
}

.form-liaison-search .form-control {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.form-liaison-search .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.form-liaison-search .form-control::placeholder {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Aperçu de l'entité sélectionnée */
.form-liaison-preview {
    border: 2px solid #10b981;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 20px;
    animation: slideIn 0.3s ease;
}

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

.form-liaison-preview-header {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: 10px 16px;
    font-weight: 600;
    color: #065f46;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.form-liaison-preview-body {
    padding: 16px;
    background: #fff;
}

.form-liaison-preview-body small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-liaison-preview-body strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Boutons d'action */
.form-liaison-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.form-liaison-actions .btn {
    padding: 10px 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.form-liaison-actions .btn-blue {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    border: none;
    color: #fff;
}

.form-liaison-actions .btn-blue:hover {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.form-liaison-actions .spinner-border {
    margin-left: auto;
}

/* ==========================================================
   ✅ CARD TABLE VALEUR - Page de table de valeurs
========================================================== */

.card-table-valeur {
    border: 2px solid #1e3a5f !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
}

.card-header-table-valeur {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 12px 20px !important;
}

.card-header-table-valeur .card-header-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.card-header-table-valeur .card-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

/* Stat Badge */
.stat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-width: 55px;
}

.stat-badge-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
}

.stat-badge-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.stat-badge-success {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.stat-badge-success .stat-badge-value {
    color: #16a34a;
}

.stat-badge-danger {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.stat-badge-danger .stat-badge-value {
    color: #dc2626;
}

/* Search Box */
.search-box {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.search-box .form-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.search-box .form-control,
.search-box .form-select {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.8rem;
    padding: 6px 10px !important;
    height: 32px !important;
}

.search-box .form-control:focus,
.search-box .form-select:focus {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.search-box .btn-primary,
.search-box .btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-box .btn-primary {
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border: none;
}

.search-box .btn-primary:hover {
    background: linear-gradient(135deg, #2d4a73, #1e293b);
}

.search-box .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Import options */
.import-options {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 16px;
}

.import-options .form-check-input:checked {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* ==========================================================
   ✅ IMPORT RESULTS - Résultats d'import améliorés
========================================================== */

/* Container principal */
.import-results {
    text-align: center;
    padding: 20px;
}

/* Header avec icône */
.import-results-header {
    margin-bottom: 24px;
}

.import-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--status-color, #22c55e) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    animation: pop-in 0.4s ease-out;
}

.import-status-icon i {
    font-size: 1.8rem;
    color: var(--status-color, #22c55e);
}

@keyframes pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.import-status-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}

.import-status-sub {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* Barre de progression */
.import-progress-container {
    margin-bottom: 24px;
}

.import-progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-bottom: 8px;
}

.import-progress-segment {
    height: 100%;
    transition: width 0.5s ease-out;
}

.import-progress-created {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.import-progress-updated {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.import-progress-errors {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.import-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

/* Compteurs */
.import-counters {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.import-counter {
    flex: 1;
    max-width: 100px;
    padding: 12px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.import-counter:hover {
    transform: translateY(-2px);
}

.import-counter-icon {
    margin-bottom: 4px;
}

.import-counter-icon i {
    font-size: 1.2rem;
}

.import-counter-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.import-counter-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

/* Couleurs des compteurs */
.import-counter-created {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.import-counter-created .import-counter-icon i,
.import-counter-created .import-counter-value {
    color: #16a34a;
}

.import-counter-updated {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.import-counter-updated .import-counter-icon i,
.import-counter-updated .import-counter-value {
    color: #2563eb;
}

.import-counter-errors {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.import-counter-errors .import-counter-icon i,
.import-counter-errors .import-counter-value {
    color: #dc2626;
}

/* Liste des erreurs */
.import-errors-container {
    text-align: left;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.import-errors-header {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #991b1b;
}

.import-errors-list {
    padding: 8px 14px;
}

.import-error-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #fecaca;
    font-size: 0.8rem;
}

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

.import-error-code {
    background: #dc2626;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.import-error-message {
    color: #7f1d1d;
}

.import-errors-more {
    padding: 8px 0;
    font-size: 0.75rem;
    color: #991b1b;
    font-style: italic;
}

/* Footer */
.import-results-footer {
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.import-refresh-notice {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.import-countdown {
    display: inline-block;
    background: #1e3a5f;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Loader amélioré */
.import-loading {
    padding: 40px 20px;
    text-align: center;
}

.import-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #1e3a5f;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 0.8s linear infinite;
}

.import-loading-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.import-loading-sub {
    font-size: 0.85rem;
    color: #64748b;
}

/* Progress container */
.progress-container {
    padding: 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
}

/* Spin animation */
.spin {
    animation: spin 1s linear infinite;
}

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

/* ==========================================================
   ✅ ALTERNATIVE IMPORT BUTTONS
========================================================== */

/* Bouton orange pour autres imports */
.btn-import-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
    transition: all 0.25s ease !important;
}

.btn-import-orange:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.5) !important;
    color: #fff !important;
}

/* Bouton vert pour synchronisation */
.btn-sync-green {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4) !important;
    transition: all 0.25s ease !important;
}

.btn-sync-green:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.5) !important;
    color: #fff !important;
}

/* Bouton violet pour export */
.btn-export-purple {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
    transition: all 0.25s ease !important;
}

.btn-export-purple:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.5) !important;
    color: #fff !important;
}

/* ==========================================================
   ✅ ALERTS - Messages d'alerte
========================================================== */
.alert {
    border: none;
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid;
}

.alert-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.05));
    color: #166534;
    border-left-color: #22c55e;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.05));
    color: #991b1b;
    border-left-color: #ef4444;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.05));
    color: #92400e;
    border-left-color: #f59e0b;
}

.alert-info {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.05));
    color: #0e7490;
    border-left-color: #06b6d4;
}

/* ==========================================================
   ✅ MODALS - Fenêtres modales (CORRIGÉ)
========================================================== */

/* Modal Container */
.modal {
    z-index: 1055;
}

.modal-backdrop {
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    z-index: 1056;
}

.modal-content {
    border: 3px solid #1e293b;
    border-radius: var(--radius-sm);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    background: #fff;
}

.modal-header {
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    color: #fff;
    padding: 16px 24px;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

/* Bouton de fermeture */
.modal-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.8;
}

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

.modal-body {
    padding: 24px;
    background: #fff;
}

.modal-footer {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    padding: 16px 24px;
}

/* Fullscreen Modal */
.modal-fullscreen .modal-content {
    border-radius: 0;
    border: none;
    height: 100%;
}

.modal-fullscreen .modal-header {
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    overflow-y: auto;
}

/* ==========================================================
   ✅ SECTION TITLE - Titres de section
========================================================== */
.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #1e293b;
}

.section-title__icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #1e3a5f, #0f172a);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.section-title__text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

/* ==========================================================
   ✅ HORIZONTAL RULE - Séparateur
========================================================== */
hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
    margin: 24px 0;
}

/* ==========================================================
   ✅ ACTION BAR - Barre d'actions
========================================================== */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.action-bar__title {
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-bar__title i {
    color: #1e3a5f;
}

.action-bar__buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================
   ✅ PROFILE CARD - Fiche utilisateur colorée
========================================================== */
.profile-card {
    background: #fff;
    border: 3px solid #1e293b;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.profile-card__header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    padding: 30px;
    text-align: center;
    position: relative;
}

.profile-card__header::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    border: 3px solid #1e293b;
}

.profile-card__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    margin-bottom: 16px;
}

.profile-card__name {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-card__role {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.profile-card__body {
    padding: 30px;
}

.profile-card__info {
    display: grid;
    gap: 16px;
}

.profile-card__row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border-left: 4px solid #1e3a5f;
}

.profile-card__row i {
    color: #1e3a5f;
    font-size: 1.1rem;
    margin-right: 12px;
    width: 24px;
}

.profile-card__label {
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-card__value {
    color: #1e293b;
    font-weight: 600;
    margin-top: 2px;
}

/* ==========================================================
   ✅ SEARCH RESULTS CONTAINER - Résultats de recherche
========================================================== */
/* Results Card Wrapper */
#div_recherche_resultats .card,
.results-wrapper {
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    background: var(--bg-surface);
}

/* Results Header */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-muted));
    border-bottom: 1px solid var(--border-light);
}

.results-header__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-header__title i {
    color: var(--primary);
}

.results-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
}

.results-header__actions {
    display: flex;
    gap: 8px;
}

/* Results Body */
.results-body {
    padding: 20px;
}

/* ==========================================================
   ✅ USER LIST - Liste des utilisateurs
========================================================== */

/* Table Style */
#div_recherche_resultats .table,
.users-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#div_recherche_resultats .table thead,
.users-table thead {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    position: sticky;
    top: 0;
    z-index: 10;
}

#div_recherche_resultats .table thead th,
.users-table thead th {
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border: none;
    white-space: nowrap;
}

#div_recherche_resultats .table thead th:first-child,
.users-table thead th:first-child {
    border-radius: var(--radius-sm) 0 0 0;
}

#div_recherche_resultats .table thead th:last-child,
.users-table thead th:last-child {
    border-radius: 0 var(--radius-sm) 0 0;
}

#div_recherche_resultats .table tbody tr,
.users-table tbody tr {
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--border-light);
}

#div_recherche_resultats .table tbody tr:last-child,
.users-table tbody tr:last-child {
    border-bottom: none;
}

#div_recherche_resultats .table tbody tr:hover,
.users-table tbody tr:hover {
    background-color: var(--primary-light);
}

#div_recherche_resultats .table tbody td,
.users-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* User Avatar in Results */
#div_recherche_resultats .table tbody td img,
.users-table tbody td img,
.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all 0.2s ease;
}

#div_recherche_resultats .table tbody tr:hover td img,
.users-table tbody tr:hover td img {
    border-color: var(--primary);
    transform: scale(1.05);
}

/* User Info Cell */
.user-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info-cell__details {
    display: flex;
    flex-direction: column;
}

.user-info-cell__name {
    font-weight: 600;
    color: var(--text-primary);
}

.user-info-cell__id {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Status Badge */
#div_recherche_resultats .badge,
.users-table .badge,
.status-badge {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-actif,
.badge.bg-success,
.status-badge--active {
    background: var(--success-bg) !important;
    color: var(--success) !important;
}

.badge-inactif,
.badge.bg-danger,
.status-badge--inactive {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
}

.badge-pending,
.badge.bg-warning,
.status-badge--pending {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
}

/* Action Buttons */
#div_recherche_resultats .btn-group,
.users-table .btn-group,
.action-buttons {
    display: flex;
    gap: 6px;
}

#div_recherche_resultats .btn-sm,
.users-table .btn-sm,
.action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

#div_recherche_resultats .btn-sm:hover,
.users-table .btn-sm:hover,
.action-btn:hover {
    transform: translateY(-2px);
}

.action-btn--view {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.action-btn--view:hover {
    background: var(--primary);
    color: #fff;
}

.action-btn--edit {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.action-btn--edit:hover {
    background: var(--warning);
    color: #fff;
}

.action-btn--delete {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.action-btn--delete:hover {
    background: var(--danger);
    color: #fff;
}

/* ==========================================================
   ✅ USER CARDS GRID - Grille de cartes
========================================================== */
.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

.user-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
}

.user-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.user-card__avatar {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-surface);
    box-shadow: var(--shadow-md);
    margin: 0 auto 16px;
    transition: transform 0.25s ease;
}

.user-card:hover .user-card__avatar {
    transform: scale(1.05);
}

.user-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.user-card__role {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.user-card__id {
    font-size: 0.75rem;
    color: var(--text-light);
    font-family: monospace;
    margin-bottom: 16px;
}

.user-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.user-card__status.active {
    background: var(--success-bg);
    color: var(--success);
}

.user-card__status.active::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

.user-card__status.inactive {
    background: var(--danger-bg);
    color: var(--danger);
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.user-card__actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* ==========================================================
   ✅ EMPTY STATE - État vide / Aucun résultat
========================================================== */
.empty-state,
#div_recherche_resultats:empty::after {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}

#div_recherche_resultats:empty::after {
    content: 'Lancez une recherche pour afficher les résultats';
    display: block;
    font-size: 0.95rem;
}

.empty-state__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-muted));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state__icon i {
    font-size: 2rem;
    color: var(--text-light);
}

.empty-state__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state__text {
    font-size: 0.9rem;
    max-width: 320px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

.empty-state__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.empty-state__action:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    color: #fff;
}

/* ==========================================================
   ✅ LOADING STATE - Chargement
========================================================== */
.results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
}

.results-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.results-loading__text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Skeleton Loading */
.results-skeleton {
    padding: 20px;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.skeleton-row:last-child {
    border-bottom: none;
}

.skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-soft) 50%, var(--bg-muted) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-text {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-soft) 50%, var(--bg-muted) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-text--name {
    width: 140px;
    margin-bottom: 6px;
}

.skeleton-text--id {
    width: 80px;
    height: 10px;
}

.skeleton-text--role {
    width: 100px;
}

.skeleton-text--status {
    width: 60px;
    height: 24px;
    border-radius: var(--radius-full);
}

/* ==========================================================
   ✅ PAGINATION - Pagination des résultats
========================================================== */
.results-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border-light);
}

.results-pagination__info {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.results-pagination__info strong {
    color: var(--text-primary);
}

.results-pagination__nav {
    display: flex;
    gap: 4px;
}

.results-pagination__btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.results-pagination__btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.results-pagination__btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.results-pagination__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================
   ✅ RESPONSIVE - Adaptations mobiles
========================================================== */
@media (max-width: 991.98px) {
    #div_recherche_resultats .table thead,
    .users-table thead {
        display: none;
    }

    #div_recherche_resultats .table tbody tr,
    .users-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
        border-bottom: 1px solid var(--border-light);
    }

    #div_recherche_resultats .table tbody td,
    .users-table tbody td {
        padding: 0;
        border: none;
    }

    #div_recherche_resultats .table tbody td::before,
    .users-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .users-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
        padding: 16px;
    }

    .results-pagination {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    #div_recherche_resultats {
        margin-top: 16px;
    }

    .results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

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

    .user-card {
        padding: 20px;
    }

    .user-card__avatar {
        width: 70px;
        height: 70px;
    }

    .empty-state {
        padding: 40px 20px;
    }

    .empty-state__icon {
        width: 64px;
        height: 64px;
    }

    .empty-state__icon i {
        font-size: 1.5rem;
    }
}

/* ==========================================================
   ✅ USER PROFILE CARD - Fiche Utilisateur
========================================================== */

/* Profile Card Container */
.card.profile-card,
.card:has(.profile-avatar) {
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Profile Avatar */
.profile-avatar,
.card-body > .text-center > img,
.card-body > p.text-center > img {
    width: 140px !important;
    height: 140px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--bg-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 4px var(--primary-light);
    margin: 20px auto;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-avatar:hover,
.card-body > .text-center > img:hover,
.card-body > p.text-center > img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),
    0 0 0 4px var(--primary);
}

/* Profile Info Table */
.table-lg,
.table.table-lg {
    margin-top: 16px;
}

.table-lg tr {
    border-bottom: 1px solid var(--border-light);
}

.table-lg tr:last-child {
    border-bottom: none;
}

.table-lg td {
    padding: 14px 8px;
    vertical-align: middle;
}

.table-lg td i {
    color: var(--primary);
    margin-right: 8px;
    font-size: 1.1rem;
}

.table-lg td.fw-bold {
    color: var(--text-primary);
}

.table-lg td.text-end {
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================================
   ✅ SEARCH FORM - Formulaire de recherche
========================================================== */

/* Search Form Container */
#form_recherche_utilisateurs,
.search-form {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
}

#form_recherche_utilisateurs .row,
.search-form .row {
    align-items: flex-end;
}

#form_recherche_utilisateurs .form-control,
#form_recherche_utilisateurs .form-select,
.search-form .form-control,
.search-form .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background-color: var(--bg-surface);
}

#form_recherche_utilisateurs .form-control:focus,
#form_recherche_utilisateurs .form-select:focus,
.search-form .form-control:focus,
.search-form .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

#form_recherche_utilisateurs .form-control::placeholder,
.search-form .form-control::placeholder {
    color: var(--text-light);
}

/* Search Button */
#button_rechercher,
.search-form .btn-search {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.2s ease;
}

#button_rechercher:hover,
.search-form .btn-search:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Search Results Container */
#div_recherche_resultats,
.search-results {
    margin-top: 24px;
    min-height: 100px;
}

/* Button Group Styled */
.btn-group:has(.btn-outline-blue) {
    gap: 8px;
}

/* ==========================================================
   ✅ RESULTS TABLE - Tableau des résultats
========================================================== */
#div_recherche_resultats .table,
.results-table {
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

#div_recherche_resultats .table thead,
.results-table thead {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
}

#div_recherche_resultats .table thead th,
.results-table thead th {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 14px 12px;
    border: none;
}

#div_recherche_resultats .table tbody tr,
.results-table tbody tr {
    transition: background-color 0.15s ease;
}

#div_recherche_resultats .table tbody tr:hover,
.results-table tbody tr:hover {
    background-color: var(--bg-soft);
}

#div_recherche_resultats .table tbody td,
.results-table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-color: var(--border-light);
}

/* User Avatar in Table */
#div_recherche_resultats .table tbody td img,
.results-table tbody td img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-light);
}

/* Status Badge in Table */
#div_recherche_resultats .badge,
.results-table .badge {
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Action Buttons in Table */
#div_recherche_resultats .btn-sm,
.results-table .btn-sm {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}

/* ==========================================================
   ✅ USER CARD GRID - Grille d'utilisateurs
========================================================== */
.user-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.user-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.user-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    margin-bottom: 12px;
}

.user-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.user-card__role {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.user-card__status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.user-card__status.active {
    background: var(--success-bg);
    color: var(--success);
}

.user-card__status.inactive {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ==========================================================
   ✅ EMPTY STATE - État vide
========================================================== */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state__icon {
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state__text {
    font-size: 0.9rem;
    max-width: 300px;
    margin: 0 auto;
}

/* ==========================================================
   ✅ SEARCH FORM RESPONSIVE
========================================================== */
@media (max-width: 991.98px) {
    #form_recherche_utilisateurs,
    .search-form {
        padding: 16px;
    }

    #form_recherche_utilisateurs .col-sm-2,
    #form_recherche_utilisateurs .col-sm,
    #form_recherche_utilisateurs .col-sm-1 {
        margin-bottom: 12px;
    }
}

@media (max-width: 575.98px) {
    #form_recherche_utilisateurs .row,
    .search-form .row {
        flex-direction: column;
    }

    #form_recherche_utilisateurs .col-sm-2,
    #form_recherche_utilisateurs .col-sm,
    #form_recherche_utilisateurs .col-sm-1,
    .search-form [class*="col-"] {
        width: 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    #form_recherche_utilisateurs .col-sm-1,
    .search-form .col-sm-1 {
        margin-bottom: 0;
    }

    #button_rechercher,
    .search-form .btn-search {
        width: 100%;
    }

    .profile-avatar,
    .card-body > .text-center > img,
    .card-body > p.text-center > img {
        width: 120px !important;
        height: 120px !important;
    }
}

/* ==========================================================
   ✅ MENU BOXES - Navigation Cards
========================================================== */

/* Container */
#div-breadcrumbs {
    margin-bottom: 20px;
}

/* Container des boxes */
#div-boxes {
    margin-top: 20px;
}

#div-boxes > .card,
#div-boxes.container > .card {
    border: 2px solid #1e3a5f !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
}

#div-boxes > .card > .card-body,
#div-boxes .card > .card-body {
    padding: 24px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

#div-boxes .row {
    margin: -8px;
}

#div-boxes .row > [class*="col"] {
    padding: 8px;
}

/* Fix pour d-grid et d-inline-block */
#div-boxes .d-grid,
#div-boxes .d-inline-block {
    display: block !important;
    width: 100% !important;
    height: 100%;
}

/* Box button - Style amélioré */
#div-boxes .btn-blue,
#div-boxes .btn.btn-lg,
#div-boxes .d-grid .btn,
.btn-boxes .btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 140px !important;
    padding: 24px 16px !important;
    background: linear-gradient(145deg, #0f3558, #0a1e36) !important;
    border: 1px solid rgba(42, 172, 226, 0.1) !important;
    border-radius: var(--radius) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    transition: all 0.25s ease !important;
    position: relative;
    overflow: hidden;
}

#div-boxes .btn-blue::before,
#div-boxes .btn.btn-lg::before,
#div-boxes .d-grid .btn::before,
.btn-boxes .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
    rgba(42, 172, 226, 0.15) 0%,
    rgba(58, 170, 53, 0.08) 50%,
    transparent 100%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
}

#div-boxes .btn-blue:hover,
#div-boxes .btn.btn-lg:hover,
#div-boxes .d-grid .btn:hover,
.btn-boxes .btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(42, 172, 226, 0.3) !important;
    border-color: rgba(42, 172, 226, 0.35) !important;
    color: #fff !important;
}

#div-boxes .btn-blue:hover::before,
#div-boxes .btn.btn-lg:hover::before,
#div-boxes .d-grid .btn:hover::before,
.btn-boxes .btn:hover::before {
    opacity: 1;
}

#div-boxes .btn-blue:active,
#div-boxes .btn.btn-lg:active,
#div-boxes .d-grid .btn:active,
.btn-boxes .btn:active {
    transform: translateY(-2px) !important;
}

/* Icône dans le bouton */
#div-boxes .btn-blue i,
#div-boxes .btn.btn-lg i,
#div-boxes .d-grid .btn i,
.btn-boxes .btn i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    transition: all 0.25s ease !important;
    position: relative;
    z-index: 1;
}

#div-boxes .btn-blue:hover i,
#div-boxes .btn.btn-lg:hover i,
#div-boxes .d-grid .btn:hover i,
.btn-boxes .btn:hover i {
    background: rgba(42, 172, 226, 0.25) !important;
    transform: scale(1.1);
}

/* Correction du br dans les boutons (icône + texte) */
#div-boxes .btn-blue br,
#div-boxes .btn.btn-lg br,
.btn-boxes .btn br {
    display: none !important;
}

/* Responsive boxes */
@media (max-width: 991.98px) {
    #div-boxes .row > .col-md-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    #div-boxes .btn-blue,
    #div-boxes .btn.btn-lg,
    #div-boxes .d-grid .btn,
    .btn-boxes .btn {
        min-height: 120px !important;
        padding: 20px 14px !important;
    }

    #div-boxes .btn-blue i,
    #div-boxes .btn.btn-lg i,
    #div-boxes .d-grid .btn i,
    .btn-boxes .btn i {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
    }
}

@media (max-width: 767.98px) {
    #div-boxes .row > .col-md-3,
    #div-boxes .row > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    #div-boxes .btn-blue,
    #div-boxes .btn.btn-lg,
    #div-boxes .d-grid .btn,
    .btn-boxes .btn {
        min-height: 100px !important;
        padding: 16px 12px !important;
        font-size: 0.85rem !important;
    }

    #div-boxes .btn-blue i,
    #div-boxes .btn.btn-lg i,
    #div-boxes .d-grid .btn i,
    .btn-boxes .btn i {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }
}

/* Correction des styles inline */
#div-boxes .btn-blue[style*="color"],
#div-boxes .btn.btn-lg[style*="color"],
#div-boxes .d-grid .btn[style*="color"] {
    color: #fff !important;
}

/* .btn-blue standard (hors menu boxes) */
.btn-blue:not(#div-boxes .btn-blue):not(.btn-boxes .btn):not(#div-boxes .btn) {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2)) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 20px !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.3) !important;
}

/* .btn-blue version compacte */
.btn-blue.btn-sm {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.25) !important;
}

.btn-blue.btn-sm:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35) !important;
}

/* Menu Box Description */
.btn-boxes .btn .small {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.4;
    max-width: 200px;
    margin: 0 auto;
}

/* ===== Menu Boxes Grid Alternative ===== */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.menu-card {
    background: linear-gradient(145deg, var(--nav-bg-1), var(--nav-bg-2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.menu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(56, 189, 248, 0.3);
}

.menu-card:hover::before {
    opacity: 1;
}

.menu-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(20, 184, 166, 0.1));
    border-radius: 14px;
    margin-bottom: 14px;
    transition: all 0.25s ease;
}

.menu-card__icon i {
    font-size: 1.5rem;
    color: var(--cyan);
    transition: transform 0.25s ease;
}

.menu-card:hover .menu-card__icon {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(20, 184, 166, 0.15));
}

.menu-card:hover .menu-card__icon i {
    transform: scale(1.15);
}

.menu-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    transition: color 0.25s ease;
}

.menu-card:hover .menu-card__title {
    color: var(--cyan);
}

.menu-card__desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* ===== Empty State ===== */
#div-boxes .alert-warning {
    background: linear-gradient(135deg, var(--warning-bg), rgba(245, 158, 11, 0.05));
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 24px;
}

#div-boxes .alert-warning::before {
    content: '⚠️';
    display: block;
    font-size: 2rem;
    margin-bottom: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    #div-boxes .card-body {
        padding: 20px;
    }

    .btn-boxes .btn {
        min-height: 140px;
        padding: 24px 16px !important;
    }

    .btn-boxes .btn .fs-1,
    .btn-boxes .btn-icon-wrapper {
        width: 56px;
        height: 56px;
        margin-bottom: 12px !important;
    }

    .btn-boxes .btn .fs-1 i {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    #div-breadcrumbs {
        margin-bottom: 16px;
    }

    #div-boxes .card-body {
        padding: 16px;
    }

    .btn-boxes .btn {
        min-height: 120px;
        padding: 20px 14px !important;
    }

    .btn-boxes .btn .fs-1,
    .btn-boxes .btn-icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .btn-boxes .btn .fs-1 i {
        font-size: 1.3rem !important;
    }

    .btn-boxes .btn .fw-semibold {
        font-size: 0.9rem !important;
    }

    .btn-boxes .btn .small {
        font-size: 0.75rem !important;
    }
}

/* ==========================================================
   ✅ BREADCRUMBS - Navigation Trail
========================================================== */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xs);
    font-size: 0.875rem;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    position: relative;
}

.breadcrumbs__item i {
    font-size: 1rem;
}

.breadcrumbs__item:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Separator */
.breadcrumbs__item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-light);
    border-bottom: 2px solid var(--text-light);
    transform: rotate(-45deg);
    margin-left: 12px;
    opacity: 0.6;
}

/* Active Item */
.breadcrumbs__item.is-active {
    color: var(--text-primary);
    font-weight: 600;
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-muted));
    cursor: default;
}

.breadcrumbs__item.is-active:hover {
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-muted));
    color: var(--text-primary);
}

.breadcrumbs__item.is-active i {
    color: var(--primary);
}

/* ===== Breadcrumbs Variants ===== */

/* Dark variant (pour navbar ou header sombre) */
.breadcrumbs.breadcrumbs--dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.breadcrumbs.breadcrumbs--dark .breadcrumbs__item {
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumbs.breadcrumbs--dark .breadcrumbs__item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.breadcrumbs.breadcrumbs--dark .breadcrumbs__item:not(:last-child)::after {
    border-color: rgba(255, 255, 255, 0.4);
}

.breadcrumbs.breadcrumbs--dark .breadcrumbs__item.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.breadcrumbs.breadcrumbs--dark .breadcrumbs__item.is-active i {
    color: var(--cyan);
}

/* Minimal variant (sans fond) */
.breadcrumbs.breadcrumbs--minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0;
}

.breadcrumbs.breadcrumbs--minimal .breadcrumbs__item {
    padding: 4px 8px;
}

.breadcrumbs.breadcrumbs--minimal .breadcrumbs__item.is-active {
    background: transparent;
}

/* Pill variant */
.breadcrumbs.breadcrumbs--pills {
    gap: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0;
}

.breadcrumbs.breadcrumbs--pills .breadcrumbs__item {
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    padding: 6px 14px;
}

.breadcrumbs.breadcrumbs--pills .breadcrumbs__item:not(:last-child)::after {
    display: none;
}

.breadcrumbs.breadcrumbs--pills .breadcrumbs__item.is-active {
    background: var(--primary);
    color: #fff;
}

.breadcrumbs.breadcrumbs--pills .breadcrumbs__item.is-active i {
    color: #fff;
}

/* ===== Breadcrumbs Responsive ===== */
@media (max-width: 575.98px) {
    .breadcrumbs {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .breadcrumbs__item {
        padding: 5px 8px;
        gap: 4px;
    }

    .breadcrumbs__item i {
        font-size: 0.9rem;
    }

    .breadcrumbs__item:not(:last-child)::after {
        width: 5px;
        height: 5px;
        margin-left: 8px;
    }

    /* Cacher le texte sur mobile, garder l'icône pour home */
    .breadcrumbs__item:first-child span {
        display: none;
    }
}

/* ==========================================================
   ✅ PRINT STYLES
========================================================== */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

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

    .btn, footer, .modal, .navbar, .no-print {
        display: none !important;
    }

    .stat-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }

    .dashboard-container {
        background: #fff !important;
        box-shadow: none !important;
    }

    /* Bordereaux print styles */
    #print-content {
        width: 100% !important;
    }

    #print-content .col-sm-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }

    #table_bordereau_factures {
        font-size: 11px;
    }

    #table_bordereau_factures th,
    #table_bordereau_factures td {
        padding: 4px 6px !important;
    }

    .breadcrumbs {
        display: none !important;
    }

    #div-breadcrumbs {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .print-header {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #333;
    }

    .print-header h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
        font-weight: bold;
    }

    .print-header h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .print-header p {
        margin: 0;
        font-size: 12px;
        color: #666;
    }
}

/* Print-only elements - hidden by default */
.print-only {
    display: none;
}

/* ==========================================================
   SECTIONS FACTURES - Identification visuelle
========================================================== */
.section_factures {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--bg-dark);
    border-bottom: 4px solid var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.section_factures:hover {
    border-left-color: var(--teal);
    border-bottom: 4px solid var(--teal);
    box-shadow: var(--shadow-sm);
}

.section_factures .sf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.section_factures .sf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    color: #ffffff;
    font-size: 15px;
    flex-shrink: 0;
}

.section_factures .sf-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.section_factures .form-label {
    color: #0f172a;
}

.section_factures .form-control,
.section_factures .form-select {
    color: #0f172a;
}

.section_factures small {
    color: #475569;
}

.section_factures strong {
    color: #0f172a;
}

/* Radio buttons inline et centrés */
#div_statut_etablissement,
#div_informations_complementaires,
#div_sortie_patient {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Patient header card */
.facture-patient-card {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    margin-bottom: 20px;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.facture-patient-card .table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.facture-patient-card .table td {
    border-color: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
}

.facture-patient-card .table small {
    color: var(--text-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.facture-patient-card .table strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Séparateur entre en-tête patient et sections */
.facture-separator {
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--teal), transparent);
    border: none;
    margin: 8px 0 20px;
    border-radius: var(--radius-full);
}

/* Actions footer */
.facture-actions {
    margin-top: 12px;
    padding: 20px 24px;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.facture-actions .facture-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-xs);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.facture-actions .facture-btn i {
    font-size: 1.05rem;
}

.facture-actions .facture-btn-back {
    background: #ffffff;
    color: #475569;
    border: 1.5px solid var(--border);
}

.facture-actions .facture-btn-back:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.facture-actions .facture-btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1.5px solid var(--danger-border);
}

.facture-actions .facture-btn-danger:hover {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

.facture-actions .facture-btn-success {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(7, 26, 47, 0.2);
}

.facture-actions .facture-btn-success:hover {
    box-shadow: 0 6px 18px rgba(7, 26, 47, 0.3);
    transform: translateY(-1px);
}

.facture-actions .facture-btn-success i {
    color: #38bdf8;
}

/* Totaux facture - récapitulatif recherche */
.facture-totaux {
    border-top: 2px solid var(--border-light);
    padding-top: 16px;
}

.facture-total-item {
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    text-align: center;
}

.facture-total-item small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.facture-total-item strong {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 700;
}

.facture-total-ro {
    border-left: 3px solid var(--primary);
}

.facture-total-ro strong {
    color: var(--primary);
}

.facture-total-rc {
    border-left: 3px solid var(--info);
}

.facture-total-rc strong {
    color: var(--info);
}

.facture-total-patient {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-left: 3px solid var(--success);
}

.facture-total-patient strong {
    color: var(--success);
}

/* ==========================================================
   PRESTATIONS - Cartes d'édition facture
========================================================== */
.prest-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-xs);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.prest-card:hover {
    border-left-color: var(--teal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* En-tête : denomination + supprimer */
.prest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-light);
}

.prest-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.prest-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.prest-denomination {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.prest-code-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.prest-code-label i {
    color: var(--text-light);
}

.prest-btn-suppr {
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s;
}

.prest-btn-suppr:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* Dents */
.prest-dents {
    padding: 5px 14px;
    background: var(--info-bg);
    border-bottom: 1px solid var(--info-border);
    font-size: 0.78rem;
    color: var(--info);
}

.prest-dents i {
    margin-right: 4px;
}

/* Tableau des valeurs */
.prest-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.prest-table thead th {
    padding: 4px 10px 3px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-muted);
}

.prest-table thead th .bi-circle-fill {
    font-size: 0.45rem;
    vertical-align: middle;
}

.prest-table thead th sup {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.62rem;
}

.prest-table tbody td {
    padding: 4px 10px;
    text-align: right;
    vertical-align: middle;
}

/* Input sans style Bootstrap — texte brut aligné à droite */
.prest-val {
    all: unset;
    display: block;
    width: 100%;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    box-sizing: border-box;
}

.prest-val:disabled {
    opacity: 1;
    color: var(--text-primary);
}

/* Colonne Patient mise en valeur */
.prest-th-patient {
    color: var(--teal) !important;
}

.prest-td-patient {
    background: rgba(20, 184, 166, 0.04);
}

.prest-val-patient {
    color: var(--teal) !important;
    font-weight: 700 !important;
}

/* Select Quantité */
.prest-select {
    all: unset;
    display: block;
    width: 100%;
    margin-left: auto;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    box-sizing: border-box;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    transition: border-color 0.15s;
}

.prest-select:hover,
.prest-select:focus {
    border-color: var(--primary);
    outline: none;
}

.prest-td-qte {
    text-align: center !important;
}

/* Totaux */
.prest-totaux {
    background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
    border-radius: var(--radius-xs);
    padding: 14px 18px;
    margin-top: 10px;
}

.prest-totaux-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.prest-totaux-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prest-totaux-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
}

.prest-totaux-value {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prest-totaux-patient {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.prest-totaux-patient .prest-totaux-label {
    color: var(--cyan);
    font-weight: 600;
}

.prest-totaux-patient .prest-totaux-value {
    color: var(--cyan);
    font-size: 1.05rem;
}

/* Responsive : scroll horizontal sur petits écrans */
@media (max-width: 768px) {
    .prest-table {
        table-layout: auto;
    }

    .prest-card {
        overflow-x: auto;
    }
}

/* ==========================================================
   DENTAL CHART - Sélection de dents
========================================================== */

.dental-container {
    --dc-tooth-size: 48px;
    --dc-gap: 6px;
    --dc-selected: var(--teal);
    --dc-selected-glow: rgba(20, 184, 166, 0.35);
    --dc-incisor: var(--primary);
    --dc-canine: var(--brand-amber);
    --dc-premolar: var(--brand-violet);
    --dc-molar: var(--brand-rose);
    max-width: 640px;
    margin: 0 auto;
}

/* --- Jaw sections --- */

.jaw {
    padding: 16px 0;
}

.jaw + .jaw {
    border-top: 2px dashed var(--border);
}

.jaw-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 10px;
}

/* --- Teeth row --- */

.teeth-row {
    display: flex;
    justify-content: center;
    gap: var(--dc-gap);
    flex-wrap: wrap;
}

/* --- Individual tooth --- */

.tooth {
    width: var(--dc-tooth-size);
    height: var(--dc-tooth-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition);
    position: relative;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.tooth:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--text-light);
}

.tooth:active {
    transform: translateY(0);
}

/* Tooth type indicators (bottom bar) */

.tooth::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 25%;
    right: 25%;
    height: 3px;
    border-radius: var(--radius-full);
    opacity: 0.5;
    transition: opacity var(--transition);
}

.tooth.incisor::after {
    background: var(--dc-incisor);
}

.tooth.canine::after {
    background: var(--dc-canine);
}

.tooth.premolar::after {
    background: var(--dc-premolar);
}

.tooth.molar::after {
    background: var(--dc-molar);
}

.tooth:hover::after {
    opacity: 1;
}

/* Selected state */

.tooth.selected {
    background: var(--dc-selected);
    border-color: var(--dc-selected);
    color: #fff;
    box-shadow: 0 4px 14px var(--dc-selected-glow);
    transform: translateY(-2px);
}

.tooth.selected::after {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.tooth.selected:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px var(--dc-selected-glow);
}

/* --- Selected teeth summary --- */

.selected-teeth {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.selected-teeth h5 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.selected-tooth-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    font-style: normal;
    color: var(--dc-selected);
    background: var(--teal-light);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

/* --- Age selector (Adulte / Enfant) --- */

.age-selector {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
}

.age-selector label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition);
}

.age-selector label:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.age-selector input[type="radio"] {
    accent-color: var(--primary);
}

.age-selector input[type="radio"]:checked + span,
.age-selector label:has(input:checked) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.age-selector label.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.age-selector label.disabled:hover {
    border-color: var(--border);
    color: var(--text-muted);
}

/* --- Info panel --- */

.dental-container .info-panel {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
}

.dental-container .info-panel strong {
    color: var(--info);
}

.dental-container .info-panel ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.dental-container .info-panel li {
    margin-bottom: 2px;
}

/* --- Controls / buttons bar --- */

.dental-container .controls {
    margin-bottom: 8px;
}

/* --- Responsive --- */

@media (max-width: 576px) {
    .dental-container {
        --dc-tooth-size: 38px;
        --dc-gap: 4px;
    }

    .tooth {
        font-size: 0.65rem;
        border-radius: var(--radius-xs);
    }

    .age-selector {
        gap: 10px;
    }

    .age-selector label {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* =========================================================================
   Initialisation BDD
   ========================================================================= */
body.init-page {
    background: linear-gradient(145deg, var(--nav-bg-1), var(--nav-bg-2)) !important;
    min-height: 100vh;
}

.init-glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
}

.init-progress-ring {
    transform: rotate(-90deg);
}

.init-progress-ring__circle {
    transition: stroke-dashoffset 0.5s ease;
    transform-origin: 50% 50%;
}

.init-stats-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.init-stats-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.08);
}

.init-stats-number {
    font-size: 2.25rem;
    font-weight: 800;
}

.init-stats-card.primary .init-stats-number {
    color: var(--cyan);
}

.init-stats-card.success .init-stats-number {
    color: var(--success);
}

.init-stats-card.warning .init-stats-number {
    color: var(--warning);
}

.init-stats-card.danger .init-stats-number {
    color: var(--danger);
}

.init-pulse {
    animation: initPulse 2s infinite;
}

@keyframes initPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.init-terminal {
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    border: 1px solid var(--border);
}

.init-terminal-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.init-terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.init-terminal-body {
    padding: 1rem;
    color: var(--nav-text);
    max-height: 320px;
    overflow-y: auto;
}

.init-terminal-body::-webkit-scrollbar {
    width: 5px;
}

.init-terminal-body::-webkit-scrollbar-track {
    background: transparent;
}

.init-terminal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.init-log-line {
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.init-log-line:last-child {
    border-bottom: none;
}

.init-log-info {
    color: var(--cyan);
}

.init-log-success {
    color: var(--success);
}

.init-log-warning {
    color: var(--warning);
}

.init-log-error {
    color: var(--danger);
}

.init-btn-continue {
    background: linear-gradient(145deg, var(--teal), var(--cyan), var(--primary));
    border: none;
    padding: 0.85rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    color: #fff;
    box-shadow: var(--btn-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.init-btn-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(56, 189, 248, 0.3);
    color: #fff;
}

.init-hidden {
    display: none !important;
}

.init-checkmark {
    width: 70px;
    height: 70px;
}

.init-checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke: var(--success);
    fill: none;
    animation: initStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.init-checkmark__check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: var(--success);
    fill: none;
    animation: initStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes initStroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.init-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: initSpin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes initSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Import Progress Styles
   ======================================== */
.import-steps-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.import-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #f8f9fa;
    border-left: 4px solid #dee2e6;
    transition: all 0.3s ease;
}

.import-step.step-success {
    background: #d1fae5;
    border-left-color: #10b981;
}

.import-step.step-error {
    background: #fee2e2;
    border-left-color: #ef4444;
}

.import-step.step-current {
    background: #dbeafe;
    border-left-color: #3b82f6;
}

.import-step.step-pending {
    opacity: 0.6;
}

.import-step-icon {
    width: 24px;
    text-align: center;
}

.import-step-content {
    flex: 1;
}

.import-step-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.import-step-stats {
    font-size: 0.875rem;
}

.import-results {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.import-counters {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.import-counter {
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    min-width: 100px;
}

.import-counter-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.import-counter-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
    font-weight: 600;
    margin-top: 0.25rem;
}

.import-progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.import-progress-fill {
    height: 100%;
    background: white;
    border-radius: 5px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.import-countdown {
    font-size: 0.9rem;
    opacity: 0.95;
    font-weight: 500;
}

.import-actions {
    margin-top: 1rem;
}

.import-results-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* ✅ IMPORT REFERENTIELS - Styles */

.import-loading-subtext {
    font-size: 0.875rem;
}

.import-step-label {
    font-weight: 500;
}

.import-steps-summary {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.import-step-summary-item {
    margin-bottom: 16px;
}

.import-step-summary-item:last-child {
    margin-bottom: 0;
}

/* ✅ FACTURATION - Styles */

/* Container principal */
.facturation-container {
    padding: 1.5rem 0;
}

/* Header avec stats */
.page-header {
    margin-bottom: 1.5rem;
}

/* Header + Actions sur la même ligne */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.page-header-left {
    flex: 1 1 300px;
    min-width: 250px;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* Responsive header */
@media (max-width: 992px) {
    .page-header-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-left {
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .page-header-actions {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .page-header-bar {
        padding: 1rem;
    }

    .page-header-actions {
        flex-direction: column;
        width: 100%;
    }

    .page-header-actions .btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* Actions buttons */
.actions-bar {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

/* Styles de base pour tous les btn-action-* */
.btn-action,
.btn-action-primary,
.btn-action-success,
.btn-action-secondary,
.btn-action-warning,
.btn-action-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    min-height: 42px;
}

.btn-action i,
.btn-action-primary i,
.btn-action-success i,
.btn-action-secondary i,
.btn-action-warning i,
.btn-action-danger i {
    font-size: 1rem;
}

.btn-action-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(42, 172, 226, 0.3);
}

.btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(42, 172, 226, 0.4);
    color: white;
}

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

.btn-action-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--green-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(58, 170, 53, 0.3);
}

.btn-action-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(58, 170, 53, 0.4);
    color: white;
}

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

.btn-action-secondary {
    background: var(--bg-surface);
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-xs);
}

.btn-action-secondary:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 172, 226, 0.3);
}

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

.btn-action-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--orange-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(232, 139, 45, 0.3);
}

.btn-action-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(232, 139, 45, 0.4);
    color: white;
}

.btn-action-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-action-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
    color: white;
}

/* Section cards */
.section-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.section-title-icon.new {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.section-title-icon.pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.section-title-icon.validated {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}

.section-badge {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    z-index: 1;
}

.section-body {
    padding: 1.5rem;
}

/* Facture detail card */
.facture-detail-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.facture-detail-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
}

.facture-numero {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.facture-meta {
    opacity: 0.9;
    font-size: 0.9rem;
}

.facture-detail-body {
    padding: 1.5rem;
}

/* Status variants */
.status-new {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-new .dot {
    background: #3b82f6;
}

.status-pending {
    background: #fef3c7;
    color: #b45309;
}

.status-pending .dot {
    background: #f59e0b;
}

.status-validated {
    background: #d1fae5;
    color: #065f46;
}

.status-validated .dot {
    background: #10b981;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Empty state variants */
.empty-state-icon {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    font-size: 0.9rem;
}

/* Form search in sections */
.search-form-inline {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-form-inline .form-group {
    flex: 1;
    min-width: 150px;
}

.search-form-inline .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.search-form-inline .form-control,
.search-form-inline .form-select {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1rem;
}

.search-form-inline .form-control:focus,
.search-form-inline .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-search-inline {
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: white;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-search-inline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    color: white;
}

/* Results table area */
.results-area {
    margin-top: 1.5rem;
}

/* ===== Tables de facturation modernisées ===== */
.facturation-container .table {
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e2e8f0;
    margin-bottom: 0;
}

.facturation-container .table thead {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

.facturation-container .table thead th {
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem;
    border: none;
    white-space: nowrap;
}

.facturation-container .table thead.table-dark {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
}

.facturation-container .table thead.table-dark th {
    background: transparent !important;
}

.facturation-container .table tbody tr {
    transition: all 0.15s ease;
}

.facturation-container .table tbody tr:hover {
    background-color: rgba(42, 172, 226, 0.06) !important;
}

.facturation-container .table tbody td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    border-color: #f1f5f9;
    font-size: 0.875rem;
}

.facturation-container .table tbody tr.table-light {
    background-color: #fff;
}

.facturation-container .table tbody tr.table-warning {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-left: 3px solid #f59e0b;
}

.facturation-container .table tbody tr.table-danger {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-left: 3px solid #ef4444;
}

.facturation-container .table tfoot {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

.facturation-container .table tfoot.table-dark {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
}

.facturation-container .table tfoot th {
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.875rem 0.75rem;
    border: none;
    background: transparent !important;
}

.facturation-container .table a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.facturation-container .table a:hover {
    color: var(--primary-hover);
    transform: scale(1.15);
    display: inline-block;
}

.facturation-container .table a i {
    font-size: 1.1rem;
}

/* DataTables integration */
.facturation-container .dataTables_wrapper {
    padding-top: 0.5rem;
}

.facturation-container .dataTables_wrapper .dataTables_length,
.facturation-container .dataTables_wrapper .dataTables_filter,
.facturation-container .dataTables_wrapper .dataTables_info,
.facturation-container .dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.facturation-container .dataTables_wrapper .dataTables_length select,
.facturation-container .dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
}

.facturation-container .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    margin: 0 2px;
    border: none !important;
    padding: 0.5rem 0.875rem !important;
}

.facturation-container .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    color: white !important;
    border: none !important;
}

.facturation-container .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--bg-muted) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

/* Formulaires de recherche dans sections */
.section-body .form_recherche {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.section-body .form_recherche .row {
    align-items: center;
    width: 100%;
}

.section-body .form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.section-body .form-group .form-control,
.section-body .form-group .form-select {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.section-body .form-group .form-control:focus,
.section-body .form-group .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42, 172, 226, 0.15);
    outline: none;
}

.section-body .btn-primary,
.section-body button[type="submit"] {
    height: 42px;
    padding: 0 1.25rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.section-body .btn-primary:hover,
.section-body button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 172, 226, 0.35);
}

/* Modal - Empty/success/error states */
.empty-search-state,
.no-results-state,
.success-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #64748b;
}

.empty-search-state i,
.no-results-state i,
.success-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.empty-search-state i {
    color: #94a3b8;
}

.no-results-state i {
    color: #f59e0b;
}

.success-state i {
    color: #10b981;
}

.success-state {
    color: #065f46;
    background: #d1fae5;
    border-radius: 12px;
}

/* Liste patients */
.patients-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Carte patient */
.patient-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.patient-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.patient-card-photo {
    flex-shrink: 0;
    position: relative;
}

.patient-photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
}

.patient-genre-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-pink {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.patient-photo-lg {
    width: 100%;
    max-width: 120px;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #e2e8f0;
}

.patient-card-info {
    flex: 1;
    min-width: 0;
}

.patient-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.patient-name {
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
}

.patient-card-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.detail-row {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-label i {
    margin-right: 0.25rem;
}

.detail-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.detail-value.highlight {
    color: #2563eb;
    font-weight: 700;
}

.detail-row.full-width {
    grid-column: 1 / -1;
}

/* Facture trouvée */
.facture-found-card {
    background: white;
    border-radius: 12px;
    border: 2px solid #10b981;
    overflow: hidden;
}

.facture-found-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-bottom: 1px solid #a7f3d0;
}

.facture-number {
    font-weight: 800;
    font-size: 1.25rem;
    color: #065f46;
}

.facture-found-body {
    padding: 1.25rem;
}

/* Carte Droits Fermés - Compact */
.droits-fermes-card {
    background: white;
    border-radius: 10px;
    border: 2px solid #f59e0b;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
    animation: shake 0.4s ease-in-out;
}

.droits-fermes-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #fcd34d;
    color: #92400e;
    font-weight: 600;
    font-size: 0.95rem;
}

.droits-fermes-header i {
    font-size: 1.1rem;
    color: #d97706;
}

.droits-fermes-body {
    padding: 1rem;
}

.droits-fermes-message {
    color: #92400e;
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: #fef3c7;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
}

.droits-fermes-patient {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.droits-fermes-patient span {
    color: #475569;
    font-weight: 500;
}

.droits-fermes-patient i {
    color: #64748b;
}

.droits-fermes-info {
    color: #1e40af;
    font-size: 0.8rem;
    margin: 0 0 1rem 0;
    padding: 0.5rem 0.75rem;
    background: #eff6ff;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
}

.droits-fermes-actions {
    display: flex;
    gap: 0.5rem;
}

.droits-fermes-actions .btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.droits-fermes-actions .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: white;
}

.droits-fermes-actions .btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4);
    color: white;
}

.droits-fermes-actions .btn-outline-secondary {
    border: 1px solid #cbd5e1;
    color: #64748b;
    background: transparent;
}

.droits-fermes-actions .btn-outline-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
}

/* Responsive - Facturation */
@media (max-width: 768px) {
    .actions-bar {
        flex-direction: column;
    }

    .btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Table moderne - Réseaux Soins
   ======================================== */
.table-modern {
    border-collapse: separate;
    border-spacing: 0;
}

.table-modern thead th {
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

.table-modern tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
}

.table-modern tbody tr {
    transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
    background-color: #f0f9ff;
}

.table-modern tfoot th {
    font-weight: 600;
    color: #475569;
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-top: 2px solid #cbd5e1;
}

/* Logo centre */
.centre-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8fafc;
    padding: 4px;
    border: 1px solid #e2e8f0;
}

/* Badge code */
.code-badge {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.8rem;
    background: #f1f5f9;
    color: #475569;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
}

/* Bouton action vue */
.btn-view {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    transition: all 0.2s ease;
}

.btn-view:hover {
    background: #3b82f6;
    color: #ffffff;
    transform: scale(1.05);
}

/* Localité badge */
.localite-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    color: #166534;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.localite-badge i {
    font-size: 0.9rem;
}

/* Stats header */
.stats-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    min-width: 160px;
}

.stat-card-light {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

.stat-card-light .stat-value {
    color: #3b82f6;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

/* ========================================
   Card header - compléments
   ======================================== */
.card-header .badge {
    font-size: 0.9rem;
    padding: 0.5rem 0.875rem;
    font-weight: 600;
}

.card-header i {
    font-size: 1.25rem;
}

/* ========================================
   Search Form Card - Factures
   ======================================== */
.search-form-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.search-form-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-form-header i {
    font-size: 1.1rem;
}

.search-form-body {
    padding: 1.25rem;
}

.search-form-body .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.search-form-body .form-control {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.search-form-body .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.search-form-body .form-control::placeholder {
    color: #94a3b8;
    font-size: 0.85rem;
}

.btn-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 38px;
}

.btn-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-search:disabled {
    opacity: 0.7;
    transform: none;
}

/* Cacher le texte sur petits écrans */
.btn-search-text {
    display: none;
}

@media (min-width: 992px) {
    .btn-search-text {
        display: inline;
    }
}

.search-form-hint {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
}

/* ========================================
   Variante Médicament (vert) - Factures
   ======================================== */
.search-form-header.medicament {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.btn-search.medicament {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.btn-search.medicament:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Focus vert pour les inputs du form médicament */
.search-form-card.medicament .form-control:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ==========================================================
   TABLE REFERENTIEL - Styles modernisés
========================================================== */
.table-referentiel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.table-referentiel thead th {
    background: #1e293b;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid #334155;
    text-align: left;
    white-space: nowrap;
}

.table-referentiel tbody tr {
    background: #ffffff;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.table-referentiel tbody tr:nth-child(even) {
    background: #fafbfc;
}

.table-referentiel tbody tr:hover {
    background: #f1f5f9;
    border-left-color: var(--primary);
}

.table-referentiel tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: middle;
    color: var(--text-primary);
}

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

/* Ligne inactive */
.table-referentiel tbody tr.row-inactif {
    opacity: 0.6;
    background: #f8f9fa;
}

.table-referentiel tbody tr.row-inactif:hover {
    opacity: 0.8;
    background: #f1f5f9;
}

/* ==========================================================
   BADGE STATUS - Indicateurs de statut
========================================================== */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-status-actif {
    background: rgba(58, 170, 53, 0.12);
    color: #1e6b1b;
}

.badge-status-actif::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    font-size: 0.65rem;
}

.badge-status-inactif {
    background: rgba(220, 53, 69, 0.12);
    color: #a71d2a;
}

.badge-status-inactif::before {
    content: "\F62A";
    font-family: "bootstrap-icons";
    font-size: 0.65rem;
}

/* ==========================================================
   BOUTONS D'ACTION - Groupe de boutons dans tableau
========================================================== */
.btn-group-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-action i {
    font-size: 0.875rem;
}

/* Bouton éditer */
.btn-action-edit {
    color: var(--primary);
    border-color: rgba(42, 172, 226, 0.3);
}

.btn-action-edit:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Bouton toggle (activer/désactiver) */
.btn-action-toggle {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.3);
}

.btn-action-toggle:hover {
    background: #64748b;
    color: white;
    border-color: #64748b;
}

.btn-action-toggle.is-active {
    color: var(--success);
    border-color: rgba(58, 170, 53, 0.3);
}

.btn-action-toggle.is-active:hover {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/* Bouton supprimer */
.btn-action-delete {
    color: var(--danger);
    border-color: rgba(220, 53, 69, 0.3);
}

.btn-action-delete:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

/* Bouton voir */
.btn-action-view {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.3);
}

.btn-action-view:hover {
    background: #475569;
    color: white;
    border-color: #475569;
}

/* ==========================================================
   EMPTY STATE - État vide amélioré
========================================================== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #64748b;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i {
    font-size: 2rem;
    color: #94a3b8;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   BOUTON REINITIALISER
========================================================== */
.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-xs);
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-reset:hover {
    color: #475569;
    border-color: #94a3b8;
    background: #f8fafc;
}

.btn-reset i {
    font-size: 0.875rem;
}

/* ==========================================================
   RESPONSIVE TABLE REFERENTIEL
========================================================== */
@media (max-width: 768px) {
    .table-referentiel {
        font-size: 0.8125rem;
    }

    .table-referentiel thead th,
    .table-referentiel tbody td {
        padding: 0.625rem 0.75rem;
    }

    .btn-action {
        width: 36px;
        height: 36px;
    }

    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
    }

    .empty-state-icon i {
        font-size: 1.5rem;
    }
}

/* ==========================================================
   HABILITATIONS - Gestion des permissions
========================================================== */

/* Toolbar des actions groupées */
.habilitations-toolbar {
    padding: 0.75rem;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.habilitations-toolbar .btn-group .btn {
    font-size: 0.8125rem;
}

/* Légende explicative */
.habilitations-legende {
    padding: 0.5rem 0.75rem;
    background: var(--bg-muted);
    border-radius: var(--radius-xs);
    font-size: 0.8125rem;
}

/* Accordéon personnalisé pour les habilitations */
#accordionHabilitations .accordion-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm) !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

#accordionHabilitations .accordion-item:last-child {
    margin-bottom: 0;
}

#accordionHabilitations .accordion-button {
    background: var(--bg-surface);
    font-weight: 500;
    padding: 0.875rem 1rem;
    box-shadow: none;
}

#accordionHabilitations .accordion-button:not(.collapsed) {
    background: var(--primary-light);
    color: var(--text-primary);
}

#accordionHabilitations .accordion-button:focus {
    box-shadow: none;
    border-color: var(--border);
}

#accordionHabilitations .accordion-button::after {
    margin-left: auto;
    flex-shrink: 0;
}

#accordionHabilitations .accordion-body {
    padding: 0;
}

/* Table des habilitations */
.table-habilitations {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.table-habilitations thead th {
    background: var(--bg-muted);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.table-habilitations tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.table-habilitations .form-check-input {
    margin: 0;
}

/* Lignes d'habilitation */
.habilitation-row {
    transition: background-color 0.15s ease;
}

.habilitation-row:hover {
    background-color: var(--bg-soft);
}

/* Niveaux d'indentation */
.habilitation-level-1 td:first-child {
    padding-left: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.habilitation-level-2 td:first-child {
    padding-left: 2.5rem;
    font-weight: 500;
}

.habilitation-level-3 td:first-child {
    padding-left: 4.5rem;
    font-style: italic;
}

.habilitation-level-4 td:first-child {
    padding-left: 6.5rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Différenciation visuelle profil vs individuel */
.habilitation-profil {
    background-color: var(--info-bg);
    border-left: 3px solid var(--info);
}

.habilitation-profil:hover {
    background-color: rgba(42, 172, 226, 0.12);
}

.habilitation-individuelle {
    background-color: var(--success-bg);
    border-left: 3px solid var(--success);
}

.habilitation-individuelle:hover {
    background-color: rgba(58, 170, 53, 0.12);
}

/* Badge de comptage */
.habilitation-count {
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 2.5rem;
    text-align: center;
}

/* Module principal */
.habilitation-module .accordion-header {
    position: relative;
}

.habilitation-module .form-check-input.habilitations_input {
    width: 2.5em;
    height: 1.25em;
}

/* Switch dans les lignes */
.table-habilitations .form-check-input {
    width: 2em;
    height: 1em;
    cursor: pointer;
}

.table-habilitations .form-check-input:checked {
    background-color: var(--success);
    border-color: var(--success);
}

.table-habilitations .form-check-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Recherche */
#search_habilitations {
    border-radius: var(--radius-xs);
}

#search_habilitations:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

#clear_search {
    border-top-right-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
}

/* Animation de surbrillance pour les résultats de recherche */
.habilitation-row.search-highlight {
    animation: highlightPulse 0.5s ease;
}

@keyframes highlightPulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: var(--warning-bg); }
}

/* Responsive */
@media (max-width: 768px) {
    .habilitations-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .habilitations-toolbar .btn-group {
        width: 100%;
    }

    .habilitations-toolbar .btn-group .btn {
        flex: 1;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .table-habilitations {
        font-size: 0.8125rem;
    }

    .habilitation-level-2 td:first-child {
        padding-left: 1rem;
    }

    .habilitation-level-3 td:first-child {
        padding-left: 1.5rem;
    }

    .habilitation-level-4 td:first-child {
        padding-left: 2rem;
    }

    #accordionHabilitations .accordion-button {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}
/* ============================================
   COTISATIONS PAGE - Modern Design
   ============================================ */

.cotisations-page { padding: 0 1rem; }

/* Cards modernes */
.modern-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}
.modern-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.modern-card-header {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #4f46e5 100%);
    color: white;
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modern-card-body { padding: 1.25rem; }

/* Info cards style dashboard */
.info-card {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    height: 100%;
}
.info-card-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.info-card-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

/* Stats cards */
.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}
.stat-icon.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.stat-icon.warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-icon.info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-content { flex: 1; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #1e293b; line-height: 1; }
.stat-label { font-size: 0.85rem; color: #64748b; margin-top: 0.25rem; }

/* Modern tabs */
.modern-tabs {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 0.5rem;
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.modern-tabs .nav-link {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    color: #64748b;
    border: none;
    background: transparent;
    transition: all 0.2s ease;
}
.modern-tabs .nav-link:hover { color: #1e293b; background: rgba(255,255,255,0.5); }
.modern-tabs .nav-link.active {
    background: #fff;
    color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Modern table */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.modern-table thead th {
    background: #f8fafc;
    padding: 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}
.modern-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.modern-table tbody tr:hover { background: #f8fafc; }
.modern-table tbody tr:last-child td { border-bottom: none; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-badge.success { background: #dcfce7; color: #16a34a; }
.status-badge.warning { background: #fef3c7; color: #d97706; }
.status-badge.danger { background: #fee2e2; color: #dc2626; }
.status-badge.secondary { background: #f1f5f9; color: #64748b; }
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.primary { background: #dbeafe; color: #2563eb; }

/* Status Dot - Point de statut circulaire */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6c757d;
}
.status-dot.success { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.status-dot.warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.status-dot.danger { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.status-dot.secondary { background: #6b7280; box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2); }
.status-dot.info { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-title i {
    font-size: 1.2rem;
}

/* Progress bar moderne */
.modern-progress {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.modern-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary) 0%, #818cf8 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Buttons modernes */
.btn-modern {
    border-radius: 10px;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease;
}
.btn-modern:hover { transform: translateY(-1px); }
.btn-modern-primary {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #4f46e5 100%);
    color: white;
}
.btn-modern-primary:hover { box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); color: white; }
.btn-modern-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.btn-modern-success:hover { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); color: white; }
.btn-modern-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}
.btn-modern-danger:hover { box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); color: white; }
.btn-modern-outline {
    background: transparent;
    border: 2px solid #e2e8f0;
    color: #64748b;
}
.btn-modern-outline:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

/* Action icons */
.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}
.action-btn:hover { background: var(--bs-primary); color: white; }

/* Breadcrumbs moderne */
.modern-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    font-size: 0.9rem;
}
.modern-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}
.modern-breadcrumb a:hover { color: var(--bs-primary); }
.modern-breadcrumb .separator { color: #cbd5e1; }
.modern-breadcrumb .current { color: #1e293b; font-weight: 500; }

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}
.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* ==========================================================
   DEMANDES - Detail & List Styles
========================================================== */
.demande-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.demande-header h4 {
    color: var(--text-primary);
    font-weight: 600;
}
.traitement-info {
    font-size: 0.875rem;
    color: var(--success);
    background: var(--success-light);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.temps-traitement {
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    padding-left: 0.75rem;
    margin-left: 0.5rem;
}

.statut-badge {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}
.statut-ATT { background: var(--warning-light); color: var(--warning); }
.statut-TRT, .statut-FIN { background: var(--success-light); color: var(--success); }
.statut-ANL { background: var(--danger-light); color: var(--danger); }
.statut-CRE { background: #f3f4f6; color: #6b7280; }

.btn-valider {
    background: var(--success);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
}
.btn-valider:hover { background: #047857; color: white; }

/* Resume bar */
.resume-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.resume-item {
    text-align: center;
    padding: 0 1rem;
    border-right: 1px solid var(--border);
}
.resume-item:last-of-type { border-right: none; }
.resume-nombre {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.resume-item.attente .resume-nombre { color: var(--warning); }
.resume-item.valide .resume-nombre { color: var(--success); }
.resume-item.rejete .resume-nombre { color: var(--danger); }
.resume-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.resume-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}
.btn-action-rapide {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
.btn-action-rapide.valider {
    background: var(--success);
    color: white;
}
.btn-action-rapide.rejeter {
    background: white;
    color: var(--danger);
    border: 1px solid var(--border);
}
.btn-action-rapide:hover { opacity: 0.9; }

/* Prestations */
.prestations-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.prestation-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.prestation-card.attente {
    border-left: 4px solid var(--warning);
}
.prestation-card.valide {
    border-left: 4px solid var(--success);
}
.prestation-card.rejete {
    border-left: 4px solid var(--danger);
}

.prestation-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}
.prestation-statut {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.prestation-statut.attente { background: var(--warning-light); color: var(--warning); }
.prestation-statut.valide { background: var(--success-light); color: var(--success); }
.prestation-statut.rejete { background: var(--danger-light); color: var(--danger); }

.prestation-code {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--text-muted);
    background: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.prestation-titre {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}
.prestation-montant {
    font-weight: 600;
    color: var(--text-primary);
}
.prestation-qte {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.25rem;
}

.prestation-motif {
    padding: 1rem 1.25rem;
}
.motif-label, .obs-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.motif-texte, .obs-texte {
    color: var(--text-primary);
    line-height: 1.5;
}
.non-renseigne {
    color: var(--text-muted);
    font-style: italic;
}

.prestation-observations {
    padding: 0 1.25rem 1rem;
}

.prestation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
}
.btn-prestation {
    padding: 0.4rem 0.75rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-prestation.valider {
    background: var(--success);
    color: white;
}
.btn-prestation.valider:hover { background: #047857; }
.btn-prestation.rejeter {
    background: transparent;
    color: var(--text-muted);
    border: none;
    text-decoration: underline;
}
.btn-prestation.rejeter:hover {
    color: var(--danger);
    background: transparent;
}
.btn-prestation:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-prestation-modifier {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.btn-prestation-modifier:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-prestation-annuler {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
}

.prestation-actions-hidden {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Performance Widget */
.performance-widget {
    display: inline-block;
    position: relative;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 50px;
    padding: 1px;
}
.performance-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1px;
    background: linear-gradient(90deg, #06b6d4, #8b5cf6, #ec4899, #06b6d4);
    background-size: 200% 100%;
    animation: border-flow 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
@keyframes border-flow {
    to { background-position: 200% 0; }
}
.performance-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 50px;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
}
.performance-pulse {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.performance-title {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.time-display {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}
.time-unit {
    display: flex;
    align-items: baseline;
}
.time-value {
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.time-label {
    font-size: 0.6rem;
    color: #475569;
    margin-left: 1px;
}
.time-sep {
    color: #334155;
    font-weight: 300;
    margin: 0 0.1rem;
}
.performance-badge {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.25rem;
}

/* Detail Item (Demandes) */
.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.detail-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
}