/* ==========================================================================
   KAPTE — Custom CSS pour Entra External ID
   Thème : Midnight Slate
   --------------------------------------------------------------------------
   Sélecteurs basés sur la doc officielle Microsoft :
   https://learn.microsoft.com/en-us/entra/fundamentals/reference-company-branding-css-template

   Couleurs alignées sur les tokens canoniques Kapte (cf core/config/ui.py
   et assets/00-tokens.css) pour une expérience visuelle identique entre la
   page de login Microsoft et l'app Dash.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* ==========================================================================
   0. FORCE DARK MODE
   --------------------------------------------------------------------------
   Indique au navigateur que la page est en dark mode peu importe la
   pref systeme de l'utilisateur. Affecte aussi :
   - scrollbars natives (dark)
   - inputs natifs HTML (couleur texte par defaut sombre)
   - Le choix Microsoft entre square logo light/dark : force le dark
   ========================================================================== */
:root,
html,
body {
  color-scheme: dark !important;
}


/* ==========================================================================
   1. FOND DE PAGE GLOBAL
   --------------------------------------------------------------------------
   Microsoft applique ses styles via `body.cb` (spécificité 11), donc `body`
   seul ne gagne pas malgré !important. On cible explicitement `body.cb` +
   `body` pour couvrir les 2 specs.
   ========================================================================== */
/* IMPORTANT : on laisse le body TRANSPARENT pour que la background image
   uploadee dans Company branding (notre mockup Kapte dashboard) reste
   visible. Si on met `background-color: #0B1220 !important` ici, ca
   ECRASE l'image — l'utilisateur voit l'image charger puis disparaitre.
   Le mockup contient deja son propre fond Kapte sombre + gradient. */
body,
body.cb {
  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, sans-serif !important;
  color: #F8FAFC !important;
  /* Pas de background-color/image ici : on laisse Microsoft afficher
     l'image uploadee qui contient deja le fond Kapte + le mockup. */
}

/* On NE masque PAS .ext-background-image : Microsoft l'utilise pour
   afficher l'image uploadee. */

/* Conteneur central (template full-screen) : transparent pour laisser
   passer l'image en dessous. */
.ext-middle {
  background: transparent !important;
}

/* Template vertical split (partial-screen background) :
   Microsoft applique un filter CSS sur .ext-vertical-split-main-section qui
   altere la couleur differemment selon le navigateur (Chrome vs Edge donnent
   un rendu different). Calibrage iteratif :
   - CSS #2A3754 → affiche #302C54 (Chrome) ou #2F3054 (Edge)
   - Couleur cible (image PNG cote gauche) : #302F54
   - Difference < 3 points hex = imperceptible a l'oeil → acceptable.

   NOTE : laisser transparent retombe sur fond blanc (parent wrapper Microsoft),
   donc on doit avoir un background-color explicite. */

.ext-vertical-split-main-section {
  background: #2A3454 !important;
  background-image: none !important;
}
.ext-vertical-split-background-image-container {
  background-color: #2A3454 !important;  /* fallback si image pas chargee */
  /* Force object-fit: contain : l'image entiere est visible sans rognage
     (Microsoft applique 'cover' par defaut → rogne les bords).
     Avec 'contain', si le ratio container != 16:9, on a des bandes
     vides en haut/bas (ou gauche/droite) mais le contenu reste complet.
     On cible les 2 cas : background-image CSS ET <img> via object-fit. */
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.ext-vertical-split-background-image-container img,
.ext-vertical-split-background-image-container > img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}


/* ==========================================================================
   2. HEADER (en haut de la page)
   ========================================================================== */
.ext-header {
  background: transparent !important;
  border-bottom: none !important;
}

/* Logo header (245x36, configuré côté portail si Show header est activé).
   Contraintes : ne pas dépasser le format attendu par Microsoft. */
.ext-header-logo {
  max-height: 36px !important;
  max-width: 245px !important;
  object-fit: contain !important;
}


/* ==========================================================================
   3. SIGN-IN BOX (le panneau principal)
   ========================================================================== */
.ext-sign-in-box {
  /* Box sign-in : un cran plus sombre que le panneau de fond derriere
     (#1F2A45 panneau, #15203A box). Cree un contraste subtil sans etre
     dur. */
  background: #15203A !important;
  border: 1px solid #2A3654 !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px -16px rgba(0,0,0,0.65) !important;
  color: #F8FAFC !important;
  padding: 32px !important;
  /* Compact : on évite que Microsoft étire la box au-delà de 440px pour
     garder une impression "panneau" plutôt que "page entière". */
  max-width: 440px !important;
  width: 100% !important;
}

/* Titre principal (ex : "Se connecter") */
.ext-title {
  color: #F8FAFC !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 6px !important;
}

/* Sous-titre (ex : "Connectez-vous pour accéder à Kapte") */
.ext-subtitle {
  color: #94A3B8 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 22px !important;
}

/* Texte boilerplate / message custom en bas de la sign-in box */
.ext-boilerplate-text {
  color: #94A3B8 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   4. CHAMPS DE SAISIE
   ========================================================================== */
.ext-input.ext-text-box {
  background: #131C2E !important;
  border: 1px solid #2A3654 !important;
  border-radius: 12px !important;
  color: #F8FAFC !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
}

.ext-input.ext-text-box::placeholder {
  color: #64748B !important;
}

.ext-input.ext-text-box:hover {
  border-color: #3B4869 !important;
}

.ext-input.ext-text-box:focus,
.ext-input.ext-text-box:focus:hover {
  outline: none !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
  background: #0F1A2E !important;
}

/* Champ en erreur de validation */
.ext-input.ext-text-box.ext-has-error {
  border-color: #F87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18) !important;
}


/* ==========================================================================
   5. BOUTONS PRIMAIRES (ex : "Suivant", "Se connecter")
   ========================================================================== */
.ext-button.ext-primary {
  background: #3B82F6 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 28px !important;
  box-shadow: 0 4px 14px -3px rgba(59,130,246,0.5) !important;
}

.ext-button.ext-primary:hover,
.ext-button.ext-primary:focus:hover {
  background: #2563EB !important;
  box-shadow: 0 6px 18px -3px rgba(59,130,246,0.55) !important;
}

.ext-button.ext-primary:focus {
  outline: 2px solid #60A5FA !important;
  outline-offset: 2px !important;
}

.ext-button.ext-primary:active {
  background: #1D4ED8 !important;
}


/* ==========================================================================
   6. BOUTONS SECONDAIRES (ex : "Précédent")
   ========================================================================== */
.ext-button.ext-secondary {
  background: transparent !important;
  border: 1px solid #2A3654 !important;
  border-radius: 12px !important;
  color: #F8FAFC !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 11px 24px !important;
}

.ext-button.ext-secondary:hover,
.ext-button.ext-secondary:focus:hover {
  background: #1B263D !important;
  border-color: #3B4869 !important;
}

.ext-button.ext-secondary:focus {
  outline: 2px solid #60A5FA !important;
  outline-offset: 2px !important;
}

.ext-button.ext-secondary:active {
  background: #243150 !important;
}


/* ==========================================================================
   7. LIENS
   ========================================================================== */
a,
a:link,
.ext-link {
  color: #3B82F6 !important;
  text-decoration: none !important;
}

a:hover,
.ext-link:hover {
  color: #60A5FA !important;
  text-decoration: underline !important;
}

a:focus,
.ext-link:focus {
  outline: 2px solid #60A5FA !important;
  outline-offset: 2px !important;
}

a:active,
.ext-link:active {
  color: #1D4ED8 !important;
}


/* ==========================================================================
   8. MESSAGES D'ERREUR
   ========================================================================== */
.ext-error {
  color: #F87171 !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}


/* ==========================================================================
   9. BOÎTE DES FOURNISSEURS SOCIAUX (Google, Facebook)
   ========================================================================== */
.ext-promoted-fed-cred-box {
  /* Meme couleur que .ext-sign-in-box : un cran plus sombre que le
     panneau de fond pour creer un contraste subtil. */
  background: #15203A !important;
  border: 1px solid #2A3654 !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 30px -10px rgba(0,0,0,0.5) !important;
  margin-top: 18px !important;
  padding: 8px !important;
  color: #F8FAFC !important;
}

/* Boutons internes (Google, Facebook) — cible large */
.ext-promoted-fed-cred-box a,
.ext-promoted-fed-cred-box button {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: #F8FAFC !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 11px 14px !important;
  text-decoration: none !important;
}

.ext-promoted-fed-cred-box a:hover,
.ext-promoted-fed-cred-box button:hover {
  background: #1B263D !important;
  text-decoration: none !important;
}


/* ==========================================================================
   10. PIED DE PAGE
   ========================================================================== */
.ext-footer {
  background: transparent !important;
  border-top: 1px solid #2A3654 !important;
  margin-top: 26px !important;
}

.ext-footer-links {
  padding: 12px 0 !important;
}

.ext-footer-item {
  color: #64748B !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.ext-footer-item:hover {
  color: #94A3B8 !important;
  text-decoration: underline !important;
}

.ext-debug-item {
  color: #64748B !important;
}


/* ==========================================================================
   11. FALLBACK — héritage de couleur pour les sous-éléments
   ========================================================================== */
.ext-sign-in-box p,
.ext-sign-in-box span,
.ext-sign-in-box label,
.ext-sign-in-box div {
  color: inherit;
}


/* ==========================================================================
   12. ACCOUNT PICKER (data-testid Microsoft, non documenté dans .ext-*)
   --------------------------------------------------------------------------
   La page "Choisir un compte" / "Use another account" utilise des composants
   tiles que les sélecteurs .ext-* ne couvrent pas. Microsoft les marque avec
   `data-testid="mainText"` (email/nom) et `data-testid="secondaryText"`
   (sous-titre). Nos couleurs Kapte sont appliquées via ces attributs.
   ========================================================================== */

/* Texte principal des tiles (email du compte, "Utiliser un autre compte") */
[data-testid="mainText"] {
  color: #F8FAFC !important;
}

/* Texte secondaire (sous-titre éventuel : "Connecté", "Dernière connexion…") */
[data-testid="secondaryText"],
[data-testid="subText"] {
  color: #94A3B8 !important;
}

/* Description sous-titre globale (ex: "Connectez-vous pour accéder à Kapte"
   au-dessus de la liste des comptes) */
[data-testid="loginDescription"],
[data-testid="loginHeader"] {
  color: #F8FAFC !important;
}

/* Banner logo text : Microsoft affiche le NOM du tenant en texte si aucun
   logo image n'est uploadé pour cette taille. Sur fond sombre = quasi invisible
   par défaut. Si tu uploades un logo image, ce texte sera remplacé par
   l'image et cette règle devient sans effet. */
[data-testid="bannerLogoText"] {
  color: #F8FAFC !important;
  font-weight: 600 !important;
}

/* Lignes du picker : hover plus visible sur fond sombre */
[role="button"]:hover,
[data-testid="accountTile"]:hover,
.tile:hover {
  background: #1B263D !important;
}

/* Séparateurs horizontaux dans la liste (les pointillés gris clair par
   défaut deviennent presque invisibles sur fond sombre) */
hr,
.tile-divider,
.divider {
  border-color: #2A3654 !important;
  background-color: #2A3654 !important;
}


/* ==========================================================================
   13. PROVIDERS SOCIAUX & TITRES HAUT — surcharge spécificité Microsoft
   --------------------------------------------------------------------------
   Microsoft applique des classes hashées (ex: ___19xp3g7 f14k6m1a f4ybsrx)
   avec une spécificité élevée. On override en visant la combinaison
   conteneur + data-testid pour gagner en spécificité.
   ========================================================================== */

/* Texte des cartes fournisseurs sociaux (Google, Facebook, ...) :
   "Vous connecter à Google" reste noir par défaut → on force F8FAFC */
.ext-promoted-fed-cred-box [data-testid="mainText"],
.ext-promoted-fed-cred-box [data-testid="secondaryText"],
.ext-promoted-fed-cred-box span,
.ext-promoted-fed-cred-box div,
.ext-promoted-fed-cred-box a,
.ext-promoted-fed-cred-box button {
  color: #F8FAFC !important;
}

/* Titre "KAPTE" en haut du panel (bannerLogoText) — placeholder texte
   affiché par Microsoft quand pas de banner logo image. On le masque
   car le banner logo image (header) affiche déjà le vrai logo Kapte.
   Specificite renforcee avec body.cb. */
body.cb [data-testid="bannerLogoText"],
body [data-testid="bannerLogoText"],
[data-testid="bannerLogoText"],
body.cb .banner-logo-text,
.banner-logo-text {
  display: none !important;
}


/* ==========================================================================
   14. GLOBAL — Inputs natifs HTML (fallback si .ext-input ne matche pas)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
  background: #131C2E !important;
  border: 1px solid #2A3654 !important;
  border-radius: 12px !important;
  color: #F8FAFC !important;
  padding: 12px 14px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus {
  outline: none !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
  background: #0F1A2E !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: #64748B !important;
}


/* ==========================================================================
   15. ÉCRAN KMSI ("Stay signed in?") — bascule en theme CLAIR
   --------------------------------------------------------------------------
   Microsoft a confirme officiellement (learn.microsoft.com/.../2282923)
   que le titre KMSI n'est PAS personnalisable : il reste en color: #1b1b1b
   en dur. Sur fond dark Kapte, ce titre devient invisible.

   Strategie : detecter cet ecran via #lightbox (ID present UNIQUEMENT sur
   l'ecran KMSI) et basculer cette sign-in-box en theme CLAIR pour que le
   titre noir Microsoft natif redevienne lisible.

   Les autres ecrans (sign-in, account picker, federation) gardent le dark
   theme Kapte. Seul cet ecran specifique passe en clair.
   ========================================================================== */

/* Sign-in box repasse en blanc — bat .ext-sign-in-box (#15203A) via spec ID */
#lightbox.ext-sign-in-box,
#lightbox.sign-in-box {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #1B1B1B !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Tous les textes a l'interieur reprennent le contraste Microsoft natif */
#lightbox,
#lightbox * {
  color: #1B1B1B !important;
}

/* Email displayName : input clair avec bordure subtile */
#lightbox #displayName,
#lightbox .identity {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #1B1B1B !important;
  border: 1px solid #D1D5DB !important;
}

/* Description "Do this to reduce..." : gris standard */
#lightbox #KmsiDescription,
#lightbox .text-block-body {
  color: #4B5563 !important;
}

/* Bouton primaire "Yes" — bleu Kapte conserve pour coherence brand */
#lightbox input.button_primary,
#lightbox input.win-button.button_primary,
#lightbox input.button.primary {
  background: #3B82F6 !important;
  background-color: #3B82F6 !important;
  border: none !important;
  color: #FFFFFF !important;
}

#lightbox input.button_primary:hover,
#lightbox input.win-button.button_primary:hover {
  background-color: #2563EB !important;
}

/* Bouton secondaire "No" — fond blanc bordure grise */
#lightbox input.button-secondary,
#lightbox input.win-button.button-secondary {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #1B1B1B !important;
}

#lightbox input.button-secondary:hover {
  background-color: #F3F4F6 !important;
}