/* ============================================================
   login.css — styles for login.php. Builds on the generic
   utilities.css classes, which must load before this file.
   ============================================================ */

body {
    background: linear-gradient(160deg, #eff6ff 0%, #f8faff 45%, #ffffff 100%);
}

.login-page {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.login-card { width: 100%; max-width: 26rem; background: #ffffff; }

.login-logo-icon { display: inline-block; height: 3.8rem; width: auto; }
.login-wordmark { display: block; font-size: 1.7rem; letter-spacing: -0.01em; line-height: 1; margin-top: 0.3rem; }
.login-wordmark .brand-word-dark { color: #152839; }
.login-wordmark .brand-word-accent { color: #1B58AF; }

.login-card h1 { font-size: 1.1rem; }
.login-card p { font-size: 1.1rem; }
/* Same look as the rest of the app's .admin-field-label (app.css) — this page can't load that
   file (a lighter pre-auth page), so the values are mirrored by hand instead of shared. */
.login-label { display: block; margin-bottom: 5px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7b8ca1; }

/* Mirrors app.css's own generic input[type=...] rule (height/radius/border/focus recipe) —
   see that rule's own note on why this is a hand-kept copy rather than a shared file. */
.login-input {
    display: block; width: 100%; height: 40px; font: inherit; color: #1f2937;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 0.5rem;
    padding: 0 0.75rem; font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input::placeholder { color: #9ca3af; }
.login-input:hover { border-color: #94a3b8; }
.login-input:focus { outline: none; border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent); }
#password.login-input { padding-inline-end: 3.25rem; }

.login-eye-btn {
    position: absolute; inset-inline-end: 0.375rem; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 999px;
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.login-eye-btn svg { width: 20px; height: 20px; }
.login-eye-btn:hover { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }
.login-eye-btn:active { transform: translateY(-50%) scale(0.94); }
.login-eye-btn[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent, #3b82f6) 15%, white);
    color: var(--accent, #3b82f6);
    border-color: color-mix(in srgb, var(--accent, #3b82f6) 30%, white);
}

/* Same brightness-based hover/active as app.css's own .btn, so this page's one primary action
   behaves identically to every other form's submit button even though it can't share the file. */
.login-submit {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.625rem 1rem; margin-top: 1.5rem;
    background: var(--accent, #3b82f6); color: #ffffff; font-size: 1.1rem; font-weight: 600;
    border-radius: 0.5rem; text-align: center; cursor: pointer;
    transition: filter .15s ease;
}
.login-submit:hover { filter: brightness(0.92); }
.login-submit:active { filter: brightness(0.85); }

.icon-login {
    width: 1.65rem; height: 1.65rem; flex-shrink: 0; padding: 0.3rem;
    background: rgba(255, 255, 255, 0.2); border-radius: 999px;
    transition: background .15s ease;
}
.icon-login .arrow { transform-box: fill-box; transform-origin: center; }
.login-submit:hover .icon-login { background: rgba(255, 255, 255, 0.3); }
.login-submit:hover .icon-login .arrow { animation: login-arrow-nudge .6s ease-in-out infinite; }
@keyframes login-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }

/* Same red as the rest of the app's .admin-alert (app.css) — this page had its own separate red
   family before (#fef2f2/#b91c1c/#fecaca), unrelated to the one every other error message uses. */
.login-alert {
    display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem;
    padding: 0.65rem 0.9rem; border-radius: 0.5rem; font-size: 1rem;
    color: #8f3423; background: #fdeceb; border: 1px solid #eccfc9;
}

.login-copyright { font-size: 1.1rem; }

/* ---- Font size/weight inherited from the dashboard ----
   The login page has no preference control of its own (no authenticated user to persist one
   for) — app.js writes these same localStorage keys on every dashboard toggle purely so this
   page can inherit *something* (see login.js); authenticated pages read the DB, not localStorage. */
:root[data-font-size="large"] { font-size: 108%; }
:root[data-font-size="xlarge"] { font-size: 118%; }
:root[data-font-weight="medium"] body, :root[data-font-weight="medium"] body * { font-weight: 600 !important; }
:root[data-font-weight="bold"] body, :root[data-font-weight="bold"] body * { font-weight: 700 !important; }