/*
 * UAO — Université Alassane Ouattara
 * Override couleurs thème Owlio → palette logo UAO
 *
 * Primaire  : #1e3272 (bleu marine — globe & texte du logo)
 * Accent    : #c9a227 (or — couleur académique)
 * Hover     : #0d1f5c (bleu marine foncé)
 * Light     : #e8ecf6 (teinte marine très claire)
 */

/* ─── Variables Bootstrap ───────────────────────────────────────────────── */
:root {
    --bs-primary:              #1e3272;
    --bs-primary-rgb:          30, 50, 114;
    --bs-link-color:           #1e3272;
    --bs-link-hover-color:     #0d1f5c;
    --bs-btn-bg:               #1e3272;
    --bs-btn-border-color:     #1e3272;
    --uao-primary:             #1e3272;
    --uao-primary-dark:        #0d1f5c;
    --uao-primary-light:       #e8ecf6;
    --uao-gold:                #c9a227;
    --uao-gold-dark:           #a8831c;
}

/* ─── Couleur primaire générale ─────────────────────────────────────────── */
.text-primary               { color: #1e3272 !important; }
.bg-primary                 { background-color: #1e3272 !important; }
.border-primary             { border-color: #1e3272 !important; }

/* ─── Boutons primaires ─────────────────────────────────────────────────── */
.btn-primary {
    background-color: #1e3272 !important;
    border-color:     #1e3272 !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #0d1f5c !important;
    border-color:     #0d1f5c !important;
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 50, 114, 0.35) !important;
}

.btn-outline-primary {
    color:        #1e3272 !important;
    border-color: #1e3272 !important;
}
.btn-outline-primary:hover {
    background-color: #1e3272 !important;
    color: #fff !important;
}

/* ─── Nav header / sidebar ──────────────────────────────────────────────── */
.nav-header {
    background: #1e3272 !important;
}
.deznav {
    background: #1e3272 !important;
}
.deznav .metismenu > li > a {
    color: rgba(255,255,255,0.75) !important;
}
.deznav .metismenu > li > a:hover,
.deznav .metismenu > li.mm-active > a {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
.deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li > a:hover i {
    color: #c9a227 !important;
}
.deznav .metismenu ul a {
    color: rgba(255,255,255,0.6) !important;
}
.deznav .metismenu ul a:hover,
.deznav .metismenu ul .mm-active > a {
    color: #c9a227 !important;
}
/* Icônes flaticon dans la sidebar */
.deznav .metismenu > li > a i {
    color: rgba(255,255,255,0.6) !important;
}

/* ─── Header / Topbar ───────────────────────────────────────────────────── */
.header {
    background: #fff !important;
    border-bottom: 2px solid #1e3272 !important;
}

/* ─── Hamburger ─────────────────────────────────────────────────────────── */
/*
 * Sur desktop : .nav-control est positionné right:-4rem, donc hors du
 * .nav-header (fond marine) → lignes marines sur fond clair.
 * Sur mobile (overlay) : le .nav-header disparaît et le bouton se retrouve
 * dans le .header (fond blanc) → on conserve les lignes marines + léger fond.
 */
.hamburger .line {
    background-color: #1e3272 !important;
}

@media only screen and (max-width: 1023px) {
    /* Cercle de fond pour améliorer la cliquabilité et le contraste */
    .nav-control {
        background: rgba(30, 50, 114, 0.08) !important;
        border-radius: 6px !important;
        padding: 4px 8px !important;
        /* Le burger (~42px) + gap doit dépasser la nav-header (5rem=80px) :
           right négatif suffisamment grand pour qu'il n'empiète pas sur le logo */
        right: -3.5rem !important;
    }
}

@media only screen and (max-width: 767px) {
    .nav-control {
        right: -3.5rem !important;
    }
}

@media only screen and (max-width: 575px) {
    .nav-control {
        right: -3.25rem !important;
    }
}

/* ─── Logo nav-header : icône carrée fond marine → or en hover ──────────── */
.nav-header .brand-logo img.logo-abbr {
    border: 2px solid rgba(255,255,255,0.2);
}

/* ─── Liens actifs / focus ──────────────────────────────────────────────── */
a { color: #1e3272; }
a:hover { color: #0d1f5c; }

/* ─── Badges / pills primary ────────────────────────────────────────────── */
.badge.bg-primary,
.badge-primary:not(.light) { background-color: #1e3272 !important; }
/* Variante claire : fond marine très clair + texte marine → LISIBLE.
   (Sans ça, le !important ci-dessus forçait fond marine + texte marine du
   `.light` = texte foncé sur fond foncé, illisible — ex. badge « WAVE ».)     */
.badge-primary.light,
.badge.bg-primary.light {
    background-color: #e8ecf6 !important;
    color: #1e3272 !important;
}

/* ─── Pagination ────────────────────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: #1e3272 !important;
    border-color:     #1e3272 !important;
}
.page-link { color: #1e3272 !important; }
.page-link:focus { box-shadow: 0 0 0 0.25rem rgba(30,50,114,.25) !important; }

/* ─── Progress bars ─────────────────────────────────────────────────────── */
.progress-bar { background-color: #1e3272 !important; }

/* ─── Accordions ────────────────────────────────────────────────────────── */
.accordion-button:not(.collapsed) {
    color: #1e3272 !important;
    background-color: #e8ecf6 !important;
    box-shadow: inset 0 -1px 0 rgba(30,50,114,.125) !important;
}

/* ─── Form focus ────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #1e3272 !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 50, 114, 0.2) !important;
}
.form-check-input:checked {
    background-color: #1e3272 !important;
    border-color:     #1e3272 !important;
}

/* ─── Dropdown active ───────────────────────────────────────────────────── */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #1e3272 !important;
}

/* ─── Selecteurs (bootstrap-select) : option active/survolee en GRIS ──────── */
/* Le marine ci-dessus rend les options des listes deroulantes peu lisibles.  */
/* On le remplace par un gris clair + texte fonce, uniquement dans les selects.*/
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu li > a:hover,
.bootstrap-select .dropdown-menu li > a:focus {
    background-color: #eef1f6 !important;
    color: #1F2432 !important;
}

/* ─── Tabs nav-pills ────────────────────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #1e3272 !important;
}
.nav-link { color: #1e3272; }

/* ─── Widget / card accent ──────────────────────────────────────────────── */
.card-bx.style-1,
[class*="bg-primary"] { background-color: #1e3272 !important; }

/* ─── Welcome auth panel gradient → marine ─────────────────────────────── */
.welcome-content::after {
    background: linear-gradient(160deg, #1e3272 0%, #0d1f5c 100%) !important;
    opacity: 0.82 !important;
}

/* ─── Auth layout bouton primaire ───────────────────────────────────────── */
.btn-primary-auth {
    background: #1e3272 !important;
}
.btn-primary-auth:hover {
    background: #0d1f5c !important;
}

/* ─── Auth input focus ──────────────────────────────────────────────────── */
.auth-input-icon i:not(.toggle-password) { color: #1e3272 !important; }
.auth-input-icon .form-control:focus {
    border-color: #1e3272 !important;
    box-shadow: 0 0 0 3px rgba(30,50,114,.12) !important;
}

/* ─── Lien mot de passe oublié ──────────────────────────────────────────── */
.auth-form a { color: #1e3272 !important; }

/* ─── Sidebar footer link ───────────────────────────────────────────────── */
.add-menu-sidebar { background: rgba(255,255,255,0.08) !important; }

/* ─── List group active ─────────────────────────────────────────────────── */
.list-group-item.active {
    background-color: #1e3272 !important;
    border-color:     #1e3272 !important;
}

/* ─── Table striped / hover ─────────────────────────────────────────────── */
.table-primary {
    --bs-table-bg: rgba(30,50,114,.1) !important;
}

/* ─── SVG logo gradient dans la navbar ─────────────────────────────────── */
.svg-logo-rect { fill: #1e3272 !important; }
.svg-logo-title { fill: #1e3272 !important; }

/* ─── Couleur or pour les accents / highlights ──────────────────────────── */
.text-gold      { color: #c9a227 !important; }
.bg-gold        { background-color: #c9a227 !important; }
.border-gold    { border-color: #c9a227 !important; }

/* ─── University badge sur les pages auth ───────────────────────────────── */
.university-badge {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* ─── Correctif : permettre le scroll vertical de la page ───────────────── */
/* Le template vendor met overflow:hidden sur #main-wrapper, ce qui coupe    */
/* le contenu long. On le remplace par overflow-x:hidden pour garder        */
/* uniquement le masquage horizontal (scroll horizontal inutile).           */
#main-wrapper {
    overflow: visible !important;
    overflow-x: hidden !important;
}

/* ─── Chevron sur les <select class="form-control"> ─────────────────────── */
/* Bootstrap applique `appearance:none` a .form-control SANS ajouter de       */
/* chevron : les listes deroulantes en .form-control n'ont donc aucune fleche.*/
/* On restaure le meme chevron que .form-select, en un seul endroit, pour     */
/* tous les formulaires. Les selects enhances (select2/selectpicker) sont     */
/* masques : cette regle reste sans effet visible sur eux.                    */
select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* ─── Modals hauts : jamais coupés hors écran ──────────────────────────────
   Sur une fenêtre courte, un modal-dialog-centered avec beaucoup de champs
   déborde en haut (titre) et en bas (bouton Enregistrer) → inutilisable.
   On borne directement la hauteur du CORPS et on le rend défilant : l'en-tête
   et le pied (boutons) restent toujours visibles. Indépendant de la structure
   (le .modal-body peut être imbriqué dans un <form>). Sans effet visible sur
   les petits modals (rien à faire défiler). Couvre TOUS les modals (centrés ou
   non) ; on exclut le plein écran (modal-fullscreen), déjà géré par Bootstrap. */
.modal-dialog:not([class*="fullscreen"]) .modal-body {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

/* ─── Comptes « année expirée » : boutons verrouillés ──────────────────────
   Posés par compte-expire.js quand le compte est expiré (hors pages docs /
   messagerie / profil). La vraie protection reste le middleware serveur.      */
.est-verrouille {
    opacity: .5 !important;
    cursor: not-allowed !important;
    filter: grayscale(.4);
    box-shadow: none !important;
}
.est-verrouille .fa-lock { color: #b8860b !important; }