/* Positions page — Live Position Manager.
   Builds on tables.css / app.css. Positions-specific layout: KPI ribbon
   with 6 cells, tab bar with badges, dense pro-table with row expand.
*/

.pos-page {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* KPI ribbon overrides — Positions uses 6 cells (lighter than dashboard 7).
   Mode badges + numeric emphasis sit on tabular-nums everywhere. */
.pos-kpi {
    grid-auto-columns: minmax(150px, 1fr);
}

.panel-table {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}
.panel-table .panel-body {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    overflow-x: auto;
}

/* Symbol column with two-line label */
.pro-table .sym-cell {
    display: flex; align-items: center; gap: 8px;
    line-height: 1.2;
}
.pro-table .sym-cell .sym-line {
    display: flex; flex-direction: column;
}
.pro-table .sym-cell .ex-name {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}
.pro-table .sym-cell .market-arrow {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.12s ease;
}
.pro-table .sym-cell:hover .market-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

/* PnL cell — large value + percentage stack */
.pro-table .pnl-cell {
    text-align: right;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.pro-table .pnl-cell .v {
    font-weight: 600;
    font-size: 12px;
}
.pro-table .pnl-cell .pct {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
}
.pro-table .pnl-cell.pos .v { color: var(--green); }
.pro-table .pnl-cell.neg .v { color: var(--red); }

/* Inline action buttons */
.pro-table .row-actions {
    display: flex;
    gap: 4px;
    align-items: center;          /* ▤ icon (22px) + Auto/Manual pill + buttons line up */
    justify-content: flex-end;
}
.pro-table .row-actions .btn {
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
    border-radius: 4px;
}

/* Expand caret */
.pro-table .expand-toggle {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.15s ease, color 0.15s ease;
    user-select: none;
}
.pro-table tr.is-expanded .expand-toggle {
    transform: rotate(90deg);
    color: var(--accent);
}

/* Sortable header arrows */
.pro-table thead th .sort-arrow {
    color: var(--text-muted);
    margin-left: 4px;
    font-size: 9px;
}
.pro-table thead th.sort-active .sort-arrow {
    color: var(--accent);
}

/* Side pill */
.side-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.side-pill.long  { color: var(--green); background: rgba(34,197,94,0.10); }
.side-pill.short { color: var(--red);   background: rgba(239,68,68,0.10); }
.side-pill.buy   { color: var(--green); background: rgba(34,197,94,0.10); }
.side-pill.sell  { color: var(--red);   background: rgba(239,68,68,0.10); }

/* Reason badge */
.reason-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.reason-badge.r-tp      { color: var(--green);  background: rgba(34,197,94,0.10); }
.reason-badge.r-sl      { color: var(--red);    background: rgba(239,68,68,0.12); }
.reason-badge.r-l2      { color: var(--accent); background: rgba(99,102,241,0.10); }
.reason-badge.r-funding { color: var(--yellow); background: rgba(250,204,21,0.10); }
.reason-badge.r-manual  { color: var(--text-muted); }

/* Expired chip */
.expired-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    color: var(--red);
    background: rgba(239,68,68,0.12);
    font-weight: 700;
}

/* Loading state */
.pos-loading {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
}

/* Market-revenge streak (anh 2026-06-07) — a revenge chain shown as ONE trade
   with sub-trades. Hairline + glyph colour, no heavy boxes (minimalist). */
.streak-badge,
.pnl-cell .streak-tag {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
}
.streak-badge { margin-left: 4px; letter-spacing: 0.02em; }

.streak-pane { margin-bottom: 10px; }
.streak-pane .streak-head {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 0 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.streak-pane .streak-head b { color: var(--accent); }
.streak-pane .streak-head .pos { color: var(--green); }
.streak-pane .streak-head .neg { color: var(--red); }

.streak-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.streak-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    padding: 2px 8px 2px 0;
}
.streak-table td {
    padding: 3px 8px 3px 0;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}
.streak-table td.pos { color: var(--green); }
.streak-table td.neg { color: var(--red); }
.streak-table tr.streak-rep td { font-weight: 600; }

/* ── Manual bulk-close toolbar (anh 2026-06-07) ────────────────────────
   Open-tab only. Minimalist hairline-separated row holding the single
   "Flatten open" action. (Auto-profit lives in the Tuning Center now.) */
.pos-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 2px;
    margin-top: 2px;
    border-bottom: 1px solid var(--border);
}
.pos-toolbar[hidden] { display: none; }
.pos-toolbar .pt-left { display: flex; align-items: center; gap: 8px; }
.pos-toolbar .pt-count {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}