/* ==========================================================================
   auth.css — shared look for the client (app/login.php) and admin
   (admin/login.php) sign-in pages. Clean, light, "Meta-style": soft
   gradient backdrop, white card, floating-label fields, pill buttons,
   in the brand purple. Follows the visitor's light/dark preference.
   ========================================================================== */

:root {
    /* Light: white card on a soft wash, purple as the brand colour. */
    --auth-bg: #f7f5fb;
    --auth-surface: #ffffff;
    --auth-text: #1f1830;
    --auth-muted: #625a73;
    --auth-faint: #8b8399;
    --auth-border: #d6d0e2;
    --auth-border-soft: #ebe7f2;
    --auth-primary: #7c3aed;
    --auth-primary-hover: #6d28d9;
    --auth-primary-press: #5b21b6;
    --auth-on-primary: #ffffff;
    --auth-ring: rgba(124, 58, 237, 0.24);
    --auth-chip: #f3e8ff;
    --auth-danger-bg: #fdecee;
    --auth-danger-border: #f5c2c7;
    --auth-danger-text: #b3261e;
    --auth-blob-1: rgba(168, 85, 247, 0.20);
    --auth-blob-2: rgba(236, 72, 153, 0.12);
    --auth-blob-3: rgba(99, 102, 241, 0.14);
    --auth-shadow: 0 1px 2px rgba(31, 24, 48, 0.05), 0 16px 44px rgba(76, 29, 149, 0.12);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Dark: the admin console's own obsidian-purple surfaces. */
        --auth-bg: #0b0814;
        --auth-surface: #140f21;
        --auth-text: #f4f2f8;
        --auth-muted: #a9a2bf;
        --auth-faint: #756c8f;
        --auth-border: rgba(168, 85, 247, 0.30);
        --auth-border-soft: rgba(168, 85, 247, 0.16);
        --auth-primary: #a855f7;
        --auth-primary-hover: #9333ea;
        --auth-primary-press: #7e22ce;
        --auth-on-primary: #ffffff;
        --auth-ring: rgba(168, 85, 247, 0.32);
        --auth-chip: rgba(168, 85, 247, 0.16);
        --auth-danger-bg: rgba(244, 67, 54, 0.12);
        --auth-danger-border: rgba(244, 67, 54, 0.35);
        --auth-danger-text: #ff8a80;
        --auth-blob-1: rgba(168, 85, 247, 0.20);
        --auth-blob-2: rgba(236, 72, 153, 0.10);
        --auth-blob-3: rgba(99, 102, 241, 0.12);
        --auth-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 50px rgba(0, 0, 0, 0.5);
    }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--auth-bg);
    color: var(--auth-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* Soft colour wash behind everything */
.auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40vmax 40vmax at 8% 12%, var(--auth-blob-1), transparent 70%),
        radial-gradient(36vmax 36vmax at 92% 18%, var(--auth-blob-2), transparent 70%),
        radial-gradient(42vmax 42vmax at 70% 100%, var(--auth-blob-3), transparent 70%);
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.auth-shell {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 16px 24px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

@media (min-width: 960px) {
    .auth-shell {
        flex-direction: row;
        justify-content: space-between;
        gap: 64px;
        padding: 48px 32px;
    }
}

/* ── Brand / pitch side ─────────────────────────────────────────────── */
.auth-brand {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.auth-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--auth-text);
}
.auth-brand-mark img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 12px;
}
.auth-brand-mark span {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.auth-brand h1,
.auth-brand-features { display: none; }

@media (min-width: 960px) {
    .auth-brand {
        max-width: 500px;
        text-align: left;
    }
    .auth-brand-mark img { width: 52px; height: 52px; }
    .auth-brand-mark span { font-size: 21px; }

    .auth-brand h1 {
        display: block;
        margin-top: 28px;
        font-size: 40px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: -1px;
        text-wrap: balance;
    }
    .auth-brand .auth-lead {
        margin-top: 14px;
        font-size: 17px;
        color: var(--auth-muted);
        max-width: 440px;
    }
    .auth-brand-features {
        display: grid;
        gap: 14px;
        margin-top: 32px;
        list-style: none;
    }
    .auth-brand-features li {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 15px;
        font-weight: 500;
    }
    .auth-brand-features .chip {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--auth-chip);
        display: grid;
        place-items: center;
    }
    .auth-brand-features svg {
        width: 20px;
        height: 20px;
        fill: var(--auth-primary);
    }
}

.auth-brand .auth-lead { display: none; }
@media (min-width: 960px) { .auth-brand .auth-lead { display: block; } }

/* ── Card ───────────────────────────────────────────────────────────── */
.auth-panel {
    width: 100%;
    max-width: 420px;
    flex-shrink: 0;
}

.auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--auth-border-soft);
    border-radius: 20px;
    box-shadow: var(--auth-shadow);
    padding: 32px 28px 28px;
}
@media (max-width: 400px) {
    .auth-card { padding: 26px 20px 22px; border-radius: 18px; }
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--auth-chip);
    color: var(--auth-primary);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
}
.auth-eyebrow svg { width: 14px; height: 14px; fill: currentColor; }

.auth-card h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.25;
}
.auth-card .auth-sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--auth-muted);
}

.auth-form { margin-top: 24px; }

/* ── Alert ──────────────────────────────────────────────────────────── */
.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--auth-danger-bg);
    border: 1px solid var(--auth-danger-border);
    color: var(--auth-danger-text);
    font-size: 14px;
    line-height: 1.45;
}
.auth-alert svg { flex-shrink: 0; width: 18px; height: 18px; fill: currentColor; margin-top: 1px; }

/* ── Floating-label fields ──────────────────────────────────────────── */
.auth-field {
    position: relative;
    margin-bottom: 14px;
}

.auth-field input {
    display: block;
    width: 100%;
    height: 58px;
    padding: 24px 16px 8px;
    border: 1px solid var(--auth-border);
    border-radius: 14px;
    background: var(--auth-surface);
    color: var(--auth-text);
    font: inherit;
    font-size: 16px; /* 16px stops iOS zooming in on focus */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-field.has-toggle input { padding-right: 52px; }

.auth-field label {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-muted);
    font-size: 16px;
    pointer-events: none;
    transform-origin: left top;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}

.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label {
    top: 17px;
    font-size: 12px;
}
.auth-field input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px var(--auth-ring);
}
.auth-field input:focus + label { color: var(--auth-primary); }

/* Keep the label floated when the browser autofills the field */
.auth-field input:-webkit-autofill + label { top: 17px; font-size: 12px; }
.auth-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--auth-surface) inset;
    -webkit-text-fill-color: var(--auth-text);
}

.auth-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--auth-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.auth-toggle:hover { background: var(--auth-border-soft); color: var(--auth-text); }
.auth-toggle:focus-visible { outline: 2px solid var(--auth-primary); outline-offset: 1px; }
.auth-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.auth-toggle .icon-hide { display: none; }
.auth-toggle[aria-pressed="true"] .icon-show { display: none; }
.auth-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.auth-btn:active { transform: scale(0.985); }
.auth-btn:focus-visible { outline: 3px solid var(--auth-ring); outline-offset: 2px; }

.auth-btn-primary {
    margin-top: 8px;
    border: 0;
    background: var(--auth-primary);
    color: var(--auth-on-primary);
}
.auth-btn-primary:hover { background: var(--auth-primary-hover); }
.auth-btn-primary:active { background: var(--auth-primary-press); }
.auth-btn-primary[disabled] { opacity: .75; cursor: progress; }

.auth-btn-outline {
    border: 1px solid var(--auth-border);
    background: transparent;
    color: var(--auth-text);
}
.auth-btn-outline:hover { background: var(--auth-border-soft); }

.auth-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: auth-spin .7s linear infinite;
    display: none;
}
.auth-btn.is-loading .auth-spinner { display: block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: var(--auth-faint);
    font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-border-soft);
}

.auth-hint {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--auth-muted);
}

.auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--auth-faint);
}
.auth-secure svg { width: 14px; height: 14px; fill: currentColor; }

/* ── Install banner (client PWA) ────────────────────────────────────── */
.auth-install {
    display: none;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border-soft);
    box-shadow: var(--auth-shadow);
}
.auth-install.visible { display: flex; }
.auth-install-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--auth-chip);
    display: grid;
    place-items: center;
}
.auth-install-icon svg { width: 20px; height: 20px; fill: var(--auth-primary); }
.auth-install-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--auth-muted);
    line-height: 1.4;
}
.auth-install-text b { display: block; color: var(--auth-text); font-size: 14px; font-weight: 600; }
.auth-install .auth-btn {
    width: auto;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.auth-footer {
    position: relative;
    z-index: 1;
    padding: 18px 16px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    text-align: center;
    font-size: 12.5px;
    color: var(--auth-faint);
}
.auth-footer a { color: inherit; text-decoration: none; }
.auth-footer a:hover { text-decoration: none; filter: brightness(1.25); }
.auth-footer .dot { margin: 0 8px; }

/* ── Entrance ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .auth-card, .auth-brand { animation: auth-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
    .auth-card { animation-delay: .05s; }
    @keyframes auth-rise {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Links never show an underline, on any page or state. Buttons styled as
   links included. They still read as links through colour and the hover
   brightening below, and keyboard users get the focus ring. */
a, a:link, a:visited, a:hover, a:focus, a:active,
.inline-link-btn, .inline-link-btn:hover { text-decoration: none !important; }
:where(a) { transition: color .18s ease, opacity .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
:where(a:not([class])):hover { filter: brightness(1.25); }