/* =================================================================
   CORPORATE MODERN THEME - CSS GLOBAL
   Système de design unifié pour toute l'application
   ================================================================= */

/* Variables CSS Corporate */
:root {
    /* Couleurs principales */
    --corporate-primary: #1A3B5D;
    --corporate-secondary: #7BC043;
    --corporate-success: #7BC043;
    --corporate-warning: #f39c12;
    --corporate-danger: #e74c3c;
    --corporate-info: #17a2b8;
    --corporate-light: #f8f9fa;
    --corporate-dark: #343a40;
    
    /* Gradients */
    --corporate-gradient: linear-gradient(135deg, #1A3B5D 0%, #7BC043 100%);
    --corporate-gradient-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --corporate-gradient-success: linear-gradient(135deg, #7BC043 0%, #2ecc71 100%);
    --corporate-gradient-warning: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    --corporate-gradient-danger: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    
    /* Shadows */
    --corporate-shadow: 0 4px 15px rgba(44, 62, 80, 0.1);
    --corporate-shadow-hover: 0 8px 25px rgba(44, 62, 80, 0.15);
    --corporate-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
    --corporate-shadow-strong: 0 10px 30px rgba(44, 62, 80, 0.2);
    
    /* Rayons de bordure */
    --corporate-border-radius: 12px;
    --corporate-border-radius-sm: 6px;
    --corporate-border-radius-lg: 16px;
    --corporate-border-radius-xl: 24px;
    
    /* Transitions */
    --corporate-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --corporate-transition-fast: all 0.2s ease-out;
    --corporate-transition-slow: all 0.5s ease-in-out;
    
    /* Typographie */
    --corporate-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --corporate-font-size-xs: 0.75rem;
    --corporate-font-size-sm: 0.875rem;
    --corporate-font-size-base: 1rem;
    --corporate-font-size-lg: 1.125rem;
    --corporate-font-size-xl: 1.25rem;
    --corporate-font-size-2xl: 1.5rem;
    --corporate-font-size-3xl: 2rem;
    --corporate-font-size-4xl: 2.5rem;
    
    /* Espacements */
    --corporate-spacing-xs: 0.25rem;
    --corporate-spacing-sm: 0.5rem;
    --corporate-spacing-md: 1rem;
    --corporate-spacing-lg: 1.5rem;
    --corporate-spacing-xl: 2rem;
    --corporate-spacing-2xl: 3rem;
    --corporate-spacing-3xl: 4rem;
}

/* =================================================================
   RESET ET BASE
   ================================================================= */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--corporate-font-family);
    line-height: 1.6;
    color: var(--corporate-dark);
    background: #f8f9fa;
}

/* =================================================================
   HERO SECTIONS
   ================================================================= */
.hero-section {
    background: var(--corporate-gradient);
    color: white;
    padding: 3rem 0 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none !important;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-title {
    font-size: var(--corporate-font-size-4xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-title i {
    color: white !important;
}

.hero-subtitle {
    font-size: var(--corporate-font-size-lg);
    opacity: 0.9;
    margin-bottom: 0;
    font-weight: 300;
}

/* Hero Icon */
.hero-icon {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-icon i {
    font-size: 2rem;
    color: white;
}

/* Hero Breadcrumb */
.breadcrumb-hero {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

/* FORCE tous les éléments interactifs à être au-dessus */
.hero-section .btn,
.hero-section button,
.hero-section .btn-corporate-primary,
.hero-section a,
.hero-section .btn-list {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* S'assurer que tous les boutons corporate ont les bonnes propriétés */
.btn-corporate-primary,
.btn-corporate-secondary,
.btn-corporate-success,
.btn-corporate-warning,
.btn-corporate-danger,
.btn-corporate-info,
.btn-corporate-outline {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Fix spécifique pour les boutons avec data-bs-toggle */
button[data-bs-toggle],
.btn[data-bs-toggle] {
    position: relative;
    z-index: 15 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix pour la compatibilité Bootstrap complète */
.btn-corporate-primary.btn,
.btn-corporate-secondary.btn,
.btn-corporate-success.btn,
.btn-corporate-warning.btn,
.btn-corporate-danger.btn,
.btn-corporate-info.btn,
.btn-corporate-outline.btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 5;
}

/* Fix pour les boutons dans les containers hero */
.hero-section .col-md-4 .btn,
.hero-section .text-end .btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 20 !important;
    position: relative;
}

/* Fix pour tous les attributs Bootstrap sur les boutons corporate */
.btn-corporate-primary[data-bs-toggle="modal"],
.btn-corporate-secondary[data-bs-toggle="modal"],
.btn-corporate-success[data-bs-toggle="modal"],
.btn-corporate-warning[data-bs-toggle="modal"],
.btn-corporate-danger[data-bs-toggle="modal"],
.btn-corporate-info[data-bs-toggle="modal"],
.btn-corporate-outline[data-bs-toggle="modal"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 25 !important;
    position: relative;
    overflow: visible;
}

/* Fix général pour éviter les conflits d'overlay */
.hero-section .btn-list {
    position: relative;
    z-index: 30;
}

.hero-section .btn-list > * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.hero-stats {
    text-align: center;
}

.stat-item {
    background: white;
    border-radius: var(--corporate-border-radius);
    padding: var(--corporate-spacing-lg);
    box-shadow: var(--corporate-shadow);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: var(--corporate-spacing-md);
    transition: var(--corporate-transition);
    position: relative;
    overflow: hidden;
}

.stat-item:hover {
    box-shadow: var(--corporate-shadow-hover);
    transform: translateY(-2px);
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--corporate-gradient);
}

.stat-value {
    font-size: var(--corporate-font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--corporate-spacing-sm);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.stat-value .currency {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--corporate-secondary);
}

/* QA IND-01 : .stat-item a un fond blanc ; le chiffre .stat-value héritait
   la couleur blanche du hero (invisible). On force une couleur foncée lisible. */
.stat-item .stat-value {
    color: var(--corporate-primary);
}

.stat-label {
    font-size: var(--corporate-font-size-sm);
    color: var(--corporate-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

/* =================================================================
   CONTENU PRINCIPAL
   ================================================================= */
.main-content {
    padding: 0 0 2rem;
}

/* =================================================================
   CARDS CORPORATE
   ================================================================= */
.corporate-card {
    background: white;
    border-radius: var(--corporate-border-radius);
    box-shadow: var(--corporate-shadow);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: var(--corporate-transition);
    margin-bottom: 1.5rem;
}

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

.card-header-corporate {
    background: var(--corporate-gradient-light);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.card-title-corporate {
    font-size: var(--corporate-font-size-xl);
    font-weight: 600;
    color: var(--corporate-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.card-title-corporate i {
    color: var(--corporate-secondary);
}

.card-body-corporate {
    padding: 1.5rem;
}

.card-footer-corporate {
    background: var(--corporate-light);
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* =================================================================
   BOUTONS CORPORATE
   ================================================================= */
.btn-corporate-primary {
    background: var(--corporate-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    border: none;
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
    box-shadow: var(--corporate-shadow-light);
}

.btn-corporate-primary:hover {
    background: #34495e;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
    color: white;
}

.btn-corporate-secondary {
    background: var(--corporate-secondary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    border: none;
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
    box-shadow: var(--corporate-shadow-light);
}

.btn-corporate-secondary:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
    color: white;
}

.btn-corporate-success {
    background: var(--corporate-success);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    border: none;
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
    box-shadow: var(--corporate-shadow-light);
}

.btn-corporate-success:hover {
    background: #2ecc71;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
    color: white;
}

.btn-corporate-warning {
    background: var(--corporate-warning);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    border: none;
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
    box-shadow: var(--corporate-shadow-light);
}

.btn-corporate-warning:hover {
    background: #e67e22;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
    color: white;
}

.btn-corporate-danger {
    background: var(--corporate-danger);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    border: none;
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
    box-shadow: var(--corporate-shadow-light);
}

.btn-corporate-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
    color: white;
}

.btn-corporate-info {
    background: var(--corporate-info);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    border: none;
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
    box-shadow: var(--corporate-shadow-light);
}

.btn-corporate-info:hover {
    background: #138496;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
    color: white;
}

.btn-corporate-outline {
    background: transparent;
    color: var(--corporate-primary);
    border: 2px solid var(--corporate-primary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--corporate-border-radius-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--corporate-transition);
    cursor: pointer;
    font-size: var(--corporate-font-size-base);
}

.btn-corporate-outline:hover {
    background: var(--corporate-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow-hover);
}

.btn-corporate-light {
    background: var(--corporate-light);
    color: var(--corporate-primary);
    border: 1px solid #dee2e6;
}

.btn-corporate-light:hover {
    background: #e9ecef;
    color: var(--corporate-primary);
    transform: translateY(-2px);
    box-shadow: var(--corporate-shadow);
}

/* Tailles de boutons */
.btn-corporate-sm {
    padding: 0.5rem 1rem;
    font-size: var(--corporate-font-size-sm);
}

.btn-corporate-lg {
    padding: 1rem 2rem;
    font-size: var(--corporate-font-size-lg);
}

.btn-corporate-xl {
    padding: 1.25rem 2.5rem;
    font-size: var(--corporate-font-size-xl);
}

/* =================================================================
   FORMULAIRES CORPORATE
   ================================================================= */
.form-group-corporate {
    margin-bottom: 1rem;
}

.form-label-corporate {
    font-weight: 500;
    color: var(--corporate-primary);
    margin-bottom: 0.5rem;
    display: block;
    font-size: var(--corporate-font-size-sm);
}

.form-control-corporate,
.form-select-corporate {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--corporate-font-size-base);
    border: 2px solid #e9ecef;
    border-radius: var(--corporate-border-radius-sm);
    background: white;
    transition: var(--corporate-transition);
    color: var(--corporate-dark);
}

.form-control-corporate:focus,
.form-select-corporate:focus {
    border-color: var(--corporate-secondary);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    outline: none;
}

.form-control-corporate::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

/* Tailles de champs */
.form-control-sm-corporate,
.form-select-sm-corporate {
    padding: 0.5rem 0.75rem;
    font-size: var(--corporate-font-size-sm);
}

.form-control-lg-corporate,
.form-select-lg-corporate {
    padding: 1rem 1.25rem;
    font-size: var(--corporate-font-size-lg);
}

/* =================================================================
   TABLEAUX CORPORATE
   ================================================================= */
.table-wrapper {
    overflow-x: auto;
    border-radius: 0 0 var(--corporate-border-radius) var(--corporate-border-radius);
}

.table-corporate {
    width: 100%;
    margin-bottom: 0;
    background: white;
    border-collapse: collapse;
}

.table-header-corporate {
    background: var(--corporate-gradient-light);
}

.table-header-corporate th {
    padding: 1rem 0.75rem;
    font-weight: 600;
    color: var(--corporate-primary);
    border-bottom: 2px solid #dee2e6;
    font-size: var(--corporate-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table-corporate tbody tr {
    border-bottom: 1px solid #f1f3f4;
    transition: var(--corporate-transition);
}

.table-row-hover:hover {
    background: rgba(52, 152, 219, 0.05);
    transform: scale(1.001);
}

.table-corporate td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    font-size: var(--corporate-font-size-sm);
    color: var(--corporate-dark);
}

/* =================================================================
   BADGES CORPORATE
   ================================================================= */
.badge-corporate {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    display: inline-block;
}

.badge-primary { background: var(--corporate-primary); }
.badge-secondary { background: var(--corporate-secondary); }
.badge-success { background: var(--corporate-success); }
.badge-warning { background: var(--corporate-warning); }
.badge-danger { background: var(--corporate-danger); }
.badge-info { background: var(--corporate-info); }
.badge-light { background: #6c757d; color: white; }
.badge-dark { background: var(--corporate-dark); }

/* =================================================================
   BOUTONS D'ACTION
   ================================================================= */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 50px;
}

/* Styles spécifiques pour table corporate avec action buttons */
.table-corporate .action-column .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.25rem !important;
    width: 100% !important;
    height: auto !important;
}

.table-corporate .action-column {
    white-space: nowrap !important;
    overflow: visible !important;
}

.btn-action-edit,
.btn-action-delete,
.btn-action-view,
.btn-action-success,
.btn-action-warning {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--corporate-border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--corporate-transition);
    font-size: var(--corporate-font-size-sm);
    vertical-align: middle;
    margin: 2px;
    text-decoration: none;
    position: relative;
}

.btn-action-edit {
    background: rgba(52, 152, 219, 0.1);
    color: var(--corporate-secondary);
}

.btn-action-edit:hover {
    background: var(--corporate-secondary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-action-delete {
    background: rgba(231, 76, 60, 0.1);
    color: var(--corporate-danger);
}

.btn-action-delete:hover {
    background: var(--corporate-danger);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-action-view {
    background: rgba(23, 162, 184, 0.1);
    color: var(--corporate-info);
}

.btn-action-view:hover {
    background: var(--corporate-info);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.btn-action-success {
    background: rgba(39, 174, 96, 0.1);
    color: var(--corporate-success);
}

.btn-action-success:hover {
    background: var(--corporate-success);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.btn-action-warning {
    background: rgba(243, 156, 18, 0.1);
    color: var(--corporate-warning);
}

.btn-action-warning:hover {
    background: var(--corporate-warning);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

/* Alignement vertical dans les cellules de tableaux */
.table .action-column {
    vertical-align: middle !important;
    text-align: center !important;
    padding: 0.75rem 0.5rem !important;
    width: 150px !important;
    min-width: 150px !important;
}

/* Alignement des groupes de boutons dans les tableaux */
.table .btn-group {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Amélioration générale pour l'alignement vertical */
.table td {
    vertical-align: middle;
}

/* Pour les containers d'actions spécifiques */
.action-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Force l'affichage des boutons d'actions */
.action-buttons {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 50px !important;
    flex-wrap: nowrap !important;
}

/* Ensure action buttons are visible */
.btn-action-edit,
.btn-action-delete,
.btn-action-view,
.btn-action-success,
.btn-action-warning {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force l'affichage de la colonne actions - priorité maximale */
.table-corporate thead th:last-child,
.table-corporate tbody td:last-child {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 150px !important;
    width: 150px !important;
}

/* Surcharger les styles fournisseurs.css qui peuvent cacher la colonne */
.table.table-corporate th:last-child,
.table.table-corporate td:last-child {
    display: table-cell !important;
    position: static !important;
    background-color: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
    min-width: 150px !important;
    width: 150px !important;
}

/* Style absolu pour la colonne actions - ULTRA PRIORITÉ */
.table-corporate th.action-column,
.table-corporate td.action-column,
table.dataTable.table-corporate th.action-column,
table.dataTable.table-corporate td.action-column,
table.table-corporate.dataTable th.action-column,
table.table-corporate.dataTable td.action-column {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    text-align: center !important;
    vertical-align: middle !important;
    position: static !important;
    background: white !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

/* Forcer l'affichage des boutons même avec les styles mobile */
.table-corporate .action-buttons .btn-action-edit,
.table-corporate .action-buttons .btn-action-delete,
.table-corporate .action-buttons .btn-action-view,
.table-corporate .action-buttons .btn-action-success,
.table-corporate .action-buttons .btn-action-warning {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
}

/* Override specific vue-detail styles */
.vue-detail .table-corporate th:last-child,
.vue-detail .table-corporate td:last-child,
.vue-detail .table-corporate th.action-column,
.vue-detail .table-corporate td.action-column {
    display: table-cell !important;
}

/* DataTables compatibility */
table.dataTable.table-corporate thead th:last-child,
table.dataTable.table-corporate tbody td:last-child {
    display: table-cell !important;
}

/* Styles pour assurer que les actions-buttons sont visibles dans tous les cas */
.table-corporate .action-column .action-buttons,
table.dataTable.table-corporate .action-column .action-buttons,
.vue-detail .table-corporate .action-column .action-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.25rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
}

/* Mobile override */
@media (max-width: 767.98px) {
    .table-corporate th:last-child,
    .table-corporate td:last-child,
    .table-corporate th.action-column,
    .table-corporate td.action-column {
        display: table-cell !important;
        position: static !important;
        background-color: white !important;
        min-width: 140px !important;
        width: 140px !important;
    }
    
    .table-corporate .action-buttons {
        gap: 0.25rem !important;
    }
    
    .table-corporate .action-buttons .btn-action-edit,
    .table-corporate .action-buttons .btn-action-delete,
    .table-corporate .action-buttons .btn-action-view,
    .table-corporate .action-buttons .btn-action-success,
    .table-corporate .action-buttons .btn-action-warning {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.875rem !important;
    }
}

/* Amélioration pour les boutons avec texte */
.btn-action-edit span,
.btn-action-delete span,
.btn-action-view span,
.btn-action-success span,
.btn-action-warning span {
    margin-left: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Tailles alternatives pour boutons avec texte */
.btn-action-with-text {
    width: auto;
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    height: 36px;
}

/* =================================================================
   MODALS CORPORATE
   ================================================================= */
.modal-corporate {
    border-radius: var(--corporate-border-radius);
    overflow: hidden;
    border: none;
    box-shadow: var(--corporate-shadow-strong);
}

.modal-header-corporate {
    background: var(--corporate-gradient);
    color: white;
    padding: var(--corporate-spacing-lg);
}

.modal-header-corporate-danger {
    background: linear-gradient(135deg, var(--corporate-danger), #dc2626);
    color: white;
    padding: var(--corporate-spacing-lg);
}

.modal-header-corporate-success {
    background: linear-gradient(135deg, var(--corporate-success), #16a34a);
    color: white;
    padding: var(--corporate-spacing-lg);
}

.btn-close-corporate-white {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    padding: 0.5rem;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--corporate-transition);
}

.btn-close-corporate-white:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.modal-title-corporate {
    font-size: var(--corporate-font-size-xl);
    font-weight: 600;
    margin: 0;
}

.btn-close-corporate {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: var(--corporate-spacing-sm);
    border-radius: var(--corporate-border-radius-sm);
    transition: var(--corporate-transition);
}

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

.modal-body-corporate {
    padding: var(--corporate-spacing-lg);
}

.modal-footer-corporate {
    padding: var(--corporate-spacing-md) var(--corporate-spacing-lg);
    background: var(--corporate-light);
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* =================================================================
   PAGINATION CORPORATE
   ================================================================= */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--corporate-spacing-md);
}

.pagination-info {
    color: var(--corporate-primary);
    font-size: var(--corporate-font-size-sm);
}

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

.page-item-corporate {
    display: flex;
}

.page-link-corporate {
    padding: var(--corporate-spacing-sm) 0.75rem;
    color: var(--corporate-primary);
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: var(--corporate-border-radius-sm);
    transition: var(--corporate-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.page-link-corporate:hover {
    background: var(--corporate-secondary);
    color: white;
    border-color: var(--corporate-secondary);
    transform: translateY(-1px);
}

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

.page-item-corporate.disabled .page-link-corporate {
    color: #6c757d;
    background: var(--corporate-light);
    border-color: #dee2e6;
    cursor: not-allowed;
}

.page-item-corporate.disabled .page-link-corporate:hover {
    background: var(--corporate-light);
    color: #6c757d;
    transform: none;
}

/* =================================================================
   PAGINATION BOOTSTRAP - SURCHARGE AVEC COULEURS DU LOGO
   Applique les couleurs corporate aux paginations Bootstrap standard
   ================================================================= */

/* Style de base des liens de pagination */
.pagination .page-link {
    color: #1A3B5D;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

/* Hover - Vert du logo (engrenage) */
.pagination .page-link:hover {
    background-color: #7BC043;
    color: white;
    border-color: #7BC043;
    transform: translateY(-1px);
}

/* Page active - Bleu du logo (voiture) */
.pagination .page-item.active .page-link {
    background-color: #1A3B5D;
    border-color: #1A3B5D;
    color: #fff;
    font-weight: 600;
}

/* Page disabled */
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
}

/* Empêcher le hover sur disabled */
.pagination .page-item.disabled .page-link:hover {
    background-color: #f8f9fa;
    color: #6c757d;
    transform: none;
}

/* Focus - Bordure verte */
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(123, 192, 67, 0.25);
    border-color: #7BC043;
}

/* =================================================================
   CONTRÔLES DE RECHERCHE
   ================================================================= */
.search-group {
    position: relative;
}

.search-input-wrapper {
    position: relative;
    width: 250px;
}

.search-icon {
    position: absolute;
    left: var(--corporate-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 2;
}

.search-input {
    width: 100%;
    padding: 0.75rem var(--corporate-spacing-md) 0.75rem 2.5rem;
    font-size: var(--corporate-font-size-sm);
    border: 2px solid #e9ecef;
    border-radius: 25px;
    background: white;
    transition: var(--corporate-transition);
    color: var(--corporate-dark);
}

.search-input:focus {
    border-color: var(--corporate-secondary);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    outline: none;
}

.search-input::placeholder {
    color: #6c757d;
}

/* =================================================================
   ÉTATS VIDES
   ================================================================= */
.empty-state {
    text-align: center;
    padding: var(--corporate-spacing-3xl) var(--corporate-spacing-xl);
    color: #6c757d;
}

.empty-state i {
    color: var(--corporate-secondary);
    opacity: 0.5;
}

.empty-state h5 {
    color: var(--corporate-primary);
    margin-top: var(--corporate-spacing-md);
    margin-bottom: var(--corporate-spacing-sm);
}

/* =================================================================
   ALERTES CORPORATE
   ================================================================= */
.alert-corporate {
    padding: var(--corporate-spacing-md);
    border-radius: var(--corporate-border-radius-sm);
    border: 1px solid transparent;
    margin-bottom: var(--corporate-spacing-md);
}

.alert-corporate-success {
    background: rgba(39, 174, 96, 0.1);
    border-color: var(--corporate-success);
    color: #155724;
}

.alert-corporate-warning {
    background: rgba(243, 156, 18, 0.1);
    border-color: var(--corporate-warning);
    color: #856404;
}

.alert-corporate-danger {
    background: rgba(231, 76, 60, 0.1);
    border-color: var(--corporate-danger);
    color: #721c24;
}

.alert-corporate-info {
    background: rgba(23, 162, 184, 0.1);
    border-color: var(--corporate-info);
    color: #0c5460;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 768px) {
    .hero-title {
        font-size: var(--corporate-font-size-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--corporate-font-size-base);
    }
    
    .search-input-wrapper {
        width: 100%;
    }
    
    .pagination-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .table-corporate {
        font-size: 0.8rem;
    }
    
    .table-corporate td,
    .table-header-corporate th {
        padding: 0.5rem 0.4rem;
    }
    
    .btn-corporate {
        padding: 0.6rem 1rem;
        font-size: var(--corporate-font-size-sm);
    }
    
    /* Boutons d'actions responsive */
    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .btn-action-edit,
    .btn-action-delete,
    .btn-action-view,
    .btn-action-success,
    .btn-action-warning {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 2rem 0 1.5rem;
    }
    
    .stat-item {
        padding: var(--corporate-spacing-md);
    }
    
    .stat-value {
        font-size: var(--corporate-font-size-2xl);
    }
    
    .card-body-corporate {
        padding: 1rem;
    }
    
    .btn-corporate {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================================
   UTILITAIRES
   ================================================================= */
.text-corporate-primary { color: var(--corporate-primary) !important; }
.text-corporate-secondary { color: var(--corporate-secondary) !important; }
.text-corporate-success { color: var(--corporate-success) !important; }
.text-corporate-warning { color: var(--corporate-warning) !important; }
.text-corporate-danger { color: var(--corporate-danger) !important; }
.text-corporate-info { color: var(--corporate-info) !important; }

.bg-corporate-primary { background-color: var(--corporate-primary) !important; }
.bg-corporate-secondary { background-color: var(--corporate-secondary) !important; }
.bg-corporate-success { background-color: var(--corporate-success) !important; }
.bg-corporate-warning { background-color: var(--corporate-warning) !important; }
.bg-corporate-danger { background-color: var(--corporate-danger) !important; }
.bg-corporate-info { background-color: var(--corporate-info) !important; }

.shadow-corporate { box-shadow: var(--corporate-shadow) !important; }
.shadow-corporate-hover { box-shadow: var(--corporate-shadow-hover) !important; }
.shadow-corporate-light { box-shadow: var(--corporate-shadow-light) !important; }
.shadow-corporate-strong { box-shadow: var(--corporate-shadow-strong) !important; }

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

/* =================================================================
   STATISTIQUES MODERNES
   ================================================================= */
.stats-container {
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: var(--corporate-border-radius);
    padding: 1.5rem;
    box-shadow: var(--corporate-shadow);
    border: 1px solid rgba(0,0,0,0.05);
    transition: var(--corporate-transition);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    box-shadow: var(--corporate-shadow-hover);
    transform: translateY(-4px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--corporate-gradient);
}

.stat-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-info {
    flex: 1;
}

.stat-card-label {
    font-size: var(--corporate-font-size-sm);
    color: var(--corporate-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.stat-card-value {
    font-size: var(--corporate-font-size-2xl);
    font-weight: 700;
    color: var(--corporate-dark);
    margin-bottom: 0.25rem;
    line-height: 1.2;
    white-space: nowrap;
}

.stat-card-value.has-currency {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.stat-card-value .currency {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--corporate-secondary);
}

.stat-card-trend {
    font-size: var(--corporate-font-size-xs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-card-trend.positive {
    color: var(--corporate-success);
}

.stat-card-trend.negative {
    color: var(--corporate-danger);
}

.stat-card-trend.neutral {
    color: var(--corporate-info);
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-card-icon.primary {
    background: rgba(52, 152, 219, 0.1);
    color: var(--corporate-secondary);
}

.stat-card-icon.success {
    background: rgba(39, 174, 96, 0.1);
    color: var(--corporate-success);
}

.stat-card-icon.info {
    background: rgba(23, 162, 184, 0.1);
    color: var(--corporate-info);
}

.stat-card-icon.warning {
    background: rgba(243, 156, 18, 0.1);
    color: var(--corporate-warning);
}

.stat-card-icon.danger {
    background: rgba(231, 76, 60, 0.1);
    color: var(--corporate-danger);
}

/* Responsive pour les cartes de stats */
@media (max-width: 768px) {
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card-value {
        font-size: var(--corporate-font-size-xl);
    }
    
    .stat-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .stat-item {
        padding: var(--corporate-spacing-md);
    }
    
    .stat-value {
        font-size: var(--corporate-font-size-xl);
    }
}

@media (max-width: 576px) {
    .stat-card-content {
        /* Garder disposition horizontale pour meilleur usage de l'espace */
        gap: 0.5rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card-value {
        font-size: 1.25rem;
    }

    .stat-card-label {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .stat-card-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* =================================================================
   OPTIMISATIONS MOBILE - PAGE ACCUEIL
   Améliorations UX pour petits écrans (< 576px)
   ================================================================= */

/* PHASE 1: Quick Wins - Corrections Critiques */

/* 1.1 - Réduire Hero sur mobile */
@media (max-width: 576px) {
    .hero-section {
        padding: 1.5rem 0 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.3;
    }

    .hero-subtitle {
        font-size: 0.8rem !important;
        line-height: 1.4;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtitle .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
}

/* 1.2 - Boutons Touch-Friendly (44x44px minimum) */
@media (max-width: 768px) {
    .btn-sm,
    .btn-outline-primary,
    .btn-outline-warning,
    .btn-outline-info {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .card-body-corporate .btn-sm {
        padding: 0.6rem 1.2rem !important;
    }

    .btn-sm i {
        font-size: 0.9rem;
    }
}

/* 1.3 - Réduire icônes section "Statut Hier" */
@media (max-width: 576px) {
    #hier-statut-content .alert i.fas,
    #hier-statut-content .alert i.fa {
        font-size: 2rem !important;
    }

    #hier-statut-content .alert h4 {
        font-size: 1.1rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    #hier-statut-content .alert p {
        font-size: 0.85rem !important;
    }

    #hier-statut-content .alert {
        padding: 1rem !important;
    }
}

/* PHASE 2: Optimisation UX */

/* 2.1 - Carousel Horizontal pour Paiements Mobile */
@media (max-width: 767px) {
    .paiements-mobile-carousel {
        position: relative;
        padding-bottom: 2rem;
    }

    .paiements-scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 1rem;
        padding: 1rem 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .paiements-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .paiement-card {
        flex: 0 0 75%;
        max-width: 260px;
        scroll-snap-align: start;
    }

    .paiement-card-inner {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
        height: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .paiement-card-inner:active {
        transform: scale(0.98);
    }

    .paiement-card h4 {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
    }

    .paiement-count {
        font-size: 0.9rem;
        color: #6c757d;
        font-weight: 500;
    }

    .paiement-label {
        font-size: 0.85rem;
        color: #6c757d;
        font-weight: 600;
    }

    .scroll-indicators {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .scroll-indicators .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #dee2e6;
        transition: all 0.3s;
    }

    .scroll-indicators .indicator.active {
        background: var(--corporate-primary);
        width: 24px;
        border-radius: 4px;
    }

    /* Carousel Recettes - Styles identiques aux Paiements */
    .recettes-mobile-carousel {
        padding-bottom: 2rem;
    }

    .recettes-scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 1rem;
        padding: 1rem 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .recettes-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .recette-card {
        flex: 0 0 75%;
        max-width: 260px;
        scroll-snap-align: start;
    }

    .recette-card-inner {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
        height: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .recette-card-inner:active {
        transform: scale(0.98);
    }

    .recette-card h4 {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
    }

    .recette-details {
        font-size: 0.85rem;
    }

    .recette-label {
        font-size: 0.85rem;
        color: #6c757d;
        font-weight: 600;
    }
}

/* 2.2 - Logo Entreprise Responsive */
@media (max-width: 991px) {
    .company-logo-mobile {
        max-width: 100px !important;
        padding: 0.75rem !important;
        margin: 0.5rem auto !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    }

    .company-logo-mobile img {
        max-height: 40px !important;
    }
}

@media (min-width: 992px) {
    .company-logo-mobile {
        max-width: 280px;
        padding: 1.5rem;
    }

    .company-logo-mobile img {
        max-height: 100px;
    }
}

/* 2.3 - Activités Compactes sur Mobile */
@media (max-width: 767px) {
    .corporate-card .card-body-corporate {
        padding: 1rem !important;
    }

    .corporate-card .card-header-corporate {
        padding: 0.75rem 1rem !important;
    }

    .card-title-corporate {
        font-size: 1rem !important;
    }

    .card-title-corporate small {
        font-size: 0.75rem !important;
    }

    .card-body-corporate h3 {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .row.text-center .col-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* PHASE 3: Polish & Performance */

/* 3.1 - Feedback Tactile */
@media (max-width: 768px) {
    .btn:active,
    .stat-card:active,
    .corporate-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }

    .btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:active::after {
        width: 300px;
        height: 300px;
    }
}

/* 3.2 - Lazy Load Fade In */
[data-lazy-load] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

[data-lazy-load].loaded {
    opacity: 1;
}

/* ========================================
   📱 MOBILE - SUPPRESSION PADDING CONTAINER
   ======================================== */

@media (max-width: 991px) {
    .main-container.py-4 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Supprimer tout espace en haut */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    html {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Assurer que le sticky fonctionne */
    body, html, .main-container {
        overflow-x: visible !important;
        overflow-y: auto !important;
    }

    /* Padding-top : valeur initiale puis affiné par JavaScript (voir app/views/home/index.php) */
    /* Valeur basée sur TopBar (78px) + Header (149px avec logo) + Sélecteur (60px) = ~287px */
    /* PAGE ACCUEIL - SANS sélecteur mobile + avec logo */
    .main-content.home-page {
        padding-top: 230px !important;
        /* 78px (TopBar) + 149px (Hero avec logo) + 3px = 230px (sélecteur mobile supprimé) */
    }
    
    /* TOUTES LES AUTRES PAGES - sans sélecteur, sans logo */
    .main-content.standard-page {
        padding-top: 190px !important;
        /* 78px (TopBar) + 110px (Hero compact) + 2px = 190px */
    }

    /* PAGE OPÉRATIONS - hero 149px SANS logo */
    .main-content.operations-page {
        padding-top: 227px !important;
        /* 78px (TopBar) + 149px (Hero sans logo) = 227px */
    }
}

/* ========================================
   📱 MOBILE TOPBAR FIXE (Style App Mobile)
   ======================================== */

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 10000 !important; /* Au-dessus du backdrop offcanvas (9998) */
    background-color: #FFFFFF !important; /* Forcer blanc en toutes circonstances */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 78px;
    padding: 4px 16px; /* EXACT : paddingVertical: 12, paddingHorizontal: 16 */
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    margin: 0 !important;
    margin-top: 0 !important;
    width: 100vw !important; /* VIEWPORT width, not parent width */
    margin-left: calc(-50vw + 50%) !important; /* CSS HACK to break out */
}

/* Sur mobile : TopBar fixed en haut */
@media (max-width: 991px) {
    .mobile-topbar {
        position: fixed !important;
        top: 0 !important;
    }
}

/* Effet d'ombre quand on scroll (ajouté via JS) */
.mobile-topbar.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #7BC043; /* colors.primary.main */
}

.mobile-topbar-brand i {
    font-size: 28px;
    color: #7BC043;
}

.mobile-topbar-menu-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-topbar-menu-btn:hover,
.mobile-topbar-menu-btn:active {
    background-color: #F3F4F6;
}

.mobile-topbar-menu-btn i {
    font-size: 28px; /* EXACT : size=28 */
    color: #374151;
}

/* ========================================
   📱 MOBILE HEADER GRADIENT (Style App Mobile)
   Styles EXACTS copiés de DashboardScreen.js
   ======================================== */

.mobile-header-gradient {
    position: fixed !important; /* FIXED pour rester toujours visible comme l'app mobile */
    top: 78px; /* Juste sous le TopBar fixed (hauteur réelle du TopBar) */
    left: 0;
    right: 0;
    z-index: 1020; /* Sous le TopBar (1030) mais au-dessus du contenu */
    background: var(--corporate-gradient);
    padding: 16px 20px; /* RÉDUIT : 16px au lieu de 24px pour correspondre à l'app */
    color: #FFFFFF;
    margin: 0 !important;
    width: 100% !important;
}

/* ========================================
   VARIANTES DE HAUTEUR HERO MOBILE
   ======================================== */

/* Hero mobile STANDARD - 110px (toutes pages SAUF Accueil) */
@media (max-width: 991px) {
    .mobile-header-gradient.standard {
        min-height: 110px;
        max-height: 110px;
        overflow: hidden;
    }
}

/* Hero mobile ACCUEIL - 149px (uniquement page d'accueil AVEC logo) */
@media (max-width: 991px) {
    .mobile-header-gradient.home {
        min-height: 149px;
        max-height: 149px;
        overflow: hidden;
    }
}

.mobile-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mobile-header-left {
    flex: 1;
    padding-right: 14px; /* RÉDUIT : était 16px */
}

/* Titre entreprise - EXACT comme l'app */
.mobile-company-title {
    font-size: 28px; /* RÉDUIT : 28px au lieu de 32px */
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px; /* RÉDUIT : 4px au lieu de 8px */
    line-height: 1.1; /* RÉDUIT pour moins d'espace */
}

/* Ligne Bonjour + Badge rôle */
.mobile-greeting-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px; /* RÉDUIT : 2px au lieu de 4px */
    flex-wrap: wrap;
}

/* Bonjour prénom - Retour à 15px */
.mobile-greeting {
    font-size: 14px; /* RÉDUIT : 14px au lieu de 15px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    margin-right: 8px;
}

/* Badge rôle - Transparent blanc 20% */
.mobile-role-badge {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2px 8px; /* RÉDUIT */
    border-radius: 4px;
    font-size: 10px; /* RÉDUIT */
    font-weight: 600;
    color: #FFFFFF;
    display: inline-block;
}

/* Subtitle - Retour à 13px */
.mobile-subtitle {
    font-size: 12px; /* RÉDUIT : 12px au lieu de 13px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2px; /* RÉDUIT : 2px au lieu de 4px */
}

/* Date - Retour à 12px */
.mobile-date-text {
    font-size: 11px; /* RÉDUIT : 11px au lieu de 12px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

/* Logo entreprise - Container fond blanc */
.mobile-logo-container {
    background-color: #FFFFFF;
    padding: 8px 12px; /* RÉDUIT pour header plus compact */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

/* Logo entreprise - Image */
.mobile-tenant-logo {
    width: 100px; /* RÉDUIT : 100px au lieu de 120px */
    height: 42px; /* RÉDUIT : 42px au lieu de 50px */
    object-fit: contain;
}

/* ========================================
   📱 SÉLECTEUR D'AGENCE MOBILE (Style App Mobile)
   Styles EXACTS copiés de DashboardScreen.js lignes 1097-1100
   ======================================== */

/* Sur mobile uniquement */

/* Fallback général */
.mobile-agence-selector {
    display: none; /* Masqué pour laisser place aux alertes en mobile */
}

.mobile-agence-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* Icône building à gauche */
.mobile-agence-icon {
    font-size: 20px;
    color: #7BC043;
    flex-shrink: 0;
}

/* Select dropdown style web classique */
.mobile-agence-select {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 10px 12px;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ========================================
   📱 FIX MENU HAMBURGER - Z-INDEX
   ======================================== */

/* Fix menu hamburger - z-index au-dessus des éléments mobiles fixes */
@media (max-width: 991px) {
    .offcanvas {
        z-index: 9999 !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }

    .offcanvas-end {
        top: 0 !important;
        right: 0 !important;
        border-left: 1px solid rgba(0,0,0,.2) !important;
    }

    .offcanvas-backdrop {
        z-index: 9998 !important;
    }

    /* S'assurer que les éléments mobiles fixes restent sous le menu */
    .mobile-topbar {
        z-index: 1030 !important;
    }

    .mobile-header-gradient {
        z-index: 1020 !important;
    }

    .mobile-agence-selector {
        z-index: 1010 !important;
    }
}

.mobile-agence-select:focus {
    border-color: #7BC043;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    outline: none;
}

/* Style des options */
.mobile-agence-select option {
    padding: 10px;
    font-size: 15px;
}

/* ========================================
   📱 BACKGROUND BODY - EXACT DE L'APP MOBILE
   ======================================== */

body {
    background-color: #F3F4F6; /* EXACT : backgroundColor: '#F3F4F6' (ligne 1090 DashboardScreen.js) */
}

/* ========================================
   📱 RESPONSIVE - Cacher/Afficher selon écran
   ======================================== */

/* Sur mobile (< 992px) : Cacher navbar desktop et hero desktop */
@media (max-width: 991.98px) {
    /* Cacher UNIQUEMENT le contenu visible de la navbar desktop (le topbar mobile la remplace) */
    /* MAIS garder l'offcanvas accessible ! */
    .navbar.navbar-expand-lg > .container-fluid > .navbar-brand,
    .navbar.navbar-expand-lg > .container-fluid > .navbar-toggler {
        display: none !important;
    }

    /* Garder la navbar visible mais avec hauteur 0 pour ne pas prendre d'espace */
    .navbar.navbar-expand-lg {
        display: block !important;
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar.navbar-expand-lg > .container-fluid {
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Le hero desktop est déjà caché via classe d-none d-lg-block dans index.php */
}

/* =================================================================
   CLASSES POUR LES CERCLES COLORÉS DES ICÔNES - STATS CARDS
   ================================================================= */

/* Cercle vert clair - Total Recettes */
.bg-success-lt {
    background-color: rgba(40, 167, 69, 0.15) !important;
}

/* Cercle bleu clair - Recettes Location */
.bg-primary-lt {
    background-color: rgba(54, 162, 235, 0.15) !important;
}

/* Cercle turquoise clair - Recettes Extras */
.bg-info-lt {
    background-color: rgba(75, 192, 192, 0.15) !important;
}

/* Cercle jaune clair - Moyenne / Véhicule */
.bg-warning-lt {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* Forcer l'affichage des icônes Font Awesome */
.fas, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

/* S'assurer que les icônes dans les cercles sont visibles */
.rounded-circle i.fas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
} 

/* =================================================================
   MODALS MODERNES 2025 - Harmonisés avec les cartes existantes
   Inspiré de Stripe, Linear, Notion, Vercel
   ================================================================= */

/* 1. Modal Backdrop - Glassmorphism professionnel */
.modal-backdrop {
    backdrop-filter: blur(8px);
    background: rgba(26, 59, 93, 0.25) !important; /* corporate-primary semi-transparent */
}

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

/* 2. Modal Content - Aligné avec style des cartes */
.modal-content {
    border-radius: 16px !important; /* Plus arrondi que les cartes (12px) */
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 60px rgba(26, 59, 93, 0.15) !important; /* Shadow plus forte que cartes */
    overflow: hidden;
    background: white;
}

/* 3. Modal Header - Gradients premium adaptés aux couleurs */
.modal-header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: 2px solid rgba(255,255,255,0.2) !important;
    padding: 1.5rem;
    position: relative;
}

/* Gradients par type de modal (harmonisés avec les couleurs corporate) */
.modal-header.bg-primary {
    background: linear-gradient(135deg, #1A3B5D 0%, #2c5282 100%) !important;
}

.modal-header.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #20c9e0 100%) !important;
}

.modal-header.bg-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #ef5350 100%) !important;
}

.modal-header.bg-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: var(--corporate-dark) !important;
}

/* Modal Title - Typography moderne */
.modal-title {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-title i {
    font-size: 1.1rem;
}

.modal-title .badge {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* 4. Close Button - Flottant et moderne (CORRIGÉ - préserve l'icône SVG) */
.modal-header .btn-close,
.modal-header .btn-close-white {
    background-color: rgba(255,255,255,0.2) !important;
    filter: brightness(0) invert(1) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    opacity: 0.9 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.modal-header .btn-close:hover,
.modal-header .btn-close-white:hover {
    background-color: rgba(255,255,255,0.3) !important;
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

/* Exception pour headers clairs (bg-light) - bouton close noir bien visible */
.modal-header.bg-light .btn-close {
    filter: none !important;
    background-color: transparent !important;
    opacity: 0.8 !important;
}

.modal-header.bg-light .btn-close:hover {
    filter: none !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    transform: rotate(90deg) !important;
}

/* Bouton close custom pour modal Créances Total */
.modal-close-btn-creances:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #111827 !important;
    transform: rotate(90deg);
}

/* Bouton close custom pour modal Impayés Total */
.modal-close-btn-impayes:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #111827 !important;
    transform: rotate(90deg);
}

/* 5. Modal Body - Scrollbar personnalisée */
.modal-body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* Scrollbar moderne - Webkit (Chrome, Safari, Edge) */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    margin: 4px 0;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1A3B5D 0%, #7BC043 100%);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2c5282 0%, #8fd350 100%);
}

/* Scrollbar Firefox */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: #1A3B5D #f1f1f1;
}

/* 6. Animation d'Entrée - Smooth et professionnel */
.modal.fade .modal-dialog {
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 7. Liste Agences dans Modal - Style carte adapté */
.modal-body .list-group-item {
    border: 1px solid rgba(0,0,0,0.08);
    border-left: 4px solid transparent !important;
    border-radius: 8px !important;
    margin-bottom: 0.75rem;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}

.modal-body .list-group-item:hover {
    border-left-color: var(--corporate-secondary) !important;
    background: rgba(123, 192, 67, 0.05) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 8. Badges dans Modal - Alignés avec les cartes */
.modal-body .badge {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
}

.modal-body .badge.bg-success {
    background: linear-gradient(135deg, #7BC043 0%, #2ecc71 100%) !important;
}

.modal-body .badge.bg-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
}

.modal-body .badge.bg-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

.modal-body .badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #20c9e0 100%) !important;
}

/* 9. Progress bars dans Modal */
.modal-body .progress {
    height: 8px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.05);
    overflow: hidden;
}

.modal-body .progress-bar {
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 10. Modal Footer - Boutons modernes */
.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: rgba(248, 249, 250, 0.5);
}

.modal-footer .btn {
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-footer .btn-primary {
    background: linear-gradient(135deg, #1A3B5D 0%, #2c5282 100%);
    border: none;
}

.modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 59, 93, 0.3);
}

.modal-footer .btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #20c9e0 100%);
    border: none;
}

.modal-footer .btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.modal-footer .btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #ef5350 100%);
    border: none;
}

.modal-footer .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.modal-footer .btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
}

.modal-footer .btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

.modal-footer .btn-secondary {
    background: #6c757d;
    border: none;
}

.modal-footer .btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* 11. Responsive - Mobile */
@media (max-width: 768px) {
    .modal-dialog-xl {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 1rem;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

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

    .modal-body {
        padding: 1rem;
        max-height: 70vh;
    }

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

    .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* 12. Amélioration de lisibilité dans les modals */
.modal-body h4,
.modal-body h5,
.modal-body h6 {
    color: var(--corporate-dark);
    font-weight: 600;
    margin-bottom: 1rem;
}

.modal-body p {
    color: #495057;
    line-height: 1.6;
}

.modal-body .text-muted {
    color: #6c757d !important;
}

/* 13. Tables dans modals (si présentes) */
.modal-body .table {
    border-radius: 8px;
    overflow: hidden;
}

.modal-body .table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modal-body .table th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--corporate-dark);
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.modal-body .table td {
    vertical-align: middle;
}

/* 14. Icônes dans le contenu du modal */
.modal-body .fas,
.modal-body .far,
.modal-body .fab {
    margin-right: 0.5rem;
}

/* 15. États de chargement dans modal */
.modal-body .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* =================================================================
   FIN MODALS MODERNES 2025
   ================================================================= */
/* =================================================================
   MODAL TAUX D'OCCUPATION - BOUTON FERMER
   Style cohérent avec modals alertes (Visites/Vidanges/Assurances/Vignettes)
   ================================================================= */
.modal-close-btn-taux {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280; /* Gris neutre - VISIBLE sur fond blanc */
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.modal-close-btn-taux:hover {
    background: #F3F4F6; /* Gris clair au hover - Standard Stripe */
    color: #111827; /* Noir au hover */
    transform: scale(1.05); /* Léger zoom */
}

.modal-close-btn-taux:active {
    transform: scale(0.95);
    background: #E5E7EB; /* Gris plus foncé au clic */
}

.modal-close-btn-taux:focus {
    outline: 2px solid rgba(107, 114, 128, 0.3);
    outline-offset: 2px;
}


/* =================================================================
   MODAL DISPONIBILITÉS - BOUTON FERMER
   Style cohérent avec modals Taux d'Occupation et Alertes
   ================================================================= */
.modal-close-btn-dispo {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280; /* Gris neutre - VISIBLE sur fond blanc */
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.modal-close-btn-dispo:hover {
    background: #F3F4F6; /* Gris clair au hover - Standard Stripe */
    color: #111827; /* Noir au hover */
    transform: scale(1.05); /* Léger zoom */
}

.modal-close-btn-dispo:active {
    transform: scale(0.95);
    background: #E5E7EB; /* Gris plus foncé au clic */
}

.modal-close-btn-dispo:focus {
    outline: 2px solid rgba(107, 114, 128, 0.3);
    outline-offset: 2px;
}



/* =================================================================
   MODAL VÉHICULES EN ARRÊT - BOUTON FERMER
   Style cohérent avec modals Taux d'Occupation et Disponibilités
   ================================================================= */
.modal-close-btn-arretes {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280; /* Gris neutre - VISIBLE sur fond blanc */
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.modal-close-btn-arretes:hover {
    background: #F3F4F6; /* Gris clair au hover - Standard Stripe */
    color: #111827; /* Noir au hover */
    transform: scale(1.05); /* Léger zoom */
}

.modal-close-btn-arretes:active {
    transform: scale(0.95);
    background: #E5E7EB; /* Gris plus foncé au clic */
}

.modal-close-btn-arretes:focus {
    outline: 2px solid rgba(107, 114, 128, 0.3);
    outline-offset: 2px;
}

/* =================================================================
   MODAL CA PAR AGENCE - BOUTON FERMER
   Style cohérent avec modals Taux d'Occupation, Disponibilités et Véhicules en Arrêt
   ================================================================= */
.modal-close-btn-ca {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280; /* Gris neutre - VISIBLE sur fond blanc */
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.modal-close-btn-ca:hover {
    background: #F3F4F6; /* Gris clair au hover - Standard Stripe */
    color: #111827; /* Noir au hover */
    transform: scale(1.05); /* Léger zoom */
}

.modal-close-btn-ca:active {
    transform: scale(0.95);
    background: #E5E7EB; /* Gris plus foncé au clic */
}

.modal-close-btn-ca:focus {
    outline: 2px solid rgba(107, 114, 128, 0.3);
    outline-offset: 2px;
}

/* =================================================================
   MODAL PAIEMENTS PAR AGENCE - BOUTON FERMER
   Style cohérent avec modals CA, Taux d'Occupation et Disponibilités
   ================================================================= */
.modal-close-btn-paiements {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280; /* Gris neutre - VISIBLE sur fond blanc */
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.modal-close-btn-paiements:hover {
    background: #F3F4F6; /* Gris clair au hover - Standard Stripe */
    color: #111827; /* Noir au hover */
    transform: scale(1.05); /* Léger zoom */
}

.modal-close-btn-paiements:active {
    transform: scale(0.95);
    background: #E5E7EB; /* Gris plus foncé au clic */
}

.modal-close-btn-paiements:focus {
    outline: 2px solid rgba(107, 114, 128, 0.3);
    outline-offset: 2px;
}

/* =================================================================
   MODAL TOTAL PARC - BOUTON FERMER
   Style cohérent avec modals Taux d'Occupation et Disponibilités
   ================================================================= */
.modal-close-btn-parc {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280; /* Gris neutre - VISIBLE sur fond blanc */
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.modal-close-btn-parc:hover {
    background: #F3F4F6; /* Gris clair au hover - Standard Stripe */
    color: #111827; /* Noir au hover */
    transform: scale(1.05); /* Léger zoom */
}

.modal-close-btn-parc:active {
    transform: scale(0.95);
    background: #E5E7EB; /* Gris plus foncé au clic */
}

.modal-close-btn-parc:focus {
    outline: 2px solid rgba(107, 114, 128, 0.3);
    outline-offset: 2px;
}


/* ========================================
   BOUTON CORPORATE PURPLE (Analytics)
   ======================================== */
.btn-corporate-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-corporate-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
    color: white;
}

.btn-corporate-purple:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.bg-purple-lt {
    background: rgba(102, 126, 234, 0.15) !important;
    color: #667eea !important;
}

/* =================================================================
   BOOTSTRAP 5 DROPEND - SOUS-MENUS MULTI-NIVEAUX
   Pour les sous-menus dans la navigation (ex: Statistiques Dépenses)
   ================================================================= */

/* Positionnement du sous-menu à droite */
.dropdown-menu .dropend > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 0.125rem;
}

/* Hover sur l'item parent du sous-menu */
.dropdown-menu .dropend:hover > .dropdown-menu {
    display: block;
}

/* Style de la flèche dropdown-toggle dans le sous-menu */
.dropdown-menu .dropdown-toggle::after {
    vertical-align: 0.155em;
    margin-left: 0.455em;
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}

/* Hover sur les items du sous-menu */
.dropdown-menu .dropend .dropdown-item {
    padding-left: 1.5rem;
    transition: all 0.2s ease;
}

.dropdown-menu .dropend .dropdown-item:hover {
    background-color: rgba(26, 59, 93, 0.05);
    padding-left: 1.8rem;
}

/* Style spécifique pour le parent du sous-menu */
.dropdown-menu .dropend > .dropdown-toggle {
    font-weight: 500;
    position: relative;
}

/* Animation d'ouverture du sous-menu */
.dropdown-menu .dropend .dropdown-menu {
    animation: slideInRight 0.2s ease;
}

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

/* Responsive : Sur mobile, afficher sous au lieu de à droite */
@media (max-width: 768px) {
    .dropdown-menu .dropend > .dropdown-menu {
        position: static;
        margin-left: 1rem;
        box-shadow: none;
        border-left: 2px solid var(--corporate-primary);
    }

    .dropdown-menu .dropend:hover > .dropdown-menu {
        display: none; /* Désactiver le hover sur mobile */
    }
}


/* ============================================
   🔄 TOGGLE VUE COMPTABLE - Amélioration Contraste
   ============================================ */

/* État INACTIF : Bordure blanche translucide, fond transparent */
.vue-comptable-toggle .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    background: transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* État ACTIF (checked) : Fond blanc, texte violet, ombre */
.vue-comptable-toggle .btn-check:checked + .btn-outline-light {
    background-color: white !important;
    color: #667eea !important;
    border-color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Hover : Fond blanc léger, élévation */
.vue-comptable-toggle .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Active state (pendant le click) */
.vue-comptable-toggle .btn-outline-light:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Focus : Outline visible pour accessibilité */
.vue-comptable-toggle .btn-check:focus + .btn-outline-light {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* =================================================================
   TABLEAU STANDARD UNIFIÉ — réf. page Opérations (axe L)
   Classe partagée : ajouter "table-corporate-grid" au <table>.
   Source unique de vérité — ne JAMAIS dupliquer ce style par page.
   ================================================================= */
.table-corporate-grid {
    font-size: 0.875rem;
    width: 100%;
}

.table-corporate-grid th,
.table-corporate-grid td {
    padding: 0.5rem 0.25rem;
    vertical-align: middle;
}

/* Lignes zébrées + hover (identiques à #operationsTable) */
.table-corporate-grid tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}
.table-corporate-grid tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}
.table-corporate-grid tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Liens de tri dans les en-têtes */
.table-corporate-grid thead th a {
    color: inherit !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.table-corporate-grid thead th a:hover {
    color: #0d6efd !important;
    transform: translateY(-1px);
}
.table-corporate-grid thead th a i {
    transition: all 0.2s ease;
    opacity: 0.7;
}
.table-corporate-grid thead th a:hover i,
.table-corporate-grid thead th a .fa-sort-up,
.table-corporate-grid thead th a .fa-sort-down {
    opacity: 1;
    color: #0d6efd !important;
}

/* Scrollbar horizontale unifiée pour les conteneurs de table */
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* =================================================================
   THÈME SWEETALERT2 UNIFIÉ (axe L) — applique à TOUS les Swal.fire
   existants sans réécrire les call sites. Source unique.
   ================================================================= */
.swal2-popup {
    border-radius: 12px !important;
    font-family: inherit !important;
}
.swal2-title { color: #1A3B5D !important; }
.swal2-confirm.swal2-styled {
    background-color: #1A3B5D !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(26, 59, 93, 0.3) !important;
}
.swal2-cancel.swal2-styled {
    background-color: #6c757d !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.swal2-icon.swal2-success { border-color: #7BC043 !important; color: #7BC043 !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #7BC043 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(123, 192, 67, 0.3) !important; }
.swal2-icon.swal2-error { border-color: #e74c3c !important; color: #e74c3c !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #e74c3c !important; }
.swal2-icon.swal2-warning { border-color: #f39c12 !important; color: #f39c12 !important; }
.swal2-icon.swal2-info { border-color: #1A3B5D !important; color: #1A3B5D !important; }
.swal2-timer-progress-bar { background: rgba(26, 59, 93, 0.3) !important; }
/* Toasts : ombre douce cohérente */
.swal2-toast { box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important; border-radius: 10px !important; }