/* PHI dashboard chrome — design tokens, brand strip, tab strip.
 *
 * Single source of truth for colour, spacing, type. Loaded as the first
 * stylesheet on every page so subsequent stylesheets can rely on the
 * --phi-* custom properties and base resets defined here.
 *
 * No Streamlit selectors — the page is plain HTML now. Compare with the
 * pre-removal version which had a wall of `[data-testid="stApp"]` etc.
 * resets to compensate for the React DOM.
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Colour */
    --phi-bg:               #060708;
    --phi-bg-alt:           #050606;
    --phi-surface:          #0f1010;
    --phi-input:            #060707;
    --phi-hairline:         #14181a;
    --phi-hairline-strong:  #2a2e2a;
    --phi-text-1:           #e6e7e6;
    --phi-text-2:           #8c918c;
    --phi-text-3:           #5b605b;
    --phi-mint:             #4ade80;
    --phi-mint-dim:         rgba(74, 222, 128, 0.16);
    --phi-mint-line:        rgba(74, 222, 128, 0.32);
    --phi-mint-soft:        rgba(74, 222, 128, 0.05);
    --phi-warn:             #facc15;
    --phi-danger:           #f87171;

    /* Spacing scale */
    --phi-sp-1: 4px;
    --phi-sp-2: 8px;
    --phi-sp-3: 14px;
    --phi-sp-4: 20px;
    --phi-sp-5: 28px;

    /* Type scale */
    --phi-fs-eyebrow: 9px;
    --phi-fs-meta:    10px;
    --phi-fs-body:    11px;
    --phi-fs-input:   12px;
    --phi-fs-title:   14px;
    --phi-fs-mark:    18px;
    --phi-fs-stat:    20px;

    --phi-radius:    3px;
    --phi-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --phi-sans:      "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
                     "Helvetica Neue", system-ui, sans-serif;
}

/* Page reset — minimal, covers what the browser defaults give us. */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--phi-bg);
    color: var(--phi-text-1);
    font-family: var(--phi-sans);
    font-size: var(--phi-fs-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 1px solid var(--phi-mint-line); outline-offset: 1px; }

/* HTMX indicator handling — opacity only (display would reflow) */
.htmx-indicator { opacity: 0; transition: opacity 120ms ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ─── Scrollbars — thin, dark, mint hover ─────────────────────────
 * Webkit (Chrome/Safari/Edge) gets pseudo-element styling; Firefox
 * uses the standard ``scrollbar-*`` properties. Applied globally so
 * every scrollable area on the dashboard (.main-pane, .right-pane,
 * settings textarea, code blocks, etc.) shares the same chrome. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--phi-hairline-strong) transparent;
}
*::-webkit-scrollbar           { width: 8px; height: 8px; }
*::-webkit-scrollbar-track     { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--phi-hairline-strong);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 140ms ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--phi-text-3);
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-corner    { background: transparent; }

/* ─── Brand strip — first row of every dashboard ── */
.phi-brand {
    display: flex; align-items: baseline; gap: var(--phi-sp-2);
    padding: var(--phi-sp-2) var(--phi-sp-3);
    background: var(--phi-bg-alt);
    font-family: var(--phi-mono);
}
.phi-brand-mark {
    font-size: var(--phi-fs-mark);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--phi-mint);
}
.phi-brand-sep  { color: var(--phi-hairline-strong); font-size: 16px; }
.phi-brand-name {
    font-size: var(--phi-fs-body);
    color: var(--phi-text-2);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.phi-brand-id {
    font-size: var(--phi-fs-body);
    color: var(--phi-mint);
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* ─── Tab strip — directly below brand on every page ── */
.phi-tabs {
    display: flex;
    gap: 0;
    background: var(--phi-bg-alt);
    border-bottom: 1px solid var(--phi-hairline);
    padding: var(--phi-sp-1) var(--phi-sp-3) 0 var(--phi-sp-3);
}
.phi-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 16px;
    color: var(--phi-text-2);
    font-family: var(--phi-mono);
    font-size: var(--phi-fs-meta);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 140ms ease, border-color 140ms ease;
}
.phi-tab:hover { color: var(--phi-text-1); }
.phi-tab.is-active {
    color: var(--phi-mint);
    border-bottom-color: var(--phi-mint);
}

/* ─── Form row label — definition-list pattern shared by settings + backtest ── */
.phi-row-label {
    font-family: var(--phi-sans);
    font-size: var(--phi-fs-input);
    color: var(--phi-text-2);
    line-height: 28px;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phi-row-label .sub {
    color: var(--phi-text-3);
    font-size: var(--phi-fs-meta);
    margin-left: var(--phi-sp-1);
    letter-spacing: 0.04em;
}

/* ─── Watchdog-held banner (client-side death-pact UI) ── */
.phi-watchdog-held {
    margin: var(--phi-sp-2) var(--phi-sp-3) 0 var(--phi-sp-3);
    padding: var(--phi-sp-2) var(--phi-sp-3);
    border: 1px solid var(--phi-danger);
    border-radius: var(--phi-radius);
    color: var(--phi-danger);
    font-family: var(--phi-mono);
    font-size: var(--phi-fs-body);
    letter-spacing: 0.06em;
}

/* ─── Eyebrow section header (shared by settings + backtest) ── */
.phi-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px 0;
    font-family: var(--phi-mono);
    font-size: var(--phi-fs-eyebrow);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--phi-mint);
}
.phi-eyebrow:first-child { margin-top: 0; }
.phi-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--phi-hairline-strong), transparent 70%);
}

/* ─── Status card — KV rows (active channel etc.) ── */
.phi-status {
    border: 1px solid var(--phi-hairline);
    border-radius: var(--phi-radius);
    background: var(--phi-surface);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.phi-status .row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-family: var(--phi-mono);
    font-size: var(--phi-fs-body);
}
.phi-status .row .k {
    color: var(--phi-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--phi-fs-eyebrow);
    min-width: 78px;
}
.phi-status .row .v {
    color: var(--phi-text-1);
    font-variant-numeric: tabular-nums;
}

/* ─── Alerts — single tone, hairline border, tinted left edge ── */
.phi-alert {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--phi-hairline);
    border-left-width: 2px;
    border-radius: var(--phi-radius);
    background: var(--phi-surface);
    font-family: var(--phi-sans);
    font-size: var(--phi-fs-body);
    line-height: 1.4;
    color: var(--phi-text-1);
}
.phi-alert > svg { flex: 0 0 auto; }
.phi-alert.warn { border-left-color: var(--phi-text-2); }
.phi-alert.warn > svg { color: var(--phi-text-2); }
.phi-alert.ok   { border-left-color: var(--phi-mint); }
.phi-alert.ok   > svg { color: var(--phi-mint); }
.phi-alert.err  { border-left-color: var(--phi-danger); }
.phi-alert.err  > svg { color: var(--phi-danger); }
.phi-alert code,
.phi-foot code {
    font-family: var(--phi-mono);
    font-size: var(--phi-fs-meta);
    background: var(--phi-input);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--phi-text-1);
}

/* ─── Foot caption — quiet meta text below sections ── */
.phi-foot {
    color: var(--phi-text-3);
    font-family: var(--phi-mono);
    font-size: var(--phi-fs-meta);
    letter-spacing: 0.04em;
    margin: 2px 0 0 0;
}

/* ─── Top-level page container constrained for forms (settings, backtest) ── */
.phi-page {
    padding: var(--phi-sp-3) var(--phi-sp-3) var(--phi-sp-4) var(--phi-sp-3);
}
.phi-page-narrow { max-width: 760px; }
.phi-page > * + * { margin-top: 0; }