/* ==========================================================================
   AcivTheme — Surcharge couleurs Côte d'Ivoire
   À charger APRÈS theme_v3.css (voir instructions d'intégration)
   ========================================================================== */

:root {
  --ci-green: #009A44;
  --ci-green-a11y: #00753A; /* version foncée pour texte sur fond clair, ratio AA (~5.8:1) */
  --ci-green-dark: #04331C;
  --ci-orange: #FF8200;
  --ci-ivory: #F6F1E7;
  --page-bg: var(--ci-ivory); /* fond de page — redéfini en mode sombre plus bas */
}

/* Mode sombre : le fond de page passe d'ivoire à un vert très foncé au lieu
   de rester clair — cohérent avec le reste de la palette CI plutôt qu'un
   gris neutre générique. */
[data-theme="dark"] {
  --page-bg: #152018;
}

/* ===== Fond de page — remplace la photo native Disposable (gen_background_img)
   par de l'ivoire uni, pour que le hero se fonde vers une couleur plate au
   lieu de doubler avec une autre photo en dessous ===== */
body#page-container {
  background-image: none !important;
  background-color: var(--page-bg) !important;
}

/* ===== NavBar — remplace le vert plat par le vert CI + accent orange ===== */
#Dispo_NavBar {
  background-color: var(--ci-green-dark);
  border-bottom: 3px solid var(--ci-orange);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .35);
}
#Dispo_NavBar a {
  color: #f0f5f2;
}
#Dispo_NavBar a:hover {
  color: var(--ci-orange);
}
#Dispo_NavBar a:active {
  color: #ffd9a8;
}
#Dispo_NavBar .dropdown-menu {
  background-color: var(--ci-green-dark);
}
#Dispo_NavBar .dropdown-menu a:hover {
  color: var(--ci-orange);
}
/* Libellé "Mode Sombre" à côté du switch — invisible à l'état désactivé
   avec la couleur de texte par défaut de Bootstrap sur fond vert foncé */
#Dispo_NavBar .form-check-label {
  color: #f0f5f2;
}

/* ===== SideBar (si activée dans les réglages du thème) ===== */
#Dispo_SideBar .dropdown-menu a:hover {
  color: var(--ci-green);
}

/* ===== Nav pills (filtres, onglets) ===== */
.nav-pills .nav-link {
  color: #fff;
  background-color: rgba(0, 154, 68, .55) !important;
}
.nav-pills .active {
  color: #ffffff;
  background-color: var(--ci-orange) !important;
}

/* ===== Cards — un liseré vert en haut de chaque carte, plus net que le plat d'origine ===== */
.card {
  border-top: 3px solid var(--ci-green);
  border-radius: .35rem;
}
.card .card-header {
  background-color: rgba(0, 154, 68, .12);
  border-bottom: 1px solid rgba(0, 154, 68, .3);
}
.card .card-header,
.card .card-header h1, .card .card-header h2, .card .card-header h3,
.card .card-header h4, .card .card-header h5, .card .card-header h6 {
  color: var(--ci-green-dark);
  font-weight: 700;
}

/* Carte METAR embarquée (widget metar-taf.com) — seule carte combinant
   bg-transparent ET p-0 dans le thème de base. Ce ciblage précis évite de
   toucher la rangée de stats (24 Vols, 35h...) qui utilise aussi
   bg-transparent mais avec du texte sombre pensé pour un fond clair. */
.card.bg-transparent.p-0 {
  background-color: var(--ci-green-dark) !important;
}
/* Ses propres card-header (titre METAR + liens Livestream/Data) doivent
   rester transparents et clairs, pas hériter du liseré vert clair générique
   ci-dessous — sinon ça recouvre le fond sombre voulu ici. */
.card.bg-transparent.p-0 .card-header {
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, .15);
}
.card.bg-transparent.p-0 .card-header,
.card.bg-transparent.p-0 a {
  color: #f0f5f2;
  font-weight: 400;
}
.card.bg-transparent.p-0 a:hover {
  color: var(--ci-orange);
}

/* Cartes dans le footer (copyright / powered by) : on garde neutre, pas d'accent vert */
#footer .card {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

/* ===== Boutons — CI green comme couleur primaire, orange en accent secondaire ===== */
.btn-primary {
  background-color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #007a37 !important;
  border-color: #007a37 !important;
}
.btn-outline-primary {
  color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
}
.btn-outline-primary:hover {
  background-color: var(--ci-green) !important;
  color: #fff !important;
}

/* Bouton d'accent (ex : boutons "d'action" secondaires) en orange */
.btn-warning {
  background-color: var(--ci-orange) !important;
  border-color: var(--ci-orange) !important;
  color: #fff !important;
}

/* ===== Badges / awards ===== */
.badge-primary {
  background-color: var(--ci-green) !important;
}
.badge-warning {
  background-color: var(--ci-orange) !important;
}

/* ===== Liens dans le corps de page — version foncée pour un contraste AA
   correct sur fond clair (le vert de marque #009A44 seul ne passe pas
   le seuil 4.5:1 pour du texte) ===== */
a {
  color: var(--ci-green-a11y);
}
a:hover,
a:focus {
  color: var(--ci-orange);
}

/* ==========================================================================
   Mode Sombre — theme_v3_darkmode.css recolore .card en brun-gris
   translucide (rgba(126,101,82,.65)) ; on remplace par la palette CI
   pour garder la cohérence de marque même en dark mode.
   ========================================================================== */

[data-theme="dark"] .card {
  background-color: rgba(4, 51, 28, 0.55) !important;
  border-top: 3px solid var(--ci-green);
}
[data-theme="dark"] .card .card-header {
  background-color: rgba(0, 154, 68, 0.15);
  border-bottom: 1px solid rgba(0, 154, 68, 0.3);
}
[data-theme="dark"] .card .card-header,
[data-theme="dark"] .card .card-header h1,
[data-theme="dark"] .card .card-header h2,
[data-theme="dark"] .card .card-header h3,
[data-theme="dark"] .card .card-header h4,
[data-theme="dark"] .card .card-header h5,
[data-theme="dark"] .card .card-header h6 {
  color: #f5f9f6 !important;
}
[data-theme="dark"] .card-footer {
  background-color: rgba(4, 51, 28, 0.75) !important;
}

/* Les liens dorés du dark mode d'origine (rgb(170,142,16)) laissent place
   à l'orange CI, plus lisible sur fond vert foncé */
[data-theme="dark"] a {
  color: var(--ci-orange) !important;
}
[data-theme="dark"] a:hover {
  color: #ffb45c !important;
}

[data-theme="dark"] #Dispo_NavBar {
  background-color: #021f14;
}

[data-theme="dark"] .btn-primary {
  background-color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
}

/* ==========================================================================
   Hero — bandeau photo + bande diagonale (page d'accueil & dashboard)
   Dépose la photo dans public/AcivTheme/img/hero.jpg
   (chemin relatif depuis stylesheet/custom.css → ../img/hero.jpg)
   ========================================================================== */

.aciv-hero {
  position: relative;
  height: 550px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: -.75rem;
  margin-right: -.75rem;
  background:
    linear-gradient(180deg, rgba(4,51,28,.42) 0%, rgba(4,51,28,.18) 55%, rgba(4,51,28,.35) 100%),
    url('../img/hero.jpg') center 58% / cover no-repeat;
}
.aciv-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--page-bg) 100%);
  pointer-events: none;
}
.aciv-hero__stripe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(115deg,
    transparent 0%, transparent 42%,
    var(--ci-orange) 42%, var(--ci-orange) 44.5%,
    #fff 44.5%, #fff 46%,
    var(--ci-green) 46%, var(--ci-green) 48%,
    transparent 48%, transparent 100%);
  opacity: .85;
  pointer-events: none;
}
.aciv-hero__inner {
  position: relative;
  z-index: 2;
  padding: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.aciv-hero__text {
  max-width: 560px;
}
.aciv-hero__eyebrow {
  display: block;
  color: var(--ci-orange);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.aciv-hero__title {
  color: #fff;
  font-weight: 700;
  font-size: 1.9rem;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.aciv-hero__subtitle {
  color: rgba(255,255,255,.9);
  font-size: .9rem;
  margin: 8px 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
@media (max-width: 768px) {
  .aciv-hero { height: 220px; }
  .aciv-hero__title { font-size: 1.4rem; }
}

/* ==========================================================================
   Bandeau de stats du dashboard (dashboard/icons.blade.php) — remonté dans
   le bas du hero et transformé en pastilles verre dépoli, au lieu de rester
   une rangée plate posée sur l'ivoire en dessous.
   Sélecteur ciblé sur la combinaison exacte de classes Bootstrap du row
   (row-cols-2 row-cols-md-4 row-cols-xl-8 mb-0), propre à ce partial.
   ========================================================================== */

.row.row-cols-2.row-cols-md-4.row-cols-xl-8.mb-0 {
  position: relative;
  z-index: 3;
  margin-top: -92px;
  margin-left: -.75rem;
  margin-right: -.75rem;
  padding: 0 .5rem;
}
.row.row-cols-2.row-cols-md-4.row-cols-xl-8.mb-0 .card.bg-transparent {
  background: rgba(4, 51, 28, .5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  padding: 10px 6px 8px !important;
}
.row.row-cols-2.row-cols-md-4.row-cols-xl-8.mb-0 .card-title {
  color: #fff !important;
}
.row.row-cols-2.row-cols-md-4.row-cols-xl-8.mb-0 .card-title.small {
  color: rgba(255, 255, 255, .75) !important;
  font-weight: 400;
}
@media (max-width: 768px) {
  .row.row-cols-2.row-cols-md-4.row-cols-xl-8.mb-0 {
    margin-top: 0;
  }
}

/* ==========================================================================
   Page de connexion — fond photo plein écran + branding CI
   ========================================================================== */

.aciv-login-bg {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 32px 16px;
  margin: -1rem -0.75rem 0;
  background:
    linear-gradient(180deg, rgba(4,51,28,.75) 0%, rgba(4,51,28,.55) 100%),
    url('../img/hero.jpg') center 55% / cover no-repeat;
}
.aciv-login-brand {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.aciv-login-brand__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}
.aciv-login-brand__name {
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ==========================================================================
   Widget Latest Awards — liste compacte au lieu d'une carte par ligne
   ========================================================================== */

.aciv-awards-card .list-group-item {
  border-left: none;
  border-right: none;
}
.aciv-award-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aciv-award-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.aciv-award-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.aciv-award-row__name {
  font-weight: 700;
  font-size: .875rem;
  color: var(--ci-green-a11y);
}
.aciv-award-row__meta {
  font-size: .75rem;
  color: #6c757d;
}
.aciv-award-row__badge {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}