/* ————————————————————————————————————————————————————————————
   PushOnWeb — page de connexion du webmail (Roundcube 1.6, elastic)
   Version statique : le fond et le logo, rien d'autre pour l'instant.
   Chargé par greffon, après la feuille d'elastic.
   ———————————————————————————————————————————————————————————— */

/* ——— Fond unique : le même en mode clair et en mode sombre ———
   Comme la page de connexion Plesk : le thème ne s'applique
   qu'une fois connecté, pas sur l'écran d'entrée. */
.task-login,
.task-login #layout,
.task-login #layout-content {
  background-color: #0B2C4E;
  background-image: url("https://pushonweb.space/branding/fond-sombre.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ——— Logo : proportions de la page Plesk ———
   Jamais toute la largeur : 62 % au plus, 64 px de haut, centré,
   avec de l'air au-dessus et en dessous. */
.task-login #logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 64px;
  margin: 0 auto;
  opacity: 1;
  background: none;
  border: 0;
  box-shadow: none;
}
.task-login #layout-content { padding-left: 24px; padding-right: 24px; }


/* ——— Pied : « Propulsé par » + la marque Roundcube ———
   Le texte de #login-footer vient de $config['product_name'] :
   on le masque, on écrit le nôtre, on ajoute la marque. */
.task-login #login-footer {
  font-size: 0;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.task-login #login-footer::before {
  content: "Propulsé par";
  font-size: 11px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6D8599;
}
html.dark-mode .task-login #login-footer::before { color: #9FB6CA; }
.task-login #login-footer::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: url("https://pushonweb.space/branding/roundcube.svg") center / contain no-repeat;
}

/* ——— Logo de l'application une fois connecté ———
   Le même skin_logo sert aux deux écrans ; il est large, et le
   bandeau de gauche n'a pas la place. On y met la marque carrée
   (webmail-app-icone.js la remplace) et on la cale. */
#layout-menu .popover-header #logo {
  height: 28px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  opacity: 1;
  background: none;
}