/* ===========================================================================
   AlpacaTradingAgent - application shell and dashboard design system.

   Loaded after custom.css (Dash serves assets alphabetically), so the tokens
   and component styles here take precedence over the older card styling.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Vantablack ground, with surfaces stepped in near-neutral greys so panels
       separate by luminance alone -- no blue cast competing with the accent. */
    --bg:            #000000;
    --surface:       #0A0A0C;
    --surface-2:     #131318;
    --surface-3:     #1C1C22;
    --border:        #26262E;
    --border-strong: #3A3A45;

    /* Text */
    --text:          #F4F5F7;
    --text-dim:      #A0A0AD;
    --text-faint:    #6E6E7C;

    /* Semantic */
    --accent:        #4F8DFD;
    --accent-strong: #7AA9FF;
    --accent-dim:    rgba(79, 141, 253, 0.14);
    --pos:           #22D07F;
    --pos-dim:       rgba(34, 208, 127, 0.13);
    --neg:           #FF5F5F;
    --neg-dim:       rgba(255, 95, 95, 0.13);
    --warn:          #FFB020;
    --warn-dim:      rgba(255, 176, 32, 0.13);
    --options:       #A78BFA;
    --options-dim:   rgba(167, 139, 250, 0.14);

    /* Elevation: on a true-black ground shadow is invisible, so panels are
       lifted with a hairline top highlight instead. */
    --ring:          inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow:        0 8px 28px rgba(0, 0, 0, 0.65);

    --radius:        12px;
    --radius-sm:     8px;
    --sidebar-w:     244px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
}

/* Numeric data reads as tabular everywhere it appears. */
.num, .stat-value, .kpi-value, td.num, .mono { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shell -- */

.app-shell { display: flex; min-height: 100vh; background: var(--bg); }

.app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 18px 18px;
    border-bottom: 1px solid var(--border);
}

.sidebar-brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), #7C3AED);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(79, 141, 253, 0.32);
}
.sidebar-brand-text { line-height: 1.2; min-width: 0; }
.sidebar-brand-name {
    font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap;
}
.sidebar-brand-sub {
    font-size: 10.5px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600;
}

.sidebar-section {
    padding: 16px 18px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--text-faint);
}

.sidebar-nav { padding: 4px 10px; flex: 1; }

.nav-item-btn {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px !important;
    margin-bottom: 2px;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-dim) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer;
    transition: background 0.13s ease, color 0.13s ease;
    box-shadow: none !important;
}
.nav-item-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.nav-item-btn i { width: 17px; text-align: center; font-size: 13px; flex-shrink: 0; }

.nav-item-btn.active {
    background: var(--accent-dim) !important;
    color: #93BBFF !important;
    font-weight: 600 !important;
    box-shadow: inset 2px 0 0 var(--accent) !important;
}

/* An empty badge must not render as a stray pill. */
.nav-badge:empty { display: none; }

.nav-badge {
    margin-left: auto;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 20px;
    background: var(--surface-3); color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.nav-badge.live { background: var(--pos-dim); color: var(--pos); }
.nav-badge.opt  { background: var(--options-dim); color: var(--options); }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); }

/* --------------------------------------------------------------- topbar -- */

.app-topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: 18px;
    padding: 0 26px; height: 60px;
    /* Tinted from the true-black ground, not the old blue-grey surface: a
       translucent bar over a black page must blur toward black or it reads as
       a separate, lighter application sitting on top of this one. */
    background: rgba(6, 6, 8, 0.86);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: 15.5px; font-weight: 650; color: var(--text); }
.topbar-spacer { flex: 1; }
.topbar-metrics { display: flex; align-items: center; gap: 22px; }

.topbar-metric { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-metric-label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint); font-weight: 650;
}
.topbar-metric-value {
    font-size: 14px; font-weight: 650; color: var(--text);
    font-variant-numeric: tabular-nums;
}

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 20px;
    font-size: 11.5px; font-weight: 650;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pill-paper { background: var(--accent-dim); color: #8FB8FF; border-color: rgba(79,141,253,0.3); }
.pill-live  { background: var(--neg-dim);  color: var(--neg); border-color: rgba(255,95,95,0.35); }
.pill-open  { background: var(--pos-dim);  color: var(--pos); border-color: rgba(34,208,127,0.3); }
.pill-closed{ background: var(--surface-3); color: var(--text-dim); border-color: var(--border-strong); }
.pill-warn  { background: var(--warn-dim); color: var(--warn); border-color: rgba(255,176,32,0.3); }

.icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
    transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dot-pulse { animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.32; } }

/* -------------------------------------------------------------- content -- */

.app-content { padding: 24px 26px 56px; }
.page { animation: pageIn 0.22s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { margin-bottom: 20px; }
.page-title { font-size: 21px; font-weight: 700; color: var(--text); margin: 0 0 3px; letter-spacing: -0.02em; }
.page-sub { font-size: 13px; color: var(--text-dim); margin: 0; }

/* Panels replace the old flat cards. */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
}
.panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 17px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.panel-title {
    font-size: 12.5px; font-weight: 700; color: var(--text);
    text-transform: uppercase; letter-spacing: 0.055em; margin: 0;
}
.panel-title i { color: var(--text-faint); margin-right: 7px; }
.panel-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 17px; }

/* Two-up rows: panels stretch to equal height and fill it, rather than
   leaving one short panel floating beside a tall neighbour. */
.split-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch; }
.split-col { flex: 1 1 360px; min-width: 0; display: flex; }
.split-col > .panel { flex: 1; display: flex; flex-direction: column; margin-bottom: 18px; }
.split-col > .panel > .panel-body { flex: 1; }
.split-col.stack { flex-direction: column; }
.split-col.stack > .panel { flex: 0 0 auto; }
/* Legacy dbc cards dropped into a column must fill its width. */
.split-col > .card, .split-col.stack > .card { width: 100%; }
.split-col.stack > div { width: 100%; }
.panel-body.flush { padding: 0; }

/* ----------------------------------------------------------- KPI tiles -- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.kpi {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px 16px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--accent); opacity: 0.85;
}
.kpi.pos::before { background: var(--pos); }
.kpi.neg::before { background: var(--neg); }
.kpi.opt::before { background: var(--options); }
.kpi.neutral::before { background: var(--border-strong); }

.kpi-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 9px;
}
.kpi-value {
    font-size: 25px; font-weight: 700; color: var(--text);
    line-height: 1.1; letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.kpi-value.sm { font-size: 20px; }
.kpi-delta {
    margin-top: 7px; font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
    font-variant-numeric: tabular-nums;
}
.kpi-sub { margin-top: 7px; font-size: 11.5px; color: var(--text-faint); }

.text-pos { color: var(--pos) !important; }
.text-neg { color: var(--neg) !important; }
.text-dim { color: var(--text-dim) !important; }
.text-faint { color: var(--text-faint) !important; }
.text-opt { color: var(--options) !important; }
.text-warn { color: var(--warn) !important; }

/* --------------------------------------------------------------- table -- */

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
    text-align: left; padding: 9px 15px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    position: sticky; top: 0; z-index: 1;
    white-space: nowrap;
}
.data-table tbody td {
    padding: 11px 15px;
    border-bottom: 1px solid rgba(34, 44, 66, 0.55);
    color: var(--text-dim);
    white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.1s ease; }
.data-table tbody tr:hover { background: rgba(79, 141, 253, 0.045); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .sym {
    font-weight: 650; color: var(--text);
    font-family: var(--mono); font-size: 12.5px;
}
.table-scroll { max-height: 420px; overflow-y: auto; }

.tag {
    display: inline-block; padding: 2px 8px; border-radius: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
}
.tag-long  { background: var(--pos-dim); color: var(--pos); }
.tag-short { background: var(--neg-dim); color: var(--neg); }
.tag-opt   { background: var(--options-dim); color: var(--options); }
.tag-buy   { background: var(--pos-dim); color: var(--pos); }
.tag-sell  { background: var(--neg-dim); color: var(--neg); }
.tag-hold  { background: var(--surface-3); color: var(--text-dim); }

/* ------------------------------------------------------ agent pipeline -- */

.pipeline { display: flex; flex-direction: column; gap: 7px; }
.pipeline-stage {
    font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text-faint);
    margin: 9px 0 3px;
}
.pipeline-stage:first-child { margin-top: 0; }

.agent-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    transition: border-color 0.15s ease;
}
.agent-row.running { border-color: rgba(255,176,32,0.45); background: var(--warn-dim); }
.agent-row.done    { border-color: rgba(34,208,127,0.3); }
.agent-name { color: var(--text); font-weight: 550; }
.agent-state { margin-left: auto; font-size: 11px; font-weight: 650; }

.agent-icon {
    width: 21px; height: 21px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; flex-shrink: 0;
    background: var(--surface-3); color: var(--text-faint);
}
.agent-row.running .agent-icon { background: var(--warn); color: #17203A; }
.agent-row.done .agent-icon { background: var(--pos); color: #08110C; }

/* ------------------------------------------------------------- empties -- */

.empty {
    padding: 26px 20px; text-align: center; color: var(--text-faint);
}
.empty i { font-size: 22px; opacity: 0.4; display: block; margin-bottom: 9px; }
.empty-title { font-size: 13.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.empty-hint { font-size: 12px; color: var(--text-faint); }

/* Risk-gate verdict strip used on the options page. */
.gate-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12.5px; margin-bottom: 7px;
}
.gate-row.pass { border-color: rgba(34,208,127,0.32); }
.gate-row.fail { border-color: rgba(255,95,95,0.38); background: var(--neg-dim); }
.gate-label { color: var(--text-dim); }
.gate-value { margin-left: auto; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }

/* --------------------------------------------- legacy panel harmonising -- */

/* The pre-existing panels keep their callbacks; only their skin changes. */
.app-content .card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
}
.app-content .card .card-body { color: var(--text); }
.app-content .card h4,
.app-content .card h5 {
    font-size: 12.5px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: 0.055em;
    color: var(--text) !important;
}
.app-content hr { border-color: var(--border) !important; opacity: 1; }

.app-content .form-control,
.app-content .form-select {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
}
.app-content .form-control:focus,
.app-content .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-dim) !important;
}
.app-content .form-label, .app-content label { color: var(--text-dim); font-size: 12.5px; }

.app-content .btn { border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-size: 13px !important; }
.app-content .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; }
.app-content .btn-primary:hover { background: #3D7BEB !important; border-color: #3D7BEB !important; }

/* Report tabs, restyled as a segmented control.
   The display/list rules are stated outright rather than inherited from
   Bootstrap: Bootstrap is CDN-loaded, and without these the tab strip
   degrades into a vertical list of underlined links. */
.app-content .enhanced-tabs .nav-tabs,
.app-content .nav-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border) !important;
}
.app-content .nav-tabs > li { list-style: none; }
.app-content .nav-tabs .nav-link {
    display: block;
    text-decoration: none !important;
    white-space: nowrap;
}
.app-content .nav-tabs .nav-link {
    border: none !important; background: transparent !important;
    color: var(--text-dim) !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    padding: 8px 13px !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    transition: color 0.12s ease, background 0.12s ease;
}
.app-content .nav-tabs .nav-link:hover { color: var(--text) !important; background: var(--surface-2) !important; }
.app-content .nav-tabs .nav-link.active {
    color: var(--text) !important; background: var(--surface-2) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3C4A68; }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1100px) {
    .topbar-metrics .topbar-metric.optional { display: none; }
}
@media (max-width: 860px) {
    :root { --sidebar-w: 62px; }
    .sidebar-brand-text, .nav-item-btn span, .sidebar-section, .nav-badge { display: none; }
    .sidebar-brand { justify-content: center; padding: 18px 8px; }
    .nav-item-btn { justify-content: center; padding: 11px !important; }
    .app-content { padding: 18px 14px 44px; }
    .app-topbar { padding: 0 14px; }

    /* The run-status pill keeps its dot but drops its label, which would
       otherwise overflow the collapsed rail. */
    .sidebar-footer { padding: 12px 8px; display: flex; justify-content: center; }
    .sidebar-footer .pill { padding: 5px; gap: 0; }
    .sidebar-footer .pill span:not(.dot) { display: none; }
}

/* ------------------------------------------------------------- agents -- */
/* The roster is a rail of rows beside the editor; see the master/detail
   section further down for the row, team, and editor rules. Only the live
   state dot is defined here, because the pipeline on the dashboard uses it
   too. */

.agent-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-faint); flex: 0 0 auto;
}
.agent-dot.is-running { background: var(--warn); animation: agent-pulse 1.4s ease-in-out infinite; }
.agent-dot.is-done { background: var(--pos); }
.agent-dot.is-error { background: var(--neg); }
@keyframes agent-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .agent-dot.is-running { animation: none; } }

.agent-hint { font-size: 11px; color: var(--text-faint); }

/* editor ------------------------------------------------------------- */
.agent-editor { display: flex; flex-direction: column; gap: 11px; }
.agent-editor-head { display: flex; flex-direction: column; gap: 3px; }
.agent-editor-name { font-size: 14px; font-weight: 650; color: var(--text); }
.agent-editor-role { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
.agent-prompt-select { width: 100%; }

.agent-prompt-text {
    width: 100%;
    min-height: 460px;
    resize: vertical;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.65;
    tab-size: 2;
}
.agent-prompt-text:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.agent-editor-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.agent-save-btn { flex: 0 0 auto; }
.agent-prompt-status {
    font-family: var(--mono); font-size: 11px; color: var(--text-faint);
    min-width: 0; overflow-wrap: anywhere;
}
.agent-prompt-status.is-ok { color: var(--pos); }
.agent-prompt-status.is-error { color: var(--neg); }

/* ------------------------------------------------- approval queue -- */
.pending-list { display: flex; flex-direction: column; gap: 10px; }
.pending-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
}
.pending-info { min-width: 0; }
.pending-head { display: flex; align-items: baseline; gap: 10px; }
.pending-symbol { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); }
.pending-decision {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--warn);
    background: var(--warn-dim); border-radius: 3px; padding: 2px 8px;
}
.pending-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
.pending-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.pending-result {
    font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
    padding: 2px 0 6px;
}

/* ===========================================================================
   Charting surface
   ---------------------------------------------------------------------------
   The dashboard is chart-led, so the pieces that frame a chart -- the range
   strip that scopes it, the caption line that names the number it is about,
   and the sparkline that previews it inside a KPI -- are first-class
   components here rather than one-off inline styles.
   =========================================================================== */

/* -------------------------------------------------- segmented control ----- */

.segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.segmented.wrap { flex-wrap: wrap; }

.app-content .seg-btn,
.panel-head .seg-btn,
.seg-btn {
    appearance: none;
    border: none !important;
    background: transparent !important;
    color: var(--text-dim) !important;
    font-family: var(--font);
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 6px 11px !important;
    border-radius: 7px !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background 0.13s ease, color 0.13s ease;
}
.app-content .seg-btn:hover,
.seg-btn:hover { color: var(--text) !important; background: var(--surface-3) !important; }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The active segment is a raised chip, not just a colour change: on a dark
   ground a colour-only state is easy to miss at a glance. */
.app-content .seg-btn.active,
.app-content .seg-btn.active:hover,
.seg-btn.active,
.seg-btn.active:hover {
    background: var(--accent-dim) !important;
    color: #A8C7FF !important;
    box-shadow: inset 0 0 0 1px rgba(79, 141, 253, 0.36) !important;
}

/* ------------------------------------------------------ chart captions ---- */

/* A chart's own title bar is its panel head; the caption line underneath
   carries the reading -- the current value and its change -- so the number a
   viewer wants is text they can copy, not a pixel they must hover. */
.chart-caption {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-faint);
    line-height: 1.5;
    margin-bottom: 10px;
}
.chart-caption.mt { margin-top: 14px; }
.chart-caption:empty { display: none; }

.chart-caption-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.chart-caption-delta {
    font-size: 12.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* Charts sit flush in their panel: plotly draws its own padding, so a second
   layer of panel padding under a graph reads as a misaligned gap. */
.panel-body .js-plotly-plot { width: 100% !important; }

/* ------------------------------------------------------- KPI sparkline ---- */

/* A shape, not a series: no axis, no hover, and enough separation from the
   number above that it reads as supporting evidence rather than decoration. */
.kpi-spark {
    margin: 10px -17px -16px;
    opacity: 0.85;
    pointer-events: none;
}
.kpi:hover .kpi-spark { opacity: 1; }

/* A tile carrying a sparkline needs its footer clear of the curve. */
.kpi { display: flex; flex-direction: column; }
.kpi .kpi-spark { margin-top: auto; }

/* ------------------------------------------------------ chart toolbars ---- */

.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.chart-toolbar-symbols { min-width: 0; }
.chart-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.symbol-pagination-wrapper { min-width: 0; }
.seg-btn.symbol-btn { font-family: var(--mono); letter-spacing: 0.01em; }

/* A wide chart deserves more of the row than the panel beside it. */
.split-col.grow-2 { flex: 2 1 520px; }

/* Panels whose head carries a control need the control to sit tight against
   the right edge rather than inheriting the title's baseline spacing. */
.panel-head .segmented { margin: -3px 0; }

/* --------------------------------------------------------- refinements --- */

/* Plotly's own container occasionally reports a stale width during a page
   switch; pinning the modebar keeps it from floating over the first series. */
.modebar { background: transparent !important; }
.modebar-btn path { fill: var(--text-faint) !important; }
.modebar-btn:hover path { fill: var(--text) !important; }

@media (max-width: 860px) {
    .chart-toolbar { align-items: flex-start; flex-direction: column; }
    .kpi-spark { margin-left: -15px; margin-right: -15px; }
}

/* A panel in a stretched row inherits its neighbour's height; a chart inside
   it should use that height rather than leaving a band of dead ground under a
   fixed-height plot. `graph-fill` opts a graph into growing with its panel. */
.split-row .split-col > .panel > .panel-body { display: flex; flex-direction: column; }
.split-row .split-col > .panel > .panel-body > .graph-fill { flex: 1 1 auto; min-height: 0; }
.split-row .split-col > .panel > .panel-body > .graph-fill .js-plotly-plot,
.split-row .split-col > .panel > .panel-body > .graph-fill .plot-container { height: 100%; }

/* ---------------------------------------------------------- stat row ----- */

/* Three live counters under the run's agent roster. They are a reading, not a
   chart: the number is the point, so it gets the size and the label recedes. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.stat-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 4px;
}
.stat-value { font-size: 12.5px; font-weight: 600; color: var(--text); }

.run-status-line { margin-top: 12px; font-size: 12px; }

.decision-scroll {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.stat-value { font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
              font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-label i { margin-right: 6px; opacity: 0.75; }

/* ------------------------------------------------- positions & orders ---- */

/* The secondary half of a two-line numeric cell: the percentage under the
   dollar figure, or the order type under the symbol. */
.pl-sub { font-size: 11px; opacity: 0.8; margin-top: 2px; }

/* A status word with its own dot, so state is never carried by colour alone. */
.status-inline {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; text-transform: capitalize;
}

/* Liquidating a position is destructive, so the control says so -- but it sits
   in a table row and must not shout over the numbers beside it. */
.danger-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid rgba(255, 95, 95, 0.4);
    color: var(--neg);
    font-family: var(--font);
    font-size: 11.5px; font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s ease, border-color 0.13s ease;
}
.danger-btn:hover { background: var(--neg-dim); border-color: var(--neg); }
.danger-btn:focus-visible { outline: 2px solid var(--neg); outline-offset: 1px; }

.orders-pagination { padding: 12px 15px; margin-top: 0; }
.orders-table-container { padding: 0; }
.orders-table-body { min-height: 0; }
.liquidation-status { margin-top: 14px; font-size: 12.5px; }

/* The account tiles sit inside a panel body that already has padding. */
.panel-body > .kpi-grid { margin-bottom: 0; }

/* A one-paragraph explanation under a panel head: present, but never
   competing with the data it introduces. */
.panel-blurb {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.55;
    margin-bottom: 14px;
    max-width: 78ch;
}
.panel-notice:empty { display: none; }
.panel-notice { margin-bottom: 10px; }
.panel-action-group { display: flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------- forms --- */

/* A control row that wraps instead of collapsing: Bootstrap's grid is loaded
   from a CDN, and these forms must survive it being slow or blocked. */
.field-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { min-width: 0; }
.field-label {
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 6px; min-height: 14px;
}
.teach-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.teach-row .panel-blurb { flex: 1 1 320px; font-size: 12px; }

/* A denser KPI grid for metric strips inside a panel, where the tiles are a
   readout rather than the page's headline. */
.kpi-grid.tight {
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px;
}
.kpi-grid.tight .kpi { padding: 12px 13px 13px; }
.kpi-grid.tight .kpi-value { font-size: 19px; }

/* A label above a table inside a panel that already has a head. */
.subhead {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint);
    margin: 18px 0 9px;
}

/* ------------------------------------------------------- agent reports --- */

/* The report body used to reserve 1000px whether or not a run had produced
   anything, so an idle desk showed a screen-and-a-half of empty box. It now
   sizes to its content, with a cap so a long report scrolls inside the panel
   instead of pushing the tab strip off screen. */
.app-content [id$="-tab-content"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 18px 20px;
    min-height: 220px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: none;
}
.app-content [id$="-tab-content"] .enhanced-markdown-content:hover,
.app-content [id$="-tab-content"] .debate-content-wrapper:hover {
    border-color: transparent !important;
    box-shadow: none;
}

/* The tab strip is a segmented row over the report body, not a raised card. */
.app-content .enhanced-tabs .nav-tabs .nav-link.active {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.app-content .enhanced-tabs .nav-tabs .nav-link:hover {
    transform: none;
    box-shadow: none;
}

.symbol-display { font-family: var(--mono); font-size: 12.5px; color: var(--text); }

/* The report body itself: readable measure, app surface, no fixed height. */
.report-content-shell {
    color: var(--text);
    line-height: 1.65;
    font-size: 13.5px;
}
.report-content-shell .report-renderer > * + * { margin-top: 14px; }

/* The symbol pager is a control strip, not a card: it wraps a segmented
   control that already carries its own frame. */
.app-content .symbol-pagination-container {
    background: transparent;
    border: none;
    padding: 0;
}
.app-content .symbol-pagination-wrapper { align-items: flex-start; }

/* ------------------------------------------------- report typography ----- */

/* Agent reports arrive as markdown, so their headings default to browser
   sizes -- an <h1> in a report was rendering larger than the page title above
   it. Scale them into the app's own type ramp and let the hierarchy come from
   weight and spacing rather than sheer size. */
.report-content-shell h1,
.report-content-shell h2,
.dash-markdown h1,
.dash-markdown h2 {
    font-size: 16px !important;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.015em;
    margin: 22px 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}
.report-content-shell h1:first-child,
.report-content-shell h2:first-child,
.dash-markdown h1:first-child,
.dash-markdown h2:first-child { margin-top: 0; }

.report-content-shell h3, .dash-markdown h3 {
    font-size: 13.5px !important; font-weight: 700; color: var(--text);
    margin: 18px 0 6px;
}
.report-content-shell h4, .report-content-shell h5, .report-content-shell h6,
.dash-markdown h4, .dash-markdown h5, .dash-markdown h6 {
    font-size: 12.5px !important; font-weight: 650; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 16px 0 6px;
}
.report-content-shell p, .dash-markdown p { margin: 0 0 11px; }
.report-content-shell ul, .report-content-shell ol,
.dash-markdown ul, .dash-markdown ol { margin: 0 0 12px; padding-left: 22px; }
.report-content-shell li, .dash-markdown li { margin-bottom: 5px; }
.report-content-shell strong, .dash-markdown strong { color: var(--text); font-weight: 650; }
.report-content-shell code, .dash-markdown code {
    font-family: var(--mono); font-size: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px; color: var(--accent-strong);
}
.report-content-shell pre, .dash-markdown pre {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto;
}
.report-content-shell pre code, .dash-markdown pre code {
    background: none; border: none; padding: 0;
}
.report-content-shell blockquote, .dash-markdown blockquote {
    margin: 0 0 12px; padding: 2px 0 2px 14px;
    border-left: 2px solid var(--border-strong); color: var(--text-dim);
}
.report-content-shell hr, .dash-markdown hr { border-color: var(--border); margin: 18px 0; }

/* ===========================================================================
   Run Analysis configuration
   ---------------------------------------------------------------------------
   The configuration used to be one tall accordion inside a Bootstrap card in
   a half-width column. It is now three panels across the full page, so these
   rules give the fields real column counts and retire the card chrome the
   accordion needed.
   =========================================================================== */

.config-three-column,
.config-four-column {
    display: grid;
    gap: 14px;
    align-items: end;
}
.config-three-column { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.config-four-column  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Status lines the callbacks fill in. They collapse when empty, so an
   unconfigured panel does not reserve a band of blank ground. */
.config-note-row { display: flex; flex-direction: column; gap: 8px; }
.config-note-row:empty { display: none; }

.subhead.first { margin-top: 0; }

/* The start button lives in the panel head now. `w-100` is set on the button
   by the callback that swaps Start for Stop, so the width is capped here
   rather than by editing that callback's class list. */
.run-action { width: 168px; }
.app-content .config-primary-action {
    font-size: 13px !important;
    padding: 8px 14px !important;
}

/* The old sticky action bar floated over whichever section was scrolled
   behind it; with the button in the panel head there is nothing to float. */
.config-action-bar { position: static; background: none; padding: 0; margin: 0; }
.analysis-config-card .config-accordion:last-of-type { margin-bottom: 0; }

/* The run's result line sits under the setup fields, not over them. */
.result-status { margin-top: 14px; font-size: 12.5px; }
.result-status:empty { display: none; }

/* Panels supply their own frame, so the config sections inside them drop the
   card background they used to carry. */
.panel .config-section-body { gap: 16px; }
.panel .model-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 15px;
}

/* Analyst tiles read as one row of toggles rather than five stacked cards. */
.panel .analyst-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* The checkbox stretched to the full tile width, which pushed each analyst's
   name to the far right and left a gap in the middle of every tile. */
.panel .analyst-tile-click-target { gap: 10px; padding: 9px 12px; }
.panel .analyst-checkbox { width: auto; flex: 0 0 auto; }
.panel .analyst-tile .analyst-tile-label { flex: 1 1 auto; gap: 8px; }

/* Explanatory cards sit beside each other and stay quieter than the controls
   they describe. */
.config-note-row.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.panel .config-info-panel { padding: 11px 13px; }
.panel .config-info-panel h6,
.panel .config-info-panel .fw-semibold { font-size: 12.5px; }

/* ===========================================================================
   Agents - master/detail
   ---------------------------------------------------------------------------
   Fourteen agents in a fixed rail, the prompt editor taking the rest. The
   previous two-across card grid gave the descriptions half the page and left
   the editor -- the reason the page exists -- in a column too narrow to read a
   system prompt in.
   =========================================================================== */

.agent-workspace {
    display: grid;
    grid-template-columns: 316px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* The roster is long and the editor is not, so the rail scrolls inside itself
   and the editor stays put rather than the page scrolling as one. */
.agent-rail > .panel { margin-bottom: 0; }
.agent-rail .panel-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding: 13px;
}
.agent-detail > .panel { margin-bottom: 0; position: sticky; top: 18px; }

.agent-teams { gap: 16px; }
.agent-team-head {
    display: flex; align-items: center; gap: 8px;
    padding: 0 2px 7px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.agent-team-head .agent-team-title {
    flex: 1 1 auto;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-faint);
    margin: 0;
}
.agent-team-icon { font-size: 11px; }
.agent-team-count { font-size: 10px; padding: 1px 7px; }

.agent-list { display: flex; flex-direction: column; gap: 3px; }

/* Roster rows: the whole row is the hit target, and the left rule is what
   marks the selected one -- a row this compact cannot afford a fill that
   competes with the running-state dot. */
.agent-card {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.agent-card:hover { background: var(--surface-2); border-color: var(--border); }
.agent-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agent-card.is-selected {
    background: var(--accent-dim);
    border-color: rgba(79, 141, 253, 0.34);
    box-shadow: inset 2px 0 0 var(--accent);
}

.agent-row-icon {
    width: 24px; height: 24px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 11px;
}
.agent-card.is-selected .agent-row-icon { background: rgba(79,141,253,0.2); color: var(--accent-strong); }

.agent-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.agent-row-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.agent-row-role {
    font-size: 10.5px; color: var(--text-faint); line-height: 1.35;
    /* One line only: the full text is in the row's title attribute and in the
       editor header once the agent is selected. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.agent-row-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.agent-row-count {
    font-family: var(--mono); font-size: 10px; color: var(--text-faint);
    background: var(--surface-2); border-radius: 999px; padding: 1px 6px;
}
/* The dot carries the state in the rail; the word stays for assistive tech. */
.agent-row-meta .agent-card-state {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* editor ------------------------------------------------------------- */
.agent-editor-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 13px; margin-bottom: 13px;
    border-bottom: 1px solid var(--border);
}
.agent-editor-head { flex: 1 1 260px; min-width: 0; }
.agent-editor-picker { flex: 0 1 320px; min-width: 220px; }
.agent-prompt-text { min-height: 520px; }

@media (max-width: 1100px) {
    .agent-workspace { grid-template-columns: 1fr; }
    .agent-rail .panel-body { max-height: 420px; }
    .agent-detail > .panel { position: static; }
}

/* Team headings stay visible while the rail scrolls, so a row is never
   orphaned from the team it belongs to. */
.agent-rail .agent-team-head {
    position: sticky;
    top: -1px;
    z-index: 1;
    background: var(--surface);
    padding-top: 6px;
}