/* src/staticfiles/assets/css/custom.css */

/* Libellé ECUE scrollable au survol */
.ecue-scroll {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}

.ecue-scroll span {
  display: inline-block;
  padding-right: 20px;
}

.ecue-scroll:hover span {
  animation: scroll-text 6s linear 5;
}

@keyframes scroll-text {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* En‑tête ECUE */
th.ecue-header {
  background-color: #ffffff;
}

/* Colonne Moyenne colorée */
th.moyenne-col,
td.moyenne-col {
  background-color: #eff1f1 !important;
}

/* Variations pastel ultra-claires (sans rouge) */
.ecue-color-1 {
  background-color: #c5f0ff !important;
}

/* bleu ciel ultra clair */
.ecue-color-2 {
  background-color: #c7ffc7 !important;
}

/* vert menthe ultra clair */
.ecue-color-3 {
  background-color: #fff7c7 !important;
}

/* jaune crème très pâle */
.ecue-color-4 {
  background-color: #dac5ff !important;
}

/* violet lavande très pâle */
.ecue-color-5 {
  background-color: #c7e3ff !important;
}

/* bleu glacier ultra clair */
.ecue-color-6 {
  background-color: #c9fff0 !important;
}

/* turquoise très pâle */
.ecue-color-7 {
  background-color: #ffc2c2 !important;
}

/* gris perle quasi blanc */
.ecue-color-8 {
  background-color: #d7ffc3 !important;
}

/* vert anis très doux */
.ecue-color-9 {
  background-color: #c3d7ff !important;
}

/* bleu azur ultra clair */
.ecue-color-10 {
  background-color: #ffffc4 !important;
}

/* blanc crème très léger */

/* Harmonisation DataTables */
table.dataTable thead th {
  vertical-align: middle;
}

table.dataTable thead th.ue-header {
  background-color: #2e7d32 !important;
  /* vert foncé élégant */
  color: #202020 !important;
  /* texte blanc pour contraste */
  font-weight: bold;
}

table.dataTable tbody td.ue-moyenne,
table.dataTable tbody td.ue-valide {
  background-color: #2e7d32 !important;
  /* vert foncé élégant */
  color: #202020 !important;
  /* texte blanc pour contraste */
  font-weight: bold;
}


/* Sur les écrans larges (ordinateurs) */
@media (min-width: 1200px) {
  .modal-custom-60 {
    max-width: 60% !important;
  }
}

/* Taille de police pour le pourcentage */
.fs-12 {
  font-size: 12px;
}

/* Chevauchement des avatars */
.ms-n2 {
  margin-left: -12px !important;
  z-index: 1;
}

.ms-n2:first-child {
  margin-left: 0 !important;
}

/* Animation et style propre */
.progress-bar {
  transition: width 1s ease-in-out;
}

/* Effet au survol du bouton détails */
.btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2) !important;
}

/* Style pour les emojis et avatars dans le tableau */
.fs-18 {
  font-size: 18px;
}

.bg-light-subtle {
  background-color: #f8f9fa;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}

/* Animation pour le badge du cours actuel */
.animate-pulse {
  animation: pulse-bg 2s infinite;
}

@keyframes pulse-bg {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Style pour le carrousel si utilisé */
.owl-carousel.lesson .item {
  padding: 5px;
}

/* Style pour le défilement horizontal du syllabus */
.overflow-auto::-webkit-scrollbar {
  height: 6px;
}

.overflow-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.overflow-auto::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #3D5EE1;
}

/* Empêche les cartes de s'écraser dans le flex-nowrap */
.flex-nowrap .col-xxl-3 {
  flex: 0 0 auto;
}

.bg-primary-transparent {
  background-color: rgba(15, 108, 240, 0.1) !important;
  color: #0f6cf0 !important;
}

.badge-soft-secondary {
  background-color: #f1f1f2;
  color: #333;
}

.badge-soft-info {
  background-color: rgba(0, 207, 221, 0.1);
  color: #00cfdd;
}

/* Pour masquer la scrollbar moche sur Chrome tout en gardant le défilement */
.overflow-auto::-webkit-scrollbar {
  height: 4px;
}

.overflow-auto::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 10px;
}

/* Reproduit exactement le design du modèle statique */
.bg-success-transparent {
  background-color: rgba(28, 202, 184, 0.1) !important;
  color: #1ccab8 !important;
}

.bg-warning-transparent {
  background-color: rgba(255, 159, 67, 0.1) !important;
  color: #ff9f43 !important;
}

.bg-info-transparent {
  background-color: rgba(0, 207, 221, 0.1) !important;
  color: #00cfdd !important;
}

.bg-danger-transparent {
  background-color: rgba(234, 84, 85, 0.1) !important;
  color: #ea5455 !important;
}

.bg-secondary-transparent {
  background-color: rgba(130, 134, 139, 0.1) !important;
  color: #82868b !important;
}

/* Style des boutons avec bordures fines comme demandé */
.btn-outline-primary.border,
.btn-outline-dark.border {
  border: 1px solid #e9ecef !important;
}

.btn-outline-primary:hover {
  background-color: #0f6cf0;
  color: white;
}

.btn-outline-dark:hover {
  background-color: #343a40;
  color: white;
}

.custom-slider::-webkit-scrollbar {
  height: 3px;
}

.custom-slider::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 10px;
}

.avatar-group .avatar {
  transition: transform 0.2s;
}

.avatar-group .avatar:hover {
  transform: translateY(-2px);
  z-index: 10;
}

/* Transition douce pour tous les changements */
.transition-all {
  transition: all 0.3s ease;
  text-decoration: none !important;
}

/* HOVER SUCCESS (Vert) */
.hover-success-card:hover {
  border-color: #28a745 !important;
  background-color: #f8fff9 !important;
  color: #28a745 !important;
}

.hover-success-card:hover i {
  color: #28a745 !important;
}

/* HOVER PRIMARY (Bleu) */
.hover-primary-card:hover {
  border-color: #0d6efd !important;
  background-color: #f0f7ff !important;
  color: #0d6efd !important;
}

.hover-primary-card:hover i {
  color: #0d6efd !important;
}

/* HOVER SECONDARY (Gris) */
.hover-secondary-card:hover {
  border-color: #93ccff !important;
  background-color: #f8f9fa !important;
  color: #93ccff !important;
}

.hover-secondary-card:hover i {
  color: #93ccff !important;
}

/* HOVER DARK (Noir) */
.hover-dark-card:hover {
  border-color: #212529 !important;
  background-color: #f1f1f1 !important;
  color: #212529 !important;
}

.hover-dark-card:hover i {
  color: #212529 !important;
}

/* HOVER WARNING (Orange) */
.hover-warning-card:hover {
  border-color: #ffc107 !important;
  background-color: #fffdf5 !important;
  color: #ff9800 !important;
  /* Un peu plus sombre pour la lisibilité du texte */
}

.hover-warning-card:hover i {
  color: #ffc107 !important;
}

/* HOVER INFO (Bleu) */
.hover-info-card:hover {
  border-color: #0f65cd !important;
  background-color: #eaf4ff !important;
  color: #0f65cd !important;
}

.hover-info-card:hover i {
  color: #0f65cd !important;
}

/* CARTES DE VERSIONS (publication:versions_publication_classe) : réaction visuelle au survol
   (ombre + bordure bleue), sans toucher aux couleurs du texte/badges à l'intérieur — contrairement
   à .hover-*-card ci-dessus, pensé pour de simples cartes-liens icône + texte, pas pour des cartes
   contenant plusieurs badges de couleurs différentes.
   Piège rencontré et corrigé (2026-08-24) : un `transform` ici (ex. translateY au survol, retiré)
   casse le positionnement `position: fixed` de toute modale Bootstrap imbriquée dans la carte — un
   ancêtre avec `transform` devient le référentiel de positionnement de ses descendants fixed, la
   modale de suppression/restauration se retrouvait donc coincée dans les limites de la carte au
   lieu de couvrir l'écran (symptôme observé : la modale "tremble" sans jamais s'ouvrir
   correctement). Ne jamais réintroduire de `transform` sur `.carte-version`/`.carte-version:hover`
   tant que les modales restent des descendants directs de la carte dans le DOM. */
.carte-version {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.carte-version:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  border-color: #0d6efd;
}

/* Ajuste le conteneur principal de la recherche */
.nav-search-inputs {
    flex: 0 0 600px; /* Définit une base de 600px de large */
    transition: all 0.3s ease;
}

/* Force l'input à prendre tout l'espace du conteneur */
.searchinputs {
    display: flex;
    width: 100%;
}

/* Sur les petits écrans, on réduit la taille */
@media (max-width: 991px) {
    .nav-search-inputs {
        flex: 0 0 300px;
        max-width: 100%;
    }
}

/* =========================================================================
   Recherche globale — palette de commandes (Ctrl/Cmd+K)
   Voir static/assets/js/dashboard/recherche_globale.js.
   Thème clair par défaut ; overrides mode sombre via [data-theme="dark"].
   ========================================================================= */

/* Déclencheur dans le header (remplace l'ancienne barre de recherche) */
.rg-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rg-trigger:hover {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.rg-trigger .ti-search { font-size: 1.1rem; }
.rg-trigger-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rg-kbd { display: inline-flex; gap: 3px; margin-left: auto; }

/* Touches clavier (déclencheur + pied de palette + bouton Échap) */
.rg-kbd kbd,
.rg-footer kbd,
.rg-close {
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1.4;
    padding: 1px 6px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #6b7280;
}

/* Overlay plein écran */
.rg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(15, 23, 42, 0.45);
}
.rg-overlay[hidden] { display: none; }
body.rg-ouvert { overflow: hidden; }

/* Panneau central */
.rg-panel {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: 72vh;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: rg-apparition 0.12s ease-out;
}
@keyframes rg-apparition {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.rg-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.rg-input-icon { color: #9ca3af; font-size: 1.2rem; }
.rg-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1.05rem;
    color: #1f2937;
}
.rg-input::placeholder { color: #9ca3af; }
.rg-close { cursor: pointer; }

.rg-results { overflow-y: auto; padding: 8px; }
.rg-section-titre {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}
.rg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
}
.rg-item:hover,
.rg-item.active { background: #eef2ff; color: #1f2937; }
.rg-item-icon {
    flex-shrink: 0;
    width: 1.3rem;
    text-align: center;
    font-size: 1.15rem;
    color: #6b7280;
}
.rg-item.active .rg-item-icon { color: #4f46e5; }
.rg-item-titre {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
}
.rg-item mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }

.rg-statut { padding: 28px 16px; text-align: center; color: #9ca3af; font-size: 0.9rem; }
.rg-chargement .ti-loader-2 { display: inline-block; animation: rg-spin 0.8s linear infinite; }
@keyframes rg-spin { to { transform: rotate(360deg); } }

.rg-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.72rem;
    color: #9ca3af;
}

@media (max-width: 575px) {
    .rg-overlay { padding: 8vh 8px 8px; }
    .rg-panel { max-height: 82vh; }
}

/* =========================================================================
   Menu mobile "..." du topbar (.mobile-user-menu, sous 991.98px)
   Etend aux <button> le style que style.css:2131-2135 ne pose que sur les <a>
   -- necessaire pour le declencheur "Rechercher" et les 2 boutons de langue
   (des <button type=submit> dans un <form>), ajoutes a ce menu.
   ========================================================================= */
.header .mobile-user-menu .dropdown-menu button {
    color: #39435F;
    line-height: 40px;
    padding: 0 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
}

/* Défilement vertical : ce menu contient désormais plus d'entrées que l'espace visible sur les
   petits écrans (recherche, notifications, langue x2, profil, paramètres, déconnexion). */
.header .mobile-user-menu .dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
}

/* --- Mode sombre (le thème pose data-theme="dark" sur <body>/<html>) --- */
[data-theme="dark"] .rg-trigger { background: #1f2937; border-color: #374151; color: #9ca3af; }
[data-theme="dark"] .rg-panel { background: #1f2937; border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .rg-input-row,
[data-theme="dark"] .rg-footer { border-color: #374151; }
[data-theme="dark"] .rg-input { color: #e5e7eb; }
[data-theme="dark"] .rg-input::placeholder { color: #9ca3af; }
[data-theme="dark"] .rg-item { color: #e5e7eb; }
[data-theme="dark"] .rg-item:hover,
[data-theme="dark"] .rg-item.active { background: #374151; }
[data-theme="dark"] .rg-item.active .rg-item-icon { color: #a5b4fc; }
[data-theme="dark"] .rg-kbd kbd,
[data-theme="dark"] .rg-footer kbd,
[data-theme="dark"] .rg-close { background: #374151; border-color: #4b5563; color: #d1d5db; }
[data-theme="dark"] .rg-item mark { background: #a16207; color: #fff; }

/* =========================================================================
   Logo UDSN en mode sombre — variantes recolorées dédiées
   logo udsn mode sombre.png / logo icon mode sombre.png : mêmes armoiries, mêmes couleurs
   (arbre, étoiles, "UDSN" vert/or/rouge) — seuls les éléments qui touchaient directement le
   fond transparent (bandeau "UNIVERSITE", texte "My"/"Academia") ont été recolorés (noir → vert
   #0F8633 / blanc), pour rester lisibles sans plaque claire. .dark-logo-small est le pendant de
   .dark-logo pour la sidebar repliée (.mini-sidebar), absent du thème Preskool d'origine (qui
   n'avait qu'une seule variante de logo replié, .logo-small, commune aux deux thèmes).
   ========================================================================= */
.dark-logo-small {
    display: none;
    line-height: 0;
}
.dark-logo-small img {
    width: 30px;
}
/* Comme son équivalent vendor (.mini-sidebar .header-left .logo-small, style.css:2164), ce bloc ne
   doit s'appliquer qu'à partir de 992px -- sans ce garde-fou, une préférence "Mini" restée en
   localStorage depuis une session desktop précédente forçait le petit logo icône même sur mobile
   en mode sombre, alors que le mode clair respectait déjà cette limite via la règle vendor. */
@media (min-width: 992px) {
    html[data-theme="dark"] body.mini-sidebar .header-left .logo-small {
        display: none;
    }
    html[data-theme="dark"] body.mini-sidebar .header-left .dark-logo-small {
        display: block;
        padding: 10px 0 0;
    }
}

/* style.css:24741-24744 masque .dark-logo dès que .mini-sidebar est actif en mode sombre, sans
   limite de largeur (contrairement à toutes les règles équivalentes du mode clair, cantonnées au
   bureau) -- sur mobile, où la bascule vers le petit logo (bloc ci-dessus) ne s'applique jamais,
   ça faisait disparaître le logo purement et simplement. On restaure l'affichage du logo complet
   sur petit écran, avec la même limite 991.98px que sa règle de centrage juste au-dessus
   (style.css:1398-1407) ; !important nécessaire pour l'emporter sur la règle vendor elle-même
   posée en !important. */
@media (max-width: 991.98px) {
    html[data-theme="dark"] body.mini-sidebar .header-left .dark-logo {
        display: block !important;
    }
}

/* Logo des pages sans sidebar/topbar (connexion, inscription, salle d'attente, vérification
   d'email, découvrir l'application, mot de passe oublié...) : .dark-logo/.logo (vendor,
   style.css:2368+) ne basculent qu'à l'intérieur de .header (topbar) -- ces pages n'ont pas de
   topbar, donc le logo clair restait affiché tel quel en mode sombre. Classes dédiées, sans
   dépendance à un conteneur .header, deux conteneurs séparés (un par mode) dans chaque template
   pour que chaque logo prenne toute la largeur disponible. */
.auth-logo-clair {
    display: block;
}
.auth-logo-sombre {
    display: none;
}
html[data-theme="dark"] .auth-logo-clair {
    display: none;
}
html[data-theme="dark"] .auth-logo-sombre {
    display: block;
}

/* Boutons flottants haut-droit, pages sans sidebar/topbar (partials/base-without-nav.html)
   -- conteneur .floating-actions regroupe les boutons (rafraîchir à gauche, mode clair/sombre à droite)
   en ligne horizontale, positionné en haut à droite de la page faute de topbar où les loger.
   Boutons bascule clair/sombre : même mécanique que #dark-mode-toggle/#light-mode-toggle du
   topbar (classe dark-mode-toggle, attribut data-target-theme, theme-script.js).
   Bouton rafraîchir : simple bouton qui recharge la page au clic. */
.floating-actions {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

/* Sur petit écran (mobile), ajouter du padding au contenu pour qu'il ne passe pas sous les
   boutons flottants. */
@media (max-width: 991.98px) {
    .main-wrapper {
        padding-top: 5rem;
    }
}

/* Correctif de contraste .text-gray-2 (style.css:13211, #CDD0D7) : cette classe fait partie
   d'une échelle de gris à 9 niveaux (gray-1 très clair -> gray-9 très foncé) pensée pour des
   fonds sombres, mais elle est utilisée par erreur comme légende de texte sur fond blanc dans
   les cartes KPI des dashboards de rôle (agent_scolarite/chef_scolarite/etudiant/presidence/
   responsable_etablissement_dashboard.html) -- #CDD0D7 sur blanc ne tient quasiment aucun
   contraste (~1,4:1, très en dessous du minimum WCAG AA de 4,5:1), rendant ces légendes
   quasiment illisibles. Repris ici sur la valeur gray-7 du même thème (#515B73, ~6,5:1 sur
   blanc) plutôt que dans style.css (fichier vendor, jamais modifié directement) -- aucune
   utilisation de .text-gray-2 sur fond sombre n'existe dans le projet à ce jour (vérifié), donc
   aucune régression attendue ailleurs. */
.text-gray-2 {
    color: #515B73;
}