/*
 * Barre de navigation principale Kopailot, identique sur toutes les pages.
 * Collée au logo, à gauche ; les actions de page sont repoussées à droite.
 * Respecte la charte : pastilles crème sur en-tête bleu marine, actif en vert.
 */

/* Collage au logo : la nav absorbe l'espace libre, les actions vont à droite. */
.kop-mainnav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 14px;
  margin-right: auto;
}
.header-actions { margin-left: 0 !important; }

.kop-mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  color: #F5F0DF;
  text-decoration: none;
  border: 1px solid rgba(245, 240, 223, 0.22);
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kop-mainnav a:hover {
  background: rgba(245, 240, 223, 0.12);
  border-color: rgba(245, 240, 223, 0.45);
  color: #F5F0DF;
}
.kop-mainnav a.active,
.kop-mainnav a[aria-current="page"] {
  background: #52AE32;
  border-color: #52AE32;
  color: #ffffff;
}

/*
 * Pastille de notification facon SMS, en haut a droite de l'onglet concerne
 * (Demandes). Reprend le cuivre de la charte (accent principal) ; se masque
 * via l'attribut hidden quand le compteur est a zero.
 */
.kop-nav-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #C8804A;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(11, 24, 56, 0.45);
}
.kop-nav-badge[hidden] {
  display: none;
}

/* Thème clair : conserver une lisibilité suffisante des pastilles. */
:root[data-kop-theme="light"] .kop-mainnav a {
  color: var(--kop-theme-text, #143466);
  border-color: rgba(20, 52, 102, 0.22);
}
:root[data-kop-theme="light"] .kop-mainnav a:hover {
  background: rgba(20, 52, 102, 0.06);
  border-color: rgba(20, 52, 102, 0.4);
}
:root[data-kop-theme="light"] .kop-mainnav a.active {
  color: #ffffff;
}

@media (max-width: 860px) {
  .kop-mainnav {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*
 * Sous-onglets de la section Demandes (Demandes / Statistiques), affichés sous
 * la barre principale. Ils regroupent les écrans propres aux demandes
 * entrantes sans encombrer le menu global. Accent cuivre pour l'onglet actif,
 * afin de les distinguer de la navigation principale (active en vert).
 */
.kop-subtabs {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 22px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kop-subtabs a {
  text-decoration: none;
  color: var(--muted, rgba(245, 241, 232, 0.68));
  border: 1px solid rgba(200, 128, 74, 0.28);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kop-subtabs a:hover {
  border-color: rgba(200, 128, 74, 0.6);
  color: var(--text, #f5f1e8);
}
.kop-subtabs a.active,
.kop-subtabs a[aria-current="page"] {
  background: #c8804a;
  border-color: #c8804a;
  color: #ffffff;
}