/* ============================================================================
   SOCIPAM — couche de raffinement UI
   Chargée APRÈS bootstrap + style inline admin + custom.css → gagne par cascade.
   But : densifier, charger Inter, styler la sidebar (manquante), uniformiser.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Dimensions globales ---------- */
:root {
    --sidebar-width: 244px;
    --header-height: 54px;
    --border-radius: 6px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: #f6f8fa !important;
    font-size: 13.5px;
}

/* ---------- Header ---------- */
.app-header {
    height: var(--header-height);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    border-bottom-color: var(--gray-100, #f1f5f9);
}

.header-brand {
    font-size: 1rem !important;
    letter-spacing: -0.01em;
}

/* ---------- Contenu ---------- */
.app-content {
    padding: 1.25rem 1.5rem !important;
    margin-top: var(--header-height);
}

@media (max-width: 768px) {
    .app-content { padding: 1rem !important; }
}

/* ============================================================================
   SIDEBAR — styles manquants (sidebar-nav, nav-link, sections, dropdowns)
   ============================================================================ */
.app-sidebar {
    top: var(--header-height);
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.02);
}

.sidebar-brand {
    padding: 0.875rem 1rem 0.625rem !important;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-100, #f1f5f9);
}

.sidebar-brand-link,
.sidebar-brand-link.h4,
.sidebar-brand .h4,
.sidebar-brand h4 {
    color: var(--primary, #4f46e5) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.2 !important;
}

.sidebar-nav {
    padding: 0.25rem 0.5rem 2rem;
}

.sidebar-nav .nav-item {
    margin: 1px 0;
}

.sidebar-nav .nav-item.mt-3 {
    margin-top: 0.875rem !important;
}

/* Couleurs custom utilisées dans les icônes (anciennement inline dans le partial) */
.text-purple { color: #8b5cf6 !important; }
.text-indigo { color: #6366f1 !important; }
.text-green  { color: #10b981 !important; }

/* Items niveau 1 (nav-link direct ou toggle de dropdown) */
.sidebar-nav .nav-link,
.sidebar-nav .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 5px;
    color: var(--gray-700, #334155);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    line-height: 1.25;
    cursor: pointer;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-dropdown-toggle i {
    width: 16px;
    text-align: center;
    font-size: 0.8125rem;
    flex-shrink: 0;
    /* PAS de color ici : on laisse .text-primary/.text-success/.text-purple… gagner */
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-dropdown-toggle:hover {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-900, #0f172a);
    text-decoration: none;
}

/* État actif : fond indigo plein, texte + icône blancs */
.sidebar-nav .nav-link.active {
    background: var(--primary, #4f46e5);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}

.sidebar-nav .nav-link.active i,
.sidebar-nav .nav-link.active span {
    color: #fff !important;
}

/* Titres de section */
.nav-section-title {
    padding: 0.875rem 0.625rem 0.25rem !important;
}

.nav-section-title small {
    font-size: 0.6875rem !important;
    letter-spacing: 0.06em;
    color: var(--gray-400, #94a3b8) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

/* Chevron du dropdown */
.nav-dropdown-toggle .dropdown-arrow,
.nav-dropdown-toggle .fa-chevron-down {
    font-size: 0.625rem !important;
    color: var(--gray-400, #94a3b8) !important;
    transition: transform 0.2s;
    margin-left: auto;
    width: auto !important;
}

.nav-dropdown.show > .nav-dropdown-toggle .dropdown-arrow,
.nav-dropdown.show > .nav-dropdown-toggle .fa-chevron-down,
.nav-dropdown-toggle[aria-expanded="true"] .dropdown-arrow,
.nav-dropdown-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Items niveau 2 (à l'intérieur d'un dropdown) */
.nav-dropdown-menu {
    padding: 0.125rem 0 0.25rem 1.25rem;
    border-left: 1px solid var(--gray-100, #f1f5f9);
    margin-left: 1rem;
}

.sidebar-nav .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 4px;
    color: var(--gray-600, #475569);
    font-size: 0.78125rem;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    line-height: 1.25;
}

.sidebar-nav .nav-dropdown-item i {
    width: 14px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.sidebar-nav .nav-dropdown-item:hover {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-900, #0f172a);
    text-decoration: none;
}

.sidebar-nav .nav-dropdown-item.active {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary, #4f46e5);
    font-weight: 500;
}

/* ============================================================================
   PAGE HEADER — petit helper pour titres de page propres
   Utilisation : <div class="page-header"><h1 class="page-title">…</h1>…</div>
   ============================================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.125rem;
    flex-wrap: wrap;
}

.page-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}

.page-subtitle {
    font-size: 0.8125rem;
    color: var(--gray-500, #64748b);
    margin: 0.125rem 0 0;
}

/* ---------- Cards : un cran plus dense, hover plus discret ---------- */
.card {
    margin-bottom: 1rem !important;
    transition: box-shadow 0.15s;
}

.card:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
}

.card-header {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
}

.card-header h5,
.card-header h4 {
    font-size: 0.9375rem !important;
}

.card-body {
    padding: 1rem !important;
}

/* ---------- Tables : un cran plus dense ---------- */
.table thead th {
    padding: 0.5625rem 0.875rem !important;
    font-size: 0.6875rem !important;
}

.table tbody td {
    padding: 0.5625rem 0.875rem !important;
}

/* ---------- Boutons : densité légère ---------- */
.btn {
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
}

.btn-sm {
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
}

/* ---------- Formulaires ---------- */
.form-control,
.form-select {
    padding: 0.4375rem 0.625rem !important;
    font-size: 0.8125rem !important;
}

.form-label {
    font-size: 0.8125rem !important;
    margin-bottom: 0.3125rem !important;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: 34px !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.3125rem 0.625rem !important;
}

/* ---------- Alertes ---------- */
.alert {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 500;
    font-size: 0.6875rem;
    padding: 0.1875rem 0.4375rem;
}

/* ---------- Dropdowns (header user / langue) ---------- */
.nav-dropdown .dropdown-toggle {
    font-size: 0.8125rem !important;
}

/* ---------- Header user-info icon : pastille plus discrète ---------- */
.header-toggler {
    font-size: 1rem !important;
    padding: 0.375rem !important;
}

/* ============================================================================
   NEUTRALISATION DES PATTERNS "BLING" DES VUES
   Les vues admin abusent de bg-primary text-white, fa-2x, btn-lg, shadow-lg,
   table-dark, h1.h3... On les ramène à un niveau plus sobre globalement.
   ============================================================================ */

/* Titres de page — h1.h3 / h1.h2 rendu plus discret */
.app-content h1.h2,
.app-content h1.h3,
.app-content h1 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.app-content h1 i {
    font-size: 0.95rem;
    opacity: 0.85;
}

/* btn-lg ramené à une taille normale-plus */
.btn-lg {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
}

/* Icônes fa-2x / fa-lg dans card-body : on réduit la moitié */
.card-body .fa-2x,
.card .fa-2x {
    font-size: 1.5em !important;
}

.card-header .fa-lg {
    font-size: 1em !important;
}

/* Ombres : shadow-lg → ombre normale */
.shadow-lg {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
}

/* Stat-cards colorées (bg-primary/success/warning/info text-white)
   On les transforme en cartes blanches avec une barre colorée à gauche. */
.card.bg-primary.text-white,
.card.bg-success.text-white,
.card.bg-warning.text-white,
.card.bg-info.text-white,
.card.bg-danger.text-white {
    background: #fff !important;
    color: var(--gray-800, #1e293b) !important;
    border-left: 3px solid currentColor !important;
}

.card.bg-primary.text-white { border-left-color: var(--primary, #4f46e5) !important; }
.card.bg-success.text-white { border-left-color: var(--success, #10b981) !important; }
.card.bg-warning.text-white { border-left-color: var(--warning, #f59e0b) !important; }
.card.bg-info.text-white    { border-left-color: var(--info, #3b82f6) !important; }
.card.bg-danger.text-white  { border-left-color: var(--danger, #ef4444) !important; }

.card.bg-primary.text-white .card-title,
.card.bg-success.text-white .card-title,
.card.bg-warning.text-white .card-title,
.card.bg-info.text-white .card-title,
.card.bg-danger.text-white .card-title,
.card.bg-primary.text-white h6,
.card.bg-success.text-white h6,
.card.bg-warning.text-white h6,
.card.bg-info.text-white h6,
.card.bg-danger.text-white h6 {
    color: var(--gray-500, #64748b) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.card.bg-primary.text-white h3,
.card.bg-success.text-white h3,
.card.bg-warning.text-white h3,
.card.bg-info.text-white h3,
.card.bg-danger.text-white h3 {
    color: var(--gray-900, #0f172a) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.card.bg-primary.text-white i.fa-2x { color: var(--primary, #4f46e5) !important; opacity: 0.7 !important; }
.card.bg-success.text-white i.fa-2x { color: var(--success, #10b981) !important; opacity: 0.7 !important; }
.card.bg-warning.text-white i.fa-2x { color: var(--warning, #f59e0b) !important; opacity: 0.7 !important; }
.card.bg-info.text-white    i.fa-2x { color: var(--info, #3b82f6) !important; opacity: 0.7 !important; }
.card.bg-danger.text-white  i.fa-2x { color: var(--danger, #ef4444) !important; opacity: 0.7 !important; }

/* En-têtes de card "bg-primary text-white" : neutralisés */
.card-header.bg-primary.text-white,
.card-header.bg-success.text-white,
.card-header.bg-warning.text-white,
.card-header.bg-info.text-white,
.card-header.bg-danger.text-white {
    background: #fff !important;
    color: var(--gray-800, #1e293b) !important;
    border-bottom: 1px solid var(--gray-200, #e2e8f0) !important;
}

.card-header.bg-primary.text-white h5,
.card-header.bg-success.text-white h5,
.card-header.bg-warning.text-white h5,
.card-header.bg-info.text-white h5,
.card-header.bg-danger.text-white h5,
.card-header.bg-primary.text-white h6,
.card-header.bg-success.text-white h6,
.card-header.bg-warning.text-white h6,
.card-header.bg-info.text-white h6,
.card-header.bg-danger.text-white h6 {
    color: var(--gray-800, #1e293b) !important;
    font-size: 0.9375rem !important;
}

.card-header.bg-primary.text-white small,
.card-header.bg-success.text-white small,
.card-header.bg-warning.text-white small,
.card-header.bg-info.text-white small,
.card-header.bg-danger.text-white small {
    color: var(--gray-500, #64748b) !important;
    opacity: 1 !important;
}

/* Boutons outline-light dans un header neutralisé : redevenir outline-secondary */
.card-header.bg-primary.text-white .btn-outline-light,
.card-header.bg-success.text-white .btn-outline-light,
.card-header.bg-warning.text-white .btn-outline-light,
.card-header.bg-info.text-white .btn-outline-light,
.card-header.bg-danger.text-white .btn-outline-light {
    background: #fff !important;
    border-color: var(--gray-300, #cbd5e1) !important;
    color: var(--gray-700, #334155) !important;
}

.card-header.bg-primary.text-white .btn-outline-light:hover,
.card-header.bg-success.text-white .btn-outline-light:hover,
.card-header.bg-warning.text-white .btn-outline-light:hover,
.card-header.bg-info.text-white .btn-outline-light:hover,
.card-header.bg-danger.text-white .btn-outline-light:hover {
    background: var(--gray-100, #f1f5f9) !important;
    color: var(--gray-900, #0f172a) !important;
}

/* thead.table-dark → gris clair */
.table thead.table-dark th {
    background: var(--gray-50, #f8fafc) !important;
    color: var(--gray-600, #475569) !important;
    border-bottom: 2px solid var(--gray-200, #e2e8f0) !important;
}

/* Breadcrumb : plus discret */
.breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 1rem !important;
}

.breadcrumb i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ============================================================================
   COMPACITÉ VERTICALE — viser à voir le tableau sans scroll
   ============================================================================ */

/* Espacements verticaux Bootstrap réduits dans la zone de contenu */
.app-content .mb-4 { margin-bottom: 0.75rem !important; }
.app-content .mb-3 { margin-bottom: 0.5rem !important; }
.app-content .mb-2 { margin-bottom: 0.375rem !important; }
.app-content .mt-4 { margin-top: 0.75rem !important; }
.app-content .mt-3 { margin-top: 0.5rem !important; }
.app-content .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.app-content .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.app-content .g-3 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.75rem; }

/* Stat-cards : version ultra-compacte */
.app-content .card.bg-primary.text-white .card-body,
.app-content .card.bg-success.text-white .card-body,
.app-content .card.bg-warning.text-white .card-body,
.app-content .card.bg-info.text-white .card-body,
.app-content .card.bg-danger.text-white .card-body {
    padding: 0.625rem 0.875rem !important;
}

.app-content .card.bg-primary.text-white h3,
.app-content .card.bg-success.text-white h3,
.app-content .card.bg-warning.text-white h3,
.app-content .card.bg-info.text-white h3,
.app-content .card.bg-danger.text-white h3 {
    font-size: 1.125rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.app-content .card.bg-primary.text-white .card-title,
.app-content .card.bg-success.text-white .card-title,
.app-content .card.bg-warning.text-white .card-title,
.app-content .card.bg-info.text-white .card-title,
.app-content .card.bg-danger.text-white .card-title,
.app-content .card.bg-primary.text-white h6,
.app-content .card.bg-success.text-white h6,
.app-content .card.bg-warning.text-white h6,
.app-content .card.bg-info.text-white h6,
.app-content .card.bg-danger.text-white h6 {
    font-size: 0.6875rem !important;
    margin-bottom: 0.125rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-content .card.bg-primary.text-white .fa-2x,
.app-content .card.bg-success.text-white .fa-2x,
.app-content .card.bg-warning.text-white .fa-2x,
.app-content .card.bg-info.text-white .fa-2x,
.app-content .card.bg-danger.text-white .fa-2x {
    font-size: 1.125em !important;
}

/* Card-header (filtres, table) plus compact */
.card-header {
    padding: 0.5rem 0.875rem !important;
    min-height: auto;
}

.card-header h5,
.card-header h6 {
    font-size: 0.875rem !important;
    margin: 0 !important;
}

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

/* Filtres : card-body plus serré */
.card-body {
    padding: 0.75rem 0.875rem !important;
}

.app-content form .form-label {
    margin-bottom: 0.1875rem !important;
    font-size: 0.75rem !important;
}

/* Page-title block (h1 + sous-titre) plus compact */
.app-content h1.h3,
.app-content h1.h2,
.app-content h1 {
    font-size: 1.0625rem !important;
    margin-bottom: 0.125rem !important;
}

.app-content h1 + p,
.app-content .text-muted.mb-0 {
    font-size: 0.75rem !important;
}

/* Container-fluid padding réduit */
.app-content .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Body — police légèrement plus petite */
body {
    font-size: 13px !important;
}

/* ============================================================================
   DARK MODE — ajustements sidebar
   ============================================================================ */
[data-bs-theme="dark"] body {
    background-color: #0b1220 !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link,
[data-bs-theme="dark"] .sidebar-nav .nav-dropdown-toggle {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link:hover,
[data-bs-theme="dark"] .sidebar-nav .nav-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #f8fafc;
}

[data-bs-theme="dark"] .sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}