/* Place ce CSS APRES tous tes imports DataTables */

/* ─── TABLES : taille de base ───────────────────────────────── */
table,
.table {
    font-size: 14px;
}

/* ─── AOS (Animate On Scroll) ───────────────────────────────── */
.card[data-aos] {
    overflow: hidden;
}

.dataTables_wrapper .dt-buttons .dt-button {
    margin-right: 0.5rem !important;
  }
  
  /* Et pour éviter une marge après le dernier bouton : */
  .dataTables_wrapper .dt-buttons .dt-button:last-child {
    margin-right: 0;
  }
/* espace sous la barre de recherche */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
  }
    
/* espace au dessus de la pagination */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
  }
/* Style pour les images de profil dans la table */
img.profile {
    border-radius: 6px;
    object-fit: cover;
}
img.profile-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
/* Style pour les boutons d'action */
.btn-action {
    margin-right: 5px;
}
.btn-action:last-child {
    margin-right: 0;
}

.image-preview.has-image i {
    display: none;
}

.image-preview.has-image i {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — SCANOVA APP
   Sélecteur principal : [data-bs-theme="dark"]
   ═══════════════════════════════════════════════════════════════ */

/* ─── TABLE HEADERS ─────────────────────────────────────────── */
/* th global adaptatif */
[data-bs-theme="light"] th {
    background: #23344b !important;
    color: white !important;
}
[data-bs-theme="dark"] th {
    background: #1a2638 !important;
    color: #dee2e6 !important;
}

/* ─── DataTables ────────────────────────────────────────────── */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: rgba(255,255,255,0.05);
}
[data-bs-theme="dark"] table.dataTable tbody td {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dt-buttons .dt-button {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* ─── CARDS & BACKGROUNDS ───────────────────────────────────── */
[data-bs-theme="dark"] .card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card-header {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* ─── INFO BOX (Dashboard) ──────────────────────────────────── */
[data-bs-theme="dark"] .info-box {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .info-box .info-box-text {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .info-box .info-box-number {
    color: var(--bs-body-color);
}

/* ─── SMALL BOX (Dashboard) ─────────────────────────────────── */
[data-bs-theme="dark"] .small-box {
    color: #fff;
}

/* ─── FORMULAIRES ───────────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.15);
}
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ─── MODALS ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .modal-header {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--bs-border-color);
}

/* ─── SWEETALERT2 ───────────────────────────────────────────── */
[data-bs-theme="dark"] .swal2-popup {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .swal2-title {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .swal2-html-container {
    color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .swal2-close {
    color: var(--bs-body-color) !important;
}

/* ─── BOUTONS CUSTOM INLINE (.btn-scanova) ──────────────────── */
.btn-scanova-primary {
    background-color: #0a529b;
    color: #fff;
    border: none;
}
.btn-scanova-primary:hover {
    background-color: #083f78;
    color: #fff;
}
.btn-scanova-success {
    background-color: #10b981;
    color: #fff;
    border: none;
}
.btn-scanova-success:hover {
    background-color: #0d9668;
    color: #fff;
}

/* ─── PREVIEW BOX (Face ID, etc.) ───────────────────────────── */
[data-bs-theme="dark"] .preview-box {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* ─── IMAGE PREVIEW (Secrétaires, Agents) ───────────────────── */
[data-bs-theme="dark"] .image-preview {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .image-preview i {
    color: var(--bs-secondary-color);
}

/* ─── ABOUT PAGE GRADIENT ───────────────────────────────────── */
[data-bs-theme="dark"] .about-hero {
    background: linear-gradient(135deg, rgba(10,82,155,0.95) 0%, rgba(4,30,60,0.98) 100%);
}
[data-bs-theme="dark"] .developer-card .dev-header {
    background: linear-gradient(135deg, #082a4d, #041e3c);
}
[data-bs-theme="dark"] .stat-card {
    background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .tech-badge {
    border: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .timeline-item {
    border-left-color: var(--bs-border-color);
}

/* ─── IMPORT AGENT PAGE ─────────────────────────────────────── */
[data-bs-theme="dark"] .drop-zone {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .drop-zone:hover {
    background: rgba(13,110,253,0.08);
    border-color: #0d6efd;
}
[data-bs-theme="dark"] .drop-zone-title {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .drop-zone-hint {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .file-info {
    background: rgba(13,202,240,0.08);
    border-left-color: #0dcaf0;
}
[data-bs-theme="dark"] .file-info-label {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .file-info-value {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .instructions-card {
    background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .instructions-card h6 {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .instructions-list li {
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .format-example {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .summary-card {
    background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .summary-card.valid {
    background: rgba(25,135,84,0.1);
}
[data-bs-theme="dark"] .summary-card.invalid {
    background: rgba(220,53,69,0.1);
}
[data-bs-theme="dark"] .summary-card.total {
    background: rgba(13,202,240,0.1);
}
[data-bs-theme="dark"] .summary-label {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .preview-table {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .preview-table thead {
    background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .preview-table th {
    color: var(--bs-body-color) !important;
    background: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .preview-table td {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .row-valid {
    background-color: rgba(25,135,84,0.08);
}
[data-bs-theme="dark"] .row-invalid {
    background-color: rgba(220,53,69,0.08);
}
[data-bs-theme="dark"] .status-badge.success {
    background: rgba(25,135,84,0.2);
    color: #6ee7b7;
}
[data-bs-theme="dark"] .status-badge.error {
    background: rgba(220,53,69,0.2);
    color: #fca5a5;
}

/* ─── APEXCHARTS ────────────────────────────────────────────── */
[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-title-text {
    fill: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .apexcharts-legend-text {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .apexcharts-gridline {
    stroke: var(--bs-border-color);
}
[data-bs-theme="dark"] .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-yaxis line {
    stroke: var(--bs-border-color);
}
[data-bs-theme="dark"] .apexcharts-tooltip {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .apexcharts-menu {
    background: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--bs-tertiary-bg) !important;
}

/* Force la visibilité de la ligne du graphique journalier (#presence-chart) */
#presence-chart .apexcharts-series path {
    stroke: #2563EB !important; /* couleur bleu distincte */
    stroke-width: 4px !important;
    stroke-opacity: 1 !important;
    stroke-dasharray: none !important;
    fill: none !important;
}

[data-bs-theme="dark"] #presence-chart .apexcharts-series path {
    stroke: rgba(96,165,250,0.95) !important; /* bleu clair en dark */
}

#presence-chart .apexcharts-series-markers circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}

/* Sélecteurs plus précis pour s'assurer de cibler le path de la série */
#presence-chart .apexcharts-plot-series .apexcharts-series path,
#presence-chart .apexcharts-plot-series path.apexcharts-line,
#presence-chart .apexcharts-plot-series path.apexcharts-area {
    stroke: #2563EB !important;
    stroke-width: 6px !important;
    stroke-opacity: 1 !important;
    fill: none !important;
}

[data-bs-theme="dark"] #presence-chart .apexcharts-plot-series .apexcharts-series path,
[data-bs-theme="dark"] #presence-chart .apexcharts-plot-series path.apexcharts-line {
    stroke: rgba(96,165,250,0.95) !important;
}

/* ─── DROPDOWN ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* ─── BG-BODY-TERTIARY OVERRIDE ─────────────────────────────── */
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--bs-body-bg) !important;
}

/* ─── ENGAGEMENT CARD (aboutUs) ─────────────────────────────── */
.card-engagement-footer {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
[data-bs-theme="dark"] .card-engagement-footer {
    background: linear-gradient(135deg, #1a1d20, #212529) !important;
}

/* ─── NAVBAR sticky shadow adaptatif ────────────────────────── */
[data-bs-theme="dark"] .app-header.sticky-top {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* ─── 403 ERROR PAGE ────────────────────────────────────────── */
[data-bs-theme="dark"] .error-box {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

/* ─── TIMELINE : rendre la ligne verticale plus visible ─────── */
/* Surcharge pour améliorer contraste sur thèmes clair et sombre */
.timeline::before {
    background-color: #2563EB !important; /* bleu visible */
    width: 4px !important;
    right: 30px;
    border-radius: 0.375rem;
    box-shadow: 0 0 0 1px rgba(37,99,235,0.06);
}

[data-bs-theme="dark"] .timeline::before {
    background-color: rgba(255,255,255,0.12) !important; /* discret mais lisible en dark */
}


/* ─── BADGES BG-LIGHT EN DARK ────────────────────────────────── */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .badge.bg-light.border {
    border-color: var(--bs-border-color) !important;
}

/* ─── FEATURE-ICON BG OPACITY ADAPTATIF ──────────────────────── */
[data-bs-theme="dark"] .feature-icon {
    opacity: 0.9;
}

/* ─── LIST-GROUP ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ─── SCROLLBAR (optionnel) ──────────────────────────────────── */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR HARMONISÉ — THÈME UNIFIÉ
   Palette cohérente avec les couleurs primaires de l'application
   ═══════════════════════════════════════════════════════════════ */

/* ─── SIDEBAR BASE ──────────────────────────────────────────── */
[data-bs-theme="dark"] .app-sidebar {
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}

/* ─── SIDEBAR BRAND (Logo) ──────────────────────────────────── */
[data-bs-theme="dark"] .sidebar-brand {
    background: rgba(10, 82, 155, 0.08);
    border-bottom: 2px solid rgba(10, 82, 155, 0.25);
    padding: 0.75rem;
}

[data-bs-theme="dark"] .sidebar-brand .brand-link {
    color: var(--bs-body-color);
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .sidebar-brand .brand-link:hover {
    transform: scale(1.05);
}

/* ─── SIDEBAR MENU ITEMS ────────────────────────────────────── */
[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link {
    color: var(--bs-secondary-color);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    padding: 0.65rem 1.25rem;
    font-weight: 500;
}

[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link i {
    color: var(--bs-secondary-color);
    margin-right: 0.75rem;
    font-size: 1.15rem;
    transition: color 0.2s ease;
}

[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link p {
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

/* ─── SIDEBAR MENU HOVER STATE ──────────────────────────────── */
[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link:hover {
    background: rgba(10, 82, 155, 0.12);
    border-left-color: #0a529b;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link:hover i {
    color: #0a529b;
    transform: translateX(2px);
}

/* ─── SIDEBAR MENU ACTIVE STATE ─────────────────────────────── */
[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link.active {
    background: rgba(10, 82, 155, 0.15);
    border-left-color: #0a529b;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .sidebar-menu .nav-item .nav-link.active i {
    color: #0a529b;
}

/* ─── SUBMENU STYLING ───────────────────────────────────────── */
.sidebar-menu .nav-treeview {
    background: rgba(10, 82, 155, 0.05);
    border-left: 2px solid rgba(10, 82, 155, 0.15);
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

[data-bs-theme="dark"] .nav-treeview .nav-item .nav-link {
    padding-left: 2.5rem;
    color: var(--bs-secondary-color);
    border-left-color: transparent;
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .nav-treeview .nav-item .nav-link i {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .nav-treeview .nav-item .nav-link:hover {
    background: rgba(10, 82, 155, 0.1);
    border-left-color: rgba(10, 82, 155, 0.4);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .nav-treeview .nav-item .nav-link:hover i {
    color: #0a529b;
}

[data-bs-theme="dark"] .nav-treeview .nav-item .nav-link.active {
    background: rgba(10, 82, 155, 0.15);
    border-left-color: #0a529b;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .nav-treeview .nav-item .nav-link.active i {
    color: #0a529b;
}

/* ─── SIDEBAR CHEVRON ARROW ────────────────────────────────── */
[data-bs-theme="dark"] .nav-link .nav-arrow {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .nav-item:not(.menu-open) > .nav-link .nav-arrow {
    transform: rotate(0deg);
}

[data-bs-theme="dark"] .nav-item.menu-open > .nav-link .nav-arrow {
    transform: rotate(90deg);
    color: #0a529b;
}

/* ─── SIDEBAR WRAPPER SCROLL ────────────────────────────────── */
[data-bs-theme="dark"] .sidebar-wrapper {
    background: transparent;
}

[data-bs-theme="dark"] .sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
}

[data-bs-theme="dark"] .sidebar-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

[data-bs-theme="dark"] .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(10, 82, 155, 0.25);
    border-radius: 3px;
}

[data-bs-theme="dark"] .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 82, 155, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MEDIA QUERIES GLOBALES
   Breakpoints Bootstrap 5 : xs(<576) sm(≥576) md(≥768) lg(≥992) xl(≥1200) xxl(≥1400)
   ═══════════════════════════════════════════════════════════════ */

/* ─── GÉNÉRAL : font-size adaptatif sur petits écrans ────────── */
@media (max-width: 767.98px) {
    /* Dropdown notifications : ne pas dépasser l'écran */
    .dropdown-menu-lg {
        width: calc(100vw - 2rem) !important;
        min-width: auto !important;
        max-width: 300px;
        right: -1rem !important;
        left: auto !important;
    }

    /* Tables : police réduite pour mieux tenir */
    table,
    .table {
        font-size: 12px;
    }
    table th,
    table td {
        padding: 0.35rem 0.4rem;
    }
    /* Titres : taille réduite */
    .app-content h1,
    .app-content .h1 {
        font-size: 1.4rem;
    }
    .app-content h3,
    .app-content .h3 {
        font-size: 1.1rem;
    }
    .app-content h4,
    .app-content .h4 {
        font-size: 1rem;
    }

    /* Breadcrumb : caché sur mobile */
    .breadcrumb {
        display: none;
    }

    /* Content padding réduit */
    .app-content {
        padding: 0.75rem !important;
    }
    .app-content .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Cards : marges réduites */
    .card {
        margin-bottom: 0.75rem;
    }
    .card-body {
        padding: 0.75rem;
    }
    .card-header {
        padding: 0.5rem 0.75rem;
    }

    /* Boutons : pleine largeur sur très petits écrans */
    .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
    }
    .d-flex.gap-2 .btn {
        width: 100%;
    }

    /* Info-box : texte ajusté */
    .info-box {
        min-height: auto;
        padding: 0.5rem;
    }
    .info-box-content {
        padding: 0 0.5rem;
    }
    .info-box-text {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    .info-box-number {
        font-size: 1.1rem;
    }
    .info-box-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        line-height: 50px;
    }

    /* DataTables : ajustements */
    .dataTables_wrapper .dt-buttons {
        flex-wrap: wrap;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dt-buttons .dt-button {
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100%;
    }
    .dataTables_wrapper .dataTables_length {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dataTables_info {
        font-size: 0.75rem;
        text-align: center;
    }
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Formulaires : labels + selects pleine largeur */
    .form-select,
    .form-control {
        font-size: 0.85rem;
    }

    /* Modals : ajustements */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* SweetAlert : ajustement taille */
    .swal2-popup {
        width: 90% !important;
        font-size: 0.9rem !important;
    }

    /* Images profile dans tables */
    img.profile,
    table img[style*="width:48px"],
    table img[style*="width:45px"] {
        width: 32px !important;
        height: 32px !important;
    }

    /* About page */
    .about-hero {
        padding: 1.5rem 1rem;
    }

    /* Charts : hauteur réduite */
    #presence-chart,
    #service-chart,
    [id*="chart"] {
        height: 250px !important;
        min-height: 200px;
    }

    /* Masquer colonnes non essentielles sur mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* ─── TABLETTES (768-991px) ──────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    table,
    .table {
        font-size: 13px;
    }
    .app-content {
        padding: 1rem !important;
    }
    .info-box-text {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    /* DataTables : rangement */
    .dataTables_wrapper .dataTables_filter input {
        width: 200px;
    }

    /* Charts */
    #presence-chart,
    #service-chart,
    [id*="chart"] {
        height: 300px !important;
    }
}

/* ─── PETITS MOBILES (<= 480px) ──────────────────────────────── */
@media (max-width: 480px) {
    .app-content-header h3 {
        font-size: 0.95rem;
    }
    /* Masquer certaines colonnes */
    table .col-hide-xs {
        display: none;
    }
    /* Boutons encore plus petits */
    .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    /* Info-box icon encore plus petit */
    .info-box-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        line-height: 40px;
    }
    .info-box-text {
        max-width: 90px;
        font-size: 0.7rem;
    }
    .info-box-number {
        font-size: 0.95rem;
    }
}

/* ─── DESKTOP LARGE (≥1400px) ────────────────────────────────── */
@media (min-width: 1400px) {
    .app-content .container-fluid {
        max-width: 1400px;
    }
}

/* ─── IMPRESSION ─────────────────────────────────────────────── */
@media print {
    .app-sidebar,
    .app-header,
    .app-footer,
    .dt-buttons,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info,
    .btn,
    .totop {
        display: none !important;
    }
    .app-main,
    .app-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    .table {
        font-size: 11px;
    }
    .card {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ─── UTILITAIRES RESPONSIVE ─────────────────────────────────── */
/* Wrapper pour forcer le scroll horizontal des tables */
.table-responsive-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Colonne masquable sur mobile via classes */
@media (max-width: 767.98px) {
    .d-mobile-none { display: none !important; }
}
@media (max-width: 991.98px) {
    .d-tablet-none { display: none !important; }
}

/* -----------------------------------------------------------------
     Styles pour la page d'accueil (splash) : public/index.php
     Déplacé depuis le <style> inline de la page pour centraliser le CSS
     ----------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.splash {
    margin: 0;
    height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(-45deg, #007bff, #6610f2, #00c6ff, #20c997);
    background-size: 400% 400%;
    animation: gradientBG 12s ease infinite;
    opacity: 0;
    transition: opacity 1s ease;
    padding: 20px;
    overflow-y: auto;
}
body.splash.loaded { opacity: 1; }


.card.splash {
    width: 100%;
    max-width: 520px; /* largeur confortable restaurée */
    padding: 18px 14px; /* padding modéré */
    background: rgba(0,0,0,0.45);
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.30);
    animation: fadeIn 1.2s ease forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px auto;
}

/* Override spécifique pour le logo à l'intérieur de la card splash */
.card.splash .logo {
    width: clamp(120px, 16vw, 220px);
}
@keyframes fadeIn {
    from { transform: translateY(30px); opacity:0 }
    to   { transform: translateY(0); opacity:1 }
}

.logo {
    width: clamp(140px, 14vw, 260px);
    height: auto;
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

h1 { 
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
    margin: 18px 0 8px 0;
    word-wrap: break-word;
}

p { 
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    line-height: 1.5; 
    margin: 12px 0 18px 0;
    word-wrap: break-word;
}

.loader {
    margin: 12px auto 0;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Responsive pour tablettes */
@media (max-width: 768px) {
    body.splash {
        padding: 15px;
    }
    .card.splash {
        padding: 18px 14px; /* légèrement réduit pour tablettes */
        border-radius: 12px;
    }
    .logo {
        width: clamp(120px, 18vw, 220px);
        margin-bottom: 12px;
    }
    h1 { margin: 10px 0 8px 0; }
    p { margin: 12px 0 20px 0; }
}

/* Responsive pour mobiles */
@media (max-width: 480px) {
    body.splash {
        padding: 10px;
        justify-content: flex-start;
        align-items: flex-start;
        min-height: 100vh;
        padding-top: 20px;
    }
    .card.splash {
        padding: 14px 12px; /* compact sur mobiles */
        border-radius: 10px;
        margin-top: 8px;
    }
    .logo {
        width: clamp(100px, 28vw, 160px);
        height: auto;
        margin-bottom: 20px;
    }
    h1 { margin: 8px 0 6px 0; }
    p { margin: 10px 0 18px 0; }
    .loader {
        width: 50px;
        height: 50px;
        border-width: 4px;
    }
}

/* Ultra-mobiles (< 360px) */
@media (max-width: 360px) {
    body.splash { padding: 8px; }
    .card.splash { padding: 18px 12px; }
    .logo { width: clamp(90px, 30vw, 140px); height: auto; }
    p { margin: 8px 0 15px 0; }
}

/* Fin styles splash */