/* Sign-in page: the Approvals sign-in card (approvals.activesystems.ph), same colours as app.css. */

:root {
    color-scheme: light;
    --bg: #fbfbfa;
    --surface: #ffffff;
    --ink: #18181b;
    --ink-2: #52525b;
    --ink-3: #71717a;
    --line: #ececea;
    --line-2: #d9d9d4;
    --accent: #1f3f68;
    --on-ink: #ffffff;
    --bad: #b3261e;
    --bad-bg: #fdf1f0;
    --brand-green: #3a9e33;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101012; --surface: #17171a; --ink: #f4f4f5; --ink-2: #b4b4bc; --ink-3: #8f8f99;
    --line: #26262a; --line-2: #36363c; --accent: #9dbbe6; --on-ink: #101012;
    --bad: #f08b84; --bad-bg: #2a1716; --brand-green: #5fc152;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;
        --bg: #101012; --surface: #17171a; --ink: #f4f4f5; --ink-2: #b4b4bc; --ink-3: #8f8f99;
        --line: #26262a; --line-2: #36363c; --accent: #9dbbe6; --on-ink: #101012;
        --bad: #f08b84; --bad-bg: #2a1716; --brand-green: #5fc152;
    }
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }

.auth-card {
    width: 100%; max-width: 420px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 36px 36px 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
}

.auth-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 16px; }
.auth-logo img { width: 44px; height: 44px; border-radius: 11px; display: block; }
.wordmark { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.wm-name { color: var(--ink); }
.wm-accent { color: var(--brand-green); }

.auth-tagline { text-align: center; color: var(--ink-2); font-size: .9375rem; margin: 0 0 22px; line-height: 1.45; }

label { display: block; margin: 18px 0 6px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
form > label:first-of-type { margin-top: 0; }

input[type=text], input[type=password] {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--surface); color: var(--ink); font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--ink-3); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 20px; margin-top: 24px;
    border-radius: 10px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--on-ink);
    font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer;
    transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn:active { opacity: .78; }
.btn-block { width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.notice { padding: 12px 14px; border-radius: 10px; font-size: .9375rem; margin-bottom: 16px; }
.notice.error { background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); color: var(--ink); }

.auth-copy { margin: 18px 0 0; font-size: .8125rem; color: var(--ink-3); text-align: center; }

@media (max-width: 520px) { .auth-card { padding: 28px 22px 24px; } .wordmark { font-size: 24px; } }