/* ============================================================
   Thème Égide pour Vaultwarden
   Stratégie : on override uniquement les variables CSS et 2 logos.
   Aucun sélecteur universel, aucun !important sur du layout.
   ============================================================ */

/* Palette Égide — or sur noir chaud */
:root,
.theme_dark,
html.theme_dark {
  /* === Backgrounds === */
  --color-background:       14 12 10;      /* noir chaud principal */
  --color-background-alt:    8  7  6;      /* fond plus profond (header, sidebar) */
  --color-background-alt2:  28 24 20;      /* surfaces élevées (cards) */
  --color-background-alt3:  34 28 22;      /* surfaces plus élevées */
  --color-background-alt4:   8  7  6;

  /* === Primary = or Égide === */
  --color-primary-100:  48  38  22;        /* highlight subtil sur fond sombre */
  --color-primary-300: 139 116  64;        /* or sombre */
  --color-primary-600: 201 169  97;        /* or Égide médian (CTAs, liens) */
  --color-primary-700: 232 201 137;        /* or clair (texte sur fond sombre) */

  /* === Secondary = bordures et neutres chauds === */
  --color-secondary-100:  42  36  28;
  --color-secondary-300:  92  80  60;
  --color-secondary-500: 132 116  84;
  --color-secondary-600: 156 138 100;
  --color-secondary-700: 184 168 130;

  /* === Text === */
  --color-text-main:    245 240 226;       /* off-white chaud */
  --color-text-muted:   184 168 130;       /* or muté */
  --color-text-contrast: 14  12  10;       /* texte sur fond clair (badges) */
  --color-text-alt2:    255 248 230;
  --color-text-code:    232 201 137;

  /* === Hover === */
  --color-hover-default: rgb(232 201 137 / 0.10);
  --color-hover-contrast: rgb(0 0 0 / 0.20);

  /* === Marketing logo (couleur du SVG du loading) === */
  --color-marketing-logo: 232 201 137;
  --color-bw-blue:        201 169 97;     /* or à la place du bleu Bitwarden */

  /* === Illustrations login (les gros SVG de fond) === */
  --color-illustration-outline:        201 169  97;
  --color-illustration-bg-primary:     232 201 137;
  --color-illustration-bg-secondary:   184 156  92;
  --color-illustration-bg-tertiary:     46  38  24;
  --color-illustration-tertiary:       232 201 137;
  --color-illustration-logo:           245 240 226;

  --tw-ring-offset-color: #14110d;

  /* === Brand palette complète (utilisée par les boutons CL2 et tw-bg-brand-*) === */
  --color-brand-050: #fbf5e6;
  --color-brand-100: #f1e2b6;
  --color-brand-200: #e8d093;
  --color-brand-300: #dcba6f;
  --color-brand-400: #d1a851;
  --color-brand-500: #c9a961;
  --color-brand-600: #b08c44;
  --color-brand-700: #8e6f30;
  --color-brand-800: #6e5524;
  --color-brand-900: #4d3b18;
  --color-brand-950: #2a200e;

  /* === Indique au navigateur que la page est en mode sombre ===
     Cela rend les <select> natifs, scrollbars, autofill, popups
     du navigateur cohérents avec le thème sombre.
     C'EST CE QUI ÉVITE LE TEXTE NOIR SUR FOND NOIR DANS LES SELECTS. */
  color-scheme: dark;
}

/* ============================================================
   Logos Égide à la place de ceux de Vaultwarden / Bitwarden
   ============================================================ */

/* Logo principal (loading screen + pages frontend / login)
   On override les 2 thèmes avec !important pour battre les règles bundle :
   .theme_light img.new-logo-themed { content: url(images/logo.svg) }
   .theme_dark  img.new-logo-themed { content: url(images/logo-white.svg) } */
html.theme_light img.new-logo-themed,
html.theme_dark  img.new-logo-themed,
.theme_light    img.new-logo-themed,
.theme_dark     img.new-logo-themed,
img.new-logo-themed {
  content: url("/egide/logo-white.svg") !important;
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
}

/* Logo de la sidebar (icône en haut à gauche du vault) */
bit-nav-logo bit-nav-item a:before {
  background-image: url("/egide/icon-white.svg") !important;
  background-size: contain;
}

/* Marketing logo (post-bootstrap Angular) :
   le V-gear de Vaultwarden est un SVG inline dans main.js avec
   plusieurs <path class="tw-fill-marketing-logo">. On les masque,
   et nginx injecte un <image> qui pointe vers /egide/logo-white.svg. */
.tw-fill-marketing-logo {
  display: none !important;
}

/* Favicon visible : on garde celui par défaut, le HTML a déjà ses links */

/* ============================================================
   Garde-fous lisibilité
   Aucun sélecteur trop large, juste des correctifs ciblés
   pour les éléments natifs que CSS de Bitwarden ne couvre pas
   intégralement en dark.
   ============================================================ */

/* Inputs natifs et selects : héritent du thème sombre (color-scheme),
   mais on force quand même une couleur de texte sécuritaire
   pour les navigateurs qui ne respectent pas color-scheme. */
.theme_dark input,
.theme_dark select,
.theme_dark textarea {
  color: rgb(var(--color-text-main));
  background-color: rgb(var(--color-background-alt));
}

/* Les <option> dans les selects natifs (rendu OS-dépendant) */
.theme_dark select option,
.theme_dark optgroup {
  color: rgb(var(--color-text-main));
  background-color: rgb(var(--color-background-alt));
}

/* Placeholders */
.theme_dark input::placeholder,
.theme_dark textarea::placeholder {
  color: rgb(var(--color-text-muted));
  opacity: 1;
}

/* Autofill Chrome — évite le fond bleu clair illisible */
.theme_dark input:-webkit-autofill,
.theme_dark input:-webkit-autofill:hover,
.theme_dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--color-text-main));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-background-alt2)) inset;
  caret-color: rgb(var(--color-primary-700));
  transition: background-color 9999s ease-in-out 0s;
}

/* Scrollbar discrète or Égide */
.theme_dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.theme_dark ::-webkit-scrollbar-track {
  background: rgb(var(--color-background-alt));
}
.theme_dark ::-webkit-scrollbar-thumb {
  background: rgb(var(--color-secondary-300));
  border-radius: 6px;
}
.theme_dark ::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-primary-300));
}

/* Sélection texte */
.theme_dark ::selection {
  background: rgb(201 169 97 / 0.35);
  color: rgb(var(--color-text-alt2));
}

/* Liens : un peu plus dorés */
.theme_dark a:not(.btn):not([class*="tw-bg-"]) {
  color: rgb(var(--color-primary-700));
}
.theme_dark a:not(.btn):not([class*="tw-bg-"]):hover {
  color: rgb(var(--color-primary-600));
  text-decoration: underline;
}

/* Spinner de loading : on remplace le bleu Bitwarden par l'or */
.theme_dark .bwi-spinner,
.theme_dark .spinner-container .bwi {
  color: rgb(var(--color-primary-700)) !important;
}

/* Cards et surfaces : léger filet or pour personnalité */
.theme_dark .card,
.theme_dark bit-section,
.theme_dark .tw-bg-background-alt,
.theme_dark .tw-bg-background {
  border-color: rgb(var(--color-secondary-100));
}

/* Boutons primaires CL2 (tw-bg-primary-500) - garantit que l'or s'applique */
.theme_dark .tw-bg-primary-500,
.theme_dark .tw-bg-primary-600,
.theme_dark .tw-bg-primary-700 {
  color: rgb(20 14 6);
}

/* ============================================================
   Marketing SVG marqués par nginx sub_filter (class="egide-marketing-svg")
   On masque tout enfant natif (paths/g/text/etc. du wordmark Vaultwarden)
   et on n'affiche QUE l'<image> Égide injectée par nginx.
   ============================================================ */
svg.egide-marketing-svg > *:not(image) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
svg.egide-marketing-svg > image {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}