/*
 * payer-audit · base styles
 *
 * Source of truth for tokens: /Users/praj/work/autonomize-website/DESIGN.md
 *                             design-samples/tokens.dtcg.json
 *                             design-samples/tailwind.theme.json
 *
 * Hard rules from DESIGN.md (do not violate without updating DESIGN.md):
 *   - PPNeue Regular (400) for everything except `--font-label-md` (Medium 500).
 *     Do NOT bold headings.
 *   - Brand purple #4D129D for CTAs. Hero/dark sections: #1F0448 (`--background-dark`).
 *   - Shadow-free elevation. Only exception: dropdown menus.
 *   - Radius: button=8px, input=4px, checkbox=6px, badge=full.
 *   - Container max-width: 1280px.
 *   - Accent gold #E8AF57 — one element per section maximum.
 */

/* ============================================================
   Fonts — PPNeue is the brand typeface. Drop the actual font
   files into static/fonts/ to enable.  TODO: ship .woff2 files.
   ============================================================ */
@font-face {
    font-family: "PPNeue Regular";
    src: url("/static/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PPNeue Medium";
    src: url("/static/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Tokens — mirror tailwind.theme.json. CSS variable form for
   places we can't reach via Tailwind utility classes (login
   page, chat-md, etc.).
   ============================================================ */
:root {
    /* Colors */
    --primary: #4d129d;
    --primary-dark: #29065a;
    --primary-light: #731ee3;
    --on-primary: #ffffff;
    --secondary: #ae7def;
    --on-secondary: #1a1a1a;
    --accent: #e8af57;
    --on-accent: #1a1a1a;
    --surface: #ffffff;
    --surface-form: #5115a0;
    --on-surface: #1a1a1a;
    --on-surface-variant: #666666;
    --background: #ffffff;
    --background-dark: #1f0448;
    --on-background-dark: #ffffff;
    --outline: #999999;
    --outline-variant: #ebe5f3;
    --error: #e9040e;
    --error-input: #ff4d4d;
    --success: #069306;

    /* Typography */
    --font-sans: "PPNeue Regular", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", "Cascadia Code", Menlo, Monaco, monospace;
    --font-label-md: "PPNeue Medium", var(--font-sans);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Spacing scale — 8 / 16 / 24 / 40 / 48 / 64 */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 48px;
    --space-2xl: 64px;
}

/* Dark theme overrides — flips surfaces, keeps brand colors. */
[data-theme="dark"] {
    --surface: #1a1a1a;
    --on-surface: #f5f5f5;
    --on-surface-variant: #aaaaaa;
    --background: #0f0f0f;
    --outline: #444444;
    --outline-variant: #2a2a2a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Login page (standalone — not under sidebar layout)
   Two-pane: dark stage on the left, white form on the right.
   ============================================================ */
.login-body {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 480px);
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    font-family: var(--font-sans);
}
@media (max-width: 768px) {
    .login-body { grid-template-columns: 1fr; }
}

.login-stage {
    background: var(--background-dark);
    color: var(--on-background-dark);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-md);
}

.login-brand {
    font-family: var(--font-label-md);
    font-size: 16px;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
}

.login-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 999px;
    margin-right: 8px;
    display: inline-block;
}

.login-tagline {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 400;
    margin-top: var(--space-md);
}

.login-tagline-sub {
    font-size: 16px;
    opacity: 0.75;
    margin-top: var(--space-xs);
}

.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--background);
}

.login-card {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.login-title {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 var(--space-xs);
    color: var(--on-surface);
}

.login-error {
    background: rgba(233, 4, 14, 0.08);
    border: 1px solid var(--error-input);
    color: var(--error);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.login-form { display: flex; flex-direction: column; gap: var(--space-xs); }

.login-label {
    font-family: var(--font-label-md);
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: var(--space-xs);
}

.login-input {
    background: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    width: 100%;
}
.login-input:focus { outline: none; border-color: var(--primary); }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--on-primary);
    border: none;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    margin-top: var(--space-xs);
    min-height: 48px;
}
.btn-primary:hover { background: var(--primary); }

.login-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--on-surface-variant);
    text-align: center;
    margin-top: var(--space-xs);
}

.login-meta-footer {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-surface-variant);
    text-align: center;
    margin-top: var(--space-md);
}

/* ============================================================
   Status chip / score colour helpers — used by Jinja templates
   Equivalent to the wireframes' Chip kind="warn|danger|pass|critical".
   ============================================================ */
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--outline);
    border-radius: 9999px;
    font-size: 11px;
    line-height: 1.4;
    background: var(--surface);
    color: var(--on-surface);
    white-space: nowrap;
}
.chip--brand { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.chip--lavender { background: var(--secondary); color: var(--on-secondary); border-color: transparent; }
.chip--accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.chip--warn { background: rgba(232, 175, 87, 0.15); color: #8a5a00; border-color: var(--accent); }
.chip--danger { background: rgba(233, 4, 14, 0.08); color: var(--error); border-color: var(--error); }
.chip--critical { background: var(--error); color: var(--on-primary); border-color: transparent; }
.chip--pass { background: rgba(6, 147, 6, 0.08); color: var(--success); border-color: var(--success); }
.chip--na { background: var(--outline-variant); color: var(--on-surface-variant); border-color: var(--outline); }
.chip--outline { background: var(--surface); color: var(--on-surface); border-color: var(--outline); }

.score { font-family: var(--font-mono); font-size: 14px; padding: 2px 8px; border-radius: var(--radius-sm); }
.score--pass { background: rgba(6, 147, 6, 0.08); color: var(--success); }
.score--warn { background: rgba(232, 175, 87, 0.18); color: #8a5a00; }
.score--danger { background: rgba(233, 4, 14, 0.08); color: var(--error); }
.score--critical { background: var(--error); color: var(--on-primary); }

/* Surface card on tinted page background — DESIGN.md says cards on white are rounded-lg. */
.card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}
.card--tight { padding: var(--space-sm); }
.card--dark {
    background: var(--background-dark);
    color: var(--on-background-dark);
    border-color: transparent;
}

/* ============================================================
   System findings markdown output (.chat-md)
   Use via: <div class="chat-md" data-md="…markdown…"></div>
   The DOMContentLoaded handler in base.html runs marked.parse on it.
   ============================================================ */
.chat-md {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--on-surface);
}

.chat-md h1, .chat-md h2, .chat-md h3 {
    font-family: var(--font-sans);
    font-weight: 400;
    margin: 16px 0 8px;
    color: var(--on-surface);
}
.chat-md h1 { font-size: 22px; }
.chat-md h2 { font-size: 18px; }
.chat-md h3 { font-size: 16px; }

.chat-md p { margin: 8px 0; }
.chat-md ul, .chat-md ol { margin: 8px 0; padding-left: 22px; }
.chat-md li { margin: 4px 0; }
.chat-md strong { font-family: var(--font-label-md); font-weight: 500; color: var(--on-surface); }

.chat-md code {
    background: var(--outline-variant);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
}

.chat-md pre {
    background: var(--background-dark);
    color: var(--on-background-dark);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 12px 0;
}
.chat-md pre code { background: none; padding: 0; color: inherit; font-size: 12px; }

.chat-md blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 12px;
    color: var(--on-surface-variant);
    margin: 12px 0;
}

/* ============================================================
   Utility overrides
   ============================================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--on-surface-variant); }

/* Dropdown shadow — the single allowed exception per DESIGN.md.
   Use class="elevated-dropdown" on dropdown panes only. */
.elevated-dropdown { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); }