/*
 * Anvil-styled auth pages.
 *
 * The visual spec mirrors @anvil/react components — Input, Button, Checkbox —
 * resolved against @anvil/design-tokens dark.css. Token values are inlined
 * here because Django templates can't import from frontend/node_modules.
 *
 * Every component selector is scoped under .anvil-card so the specificity
 * (≥ 0,2,0) beats both Materializecss (e.g. `form input[type=password]`,
 * specificity 0,1,2) and the legacy !important rules in static/css/style.css.
 * Plain `.anvil-input` (0,1,0) loses to `form input[type=password]` (0,1,2)
 * even with !important — !important resolves by specificity once both sides
 * have it.
 */

:root {
    /* @anvil/design-tokens dark.css */
    --anvil-background: #0e1016;
    --anvil-foreground: #d9dbe3;
    --anvil-foreground-emphasis: #5f9efc;
    --anvil-muted-foreground: #8a8f99;
    --anvil-card-background: #1c1e26;
    --anvil-border: rgba(255, 255, 255, 0.12);
    --anvil-input: rgba(255, 255, 255, 0.05);
    --anvil-input-hover: rgba(255, 255, 255, 0.1);
    --anvil-selected: rgba(255, 255, 255, 0.15);
    --anvil-hover: rgba(255, 255, 255, 0.05);
    --anvil-primary-background: #0055ff;
    --anvil-primary-foreground: #d9dbe3;
    --anvil-ring-border: #0055ff;
    --anvil-error: #d83b55;
    --anvil-radius: 4px;
    --anvil-font-sans: Inter, system-ui, sans-serif;
}

/* Page chrome. */
html, body { height: 100%; }
body {
    background-color: var(--anvil-background) !important;
    margin: 0 !important;
    min-height: 100vh !important;
}

/* Vertically + horizontally centered column. */
.auth-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 24px !important;
    gap: 24px !important;
}

.auth-logo {
    display: block;
    height: 32px;
    width: auto;
}

.auth-version {
    color: var(--anvil-muted-foreground);
    font-family: var(--anvil-font-sans);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.02em;
    opacity: 0.6;
    user-select: text;
}

/* ─ Card ─ */
.anvil-card {
    background: var(--anvil-card-background);
    border: 1px solid var(--anvil-border);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    margin: 0;
    font-family: var(--anvil-font-sans);
    color: var(--anvil-foreground);
}

.anvil-card h1 {
    color: var(--anvil-foreground);
    font-family: var(--anvil-font-sans);
    font-size: 18px;       /* Anvil text-lg */
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 24px;
    text-align: left;
}

/* Descriptive paragraph under the heading (Anvil text-muted-foreground text-xs). */
.anvil-card p.anvil-description {
    color: var(--anvil-muted-foreground);
    font-family: var(--anvil-font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin: -16px 0 24px;
    text-align: left;
}

/* Centered status icon (success / error) sitting above the heading. */
.anvil-card .anvil-status-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.anvil-card .anvil-field { margin-bottom: 16px; }

/* Hide labels generated by django-material / allauth helper text. */
.anvil-card .anvil-field .helper-text,
.anvil-card .anvil-field > label:not(.anvil-label) { display: none; }

.anvil-card .anvil-label {
    display: block;
    color: var(--anvil-foreground);
    font-family: var(--anvil-font-sans);
    font-size: 12px;       /* Anvil Checkbox label text-xs */
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 6px;
}

/* ─ Input — mirrors Anvil <Input variant="default"> visual spec ─ */
/* Anvil class string: "flex w-full rounded bg-input text-foreground         */
/*  hover:bg-input-hover focus:bg-selected ... h-7 text-xs px-2 py-1"        */
.anvil-card .anvil-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 32px !important;            /* slightly taller than Anvil h-7 (28px) for login UX */
    margin: 0 !important;
    padding: 4px 8px !important;
    background: var(--anvil-input) !important;
    background-color: var(--anvil-input) !important;
    border: 1px solid transparent !important;
    border-radius: var(--anvil-radius) !important;
    color: var(--anvil-foreground) !important;
    font-family: var(--anvil-font-sans) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.anvil-card .anvil-input::placeholder {
    color: var(--anvil-muted-foreground) !important;
}

.anvil-card .anvil-input:hover {
    background: var(--anvil-input-hover) !important;
    background-color: var(--anvil-input-hover) !important;
}

.anvil-card .anvil-input:focus,
.anvil-card .anvil-input:focus-visible {
    outline: none !important;
    background: var(--anvil-selected) !important;
    background-color: var(--anvil-selected) !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: 0 0 0 2px var(--anvil-ring-border) !important;
    color: var(--anvil-foreground) !important;
}

.anvil-card .anvil-input.is-invalid {
    border-color: var(--anvil-error) !important;
    box-shadow: 0 0 0 2px rgba(216, 59, 85, 0.25) !important;
}

/* Suppress Chrome's autofill yellow + dark text. */
.anvil-card .anvil-input:-webkit-autofill,
.anvil-card .anvil-input:-webkit-autofill:hover,
.anvil-card .anvil-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--anvil-foreground) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--anvil-input) inset !important;
    box-shadow: 0 0 0 1000px var(--anvil-input) inset !important;
    caret-color: var(--anvil-foreground) !important;
    transition: background-color 9999s ease-out, color 9999s ease-out;
}

/* ─ Checkbox row + Anvil link-button "Forgot password" ─ */
.anvil-card .anvil-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

/* Mirrors Anvil <Checkbox> markup — input + sibling label, no wrapping <label>. */
.anvil-card .anvil-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.anvil-card .anvil-checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--anvil-border) !important;
    border-radius: var(--anvil-radius) !important;
    cursor: pointer !important;
    flex-shrink: 0;
}

.anvil-card .anvil-checkbox input[type="checkbox"]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--anvil-ring-border) !important;
}

.anvil-card .anvil-checkbox input[type="checkbox"]:checked {
    background: var(--anvil-primary-background) !important;
    background-color: var(--anvil-primary-background) !important;
    border-color: var(--anvil-primary-background) !important;
}

.anvil-card .anvil-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid var(--anvil-primary-foreground);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.anvil-card .anvil-checkbox label,
.anvil-card .anvil-checkbox span {
    color: var(--anvil-foreground) !important;
    font-family: var(--anvil-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

/* ─ Anvil <Button variant="link"> — "Forgot password" ─ */
/* Anvil: "text-foreground-emphasis cursor-pointer underline-offset-4         */
/*  rounded hover:bg-hover h-auto px-1 py-0.5 -mx-1 -my-0.5 rounded-sm        */
/*  justify-start"                                                            */
.anvil-card .anvil-link-button,
.anvil-card a.anvil-link-button {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--anvil-foreground-emphasis) !important;
    font-family: var(--anvil-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    padding: 2px 4px !important;
    margin: -2px -4px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 120ms ease;
}

.anvil-card .anvil-link-button:hover,
.anvil-card .anvil-link-button:focus {
    background: var(--anvil-hover) !important;
    background-color: var(--anvil-hover) !important;
    color: var(--anvil-foreground-emphasis) !important;
    text-decoration: none !important;
}

/* ─ Anvil <Button variant="default"> — "Sign in" ─ */
/* Anvil: "inline-flex items-center justify-center font-medium                */
/*  whitespace-nowrap rounded transition-colors ... bg-primary-background     */
/*  text-primary-foreground hover:bg-primary-background/90 h-7 px-2 py-[6px]  */
/*  text-xs"                                                                  */
.anvil-card .anvil-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100% !important;
    height: 36px !important;            /* slightly taller than h-7 for login UX */
    padding: 6px 12px !important;
    border-radius: var(--anvil-radius) !important;
    font-family: var(--anvil-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;        /* Anvil font-medium */
    line-height: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.anvil-card .anvil-button-primary,
.anvil-card a.anvil-button-primary,
.anvil-card button.anvil-button-primary {
    background: var(--anvil-primary-background) !important;
    background-color: var(--anvil-primary-background) !important;
    color: var(--anvil-primary-foreground) !important;
    border: 1px solid var(--anvil-primary-background) !important;
}

/* Anvil hover spec: bg-primary-background/90 — same hue, 90% opacity. */
.anvil-card .anvil-button-primary:hover,
.anvil-card .anvil-button-primary:focus {
    background: rgba(0, 85, 255, 0.9) !important;
    background-color: rgba(0, 85, 255, 0.9) !important;
    color: var(--anvil-primary-foreground) !important;
}

/* Destructive — Anvil <Button variant="destructive">, used for sign-out confirm. */
.anvil-card .anvil-button-danger,
.anvil-card a.anvil-button-danger,
.anvil-card button.anvil-button-danger {
    background: var(--anvil-error) !important;
    background-color: var(--anvil-error) !important;
    color: var(--anvil-primary-foreground) !important;
    border: 1px solid var(--anvil-error) !important;
}

.anvil-card .anvil-button-danger:hover,
.anvil-card .anvil-button-danger:focus {
    background: rgba(216, 59, 85, 0.9) !important;
    background-color: rgba(216, 59, 85, 0.9) !important;
    color: var(--anvil-primary-foreground) !important;
}

/* Secondary / "Sign in with X" — Anvil <Button variant="secondary"> */
.anvil-card .anvil-button-secondary,
.anvil-card a.anvil-button-secondary {
    background: var(--anvil-input) !important;
    background-color: var(--anvil-input) !important;
    color: var(--anvil-foreground) !important;
    border: 1px solid transparent !important;
}

.anvil-card .anvil-button-secondary:hover,
.anvil-card .anvil-button-secondary:focus {
    background: var(--anvil-input-hover) !important;
    background-color: var(--anvil-input-hover) !important;
    color: var(--anvil-foreground) !important;
}

.anvil-card .anvil-button + .anvil-button { margin-top: 8px; }

/* ─ Divider ─ */
.anvil-card .anvil-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: var(--anvil-muted-foreground);
    font-family: var(--anvil-font-sans);
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.anvil-card .anvil-divider::before,
.anvil-card .anvil-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--anvil-border);
}

/* ─ Field-level errors ─ */
.anvil-card .anvil-error-text {
    display: block;
    color: var(--anvil-error);
    font-family: var(--anvil-font-sans);
    font-size: 12px;
    line-height: 16px;
    margin-top: 6px;
}