/* ==========================================================================
   performance-os — custom styles (AP design system)
   Ports the AP Invoice Validator :root tokens, self-hosts the fonts the CDN
   used to pull from Google (CSP forbids external URLs), and keeps the handful
   of utilities Tailwind can't express. No @import, no external URLs.
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subset, vendored under /static/fonts) ----------
   Inter's latin subset is a single variable woff2 that Google serves for every
   weight; we declare 400/500/600 against that one file. JetBrains Mono is 400 only.
   font-display: swap keeps text visible while the font loads. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
}


/* ---------- Design tokens (ported from AP DESIGN.md) ---------- */
:root {
    /* Background */
    --color-bg: #FFFFFF;
    --color-surface: #F9FAFB;
    --color-border: #E5E7EB;

    /* Text */
    --color-text: #111827;
    --color-secondary: #6B7280;
    --color-muted: #9CA3AF;

    /* Accent */
    --color-accent: #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-accent-bg: #EFF6FF;

    /* Semantic */
    --color-success: #059669;
    --color-success-bg: #ECFDF5;
    --color-warning: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-danger: #DC2626;
    --color-danger-bg: #FEF2F2;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;
}


/* ---------- Monospace amounts (tabular figures for money) ---------- */
.amount {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ---------- Flash banners ---------- */
.flash-banner {
    animation: flash-in 0.2s ease-out;
}

.flash-banner.flash-out {
    animation: flash-out 0.3s ease-in forwards;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes flash-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}


/* ---------- Nav item transitions ---------- */
.nav-item {
    transition: color 0.15s ease, border-color 0.15s ease;
}


/* ---------- Table row transitions ---------- */
tbody tr {
    transition: background-color 0.1s ease;
}


/* ---------- Focus ring ---------- */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Elements carrying Tailwind focus utilities manage their own ring. */
.focus\:ring-2:focus {
    outline: none;
}


/* ---------- HTMX loading indicator ---------- */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request.htmx-indicator {
    display: inline-flex;
}


/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}


/* ---------- Rendered-markdown assistant bubbles (.chat-md) ----------
   Injected at runtime as sanitized HTML (web/markdown.py allowlist), so Tailwind's
   Play runtime never sees these element classes — the styling has to be plain CSS.
   Tables scroll horizontally inside the bubble on narrow viewports. */
.chat-md table { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.8125rem; width: 100%; display: block; overflow-x: auto; }
.chat-md th, .chat-md td { border: 1px solid #e5e7eb; padding: 0.375rem 0.625rem; text-align: left; white-space: nowrap; }
.chat-md th { background: #f9fafb; font-weight: 600; }
.chat-md code { background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 0.25rem; font-size: 0.8125em; }
.chat-md pre { background: #f3f4f6; padding: 0.625rem; border-radius: 0.375rem; overflow-x: auto; }
.chat-md pre code { background: none; padding: 0; }
.chat-md ul, .chat-md ol { padding-left: 1.25rem; margin: 0.375rem 0; list-style: revert; }
.chat-md p { margin: 0.375rem 0; }
.chat-md h1, .chat-md h2, .chat-md h3 { font-weight: 600; margin: 0.625rem 0 0.25rem; }