/* Tidy & More theme for Roundcube "elastic" — webmail.tidyandmore.com.
 *
 * MEASURED, NOT INVENTED. Every colour is copied token-for-token from the tidyandmore
 * KEYCLOAK login theme, services/idp1/themes/tidyandmore/login/resources/css/
 * tidyandmore.css, so the webmail front door and the SSO page the button leads to are
 * the same surface.
 *
 * NO IMAGE ASSETS AT ALL, DELIBERATELY. This business has no branding. The Keycloak
 * theme records the same decision and draws a pure-CSS TEXT wordmark; this file does the
 * same. Roundcube would otherwise paint elastic's stock ROUNDCUBE logo — a third party's
 * mark on a business's front door — so <img id="logo"> is hidden outright and the
 * wordmark is drawn in its place. Nothing is invented: no logo, no icon, no tagline.
 *
 * CONTRAST, carried over verbatim from the Keycloak theme's own working:
 *   #5BA3D6 on white measures 2.74:1 and FAILS WCAG AA for normal text. So the accent is
 *   used as a FILL that takes DARK ink as its label (#0E1C26 on #5BA3D6 = 6.3:1, and
 *   4.9:1 on the #4A8FC2 hover), and interactive TEXT on white uses the deeper #2F79B4
 *   (4.65:1). If white label text on the accent is ever wanted instead, darken the FILL
 *   to #2F79B4 — do not just swap the label colour on #5BA3D6.
 *
 * THIS IS THE ONLY LIGHT INSTANCE on webmail1; the other three are dark. Elastic's own
 * light palette is the base here, so this file overrides far less than its siblings — it
 * repaints the ground, the card, the accent and the wordmark, and otherwise lets the
 * stock light skin be the light skin.
 *
 * Deployed to /var/www/roundcube/plugins/oidc_login/tidyandmore.css and pulled in by the
 * plugin (webmail_skin_css), never appended to the skin's compiled styles.css — that file
 * is replaced by every Roundcube upgrade and a theme applied there reverts to stock.
 */

/* ── Kit tokens (verbatim from the Keycloak tidyandmore theme) ───────────────── */
:root {
  --tm-blue:        #5BA3D6;   /* THE light blue — button fill, rules, focus halo */
  --tm-blue-hover:  #4A8FC2;   /* hover/active lift ONLY — never a base colour */
  --tm-blue-deep:   #2F79B4;   /* interactive TEXT on white (links, focus border) */
  --tm-blue-deeper: #1F5C8C;   /* link hover */
  --tm-blue-tint:   #EAF3FA;   /* soft accent wash — alerts, recessed surfaces */
  --tm-ground:      #F5F9FC;   /* page ground — near-white, cool cast */
  --tm-ground-2:    #E8F0F7;   /* ground low stop (very subtle vertical fall) */
  --tm-card:        #FFFFFF;   /* login card */
  --tm-border:      #DCE7F0;   /* hairlines on white */
  --tm-input-border:#B7C8D6;   /* form field boundary — darker than the hairline */
  --tm-ink:         #1F2A33;   /* primary text (14.6:1 on white) */
  --tm-ink-strong:  #0E1C26;   /* label on the accent fill (6.3:1 on #5BA3D6) */
  --tm-muted:       #5C6B78;   /* secondary text (5.5:1 on white) */
  --tm-placeholder: #7B8A99;   /* placeholder hint text */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LOGIN PAGE — the Tidy & More front door
 * ═══════════════════════════════════════════════════════════════════════════ */

body.task-login {
  background: linear-gradient(180deg, var(--tm-ground) 0%, var(--tm-ground-2) 100%) fixed !important;
  background-size: cover !important;
  color: var(--tm-ink) !important;
}

body.task-login #layout-content {
  background: var(--tm-card) !important;
  max-width: 420px;
  margin: 9vh auto 0 !important;
  border: 1px solid var(--tm-border) !important;
  border-top: 4px solid var(--tm-blue) !important;   /* the realm card's top band */
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(31, 42, 51, .10);
  padding: 2.2em 1.75em 1.6em !important;
}

/* NO LOGO EXISTS. Hide elastic's stock Roundcube mark rather than let a third party's
 * logo stand in for this business, and draw the wordmark as text. */
body.task-login #logo { display: none !important; }

/* The wordmark AND the thin accent rule beneath it are ONE ::before box: the rule is
 * that box's own bottom border, and the box is shrink-wrapped to the text and centred.
 * Doing it that way rather than as a second ::after pseudo-element matters — ::after
 * renders at the END of the form, below the sign-in button, so an accent rule drawn
 * there would sit in the wrong place entirely. (`order` would not rescue it either:
 * #login-form is block flow, not a flex container, so `order` is simply ignored.) */
body.task-login #login-form::before {
  content: "Tidy & More";
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  text-align: center;
  color: var(--tm-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .01em;
  padding-bottom: .35em;
  margin: 0 auto 1.5em;
  border-bottom: 3px solid var(--tm-blue);
}

body.task-login #login-form h1.product-name,
body.task-login .product-name {
  color: var(--tm-ink) !important;
  font-weight: 600;
}

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

body.task-login #login-form input.form-control,
body.task-login #login-form .form-control {
  background: var(--tm-card) !important;
  color: var(--tm-ink) !important;
  border: 1px solid var(--tm-input-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body.task-login #login-form .form-control::placeholder { color: var(--tm-placeholder) !important; }
body.task-login #login-form .form-control:focus {
  border-color: var(--tm-blue-deep) !important;
  box-shadow: 0 0 0 2px rgba(91, 163, 214, .35) !important;
  outline: 0 !important;
}

/* ── The SSO button the oidc_login plugin injects ─────────────────────────────
 * Accent FILL with DARK ink label — 6.3:1. See the contrast note at the top: white
 * on #5BA3D6 would be 2.2:1 and is not an option. */
body.task-login .loom-sso { margin: 1.1em 0 0; text-align: center; }

body.task-login .loom-sso-btn {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  padding: .8em 1.2em !important;
  background: var(--tm-blue) !important;
  color: var(--tm-ink-strong) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-align: center;
  text-decoration: none !important;
}
body.task-login .loom-sso-btn:hover,
body.task-login .loom-sso-btn:focus {
  background: var(--tm-blue-hover) !important;
  color: var(--tm-ink-strong) !important;
}

body.task-login .loom-sso-or {
  margin: .9em 0 0;
  color: var(--tm-muted);
  font-size: .85em;
  letter-spacing: .04em;
  text-align: center;
}

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

body.task-login a { color: var(--tm-blue-deep) !important; }
body.task-login a:hover { color: var(--tm-blue-deeper) !important; }

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

body.task-login #messagestack .error,
body.task-login #messagestack .warning {
  background: var(--tm-blue-tint) !important;
  color: var(--tm-ink) !important;
  border-color: var(--tm-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * APP CHROME (inbox). This is the only LIGHT instance on the box, and elastic's
 * stock light skin is already close — so this section is deliberately small:
 * the accent moves to the light blue, and nothing else is repainted. Generic
 * links inside RENDERED MESSAGE BODIES are left alone; recolouring those would
 * repaint senders' own content.
 * ═══════════════════════════════════════════════════════════════════════════ */

.button.btn-primary,
a.button.btn-primary,
button.btn-primary,
input.btn-primary {
  background-color: var(--tm-blue) !important;
  border-color: var(--tm-blue) !important;
  color: var(--tm-ink-strong) !important;
}
.button.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--tm-blue-hover) !important;
  border-color: var(--tm-blue-hover) !important;
  color: var(--tm-ink-strong) !important;
  box-shadow: 0 0 0 .2rem rgba(91, 163, 214, .40) !important;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
 * 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:       #F5F9FC;
  --loom-ground-2:     #E8F0F7;
  --loom-card:         #FFFFFF;
  --loom-border:       #DCE7F0;
  --loom-input-bg:     #FFFFFF;
  --loom-input-border: #B7C8D6;
  --loom-text:         #1F2A33;
  --loom-muted:        #5C6B78;
  --loom-accent:       #5BA3D6;
  --loom-accent-rgb:   91, 163, 214;
}

/* ── 3. no stock imagery, anywhere on the login page ────────────────────────── */
html, body.task-login {
  background: linear-gradient(180deg, var(--loom-ground) 0%, var(--loom-ground-2) 100%) fixed !important;
  background-size: cover !important;
  background-image: linear-gradient(180deg, var(--loom-ground) 0%, var(--loom-ground-2) 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;
}

/* RE-ASSERTED LAST, ON PURPOSE. The LOGIN POLISH block above returns #logo to static flow
 * with `display: block !important` — which, for this organization, put ELASTIC'S STOCK
 * ROUNDCUBE MARK back on the page. A screenshot of the live page caught it. This business
 * has no logo and must not borrow one; the CSS wordmark above is the whole identity. */
body.task-login #logo { display: none !important; }