/* Unpli — interface claire V2 (21.10.2026).
   Thème enfant Elastic. Aucune modification des composants IMAP, SMTP ou JS.
   Le mode clair est initialisé une seule fois au chargement de la page. */
:root {
  --unpli-ink: #25364a;
  --unpli-blue: #263f59;
  --unpli-blue-hover: #355d80;
  --unpli-red: #d52b1e;
  --unpli-paper: #ffffff;
  --unpli-mist: #f6f8fa;
  --unpli-cloud: #edf3f7;
  --unpli-border: #dbe4eb;
}
html:not(.dark-mode) body { background: var(--unpli-paper); color: var(--unpli-ink); }
html:not(.dark-mode) #layout-content { background: var(--unpli-paper); }
html:not(.dark-mode) #layout-list { background: var(--unpli-paper); border-color: var(--unpli-border); }
html:not(.dark-mode) #layout-sidebar { background: var(--unpli-mist); border-color: var(--unpli-border); }
html:not(.dark-mode) #layout > div > .header {
  color: var(--unpli-ink);
  background: var(--unpli-mist);
  border-color: var(--unpli-border);
}
html:not(.dark-mode) #layout > div > .footer {
  color: #5b697a;
  background: var(--unpli-paper);
  border-color: var(--unpli-border);
}
html:not(.dark-mode) #layout-menu {
  background: #f7f9fb !important;
  border-right: 1px solid var(--unpli-border);
}
html:not(.dark-mode) #taskmenu .special-buttons {
  background: #f7f9fb !important;
  border-top: 1px solid var(--unpli-border);
}
html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #taskmenu a:before {
  color: #45627b !important;
}
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:hover:before {
  background: var(--unpli-cloud) !important;
  color: var(--unpli-blue) !important;
}
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:before {
  background: #e4eef6 !important;
  color: #204d70 !important;
}
html:not(.dark-mode) #taskmenu .action-buttons a,
html:not(.dark-mode) #taskmenu .action-buttons a:before {
  color: var(--unpli-blue) !important;
  background: transparent !important;
}
html:not(.dark-mode) #taskmenu a.logout,
html:not(.dark-mode) #taskmenu a.logout:before { color: #b23a31 !important; }
html:not(.dark-mode) a { color: #265477; }
html:not(.dark-mode) a:hover { color: #173b57; }
.btn-primary, .btn-primary:disabled {
  background: var(--unpli-blue) !important;
  border-color: var(--unpli-blue) !important;
  color: white !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--unpli-blue-hover) !important;
  border-color: var(--unpli-blue-hover) !important;
}
.btn:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #3977a7 !important;
  outline-offset: 2px;
}
.task-login #logo {
  width: min(78vw, 270px);
  max-width: 100%;
  max-height: 90px;
  height: auto;
  object-fit: contain;
}
/* Signature discrete : petite enveloppe Unpli, jamais un bandeau imposant.
   La page de connexion conserve son logo complet. */
#layout-menu .popover-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--unpli-border) !important;
}
html:not(.dark-mode) #layout-menu .popover-header {
  background: #f7f9fb !important;
}
html.dark-mode #layout-menu .popover-header {
  background: #253747 !important;
  border-color: #405567 !important;
}
#layout-menu .popover-header img {
  display: block !important;
  height: 29px !important;
  width: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
  padding: 0 !important;
  object-fit: contain;
  flex-shrink: 0;
}
@media screen and (max-width: 480px) {
  html.layout-phone #layout-menu .popover-header {
    justify-content: space-between !important;
    padding: 0 0.8rem !important;
  }
  html.layout-phone #layout-menu .popover-header img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
  html.layout-phone #layout-menu .popover-header a { color: var(--unpli-blue); }
  html:not(.dark-mode) #taskmenu a { color: var(--unpli-ink) !important; }
  html:not(.dark-mode) #taskmenu a:before { color: var(--unpli-blue) !important; }
}
/* Choix volontaire du mode sombre reste possible via le bouton standard */
html.dark-mode #layout-menu,
html.dark-mode #taskmenu .special-buttons { background: #253747 !important; }
html.dark-mode #taskmenu a.selected { background: #344f65 !important; }
html.dark-mode .btn-primary { background: #467192 !important; border-color: #467192 !important; }