/* «ادخل» — the sign-in page, and only it.
 *
 * Loaded by templates/admin_new/login.html and by nothing else, so every rule
 * here is scoped by delivery rather than by hoping a class name stays unique.
 *
 * Every colour is a token from admin-bridge.css. There is no second palette
 * here and there must not be one: this codebase is a record of what two
 * spellings of one colour cost, and a login page is exactly the sort of
 * one-off that grows its own.
 */

/* The card is the only thing on the page, so the page is a centring context.
 * `min-height: 100svh` and not `100vh`: on a phone the browser's own chrome
 * makes `vh` taller than the visible area, which pushes the submit button
 * under the address bar on the one screen where it is the only control. */
.ec-login-body {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
    background: var(--field);
}

.ec-login {
    width: 100%;
    max-width: 26rem;
}

.ec-login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2rem 1.75rem 1.75rem;
    /* Two shadows rather than one: a tight contact shadow so the card sits on
     * the page, and a wide soft one so it lifts off it. A single large blur
     * reads as a smudge in dark mode, where --shadow is nearly opaque. */
    box-shadow: 0 1px 2px var(--shadow), 0 18px 40px -24px var(--shadow);
}

/* ------------------------------------------------------------------- brand */

.ec-login-brand {
    text-align: center;
    /* The identity and the form are two things, not one stack: at 1.5rem the
       first label read as a third line of the greeting. */
    margin-bottom: 1.9rem;
}

/* The one saturated brand element on the page. Everything else is neutral, so
 * the mark is what says whose panel this is -- the same discipline the send
 * button gets on the composer (CLAUDE.md 69). */
.ec-login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    margin-bottom: .9rem;
}

.ec-login-mark svg { width: 1.75rem; height: 1.75rem; }

.ec-login-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}

.ec-login-sub {
    margin: .35rem 0 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------ errors */

/* Tinted, bordered AND worded. Colour is never the only signal: the border
 * survives greyscale and the sentence survives a screen reader, which is what
 * role="alert" on the element is for. */
.ec-login-error {
    margin: 0 0 1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--danger);
    border-radius: 9px;
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--ink);
    font-size: .85rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------------ fields */

.ec-login-field { margin-bottom: 1rem; }

.ec-login-field > label {
    display: block;
    margin-bottom: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
}

/* 1rem, never smaller: iOS Safari ZOOMS the page on focus for anything under
 * 16px, which on a login form means the field you just tapped scrolls itself
 * off screen. The panel's own inputs are .88rem and are read on a desk. */
.ec-login-card input[type="text"],
.ec-login-card input[type="password"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;             /* the touch floor, on a two-control page */
    padding: .6rem .85rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--input-bg);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ec-login-card input::placeholder { color: var(--ink-dim); }

.ec-login-card input:hover { border-color: var(--control-edge); }

/* A ring, not a bare `outline: none`. Both states are set: :focus fires on a
 * click too, and the keyboard case is the one that must be unmissable. */
.ec-login-card input:focus,
.ec-login-card input:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.ec-login-card input[aria-invalid="true"] { border-color: var(--danger); }

/* ------------------------------------------------------- the reveal button */

.ec-login-secret { position: relative; }

/* Inset on the INLINE end, so RTL and LTR both put it at the far edge without
 * a second rule. The input is padded to match, or the glyph sits on the text. */
.ec-login-secret input { padding-inline-end: 3rem; }

.ec-login-peek {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 2.9rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ink-muted);
    border-radius: 9px;
    transition: color .15s ease;
}

.ec-login-peek:hover { color: var(--ink); }

.ec-login-peek:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.ec-login-peek svg { width: 1.15rem; height: 1.15rem; }

/* Pressed means the password is VISIBLE, so the eye is the struck-through one:
 * the icon shows the state, not the action, which is the way every browser's
 * own control reads. */
.ec-login-peek .ec-login-peek-slash { opacity: 0; }
.ec-login-peek[aria-pressed="true"] .ec-login-peek-slash { opacity: 1; }
.ec-login-peek[aria-pressed="true"] { color: var(--brand); }

/* ------------------------------------------------------------------ submit */

/* The primary rung of CLAUDE.md 98's ladder -- filled brand, white ink, no
 * border -- and full width because it is the only action on the page. */
.ec-login-go {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 1.35rem;
    padding: .7rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--brand);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}

.ec-login-go:hover { filter: brightness(1.08); }

.ec-login-go:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand);
}

/* Pressed, and while the form is in flight. `[disabled]` is what login.js sets
 * on submit, so a slow network cannot be turned into two sign-in attempts. */
.ec-login-go:active { filter: brightness(.94); }
.ec-login-go[disabled] { opacity: .65; cursor: default; filter: none; }

/* -------------------------------------------------------------------- foot */

.ec-login-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.1rem;
}

.ec-login-theme {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink-muted);
    transition: color .15s ease, border-color .15s ease;
}

.ec-login-theme:hover { color: var(--ink); border-color: var(--line); }
.ec-login-theme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ec-login-theme svg { width: 1.05rem; height: 1.05rem; }

/* One icon at a time, and it shows what a press would GIVE you -- a moon on
 * the light theme, a sun on the dark one. */
.ec-login-theme .ec-login-sun { display: none; }
[data-theme-version="dark"] .ec-login-theme .ec-login-moon { display: none; }
[data-theme-version="dark"] .ec-login-theme .ec-login-sun { display: block; }

.ec-login-other {
    font-size: .82rem;
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.ec-login-other:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.ec-login-other:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
    .ec-login-card,
    .ec-login-card input,
    .ec-login-go,
    .ec-login-peek,
    .ec-login-theme,
    .ec-login-other { transition: none; }
}