/* =========================
   XLmail - Roundcube Login (PROPRE)
   1 cadre plein écran (logo + connexion dedans)
   RC 1.6.x (dark-mode via html.dark-mode)
   Demande: cadre connexion + large + logo collé (zéro espace)
========================= */

/* Page login centrée */
body.task-login #layout-content.xlmail-login{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px !important;
}

/* =========================
   GRAND CADRE (plein écran)
========================= */
.xlmailFrame{
  position: relative;

  width: min(1400px, calc(100vw - 36px));
  height: min(900px, calc(100vh - 36px));

  border-radius: 22px;
  overflow: hidden;

  background: rgba(255,255,255,.62);
  border: 1px solid rgba(203,213,225,.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(2,6,23,.12);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* compact */
  padding: 12px;
}

html.dark-mode .xlmailFrame{
  background: rgba(17,25,40,.58);
  border-color: rgba(42,53,80,.9);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

/* =========================
   LOGO (entier, COLLÉ au form)
========================= */
.logoBox{
  width: 100%;
  height: 220px;          /* compact */
  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;      /* logo jamais coupé */
  margin: 0;              /* logo collé */
  padding: 0;
}

/* Logo image */
.xlmailLogo{
  height: 120px;
  width: auto;
  max-width: 94%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

/* =========================
   BOUTON THEME (bas droite)
========================= */
.themeBtn{
  position: absolute;
  right: 14px;
  bottom: 14px;

  border: 1px solid rgba(203,213,225,.70);
  background: rgba(255,255,255,.55);
  color: inherit;

  border-radius: 14px;
  padding: 10px 12px;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  box-shadow: 0 10px 30px rgba(2,6,23,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html.dark-mode .themeBtn{
  border-color: rgba(42,53,80,.9);
  background: rgba(17,25,40,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.themeBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

.themeBtn .ico{ width:18px; height:18px; display:grid; place-items:center; }
.themeBtn .lbl{ font-size:12px; opacity:.85; white-space:nowrap; }

/* =========================
   ZONE CONNEXION (plus large + collée au logo)
========================= */
.xlmailLoginInside{
  width: 100%;
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  /* collé au logo */
  padding: 0 12px 56px;   /* garde place bouton thème */
  margin: 0;
}

/* Form (mini-card) => ELARGI */
.xlmailLoginInside #login-form{
  width: min(400px, 96vw);   /* + large (avant 520) */
  max-width: 680px;

  padding: 18px 20px;
  border-radius: 18px;

  background: rgba(255,255,255,.35);
  border: 1px solid rgba(203,213,225,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);

  margin-top: 0;
}

html.dark-mode .xlmailLoginInside #login-form{
  background: rgba(17,25,40,.35);
  border-color: rgba(42,53,80,.65);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Titre: espace mini */
.xlmailLoginInside #login-form::before{
  content: "Se connecter";
  display: block;
  text-align: center;
  font-weight: 800;
  margin: 0 0 6px;
  opacity: .9;
}

/* Champs full width */
.xlmailLoginInside input,
.xlmailLoginInside select,
.xlmailLoginInside .form-control{
  width: 100% !important;
}

/* Footer */
.xlmailFooter{
  margin-top: 10px;
  opacity: .9;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 820px){
  body.task-login #layout-content.xlmail-login{
    padding: 12px !important;
  }

  .xlmailFrame{
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    border-radius: 18px;
    padding: 10px;
  }

  .logoBox{
    height: 110px;
  }

  .xlmailLogo{
    height: 102px;
    max-width: 96%;
  }

  .themeBtn{
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .themeBtn .ico{ width:16px; height:16px; }
  .themeBtn .lbl{ font-size:11px; }

  .xlmailLoginInside{
    padding: 0 8px 52px;
  }

  /* sur mobile, le cadre connexion prend quasi toute la largeur */
  .xlmailLoginInside #login-form{
    width: min(620px, 98vw);
    max-width: 620px;
    padding: 16px;
  }
}
/* ===== Descendre le logo SANS faire descendre la connexion ===== */

/* La boîte logo reste fixe (ne pousse pas le layout) */
.logoBox{
  height: 20px !important;     /* garde constant */
  overflow: hidden !important;  /* évite débordements */
}

/* On décale visuellement l'image dans la boîte (ne change pas la place du bloc) */
.xlmailLogo{
  position: relative;
  top: 18px;                    /* <-- augmente pour descendre (10 / 18 / 25) */
}
/* ===== Descendre le logo sans bouger la connexion (CSS only) ===== */

/* Le bloc logo garde sa place */
.logoBox{
  height: 125px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* On décale seulement l'image (visuel), pas le bloc */
.xlmailLogo{
  position: relative !important;
  top: 35px !important;       /* augmente pour descendre: 10 / 18 / 25 / 35 */
  margin: 0 !important;
}
/* ===== Agrandir le logo sans déplacer la connexion ===== */

/* La zone reste identique => la connexion ne bouge pas */
.logoBox{
  height: 125px !important;      /* garde constant */
  overflow: hidden !important;
}

/* Logo plus grand, centré, sans pousser le layout */
.xlmailLogo{
  height: 460px !important;      /* <-- augmente (180 / 200 / 220) */
  width: auto !important;
  max-width: 96% !important;

  position: relative !important;
  top: 10px !important;          /* pour le descendre un peu si besoin */
}