/* =====================================================================
   Elastic Modern Login — split-screen skin for Roundcube
   Brand palette: aishara inti solusi (navy #0F2D54 + gold #C5A376)
   Extends the stock "elastic" skin and restyles ONLY the login page.
   ---------------------------------------------------------------------
   To rebrand, edit the --navy* / --gold* variables below.
   ===================================================================== */
:root{
  --navy:#0F2D54;
  --navy-2:#1b4578;
  --navy-deep:#0a2140;
  --gold:#C5A376;
  --gold-2:#b08f63;
  --gold-deep:#9c7b4f;
  --bg:#f4f6fa;
  --card:#ffffff;
  --ink:#17233a;
  --muted:#6b7488;
  --line:#e5e9f1;
  --field:#f7f9fc;
  --shadow:0 20px 50px -20px rgba(15,45,84,.32);
}

/* ---- reset the elastic login chrome so our layout takes over ---- */
body.skin-elastic-modern{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  background:var(--bg) !important;color:var(--ink);
  min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px;
}
body.skin-elastic-modern #layout,
body.skin-elastic-modern .popup-overlay{background:transparent !important}

/* ---- shell ---- */
.ml-shell{
  width:min(1040px,100%);background:var(--card);border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow);display:grid;grid-template-columns:1.05fr 1fr;min-height:600px;
}

/* ---- brand panel ---- */
.ml-brand{
  position:relative;color:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:space-between;
  background:
  linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.15)),
  linear-gradient(140deg, var(--navy-deep), var(--navy) 55%, var(--navy-2));
}
.ml-brand::before,.ml-brand::after{content:"";position:absolute;border-radius:50%}
.ml-brand::before{width:320px;height:320px;top:-120px;right:-90px;background:radial-gradient(circle at 30% 30%,var(--gold),transparent 70%);opacity:.5}
.ml-brand::after{width:240px;height:240px;bottom:-90px;left:-70px;background:#fff;opacity:.06}
.ml-logo{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.ml-logo-chip{display:inline-flex;align-items:center;padding:14px 18px;}
#logo{display:block;height:44px;width:auto;max-width:230px}
.ml-pitch{position:relative;z-index:1}
.ml-pitch h2{font-size:30px;line-height:1.25;font-weight:800;letter-spacing:-.5px;margin:0 0 14px}
.ml-pitch h2 em{font-style:normal;color:var(--gold)}
.ml-pitch p{opacity:.82;font-size:15px;line-height:1.6;max-width:360px;margin:0}
.ml-feat{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.ml-feat li{display:flex;align-items:center;gap:12px;font-size:14px;opacity:.95}
.ml-dot{width:30px;height:30px;border-radius:9px;background:rgba(197,163,118,.18);border:1px solid rgba(197,163,118,.35);color:var(--gold);display:grid;place-items:center;flex:0 0 auto}
.ml-dot svg{width:15px;height:15px}
ml-name{line-height:1.1}
.ml-name b{display:block;font-weight:800;font-size:17px;letter-spacing:.2px}
.ml-name label {font-size:17px;letter-spacing:2px;color:var(--gold);font-weight:800}
.ml-name span{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:600}

/* ---- form panel ---- */
.ml-panel{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.ml-head{margin-bottom:28px}
.ml-head h1{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:0;color:var(--navy)}
.ml-head .ml-rule{width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-2));margin:10px 0 0}
.ml-head p{color:var(--muted);font-size:14.5px;margin:12px 0 0}

/* roundcube message box */
.ml-message,
body.skin-elastic-modern .boxerror,
body.skin-elastic-modern .boxwarning{
  border-radius:11px !important;font-size:13.5px;margin-bottom:16px;border:1px solid var(--line);
}

/* ---- style the generated loginform (inputs / labels / button) ---- */
.ml-form{display:block}

/* Force label-above-input on EVERY screen size. Elastic renders the login
   form as a Bootstrap-style .row with .col-* cells, which puts the label and
   field side-by-side on mobile. Flatten that grid so each label stacks on top
   of its field. */
.ml-form table,
.ml-form tbody{display:block !important;width:100% !important;border-collapse:collapse !important}
.ml-form,.ml-form *{box-sizing:border-box !important}
.ml-form tr{display:block !important;width:100% !important;margin-bottom:16px}
.ml-form td,
.ml-form td.title,
.ml-form td.input{
  display:block !important;width:100% !important;max-width:100% !important;
  padding:0 !important;border:0 !important;vertical-align:top !important;
}
.ml-form td.title{margin-bottom:7px}

.ml-form .form-group,
.ml-form .form-group.row,
.ml-form .row,
.ml-form tr,
.ml-form fieldset > div{
  display:block !important;width:100% !important;margin-bottom:16px;
}
.ml-form [class*="col-"],
.ml-form .form-group > div{
  display:block !important;flex:0 0 100% !important;max-width:100% !important;width:100% !important;
  padding-left:0 !important;padding-right:0 !important;
}
.ml-form label,
.ml-form td.title label,
.ml-form .form-group > label,
.ml-form .col-form-label{
  display:block !important;float:none !important;text-align:left !important;width:auto !important;
  max-width:100% !important;padding:0 !important;line-height:1.3 !important;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 7px 2px !important;
}
.ml-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.ml-form select{
  box-sizing:border-box !important;
  width:100% !important;height:54px;padding:0 16px;border:1.5px solid var(--line) !important;
  background:var(--field) !important;border-radius:12px !important;font-size:15px;color:var(--ink);
  outline:none;font-family:inherit;box-shadow:none !important;min-width:0 !important;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.ml-form input:focus,
.ml-form select:focus{
  border-color:var(--navy) !important;background:#fff !important;
  box-shadow:0 0 0 4px rgba(15,45,84,.12) !important;
}

/* submit button (elastic renders .btn.btn-primary or input[type=submit]) */
.ml-form .btn-primary,
.ml-form button[type=submit],
.ml-form input[type=submit]{
  width:100% !important;height:54px;margin-top:6px;border:0 !important;border-radius:12px !important;cursor:pointer;
  color:#fff !important;background:linear-gradient(135deg,var(--navy),var(--navy-2)) !important;
  font-family:inherit;font-weight:700;font-size:15.5px;letter-spacing:.2px;
  box-shadow:0 12px 24px -10px rgba(15,45,84,.55) !important;position:relative;overflow:hidden;
  transition:transform .12s,box-shadow .18s;
}
.ml-form .btn-primary::after,
.ml-form button[type=submit]::after,
.ml-form input[type=submit]{background-clip:border-box}
.ml-form .btn-primary:hover,
.ml-form button[type=submit]:hover,
.ml-form input[type=submit]:hover{transform:translateY(-1px)}
.ml-form .btn-primary:active{transform:translateY(0)}

/* gold accent strip under the button */
.ml-form .ml-submit-wrap{position:relative}

/* checkbox row / links */
.ml-form input[type=checkbox]{accent-color:var(--navy);width:17px;height:17px}
body.skin-elastic-modern a{color:var(--gold-deep)}
body.skin-elastic-modern a:hover{color:var(--navy)}
.ml-foot{margin-top:26px;text-align:center;color:var(--muted);font-size:12.5px}

/* the logo image lives in a white chip (brand panel), so keep it visible */
body.skin-elastic-modern .ml-panel #logo{display:none}

/* ---- responsive ---- */
@media (max-width:860px){
  .ml-shell{grid-template-columns:1fr}
  .ml-brand{display:none}
  .ml-panel{padding:44px 30px}
}
@media (prefers-reduced-motion:reduce){
  body.skin-elastic-modern *{transition:none !important;animation:none !important}
}

/* =====================================================================
   HIGH-PRIORITY STACKING OVERRIDE (mobile fix)
   Placed last and scoped with `html body.skin-elastic-modern` for extra
   specificity so it beats Elastic's mobile stylesheet. Forces every login
   field to render as: label on its own line, input full-width underneath,
   on all screen sizes.
   ===================================================================== */
html body.skin-elastic-modern .ml-form form,
html body.skin-elastic-modern .ml-form fieldset,
html body.skin-elastic-modern .ml-form .form-group,
html body.skin-elastic-modern .ml-form .row,
html body.skin-elastic-modern .ml-form .form-group.row{
  display:block !important;width:100% !important;max-width:100% !important;
  flex:none !important;float:none !important;
}
html body.skin-elastic-modern .ml-form .form-group > div,
html body.skin-elastic-modern .ml-form [class*="col-"]{
  display:block !important;width:100% !important;max-width:100% !important;
  flex:0 0 100% !important;float:none !important;padding-left:0 !important;padding-right:0 !important;
}
html body.skin-elastic-modern .ml-form label,
html body.skin-elastic-modern .ml-form .col-form-label,
html body.skin-elastic-modern .ml-form .form-group > label{
  display:block !important;width:100% !important;max-width:100% !important;
  float:none !important;text-align:left !important;padding:0 !important;margin:0 0 7px 2px !important;
}
html body.skin-elastic-modern .ml-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
html body.skin-elastic-modern .ml-form select{
  display:block !important;width:100% !important;max-width:100% !important;float:none !important;
}


/* Move the notification stack to the top‑right */
#messagestack {
  position: fixed !important;
  top: 20px !important;      /* distance from the top */
  right: 20px !important;    /* distance from the right */
  left: auto !important;     /* cancel any default left positioning */
  bottom: auto !important;   /* cancel any default bottom positioning */
  z-index: 9999;             /* keep it above other elements */
}

/* Optional: adjust the individual message boxes for a tighter look */
#messagestack .ui.alert {
  margin-bottom: 8px;        /* spacing between stacked messages */
}

/* Hide the message wrapper when Roundcube has nothing to say */
body.skin-elastic-modern .ml-message {
  display: none !important;
}

/* Only style + pin it when it actually contains a message */
body.skin-elastic-modern .ml-message:not(:empty) {
  display: block !important;
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 9999 !important;
  max-width: 360px;
  margin: 0 !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.15)),
    linear-gradient(140deg, var(--navy-deep), var(--navy) 55%, var(--navy-2)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  box-shadow: var(--shadow) !important;
}

body.skin-elastic-modern .ml-message a {
  color: var(--gold) !important;
  text-decoration: underline;
}

body.skin-elastic-modern .ml-message.boxerror {
  border-left: 4px solid #ff5c5c !important;
}
body.skin-elastic-modern .ml-message.boxwarning {
  border-left: 4px solid var(--gold) !important;
}
body.skin-elastic-modern .ml-message.boxinformation,
body.skin-elastic-modern .ml-message.boxnotice {
  border-left: 4px solid #5cc8ff !important;
}

body.skin-elastic-modern .ml-message .icon {
  color: var(--gold) !important;
}

body.skin-elastic-modern .ml-message a {
  color: var(--gold) !important;
  text-decoration: underline;
}