:root {
  /* === Palette primaire Aregie (#0066a3) === */
  --color-primary: #0066a3 !important;
  --color-primary-contrast: #ffffff !important;
  --color-primary-dark-1: #005c93 !important;
  --color-primary-dark-2: #005282 !important;
  --color-primary-dark-3: #004772 !important;
  --color-primary-dark-4: #003d62 !important;
  --color-primary-dark-5: #003352 !important;
  --color-primary-dark-6: #002941 !important;
  --color-primary-dark-7: #001f31 !important;
  --color-primary-light-1: #0074b8 !important;
  --color-primary-light-2: #1f85c4 !important;
  --color-primary-light-3: #4497cc !important;
  --color-primary-light-4: #72b0d8 !important;
  --color-primary-light-5: #9dc8e5 !important;
  --color-primary-light-6: #c6e0f2 !important;
  --color-primary-light-7: #e0f0fa !important;
  --color-primary-alpha-10: #0066a31a !important;
  --color-primary-alpha-20: #0066a333 !important;
  --color-primary-alpha-30: #0066a34d !important;
  --color-primary-alpha-40: #0066a366 !important;
  --color-primary-alpha-50: #0066a380 !important;
  --color-primary-alpha-60: #0066a399 !important;
  --color-primary-alpha-70: #0066a3b3 !important;
  --color-primary-alpha-80: #0066a3cc !important;
  --color-primary-alpha-90: #0066a3e6 !important;
  --color-primary-hover: var(--color-primary-dark-2) !important;
  --color-primary-active: var(--color-primary-dark-4) !important;

  /* === Navbar bleue comme l'app React (#0066a3) === */
  --color-nav-bg: #0066a3 !important;
  /* Hover : superposition blanche semi-transparente identique au variant "grey" React */
  --color-nav-hover-bg: rgba(255, 255, 255, 0.15) !important;
}

/* Badge texte à côté du logo, comme dans SERVING_FILES */
#navbar a.item.brand,
#navbar a.brand,
#navbar .item.brand,
#navbar a:has(> img[src*="logo"]),
#navbar a:has(> svg[class*="logo"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding-right: 12px !important;
  overflow: visible !important;
}

#navbar a.item.brand::after,
#navbar a.brand::after,
#navbar .item.brand::after,
#navbar a:has(> img[src*="logo"])::after,
#navbar a:has(> svg[class*="logo"])::after {
  content: "GIT";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  border: 1px solid rgba(0, 102, 163, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #0066a3 !important;
  padding: 3px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(23, 33, 38, 0.16);
  transform: translateY(-8px);
}

/* Texte blanc + icônes SVG blancs sur tous les items directs de la navbar */
#navbar .item,
#navbar>div>a,
#navbar>div>button,
#navbar details.dropdown>summary {
  color: #f9f9f9 !important;
}

#navbar .item svg,
#navbar>div>a svg,
#navbar>div>button svg,
#navbar details.dropdown>summary svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Hover / état ouvert : superposition blanche — géré via --color-nav-hover-bg
   mais on force aussi ici pour les navigateurs qui ignorent la surcharge de variable */
#navbar a.item:hover,
#navbar a.item:focus,
#navbar button.item:hover,
#navbar button.item:focus,
#navbar details.dropdown>summary:hover,
#navbar details.dropdown>summary:focus,
#navbar details.dropdown[open]>summary {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdown user-menu : fond blanc → texte sombre */
.user-menu .item,
.user-menu .item svg,
.user-menu .header,
.user-menu .header span,
.user-menu a,
.user-menu a svg {
  color: var(--color-text) !important;
  fill: var(--color-text) !important;
}

/* Tous les dropdowns navbar (grille apps, + créer, etc.) : fond blanc → texte sombre */
#navbar .dropdown .menu,
#navbar .dropdown .menu .item,
#navbar .dropdown .menu .header,
#navbar .dropdown .menu a,
#navbar .dropdown .menu .divider {
  color: var(--color-text) !important;
  fill: var(--color-text) !important;
}

#navbar .dropdown .menu .item svg,
#navbar .dropdown .menu a svg {
  fill: var(--color-text) !important;
  stroke: none !important;
}

/* Logo navbar — content: url() remplace l'img built-in par notre fichier custom */
#navbar-logo img {
  content: url('/assets/img/aregie-logo.png') !important;
  width: auto !important;
  height: 30px !important;
  max-width: 160px !important;
}

/* Footer */
#footer,
#footer a,
#footer .item,
#footer span {
  color: #ffffff !important;
}

/* Liens */
a {
  color: #0066a3;
}

a:hover {
  color: #0469d5;
}