/*
FILE: bloomberg-terminal.css
PATH: /wwwroot/css/terminals/bloomberg-terminal.css
UPDATED: 2026-07-09 03:33:00 EST — .pf-warn-i red-asterisk popover trigger.
PURPOSE: Unified Bloomberg-style terminal CSS.
         Each terminal sets --tcols once on .terminal-container.
         All row types (header, data, editor) inherit --tcols via var().
         Includes global terminal-input, terminal-select, terminal-filter-bar.
*/

/* ─── Sticky header block ────────────────────────────── */

.terminal-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bbg-bg);
    padding-bottom: 2px;
}

/* ─── Container / Title ─────────────────────────────── */

.terminal-container {
    padding: 8px 12px;
}

.terminal-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ─── Grid wrapper ──────────────────────────────────── */

.terminal-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Row base (shared by header, data, editor) ─────── */

.terminal-header-row,
.terminal-row,
.terminal-editor-row {
    display: grid;
    grid-template-columns: var(--tcols, 1fr 160px);
    align-items: stretch;
    min-height: 34px;
}

.terminal-header-row {
    border-bottom: 1px solid var(--bbg-border);
}

.terminal-row {
    border: 1px solid var(--bbg-border);
    background-color: var(--bbg-row-bg);
}

.terminal-row:hover {
    background-color: #1a2a1a;
}

.terminal-editor-row {
    border: 1px solid var(--bbg-cyan);
}

/* ─── Column cells ──────────────────────────────────── */

.terminal-col {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-right: 1px solid var(--bbg-border);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.terminal-col:last-child {
    border-right: none;
}

.terminal-col-header {
    font-weight: 600;
    color: var(--bbg-cyan);
    white-space: nowrap;
}

.terminal-col-index {
    color: var(--bbg-cyan);
    justify-content: center;
    font-weight: 600;
}

.terminal-col-actions {
    justify-content: flex-end;
    gap: 6px;
}

/* Numeric cells (strike, qty, money, greeks, %): .terminal-col is display:flex,
   so text-align has no effect — justify-content is what right-aligns the value.
   tabular-nums keeps digit widths even so columns line up. Use on header + data
   + total cells. For editor <input> fields use .terminal-num-input instead. */
.terminal-col-num {
    justify-content: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.terminal-num-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Legacy: two-zone row (kept for Trades / Transactions / Strategies) */

.terminal-row-index {
    color: var(--bbg-cyan);
    font-weight: 600;
    margin-right: 10px;
}

.terminal-row-title {
    color: var(--bbg-foreground);
}

.terminal-chevron {
    color: var(--bbg-cyan);
    font-weight: 700;
    margin-right: 10px;
}

/* ─── Legacy: sub-panel rows (kept for any terminals not in this refactor) */

.terminal-subheader {
    color: #ffffff;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* ─── Expand panel ──────────────────────────────────── */

.terminal-expand-panel {
    border: 2px solid var(--bbg-cyan);
    padding: 8px;
    margin-left: 20px;
    margin-bottom: 8px;
    animation: bbg-slideDown 150ms ease-out;
    position: relative;
}

.trade-nav-btn          { position: absolute; right: 6px; }
.trade-nav-btn.trade-nav-up   { top: 6px; }
.trade-nav-btn.trade-nav-down { bottom: 6px; }

/* ── Row-level merge styles ─────────────────────────────────── */

.trade-row-merge-source {
    border-left: 2px solid var(--bbg-cyan);
    background: rgba(0, 230, 230, 0.04);
}

.trade-row-merge-target:hover {
    background: rgba(255, 176, 0, 0.07);
}

.trades-merge-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 5px 10px;
    border: 1px solid var(--bbg-amber);
    color: var(--bbg-amber);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

@keyframes bbg-slideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Filter bar ────────────────────────────────────── */

.terminal-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.terminal-filter-input {
    width: 140px;
}

/* ─── Form inputs (global — applies to all terminals) ── */

.terminal-input,
.terminal-select {
    background: #0a0a0a;
    color: var(--bbg-foreground);
    border: 1px solid var(--bbg-border);
    font-family: inherit;
    font-size: 0.8rem;
    padding: 3px 6px;
    height: 28px;
}

.terminal-input:focus,
.terminal-select:focus {
    outline: none;
    border-color: var(--bbg-cyan);
    box-shadow: 0 0 0 1px var(--bbg-cyan);
}

/* Date inputs: tell the browser to render its calendar chrome in dark mode
   so the picker icon and calendar popup match the terminal theme. */
.terminal-date-input {
    width: 130px;
    color-scheme: dark;
}

.terminal-select option {
    background: #0a0a0a;
    color: var(--bbg-foreground);
}

/* ─── Account selector (shared across all terminals) ─── */

.terminal-account-select {
    background: #0a0a0a;
    color: var(--bbg-foreground);
    border: 1px solid var(--bbg-border);
    font-family: inherit;
    font-size: 0.84rem;
    padding: 5px 9px;
    min-width: 220px;
}

.terminal-account-select:focus {
    outline: none;
    border-color: var(--bbg-cyan);
}

.terminal-account-select option {
    background: #0a0a0a;
    color: var(--bbg-foreground);
}

/* ─── Input styling ─────────────────────────────────── */

.bbg-input {
    background-color: #ffffff;
    color: #000000;
}

    .bbg-input::placeholder {
        color: #000000;
    }

/* ─── PnL color helpers (used in trade list rows) ───── */

.trade-pnl-pos { color: #00c853; }
.trade-pnl-neg { color: #dc3545; }

/* ─── Clickable link style (symbol, date) ───── */

.tdp-date-link {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* ── Strategy description popover ───────────────────────────────────── */

/* Overrides overflow:hidden on .terminal-col so the popover can render outside the cell */
.terminal-col-popover {
    overflow: visible;
}

.strat-desc-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.strat-desc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.strat-info-icon {
    position: relative;
    color: var(--bbg-cyan);
    font-size: 0.8rem;
    cursor: default;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}
.strat-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    padding: 8px 10px;
    background: var(--bbg-bg-alt);
    border: 1px solid var(--bbg-border);
    color: var(--bbg-foreground);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: normal;
    z-index: 200;
    pointer-events: none;
}
.strat-info-icon:hover .strat-popover,
.strat-info-icon:focus .strat-popover {
    display: block;
}
.tdp-date-link:hover { color: var(--bbg-cyan); }

/* ─── Account gate hint (all terminals) ─────────────────────── */

.terminal-account-gate-hint {
    font-size: 0.78rem;
    color: var(--bbg-foreground);
    opacity: 0.6;
    margin-bottom: 6px;
}

/* ─── Import routing nav links (wizard + imports terminal) ───── */

.import-nav-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--bbg-cyan);
    cursor: pointer;
    text-decoration:underline dotted;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    text-underline-offset:3px;
}
.import-nav-link:hover { opacity: 0.75; }

.import-routing-summary {
    font-size: 0.82rem;
    color: var(--bbg-foreground);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ─── Long-running operation progress hint ──────────────── */
.import-progress-hint {
    font-size: 0.82rem;
    color: var(--bbg-amber);
    padding: 4px 0 2px;
    font-style: italic;
    animation: bbg-fade-pulse 1.5s ease-in-out infinite;
}
@keyframes bbg-fade-pulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1.0; }
}

.import-purge-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 5px 10px;
    border: 1px solid var(--bbg-amber);
    color: var(--bbg-amber);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}
.import-purge-notice > span {
    flex: 1;
}

/* ─── Portfolio terminal ─────────────────────────────────── */

/* Flex form row for create / edit — does NOT inherit --tcols grid */
.portfolio-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--bbg-border);
    background: var(--bbg-bg-alt);
    margin-bottom: 2px;
}

.portfolio-badge {
    color: var(--bbg-amber);
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.campaign-badge {
    color: var(--bbg-cyan);
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

/* ── Campaign rollup summary strip (under each campaign row) ─────────────── */
.campaign-rollup-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    padding: 2px 12px 6px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    color: var(--bbg-foreground);
    border-bottom: 1px solid var(--bbg-border);
}
.campaign-rollup-dim { opacity: 0.6; }

.campaign-status {
    font-weight: 600;
    letter-spacing: 0.03em;
}
.campaign-status-Active { color: var(--bbg-cyan); }
.campaign-status-Paused { color: var(--bbg-amber); }
.campaign-status-Closed { color: var(--bbg-foreground); opacity: 0.5; }

.trade-comment-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bbg-foreground);
    opacity: 0.4;
    flex-shrink: 0;
    title: "Has comment";
}

.portfolio-detail-panel {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portfolio-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portfolio-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bbg-amber);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--bbg-border);
    padding-bottom: 3px;
    margin-bottom: 6px;
}

/* 5-column grid: Symbol · Trades · Accounts · R-PnL · Net */
.portfolio-positions-grid {
    display: grid;
    grid-template-columns: 7rem 3.5rem 1fr 7rem 7rem;
    align-items: center;
    gap: 0;
}

.portfolio-pos-header {
    font-size: 0.78rem;
    font-weight: bold;
    color: var(--bbg-cyan);
    padding: 2px 8px;
    border-bottom: 1px solid var(--bbg-border);
}

.portfolio-pos-cell {
    font-size: 0.82rem;
    padding: 3px 8px;
    border-bottom: 1px solid var(--bbg-border);
}

.portfolio-card {
    border: 1px solid var(--bbg-border);
    background: var(--bbg-bg-alt);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}

.portfolio-card-header {
    background: var(--bbg-header-bg);
    color: var(--bbg-header-fg);
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 10px;
    letter-spacing: 0.02em;
}

.portfolio-trade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--bbg-border);
    background: var(--bbg-row-bg);
}

.portfolio-trade-row:hover {
    background: var(--bbg-row-hover-bg);
}

.portfolio-legs-block {
    background: var(--bbg-bg-alt);
    padding: 4px 10px 4px 20px;
    border-bottom: 1px solid var(--bbg-border);
}

.portfolio-leg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    border-bottom: 1px solid var(--bbg-border);
    font-size: 0.8rem;
}

.portfolio-leg-row:last-child {
    border-bottom: none;
}

/* ── Shared positions grid (Global / Account / Custom portfolio views) ───── */

.pf-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bbg-border);
    margin: 0.5rem 0 1rem;
    font-variant-numeric: tabular-nums;
}

.pf-row {
    display: grid;
    grid-template-columns: var(--pf-cols);
    align-items: center;
    gap: 0 8px;
    padding: 3px 10px;
    border-bottom: 1px solid var(--bbg-border);
    font-size: 0.82rem;
}

.pf-row:last-child { border-bottom: none; }

.pf-row-header {
    font-size: 0.72rem;
    font-weight: bold;
    color: var(--bbg-cyan);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pf-row-subtotal {
    background: var(--bbg-bg-alt);
    font-weight: 600;
    opacity: 0.92;
}

.pf-row-total {
    border-top: 1px solid var(--bbg-border);
    font-weight: bold;
    letter-spacing: 0.03em;
}

.pf-num { text-align: right; }

.pf-sym { color: var(--bbg-cyan); font-weight: bold; }

.pf-acct {
    color: var(--bbg-muted, #8a8a8a);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-empty { opacity: 0.5; }

.pf-pos { color: var(--bbg-cyan); }
.pf-neg { color: #dc3545; }

/* ── Allocation / diversification panel ─────────────────────────────────── */

.pf-alloc-panel {
    display: flex;
    gap: 20px;
    padding: 10px 14px;
    margin-bottom: 1rem;
    border: 1px solid var(--bbg-border);
    background: var(--bbg-row-bg, #0c0c0c);
    font-variant-numeric: tabular-nums;
}

.pf-alloc-section { flex: 1; min-width: 200px; }

.pf-alloc-divider { width: 1px; background: var(--bbg-border); }

.pf-alloc-title {
    font-size: 0.7rem;
    color: var(--bbg-cyan);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: bold;
}

.pf-alloc-empty { opacity: 0.5; font-size: 0.78rem; }

.pf-alloc-row {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) 4rem 5rem 3.2rem;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
    font-size: 0.78rem;
}

.pf-alloc-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-alloc-bar-wrap {
    background: var(--bbg-bg-alt);
    height: 8px;
    border: 1px solid var(--bbg-border);
    overflow: hidden;
}

.pf-alloc-bar {
    display: block;
    height: 100%;
    background: var(--bbg-cyan);
    opacity: 0.5;
}

.pf-alloc-val { text-align: right; }

.pf-alloc-pct { text-align: right; opacity: 0.7; }

/* ── By Account: Cash + Positions = Net Liq breakdown ───────────────────── */

.pf-alloc-acct {
    padding: 3px 0 5px;
    border-bottom: 1px solid var(--bbg-border);
    margin-bottom: 3px;
}

.pf-alloc-acct-head {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) 4rem 3.2rem;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.pf-alloc-acct-head-solo { grid-template-columns: 1fr; }

.pf-alloc-nl-row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0 0 0 10px;
    font-size: 0.74rem;
}

.pf-alloc-nl-label { color: var(--bbg-muted); }

.pf-alloc-nl-val { text-align: right; }

.pf-alloc-nl-total {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid var(--bbg-border);
    font-weight: 600;
}

.pf-alloc-nl-total .pf-alloc-nl-label { color: var(--bbg-foreground); }

/* ── Metrics row: Exposure · Delta-Weighted · Concentration ─────────────── */

.pf-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0;
}

.pf-exposure {
    border: 1px solid var(--bbg-border);
    background: var(--bbg-row-bg);
    padding: 8px 12px;
    flex: 1 1 320px;
    max-width: 440px;
    font-size: 0.8rem;
}

.pf-exp-note {
    color: var(--bbg-muted);
    font-size: 0.68rem;
    margin-top: 4px;
}

/* Naked/unhedged short warning under the Defined-Risk Max Loss line. */
.pf-risk-warn { color: #dc3545; }

.pf-info {
    color: var(--bbg-muted);
    cursor: help;
    font-size: 0.72rem;
    vertical-align: super;
}

.pf-info:hover { color: var(--bbg-cyan); }

/* Detailed popover (Bootstrap-popover styling, CSS-only). Only the ⓘ icon triggers it,
   and it opens to the RIGHT of the icon. */
.pf-metric-label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }

.pf-pop-i {
    position: relative;
    display: inline-block;
    color: var(--bbg-muted);
    font-size: 0.72rem;
    cursor: help;
    outline: none;
    user-select: none;
}
.pf-pop-i:hover,
.pf-pop-i:focus { color: var(--bbg-cyan); }

/* Red asterisk variant: flags a metric that can mislead (e.g. Gross Exposure in an
   options-heavy book). Reuses .pf-pop-i reveal mechanics; overrides color/glyph weight. */
.pf-warn-i { color: #dc3545; font-weight: 700; margin-left: 2px; }
.pf-warn-i:hover,
.pf-warn-i:focus { color: #dc3545; }

.pf-pop {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 264px;
    z-index: 300;
    background: var(--bbg-bg-alt);
    border: 1px solid var(--bbg-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    font-size: 0.74rem;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    font-weight: normal;
}
.pf-pop-i:hover .pf-pop,
.pf-pop-i:focus .pf-pop,
.pf-pop-i:focus-within .pf-pop { display: block; }

.pf-pop-head {
    display: block;
    padding: 6px 10px;
    background: var(--bbg-header-bg);
    color: var(--bbg-header-fg);
    border-bottom: 1px solid var(--bbg-border);
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}
.pf-pop-body { display: block; padding: 8px 10px; color: var(--bbg-foreground); }
.pf-pop-body b { color: var(--bbg-cyan); }

/* Arrow on the left edge, pointing back at the icon */
.pf-pop::before {
    content: "";
    position: absolute;
    left: -6px;
    right: auto;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--bbg-bg-alt);
    border-left: 1px solid var(--bbg-border);
    border-bottom: 1px solid var(--bbg-border);
    transform: translateY(-50%) rotate(45deg);
}

.pf-exp-title {
    color: var(--bbg-amber);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.pf-exp-row { display: grid; grid-template-columns: 1fr auto auto; column-gap: 8px; align-items: center; padding: 1px 0; }

.pf-exp-label { color: var(--bbg-muted); white-space: nowrap; }

.pf-exp-val { text-align: right; white-space: nowrap; }

/* ── Portfolio view panel (toolbar + summary tiles) ─────────────────────── */

.pf-view { display: flex; flex-direction: column; }

.pf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.25rem 0 0.75rem;
}

.pf-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-toolbar-label {
    font-size: 0.68rem;
    color: var(--bbg-cyan);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

.pf-price-select { width: 8rem; }

.pf-asof { font-size: 0.72rem; opacity: 0.6; }

.pf-error {
    border-left: 3px solid #c0392b;
    color: #e67e22;
    font-size: 0.8rem;
    padding: 4px 10px;
    margin-bottom: 0.6rem;
}

.pf-note {
    font-size: 0.75rem;
    color: var(--bbg-amber);
    opacity: 0.85;
    margin-bottom: 0.6rem;
}

.pf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--bbg-border);
    background: var(--bbg-row-bg, #0c0c0c);
    margin-bottom: 1rem;
}

.pf-tile {
    flex: 1;
    min-width: 130px;
    padding: 8px 14px;
    border-right: 1px solid var(--bbg-border);
}

.pf-tile:last-child { border-right: none; }

.pf-tile-label {
    font-size: 0.68rem;
    color: var(--bbg-cyan);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 3px;
}

.pf-tile-val {
    font-size: 1rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* ── Account portfolios landing list ────────────────────────────────────── */

.pf-account-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0.5rem;
}

.pf-account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--bbg-border);
    background: var(--bbg-row-bg, #0c0c0c);
    color: var(--bbg-foreground);
    text-decoration: none;
    font-size: 0.86rem;
}

.pf-account-link:hover {
    border-color: var(--bbg-cyan);
    background: var(--bbg-row-hover-bg, #141414);
}

.pf-account-link .pf-account-name { color: var(--bbg-cyan); font-weight: bold; }
.pf-account-link .pf-account-go { color: var(--bbg-amber); font-size: 0.78rem; }

.pf-subtitle {
    font-size: 0.78rem;
    color: var(--bbg-muted, #8a8a8a);
    margin: 2px 0 6px;
}

.pf-acct-name { color: var(--bbg-amber); }

.pf-back-link { color: var(--bbg-cyan); text-decoration: none; }
.pf-back-link:hover { text-decoration: underline; }