/* SigTech Solutions theme for Roundcube "elastic" — webmail.sigtechsolutions.com.
 *
 * MEASURED, NOT INVENTED. Every colour below is copied token-for-token from the sigtech
 * KEYCLOAK login theme, services/idp1/themes/sigtech/login/resources/css/sigtech.css,
 * so the webmail front door and the SSO page the button leads to are the same surface:
 * same navy backdrop, same #2D6CDF blue, same card. The logo is that theme's own
 * img/logo.png (625x125 white wordmark), copied byte-for-byte — never redrawn.
 *
 * Deployed to /var/www/roundcube/plugins/oidc_login/sigtech.css and pulled in by the
 * plugin (webmail_skin_css) rather than appended to the skin's compiled styles.css,
 * because that file is replaced by every Roundcube upgrade — a theme applied there
 * silently reverts to stock on the next update.
 *
 * Rules carry !important because elastic bakes its palette into compiled CSS whose
 * selectors are more specific than ours; without it the override silently loses while
 * every status code stays green.
 */

/* ── Kit tokens (verbatim from the Keycloak sigtech theme) ───────────────────── */
:root {
  --st-accent:        #2D6CDF;   /* SigTech blue — primary action */
  --st-accent-bright: #4C8BF5;   /* hover / focus */
  --st-accent-soft:   #7FB0FF;   /* links on dark */
  --st-navy-0:        #0A1220;   /* backdrop deep */
  --st-navy-1:        #0E1A2B;   /* backdrop mid */
  --st-panel:         #141F31;   /* login card */
  --st-panel-2:       #0F1826;   /* alerts / recessed */
  --st-input:         #0D1626;   /* form fields */
  --st-border:        #263650;   /* hairlines */
  --st-cloud:         #E9EFF8;   /* primary text */
  --st-muted:         #93A3BC;   /* secondary text */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LOGIN PAGE — the SigTech front door. Same radial navy gradient the realm's
 * Keycloak page paints, so clicking through to SSO is visually continuous.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.task-login {
  background: radial-gradient(1200px 820px at 50% -12%, #16263f 0%, #0e1a2b 48%, #080f1a 100%) fixed !important;
  background-size: cover !important;
  color: var(--st-cloud) !important;
}

body.task-login #layout-content {
  background: var(--st-panel) !important;
  max-width: 440px;
  margin: 8vh auto 0 !important;
  border: 1px solid var(--st-border) !important;
  border-top: 4px solid var(--st-accent) !important;   /* the realm card's top band */
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  padding: 2.2em 1.75em 1.6em !important;
}

/* the real SigTech wordmark, white-on-navy, same asset as the IdP */
body.task-login #logo {
  display: block !important;
  position: static !important;
  top: auto !important;
  margin: 0 auto 1.4em !important;
  max-height: 40px !important;
  width: auto !important;
  opacity: 1 !important;
}

body.task-login #login-form h1.product-name,
body.task-login .product-name {
  color: var(--st-cloud) !important;
  font-weight: 600;
  letter-spacing: .02em;
}

body.task-login #login-form label {
  color: var(--st-muted) !important;
  font-weight: 600;
}

body.task-login #login-form input.form-control,
body.task-login #login-form .form-control {
  background: var(--st-input) !important;
  color: var(--st-cloud) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body.task-login #login-form .form-control::placeholder { color: #6f7f98 !important; }
body.task-login #login-form .form-control:focus {
  border-color: var(--st-accent) !important;
  box-shadow: 0 0 0 2px rgba(45, 108, 223, .35) !important;
  outline: 0 !important;
}

/* ── The SSO button the oidc_login plugin injects ─────────────────────────────
 * White label on #2D6CDF measures 5.4:1 — the accent is dark enough to take light
 * text, unlike the tidyandmore and vaultmotive accents, which take ink instead. */
.loom-sso { margin: 1.2em 0; text-align: center; }

.loom-sso-btn {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  padding: .8em 1.2em !important;
  background: var(--st-accent) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 2px 14px rgba(45, 108, 223, .28);
}
.loom-sso-btn:hover,
.loom-sso-btn:focus {
  background: var(--st-accent-bright) !important;
  color: #FFFFFF !important;
}

.loom-sso-or {
  margin: .9em 0 0;
  color: var(--st-muted);
  font-size: .85em;
  letter-spacing: .06em;
}

body.task-login #rcmloginsubmit,
body.task-login .formbuttons button.mainaction {
  width: 100%;
  background: var(--st-accent) !important;
  border-color: var(--st-accent) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
body.task-login #rcmloginsubmit:hover,
body.task-login .formbuttons button.mainaction:hover {
  background: var(--st-accent-bright) !important;
  border-color: var(--st-accent-bright) !important;
}

body.task-login #login-footer {
  color: var(--st-muted) !important;
  text-align: center;
  font-size: 12px;
  border-top: 1px solid var(--st-border);
  margin-top: 1.4em;
  padding-top: 1.2em;
}

body.task-login #messagestack .error,
body.task-login #messagestack .warning {
  background: var(--st-panel-2) !important;
  color: var(--st-cloud) !important;
  border-color: var(--st-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * APP CHROME (inbox) — as far as an override on a compiled skin reaches. The
 * task rail and menu header take the navy; every accent, CTA and focus ring
 * takes SigTech blue. Generic links inside RENDERED MESSAGE BODIES are
 * deliberately left alone — recolouring those would repaint senders' own content.
 * ═══════════════════════════════════════════════════════════════════════════ */

#layout-menu,
#taskmenu { background: var(--st-navy-0) !important; }
#layout-menu .popover-header { background-color: var(--st-navy-0) !important; }
#taskmenu a {
  color: var(--st-muted) !important;
  border-bottom-color: var(--st-border) !important;
}
#taskmenu a:hover { color: var(--st-cloud) !important; }
#taskmenu a.selected,
#taskmenu a.selected:hover {
  background: var(--st-panel) !important;
  color: var(--st-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--st-accent);
}

.button.btn-primary,
a.button.btn-primary,
button.btn-primary,
input.btn-primary {
  background-color: var(--st-accent) !important;
  border-color: var(--st-accent) !important;
  color: #FFFFFF !important;
}
.button.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--st-accent-bright) !important;
  border-color: var(--st-accent-bright) !important;
  box-shadow: 0 0 0 .2rem rgba(45, 108, 223, .40) !important;
}

.listing li.selected > a,
.listing tr.selected > td,
#messagelist tr.selected > td {
  background: rgba(45, 108, 223, .12) !important;
}
.listing li.selected > a,
#messagelist tr.selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--st-accent);
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--st-accent) !important;
  box-shadow: 0 0 0 2px rgba(45, 108, 223, .30) !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--st-accent); }

#layout-menu, .menu.toolbar { border-color: var(--st-border) !important; }

/* dark colour mode: pull elastic's slate-teal surfaces onto the brand's navy */
html.dark-mode body:not(.task-login),
html.dark-mode #layout,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content { background-color: var(--st-navy-1) !important; }
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .menu.toolbar { background-color: var(--st-panel) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
 * LOGIN POLISH — added 2026-08-11 after the owner reviewed the live page.
 *
 * The SAME block is present in all four org stylesheets, differing only in the
 * --loom-* aliases below, which are bound to this organization's own tokens. It is
 * written against what elastic ACTUALLY renders, which is not what the HTML says:
 * the served login form is a <table> of label/input rows, and elastic's ui.js then
 * rewrites each row in the browser into a Bootstrap `.input-group` with an icon
 * span. Both shapes are handled here, so the fields look right whether or not that
 * JS has run.
 *
 * Three faults were reported and each is addressed:
 *   1. the icon block and the input were separate controls of different heights,
 *      with a visible seam. Fixed by making the .input-group ITSELF the bordered,
 *      rounded, filled control and stripping the border/background/radius from
 *      everything inside it — one control, one outline, one focus ring in the org
 *      accent (via :focus-within, so focusing the input lights the whole control).
 *   2. a dead vertical band between the logo and the tagline/button. See "THE
 *      OFFENDER" below for what it actually was — NOT a min-height, fixed height
 *      or flex spacer, which is why the first search for those came up empty.
 *   3. a stock Roundcube background image showing below the card. No such file
 *      exists in the skin tree, so rather than guess where it comes from, EVERY
 *      login surface is explicitly repainted and background-image is forced to
 *      none. Nothing stock can show through.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --loom-ground:       #0E1A2B;
  --loom-ground-2:     #080F1A;
  --loom-card:         #141F31;
  --loom-border:       #263650;
  --loom-input-bg:     #0D1626;
  --loom-input-border: #263650;
  --loom-text:         #E9EFF8;
  --loom-muted:        #93A3BC;
  --loom-accent:       #2D6CDF;
  --loom-accent-rgb:   45, 108, 223;
}

/* ── 3. no stock imagery, anywhere on the login page ────────────────────────── */
/* The radial navy from the top of this file is repeated here rather than replaced by the
   generic linear one — it is the same backdrop the sigtech Keycloak page paints, and the
   continuity between the two pages is the whole point of copying that theme's tokens. */
html, body.task-login {
  background: radial-gradient(1200px 820px at 50% -12%, #16263f 0%, #0e1a2b 48%, #080f1a 100%) fixed !important;
  background-size: cover !important;
  background-image: radial-gradient(1200px 820px at 50% -12%, #16263f 0%, #0e1a2b 48%, #080f1a 100%) !important;
}
body.task-login #layout,
body.task-login #layout > .content,
body.task-login #layout-menu,
body.task-login #layout-sidebar,
body.task-login #layout-list,
body.task-login .watermark {
  background-image: none !important;
  background-color: transparent !important;
}

/* ── 2. the stack: logo -> tagline -> SSO -> "or" -> fields -> LOGIN ────────── */
body.task-login #layout-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: var(--loom-card) !important;
}
body.task-login #logo {
  order: 1;
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  display: block !important;
  margin: 0 auto 1rem !important;
  max-height: 44px !important;
  width: auto !important;
  opacity: 1 !important;
}
body.task-login #login-form { order: 2; margin: 0 !important; }

/* THE OFFENDER, killed at the source. Elastic ships:
 *     .task-login #logo { display:inline-block; position:relative; top:16vh; max-height:100px }
 *     #login-form       { margin:0 auto; top:20vh; width:95%; max-width:320px; position:relative }
 * Both are position:relative with a viewport-sized `top`, which DISPLACES each element
 * downward while leaving its layout box where it was — so the card grows by 16vh + 20vh
 * of nothing. That is the "giant vertical void", and it is not a min-height, a fixed
 * height or a flex spacer, which is why looking for those found nothing. Overriding
 * #logo alone (the first attempt) left the form's own 20vh in place and the band stayed.
 * Both are returned to static flow here. No negative margins are used anywhere. */
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
}
/* The card hugs its content: #layout-content is flex:6 inside #layout, which would
   otherwise stretch it to the viewport. */
body.task-login #layout-content {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  height: auto !important;
  max-width: 440px !important;
  margin: 8vh auto 0 !important;
  padding: 2.2em 1.75em 1.6em !important;
}

/* The login table becomes a plain vertical stack so no table geometry can reintroduce a
   gap. NOTE the deliberate absence of a blanket `td` rule: elastic's ui.js hides the label
   cell inline once it has moved the label text into the input's placeholder, and a
   `display: block !important` on every td OVERRIDES that inline style — which is exactly
   how a visible "Username" label ended up sitting above a field already placeholdered
   "Username". Only td.input is forced to block; td.title is left to elastic, and is
   additionally made screen-reader-only below so it can never become visible again. */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td.input { display: block !important; width: 100% !important; }
body.task-login #login-form table { margin: 0 !important; border-spacing: 0 !important; }

/* Labels stay in the DOM for screen readers and for the input's `for=` association, but
   carry no visible box. The placeholder and the in-field icon are the visible affordance.
   This is the standard sr-only pattern, not display:none, which would remove them from
   the accessibility tree entirely. */
body.task-login #login-form td.title,
body.task-login #login-form td.title label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The target stack, with the spacing the owner specified:
   logo -> 12px -> tagline -> 24px -> SSO -> divider -> Username -> 12px -> Password
   -> LOGIN -> footer. Every gap below is a margin on content; none is a reserved band. */
body.task-login #logo { margin: 0 auto 12px !important; }
body.task-login #login-form::before { margin-bottom: 24px !important; }
body.task-login .loom-sso { margin: 0 !important; }
body.task-login .loom-sso-or { margin: 10px 0 18px !important; }
/* The inter-field gap must NOT live on td.input: elastic makes that very <td> the
   input-group, so its padding sits INSIDE the rounded border and leaves 12px of dead
   space at the bottom of each control (measured: a 49px field in a 63px box). The gap
   belongs to the ROW. */
body.task-login #login-form td.input { padding: 0 !important; }
body.task-login #login-form tr { margin: 0 0 12px !important; }
body.task-login p.formbuttons { margin: 4px 0 0 !important; }
body.task-login #login-footer { margin-top: 18px !important; padding-top: 14px !important; }

/* ── 1. one unified, comfortable field control ──────────────────────────────── */
/* NOTE THE td.input.input-group SELECTOR. Elastic's ui.js does not WRAP the input in a
 * new element — it adds `input-group input-group-lg` to the <td> that already holds it.
 * So the layout section's `td.input { display: block }` and this rule are fighting over
 * the SAME element, and `td.input` wins on specificity no matter which is declared later.
 * That flattened the flex row: the icon span took a full line at 387px wide and the input
 * collapsed to Bootstrap's `width: 1%` — 15px — on the line beneath it. Measured in a real
 * headless Chrome, not guessed. Naming both classes here outranks it. */
body.task-login #login-form td.input.input-group,
body.task-login #login-form .input-group {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  background: var(--loom-input-bg) !important;
  border: 1px solid var(--loom-input-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
body.task-login #login-form .input-group:focus-within {
  border-color: var(--loom-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--loom-accent-rgb), .35) !important;
}
/* everything INSIDE the group is a bare part of one control, never its own box */
body.task-login #login-form .input-group > *,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append,
body.task-login #login-form .input-group-text {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body.task-login #login-form .input-group .input-group-text,
body.task-login #login-form .input-group > .icon,
body.task-login #login-form .input-group-prepend .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-width: 44px;
  height: auto !important;
  padding: 0 !important;
  color: var(--loom-muted) !important;
}
/* the input itself: comfortable padding, no second outline, full height of the group */
body.task-login #login-form input.form-control,
body.task-login #login-form .form-control {
  height: auto !important;
  min-height: 0 !important;
  padding: 13px 15px !important;
  line-height: 1.3 !important;
  background: var(--loom-input-bg) !important;
  color: var(--loom-text) !important;
  border: 1px solid var(--loom-input-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  flex: 1 1 auto;
}
/* inside a group the input contributes no border of its own — the group owns it */
body.task-login #login-form .input-group input.form-control,
body.task-login #login-form .input-group .form-control {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
  /* Bootstrap gives .input-group > .form-control `width: 1%`, which is what actually
     produced the 15px-wide field once the row was flexing again. */
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
/* the icon sits INSIDE the control and provides the left gutter, so it must not also
   stretch to the full row width */
body.task-login #login-form .input-group > .input-group-prepend,
body.task-login #login-form .input-group > .input-group-append {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}
body.task-login #login-form .form-control:focus {
  border-color: var(--loom-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--loom-accent-rgb), .35) !important;
  outline: 0 !important;
}
body.task-login #login-form .input-group .form-control:focus {
  box-shadow: none !important;   /* the ring belongs to the group, not the input */
}
body.task-login #rcmloginsubmit,
body.task-login .formbuttons button.mainaction {
  padding: 13px 16px !important;
  border-radius: 10px !important;
}

/* No tagline sits between the logo and the button in this organization's card, so the
   24px the spec puts under the tagline is carried here instead. vaultmotive and
   tidyandmore already get it from their own ::before block. */
body.task-login .loom-sso { margin-top: 12px !important; }