@import url("../../elastic/styles/styles.min.css");

/* Pyract Mail skin — logo sizing + Forge button theme.
 *
 * WRITTEN AGAINST THE REAL DOM, not assumed selectors. Two traps here, both of which
 * silently no-op rather than erroring, so the CSS "deploys fine" and nothing changes:
 *
 *  1. #logo is a SIBLING of #login-form, not a child. `#login-form #logo` matches
 *     NOTHING. Elastic styles it as `.task-login #logo`, and constrains it by
 *     MAX-HEIGHT (100px), not max-width — so a max-width rule is ignored even when
 *     the selector is right. At the wordmark's 3.2:1 ratio, 100px tall renders
 *     ~323px wide, which is why it looked oversized.
 *
 *  2. The login button is `class="button mainaction submit"` in the HTML. Elastic's
 *     ui.js REWRITES it at runtime:
 *        $('button.mainaction').addClass('btn-primary')
 *        $('#rcmloginsubmit').addClass('btn-lg text-uppercase w-100')
 *     so the live element is .btn.btn-primary.btn-lg.text-uppercase.w-100 and its
 *     shape comes from Bootstrap, loaded BEFORE this file. Targeting `.button` or
 *     `.mainaction` alone does nothing useful.
 *
 * Forge theme (source: pyract-forge/tailwind.config.ts). Forge's UI brand is blue,
 * not the wordmark's orange:
 *   brand-500 #3b82f6 | brand-600 #2563eb (primary) | brand-700 #1d4ed8 (hover)
 *   slate-100 #f1f5f9 | slate-300 #cbd5e1 | slate-700 #334155
 * Forge buttons are rounded-lg (.5rem), font-semibold, and NORMAL CASE — never
 * uppercase, which is the most visible mismatch elastic introduces.
 */
:root {
	--pf-brand:       #2563eb;
	--pf-brand-hover: #1d4ed8;
	--pf-brand-light: #3b82f6;
	--pf-slate-100:   #f1f5f9;
	--pf-slate-300:   #cbd5e1;
	--pf-slate-700:   #334155;
	--pf-radius:      0.5rem;
	--pf-logo-h:      44px;   /* rendered logo height */
	--pf-logo-slot:   100px;  /* vertical space elastic originally gave it */
	--pf-logo-shift:  56px;   /* slot - height; keep in step with the two above */
	--pf-logo-top:    16vh;   /* elastic's own offset for #logo */
}

/* ── Login logo ─────────────────────────────────────────────────────────────
 * Elastic sizes this with MAX-HEIGHT (100px), not max-width, and #logo is a SIBLING of
 * #login-form — so `#login-form #logo { max-width: ... }` matches nothing at all.
 *
 * #logo (top:16vh) and #login-form (top:20vh) are both position:relative, but the form
 * still sits in NORMAL FLOW after the logo. So the logo's box height sets where the form
 * lands, while its `top` only moves it visually. Two corrections are needed, not one:
 *
 *   margin-bottom  re-reserves the 56px the shrunken logo no longer occupies, so the
 *                  form stays at its original height instead of riding up.
 *   top + shift    moves the logo DOWN by that same 56px. Without this the form is
 *                  right but the logo stays pinned where a 100px logo started, leaving
 *                  a gap; with it, the logo's BOTTOM edge lands exactly where it used
 *                  to, so logo and form keep their original spacing and move as a pair.
 *
 * To resize: set --pf-logo-h and --pf-logo-shift (= slot - height). Nothing else moves.
 */
.task-login #logo {
	max-height: var(--pf-logo-h);
	max-width: 88%;
	height: auto;
	width: auto;
	top: calc(var(--pf-logo-top) + var(--pf-logo-shift));
	margin-bottom: var(--pf-logo-shift);
}

/* ── Buttons: Forge shape ───────────────────────────────────────────────────
 * text-transform needs !important purely to beat Bootstrap's .text-uppercase,
 * which is itself !important — this is not defensive over-reach. */
.btn,
button.btn,
a.btn,
input.btn,
#rcmloginsubmit.btn {
	border-radius: var(--pf-radius);
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: 0;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Bootstrap's .btn-lg makes the login button oversized and loud; bring it back to
 * Forge's proportions without touching its full-width (.w-100) behaviour. */
#rcmloginsubmit.btn.btn-lg,
.btn.btn-lg {
	font-size: 0.95rem;
	padding: 0.6rem 1rem;
	border-radius: var(--pf-radius);
	line-height: 1.35;
}

/* ── Primary ──────────────────────────────────────────────────────────────── */
button.btn.btn-primary,
a.btn.btn-primary,
input.btn.btn-primary,
#rcmloginsubmit.btn.btn-primary {
	background-color: var(--pf-brand);
	border-color: var(--pf-brand);
	color: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
button.btn.btn-primary:hover,
a.btn.btn-primary:hover,
input.btn.btn-primary:hover,
button.btn.btn-primary:focus,
a.btn.btn-primary:focus,
input.btn.btn-primary:focus,
#rcmloginsubmit.btn.btn-primary:hover,
#rcmloginsubmit.btn.btn-primary:focus {
	background-color: var(--pf-brand-hover);
	border-color: var(--pf-brand-hover);
	color: #fff;
}

/* ── Secondary (elastic's JS gives every non-primary button .btn-secondary) ── */
button.btn.btn-secondary,
a.btn.btn-secondary,
input.btn.btn-secondary {
	background-color: #fff;
	border: 1px solid var(--pf-slate-300);
	color: var(--pf-slate-700);
}
button.btn.btn-secondary:hover,
a.btn.btn-secondary:hover,
input.btn.btn-secondary:hover {
	background-color: var(--pf-slate-100);
	border-color: var(--pf-slate-300);
	color: var(--pf-slate-700);
}

/* ── Focus ring in the brand colour ─────────────────────────────────────────*/
.btn:focus,
.btn.btn-primary:focus,
.form-control:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
.form-control:focus {
	border-color: var(--pf-brand-light);
}

/* ── Accents ────────────────────────────────────────────────────────────────*/
#taskmenu a .badge,
.listing li a .unreadcount,
.menu a.active .unreadcount {
	background-color: var(--pf-brand);
	color: #fff;
}