/* BPHOST webmail skin — extends Elastic.
 *
 * Only the login screen is restyled, and only by overriding: everything else is
 * inherited from Elastic so a Roundcube upgrade does not have to be re-themed.
 * The palette is lifted from the Core Host Panel sign-in page so a customer
 * moving between the panel and their mail sees one product, not two.
 */

:root {
  --bp-ink: #160509;
  --bp-fg: #efe8ea;
  --bp-muted: #ab99a0;
  --bp-edge: rgba(255, 255, 255, .09);
  --bp-edge-lit: rgba(255, 255, 255, .17);
  --bp-brand: #a80400;
  --bp-brand-lit: #e8463e;
}

/* ---- the chamber -------------------------------------------------------- */
/* Lit from above: warmer red at the top falling to near-black at the foot, so
   the ground has depth instead of reading as one flat wash. */
body.task-login,
body.task-login #layout,
body.task-login #layout-content {
  background: radial-gradient(120% 90% at 50% -12%, #4f1015 0%, #2c0a10 42%, #190609 76%, #100407 100%) !important;
  color: var(--bp-fg);
}

/* The dot matrix, masked to a soft ellipse so it reads as atmosphere rather
   than a busy sheet. Pseudo-element so no template change is needed. */
body.task-login #layout-content::before {
  content: "";
  position: fixed;
  inset: -2px;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 30%, transparent 78%);
}

/* A lighter crimson bloom top-left and a deep pool bottom-right. On a red
   ground these work by contrast of lightness, not hue. */
body.task-login #layout-content::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52vw 52vw at 8% 2%, rgba(255,96,84,.20), transparent 60%),
    radial-gradient(52vw 52vw at 94% 100%, rgba(60,0,4,.55), transparent 66%),
    radial-gradient(ellipse 72% 62% at 50% 40%, transparent 42%, rgba(8,2,4,.6) 100%);
}

/* ---- mark --------------------------------------------------------------- */
body.task-login #logo {
  content: url("logo.png");
  max-height: 68px;
  width: auto;
  filter: drop-shadow(0 4px 22px rgba(232, 70, 62, .24));
}

/* The product name, set as a letterspaced caption under the mark. */
body.task-login #login-form::before {
  content: "CORE HOST PANEL - WEBMAIL";
  display: block;
  margin: 14px 0 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  color: #cbd0da;
}

/* ---- card --------------------------------------------------------------- */
/* Warm dark charcoal with a red bias, so the card belongs to the ground
   instead of reading as a cool-grey chip dropped onto it. */
body.task-login #login-form {
  position: relative;
  z-index: 1;
  max-width: 400px;
  margin: 0 auto;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40,26,30,.66), rgba(18,9,12,.74));
  border: 1px solid var(--bp-edge);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

body.task-login #login-form .row,
body.task-login #login-form table,
body.task-login #login-form td { background: transparent !important; border: 0 !important; }

body.task-login #login-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bp-muted);
}

/* ---- fields ------------------------------------------------------------- */
body.task-login #login-form input.form-control {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(10,4,6,.55) !important;
  border: 1px solid var(--bp-edge) !important;
  color: var(--bp-fg) !important;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.task-login #login-form input.form-control::placeholder { color: #7c6670; }
body.task-login #login-form input.form-control:focus {
  border-color: var(--bp-brand-lit) !important;
  box-shadow: 0 0 0 3px rgba(232,70,62,.16);
  outline: none;
}

/* ---- action ------------------------------------------------------------- */
body.task-login #login-form .formbuttons { margin-top: 18px; }
body.task-login #rcmloginsubmit {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--bp-brand-lit), var(--bp-brand)) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
body.task-login #rcmloginsubmit:hover { filter: brightness(1.08); }
body.task-login #rcmloginsubmit:active { transform: translateY(1px); }

/* ---- footer ------------------------------------------------------------- */
body.task-login #login-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bp-edge);
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--bp-muted);
}
body.task-login #login-footer::after {
  content: "Your corner of the web, served from ours.";
}

/* ---- form layout -------------------------------------------------------- */
/* Elastic lays the login out as a table with an icon rendered on each label
   cell. Stacking the cells gives the panel's label-above-field rhythm; the
   icon is dropped because the label already says what the field is, and left
   in place it detaches into a floating block once the cells stack. */
body.task-login #login-form table,
body.task-login #login-form tbody { display: block; width: 100%; }

body.task-login #login-form tr { display: block; margin-bottom: 14px; }

body.task-login #login-form td { display: block; width: 100%; padding: 0 !important; }

body.task-login #login-form td.title { margin-bottom: 6px; }

body.task-login #login-form td.title label {
  display: block;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bp-muted);
  background: none !important;
  min-height: 0;
  height: auto;
}

/* the skin's icon glyph and its chip background */
body.task-login #login-form td.title label::before,
body.task-login #login-form td.title label::after,
body.task-login #login-form td.title::before {
  display: none !important;
  content: none !important;
}

/* ---- footer ------------------------------------------------------------- */
/* The element already contains the product name as a text node. Collapse it
   rather than trying to remove it, then set our own line, so the result does
   not read "Webmail Your corner of the web...". */
body.task-login #login-footer { font-size: 0 !important; }
body.task-login #login-footer::after {
  content: "Your corner of the web, served from ours.";
  font-size: 12px;
  font-style: italic;
  color: var(--bp-muted);
}

/* ---- field group -------------------------------------------------------- */
/* Elastic injects a Bootstrap input-group at runtime: an <i class="input-group-text">
   icon followed by the input. Stacking the table cells earlier broke that flex
   row, leaving the icon floating above the field as a grey chip. Restore the row
   and treat the icon as the field's left cap, which is how the panel draws it. */
body.task-login #login-form .input-group {
  display: flex !important;
  flex-wrap: nowrap;
  width: 100%;
}

body.task-login #login-form .input-group-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex: 0 0 40px;
  padding: 0;
  background: rgba(10, 4, 6, .55) !important;
  border: 1px solid var(--bp-edge) !important;
  border-right: 0 !important;
  border-radius: 11px 0 0 11px !important;
  color: var(--bp-muted) !important;
  font-size: 13px;
}

body.task-login #login-form .input-group input.form-control {
  border-radius: 0 11px 11px 0 !important;
  border-left: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- page footer -------------------------------------------------------- */
/* Mirrors the panel's sign-in footer so the two pages end the same way. */
.bp-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  padding: 14px 24px;
  background: rgba(8, 2, 4, .55);
  border-top: 1px solid var(--bp-edge);
  backdrop-filter: blur(6px);
  font-size: 12px;
  color: var(--bp-muted);
}
.bp-foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: 960px; margin: 0 auto;
}
.bp-foot-brand { color: var(--bp-muted); font-weight: 600; }
.bp-foot-sep { margin: 0 8px; opacity: .5; }
.bp-foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bp-foot-links a { color: var(--bp-muted); text-decoration: none; transition: color .15s; }
.bp-foot-links a:hover { color: var(--bp-brand-lit); }

@media (max-width: 640px) {
  .bp-foot-inner { flex-direction: column; text-align: center; gap: 10px; }
  .bp-foot-links { justify-content: center; }
}