/*
 * coffeebreaks — habillage du portail Authelia (auth.coffeebreaks.eu).
 *
 * Injecte par nginx (authelia/theme/nginx.conf) apres ds/tokens/tokens.css,
 * dont il n'utilise que les variables : aucune couleur ni police en dur.
 * Theme Creme ou Torrefaction selon `theme` d'Authelia, qui pose
 * data-theme="light|dark|auto" sur <body> : tokens.css et ce fichier suivent
 * le meme attribut (auto = prefers-color-scheme).
 *
 * Specificite : chaque regle part de `body:not(#cb)` (poids d'un ID). Les
 * styles d'Authelia sont des classes Emotion (.mui-xxxx, .mui-xxxx:hover) :
 * l'ID passe devant sans !important, y compris pour les menus et fenetres que
 * Material UI rend hors de #root. On cible les classes stables de Material UI
 * (.MuiButton-containedPrimary...), jamais les .mui-xxxx, qui changent a chaque
 * version.
 *
 * A reverifier apres chaque montee de version d'Authelia : page de connexion,
 * double authentification, reinitialisation du mot de passe, consentement.
 */

/* ── Logo : mark du design system, version inverse sur fond sombre ───────── */

body:not(#cb) {
  --cb-logo: url("ds/assets/logos/coffeebreaks-mark.svg");
}

@media (prefers-color-scheme: dark) {
  body:not(#cb):not([data-theme="light"]) {
    --cb-logo: url("ds/assets/logos/coffeebreaks-mark-inverse.svg");
  }
}

body:not(#cb)[data-theme="dark"] {
  --cb-logo: url("ds/assets/logos/coffeebreaks-mark-inverse.svg");
}

/* logo.png (servi par asset_path, aussi utilise dans les emails) est pousse
   hors de sa boite par le padding ; le SVG du theme courant s'affiche en fond. */
body:not(#cb) img[alt="Logo"] {
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  padding-left: 64px;
  background: var(--cb-logo) center / contain no-repeat;
}

/* ── Mention « Powered by Authelia » : masquee ─────────────────────────────
   Elle annonce le logiciel, et donc ses failles connues, a qui cherche une
   cible. On vise l'adresse du lien, stable, pas les classes Emotion. */

body:not(#cb) a[href="https://www.authelia.com"] {
  display: none;
}

/* ── Page ───────────────────────────────────────────────────────────────── */

html {
  background-color: var(--surface);
}

body:not(#cb) {
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* Material UI impose Roboto composant par composant : tout herite de body. */
body:not(#cb) * {
  font-family: inherit;
}

body:not(#cb) .MuiTypography-root {
  letter-spacing: normal;
}

body:not(#cb) .MuiTypography-body1 {
  font-size: 15px;
  line-height: 24px;
}

/* Titre des etapes (« Se connecter », « Réinitialiser le mot de passe »…) :
   style `title` de la charte. */
body:not(#cb) .MuiTypography-h5 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
  color: var(--ink);
  margin-block: var(--space-2);
}

body:not(#cb) .MuiTypography-h6 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ink);
}

body:not(#cb) :is(.MuiTypography-caption, .MuiTypography-body2) {
  color: var(--ink-muted);
}

/* ── Carte des etapes de connexion ──────────────────────────────────────── */

body:not(#cb) [id$="-stage"] > .MuiContainer-root {
  margin-block: var(--space-6);
  padding-block: var(--space-8);
  background-color: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

@media (max-width: 479px) {
  body:not(#cb) [id$="-stage"] > .MuiContainer-root {
    width: calc(100% - 2 * var(--space-4));
    padding-block: var(--space-6);
    padding-inline: var(--space-6);
  }
}

/* Barre du haut (choix de la langue) */
body:not(#cb) .MuiAppBar-colorTransparent {
  color: var(--ink-muted);
  box-shadow: none;
}

body:not(#cb) .MuiAppBar-colorTransparent .MuiTypography-root {
  color: var(--ink-muted);
}

/* Pastille de l'utilisateur connecte (menu du compte) */
body:not(#cb) .MuiAvatar-root {
  background-color: var(--surface-sunken);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Barre du haut des pages de reglages */
body:not(#cb) .MuiAppBar-colorPrimary {
  background-color: var(--surface-raised);
  background-image: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* ── Boutons : Button de la charte ──────────────────────────────────────── */

body:not(#cb) .MuiButton-root {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

body:not(#cb) .MuiButton-root:hover {
  box-shadow: none;
}

/* Primaire : un seul par ecran (« Se connecter », « Accepter »…) */
body:not(#cb) .MuiButton-containedPrimary {
  background-color: var(--roast);
  color: var(--on-roast);
}

body:not(#cb) .MuiButton-containedPrimary:hover {
  background-color: var(--roast-strong);
}

/* Secondaire (« Annuler », « Refuser »…). Authelia met certains boutons
   d'annulation en couleur primaire : on les reconnait a leur id pour garder un
   seul bouton roast par ecran. */
body:not(#cb) :is(.MuiButton-containedSecondary, .MuiButton-containedInherit, .MuiButton-outlined,
  #cancel-button, #openid-consent-deny, #device-selection-back, #dialog-cancel, #dialog-close,
  #password-change-dialog-cancel) {
  background-color: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line-strong);
}

body:not(#cb) :is(.MuiButton-containedSecondary, .MuiButton-containedInherit, .MuiButton-outlined,
  #cancel-button, #openid-consent-deny, #device-selection-back, #dialog-cancel, #dialog-close,
  #password-change-dialog-cancel):hover {
  background-color: var(--surface-raised);
  color: var(--roast);
  border-color: var(--roast);
}

/* Discret */
body:not(#cb) .MuiButton-text {
  background-color: transparent;
  color: var(--roast);
}

body:not(#cb) .MuiButton-text:hover {
  background-color: var(--surface-sunken);
}

body:not(#cb) .MuiButton-root.Mui-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Pas d'onde au clic : la charte limite les transitions aux couleurs. */
body:not(#cb) .MuiTouchRipple-root {
  display: none;
}

body:not(#cb) .MuiIconButton-root {
  color: var(--ink-muted);
  transition: background-color 150ms, color 150ms;
}

body:not(#cb) .MuiIconButton-root:hover {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

/* ── Focus clavier : 2 px plein en focus-ring, decale de 2 px ───────────── */

body:not(#cb) :is(.MuiButtonBase-root, .MuiLink-root, a):focus-visible,
body:not(#cb) .MuiButtonBase-root.Mui-focusVisible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Dans un menu deroulant, l'anneau decale serait rogne par le bord du menu. */
body:not(#cb) .MuiMenuItem-root:is(:focus-visible, .Mui-focusVisible) {
  outline-offset: -2px;
}

/* ── Champs ─────────────────────────────────────────────────────────────── */

body:not(#cb) .MuiOutlinedInput-root {
  background-color: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-sm);
}

body:not(#cb) .MuiInputBase-input {
  color: var(--ink);
  caret-color: var(--ink);
}

body:not(#cb) .MuiOutlinedInput-notchedOutline {
  border-color: var(--line-strong);
  transition: border-color 150ms;
}

body:not(#cb) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--ink-muted);
}

body:not(#cb) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--focus-ring);
  border-width: 2px;
}

body:not(#cb) .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--danger);
}

body:not(#cb) .MuiInputLabel-root {
  color: var(--ink-muted);
  transition: color 150ms;
}

body:not(#cb) .MuiInputLabel-root.Mui-focused {
  color: var(--focus-ring);
}

body:not(#cb) :is(.MuiInputLabel-root, .MuiFormHelperText-root).Mui-error {
  color: var(--danger);
}

body:not(#cb) .MuiFormHelperText-root {
  color: var(--ink-muted);
}

/* Remplissage automatique du navigateur : pas de fond jaune ou bleu. */
body:not(#cb) input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--surface-raised) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}

body:not(#cb) :is(.MuiCheckbox-root, .MuiRadio-root) {
  color: var(--ink-muted);
}

body:not(#cb) :is(.MuiCheckbox-root, .MuiRadio-root).Mui-checked {
  color: var(--roast);
}

/* Code TOTP (react-otp-input). La bordure rouge d'echec est posee en style
   Emotion sur `border` : le contour de la charte passe donc par une ombre
   interne pour ne pas la masquer. */
body:not(#cb) #otp-input input {
  font-family: var(--font-mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background-color: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

body:not(#cb) #otp-input input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Double authentification ────────────────────────────────────────────── */

/* Cadre de la methode (Authelia : bordure #d6d6d6 en dur) : filet de la charte,
   pas d'ombre puisqu'il est deja pose sur la carte. */
body:not(#cb) .MuiBox-root:has(> :is(#password-method, #one-time-password-method, #webauthn-method, #push-notification-method)) {
  border-color: var(--line);
  border-radius: var(--radius-md);
}

/* Textes « appareil non enregistre » (bleu #5858ff en dur) */
body:not(#cb) #2fa-container .MuiTypography-root {
  color: var(--ink);
}

/* Minuteur du code TOTP (noir et blanc en dur) : graphisme en roast. Les
   proprietes CSS passent devant les attributs fill/stroke du SVG. */
body:not(#cb) [id$="-stage"] svg[viewBox="0 0 26 26"] circle[r="12"] {
  stroke: var(--roast);
}

body:not(#cb) [id$="-stage"] svg[viewBox="0 0 26 26"] circle[r="9"] {
  fill: var(--roast);
}

body:not(#cb) [id$="-stage"] svg[viewBox="0 0 26 26"] circle[r="5"] {
  stroke: var(--on-roast);
}

/* ── Consentement OIDC ──────────────────────────────────────────────────── */

/* Liste des autorisations demandees (fond background.paper du theme MUI,
   blanc ou gris neutre) : zone en retrait de la charte. */
body:not(#cb) .MuiList-root:has(> [id^="scope-"]) {
  padding: var(--space-2);
  background-color: var(--surface-sunken);
  border-radius: var(--radius-md);
}

body:not(#cb) .MuiListItemIcon-root {
  color: var(--ink-muted);
}

body:not(#cb) .MuiListItemText-primary {
  color: var(--ink);
}

/* ── Liens ──────────────────────────────────────────────────────────────── */

body:not(#cb) .MuiLink-root {
  color: var(--circuit);
  text-decoration-color: currentColor;
}

/* « Propulsé par Authelia » : legende discrete en pied de carte */
body:not(#cb) a.MuiLink-root[href="https://www.authelia.com"] {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}

/* Sa cellule ne fait qu'un tiers de la carte : sur mobile la mention passait
   sur deux lignes. */
body:not(#cb) .MuiGrid-root:has(> a.MuiLink-root[href="https://www.authelia.com"]) {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
}

/* ── Surfaces : menus, fenetres, cartes des reglages ────────────────────── */

body:not(#cb) .MuiPaper-root:not(.MuiAppBar-root, .MuiAlert-root) {
  background-color: var(--surface-raised);
  background-image: none;
  color: var(--ink);
}

body:not(#cb) :is(.MuiMenu-paper, .MuiPopover-paper) {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

body:not(#cb) .MuiDialog-paper {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

body:not(#cb) :is(.MuiCard-root, .MuiPaper-outlined) {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

body:not(#cb) .MuiMenuItem-root:hover {
  background-color: var(--surface-sunken);
}

body:not(#cb) .MuiMenuItem-root.Mui-selected,
body:not(#cb) .MuiMenuItem-root.Mui-selected:hover {
  background-color: var(--surface-sunken);
  font-weight: 600;
}

body:not(#cb) .MuiDivider-root {
  border-color: var(--line);
}

body:not(#cb) .MuiTooltip-tooltip {
  background-color: var(--ink);
  color: var(--surface);
  font-size: 13px;
  line-height: 18px;
}

body:not(#cb) .MuiCircularProgress-root {
  color: var(--roast);
}

/* ── Alertes : structure Notice de la charte (fond -soft, filet de couleur,
      texte en ink). La couleur n'est jamais seule : Authelia garde l'icone
      et le message. ───────────────────────────────────────────────────── */

body:not(#cb) .MuiAlert-root {
  --cb-fg: var(--circuit);
  --cb-bg: var(--circuit-soft);
  background-color: var(--cb-bg);
  color: var(--ink);
  border: 0;
  border-left: 4px solid var(--cb-fg);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 15px;
  line-height: 22px;
}

body:not(#cb) .MuiAlert-root .MuiAlert-icon {
  color: var(--cb-fg);
}

body:not(#cb) :is(.MuiAlert-colorSuccess, .MuiAlert-standardSuccess, .MuiAlert-filledSuccess, .MuiAlert-outlinedSuccess) {
  --cb-fg: var(--success);
  --cb-bg: var(--success-soft);
}

body:not(#cb) :is(.MuiAlert-colorWarning, .MuiAlert-standardWarning, .MuiAlert-filledWarning, .MuiAlert-outlinedWarning) {
  --cb-fg: var(--warning);
  --cb-bg: var(--warning-soft);
}

body:not(#cb) :is(.MuiAlert-colorError, .MuiAlert-standardError, .MuiAlert-filledError, .MuiAlert-outlinedError) {
  --cb-fg: var(--danger);
  --cb-bg: var(--danger-soft);
}

/* ── Mouvement ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body:not(#cb) * {
    transition: none !important;
  }
}