/**
 * assets/css/core.css — Variables CSS globales du CMS
 * Les thèmes surchargent uniquement ces variables :root.
 * Aucune couleur hardcodée en dehors de ce fichier.
 */

:root {
    --cms-primary:        #0d6efd;
    --cms-primary-dark:   #0a58ca;
    --cms-primary-light:  #cfe2ff;
    --cms-secondary:      #6c757d;
    --cms-success:        #198754;
    --cms-danger:         #dc3545;
    --cms-warning:        #ffc107;
    --cms-info:           #0dcaf0;
    --cms-bg:             #ffffff;
    --cms-bg-alt:         #f8f9fa;
    --cms-border:         #dee2e6;
    --cms-text:           #212529;
    --cms-text-muted:     #6c757d;
    --cms-nav-bg:         #212529;
    --cms-nav-text:       #f8f9fa;
    --cms-nav-hover:      #0d6efd;
    --cms-sidebar-bg:     #1e2a38;
    --cms-sidebar-text:   #adb5bd;
    --cms-sidebar-active: #0d6efd;
    --cms-radius:         0.375rem;
    --cms-shadow:         0 0.125rem 0.25rem rgba(0,0,0,0.075);
    --cms-shadow-lg:      0 0.5rem 1rem rgba(0,0,0,0.15);
    --cms-sidebar-width:        260px;
    --cms-sidebar-mini-width:   70px;
    --cms-topbar-height:        64px;
    --cms-sidebar-logo-bg:      #17212f;
    --cms-sidebar-hover-bg:     rgba(255,255,255,.07);
    --cms-sidebar-active-bg:    rgba(21,114,232,.18);
    --cms-sidebar-section:      rgba(255,255,255,.35);
    --cms-sidebar-divider:      rgba(255,255,255,.08);
    --cms-sidebar-text-muted:   rgba(255,255,255,.4);
    --cms-sidebar-shadow:       4px 0 20px rgba(0,0,0,.18);
    --cms-topbar-bg:            #ffffff;
    --cms-topbar-border:        #e9ecef;
    --cms-topbar-shadow:        0 1px 8px rgba(0,0,0,.06);
    --cms-topbar-text:          #495057;
    --cms-admin-bg:             #f4f6fb;
    --cms-text-dark:            #1a1d23;
    --cms-font-base:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cms-font-mono:      SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --cms-font-size:      1rem;
    --cms-line-height:    1.5;
}

[data-bs-theme="dark"] {
    --cms-bg:             #1a1d23;
    --cms-bg-alt:         #212529;
    --cms-border:         #495057;
    --cms-text:           #f8f9fa;
    --cms-text-muted:     #adb5bd;
    --cms-nav-bg:         #0d1117;
    --cms-sidebar-bg:     #0d1117;
    --cms-topbar-bg:      #1e2530;
    --cms-topbar-border:  #2d3748;
    --cms-topbar-text:    #cbd5e0;
    --cms-admin-bg:       #111827;
    --cms-text-dark:      #f1f5f9;
    --cms-sidebar-logo-bg:#141b24;
}

body {
    font-family:      var(--cms-font-base);
    font-size:        var(--cms-font-size);
    line-height:      var(--cms-line-height);
    color:            var(--cms-text);
    background:       var(--cms-bg);
    transition:       background-color .35s ease, color .35s ease;
    scrollbar-gutter: stable;
    /* Hauteur viewport dynamique — tient compte des barres système mobiles */
    min-height:       100vh;
    min-height:       100dvh;
}
main { flex: 1 0 auto; }

/* Centrage vertical pleine hauteur — tient compte des barres mobiles */
.min-vh-100 {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
*, *::before, *::after {
    transition-property: background-color, border-color, color;
    transition-duration: .35s;
    transition-timing-function: ease;
}

.navbar { background: var(--cms-nav-bg) !important; }
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-toggler { color: var(--cms-nav-text) !important; }
.navbar .nav-link:hover,
.navbar .nav-link.cms-nav-active { color: var(--cms-nav-hover) !important; }
[data-bs-theme="dark"] .navbar { background: var(--cms-nav-bg) !important; }

.cms-avatar-initial {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; font-weight: 600;
    user-select: none; flex-shrink: 0;
}

/* ── Flash : positionnement configurable ─────────────────── */
.cms-flash {
    position:  fixed;
    z-index:   9999;
    min-width: 280px;
    max-width: 400px;
    /* Défaut : en haut à droite */
    top:   1rem;
    right: 1rem;
}

/* Positions prédéfinies — appliquées par PHP via style inline ou classe */
.cms-flash.flash-top-left     { top:1rem;    right:auto; left:1rem;    bottom:auto; transform:none; }
.cms-flash.flash-top-center   { top:1rem;    right:auto; left:50%;     bottom:auto; transform:translateX(-50%); }
.cms-flash.flash-top-right    { top:1rem;    right:1rem; left:auto;    bottom:auto; transform:none; }
.cms-flash.flash-middle-left  { top:50%;     right:auto; left:1rem;    bottom:auto; transform:translateY(-50%); }
.cms-flash.flash-middle-right { top:50%;     right:1rem; left:auto;    bottom:auto; transform:translateY(-50%); }
.cms-flash.flash-bottom-left  { top:auto;    right:auto; left:1rem;    bottom:1rem; transform:none; }
.cms-flash.flash-bottom-center{ top:auto;    right:auto; left:50%;     bottom:1rem; transform:translateX(-50%); }
.cms-flash.flash-bottom-right { top:auto;    right:1rem; left:auto;    bottom:1rem; transform:none; }

/* ── Flash : animations d'entrée ────────────────────────── */
@keyframes cms-flash-fade-in    { from { opacity:0; } to { opacity:1; } }
@keyframes cms-flash-slide-left  { from { opacity:0; transform:translateX(-120%); } to { opacity:1; transform:translateX(0); } }
@keyframes cms-flash-slide-right { from { opacity:0; transform:translateX(120%);  } to { opacity:1; transform:translateX(0); } }
@keyframes cms-flash-slide-top   { from { opacity:0; transform:translateY(-120%); } to { opacity:1; transform:translateY(0); } }
@keyframes cms-flash-slide-bottom{ from { opacity:0; transform:translateY(120%);  } to { opacity:1; transform:translateY(0); } }

/* Pour middle-* avec translate combo */
@keyframes cms-flash-slide-left-mid  { from { opacity:0; transform:translateY(-50%) translateX(-120%); } to { opacity:1; transform:translateY(-50%) translateX(0); } }
@keyframes cms-flash-slide-right-mid { from { opacity:0; transform:translateY(-50%) translateX(120%);  } to { opacity:1; transform:translateY(-50%) translateX(0); } }
@keyframes cms-flash-slide-top-center  { from { opacity:0; transform:translateX(-50%) translateY(-120%); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes cms-flash-slide-bottom-center{ from { opacity:0; transform:translateX(-50%) translateY(120%);  } to { opacity:1; transform:translateX(-50%) translateY(0); } }

.cms-flash .toast {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22,.68,0,1.2);
}

.cms-nav-active { color: var(--cms-nav-hover) !important; font-weight: 600; }

.cms-sidebar, .cms-admin-sidebar {
    background: var(--cms-sidebar-bg);
    min-height: 100vh;
}
.cms-sidebar .nav-link {
    color: var(--cms-sidebar-text);
    transition: background .15s, color .15s;
    border-radius: var(--cms-radius);
}
.cms-sidebar .nav-link:hover,
.cms-sidebar .nav-link.active {
    background: var(--cms-sidebar-hover-bg);
    color: #fff;
}

.cms-admin-access-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--cms-radius);
    color: var(--cms-nav-text); font-size: 1.1rem;
    text-decoration: none; transition: background .15s, color .15s;
}
.cms-admin-access-btn:hover { background: rgba(255,255,255,.12); color: var(--cms-primary); }

.card { border-color: var(--cms-border); background: var(--cms-bg); }
.card-header { background: var(--cms-bg-alt); border-color: var(--cms-border); font-weight: 600; font-size: .875rem; }

.table { --bs-table-bg: var(--cms-bg); --bs-table-striped-bg: var(--cms-bg-alt); color: var(--cms-text); }

.form-control, .form-select {
    background-color: var(--cms-bg); border-color: var(--cms-border); color: var(--cms-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--cms-bg); border-color: var(--cms-primary);
    color: var(--cms-text); box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #2d3748; border-color: #4a5568; color: #f8f9fa; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background-color: #2d3748; border-color: var(--cms-primary); color: #f8f9fa; }
[data-bs-theme="dark"] .card { background: #1e2530; border-color: #2d3748; }
[data-bs-theme="dark"] .card-header { background: #17212f; border-color: #2d3748; }
[data-bs-theme="dark"] .list-group-item { background: #1e2530; border-color: #2d3748; color: #f8f9fa; }
[data-bs-theme="dark"] .table { --bs-table-bg: #1e2530; --bs-table-striped-bg: #17212f; color: #f8f9fa; border-color: #2d3748; }
[data-bs-theme="dark"] .modal-content { background: #1e2530; border-color: #2d3748; }
[data-bs-theme="dark"] .dropdown-menu { background: #1e2530; border-color: #2d3748; }
[data-bs-theme="dark"] .dropdown-item { color: #f8f9fa; }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.07); color: #fff; }
[data-bs-theme="dark"] .input-group-text { background: #2d3748; border-color: #4a5568; color: #adb5bd; }

.cms-stat-card { border: none !important; border-radius: .5rem; box-shadow: var(--cms-shadow); transition: transform .18s, box-shadow .18s; }
.cms-stat-card:hover { transform: translateY(-3px); box-shadow: var(--cms-shadow-lg); }
.cms-stat-icon {
    width: 46px; height: 46px; border-radius: .45rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .cms-flash { left: .5rem; right: .5rem; min-width: unset; }
}

/* ── Burger animé → croix ─────────────────────────────────── */
.cms-burger { background: none; padding: .25rem .4rem; }
.cms-burger:focus, .cms-burger:focus-visible { outline: none; box-shadow: none; }

/* Logo centré sur mobile — layout 3 colonnes */
@media (max-width: 991.98px) {
    .navbar > .container {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
    }
    /* Colonne 1 : burger */
    .cms-burger { grid-column: 1; justify-self: start; }
    /* Colonne 2 : darkmode (juste après burger) */
    #cms-theme-toggle-mobile { grid-column: 2; }
    /* Colonne 3 : logo (centre) */
    .cms-brand-center { grid-column: 3; justify-self: center; margin: 0; }
    /* Colonne 4 : user (droite) */
    .navbar > .container > div.d-lg-none { grid-column: 4; justify-self: end; }
    /* Collapse sur toute la largeur en dessous */
    #cmsNav { grid-column: 1 / -1; }
}
.cms-burger-icon { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.cms-burger-icon span {
    display: block; height: 2px; width: 100%;
    background: var(--cms-nav-text);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}
/* État ouvert (croix) */
.cms-burger.is-open .cms-burger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cms-burger.is-open .cms-burger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cms-burger.is-open .cms-burger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Indicateurs de critères mot de passe ─────────────────── */
/* Mobile : badges inline compacts */
#pwdHints {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
#pwdHints .cms-pwd-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 500;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    transition: background .2s, color .2s;
    cursor: default;
}
#pwdHints .cms-pwd-hint.ok {
    background: #198754;
    color: #fff;
}

/* Desktop (≥ 576px) : liste verticale */
@media (min-width: 576px) {
    #pwdHints {
        display: block;
        margin-top: .4rem;
    }
    #pwdHints .cms-pwd-hint {
        display: flex;
        border-radius: .25rem;
        padding: .15rem .4rem;
        margin-bottom: .2rem;
        font-size: .8rem;
        width: fit-content;
    }
}