/* ================================================================
   MtManager — Bloomberg Terminal Design System

   Design language: industrial data density.
   Every pixel displays information. No decoration.

   Color hierarchy:
     Amber (#ff9500) — labels, headers, system identity
     White (#d4d4d4) — primary data values
     Green (#22c55e) — positive P&L only
     Red   (#ef4444) — negative P&L only
     Grey  (#6b7280) — secondary text, borders
     Black (#000000) — background, the absence of UI

   Typography: monospace only. Size + color + weight = hierarchy.
   Geometry: 0-2px radius. Hard edges. Visible grid lines.
   Density: 4-8px padding. Every cell earned.
   ================================================================ */

:root {
    --t-bg:          #000000;
    --t-panel:       #0a0a0a;
    --t-cell:        #0d0d0d;
    --t-cell-alt:    #111111;
    --t-border:      #1a1a1a;
    --t-border-vis:  #262626;
    --t-text:        #d4d4d4;
    --t-text-2:      #8a8a8a;
    --t-text-3:      #505050;
    --t-amber:       #ff9500;
    --t-amber-dim:   rgba(255,149,0,0.10);
    --t-amber-mid:   rgba(255,149,0,0.20);
    --t-green:       #22c55e;
    --t-green-dim:   rgba(34,197,94,0.10);
    --t-red:         #ef4444;
    --t-red-dim:     rgba(239,68,68,0.10);
    --t-blue:        #3b82f6;
    --t-blue-dim:    rgba(59,130,246,0.12);
    --t-purple:      #a78bfa;
    --t-purple-dim:  rgba(167,139,250,0.12);
    --t-mono:        "JetBrains Mono", "Cascadia Code", "Fira Code",
                     "SF Mono", "Consolas", ui-monospace, monospace;
    --t-amber-hover: #ffab33;
    --t-r:           2px;
    color-scheme: dark;
}


/* ── Pico override: turn it into a blank canvas ─────────── */

[data-theme="dark"], :root:not([data-theme="light"]) {
    --pico-background-color: var(--t-bg);
    --pico-card-background-color: var(--t-panel);
    --pico-card-border-color: var(--t-border);
    --pico-card-sectioning-background-color: var(--t-cell);
    --pico-color: var(--t-text);
    --pico-muted-color: var(--t-text-3);
    --pico-primary: var(--t-amber);
    --pico-primary-hover: var(--t-amber-hover);
}


/* ── Base ────────────────────────────────────────────────── */

body {
    background: var(--t-bg);
    font-family: var(--t-mono);
    font-size: 12px;
    line-height: 1.45;
    color: var(--t-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── Navigation — function bar ───────────────────────────── */

nav {
    background: var(--t-panel);
    border-bottom: 1px solid var(--t-border-vis);
    padding: 0;
    height: 32px;
    display: flex;
    align-items: center;
}
nav ul { margin: 0; padding: 0; gap: 0; }
nav li { padding: 0; }
nav li a {
    font-size: 11px;
    color: var(--t-text-2);
    padding: 6px 10px;
    transition: color 0.1s, background 0.1s;
    border-radius: 0;
}
nav li a:hover {
    color: var(--t-amber);
    background: var(--t-amber-dim);
}
nav strong {
    color: var(--t-amber);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.role-badge {
    background: var(--t-amber-dim);
    color: var(--t-amber);
    padding: 1px 8px;
    border-radius: var(--t-r);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    border: 1px solid rgba(255,149,0,0.15);
}


/* ── Status indicators ───────────────────────────────────── */

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.status-connected  { background: var(--t-green); box-shadow: 0 0 4px rgba(34,197,94,0.6); }
.status-connecting { background: var(--t-amber); box-shadow: 0 0 4px rgba(255,149,0,0.6); animation: blink 1.2s infinite; }
.status-disconnected { background: var(--t-text-3); }
.status-error      { background: var(--t-red); box-shadow: 0 0 4px rgba(239,68,68,0.6); }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }


/* ── Badges ──────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--t-r);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
    line-height: 16px;
}
.badge-mt4 { background: var(--t-blue-dim); color: var(--t-blue); }
.badge-mt5 { background: var(--t-purple-dim); color: var(--t-purple); }

.desk-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--t-r);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--t-amber-dim);
    color: var(--t-amber);
    vertical-align: middle;
    line-height: 16px;
}


/* ── P&L colors ──────────────────────────────────────────── */

.text-profit { color: var(--t-green); }
.text-loss   { color: var(--t-red); }


/* ── Buttons — minimal, functional ───────────────────────── */

.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    margin: 0;
    font-family: var(--t-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    border-radius: var(--t-r);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
    white-space: nowrap;
    min-height: 22px;
    text-transform: uppercase;
}
.btn-sm:active { opacity: 0.8; }
a.btn-sm { text-decoration: none; }

.btn-start {
    background: var(--t-green-dim);
    color: var(--t-green);
    border-color: rgba(34,197,94,0.2);
}
.btn-start:hover { background: rgba(34,197,94,0.18); }

.btn-stop {
    background: var(--t-amber-dim);
    color: var(--t-amber);
    border-color: rgba(255,149,0,0.2);
}
.btn-stop:hover { background: var(--t-amber-mid); }

.btn-danger {
    background: var(--t-red-dim);
    color: var(--t-red);
    border-color: rgba(239,68,68,0.15);
}
.btn-danger:hover { background: rgba(239,68,68,0.18); }

.btn-outline {
    background: transparent;
    color: var(--t-text-2);
    border-color: var(--t-border-vis);
}
.btn-outline:hover { color: var(--t-text); background: rgba(255,255,255,0.04); }

.btn-primary {
    background: var(--t-amber);
    color: #000;
    border: none;
    font-weight: 800;
}
.btn-primary:hover { background: var(--t-amber-hover); }


/* ── Alert + Toast ───────────────────────────────────────── */

.alert-banner {
    padding: 4px 12px;
    border-radius: var(--t-r);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    border-left: 2px solid;
    background: var(--t-panel);
}
.alert-banner.alert-amber  { border-left-color: var(--t-amber); color: var(--t-amber); }
.alert-banner.alert-success { border-left-color: var(--t-green); color: var(--t-green); }
.alert-banner.alert-error   { border-left-color: var(--t-red); color: var(--t-red); }

.toast-container {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    pointer-events: none;
}
.toast {
    padding: 6px 12px;
    border-radius: var(--t-r);
    font-size: 11px;
    min-width: 220px;
    max-width: 360px;
    pointer-events: auto;
    animation: slideIn 0.2s ease-out;
    border-left: 2px solid;
    background: var(--t-cell);
    color: var(--t-text);
    box-shadow: 0 4px 24px rgba(0,0,0,0.8);
}
.toast-success { border-left-color: var(--t-green); }
.toast-error   { border-left-color: var(--t-red); }
.toast-info    { border-left-color: var(--t-amber); }
.toast.removing { animation: slideOut 0.2s ease-in forwards; }

@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }


/* ── Surfaces ────────────────────────────────────────────── */

article {
    background: var(--t-panel);
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    padding: 12px;
}
article header { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--t-border); }
article footer { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--t-border); }


/* ── Tables — the soul of Bloomberg ──────────────────────── */

table {
    font-size: 11px;
    border-collapse: collapse;
    width: 100%;
}
table th {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-amber);
    background: var(--t-cell);
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--t-border-vis);
}
table td {
    font-variant-numeric: tabular-nums;
    padding: 3px 8px;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-text);
}
table tbody tr:hover { background: rgba(255,149,0,0.04); }


/* ── Footer ──────────────────────────────────────────────── */

footer.container { opacity: 0.2; font-size: 10px; padding: 4px 0; }


/* ── Controls ────────────────────────────────────────────── */

.autotrade-label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--t-text-2);
    cursor: pointer;
}
.autotrade-label input[type="checkbox"] { margin: 0; }


/* ── Scrollbar ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--t-bg); }
::-webkit-scrollbar-thumb { background: var(--t-border-vis); border-radius: 2px; }


/* ── HTMX ────────────────────────────────────────────────── */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: flex; }

/* Buttons show loading state during HTMX request */
.btn-sm.htmx-request,
.btn-sm.is-busy {
    pointer-events: none;
    opacity: 0.6;
}
.btn-sm.htmx-request::after,
.btn-sm.is-busy::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 4px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Generic button loading state for non-btn-sm */
button.htmx-request:not(.btn-sm) {
    pointer-events: none;
    opacity: 0.6;
}


/* ================================================================
   DASHBOARD — Bloomberg Launchpad

   Composition:
     1. Portfolio tape — ultra-dense top bar, the number line
     2. System strip — 24px status ribbon
     3. Account panels — bordered cells in a tight grid
     4. Book — positions table, the main content
   ================================================================ */


/* ── 1. Portfolio Tape ───────────────────────────────────── */

.portfolio-tape {
    display: flex;
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--t-border);
}

/* Primary — the numbers you came here to see */
.pt-primary {
    display: flex;
    flex: 1;
    gap: 1px;
}
.pt-cell {
    flex: 1;
    background: var(--t-panel);
    padding: 8px 12px;
    min-width: 0;
}
.pt-cell-hero {
    flex: 1.3;
    background: var(--t-cell);
    padding: 8px 12px;
    min-width: 0;
}
.pt-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-amber);
    line-height: 1;
    margin-bottom: 2px;
}
.pt-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--t-text);
}
.pt-cell .pt-value { font-size: 15px; }

/* Secondary — compressed sidebar stats */
.pt-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    width: 240px;
    flex-shrink: 0;
}
.pt-mini {
    background: var(--t-panel);
    padding: 4px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pt-mini-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-text-3);
    line-height: 1;
    margin-bottom: 1px;
}
.pt-mini-value {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--t-text-2);
}

@media (max-width: 860px) {
    .portfolio-tape { flex-direction: column; }
    .pt-secondary { width: 100%; grid-template-columns: repeat(4, 1fr); }
}


/* ── 2. System Strip ─────────────────────────────────────── */

.sys-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 24px;
    padding: 0 10px;
    margin-bottom: 8px;
    font-size: 10px;
    color: var(--t-text-3);
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    border-radius: var(--t-r);
}
.sys-strip .sys-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--t-text-2);
    font-weight: 600;
}
.sys-strip .sys-sep {
    width: 1px;
    height: 12px;
    background: var(--t-border-vis);
}
.sys-strip .sys-fill { flex: 1; }
.sys-strip .sys-clock {
    color: var(--t-text-3);
    font-variant-numeric: tabular-nums;
}


/* ── 3. Account Panels ───────────────────────────────────── */

.panels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.panel {
    background: var(--t-panel);
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    overflow: hidden;
    transition: border-color 0.15s;
}
.panel:hover { border-color: var(--t-amber); }

/* Panel colored top edge */
.panel-edge {
    height: 2px;
    background: var(--t-border);
}
.panel.st-connected .panel-edge  { background: var(--t-green); }
.panel.st-connecting .panel-edge { background: var(--t-amber); }
.panel.st-error .panel-edge      { background: var(--t-red); }

/* Panel header bar — amber-tinted like Bloomberg section headers */
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: var(--t-amber-dim);
    border-bottom: 1px solid var(--t-border);
}
.panel-head-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.panel-head a {
    color: var(--t-amber);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-head a:hover { color: var(--t-amber-hover); text-decoration: underline; }
.panel-head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--t-text-3);
}

/* Panel data grid — 3×2 cells */
.panel-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--t-border);
}
.panel-data .pd-cell {
    background: var(--t-cell);
    padding: 6px 8px;
    text-align: right;
}
.panel-data .pd-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-3);
    text-align: left;
    line-height: 1;
    margin-bottom: 1px;
}
.panel-data .pd-val {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: right;
}

/* Margin gauge */
.panel-gauge {
    height: 2px;
    background: var(--t-border);
}
.panel-gauge-fill {
    height: 100%;
    transition: width 0.5s ease;
}
.panel-gauge-fill.g-green  { background: var(--t-green); }
.panel-gauge-fill.g-amber  { background: var(--t-amber); }
.panel-gauge-fill.g-red    { background: var(--t-red); }

/* Panel controls row */
.panel-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--t-panel);
    border-top: 1px solid var(--t-border);
}
.panel-pos {
    font-size: 10px;
    color: var(--t-text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.panel-spacer { flex: 1; }

/* Strategy dots */
.strat-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}
.strat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.strat-dot.s-trend    { background: var(--t-green); }
.strat-dot.s-mean     { background: var(--t-blue); }
.strat-dot.s-breakout { background: var(--t-amber); }
.strat-dot.s-copy     { background: var(--t-purple); }


/* ── 4. Book (Positions) ─────────────────────────────────── */

.book-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--t-amber-dim);
    border: 1px solid var(--t-border-vis);
    border-bottom: none;
    border-radius: var(--t-r) var(--t-r) 0 0;
    margin-top: 4px;
}
.book-header-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--t-amber);
}

.book-wrap {
    border: 1px solid var(--t-border-vis);
    border-top: none;
    border-radius: 0 0 var(--t-r) var(--t-r);
    overflow: hidden;
    background: var(--t-panel);
}
.book-wrap figure { margin: 0; overflow-x: auto; }
.book-wrap table { margin: 0; }
.book-empty {
    text-align: center;
    padding: 12px;
    color: var(--t-text-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* ================================================================
   DESK MANAGEMENT
   ================================================================ */

.desk-card {
    background: var(--t-panel);
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    overflow: hidden;
    margin-bottom: 8px;
    transition: border-color 0.15s;
}
.desk-card:hover { border-color: var(--t-amber); }

.desk-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--t-amber-dim);
    border-bottom: 1px solid var(--t-border);
}
.desk-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.desk-card-title h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--t-amber);
    letter-spacing: 0.03em;
}
.desk-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.desk-account-count {
    font-size: 10px;
    color: var(--t-text-3);
    font-weight: 600;
}
.desk-inactive-tag {
    font-size: 9px;
    font-weight: 800;
    color: var(--t-red);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Desk data strip — single horizontal row like a Bloomberg ticker */
.desk-data-strip {
    display: flex;
    gap: 1px;
    background: var(--t-border);
    overflow-x: auto;
}
.desk-data-strip .dd-cell {
    flex: 1;
    min-width: 0;
    background: var(--t-cell);
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
}
.desk-data-strip .dd-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-3);
    line-height: 1;
    margin-bottom: 1px;
}
.desk-data-strip .dd-val {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--t-text);
}
.desk-notes {
    padding: 4px 10px;
    font-size: 10px;
    color: var(--t-text-3);
    border-top: 1px solid var(--t-border);
}
.desk-card--inactive { opacity: 0.5; }
.desk-card--inactive:hover { opacity: 0.8; }

/* Legacy constraint display (used in account_strategy_config) */
.desk-constraints {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    padding: 0 10px;
}
.constraint-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--t-border);
    font-size: 11px;
}
.constraint-item:last-child { border-bottom: none; }
.constraint-label { color: var(--t-text-3); font-size: 10px; }
.constraint-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--t-text);
}


/* ================================================================
   STRATEGY CONFIG TAB
   ================================================================ */

.strategy-section { margin-bottom: 12px; }

.strategy-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.strategy-section-title {
    font-size: 10px;
    font-weight: 800;
    color: var(--t-amber);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.strategy-add-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.strategy-add-controls select {
    margin: 0;
    font-size: 11px;
    font-family: var(--t-mono);
    padding: 2px 6px;
    min-height: 22px;
    border-radius: var(--t-r);
    background: var(--t-cell);
    border: 1px solid var(--t-border-vis);
    color: var(--t-text);
}

/* Desk picker — selectable desk buttons */
.desk-picker {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.desk-pick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    font-family: var(--t-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--t-cell);
    color: var(--t-text-2);
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    cursor: pointer;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
    margin: 0;
}
.desk-pick-btn:hover {
    border-color: var(--t-amber);
    color: var(--t-amber);
    background: var(--t-amber-dim);
}
.desk-pick-btn--active {
    border-color: var(--t-amber);
    color: var(--t-amber);
    background: var(--t-amber-dim);
}
.desk-pick-type {
    font-size: 8px;
    font-weight: 600;
    color: var(--t-text-3);
    letter-spacing: 0.06em;
}


/* ── Page utilities ──────────────────────────────────────── */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.page-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--t-amber);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.form-grid-2 label {
    margin-bottom: 0;
}
.form-grid-2 label small {
    display: block;
    font-size: 9px;
    color: var(--t-text-3);
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.form-grid-2 input, .form-grid-2 select {
    font-family: var(--t-mono);
    font-size: 11px;
    background: var(--t-cell);
    border: 1px solid var(--t-border-vis);
    color: var(--t-text);
    border-radius: var(--t-r);
    width: 100%;
}
.form-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

/* Compact inline form row (upload, filters) — override Pico .grid */
.form-inline {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.form-inline > * { margin-bottom: 0; }
.form-inline input,
.form-inline select {
    width: auto;
    min-width: 0;
}

/* ── Section title — reusable label for article headers ─── */

.section-title {
    color: var(--t-amber);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ── Brain card helpers ──────────────────────────────────── */

.brain-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brain-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.brain-name {
    color: var(--t-amber);
    font-size: 11px;
    font-weight: 800;
}
.brain-version {
    font-size: 10px;
    color: var(--t-text-3);
}
.brain-details {
    margin-top: 6px;
    font-size: 11px;
}
.brain-details summary {
    color: var(--t-text-2);
    cursor: pointer;
}
.brain-details-body {
    padding: 4px 0;
}
.brain-details-body--muted {
    padding: 4px 0;
    color: var(--t-text-3);
}


.positions-empty, .book-empty {
    text-align: center;
    padding: 16px;
    color: var(--t-text-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ================================================================
   GLOBAL NAVIGATION — proper separation + active state + responsive
   ================================================================ */

/* Override Pico nav completely — kill all Pico spacing variables first */
nav.top-bar {
    --pico-nav-element-spacing-vertical: 0;
    --pico-nav-element-spacing-horizontal: 0;
    --pico-nav-link-spacing-vertical: 0;
    --pico-nav-link-spacing-horizontal: 0;
    background: var(--t-panel);
    border-bottom: 1px solid var(--t-border-vis);
    padding: 0;
    margin: 0;
    height: auto;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}
nav.top-bar ul {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    gap: 0;
}
nav.top-bar li {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    height: 32px;
}
nav.top-bar li a {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
/* Ensure content doesn't hide under sticky nav */
nav.top-bar + main { padding-top: 12px; }

/* Kill Pico container-fluid padding on nav */
nav.top-bar.container-fluid { padding: 0 !important; margin: 0; max-width: 100%; }

/* Brand — separated by double-width border */
nav.top-bar .nav-brand {
    padding: 0 16px;
    border-right: 2px solid var(--t-amber);
    height: 32px;
    display: flex;
    align-items: center;
    margin-right: 0;
}
nav.top-bar .nav-brand strong {
    color: var(--t-amber);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* Nav links with visible separators */
nav.top-bar .nav-links {
    border-right: 1px solid var(--t-border-vis);
    height: 32px;
    display: flex;
    align-items: center;
}
nav.top-bar .nav-links a {
    display: flex !important;
    align-items: center;
    height: 32px;
    padding: 0 16px !important;
    font-size: 10px;
    font-weight: 600;
    color: var(--t-text-3);
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-right: 1px solid var(--t-border-vis);
    transition: color 0.1s, background 0.1s;
}
nav.top-bar .nav-links li:last-child a { border-right: none; }
nav.top-bar .nav-links a:hover {
    color: var(--t-amber);
    background: var(--t-amber-dim);
}
nav.top-bar .nav-links a.active {
    color: var(--t-amber);
    background: var(--t-amber-mid);
    box-shadow: inset 0 -2px 0 var(--t-amber);
}

/* Right section — separated by visible border */
nav.top-bar .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 32px;
    border-left: 1px solid var(--t-border-vis);
}

@media (max-width: 640px) {
    nav.top-bar { flex-wrap: wrap; height: auto; }
    nav.top-bar .nav-brand { width: 100%; border-right: none; border-bottom: 1px solid var(--t-border); justify-content: center; }
    nav.top-bar .nav-links { width: 100%; border-right: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    nav.top-bar .nav-links a { white-space: nowrap; font-size: 9px; padding: 0 10px !important; }
    nav.top-bar .nav-right { width: 100%; justify-content: center; border-top: 1px solid var(--t-border); }
}


/* ================================================================
   TAB NAVIGATION — account detail horizontal scroll
   ================================================================ */

.tab-bar {
    display: flex;
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--t-border);
    gap: 1px;
    margin-bottom: 8px;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-3);
    text-decoration: none;
    white-space: nowrap;
    background: var(--t-panel);
    transition: color 0.1s, background 0.1s;
}
.tab-bar a:hover {
    color: var(--t-text);
    background: var(--t-cell);
}
.tab-bar a.active {
    color: var(--t-amber);
    background: var(--t-amber-dim);
}


/* ================================================================
   ACCOUNT DETAIL HEADER
   ================================================================ */

.detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.detail-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--t-amber);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ================================================================
   GLOBAL FORM STYLES — replace Pico defaults
   ================================================================ */

/* Form inputs — compact terminal density. !important to override Pico.
   No !important on select to preserve native dropdown. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea {
    font-family: var(--t-mono) !important;
    font-size: 11px !important;
    background: var(--t-cell) !important;
    border: 1px solid var(--t-border-vis) !important;
    color: var(--t-text) !important;
    border-radius: var(--t-r) !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
    height: 26px !important;
    margin-bottom: 0 !important;
}
input[type="file"] {
    font-family: var(--t-mono) !important;
    font-size: 10px !important;
    background: var(--t-cell) !important;
    border: 1px solid var(--t-border-vis) !important;
    color: var(--t-text-2) !important;
    border-radius: var(--t-r) !important;
    padding: 3px 6px !important;
    min-height: 0 !important;
    height: 26px !important;
    margin-bottom: 0 !important;
}
input[type="file"]::file-selector-button {
    font-family: var(--t-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--t-r);
    background: var(--t-amber-dim);
    color: var(--t-amber);
    border: 1px solid rgba(255,149,0,0.2);
    cursor: pointer;
    margin-right: 6px;
}
select {
    font-family: var(--t-mono);
    font-size: 11px;
    background: var(--t-cell);
    border: 1px solid var(--t-border-vis);
    color: var(--t-text);
    border-radius: var(--t-r);
    padding: 4px 24px 4px 8px;
    height: 26px;
    min-height: 0;
    margin-bottom: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8a8a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
}
select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ff9500'/%3E%3C/svg%3E");
}
select option {
    background: var(--t-panel);
    color: var(--t-text);
    padding: 4px 8px;
}
textarea {
    height: auto !important;
    min-height: 40px !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--t-amber) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(255,149,0,0.2) !important;
}

label {
    font-size: 10px;
    color: var(--t-text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

/* Global button style for Pico overrides */
button:not(.btn-sm) {
    font-family: var(--t-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    min-height: 0;
    height: 26px;
    border-radius: var(--t-r);
    cursor: pointer;
    background: var(--t-amber);
    color: #000;
    border: none;
    margin-bottom: 0;
}
button:not(.btn-sm):hover { background: var(--t-amber-hover); }
button:not(.btn-sm).secondary,
button:not(.btn-sm).outline,
button:not(.btn-sm)[class*="secondary"],
button:not(.btn-sm)[class*="outline"] {
    background: transparent;
    color: var(--t-text-2);
    border: 1px solid var(--t-border-vis);
}
button:not(.btn-sm).secondary:hover,
button:not(.btn-sm).outline:hover,
button:not(.btn-sm)[class*="secondary"]:hover,
button:not(.btn-sm)[class*="outline"]:hover {
    color: var(--t-text);
    background: rgba(255,255,255,0.04);
}


/* ================================================================
   METRICS GRID — replaces Pico .grid for overview panels
   ================================================================ */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--t-border);
    border-radius: var(--t-r);
    overflow: hidden;
    margin-bottom: 8px;
}
.metrics-grid .mg-cell {
    background: var(--t-cell);
    padding: 8px 10px;
    text-align: center;
}
.metrics-grid .mg-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-3);
    line-height: 1;
    margin-bottom: 2px;
}
.metrics-grid .mg-val {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--t-text);
}

@media (max-width: 480px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   INSTANCE STATUS — checkmarks
   ================================================================ */

.instance-grid {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--t-text-2);
    padding: 4px 0;
}
.instance-grid span { font-weight: 600; }


/* ================================================================
   LOG VIEWER
   ================================================================ */

.log-viewer {
    max-height: 500px;
    overflow-y: auto;
    background: var(--t-cell);
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    padding: 8px;
}
.log-viewer pre {
    margin: 0;
    white-space: pre-wrap;
    font-size: 11px;
    line-height: 1.5;
}
.log-error { color: var(--t-red); }
.log-warning { color: var(--t-amber); }


/* ================================================================
   FILTER BAR — history, logs
   ================================================================ */

.filter-bar {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.filter-bar label {
    margin: 0;
    flex-shrink: 0;
}
.filter-bar label small {
    display: block;
    font-size: 8px;
    margin-bottom: 2px;
}
.filter-bar input,
.filter-bar select {
    width: auto;
    min-width: 0;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--t-text-3);
    padding: 6px 0;
}
.pagination a {
    color: var(--t-amber);
    text-decoration: none;
    font-weight: 600;
}
.pagination a:hover { text-decoration: underline; }


/* ================================================================
   RESPONSIVE — portfolio, panels, forms, tables
   ================================================================ */

@media (max-width: 600px) {
    .portfolio-tape { flex-direction: column; }
    .pt-primary { flex-direction: column; gap: 1px; }
    .pt-cell-hero, .pt-cell { padding: 6px 10px; }
    .pt-value { font-size: 14px !important; }
    .pt-secondary { width: 100%; grid-template-columns: repeat(2, 1fr); }

    .panels-grid { grid-template-columns: 1fr; gap: 6px; }

    .form-grid-2 { grid-template-columns: 1fr; }
    .form-inline { flex-direction: column; align-items: stretch; }

    .page-header { flex-direction: column; gap: 8px; align-items: flex-start; }

    .sys-strip { flex-wrap: wrap; height: auto; padding: 4px 8px; gap: 6px; }

    .desk-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }

    /* Dialog compaction */
    dialog article { min-width: 0 !important; width: 90vw; }
}

/* Table scroll wrapper */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 600px; }


/* ================================================================
   LOGIN PAGE
   ================================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--t-bg);
    padding: 16px;
}
.login-box {
    width: 100%;
    max-width: 360px;
    background: var(--t-panel);
    border: 1px solid var(--t-border-vis);
    border-radius: var(--t-r);
    overflow: hidden;
}
.login-header {
    padding: 12px 16px;
    background: var(--t-amber-dim);
    border-bottom: 1px solid var(--t-border);
    text-align: center;
}
.login-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--t-amber);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.login-body {
    padding: 16px;
}
.login-error {
    color: var(--t-red);
    font-size: 11px;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: var(--t-red-dim);
    border-radius: var(--t-r);
}
.login-body button {
    width: 100%;
    margin-top: 4px;
}