/*
 * auth.css — Matte Black + Brushed Brass skin for login / register / request_link
 * Self-contained: hardcoded hex, no dependency on style.css or external vars.
 * Loaded LAST in <head> so source-order beats equal-specificity rules.
 */

/* ── Page ───────────────────────────────────────────────────── */
body {
    background: #0d0b09 !important;
    color: #e8d9b0;
}

/* ── Card ───────────────────────────────────────────────────── */
.login-container {
    background: #15110b;
    color: #e8d9b0;
    border: 1px solid rgba(201, 168, 76, 0.16);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ── Headings ───────────────────────────────────────────────── */
/* Override register.php inline <style> h2 { color:#000 } — use body h2
   which is higher specificity than a bare h2 rule */
body h2,
.login-container h2 {
    color: #e8d9b0 !important;
    text-align: center;
}

/* ── Labels ─────────────────────────────────────────────────── */
/* Lifted #cbb27e → #e0c98f (9.2:1 → ~11:1) for a crisper field hierarchy. */
.form-group label,
label {
    color: #e0c98f;
    font-weight: 500;
}

/* ── Inputs ─────────────────────────────────────────────────── */
/* The fields were the real contrast problem: a 16%-opacity border (~1.3:1)
   over a fill (#1d1810) nearly identical to the card (1.08:1) made the boxes
   vanish. Lift the fill, give the border a solid ~3.4:1 brass hairline
   (meets WCAG 1.4.11 for UI components), and add a clear focus ring. */
.form-group input,
input[type="text"],
input[type="email"],
input[type="password"] {
    background: #241d12;
    color: #e8d9b0;
    border: 1px solid #7d6a3f;
    border-radius: 10px;
    padding: 11px 12px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #e3c46a;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
}

input::placeholder {
    color: #b09a63;   /* 6:1 on the lifted fill (was ~5:1); opacity:1 stops Firefox dimming */
    opacity: 1;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.login-container button,
button[type="submit"] {
    background: #c9a84c;
    color: #0d0b09;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: none;
    border-radius: 10px;
    padding: 13px;
    width: 100%;
    cursor: pointer;
    transition: background 0.18s;
}

.login-container button:hover,
button[type="submit"]:hover {
    background: #d4aa50;
}

/* ── Bootstrap primary btn override (magic-link CTA on login.php) ── */
.login-container .btn-primary,
.btn.btn-primary {
    background-color: #c9a84c !important;
    border-color: #c9a84c !important;
    color: #0d0b09 !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.login-container .btn-primary:hover,
.btn.btn-primary:hover {
    background-color: #d4aa50 !important;
    border-color: #d4aa50 !important;
}

/* ── Links ───────────────────────────────────────────────────── */
a,
a:visited {
    color: #c9a84c;
    text-decoration: none;
}

a:hover {
    color: #d4aa50;
    text-decoration: underline;
}

/* ── Footer paragraphs ───────────────────────────────────────── */
/* style.css ships `.login-container p { color: black }` (same specificity,
   loaded earlier) which made "Need an account?" invisible on the dark card.
   Re-skin it bright here; inline-styled helper text (color:#aaa) keeps its own value.
   NOTE: the <link> to this file is versioned (auth.css?v=…) on the auth pages so
   browsers don't serve a stale cached copy that still shows the black text. */
.login-container p {
    color: #e0c98f;
}

/* ── Muted / helper text ─────────────────────────────────────── */
small,
.form-group small {
    color: #9a8a5a;
}

/* ── Divider text ("or sign in with password") ─────────────────── */
.login-container span[style] {
    color: #9a8a5a !important;
}

/* ── Error messages ──────────────────────────────────────────── */
.error-message {
    color: #e07070;
    background: rgba(180, 60, 60, 0.12);
    border: 1px solid rgba(180, 60, 60, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

/* ── "sent-box" confirmation (request_link.php) ──────────────── */
.sent-box p {
    color: #cbb27e !important;
}

.magic-icon {
    color: #c9a84c;
}

/* ── Custom modal (register.php) — override #003249 blue ────── */
.custom-modal-content {
    background-color: #15110b !important;
    color: #e8d9b0 !important;
    border: 1px solid rgba(201, 168, 76, 0.25) !important;
    border-radius: 12px;
}

.custom-modal-close {
    color: #9a8a5a !important;
}

.custom-modal-close:hover,
.custom-modal-close:focus {
    color: #c9a84c !important;
}

/* Bootstrap modal (login.php) ── */
.modal-content {
    background-color: #15110b;
    color: #e8d9b0;
    border: 1px solid rgba(201, 168, 76, 0.16);
}

.modal-header {
    border-bottom-color: rgba(201, 168, 76, 0.16);
}

.modal-footer {
    border-top-color: rgba(201, 168, 76, 0.16);
}

.modal-title {
    color: #e8d9b0;
}

.btn-close {
    filter: invert(1) brightness(0.7);
}

/* ── Hairline dividers ───────────────────────────────────────── */
hr {
    border-color: rgba(201, 168, 76, 0.16) !important;
}

/* ── Accessibility: honour reduced-motion preference ─────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}
