/* ============================================================
   HECM Parakou — Liste déroulante avec recherche (hecm-enhance.js)
   ============================================================ */
.hecm-combo { position: relative; }
.hecm-combo__native {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}
.hecm-combo__input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 14px;
    padding-right: 2rem;
}
.hecm-combo.is-open .hecm-combo__input {
    border-color: var(--primary, #1a6b2f);
    box-shadow: 0 0 0 3px rgba(26, 107, 47, .12);
}
.hecm-combo__menu {
    /* position:fixed (et non absolute) + coordonnées calculées en JS à
       l'ouverture : le menu ne doit PAS être coupé quand le champ se trouve
       dans une carte à coins arrondis (overflow:hidden), très fréquent dans
       l'admin (.filter-card, .om-card, etc.). */
    display: none;
    position: fixed;
    z-index: 4000;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d7e0d9;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    padding: 4px;
}
.hecm-combo.is-open .hecm-combo__menu { display: block; }
.hecm-combo__opt {
    padding: 7px 10px;
    font-size: .88rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
}
.hecm-combo__opt:hover,
.hecm-combo__opt.is-active { background: #eef7f0; }
.hecm-combo__opt.is-selected { font-weight: 600; color: #124d22; }
.hecm-combo__empty { padding: 8px 10px; font-size: .84rem; color: #8a958e; }

@media print { .hecm-combo__menu { display: none !important; } }

/* Filtrage automatique (hecm-enhance.js) : bouton « Filtrer » inutile */
.hecm-auto-hide { display: none !important; }

/* Desktop : le contenu occupe toute la largeur de l'écran */
@media (min-width: 992px) {
    .page-wrapper { max-width: 100% !important; }
}

/* ============================================================
   Finitions visuelles communes (admin + professeur)
   Préfixe « body » : passe devant les styles de page de même niveau.
   ============================================================ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #c8f0d3; color: #0b2f15; }
body .page-wrapper { animation: hecm-fade .35s ease both; }
@keyframes hecm-fade { from { opacity: 0; } to { opacity: 1; } }
body .page-header h1 { letter-spacing: -.3px; }

/* Cartes */
body .stat-card, body .table-card, body .filter-card, body .settings-card, body .action-card {
    border: 1px solid #e6efe9; border-radius: 16px;
}
body .stat-card {
    position: relative; overflow: hidden;
    box-shadow: 0 1px 3px rgba(18,77,34,.04), 0 8px 24px rgba(18,77,34,.06);
}
body .stat-card::after {
    content: ""; position: absolute; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,158,79,.12), transparent 70%); pointer-events: none;
}
body .stat-icon-box { border-radius: 14px; }
body .table-card, body .filter-card, body .settings-card {
    box-shadow: 0 1px 3px rgba(18,77,34,.03), 0 10px 30px rgba(18,77,34,.06);
}
body .table-card tbody tr { transition: background-color .15s; }
body .table-card tbody tr:hover > * { background-color: #f6fbf7; }
body .action-card { transition: transform .2s, box-shadow .2s, background .2s; }

/* Formulaires et boutons */
body .form-control, body .form-select { border-radius: 10px; }
body .form-control:focus, body .form-select:focus, body .hecm-combo__input:focus {
    border-color: #2e9e4f; box-shadow: 0 0 0 .2rem rgba(46,158,79,.15);
}
body .btn { border-radius: 10px; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid #2e9e4f; outline-offset: 2px; }
body .badge { font-weight: 600; letter-spacing: .2px; }

/* Menus et fenêtres */
body .dropdown-menu { border-radius: 14px; padding: 6px; animation: hecm-drop .16s ease; }
body .dropdown-item { border-radius: 8px; }
@keyframes hecm-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
body .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden; }

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: #bcd6c4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #bcd6c4; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #8fbf9c; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    body .page-wrapper, body .dropdown-menu { animation: none; }
}
/* ============================================================
   HECM Parakou — DESIGN MODERNE (admin, professeur, connexions)
   Fond doux, cartes sans bordure lourde, dégradés sobres,
   coins arrondis, ombres en couches, micro-animations.
   Chargé via @import depuis hecm-enhance.css (donc sur toutes les pages).
   ============================================================ */
:root {
    --hm-bg: #f3f7f4;
    --hm-ink: #13261a;
    --hm-muted: #647a6b;
    --hm-line: #e4ede7;
    --hm-g900: #0b2f15; --hm-g800: #124d22; --hm-g700: #1a6b2f; --hm-g500: #2e9e4f; --hm-g100: #e6f5ea;
    --hm-r: 18px;
    --hm-sh1: 0 1px 2px rgba(11,47,21,.05), 0 6px 18px rgba(11,47,21,.06);
    --hm-sh2: 0 2px 4px rgba(11,47,21,.06), 0 16px 40px rgba(11,47,21,.12);
}
body {
    color: var(--hm-ink);
    background:
        radial-gradient(900px 420px at 100% -80px, rgba(46,158,79,.10), transparent 60%),
        radial-gradient(700px 380px at -10% 20%, rgba(18,77,34,.06), transparent 60%),
        var(--hm-bg);
    background-attachment: fixed;
}

/* ── Barre de navigation : verre sombre ── */
body .top-navbar {
    background: linear-gradient(100deg, rgba(11,47,21,.96), rgba(18,77,34,.94) 55%, rgba(26,107,47,.92));
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 30px rgba(11,47,21,.28);
}
body .brand { border-right-color: rgba(255,255,255,.1); letter-spacing: .2px; }
body .brand .logo-icon { background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
body .nav-links a, body .nav-group-btn { border-radius: 10px; transition: background .2s, color .2s, transform .2s; }
body .nav-links a:hover, body .nav-group-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
body .nav-links a.active, body .nav-group-btn.active { background: rgba(255,255,255,.18); border-bottom: 0; box-shadow: inset 0 -3px 0 #7fff9e; }
body .nav-sub { border-radius: 14px; padding: 8px; box-shadow: var(--hm-sh2); border: 1px solid var(--hm-line); }
body .nav-links .nav-sub a { border-radius: 10px !important; }
body .nav-links .nav-sub a:hover { background: var(--hm-g100) !important; }
body .avatar-circle { box-shadow: 0 0 0 3px rgba(127,255,158,.28); }

/* ── Titres de page ── */
body .page-header h1 {
    font-weight: 800; letter-spacing: -.5px; font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    background: linear-gradient(120deg, var(--hm-g900), var(--hm-g700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body .page-header h1 i { -webkit-text-fill-color: var(--hm-g500); }
body .page-sub { color: var(--hm-muted); }

/* ── Cartes ── */
body .stat-card, body .table-card, body .filter-card, body .settings-card, body .s-card, body .action-card, body .report-card, body .member-card {
    border: 1px solid var(--hm-line); border-radius: var(--hm-r); background: #fff; box-shadow: var(--hm-sh1);
}
body .stat-card { border-left: 1px solid var(--hm-line); padding: 22px 20px; }
body .stat-card:hover, body .member-card:hover, body .action-card:hover { transform: translateY(-5px); box-shadow: var(--hm-sh2); border-color: #cfe5d6; }
body .stat-icon-box {
    width: 58px; height: 58px; border-radius: 16px; color: #fff; font-size: 1.4rem;
    background: linear-gradient(135deg, var(--hm-g500), var(--hm-g800)); box-shadow: 0 10px 22px rgba(26,107,47,.32);
}
body .stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; color: var(--hm-g900); }
body .stat-label { color: var(--hm-muted); letter-spacing: .6px; font-size: .72rem; font-weight: 700; }

/* ── En-têtes de cartes ── */
body .table-head, body .filter-head {
    background: transparent; color: var(--hm-g900); border-bottom: 1px solid var(--hm-line);
    padding: 16px 22px; position: relative;
}
body .table-head::before, body .filter-head::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--hm-g500), var(--hm-g800));
}
body .table-head h5, body .filter-head { font-weight: 700; color: var(--hm-g900); }
body .count-badge { background: var(--hm-g100); color: var(--hm-g800); }

/* ── Tableaux ── */
body table.mt thead th, body .table thead th {
    background: #f7fbf8; color: var(--hm-muted); font-size: .68rem; letter-spacing: .7px;
    border-bottom: 1px solid var(--hm-line); font-weight: 700;
}
body table.mt tbody td, body .table tbody td { border-bottom: 1px solid #f0f5f1; }

/* ── Boutons ── */
body .btn-filter, body .btn-hecm, body .btn-primary-hecm, body .btn-add, body .btn-login-submit, body .btn-success {
    background: linear-gradient(135deg, var(--hm-g500), var(--hm-g700)); border: 0; color: #fff;
    border-radius: 12px; font-weight: 700; box-shadow: 0 8px 20px rgba(26,107,47,.28);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
body .btn-filter:hover, body .btn-hecm:hover, body .btn-primary-hecm:hover, body .btn-add:hover, body .btn-login-submit:hover, body .btn-success:hover {
    transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26,107,47,.38); filter: brightness(1.05); color: #fff;
}
body .btn-filter:active, body .btn-hecm:active, body .btn-success:active { transform: translateY(0); }
body .btn-reset, body .btn-outline-secondary { border-radius: 12px; border: 1.5px solid var(--hm-line); background: #fff; }
body .btn-outline-success, body .btn-outline-primary, body .btn-outline-danger { border-radius: 12px; border-width: 1.5px; font-weight: 600; }

/* ── Champs ── */
body .form-control, body .form-select, body .filter-body .form-control, body .filter-body .form-select {
    border: 1.5px solid var(--hm-line); border-radius: 12px; background-color: #fcfefd;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}
body .form-control:hover, body .form-select:hover { border-color: #c5ddcc; }
body .form-control:focus, body .form-select:focus { background: #fff; border-color: var(--hm-g500); box-shadow: 0 0 0 4px rgba(46,158,79,.14); }
body .form-label { font-weight: 600; color: #35503c; }
body .hecm-combo__menu { border-radius: 14px; border: 1px solid var(--hm-line); box-shadow: var(--hm-sh2); }

/* ── Alertes et pastilles ── */
body .hecm-alert, body .alert { border: 0; border-radius: 14px; box-shadow: var(--hm-sh1); }
body .badge { border-radius: 999px; padding: .38em .75em; }

/* ── Connexion / inscription : carte « verre » ── */
body .login-card {
    border: 1px solid rgba(255,255,255,.55) !important; border-radius: 26px !important; overflow: hidden;
    background: rgba(255,255,255,.88) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 30px 80px rgba(8,36,16,.38) !important; animation: hm-rise .6s cubic-bezier(.2,.8,.2,1) both;
}
body .login-card .card-header { background: linear-gradient(135deg, var(--hm-g900), var(--hm-g700)) !important; border: 0; padding: 26px 24px; }
body .navbar { background: rgba(11,47,21,.55) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.12); }
@keyframes hm-rise { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Apparition en cascade ── */
body .stats-grid > *, body .actions-grid > * { animation: hm-rise .5s cubic-bezier(.2,.8,.2,1) both; }
body .stats-grid > *:nth-child(2), body .actions-grid > *:nth-child(2) { animation-delay: .05s; }
body .stats-grid > *:nth-child(3), body .actions-grid > *:nth-child(3) { animation-delay: .1s; }
body .stats-grid > *:nth-child(4), body .actions-grid > *:nth-child(4) { animation-delay: .15s; }

@media (max-width: 992px) {
    body .nav-links { background: linear-gradient(160deg, var(--hm-g900), var(--hm-g700)) !important; border-radius: 0 22px 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
    body .stats-grid > *, body .actions-grid > *, body .login-card { animation: none; }
}