/* ChristianSOFT — design des modules (cartes, tableaux, formulaires, onglets, thème sombre).
   Chargé après les styles existants ; les sélecteurs « body .content-page » l'emportent sur les <style> inline des vues. */

body .content-page {
    --cs-blue: #3878F4; --cs-blue-dark: #2a62d1; --cs-card: #ffffff; --cs-bg: #f0f4ff; --cs-soft: #f3f6ff;
    --cs-text: #1e293b; --cs-muted: #64748b; --cs-border: #e2e8f0; --cs-r: 16px;
    --cs-sh: 0 2px 12px rgba(56,120,244,.08); --cs-sh-h: 0 8px 28px rgba(56,120,244,.16);
}
body.dark .content-page {
    --cs-card: #1e2433; --cs-bg: #151a27; --cs-soft: #262d40; --cs-text: #e5e9f2; --cs-muted: #9aa5bd; --cs-border: #333b52;
    --cs-sh: 0 2px 12px rgba(0,0,0,.35); --cs-sh-h: 0 8px 28px rgba(0,0,0,.5);
}

/* En-tête de page : plus de grand vide entre le titre et le contenu */
body .content-page .cs-page { padding: 8px 0 0; font-family: 'Poppins', sans-serif; }
body .content-page .cs-page-header { margin-bottom: 14px; }
body .content-page .cs-page-title { font-size: 22px; font-weight: 700; color: var(--cs-text); }
body .content-page .cs-breadcrumb { color: var(--cs-muted); }
body .content-page .cs-breadcrumb .sep { color: var(--cs-muted); opacity: .6; }

/* Onglets de module (injectés par partials/module-tabs) */
.cs-modtabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px; margin: 0 0 18px; background: var(--cs-card);
    border: 1px solid var(--cs-border); border-radius: 16px; box-shadow: var(--cs-sh); -webkit-overflow-scrolling: touch; }
.cs-modtab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; white-space: nowrap;
    font-size: 13px; font-weight: 500; color: var(--cs-muted); text-decoration: none; font-family: 'Poppins', sans-serif; }
.cs-modtab:hover { color: var(--cs-blue); background: var(--cs-soft); text-decoration: none; }
.cs-modtab.is-active { background: var(--cs-blue); color: #fff; }
@media (max-width: 575px) { .cs-modtab span { display: none; } .cs-modtab.is-active span { display: inline; } .cs-modtab { padding: 10px 14px; } }

/* Cartes */
body .content-page .cs-card, body .content-page .cs-kpi, body .content-page .card {
    background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-r); box-shadow: var(--cs-sh); color: var(--cs-text);
}
body .content-page .cs-card-header { background: transparent; border-bottom: 1px solid var(--cs-border); padding: 14px 20px; }
body .content-page .cs-card-header-title, body .content-page .cs-kpi-val { color: var(--cs-text); }
body .content-page .cs-card-body { padding: 20px; }
body .content-page .cs-kpi-label, body .content-page .cs-form-label { color: var(--cs-muted); }
body .content-page .card .card-header { background: transparent; border-bottom: 1px solid var(--cs-border); }

/* Tableaux */
body .content-page .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body .content-page .cs-table { color: var(--cs-text); }
body .content-page .cs-table thead tr { background: var(--cs-soft); color: var(--cs-muted); }
body .content-page .cs-table thead th { color: var(--cs-muted); font-size: 11.5px; padding: 12px 16px; }
body .content-page .cs-table tbody tr { border-bottom: 1px solid var(--cs-border); }
body .content-page .cs-table tbody tr:hover { background: var(--cs-soft); }
body .content-page .cs-table tbody td { color: var(--cs-text); }

/* Formulaires */
body .content-page .cs-form-control, body .content-page .form-control, body .content-page select.form-control {
    background: var(--cs-card); color: var(--cs-text); border: 1px solid var(--cs-border); border-radius: 12px; min-height: 42px;
}
body .content-page textarea.cs-form-control, body .content-page textarea.form-control { min-height: 100px; }
body .content-page .cs-form-control::placeholder, body .content-page .form-control::placeholder { color: var(--cs-muted); opacity: .7; }
body .content-page .cs-form-control:focus, body .content-page .form-control:focus {
    border-color: var(--cs-blue); box-shadow: 0 0 0 3px rgba(56,120,244,.18); background: var(--cs-card); color: var(--cs-text);
}
body .content-page .input-group-text { background: var(--cs-soft); border-color: var(--cs-border); color: var(--cs-muted); }

/* Boutons */
body .content-page .cs-btn { min-height: 38px; }
body .content-page .cs-btn-ghost { background: transparent; border-width: 1.5px; }
body .content-page .btn { border-radius: 10px; }
body .content-page .btn-sm { border-radius: 8px; }
body .content-page a:focus-visible, body .content-page button:focus-visible, body .content-page .form-control:focus-visible,
body .content-page .cs-form-control:focus-visible { outline: 3px solid rgba(56,120,244,.45); outline-offset: 2px; }

/* Badges, alertes, icônes colorées : variantes sombres lisibles */
body.dark .content-page .cs-badge-blue, body.dark .content-page .icon-blue { background: rgba(56,120,244,.18); color: #93b4fb; }
body.dark .content-page .cs-badge-green, body.dark .content-page .icon-green { background: rgba(16,185,129,.18); color: #6ee7b7; }
body.dark .content-page .cs-badge-red, body.dark .content-page .icon-red { background: rgba(239,68,68,.18); color: #fca5a5; }
body.dark .content-page .cs-badge-orange, body.dark .content-page .icon-orange { background: rgba(245,158,11,.18); color: #fcd34d; }
body.dark .content-page .cs-badge-purple, body.dark .content-page .icon-purple { background: rgba(124,58,237,.2); color: #c4b5fd; }
body.dark .content-page .cs-badge-indigo, body.dark .content-page .icon-indigo { background: rgba(99,102,241,.2); color: #a5b4fc; }
body.dark .content-page .cs-badge-gray { background: var(--cs-soft); color: var(--cs-muted); }
body.dark .content-page .icon-teal { background: rgba(13,148,136,.2); color: #5eead4; }
body.dark .content-page .icon-pink { background: rgba(219,39,119,.2); color: #f9a8d4; }
body.dark .content-page .cs-alert-success { background: rgba(16,185,129,.14); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
body.dark .content-page .cs-alert-danger { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.3); }
body.dark .content-page .cs-alert-info { background: rgba(56,120,244,.14); color: #93b4fb; border-color: rgba(56,120,244,.3); }
body.dark .content-page .cs-alert-warning { background: rgba(245,158,11,.14); color: #fcd34d; border-color: rgba(245,158,11,.3); }
body.dark .content-page .trend-up { background: rgba(16,185,129,.18); color: #6ee7b7; }
body.dark .content-page .trend-down { background: rgba(239,68,68,.18); color: #fca5a5; }

/* Pagination et modales */
body .content-page .pagination .page-link { border-radius: 10px; margin: 0 2px; border-color: var(--cs-border); background: var(--cs-card); color: var(--cs-blue); }
body .content-page .pagination .active .page-link { background: var(--cs-blue); border-color: var(--cs-blue); color: #fff; }
body .modal-content { border-radius: 16px; border: 1px solid var(--cs-border, #e2e8f0); }
body.dark .modal-content { background: #1e2433; color: #e5e9f2; border-color: #333b52; }
body.dark .modal-content .close { color: #e5e9f2; }

@media (max-width: 767px) {
    body .content-page .cs-page-header { align-items: flex-start; }
    body .content-page .cs-btn-actions { width: 100%; }
    body .content-page .cs-table thead th, body .content-page .cs-table tbody td { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    body .content-page .cs-kpi, body .content-page .cs-btn, .cs-modtab { transition: none; }
    body .content-page .cs-kpi:hover, body .content-page .cs-btn:hover { transform: none; }
}

/* Thème sombre : boutons, menus, onglets et fonds blancs codés en dur dans les vues */
body.dark .content-page .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-secondary),
body.dark .content-page .cs-btn-ghost, body.dark .content-page .btn-light, body.dark .content-page .btn-white {
    background-color: var(--cs-soft); color: var(--cs-text); border-color: var(--cs-border);
}
body.dark .content-page .cs-btn-ghost:hover { background: var(--cs-blue); color: #fff; }
body.dark .content-page .dropdown-menu { background: var(--cs-card); border-color: var(--cs-border); }
body.dark .content-page .dropdown-item { color: var(--cs-text); }
body.dark .content-page .dropdown-item:hover { background: var(--cs-soft); color: var(--cs-text); }
body.dark .content-page .nav-tabs { border-color: var(--cs-border); }
body.dark .content-page .nav-tabs .nav-link { color: var(--cs-muted); }
body.dark .content-page .nav-tabs .nav-link.active { background: var(--cs-card); color: var(--cs-text); border-color: var(--cs-border) var(--cs-border) var(--cs-card); }
body.dark .content-page .table, body.dark .content-page .table td, body.dark .content-page .table th { color: var(--cs-text); border-color: var(--cs-border); }
body.dark .content-page [style*="background:#fff"], body.dark .content-page [style*="background: #fff"],
body.dark .content-page [style*="background:#ffffff"], body.dark .content-page [style*="background-color:#fff"] { background: var(--cs-card) !important; color: var(--cs-text); }
body.dark .content-page [style*="background:#fafbff"], body.dark .content-page [style*="background:#f8faff"], body.dark .content-page [style*="background:#f8fafc"] { background: var(--cs-soft) !important; }
body.dark .content-page .text-dark, body.dark .content-page h1, body.dark .content-page h2, body.dark .content-page h3,
body.dark .content-page h4, body.dark .content-page h5, body.dark .content-page h6, body.dark .content-page label { color: var(--cs-text); }