/* ============================================================
   CD54 Billard — Webmail SOGo theme
   Refonte complète : design system Editorial Clean
   - Palette rouge CD54 #DD183B + crème #FFEDE6
   - Polices Outfit (titres) + Inter (texte)
   - Toggle clair/sombre/auto via classes html.cd54-light|dark|auto
   - Page login : split-screen 2026, toujours en clair
   - Mode sombre : warm charcoal (PAS navy), rouge vif #FF2D52
   ============================================================ */

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

/* ============================================================
   VARIABLES CSS
   ============================================================ */

:root {
  /* Couleurs primaires CD54 */
  --cd54-primary: #DD183B;
  --cd54-primary-dark: #b81432;
  --cd54-primary-light: #ff2d52;
  --cd54-gradient-red: linear-gradient(135deg, #DD183B 0%, #b81432 100%);
  --cd54-gradient-red-bright: linear-gradient(135deg, #FF2D52 0%, #DD183B 100%);

  /* Palette LIGHT (par défaut) */
  --cd54-bg: #FFEDE6;
  --cd54-bg-elevated: #FFFFFF;
  --cd54-card: #FFFFFF;
  --cd54-card-elevated: #FFFFFF;
  --cd54-text: #1a1a2e;
  --cd54-text-muted: #6B7280;
  --cd54-text-strong: #0f0f1a;
  --cd54-border: #f3f4f6;
  --cd54-border-strong: #e5e7eb;
  --cd54-hover: rgba(221, 24, 59, 0.06);
  --cd54-selected: rgba(221, 24, 59, 0.12);
  --cd54-accent: #DD183B;
  --cd54-accent-bright: #DD183B;
  --cd54-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --cd54-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --cd54-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);
  --cd54-shadow-red: 0 8px 24px rgba(221, 24, 59, 0.4);

  /* Tokens */
  --cd54-radius-card: 16px;
  --cd54-radius-input: 10px;
  --cd54-font-title: 'Outfit', system-ui, -apple-system, sans-serif;
  --cd54-font-text: 'Inter', system-ui, -apple-system, sans-serif;
  --cd54-transition: all 0.2s ease;
  --cd54-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Palette DARK — inspirée de NlightN22/sogo-dark-red MAIS avec le rouge
   CD54 brand (#DD183B) plus marqué que le bordeaux #690000 du thème
   d'origine. Fonds gris-warm chaleureux (#202020 / #2C2525) qui amènent
   de la vie à l'écran (vs un noir-warm trop éteint).

   - Background page  : #202020 (warm gris)
   - Cards/élévations : #2C2525 (warm brown subtle)
   - Hover            : #3D2E2E (warm brown intermediate, façon sogo-dark-red)
   - Selected         : rouge CD54 translucide MARQUÉ (0.22)
   - Accent           : #DD183B (rouge CD54 brand pur, pas le #FF2D52)

   S'applique pour tous les modes où data-cd54-effective-theme="dark". */
html[data-cd54-effective-theme="dark"] {
  --cd54-bg: #202020;
  --cd54-bg-elevated: #2C2525;
  --cd54-card: #2C2525;
  --cd54-card-elevated: #382E2E;
  --cd54-text: #f0e8e4;
  --cd54-text-muted: #a59996;
  --cd54-text-strong: #ffffff;
  --cd54-border: #3d2e2e;
  --cd54-border-strong: #4d3838;
  --cd54-hover: rgba(221, 24, 59, 0.14);
  --cd54-selected: rgba(221, 24, 59, 0.22);
  --cd54-accent: #DD183B;
  --cd54-accent-bright: #FF2D52;
  --cd54-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --cd54-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.55);
  --cd54-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   BASE
   ============================================================ */

html, body,
.md-default-theme,
body.md-default-theme {
  font-family: var(--cd54-font-text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: var(--cd54-text) !important;
  background-color: var(--cd54-bg) !important;
}

body, md-content,
.md-default-theme md-content,
md-content.md-default-theme {
  background-color: var(--cd54-bg) !important;
  color: var(--cd54-text) !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.3);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(221, 24, 59, 0.4);
  background-clip: padding-box;
}

html[data-cd54-effective-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(168, 160, 156, 0.25);
  background-clip: padding-box;
}

h1, h2, h3, h4, h5, h6,
.md-title, .md-headline, .md-display-1, .md-display-2, .md-display-3,
md-toolbar h1, md-toolbar h2, md-toolbar h3,
md-dialog-content h1, md-dialog-content h2, md-dialog-content h3 {
  font-family: var(--cd54-font-title) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.md-button, button, input, select, textarea,
.md-subhead, .md-body-1, .md-body-2, .md-caption {
  font-family: var(--cd54-font-text) !important;
}

/* ============================================================
   TOOLBAR PRINCIPALE (Direction A — Editorial Clean)
   Fond crème/warm-dark, séparateur rouge fin, accent rouge contenu.
   Le rouge n'est plus le background mais un *accent* (border, hover,
   icônes, point notif). Cohérent avec cd54-billard.com.
   Cible UNIQUEMENT la top toolbar (md-tall ou première md-toolbar) :
   les md-toolbar internes (sidebar header user, dialogs) ont leur
   propre style ailleurs.
   ============================================================ */

md-toolbar:not(.md-menu-toolbar),
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar.md-primary,
.md-default-theme md-toolbar.md-primary,
md-toolbar.md-tall,
md-toolbar.md-default-theme.md-primary {
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
  box-shadow: var(--cd54-shadow-sm) !important;
  border: none !important;
  border-bottom: 2px solid var(--cd54-primary) !important;
}

/* Re-rouge les md-toolbar internes (header user sidebar) — overrides
   plus loin dans le fichier les remettent en gradient rouge si besoin. */

md-toolbar .md-toolbar-tools,
md-toolbar.md-default-theme .md-toolbar-tools {
  color: var(--cd54-text) !important;
}

md-toolbar .md-toolbar-tools h1,
md-toolbar .md-toolbar-tools h2,
md-toolbar .md-toolbar-tools h3,
md-toolbar .md-toolbar-tools span,
md-toolbar .md-toolbar-tools .md-toolbar-tools-text {
  color: var(--cd54-text) !important;
  font-family: var(--cd54-font-title) !important;
  font-weight: 600 !important;
}

md-toolbar .md-toolbar-tools .md-button,
md-toolbar .md-button,
md-toolbar.md-default-theme .md-button {
  color: var(--cd54-text-muted) !important;
  border-radius: 50% !important;
  transition: var(--cd54-transition) !important;
}

md-toolbar .md-button:hover,
md-toolbar .md-button.md-focused {
  background: var(--cd54-hover) !important;
  color: var(--cd54-primary) !important;
}

md-toolbar md-icon,
md-toolbar .md-icon,
md-toolbar svg,
md-toolbar .material-icons {
  color: var(--cd54-text-muted) !important;
  fill: var(--cd54-text-muted) !important;
}

md-toolbar .md-button:hover md-icon,
md-toolbar .md-button:hover svg,
md-toolbar .md-button:hover .material-icons {
  color: var(--cd54-primary) !important;
  fill: var(--cd54-primary) !important;
}

/* Bloc date à gauche : "MARDI AVRIL 2026" + grand "07"
   Réduction du "07" géant → chip date plus discrète, accent rouge.
   On garde la mise en page d'origine mais en plus petit + couleur. */
md-toolbar .sg-date-group,
md-toolbar div[layout="column"][layout-align*="space-between"] {
  padding-right: 8px !important;
}

md-toolbar .sg-day,
md-toolbar .sg-month,
md-toolbar .sg-year,
md-toolbar .sg-current-day,
md-toolbar .sg-current-month,
md-toolbar .day-number,
md-toolbar .day,
md-toolbar .month,
md-toolbar .weekday,
md-toolbar .year,
md-toolbar div[layout="column"] > p,
md-toolbar div[layout="column"] > span {
  font-family: var(--cd54-font-text) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--cd54-text-muted) !important;
  text-shadow: none !important;
  margin: 0 !important;
}

md-toolbar .sg-date-today,
md-toolbar .sg-md-display-3,
md-toolbar .big-date,
md-toolbar p.sg-date-today {
  font-family: var(--cd54-font-title) !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  color: var(--cd54-primary) !important;
  text-shadow: none !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
}

/* Search bar "Réception" : fond neutre subtil, accent rouge au focus */
md-toolbar input,
md-toolbar md-input-container input,
md-toolbar .sg-search input,
md-toolbar md-input-container.md-default-theme input {
  background: var(--cd54-bg) !important;
  border-radius: var(--cd54-radius-input) !important;
  color: var(--cd54-text) !important;
  border: 1px solid var(--cd54-border-strong) !important;
  padding: 8px 14px !important;
  transition: var(--cd54-transition) !important;
}

md-toolbar input::placeholder,
md-toolbar input::-webkit-input-placeholder {
  color: var(--cd54-text-muted) !important;
}

md-toolbar input:focus {
  background: var(--cd54-bg-elevated) !important;
  border-color: var(--cd54-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(221, 24, 59, 0.12) !important;
}

md-toolbar md-input-container .md-input,
md-toolbar md-input-container input.md-input {
  border-bottom-color: var(--cd54-border-strong) !important;
}

md-toolbar md-input-container label,
md-toolbar md-input-container .md-placeholder {
  color: var(--cd54-text-muted) !important;
}

/* (Ancienne règle .cd54-toolbar-logo supprimée — le logo CD54 n'est
   plus injecté dans la top toolbar, cf. feedback David 2026-04-08) */

/* ============================================================
   WIDGET MÉTÉO + HORLOGE (cd54-weather.js)
   Conteneur column à gauche de sg-toolbar-group-1, avant le bouton
   fullscreen. Deux lignes empilées :
     - Ligne 1 : météo (emoji + temp, cliquable vers Météo France)
     - Ligne 2 : horloge (icône + HH:MM)
   Harmonisé verticalement avec le bloc date "MARDI/AVRIL/2026" à droite.
   ============================================================ */
md-toolbar .cd54-weather-clock {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 14px 0 8px !important;
  padding: 4px 10px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* Ligne météo — cliquable, léger hover rouge */
md-toolbar .cd54-weather-clock .cd54-weather-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  color: var(--cd54-text) !important;
  font-family: var(--cd54-font-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--cd54-transition) !important;
  white-space: nowrap !important;
}

md-toolbar .cd54-weather-clock .cd54-weather-row:hover {
  background-color: var(--cd54-hover) !important;
  color: var(--cd54-accent) !important;
  transform: translateY(-1px) !important;
}

md-toolbar .cd54-weather-clock .cd54-weather-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

md-toolbar .cd54-weather-clock .cd54-weather-temp {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

/* Ligne horloge — discrète, non cliquable */
md-toolbar .cd54-weather-clock .cd54-clock-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  color: var(--cd54-text-muted) !important;
  font-family: var(--cd54-font-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

md-toolbar .cd54-weather-clock .cd54-clock-icon {
  color: var(--cd54-accent) !important;
  flex-shrink: 0 !important;
}

md-toolbar .cd54-weather-clock .cd54-clock-time {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
  color: var(--cd54-text) !important;
}

/* Responsive */
@media (max-width: 782px) {
  md-toolbar .cd54-weather-clock {
    margin: 0 4px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
  }
  md-toolbar .cd54-weather-clock .cd54-weather-row,
  md-toolbar .cd54-weather-clock .cd54-clock-row {
    padding: 2px 6px !important;
    font-size: 12px !important;
  }
  md-toolbar .cd54-weather-clock .cd54-weather-icon {
    font-size: 17px !important;
  }
}

@media (max-width: 480px) {
  /* Sur très petit écran : on masque l'horloge (redondant avec l'OS) */
  md-toolbar .cd54-weather-clock .cd54-clock-row {
    display: none !important;
  }
  md-toolbar .cd54-weather-clock .cd54-weather-temp {
    display: none !important;
  }
}

/* Bouton toggle thème dans toolbar */
.cd54-theme-toggle,
button.cd54-theme-toggle,
#cd54-theme-toggle-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 4px !important;
  color: var(--cd54-text-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--cd54-transition) !important;
  flex-shrink: 0 !important;
}

.cd54-theme-toggle:hover,
#cd54-theme-toggle-btn:hover {
  background: var(--cd54-hover) !important;
  color: var(--cd54-primary) !important;
}

.cd54-theme-toggle svg,
#cd54-theme-toggle-btn svg {
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Notification badge sur l'icône Mail (point rouge "vacation") :
   on garde le rouge accent pour le badge. */
md-toolbar .sg-icon--badge,
md-toolbar md-icon.sg-icon--badge {
  color: var(--cd54-primary) !important;
  fill: var(--cd54-primary) !important;
}

/* Icône "Réponse automatique d'absence activée" — bascule visuelle
   sur l'icône Courrier de la top toolbar quand la vacation message
   est ON. SOGo utilise par défaut "forward" (flèche) avec md-warn
   (jaune ambre) ce qui n'est pas très parlant. Notre Dockerfile
   patch UIxTopnavToolbar.wox pour la remplacer par "event_busy"
   (calendrier avec X) et ajouter la classe .cd54-vacation-icon
   pour la coloriser en rouge accent. */
md-toolbar md-icon.cd54-vacation-icon,
md-icon.cd54-vacation-icon,
md-toolbar .md-button md-icon.cd54-vacation-icon {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  /* Override de la couleur md-warn (ambre) Material */
  background: transparent !important;
}

md-toolbar .md-button:hover md-icon.cd54-vacation-icon {
  color: var(--cd54-accent-bright) !important;
  fill: var(--cd54-accent-bright) !important;
}

/* Toolbar secondaire (recherche "Réception" + filtres + refresh) :
   c'est la md-toolbar.md-accent.md-hue-1 sous la top toolbar.
   On lui applique le même style Editorial Clean. */
md-toolbar.md-accent,
md-toolbar.md-accent.md-hue-1,
md-toolbar.md-default-theme.md-accent,
md-toolbar.md-default-theme.md-accent.md-hue-1,
.md-default-theme md-toolbar.md-accent,
md-toolbar.advanced-search-clickable-toolbar,
md-toolbar.sg-toolbar-secondary,
md-toolbar.md-hue-1.sg-toolbar-secondary {
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
  box-shadow: var(--cd54-shadow-sm) !important;
  border: none !important;
  border-bottom: 1px solid var(--cd54-border-strong) !important;
}

md-toolbar.md-accent .md-toolbar-tools,
md-toolbar.md-accent.md-hue-1 .md-toolbar-tools {
  color: var(--cd54-text) !important;
}

md-toolbar.md-accent .md-toolbar-tools h1,
md-toolbar.md-accent .md-toolbar-tools h2,
md-toolbar.md-accent .md-toolbar-tools h3,
md-toolbar.md-accent .md-toolbar-tools span,
md-toolbar.md-accent .md-toolbar-tools .md-toolbar-tools-text,
md-toolbar.md-accent .md-toolbar-tools .md-input,
md-toolbar.md-accent .md-toolbar-tools input {
  color: var(--cd54-text) !important;
  font-family: var(--cd54-font-text) !important;
}

md-toolbar.md-accent input::placeholder,
md-toolbar.md-accent .md-toolbar-tools input::placeholder {
  color: var(--cd54-text-muted) !important;
}

md-toolbar.md-accent .md-button,
md-toolbar.md-accent .md-toolbar-tools .md-button {
  color: var(--cd54-text-muted) !important;
}

md-toolbar.md-accent .md-button:hover,
md-toolbar.md-accent .md-toolbar-tools .md-button:hover {
  background: var(--cd54-hover) !important;
  color: var(--cd54-primary) !important;
}

/* Sub-toolbar de la liste des messages ("Réception" + filter + sort + refresh)
   Icônes en gris muted comme sur sogo-dark-red, PAS en rouge.
   Le rouge est réservé aux icônes d'actions du message (étoile, répondre,
   transférer, supprimer) et aux icônes des dossiers sidebar. */
md-toolbar.md-accent md-icon,
md-toolbar.md-accent .md-button md-icon,
md-toolbar.md-accent .material-icons,
md-toolbar.md-accent svg {
  color: var(--cd54-text-muted) !important;
  fill: var(--cd54-text-muted) !important;
}

md-toolbar.md-accent .md-button:hover md-icon,
md-toolbar.md-accent .md-button:hover svg,
md-toolbar.md-accent .md-button:hover .material-icons {
  color: var(--cd54-text) !important;
  fill: var(--cd54-text) !important;
}

/* Recherche dans la 2e toolbar */
md-toolbar.md-accent input,
md-toolbar.md-accent md-input-container input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  color: var(--cd54-text) !important;
  padding: 8px 4px !important;
  box-shadow: none !important;
}

md-toolbar.md-accent input:focus,
md-toolbar.md-accent md-input-container input:focus {
  background: transparent !important;
  border-color: var(--cd54-primary) !important;
  box-shadow: 0 1px 0 0 var(--cd54-primary) !important;
  outline: none !important;
}

/* ============================================================
   SIDEBAR (panneau gauche : header user + dossiers)
   ============================================================ */

md-sidenav,
md-sidenav.md-default-theme,
md-sidenav.md-locked-open,
.md-sidemenu,
.sg-sidenav,
md-sidenav.md-default-theme.md-locked-open,
md-sidenav md-content,
md-sidenav.md-default-theme md-content,
.md-sidemenu md-content,
.sg-sidenav md-content,
md-sidenav .md-list,
md-sidenav .md-sidemenu-content {
  background-color: var(--cd54-card) !important;
  background: var(--cd54-card) !important;
  color: var(--cd54-text) !important;
  border-right: 1px solid var(--cd54-border) !important;
  box-shadow: var(--cd54-shadow-sm) !important;
}

/* === HEADER UTILISATEUR (avatar + nom + email + bouton préférences) ===
   Header rouge dégradé qui contraste avec la sidebar bg-elevated.
   Padding réduit à droite pour laisser de la place au bouton préférences.
   overflow visible pour ne pas couper le bouton (le clip est géré par
   la sidebar elle-même). */

md-sidenav .sg-username,
md-sidenav .user-info,
md-sidenav md-toolbar,
md-sidenav .sg-sidenav-header,
.sg-sidenav .sg-username,
md-sidenav md-toolbar.md-default-theme,
md-sidenav md-toolbar.md-tall,
md-sidenav .sg-sidenav-toolbar {
  background: var(--cd54-gradient-red) !important;
  color: #FFFFFF !important;
  padding: 16px 14px 16px 18px !important;
  box-shadow: 0 2px 12px rgba(221, 24, 59, 0.18) !important;
  font-family: var(--cd54-font-title) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 96px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* La sidebar elle-même : flex column pour que quick-links reste en bas.
   height 100% pour remplir toute la hauteur disponible. */
md-sidenav,
md-sidenav.md-default-theme,
md-sidenav.md-locked-open {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

/* Le contenu scrollable (liste des dossiers) prend l'espace restant */
md-sidenav > md-content,
md-sidenav.md-default-theme > md-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Masquer doublons logo dans sidebar */
md-sidenav .sg-logo,
md-sidenav .sg-app-logo,
md-sidenav .app-logo,
md-sidenav md-toolbar img.app-logo,
md-sidenav md-toolbar img[src*="sogo-logo"],
md-sidenav .sg-sidenav-logo,
md-sidenav .branding {
  display: none !important;
}

/* Avatar header user — remplacé par le logo CD54 (image de fond).
   Les sg-avatar-image SOGo génèrent une <md-icon>person</md-icon> par
   défaut quand il n'y a pas de gravatar. On la cache et on remplit le
   container avec le logo CD54 via background-image. */

md-sidenav md-toolbar sg-avatar-image,
md-sidenav .sg-username sg-avatar-image,
md-sidenav md-toolbar .sg-avatar,
md-sidenav .sg-username img,
md-sidenav .user-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  border-radius: 50% !important;
  background-color: #FFFFFF !important;
  background-image: url('https://cd54-billard.com/wp-content/uploads/2025/12/comite-de-billard-Logo-Transparent-scaled.png') !important;
  background-size: 78% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Cache l'icône person par défaut — le logo CD54 prend sa place via bg */
md-sidenav md-toolbar sg-avatar-image md-icon,
md-sidenav md-toolbar sg-avatar-image .material-icons,
md-sidenav md-toolbar .sg-avatar md-icon {
  display: none !important;
}

/* Wrapper interne header user en flex row : avatar + (nom+email+⚙).
   overflow:hidden + min-width:0 sur les enfants pour que l'ellipsis
   soit appliqué SUR L'EMAIL et non sur le bouton ⚙. */
md-sidenav md-toolbar .md-toolbar-tools,
md-sidenav md-toolbar.md-default-theme .md-toolbar-tools,
md-sidenav .sg-sidenav-header .md-toolbar-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Le sous-conteneur layout="row" qui contient {nom+email} + bouton ⚙
   doit prendre tout l'espace restant et laisser le bouton à droite. */
md-sidenav md-toolbar .md-toolbar-tools > div[layout="row"],
md-sidenav md-toolbar .md-toolbar-tools > div[layout-align*="space-between"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  gap: 8px !important;
}

/* Bloc texte (nom + email) — peut rétrécir, ellipsis sur l'email */
md-sidenav md-toolbar .md-toolbar-tools > div[layout="row"] > div,
md-sidenav md-toolbar .md-toolbar-tools .user-text,
md-sidenav md-toolbar .md-toolbar-tools .username-block,
md-sidenav md-toolbar .md-toolbar-tools > div:not([layout]):not(sg-avatar-image) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

md-sidenav .sg-username .name,
md-sidenav .sg-username .email,
md-sidenav .user-name,
md-sidenav .user-email,
md-sidenav .sg-sidenav-header h2,
md-sidenav .sg-sidenav-header .email,
md-sidenav md-toolbar .md-toolbar-tools span,
md-sidenav md-toolbar .md-toolbar-tools h2 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

md-sidenav .sg-username .name,
md-sidenav .user-name,
md-sidenav .sg-sidenav-header h2,
md-sidenav md-toolbar .md-toolbar-tools h2:first-of-type {
  font-family: var(--cd54-font-title) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
}

md-sidenav .sg-username .email,
md-sidenav .user-email,
md-sidenav .sg-sidenav-header .email,
md-sidenav md-toolbar .md-toolbar-tools h2:nth-of-type(2),
md-sidenav md-toolbar .md-toolbar-tools .subtitle {
  font-family: var(--cd54-font-text) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin-top: 2px !important;
}

/* Bouton ⚙ Préférences dans le header user — POSITIONNÉ EN ABSOLUTE
   à droite du sidenav header. ATTENTION : le bouton SOGo est un
   <a href="../Preferences"> directement dans md-toolbar (PAS dans
   .md-toolbar-tools), donc on ne préfixe pas avec .md-toolbar-tools. */
md-sidenav md-toolbar {
  position: relative !important;
}

md-sidenav md-toolbar a[href*="Preferences"],
md-sidenav md-toolbar .md-button[ng-href*="Preferences"] {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--cd54-transition) !important;
  z-index: 2 !important;
}

md-sidenav md-toolbar a[href*="Preferences"] md-icon,
md-sidenav md-toolbar a[href*="Preferences"] .material-icons,
md-sidenav md-toolbar a[href*="Preferences"] svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Ajuste le padding du wrapper text pour ne pas passer SOUS le bouton */
md-sidenav md-toolbar .md-toolbar-tools > div[layout="row"],
md-sidenav md-toolbar .md-toolbar-tools > div[layout-align*="space-between"] {
  padding-right: 44px !important;
}

md-sidenav md-toolbar a[href*="Preferences"]:hover,
md-sidenav md-toolbar .md-button[ng-href*="Preferences"]:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: translateY(-50%) rotate(25deg) !important;
}

/* === Bloc compte utilisateur sous le header (président@c... + quota) ===
   On garde uniquement la barre de quota lisible (label + barre + texte).
   L'email dupliqué et le menu kebab sont neutralisés visuellement. */

md-sidenav .sg-account-info,
md-sidenav .account-info,
md-sidenav .sg-quota,
md-sidenav .sg-username-line,
md-sidenav md-list-item.sg-account-content,
md-sidenav md-list-item:first-of-type {
  background-color: var(--cd54-card) !important;
  color: var(--cd54-text) !important;
  border-bottom: 1px solid var(--cd54-border) !important;
  padding: 12px 18px !important;
  font-family: var(--cd54-font-text) !important;
  font-size: 12px !important;
}

/* Barre de quota : fond gris clair, fill rouge CD54 dégradé.
   Plus épaisse (8px) pour être lisible. */
md-sidenav md-progress-linear,
md-sidenav .sg-quota-bar,
md-sidenav .quota-bar,
md-sidenav md-progress-linear.md-default-theme {
  background-color: var(--cd54-border) !important;
  border-radius: 6px !important;
  height: 8px !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}

md-sidenav md-progress-linear .md-bar,
md-sidenav md-progress-linear .md-bar2,
md-sidenav .sg-quota-bar .quota-fill {
  background-color: var(--cd54-accent) !important;
  background: var(--cd54-gradient-red) !important;
}

md-sidenav md-progress-linear .md-container {
  background-color: var(--cd54-border) !important;
}

/* === ITEMS DOSSIERS === */

md-sidenav md-list-item,
md-sidenav .md-list-item,
md-sidenav md-list-item .md-list-item-inner,
md-sidenav md-list-item._md-button-wrap > div.md-button:first-child,
md-sidenav md-list-item .md-button,
.md-sidemenu md-list-item,
.sg-sidenav md-list-item {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--cd54-text) !important;
  font-family: var(--cd54-font-text) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  transition: var(--cd54-transition) !important;
}

md-sidenav md-list-item p,
md-sidenav md-list-item span,
md-sidenav md-list-item .md-list-item-text,
md-sidenav md-list-item .sg-folder-name {
  color: var(--cd54-text) !important;
  font-family: var(--cd54-font-text) !important;
  font-weight: 500 !important;
}

/* Icônes des dossiers (Réception, Brouillons, etc.) en ROUGE accent
   par défaut comme sur sogo-dark-red. Sur hover et selected elles
   restent cohérentes (rouge plus vif ou blanc). */
md-sidenav md-list-item md-icon,
md-sidenav md-list-item .md-icon,
md-sidenav md-list-item svg,
md-sidenav md-list-item .material-icons,
md-sidenav .sg-folder-icon {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
  margin-right: 12px !important;
  transition: var(--cd54-transition) !important;
}

md-sidenav md-list-item:hover,
md-sidenav md-list-item:hover .md-button,
md-sidenav md-list-item .md-button:hover {
  background-color: var(--cd54-hover) !important;
  color: var(--cd54-accent) !important;
}

md-sidenav md-list-item:hover md-icon,
md-sidenav md-list-item:hover svg,
md-sidenav md-list-item:hover .material-icons {
  color: var(--cd54-accent-bright) !important;
  fill: var(--cd54-accent-bright) !important;
}

/* Dossier SÉLECTIONNÉ — IMPORTANT : la classe réelle SOGo est
   `md-list-item.sg-mailbox-list-item.sg-selected` (PAS `.selected`
   ni `.md-selected` !). Le `sg-selected` est ajouté par Angular
   quand `mailbox === selectedMailbox`. Fond rouge plein + texte blanc
   comme sur sogo-dark-red (cohérent avec le message selected). */
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected,
md-sidenav md-list-item.sg-selected,
md-sidenav md-list-item.selected,
md-sidenav md-list-item.md-selected,
md-sidenav md-list-item.active,
md-sidenav md-list-item._md-button-wrap.selected > div.md-button:first-child,
md-sidenav md-list-item.selected .md-button,
md-sidenav .sg-folder-selected {
  background-color: var(--cd54-accent) !important;
  background: var(--cd54-accent) !important;
  color: #FFFFFF !important;
  border-left: 3px solid var(--cd54-accent-bright) !important;
  font-weight: 600 !important;
}

md-sidenav md-list-item.sg-selected p,
md-sidenav md-list-item.sg-selected span,
md-sidenav md-list-item.sg-selected .md-list-item-text,
md-sidenav md-list-item.sg-selected .sg-folder-name,
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected p,
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected span,
md-sidenav md-list-item.selected p,
md-sidenav md-list-item.selected span,
md-sidenav md-list-item.md-selected p,
md-sidenav md-list-item.selected .md-list-item-text,
md-sidenav md-list-item.selected .sg-folder-name {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

md-sidenav md-list-item.sg-selected md-icon,
md-sidenav md-list-item.sg-selected svg,
md-sidenav md-list-item.sg-selected .material-icons,
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected md-icon,
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected svg,
md-sidenav md-list-item.selected md-icon,
md-sidenav md-list-item.selected svg,
md-sidenav md-list-item.md-selected md-icon,
md-sidenav md-list-item.selected .material-icons {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Hover sur un dossier déjà sélectionné reste rouge (un peu plus foncé) */
md-sidenav md-list-item.sg-selected:hover,
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected:hover {
  background-color: #b81432 !important;
  background: #b81432 !important;
}

md-sidenav md-list-item.sg-selected:hover md-icon,
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected:hover md-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ============================================================
   SIDEBAR EXTRAS — Liens utiles (row horizontale compacte)
   Injectés par cd54-sidebar-extras.js en bas de la sidebar.
   Format : 4 badges circulaires colorés en ligne, tooltip au survol.
   Pas de labels visibles — les logos sont auto-explicites.
   ============================================================ */
md-sidenav .cd54-quick-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 12px !important;
  border-top: 1px solid var(--cd54-border) !important;
  background-color: rgba(221, 24, 59, 0.03) !important;
  flex-shrink: 0 !important;
}

md-sidenav .cd54-quick-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  font-family: var(--cd54-font-title) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  box-shadow: var(--cd54-shadow-sm) !important;
  transition: var(--cd54-transition) !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

md-sidenav .cd54-quick-link strong {
  font-family: var(--cd54-font-title) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  color: inherit !important;
  line-height: 1 !important;
}

md-sidenav .cd54-quick-link svg {
  color: inherit !important;
  fill: currentColor !important;
}

md-sidenav .cd54-quick-link:hover {
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  filter: brightness(1.1) !important;
}

/* Responsive : badges légèrement plus petits sur sidebar étroite */
@media (max-width: 782px) {
  md-sidenav .cd54-quick-links {
    gap: 8px !important;
    padding: 12px 8px !important;
  }
  md-sidenav .cd54-quick-link {
    width: 34px !important;
    height: 34px !important;
    font-size: 10px !important;
  }
  md-sidenav .cd54-quick-link svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Compteurs / badges non lus */
md-sidenav .sg-badge,
md-sidenav .unseen-count,
md-sidenav .badge,
md-sidenav .sg-folder-count,
md-sidenav md-list-item .md-list-item-text > span:last-child:not(:first-child),
.sg-sidenav .sg-badge {
  background-color: var(--cd54-accent) !important;
  color: #FFFFFF !important;
  font-family: var(--cd54-font-text) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 16px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(221, 24, 59, 0.3) !important;
  border: none !important;
  display: inline-block !important;
  margin-left: 8px !important;
}

/* ============================================================
   LISTE DES MESSAGES (colonne centrale)
   ============================================================ */

.message-list,
.md-virtual-repeat-container,
.sg-message-list,
md-content.view-content,
md-content.message-list,
.message-list md-content,
.sg-message-list md-content,
.mailbox-list,
.md-virtual-repeat-scroller {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
}

.message-list md-list-item,
.sg-message-list md-list-item,
.md-virtual-repeat-container md-list-item,
md-list-item.sg-message,
.mailbox-list md-list-item,
.md-virtual-repeat-container .message {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
  border-bottom: 1px solid var(--cd54-border) !important;
  border-left: 3px solid transparent !important;
  padding: 14px 16px !important;
  min-height: 72px !important;
  transition: var(--cd54-transition) !important;
  font-family: var(--cd54-font-text) !important;
}

.message-list md-list-item:hover,
.sg-message-list md-list-item:hover,
md-list-item.sg-message:hover,
.md-virtual-repeat-container .message:hover {
  background-color: var(--cd54-hover) !important;
}

/* Message en cours de lecture (selected) — fond ROUGE PLEIN saturé
   comme sur sogo-dark-red, avec texte BLANC. C'est l'état le plus
   marqué : on doit voir d'un coup d'œil quel message est ouvert
   dans la zone de lecture à droite.

   IMPORTANT : la classe SOGo réelle est `md-list-item.sg-message-list-item.md-accent`
   (PAS `.selected` ni `.md-selected` !). Le `md-accent` est ajouté par Angular
   quand `mailbox.selectedMessage === currentMessage`. */
md-list-item.sg-message-list-item.md-accent,
md-list-item.sg-message-list-item.md-default-theme.md-accent,
.message-list md-list-item.sg-message-list-item.md-accent,
.message-list md-list-item.selected,
.message-list md-list-item.md-selected,
.sg-message-list md-list-item.selected,
md-list-item.sg-message.selected,
tr.selected,
.message.selected,
.md-virtual-repeat-container .message.selected {
  background-color: var(--cd54-accent) !important;
  background: var(--cd54-accent) !important;
  border-left: 3px solid var(--cd54-accent-bright) !important;
  color: #FFFFFF !important;
}

/* Texte blanc sur fond rouge pour le message selected (toutes
   les variantes de classe possibles) */
md-list-item.sg-message-list-item.md-accent .sender,
md-list-item.sg-message-list-item.md-accent .subject,
md-list-item.sg-message-list-item.md-accent .from,
md-list-item.sg-message-list-item.md-accent .preview,
md-list-item.sg-message-list-item.md-accent .date,
md-list-item.sg-message-list-item.md-accent .time,
md-list-item.sg-message-list-item.md-accent p,
md-list-item.sg-message-list-item.md-accent span,
md-list-item.sg-message-list-item.md-accent .sg-sender,
md-list-item.sg-message-list-item.md-accent .sg-message-sender,
md-list-item.sg-message-list-item.md-accent .sg-message-subject,
md-list-item.sg-message-list-item.md-accent .sg-message-date,
md-list-item.sg-message-list-item.md-accent .sg-message-preview,
md-list-item.sg-message-list-item.md-accent .md-list-item-text,
md-list-item.sg-message-list-item.md-accent .md-list-item-text > *,
.message-list md-list-item.selected .sender,
.message-list md-list-item.selected .subject,
.message-list md-list-item.selected .from,
.message-list md-list-item.selected .preview,
.message-list md-list-item.selected .date,
.message-list md-list-item.selected .time,
.message-list md-list-item.selected p,
.message-list md-list-item.selected span,
.message-list md-list-item.selected .sg-sender,
.message-list md-list-item.selected .sg-message-sender,
.message-list md-list-item.selected .sg-message-subject,
.message-list md-list-item.selected .sg-message-date,
.message-list md-list-item.selected .sg-message-preview,
.sg-message-list md-list-item.selected .sender,
.sg-message-list md-list-item.selected .subject,
.sg-message-list md-list-item.selected p,
.sg-message-list md-list-item.selected span {
  color: #FFFFFF !important;
}

/* Icônes (attachment, etc.) du message selected en blanc */
md-list-item.sg-message-list-item.md-accent md-icon,
md-list-item.sg-message-list-item.md-accent .material-icons,
md-list-item.sg-message-list-item.md-accent svg,
.message-list md-list-item.selected md-icon,
.message-list md-list-item.selected .material-icons,
.message-list md-list-item.selected svg,
md-list-item.sg-message.selected md-icon,
md-list-item.sg-message.selected svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Le hover SUR un message déjà selected reste en rouge (légèrement plus foncé) */
md-list-item.sg-message-list-item.md-accent:hover,
.message-list md-list-item.selected:hover,
.sg-message-list md-list-item.selected:hover,
md-list-item.sg-message.selected:hover {
  background-color: #b81432 !important;
  background: #b81432 !important;
}

.message-list .sender,
.message-list .sg-sender,
.sg-message .sender,
md-list-item .sg-message-sender,
.message-list .from,
.md-virtual-repeat-container .from {
  font-family: var(--cd54-font-text) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--cd54-text) !important;
}

.message-list .date,
.sg-message .date,
md-list-item .sg-message-date,
.message-list .time,
.md-virtual-repeat-container .date {
  font-family: var(--cd54-font-text) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--cd54-text-muted) !important;
}

.message-list .subject,
.sg-message .subject,
md-list-item .sg-message-subject,
.md-virtual-repeat-container .subject {
  font-family: var(--cd54-font-text) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--cd54-text) !important;
  line-height: 1.4 !important;
}

.message-list .preview,
.sg-message .preview,
md-list-item .sg-message-preview {
  font-family: var(--cd54-font-text) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--cd54-text-muted) !important;
}

.unseen, .sg-unread, md-list-item.unseen,
.message-list md-list-item.unseen .sender,
.message-list md-list-item.unseen .subject,
.sg-unread .sender, .sg-unread .subject {
  font-weight: 700 !important;
  color: var(--cd54-text-strong) !important;
}

.message-list md-list-item.unseen,
md-list-item.sg-message.unseen { position: relative !important; }

.message-list md-list-item.unseen::before,
md-list-item.sg-message.unseen::before {
  content: '' !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--cd54-accent) !important;
  margin-top: -4px !important;
  box-shadow: 0 0 0 2px rgba(221, 24, 59, 0.18) !important;
}

.message-list .avatar,
.sg-message .avatar,
md-list-item .sg-avatar,
.md-virtual-repeat-container .avatar {
  border-radius: 50% !important;
  background-color: var(--cd54-border) !important;
  width: 40px !important;
  height: 40px !important;
}

.message-list .attachment-icon,
.sg-message .attachment,
md-icon.sg-attachment {
  color: var(--cd54-text-muted) !important;
  fill: var(--cd54-text-muted) !important;
}

/* ============================================================
   UNIFORMISATION DES 3 COLONNES
   Inspiré du thème sogo-dark-red qui redéfinit la palette Material
   complète (primary, accent, hue-1/2/3) au lieu de cibler des classes
   SOGo spécifiques.

   Ici on applique var(--cd54-bg-elevated) à TOUTES les md-content
   Material quelles que soient leurs hues, + aux conteneurs de
   colonnes (main.view, section, .view-detail). Résultat : les 3
   colonnes (sidebar / liste des messages / zone de lecture) ont
   EXACTEMENT le même fond, sans aucun palier.

   Le fond principal --cd54-bg (plus sombre en dark) reste réservé à
   la toolbar principale du haut et au body fallback.
   ============================================================ */

/* 1. Tous les md-content Material en général → bg-elevated */
md-content,
md-content.md-default-theme,
md-content.md-hue-1,
md-content.md-hue-2,
md-content.md-hue-3,
md-content.md-default-theme.md-hue-1,
md-content.md-default-theme.md-hue-2,
md-content.md-default-theme.md-hue-3 {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
}

/* 2. Conteneur principal des 3 colonnes : main.view + ses sections */
main.view,
main.view.md-default-theme,
main.view.md-background,
main.view.md-background.md-hue-1,
main.view.md-background.md-hue-2,
main.view.md-background.md-hue-3,
main.view.md-bg,
section.layout-fill,
section.layout-fill > div.md-flex,
section.layout-fill > div.layout-row {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
}

/* 3. Panneau droit (zone de lecture) : conteneur .view-detail
   IMPORTANT : en mode SOMBRE, le panneau droit est forcé en BLANC
   avec texte sombre comme sur sogo-dark-red (contraste volontaire
   entre sidebar/liste sombre et zone de lecture claire).
   On override les variables CSS uniquement dans ce sous-arbre. */
.view-content,
.sg-message-view,
md-content.sg-message-view,
.message-content,
.mailer-mail-view,
.sg-mail-view,
.view-detail,
div.view-detail.sg-block-print,
.view-detail md-content,
.view-detail > md-content,
.view-detail md-content.md-flex {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
}

/* En mode SOMBRE : panneau droit passe en CLAIR (blanc + texte sombre)
   pour harmoniser avec le rendu sogo-dark-red. On redéfinit les variables
   CSS localement dans le sous-arbre .view-detail → tous les enfants qui
   utilisent var(--cd54-bg-elevated), var(--cd54-text), etc. vont suivre. */
html[data-cd54-effective-theme="dark"] div.view-detail,
html[data-cd54-effective-theme="dark"] .view-detail,
html[data-cd54-effective-theme="dark"] .sg-message-view,
html[data-cd54-effective-theme="dark"] md-content.sg-message-view,
html[data-cd54-effective-theme="dark"] .mailer-mail-view,
html[data-cd54-effective-theme="dark"] .sg-mail-view {
  --cd54-bg: #FFFFFF;
  --cd54-bg-elevated: #FFFFFF;
  --cd54-card: #FFFFFF;
  --cd54-card-elevated: #fafafa;
  --cd54-text: #1a1a2e;
  --cd54-text-muted: #6B7280;
  --cd54-text-strong: #0f0f1a;
  --cd54-border: #f3f4f6;
  --cd54-border-strong: #e5e7eb;
  --cd54-hover: rgba(221, 24, 59, 0.08);
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #1a1a2e !important;
}

/* Forcer les descendants blancs/sombres en mode dark (cards, toolbars,
   headers, metadonnees, contenu) */
html[data-cd54-effective-theme="dark"] .view-detail md-content,
html[data-cd54-effective-theme="dark"] .view-detail > md-content,
html[data-cd54-effective-theme="dark"] .view-detail md-content.md-flex,
html[data-cd54-effective-theme="dark"] .view-detail md-card,
html[data-cd54-effective-theme="dark"] .view-detail md-card-content,
html[data-cd54-effective-theme="dark"] .view-detail md-card-header,
html[data-cd54-effective-theme="dark"] .view-detail md-toolbar,
html[data-cd54-effective-theme="dark"] .view-detail .sg-mail-part,
html[data-cd54-effective-theme="dark"] .view-detail .sg-mail-part > div,
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-view-header,
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-headers {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #1a1a2e !important;
}

/* Texte sombre sur le panneau droit en mode dark */
html[data-cd54-effective-theme="dark"] .view-detail,
html[data-cd54-effective-theme="dark"] .view-detail h1,
html[data-cd54-effective-theme="dark"] .view-detail h2,
html[data-cd54-effective-theme="dark"] .view-detail h3,
html[data-cd54-effective-theme="dark"] .view-detail p,
html[data-cd54-effective-theme="dark"] .view-detail span:not(.md-icon):not(.material-icons),
html[data-cd54-effective-theme="dark"] .view-detail div,
html[data-cd54-effective-theme="dark"] .view-detail .md-headline,
html[data-cd54-effective-theme="dark"] .view-detail .md-subhead,
html[data-cd54-effective-theme="dark"] .view-detail .md-body-1,
html[data-cd54-effective-theme="dark"] .view-detail .sg-mail-part,
html[data-cd54-effective-theme="dark"] .view-detail .sg-mail-part * {
  color: #1a1a2e !important;
}

/* Métadonnées (from, to, date) en texte gris */
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-view-header,
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-headers,
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-view .date,
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-view .from,
html[data-cd54-effective-theme="dark"] .view-detail .sg-message-view .to,
html[data-cd54-effective-theme="dark"] .view-detail .md-caption {
  color: #6B7280 !important;
}

/* Liens en rouge CD54 sur le panneau blanc */
html[data-cd54-effective-theme="dark"] .view-detail a,
html[data-cd54-effective-theme="dark"] .view-detail a:link,
html[data-cd54-effective-theme="dark"] .view-detail a:visited {
  color: var(--cd54-accent) !important;
}

/* Bordures claires en mode dark pour le panneau droit */
html[data-cd54-effective-theme="dark"] .view-detail md-card,
html[data-cd54-effective-theme="dark"] .view-detail md-card-header,
html[data-cd54-effective-theme="dark"] .view-detail md-toolbar {
  border-color: #e5e7eb !important;
}

.no-message-selected,
.empty-state,
.sg-no-message {
  font-family: var(--cd54-font-title) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--cd54-text-muted) !important;
  text-align: center !important;
}

/* Header du message ouvert (titre + date + destinataires) */
.sg-message-view .md-headline,
.sg-message-view h1,
.sg-message-view h2,
.mailer-mail-view h1,
.mailer-mail-view h2 {
  font-family: var(--cd54-font-title) !important;
  font-weight: 700 !important;
  color: var(--cd54-text-strong) !important;
}

.sg-message-view .date,
.sg-message-view .from,
.sg-message-view .to,
.sg-message-view .subject,
.mailer-mail-view .meta {
  color: var(--cd54-text-muted) !important;
  font-family: var(--cd54-font-text) !important;
}

/* Pillules destinataires (md-chip) — alignement vertical du texte
   IMPORTANT : SOGo applique `display: block` sur md-chip ce qui empêche
   l'alignement vertical du texte. On force `inline-flex` + `align-items:
   center` pour que le texte soit bien centré sur la hauteur du chip. */
.recipient-chip,
md-chips md-chip,
md-chips-wrap md-chip,
md-chips.md-readonly md-chip,
md-chips-wrap.md-readonly md-chip,
.sg-recipient,
.sg-message-view .chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--cd54-hover) !important;
  color: var(--cd54-accent) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  margin: 4px 6px 4px 0 !important;
  min-height: 28px !important;
  height: auto !important;
  font-family: var(--cd54-font-text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  border: 1px solid rgba(221, 24, 59, 0.22) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Le wrapper flex des chips pour les destinataires multiples */
md-chips-wrap,
md-chips-wrap.md-chips,
md-chips-wrap.md-chips.md-readonly,
.md-chips,
.md-chips.md-readonly {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

/* Le contenu interne du chip (texte) */
md-chip > .md-chip-content,
md-chip .md-chip-content,
md-chips md-chip .md-chip-content {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}

/* Actions du message ouvert (étoile, marqueur, répondre, transférer,
   supprimer, call_split, open_in_new, more_vert).
   IMPORTANT : dans SOGo les boutons d'action sont des `button.sg-icon-button`
   directement dans `md-card-actions` ou `md-menu`, PAS dans md-toolbar.
   Il faut donc cibler `.sg-icon-button` directement. */
md-card-actions button.sg-icon-button,
md-card-actions .sg-icon-button,
md-menu button.sg-icon-button,
.view-detail .sg-icon-button,
button.sg-icon-button.md-button {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
}

md-card-actions button.sg-icon-button md-icon,
md-card-actions .sg-icon-button md-icon,
md-card-actions .sg-icon-button .material-icons,
md-card-actions .sg-icon-button svg,
md-menu button.sg-icon-button md-icon,
md-menu button.sg-icon-button .material-icons,
.view-detail .sg-icon-button md-icon,
button.sg-icon-button md-icon,
button.sg-icon-button .material-icons,
button.sg-icon-button svg {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
}

md-card-actions button.sg-icon-button:hover,
md-menu button.sg-icon-button:hover,
.view-detail .sg-icon-button:hover,
button.sg-icon-button:hover {
  background: var(--cd54-hover) !important;
}

md-card-actions button.sg-icon-button:hover md-icon,
md-card-actions button.sg-icon-button:hover .material-icons,
md-menu button.sg-icon-button:hover md-icon,
button.sg-icon-button:hover md-icon,
button.sg-icon-button:hover .material-icons {
  color: var(--cd54-accent-bright) !important;
  fill: var(--cd54-accent-bright) !important;
}

/* Bouton fullscreen (md-primary.md-hue-1) du message ouvert en rouge accent */
md-card-actions button.md-primary,
md-card-actions button.md-primary.md-hue-1,
md-card-actions .md-button.md-primary md-icon,
md-card-actions .md-button.md-primary.md-hue-1 md-icon,
button.md-icon-button.md-primary.md-hue-1 md-icon {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
  background: var(--cd54-accent) !important;
}

md-card-actions button.md-icon-button.md-primary.md-hue-1 {
  background: var(--cd54-accent) !important;
}

md-card-actions button.md-icon-button.md-primary.md-hue-1 md-icon,
md-card-actions button.md-icon-button.md-primary.md-hue-1 .material-icons {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  background: transparent !important;
}

/* Anciennes règles md-toolbar (fallback si SOGo change de structure) */
.sg-message-view md-toolbar,
.mailer-mail-view md-toolbar {
  background: transparent !important;
  color: var(--cd54-text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--cd54-border) !important;
}

.sg-message-view md-toolbar md-icon,
.sg-message-view md-toolbar .material-icons,
.sg-message-view md-toolbar .md-button md-icon,
.mailer-mail-view md-toolbar md-icon,
.mailer-mail-view md-toolbar .material-icons,
.mailer-mail-view md-toolbar .md-button md-icon {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
}

.sg-message-view md-toolbar .md-button:hover,
.mailer-mail-view md-toolbar .md-button:hover {
  color: var(--cd54-accent-bright) !important;
  background: var(--cd54-hover) !important;
}

/* ============================================================
   FAB (bouton flottant Écrire)
   ============================================================ */

.md-button.md-fab,
.md-button.md-fab.md-default-theme,
.md-button.md-fab.md-primary,
.md-default-theme .md-button.md-fab,
button.md-fab,
.md-fab.md-button.md-ink-ripple,
md-fab-trigger .md-button.md-fab {
  background: var(--cd54-gradient-red) !important;
  background-color: var(--cd54-accent) !important;
  color: #FFFFFF !important;
  box-shadow: var(--cd54-shadow-red) !important;
  border: none !important;
  transition: var(--cd54-transition) !important;
}

html[data-cd54-effective-theme="dark"] .md-button.md-fab {
  background: var(--cd54-gradient-red-bright) !important;
  box-shadow: 0 8px 28px rgba(255, 45, 82, 0.5) !important;
}

.md-button.md-fab:hover,
.md-button.md-fab.md-primary:hover,
button.md-fab:hover {
  box-shadow: 0 12px 32px rgba(221, 24, 59, 0.55) !important;
  filter: brightness(1.05) !important;
}

.md-button.md-fab md-icon,
.md-button.md-fab svg,
.md-button.md-fab .material-icons {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ============================================================
   AVATARS "PERSONA" (sg-avatar-image)
   Les avatars d'expéditeur/destinataire dans SOGo utilisent
   sg-avatar-image qui affiche une md-icon "person" si aucun
   gravatar n'est disponible. Par défaut c'est rgba(0,0,0,0.54) gris.
   On force le rouge CD54 pour matcher le reste du thème.
   - Dans la liste (non-selected) → rouge accent
   - Dans un message selected (.md-accent) → blanc
   - Dans le header du message ouvert → rouge accent
   ============================================================ */

sg-avatar-image md-icon,
sg-avatar-image .material-icons,
.sg-avatar md-icon,
.sg-icon-badge-container md-icon,
md-list-item.sg-message-list-item sg-avatar-image md-icon,
md-list-item.sg-message-list-item .sg-avatar md-icon,
.sg-message-list sg-avatar-image md-icon,
.message-list sg-avatar-image md-icon {
  color: var(--cd54-accent) !important;
  fill: var(--cd54-accent) !important;
}

/* Avatar dans un message SÉLECTIONNÉ (fond rouge plein) → blanc */
md-list-item.sg-message-list-item.md-accent sg-avatar-image md-icon,
md-list-item.sg-message-list-item.md-accent .sg-avatar md-icon,
md-list-item.sg-message-list-item.md-accent sg-avatar-image .material-icons,
md-list-item.sg-message-list-item.md-accent .sg-icon-badge-container md-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Fond blanc du cercle avatar derrière l'icône persona : translucide */
sg-avatar-image,
.sg-avatar,
md-list-item sg-avatar-image {
  background-color: transparent !important;
}

/* ============================================================
   CONTENU HTML DES MESSAGES — zones blanches résiduelles
   Certains emails HTML ont du <div bgcolor="white"> codé en dur.
   On ne peut pas tout override sans casser la mise en forme, mais
   on force au moins le conteneur principal du mail à prendre le fond
   de la carte (bg-elevated) pour qu'il n'y ait pas de palier visible.
   Les zones blanches résiduelles viennent du HTML du mail lui-même
   et sont acceptables (comme sur sogo-dark-red).
   ============================================================ */

.sg-mail-part,
.sg-mail-part > div,
.sg-message-view-content,
md-card.sg-message-view md-card-content,
.view-detail md-card,
.view-detail md-card-content,
.view-detail md-card-header {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
}

/* Zones de métadonnées du message (destinataires, date, etc.)
   qui peuvent avoir du blanc hardcodé Material */
.sg-message-view-header,
.sg-message-headers,
.sg-message-view md-card-header,
md-card.sg-message-view > md-card-header,
md-card-header,
md-card-header-text,
.view-detail .md-card-header {
  background-color: var(--cd54-bg-elevated) !important;
  background: var(--cd54-bg-elevated) !important;
  color: var(--cd54-text) !important;
}

/* ============================================================
   BOUTONS GÉNÉRAUX
   ============================================================ */

.md-button.md-primary,
.md-button.md-raised.md-primary,
button.md-primary,
.md-default-theme .md-button.md-primary.md-raised,
.md-button.md-primary:not([disabled]).md-raised {
  background-color: var(--cd54-accent) !important;
  background: var(--cd54-gradient-red) !important;
  color: #FFFFFF !important;
  border-radius: var(--cd54-radius-input) !important;
  font-family: var(--cd54-font-text) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 8px rgba(221, 24, 59, 0.25) !important;
  transition: var(--cd54-transition) !important;
  min-height: 40px !important;
}

.md-button.md-primary:hover,
button.md-primary:hover,
.md-button.md-raised.md-primary:hover {
  background-color: var(--cd54-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(221, 24, 59, 0.4) !important;
}

.md-button {
  font-family: var(--cd54-font-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--cd54-radius-input) !important;
}

.md-button:not(.md-raised):not(.md-fab):not(.md-primary):not(.cd54-theme-toggle) {
  color: var(--cd54-text) !important;
}

.md-button:not(.md-raised):not(.md-fab):hover {
  background-color: var(--cd54-hover) !important;
}

/* ============================================================
   INPUTS (hors page login)
   ============================================================ */

body:not(.login-view) md-input-container input,
body:not(.login-view) md-input-container textarea {
  font-family: var(--cd54-font-text) !important;
  color: var(--cd54-text) !important;
  background: transparent !important;
  font-size: 14px !important;
}

body:not(.login-view) md-input-container label {
  font-family: var(--cd54-font-text) !important;
  color: var(--cd54-text-muted) !important;
}

body:not(.login-view) md-input-container.md-input-focused label,
body:not(.login-view) md-input-container.md-input-has-value label {
  color: var(--cd54-accent) !important;
}

body:not(.login-view) md-input-container.md-input-focused .md-input,
body:not(.login-view) md-input-container .md-input:focus {
  border-color: var(--cd54-accent) !important;
  box-shadow: 0 1px 0 var(--cd54-accent) !important;
}

body:not(.login-view) md-input-container .md-input {
  border-color: var(--cd54-border-strong) !important;
}

/* Autofill override (hors login) */
html[data-cd54-effective-theme="dark"] body:not(.login-view) md-input-container input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--cd54-card-elevated) inset !important;
  -webkit-text-fill-color: var(--cd54-text) !important;
  caret-color: var(--cd54-text) !important;
}

/* ============================================================
   DIALOGS (compose, etc.)
   ============================================================ */

md-dialog,
md-dialog.md-default-theme,
.md-dialog,
.compose-window {
  border-radius: var(--cd54-radius-card) !important;
  background-color: var(--cd54-card-elevated) !important;
  box-shadow: var(--cd54-shadow-lg) !important;
  overflow: hidden !important;
  color: var(--cd54-text) !important;
}

md-dialog md-toolbar,
md-dialog md-toolbar.md-default-theme,
md-dialog md-toolbar.md-primary,
.compose-window md-toolbar {
  background: var(--cd54-gradient-red) !important;
  color: #FFFFFF !important;
}

md-dialog md-dialog-content,
md-dialog .md-dialog-content,
md-dialog md-content {
  background-color: var(--cd54-card-elevated) !important;
  font-family: var(--cd54-font-text) !important;
  color: var(--cd54-text) !important;
  padding: 24px !important;
}

md-dialog md-dialog-actions,
md-dialog .md-actions {
  background-color: var(--cd54-card-elevated) !important;
  border-top: 1px solid var(--cd54-border) !important;
  padding: 16px 24px !important;
}

.md-dialog-backdrop,
md-backdrop {
  background-color: rgba(26, 26, 46, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html[data-cd54-effective-theme="dark"] .md-dialog-backdrop {
  background-color: rgba(17, 13, 15, 0.75) !important;
}

md-card,
md-card.md-default-theme {
  background-color: var(--cd54-card) !important;
  color: var(--cd54-text) !important;
  border-radius: var(--cd54-radius-card) !important;
  box-shadow: var(--cd54-shadow-md) !important;
  border: none !important;
}

/* ============================================================
   ONGLETS / CHECKBOXES / SWITCHES / TOOLTIPS / MENUS
   ============================================================ */

md-tabs md-ink-bar,
md-tabs.md-default-theme md-ink-bar {
  background-color: var(--cd54-accent) !important;
  height: 3px !important;
  border-radius: 2px 2px 0 0 !important;
}

md-tabs md-tab-item.md-active,
md-tabs .md-tab.md-active,
md-tabs md-tab-item.md-active md-icon {
  color: var(--cd54-accent) !important;
  font-weight: 600 !important;
}

md-tabs md-tab-item,
md-tabs .md-tab {
  font-family: var(--cd54-font-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  color: var(--cd54-text-muted) !important;
}

md-checkbox.md-checked .md-icon,
md-checkbox.md-default-theme.md-checked .md-icon {
  background-color: var(--cd54-accent) !important;
  border-color: var(--cd54-accent) !important;
}

md-checkbox .md-icon {
  border-color: var(--cd54-text-muted) !important;
  border-radius: 4px !important;
}

md-radio-button.md-checked .md-off,
md-radio-button.md-checked .md-on {
  border-color: var(--cd54-accent) !important;
  background-color: var(--cd54-accent) !important;
}

md-switch.md-checked .md-thumb { background-color: var(--cd54-accent) !important; }
md-switch.md-checked .md-bar { background-color: rgba(221, 24, 59, 0.4) !important; }

md-menu-content,
md-menu-content.md-default-theme {
  background-color: var(--cd54-card-elevated) !important;
  color: var(--cd54-text) !important;
  border-radius: var(--cd54-radius-card) !important;
  box-shadow: var(--cd54-shadow-md) !important;
  padding: 8px !important;
  border: 1px solid var(--cd54-border) !important;
}

md-menu-item,
md-menu-content md-menu-item .md-button {
  font-family: var(--cd54-font-text) !important;
  color: var(--cd54-text) !important;
  border-radius: var(--cd54-radius-input) !important;
  font-weight: 500 !important;
}

md-menu-item .md-button:hover,
md-menu-content md-menu-item .md-button:hover {
  background-color: var(--cd54-hover) !important;
  color: var(--cd54-accent) !important;
}

md-tooltip .md-content,
md-tooltip._md-show .md-content {
  background-color: var(--cd54-text-strong) !important;
  color: #FFFFFF !important;
  font-family: var(--cd54-font-text) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}

md-progress-circular path,
md-progress-linear .md-bar {
  stroke: var(--cd54-accent) !important;
  background-color: var(--cd54-accent) !important;
}

/* ============================================================
   PAGE DE LOGIN — Design "S8 Slide-In Panel"
   Adapté du design fourni par le client. Sombre par essence.
   - Panneau gauche rouge avec logo + vague arrondie sur bord droit
   - Panneau droit charcoal sombre avec form Playfair Display
   - Indépendant du toggle thème (toujours dark, c'est sa nature)
   ============================================================ */

/* Charger Playfair Display + DM Sans en plus */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;700&display=swap');

/* Variables locales (scope login) */
body:has(#loginContent) main.view {
  --lg-red-1: #E02522;
  --lg-red-2: #B31E23;
  --lg-red-3: #8A1721;
  --lg-dark: #0a0a0a;
  --lg-dark-2: #111111;
  --lg-dark-3: #1a1a1a;
  --lg-cream: #f5f0e1;
  --lg-cream-muted: rgba(245, 240, 225, 0.5);
  --lg-white-06: rgba(255, 255, 255, 0.06);
  --lg-white-10: rgba(255, 255, 255, 0.10);
  --lg-white-15: rgba(255, 255, 255, 0.15);
  --lg-red-glow: rgba(224, 37, 34, 0.15);
  --lg-red-border: rgba(224, 37, 34, 0.25);
}

/* === Conteneur principal === FULL SCREEN
   STRICTEMENT scopé à la page login (présence de #loginContent dans le DOM)
   pour ne PAS appliquer le fond sombre au webmail intérieur */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#loginContent) main.view,
body:has(#loginContent) .view.md-default-theme,
body:has(#loginContent) main.view.md-default-theme {
  background: var(--lg-dark) !important;
  min-height: 100vh !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--lg-cream) !important;
  display: block !important;
  overflow-x: hidden !important;
}

body:has(#loginContent) main.view > md-content,
body:has(#loginContent) main.view md-content.ng-cloak {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
  width: 100% !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* === #loginContent = .login-wrapper du design : FULL SCREEN === */
#loginContent,
.md-whiteframe-3dp#loginContent {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--lg-dark) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  align-items: stretch !important;
  position: relative !important;
  color: var(--lg-cream) !important;
  animation: cd54-fade-in 0.8s ease-out !important;
}

@keyframes cd54-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ════════════════════════════
   PANNEAU GAUCHE — rouge + logo
   ════════════════════════════ */

#loginContent .sg-logo,
.sg-logo {
  flex: 0 0 45% !important;
  max-width: 45% !important;
  width: 45% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: linear-gradient(180deg, var(--lg-red-3), var(--lg-red-1), var(--lg-red-2)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  padding: 60px 60px !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
  border: none !important;
  border-radius: 0 !important;
  /* Le panneau gauche (logo + titre + tagline) est STATIQUE, visible
     dès le chargement. C'est lui qui sert de "point d'ancrage" à la
     révélation iris du panneau droit. */
}

/* Texture pointillée sur le panneau rouge */
#loginContent .sg-logo::before,
.sg-logo::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 3px
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Ligne diagonale décorative */
#loginContent .sg-logo::after,
.sg-logo::after {
  content: '' !important;
  position: absolute !important;
  width: 200% !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  top: 30% !important;
  left: -50% !important;
  transform: rotate(-25deg) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#loginContent .sg-logo > div,
.sg-logo .md-padding {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

#loginContent .sg-logo .md-flex,
.sg-logo .md-flex {
  display: none !important;
}

/* Logo CD54 — GRAND, rond, ombres profondes */
#loginContent .sg-logo img,
.sg-logo img,
.cd54-login-logo {
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.97) !important;
  padding: 22px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 4px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  animation: cd54-logo-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important;
}

@keyframes cd54-logo-fade-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Bloc titre + tagline + diamants (panneau gauche) */
.cd54-login-brand {
  text-align: center !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  animation: cd54-fade-up 0.9s ease-out 0.6s both !important;
  max-width: 460px !important;
}

@keyframes cd54-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Titre principal "Webmail CD54 Billard" sous le logo */
.cd54-login-brand h1,
.cd54-brand-title {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  text-align: center !important;
}

/* Tagline italique Playfair sous le titre */
.cd54-login-brand .cd54-tagline,
.cd54-login-brand p.cd54-tagline,
.cd54-login-brand p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  max-width: 380px !important;
}

/* Diamants décoratifs sous la tagline (3 carrés rotatés) */
.cd54-diamonds {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
}

.cd54-diamond {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  transform: rotate(45deg) !important;
}

.cd54-diamond.active {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* ════════════════════════════
   PANNEAU DROIT — formulaire dark
   ════════════════════════════ */

#loginContent .sg-login,
.sg-login {
  flex: 1 1 auto !important;
  max-width: none !important;
  background: var(--lg-dark) !important;
  padding: 56px 56px 56px 72px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  color: var(--lg-cream) !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* === Animation iris-wipe désactivée ===
   L'utilisateur a demandé de retirer le rideau. La page s'affiche
   directement en split-screen sans voile au chargement. */

/* Fade-in subtil du contenu form au chargement (sans rideau) */
#loginContent .sg-login .cd54-form-header,
.sg-login .cd54-form-header,
#loginContent .sg-login form,
.sg-login form[name="loginForm"] {
  animation: cd54-content-fade-in 0.6s ease-out both !important;
}

@keyframes cd54-content-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Grain texture sur le panneau form */
#loginContent .sg-login::after,
.sg-login::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.03 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#loginContent .sg-login-content,
.sg-login-content,
.sg-login form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 380px !important;
  color: var(--lg-cream) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* === Form header injecté via Dockerfile dans .sg-login === */

.cd54-form-header {
  margin: 0 0 28px 0 !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 480px !important;
}

.cd54-label-top {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  color: rgba(255, 255, 255, 0.25) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px 0 !important;
  font-weight: 500 !important;
  display: block !important;
}

.cd54-form-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  line-height: 1.05 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.02em !important;
  display: block !important;
}

.cd54-form-title span {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 32px !important;
  color: var(--lg-cream-muted) !important;
  margin: 4px 0 0 0 !important;
  letter-spacing: -0.01em !important;
}

.cd54-form-divider {
  width: 80px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--lg-red-1), rgba(224, 37, 34, 0.3)) !important;
  margin: 18px 0 28px !important;
  border-radius: 2px !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.cd54-form-divider::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  animation: cd54-shimmer 3.5s ease-in-out infinite !important;
}

@keyframes cd54-shimmer {
  0%, 30% { left: -100%; }
  70%, 100% { left: 250%; }
}

/* === MASQUER LE SÉLECTEUR DE LANGUE === */
.sg-login form .cd54-lang-row,
#loginContent .cd54-lang-row,
body:has(#loginContent) main.view .cd54-lang-row {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* === LIEN "MOT DE PASSE OUBLIÉ ?" === */
.cd54-password-lost-row {
  display: flex !important;
  justify-content: center !important;
  margin: 16px 0 4px !important;
  position: relative !important;
  z-index: 1 !important;
}

.cd54-password-lost-link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(245, 240, 225, 0.55) !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border-bottom: 1px solid transparent !important;
}

.cd54-password-lost-link:hover {
  color: var(--lg-red-1) !important;
  border-bottom-color: rgba(224, 37, 34, 0.4) !important;
}

.cd54-password-lost-link:focus,
.cd54-password-lost-link:focus-visible {
  outline: none !important;
  color: var(--lg-red-1) !important;
}

/* Cacher également l'ancien lien SOGo password-lost (conditionnel ng-if) */
.sg-login .password-lost-link {
  display: none !important;
}

#loginContent form,
.sg-login form[name="loginForm"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* === Labels SOGo en mode placeholder (visible quand vide, masqué au focus/saisie) === */

body:has(#loginContent) main.view md-input-container,
#loginContent md-input-container {
  position: relative !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

body:has(#loginContent) main.view md-input-container > label,
#loginContent md-input-container > label,
body:has(#loginContent) main.view md-input-container .md-placeholder,
#loginContent md-input-container .md-placeholder {
  position: absolute !important;
  left: 48px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(245, 240, 225, 0.4) !important;
  background: transparent !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: opacity 0.2s ease !important;
  max-width: calc(100% - 60px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
}

/* Au focus ou si valeur saisie → label disparaît (comme un placeholder) */
body:has(#loginContent) main.view md-input-container.md-input-focused > label,
body:has(#loginContent) main.view md-input-container.md-input-has-value > label,
#loginContent md-input-container.md-input-focused > label,
#loginContent md-input-container.md-input-has-value > label {
  opacity: 0 !important;
}

/* === Inputs : style "form-input" du design === */

body:has(#loginContent) main.view md-input-container input,
body:has(#loginContent) main.view md-input-container .md-input,
#loginContent md-input-container input,
#loginContent md-input-container .md-input {
  width: 100% !important;
  background: var(--lg-white-06) !important;
  border: 1px solid var(--lg-red-border) !important;
  border-radius: 10px !important;
  padding: 16px 18px 16px 48px !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--lg-cream) !important;
  outline: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s !important;
}

body:has(#loginContent) main.view md-input-container input::placeholder,
#loginContent md-input-container input::placeholder {
  color: rgba(245, 240, 225, 0.3) !important;
}

body:has(#loginContent) main.view md-input-container input:focus,
#loginContent md-input-container input:focus {
  border-color: var(--lg-red-1) !important;
  background: rgba(224, 37, 34, 0.08) !important;
  box-shadow:
    0 0 0 3px rgba(224, 37, 34, 0.1),
    0 0 20px rgba(224, 37, 34, 0.05) !important;
  outline: none !important;
}

/* Override autofill Chrome */
body:has(#loginContent) main.view md-input-container input:-webkit-autofill,
#loginContent md-input-container input:-webkit-autofill,
body:has(#loginContent) main.view md-input-container input:-webkit-autofill:hover,
body:has(#loginContent) main.view md-input-container input:-webkit-autofill:focus,
body:has(#loginContent) main.view md-input-container input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--lg-dark-2) inset !important;
  box-shadow: 0 0 0 30px var(--lg-dark-2) inset !important;
  -webkit-text-fill-color: var(--lg-cream) !important;
  background-clip: content-box !important;
  caret-color: var(--lg-cream) !important;
  border: 1px solid var(--lg-red-border) !important;
  border-radius: 10px !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Icônes person/key positionnées dans le champ */
body:has(#loginContent) main.view md-input-container > md-icon,
#loginContent md-input-container > md-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  color: rgba(245, 240, 225, 0.4) !important;
  fill: rgba(245, 240, 225, 0.4) !important;
  opacity: 0.55 !important;
  z-index: 2 !important;
  margin: 0 !important;
  bottom: auto !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, color 0.3s ease !important;
}

body:has(#loginContent) main.view md-input-container.md-input-focused > md-icon,
#loginContent md-input-container.md-input-focused > md-icon {
  color: var(--lg-red-1) !important;
  fill: var(--lg-red-1) !important;
  opacity: 0.9 !important;
}

/* Toggle visibilité mot de passe à droite */
body:has(#loginContent) main.view md-input-container > md-icon#password-visibility-icon,
#loginContent md-input-container > md-icon#password-visibility-icon {
  left: auto !important;
  right: 16px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* === Sélecteur langue + switch "se souvenir" === */

#loginContent .sg-login form > div[layout="row"],
body:has(#loginContent) main.view .sg-login form > div[layout="row"] {
  align-items: center !important;
  margin: 12px 0 !important;
  position: relative !important;
}

#loginContent .sg-login form > div[layout="row"] > md-icon,
body:has(#loginContent) main.view .sg-login form > div[layout="row"] > md-icon {
  color: rgba(245, 240, 225, 0.4) !important;
  fill: rgba(245, 240, 225, 0.4) !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
}

#loginContent md-select,
body:has(#loginContent) main.view md-select {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--lg-cream) !important;
}

#loginContent md-select .md-select-value,
body:has(#loginContent) main.view md-select .md-select-value {
  color: var(--lg-cream) !important;
  border-bottom-color: rgba(245, 240, 225, 0.15) !important;
  padding: 6px 0 !important;
}

#loginContent md-select .md-select-value .md-select-icon,
body:has(#loginContent) main.view md-select .md-select-value .md-select-icon {
  color: var(--lg-cream) !important;
  fill: var(--lg-cream) !important;
}

/* Toggle "Se souvenir de moi" : OFF par défaut */
#loginContent md-switch:not(.md-checked) .md-thumb,
body:has(#loginContent) main.view md-switch:not(.md-checked) .md-thumb {
  background-color: var(--lg-dark-3) !important;
  border: 1px solid rgba(245, 240, 225, 0.2) !important;
}

#loginContent md-switch:not(.md-checked) .md-bar,
body:has(#loginContent) main.view md-switch:not(.md-checked) .md-bar {
  background-color: rgba(245, 240, 225, 0.15) !important;
}

#loginContent md-switch.md-checked .md-thumb,
body:has(#loginContent) main.view md-switch.md-checked .md-thumb {
  background-color: var(--lg-red-1) !important;
  border-color: var(--lg-red-1) !important;
}

#loginContent md-switch.md-checked .md-bar,
body:has(#loginContent) main.view md-switch.md-checked .md-bar {
  background-color: rgba(224, 37, 34, 0.4) !important;
}

#loginContent md-switch .md-label,
body:has(#loginContent) main.view md-switch .md-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: rgba(245, 240, 225, 0.6) !important;
  font-weight: 400 !important;
}

#loginContent md-switch,
body:has(#loginContent) main.view md-switch {
  margin: 12px 0 !important;
}

/* === Bouton de connexion login : strictement scopé à .cd54-login-fab
   pour ne PAS déborder sur les FAB du webmail intérieur (écrire mail,
   nouveau contact, etc.) === */
.cd54-login-fab,
.md-button.cd54-login-fab {
  width: 100% !important;
  background: linear-gradient(135deg, var(--lg-red-1), var(--lg-red-2)) !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  font-size: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 24px 0 0 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 54px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(224, 37, 34, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-direction: row !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

.cd54-login-fab:hover {
  background: linear-gradient(135deg, var(--lg-red-1), var(--lg-red-2)) !important;
  box-shadow: 0 6px 18px rgba(224, 37, 34, 0.38) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

.cd54-login-fab:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(224, 37, 34, 0.3) !important;
}

.cd54-login-fab:focus,
.cd54-login-fab.md-focused {
  outline: none !important;
  box-shadow:
    0 4px 12px rgba(224, 37, 34, 0.25),
    0 0 0 3px rgba(224, 37, 34, 0.18) !important;
  background: linear-gradient(135deg, var(--lg-red-1), var(--lg-red-2)) !important;
}

.cd54-login-fab .md-ripple-container {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Cacher l'icône md-icon flèche du bouton login (le texte CONNEXION
   est injecté via ::before sur .cd54-login-fab plus haut) */
.cd54-login-fab md-icon,
.cd54-login-fab svg {
  display: none !important;
}

/* (Ancienne règle qui cachait les icônes md-fab — supprimée car elle
   débordait sur les FAB du webmail intérieur. Les icônes du bouton
   login sont cachées plus bas via le sélecteur strict .cd54-login-fab) */

#loginContent button[type="submit"]:hover,
body:has(#loginContent) main.view button[type="submit"]:hover,
#loginContent .md-button.md-fab:hover,
body:has(#loginContent) main.view .md-button.md-fab:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 12px 28px rgba(224, 37, 34, 0.35),
    0 4px 12px rgba(224, 37, 34, 0.2) !important;
}

#loginContent button[type="submit"]:active,
body:has(#loginContent) main.view button[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Texte "CONNEXION" via ::before — STRICTEMENT scopé à .cd54-login-fab
   pour ne pas déborder sur les boutons FAB du webmail intérieur */
.cd54-login-fab::before,
.md-button.cd54-login-fab::before {
  content: 'CONNEXION' !important;
  display: inline-block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
}

#loginContent button[type="submit"] md-icon,
body:has(#loginContent) main.view button[type="submit"] md-icon,
#loginContent .md-button.md-fab md-icon,
body:has(#loginContent) main.view .md-button.md-fab md-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Bouton info "i" en bas */
#loginContent .md-button.md-icon-button,
body:has(#loginContent) main.view .md-button.md-icon-button {
  color: rgba(245, 240, 225, 0.3) !important;
  background: transparent !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  transition: all 0.2s ease !important;
}

#loginContent .md-button.md-icon-button:hover,
body:has(#loginContent) main.view .md-button.md-icon-button:hover {
  background: rgba(224, 37, 34, 0.1) !important;
  color: var(--lg-red-1) !important;
}

#loginContent .md-button.md-icon-button md-icon,
body:has(#loginContent) main.view .md-button.md-icon-button md-icon {
  color: inherit !important;
  fill: currentColor !important;
}

/* Footer du form (info + bouton sur même ligne) */
#loginContent form > div[layout="row"]:last-of-type,
body:has(#loginContent) main.view form > div[layout="row"]:last-of-type {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 20px !important;
}

/* Lien "Mot de passe oublié" */
.password-lost-link,
#loginContent .password-lost-link {
  display: inline-block !important;
  margin: 16px 0 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: rgba(245, 240, 225, 0.3) !important;
  text-decoration: none !important;
  text-align: left !important;
  align-self: flex-start !important;
  transition: color 0.3s !important;
}

.password-lost-link:hover {
  color: var(--lg-red-1) !important;
  text-decoration: underline !important;
}

body.login-view, .login-view {
  background: var(--lg-dark) !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   MODE SOMBRE OVERRIDES (variables déjà gérées en haut)
   Tweaks supplémentaires pour les éléments qui ne s'appliquent
   pas via variables (gradients, etc.)
   ============================================================ */

/* (Direction A) La toolbar n'est plus forcée en gradient rouge en sombre.
   Elle utilise var(--cd54-bg-elevated) qui devient warm dark automatiquement
   via les variables. Le rouge reste un accent (border-bottom + hover). */

/* Override message-list/sidebar/etc en sombre déjà géré par les variables CSS */

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Login mobile : le layout split-screen 45/55 bascule en vertical.
   CRITIQUE : il faut explicitement reset `height: 100vh` + `min-height`
   sur sg-logo et sg-login, sinon les règles desktop font prendre tout
   l'écran au panneau rouge et le formulaire devient invisible dessous.
   Le conteneur #loginContent doit aussi autoriser le scroll vertical. */
@media (max-width: 900px) {
  body:has(#loginContent) main.view,
  body:has(#loginContent) main.view > md-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  #loginContent,
  .md-whiteframe-3dp#loginContent {
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  #loginContent .sg-logo,
  .sg-logo {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
    padding: 40px 32px 32px !important;
  }

  #loginContent .sg-logo img,
  .sg-logo img,
  .cd54-login-logo {
    width: 120px !important;
    height: 120px !important;
    margin-bottom: 18px !important;
    padding: 14px !important;
  }

  .cd54-login-brand h1,
  .cd54-login-brand .cd54-brand-title {
    font-size: 24px !important;
  }

  .cd54-login-brand p,
  .cd54-login-brand .cd54-tagline {
    font-size: 13px !important;
  }

  #loginContent .sg-login,
  .sg-login {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 40px 28px 48px !important;
    overflow: visible !important;
  }

  #loginContent .sg-login-content,
  .sg-login-content,
  .sg-login form {
    max-width: 100% !important;
    width: 100% !important;
  }

  #loginContent .sg-login::before {
    font-size: 22px !important;
  }

  /* Les diamants décoratifs prennent trop de place sur mobile */
  .cd54-diamonds {
    margin-top: 12px !important;
  }
}

@media (max-width: 782px) {
  md-sidenav, md-sidenav.md-default-theme {
    width: 280px !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25) !important;
  }

  md-sidenav md-list-item,
  md-sidenav md-list-item .md-button {
    min-height: 52px !important;
    padding: 0 16px !important;
  }

  md-sidenav md-toolbar {
    min-height: 84px !important;
    padding: 14px 16px !important;
  }

  md-sidenav .sg-username img,
  md-sidenav .sg-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .md-button.md-fab, button.md-fab {
    width: 56px !important;
    height: 56px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  .message-list md-list-item,
  md-list-item.sg-message {
    padding: 12px 14px !important;
    min-height: 76px !important;
  }

  md-toolbar .md-toolbar-tools { padding: 0 12px !important; }

  md-toolbar .cd54-toolbar-logo {
    width: 32px !important;
    height: 32px !important;
    margin: 0 8px 0 0 !important;
  }

  .cd54-theme-toggle, #cd54-theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 480px) {
  body:has(#loginContent) main.view > md-content {
    padding: 12px !important;
  }

  #loginContent,
  .md-whiteframe-3dp#loginContent {
    border-radius: 20px !important;
  }

  #loginContent .sg-logo,
  .sg-logo {
    padding: 32px 24px 24px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #loginContent .sg-login,
  .sg-login {
    padding: 28px 24px !important;
  }

  md-toolbar .sg-current-day,
  md-toolbar .day-number { font-size: 48px !important; }

  .message-list .sender { font-size: 14px !important; }
  .message-list .subject { font-size: 13px !important; }
}