/* ============================================
   KravPath Theme — inspiré Linear / Stripe
   ============================================ */

   :root {
    /* Couleurs de base — thème clair */
    --kp-bg: #f7f7f8;
    --kp-surface: #ffffff;
    --kp-surface-hover: #fafafa;
    --kp-border: #e5e5e7;
    --kp-border-strong: #d4d4d8;
    --kp-text: #18181b;
    --kp-text-muted: #71717a;
    --kp-text-faint: #a1a1aa;

    /* Couleur de marque FEKM/Krav Maga : noir + jaune/ambre */
    --kp-primary: #F5B301;
    --kp-primary-hover: #D99E00;
    --kp-primary-text: #0D0D0D;

    --kp-success: #16a34a;
    --kp-success-bg: #f0fdf4;
    --kp-warning: #d97706;
    --kp-warning-bg: #fffbeb;
    --kp-danger: #dc2626;
    --kp-danger-bg: #fef2f2;
    --kp-info: #2563eb;
    --kp-info-bg: #eff6ff;

    --kp-radius-sm: 6px;
    --kp-radius-md: 10px;
    --kp-radius-lg: 14px;

    --kp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --kp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --kp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

    --kp-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar : noir + accent jaune sur l'élément actif, comme le menu du site FEKM */
    --sidebar-bg: #0D0D0D;
    --sidebar-border-color: #0D0D0D;
    --sidebar-logo-color: #F5B301;
    --sidebar-menu-color: #a1a1aa;
    --sidebar-menu-header-color: #71717a;
    --sidebar-menu-icon-color: #d4d4d8;
    --sidebar-menu-active-item-bg: #F5B301;
    --sidebar-menu-active-item-color: #0D0D0D;
    --sidebar-menu-submenu-color: #ffffff;
}

[data-theme="dark"] {
    --kp-bg: #0d0d0f;
    --kp-surface: #18181b;
    --kp-surface-hover: #1f1f23;
    --kp-border: #27272a;
    --kp-border-strong: #3f3f46;
    --kp-text: #f4f4f5;
    --kp-text-muted: #a1a1aa;
    --kp-text-faint: #71717a;

    --kp-primary: #f4f4f5;
    --kp-primary-hover: #ffffff;
    --kp-primary-text: #18181b;

    --kp-success-bg: #052e16;
    --kp-warning-bg: #451a03;
    --kp-danger-bg: #450a0a;
    --kp-info-bg: #172554;

    --sidebar-bg: #0d0d0f;
    --sidebar-border-color: #27272a;
}

/* ============================================
   Base
   ============================================ */

body {
    background-color: var(--kp-bg) !important;
    color: var(--kp-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif !important;
    transition: background-color var(--kp-transition), color var(--kp-transition);
}

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

/* ============================================
   Boutons
   ============================================ */

.btn {
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--kp-radius-sm);
    transition: all var(--kp-transition);
    border: 1px solid transparent;
}
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.btn-primary {
    background-color: var(--kp-primary);
    border-color: var(--kp-primary);
    color: var(--kp-primary-text);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--kp-primary-hover);
    border-color: var(--kp-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--kp-shadow-md);
}

.btn-secondary {
    background-color: var(--kp-surface);
    border-color: var(--kp-border-strong);
    color: var(--kp-text);
}
.btn-secondary:hover {
    background-color: var(--kp-surface-hover);
    border-color: var(--kp-text-faint);
}

.btn-quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

/* ============================================
   Cartes / Panneaux
   ============================================ */

.content-panel {
    background-color: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-md);
    padding: 20px;
    box-shadow: var(--kp-shadow-sm);
    margin-bottom: 20px;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition);
}
.content-panel:hover {
    box-shadow: var(--kp-shadow-md);
}
.content-panel h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kp-text);
    border-bottom: 1px solid var(--kp-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================
   Tableaux
   ============================================ */

.content-panel table, table.table {
    width: 100%;
    border-collapse: collapse;
}
.content-panel table th, table.table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kp-text-muted);
    padding: 10px 8px;
    border-bottom: 1px solid var(--kp-border);
    font-weight: 600;
}
.content-panel table td, table.table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--kp-border);
    color: var(--kp-text);
    font-size: 0.9rem;
}
.content-panel table tr:hover td, table.table tr:hover td {
    background-color: var(--kp-surface-hover);
}
.content-panel table tr:last-child td {
    border-bottom: none;
}

/* ============================================
   Badges de statut
   ============================================ */

.badge-statut {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge-statut-actif, .badge-statut-payee, .badge-statut-validee {
    background-color: var(--kp-success-bg);
    color: var(--kp-success);
}
.badge-statut-attente {
    background-color: var(--kp-warning-bg);
    color: var(--kp-warning);
}
.badge-statut-inactif {
    background-color: var(--kp-border);
    color: var(--kp-text-muted);
}

/* ============================================
   Fiche adhérent
   ============================================ */

.fiche-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.fiche-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--kp-text);
}
.fiche-header .fiche-meta {
    color: var(--kp-text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}
.fiche-header .fiche-meta i {
    width: 16px;
    text-align: center;
    margin-right: 4px;
    color: var(--kp-text-faint);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.info-item .info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kp-text-faint);
    margin-bottom: 3px;
    font-weight: 600;
}
.info-item .info-value {
    font-size: 0.9rem;
    color: var(--kp-text);
    font-weight: 500;
}

.inscription-card {
    border: 1px solid var(--kp-border);
    border-left: 3px solid var(--kp-border-strong);
    border-radius: var(--kp-radius-md);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--kp-surface);
    transition: border-color var(--kp-transition);
}
.inscription-card.statut-validee { border-left-color: var(--kp-success); }
.inscription-card.statut-en-attente { border-left-color: var(--kp-warning); }
.inscription-card .inscription-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.inscription-card .inscription-actions a {
    font-size: 0.82rem;
    margin-left: 12px;
    color: var(--kp-text-muted);
}
.inscription-card .inscription-actions a:first-child { margin-left: 0; }
.inscription-card .inscription-actions a:hover { color: var(--kp-text); }

/* ============================================
   Formulaires
   ============================================ */

.form-control, .form-select {
    border-radius: var(--kp-radius-sm);
    border: 1px solid var(--kp-border-strong);
    padding: 9px 12px;
    background-color: var(--kp-surface);
    color: var(--kp-text);
    font-size: 0.9rem;
    transition: border-color var(--kp-transition), box-shadow var(--kp-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--kp-text);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    outline: none;
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* Les champs date ont une largeur figée par le navigateur (basée sur leur contenu),
   contrairement aux autres champs qui prennent toute la largeur disponible. On aligne
   leur comportement pour une mise en page cohérente sur tout le site. */
   input[type="date"].form-control {
    width: 100%;
    max-width: 100%;
}

label.form-control-label, .form-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--kp-text);
    margin-bottom: 5px;
}

.form-group, .field-group {
    margin-bottom: 1.4rem;
}

section.content-header {
    padding: 8px 0;
    border-bottom: none;
    margin-bottom: 8px;
    background: transparent;
    justify-content: flex-end;
}
section.content-header .content-header-title {
    display: none;
}
section.content-header .page-actions {
    margin: 0;
}

.form-check-input:checked {
    background-color: var(--kp-primary);
    border-color: var(--kp-primary);
}

.form-text, .help-block {
    font-size: 0.78rem;
    color: var(--kp-text-muted);
}

.form-actions, .global-actions {
    border-top: 1px solid var(--kp-border);
    padding-top: 16px;
    margin-top: 24px;
}

/* La classe .global-actions est aussi utilisée par EasyAdmin pour le conteneur
   du bouton d'action de l'en-tête (ex: "Ajouter un adhérent"), ce qui provoque
   une ligne + un espace parasite au-dessus du bouton. On neutralise la règle
   ci-dessus dans ce contexte précis, sans toucher aux boutons de formulaire. */
#content-header .global-actions, .content-header .global-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Les <input type="date"> ont un padding interne géré par le navigateur
   (segments jj/mm/aaaa) qui ignore partiellement le padding CSS standard.
   On force un espacement supplémentaire pour que le texte ne soit pas collé au bord. */
   input[type="date"] {
    padding: 9px 12px;
    padding-left: 16px;
    line-height: 1.4;
}
input[type="date"]::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.4;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}
/* ============================================
   Tableau de bord — vignettes
   ============================================ */

.dashboard-stat-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 120px;
    transition: transform var(--kp-transition), box-shadow var(--kp-transition);
    cursor: pointer;
}
.dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--kp-shadow-lg);
}
.dashboard-stat.dashboard-stat-disabled {
    cursor: default;
    opacity: 0.6;
}
.dashboard-stat.dashboard-stat-disabled:hover {
    transform: none;
    box-shadow: var(--kp-shadow-sm);
}
.dashboard-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kp-text);
    text-align: center;
    width: 100%;
}
.dashboard-stat-label {
    color: var(--kp-text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
    text-align: center;
    width: 100%;
}
.dashboard-stat.stat-ok .dashboard-stat-value { color: var(--kp-success); }
.dashboard-stat.stat-warn .dashboard-stat-value { color: var(--kp-warning); }
.dashboard-stat.stat-alert .dashboard-stat-value { color: var(--kp-danger); }
.dashboard-stat.stat-muted .dashboard-stat-value { color: var(--kp-text-faint); }

/* ============================================
   Bouton de bascule mode sombre
   ============================================ */

.kp-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--kp-surface);
    border: 1px solid var(--kp-border-strong);
    box-shadow: var(--kp-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: transform var(--kp-transition), box-shadow var(--kp-transition);
    color: var(--kp-text);
    font-size: 1.1rem;
}
.kp-theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: var(--kp-shadow-lg);
}

/* ============================================
   Animations discrètes
   ============================================ */

@keyframes kp-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.content-panel {
    animation: kp-fade-in 0.25s ease-out;
}
/* Renforcement de spécificité : certains boutons EasyAdmin natifs (ex: le bouton
   "Enregistrer" en édition) semblent résister à la règle .btn-primary standard. */
   button.btn.btn-primary,
   a.btn.btn-primary {
       background-color: var(--kp-primary);
       border-color: var(--kp-primary);
       color: var(--kp-primary-text);
   }

   /* ============================================
   Correction des variables internes d'EasyAdmin
   ============================================
   Le bundle EasyAdmin ne lit pas .btn-primary { background-color }
   directement : il utilise ses propres variables CSS internes
   (--button-primary-bg, etc.), définies en dur dans son propre CSS
   compilé (ex: #1447e6, un bleu qui n'a rien à voir avec --kp-primary).
   On les redéfinit ici pour qu'elles suivent la palette du site. */
:root {
    --button-primary-bg: var(--kp-primary);
    --button-primary-color: var(--kp-primary-text);
    --button-primary-icon-color: var(--kp-primary-text);
    --button-primary-border-color: transparent;
    --button-primary-hover-bg: var(--kp-primary-hover);
    --button-primary-hover-color: var(--kp-primary-text);
    --button-primary-hover-border-color: transparent;
    --button-primary-active-bg: var(--kp-primary-hover);
    --button-primar-active-color: var(--kp-primary-text);
    --button-primary-active-border-color: transparent;
}

[data-theme="dark"] {
    --button-primary-bg: var(--kp-primary);
    --button-primary-color: var(--kp-primary-text);
    --button-primary-hover-bg: var(--kp-primary-hover);
    --button-primary-active-bg: var(--kp-primary-hover);
}

/* ============================================
   Logo / en-tête de la sidebar
   ============================================
   Nécessaire car la règle générale "a { color: var(--kp-text) }" plus haut
   peint sinon ce lien en texte sombre, invisible sur le fond noir de la
   sidebar. Cette règle, plus spécifique, l'emporte naturellement. */
.ea-sidebar-logo .logo {
    color: var(--sidebar-logo-color);
}

/* ============================================
   Correction du surlignage du menu actif
   ============================================
   EasyAdmin calcule lui-même quel élément du menu est "actif", mais son
   algorithme interne se trompe parfois quand plusieurs entrées pointent vers
   la même route avec des paramètres différents (ex: "Adhérents" vs
   "Fin de saison", tous deux vers /admin/adherent). On neutralise donc
   systématiquement sa classe .active par défaut, et menu-active-fix.js
   applique le vrai surlignage via une classe séparée (.menu-item-verifie-actif),
   calculée côté navigateur en comparant l'URL réelle à chaque lien du menu.
   Ainsi, aucun mauvais élément ne s'affiche jamais surligné, même brièvement. */
   li.ea-sidebar-item .ea-sidebar-item-link {
    padding-left: 16px;
    color: var(--sidebar-menu-color);
}
li.ea-sidebar-item .ea-sidebar-item-link .ea-sidebar-item-icon i {
    color: var(--sidebar-menu-icon-color);
}
li.ea-sidebar-item.is-active .ea-sidebar-item-link {
    background-color: transparent;
    color: var(--sidebar-menu-color);
}
li.ea-sidebar-item.is-active .ea-sidebar-item-link .ea-sidebar-item-icon i {
    color: var(--sidebar-menu-icon-color);
}
li.ea-sidebar-item.menu-item-verifie-actif .ea-sidebar-item-link {
    background-color: var(--sidebar-menu-active-item-bg);
    color: var(--sidebar-menu-active-item-color);
    border-radius: var(--kp-radius-sm);
}
li.ea-sidebar-item.menu-item-verifie-actif .ea-sidebar-item-link .ea-sidebar-item-icon i {
    color: var(--sidebar-menu-active-item-color);
}