/**
 * PSGrid — Isolated CSS Namespace for Reusable Tabulator Grids
 *
 * ALL styles scoped under .ps-grid to prevent collisions with page CSS.
 * Theme: LIGHT MODE - white background, dark text, vibrant badges
 * Compatible with Tabulator 6.3.
 *
 * Version: 1.1
 * Date: 2026-02-13
 */

/* ============================================================================
   VARIABLES (prefixed to avoid root collision)
   ============================================================================ */
.ps-grid {
    /* Badge colors (vibrantes - no cambian) */
    --ps-green: #059669;
    --ps-red: #dc2626;
    --ps-amber: #d97706;
    --ps-orange: #ea580c;
    --ps-blue: #2563eb;
    --ps-purple: #7c3aed;
    --ps-cyan: #0891b2;
    --ps-violet: #9333ea;
    --ps-emerald: #16a34a;

    /* LIGHT THEME - Text colors */
    --ps-text-primary: #0f172a;
    --ps-text-secondary: #475569;
    --ps-text-muted: #64748b;
    --ps-text-faint: #94a3b8;
    --ps-text-disabled: #cbd5e1;

    /* LIGHT THEME - Background colors */
    --ps-bg-row: #ffffff;                   /* Fondo blanco uniforme */
    --ps-bg-hover: rgba(0,0,0,0.03);        /* Hover gris muy sutil */
    --ps-bg-header: #f8fafc;                /* Header gris muy claro */
    --ps-bg-footer: #f8fafc;                /* Footer igual que header */
    --ps-bg-leg: rgba(0,0,0,0.02);          /* Legs ligeramente más oscuras */
    --ps-bg-group: #f1f5f9;                 /* Grupos destacados */

    /* LIGHT THEME - Border colors */
    --ps-border-row: rgba(0,0,0,0.06);
    --ps-border-header: rgba(0,0,0,0.1);

    /* Risk tints */
    --ps-risk-critical: rgba(239,68,68,0.04);
    --ps-risk-high: rgba(249,115,22,0.03);

    /* Mono font */
    --ps-mono: 'JetBrains Mono', monospace;
}

/* ============================================================================
   CONTAINER
   ============================================================================ */
.ps-grid {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--ps-text-primary);
    background: #ffffff !important;  /* White background - tema claro */
    border-radius: 8px;
    border: 1px solid var(--ps-border-header);
    overflow: hidden;
}

/* ============================================================================
   TABULATOR VISUAL OVERRIDES — PSGrid light theme
   Structural CSS comes from tabulator_simple.min.css (loaded before this file).
   These rules override ONLY visual properties (colors, backgrounds, fonts).
   ============================================================================ */

/* Container */
.ps-grid.tabulator {
    background: #ffffff !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    color: #0f172a !important;
}

/* Header — matches page --bg-card for seamless integration
   .ps-grid.tabulator = compound selector (same element has both classes) */
.ps-grid.tabulator .tabulator-header {
    background: #1a1a28 !important;
    border-bottom: none !important;
    border-top: none !important;
}
/* Header calcs-holder (columnCalcs:'both') — must match header dark theme, no borders */
.ps-grid.tabulator .tabulator-header .tabulator-calcs-holder {
    background: #1a1a28 !important;
    border: none !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-frozen-rows-holder {
    display: none !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-col {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 7px 10px !important;
    display: flex !important;
}
/* SORT INDICATOR — hide native arrow, use ::after on title */
.ps-grid.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
    display: none !important;
}
/* Header title styling — padding zeroed to prevent Tabulator's asymmetric
   padding-right:25px (sortable) from breaking centering. */
.ps-grid.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Inter', sans-serif !important;
}
/* Header alignment classes — applied by _applyHeaderAlignment() JS method.
   These target .tabulator-col-content (flex container) and its child title. */
.ps-grid.tabulator .tabulator-header .tabulator-col-content.header-centered {
    justify-content: center !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-col-content.header-centered .tabulator-col-title {
    text-align: center !important;
    width: 100% !important;
    padding-right: 0 !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-col-content.header-right {
    justify-content: flex-end !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-col-content.header-right .tabulator-col-title {
    text-align: right !important;
    width: 100% !important;
    padding-right: 0 !important;
}
/* Custom sort arrows — headerSort:false means no .tabulator-sortable class,
   so we match on aria-sort attribute only (set by programmatic setSort). */
.ps-grid.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-title::after {
    content: " \2191";
    font-size: 0.45rem;
    color: #e2e8f0;
}
.ps-grid.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-title::after {
    content: " \2193";
    font-size: 0.45rem;
    color: #e2e8f0;
}
/* Sorted column header — brighter text */
.ps-grid.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-title,
.ps-grid.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-title {
    color: #ffffff !important;
}
/* Header hover feedback */
.ps-grid.tabulator .tabulator-header .tabulator-col:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer;
}
.ps-grid.tabulator .tabulator-header .tabulator-col .tabulator-col-resize-handle {
    width: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-resize-handle {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.3) !important;
}
.ps-grid.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.ps-grid .tabulator-row .tabulator-frozen.tabulator-frozen-left {
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Table holder — no gap between header and first row */
.ps-grid.tabulator .tabulator-tableholder {
    background: #ffffff !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Rows — .tabulator-selectable added to match/beat theme specificity */
.ps-grid.tabulator .tabulator-row,
.ps-grid.tabulator .tabulator-row.tabulator-selectable {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    min-height: 0 !important;
    transition: background-color 0.12s ease !important;
}
.ps-grid.tabulator .tabulator-row:hover,
.ps-grid.tabulator .tabulator-row.tabulator-selectable:hover {
    background: #1a1a28 !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
    cursor: pointer;
    /* Cover any subpixel gap between header and first row */
    box-shadow: 0 -1px 0 0 #1a1a28;
}

/* HOVER TEXT — dark row needs light text (from reference lines 91-113) */
.ps-grid.tabulator .tabulator-row:hover .tabulator-cell { color: #f1f5f9 !important; }
/* Catch inline style="color:var(--text-muted)" on em-dashes/null values — inline styles
   override inherited cell color, so we target them directly with attribute selector */
.ps-grid.tabulator .tabulator-row:hover .tabulator-cell span[style*="--text-muted"] { color: #64748b !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-symbol { color: #ffffff !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-position { color: #cbd5e1 !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-mono { color: #e2e8f0 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-mono { color: #e2e8f0 !important; }
.ps-grid.tabulator .tabulator-row:hover .qty-text { color: #cbd5e1 !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-qty-tag { color: #94a3b8 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-muted { color: #64748b !important; }
.ps-grid.tabulator .tabulator-row:hover .bwd-normal { color: #94a3b8 !important; }
/* Chain status & generic badges — readable text on dark hover row */
.ps-grid.tabulator .tabulator-row:hover .ps-badge { color: #e2e8f0 !important; border-color: rgba(255,255,255,0.15) !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-leg-name,
.ps-grid.tabulator .tabulator-row:hover .cell-leg-name span { color: #94a3b8 !important; }
/* P&L / DTE / BWD — brighter on dark hover */
.ps-grid.tabulator .tabulator-row:hover .pnl-positive { color: #34d399 !important; }
.ps-grid.tabulator .tabulator-row:hover .pnl-negative { color: #f87171 !important; }
.ps-grid.tabulator .tabulator-row:hover .dte-safe     { color: #cbd5e1 !important; }
.ps-grid.tabulator .tabulator-row:hover .dte-caution  { color: #fbbf24 !important; }
.ps-grid.tabulator .tabulator-row:hover .dte-warning  { color: #fb923c !important; }
.ps-grid.tabulator .tabulator-row:hover .dte-danger   { color: #f87171 !important; }
.ps-grid.tabulator .tabulator-row:hover .bwd-hot      { color: #fb923c !important; }
/* Moneyness — brighter on dark hover */
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__side--otm { color: #34d399 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__side--itm { color: #f87171 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__sep { color: #94a3b8 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__tag--OTM { color: #34d399 !important; background: rgba(52,211,153,0.2) !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__tag--ITM { color: #f87171 !important; background: rgba(248,113,113,0.2) !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__tag--ATM { color: #fbbf24 !important; background: rgba(251,191,36,0.2) !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-moneyness__pct { color: #cbd5e1 !important; }
/* Strategy badges — brighter on dark hover (need !important to beat generic .ps-badge rule) */
.ps-grid.tabulator .tabulator-row:hover .ps-badge--BPS,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--BCS,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CC  { color: #34d399 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--IC,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--IB  { color: #818cf8 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--SS,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--JL  { color: #fbbf24 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--NP  { color: #fb923c !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PRS,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CRS,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PLDR,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--P112 { color: #fbbf24 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--BWP,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--BWC  { color: #22d3ee !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CAL,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PCAL,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CCAL,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--DIAG,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PDIAG,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CDIAG,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PMCC,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PMPP { color: #a78bfa !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CDS,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PDS  { color: #c084fc !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--LEAPC,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--LEAPP { color: #4ade80 !important; }
/* Action badges — brighter on dark hover (ps-badge system) */
.ps-grid.tabulator .tabulator-row:hover .ps-badge--HOLD    { color: #34d399 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--PROFIT  { color: #34d399 !important; border-color: rgba(52,211,153,0.4); }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--ROLL    { color: #fbbf24 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--ADJUST  { color: #818cf8 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--MONITOR { color: #fb923c !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CLOSE,
.ps-grid.tabulator .tabulator-row:hover .ps-badge--REVIEW  { color: #f87171 !important; border-color: rgba(248,113,113,0.4); }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--CLOSE-W { color: #fb923c !important; border-color: rgba(251,146,60,0.4); }
.ps-grid.tabulator .tabulator-row:hover .ps-badge--REDEPLOY { color: #fbbf24 !important; border-color: rgba(251,191,36,0.4); }

/* Cells */
.ps-grid.tabulator .tabulator-row .tabulator-cell {
    border-left: none !important;
    border-right: none !important;
    padding: 6px 10px !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
}
/* Tabulator 6 uses inline-flex on cells — text-align ignored by flexbox.
   justify-content + align-items for full centering. Reset child spacing. */
.ps-grid.tabulator .tabulator-row .tabulator-cell.cell-centered {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
.ps-grid.tabulator .tabulator-row .tabulator-cell.cell-centered > * {
    margin: 0 !important;
    padding: 0 !important;
}
.ps-grid.tabulator .tabulator-row .tabulator-cell.cell-right {
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: right !important;
}
.ps-grid.tabulator .tabulator-row .tabulator-cell.cell-right > * {
    margin: 0 !important;
    padding: 0 !important;
}
.ps-grid.tabulator .tabulator-row.tabulator-selected {
    background-color: rgba(74, 108, 247, 0.08) !important;
}
.ps-grid.tabulator .tabulator-row.row-leg .tabulator-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.72rem !important;
}

/* Groups */
.ps-grid.tabulator .tabulator-row.tabulator-group {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.ps-grid.tabulator .tabulator-row.tabulator-group:first-child {
    border-top: none !important;
}
.ps-grid.tabulator .tabulator-row.tabulator-group .tabulator-group-header {
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

/* Footer / Calcs */
.ps-grid.tabulator .tabulator-footer {
    background-color: #ffffff !important;
    border-top: none !important;
    padding: 0 !important;
}
.ps-grid.tabulator .tabulator-calcs-holder {
    background: #f8fafc !important;
    border-top: 2px solid rgba(0, 0, 0, 0.10) !important;
    border-bottom: none !important;
}
.ps-grid.tabulator .tabulator-calcs-holder .tabulator-row {
    background: #f8fafc !important;
    border-bottom: none !important;
}
/* Calc rows: same dark hover as normal rows.
   The static .tabulator-calcs-holder .tabulator-row rule (0,4,0) comes AFTER the general
   .tabulator-row:hover rule (0,4,0) in the file, so it always wins with !important.
   This selector adds :hover → (0,5,0) specificity, which beats the static rule. */
.ps-grid.tabulator .tabulator-calcs-holder .tabulator-row:hover,
.ps-grid.tabulator .tabulator-row.tabulator-calcs:hover {
    background: #1a1a28 !important;
    cursor: default !important;
}
.ps-grid.tabulator .tabulator-calcs-holder .tabulator-row .tabulator-cell {
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.78rem !important;
}

/* Scrollbar - LIGHT THEME (dark scrollbar on white background) */
.ps-grid.tabulator .tabulator-tableholder::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.ps-grid.tabulator .tabulator-tableholder::-webkit-scrollbar-track {
    background: transparent;
}
.ps-grid.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);  /* Dark scrollbar for light theme */
    border-radius: 100px;
}
.ps-grid.tabulator .tabulator-tableholder {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;  /* Dark scrollbar for light theme */
}

/* Remove outline on all elements */
.ps-grid.tabulator .tabulator-header .tabulator-col,
.ps-grid.tabulator .tabulator-row,
.ps-grid.tabulator .tabulator-row .tabulator-cell {
    outline: none !important;
}
.ps-grid.tabulator:focus,
.ps-grid.tabulator *:focus {
    outline: none !important;
}

/* ═══════════════ CELL STYLES (from reference lines 133-178) ═══════════════ */

.ps-grid .cell-risk {
    font-size: 0.75rem;
    text-align: center;
    line-height: 1;
}
.ps-grid .cell-symbol-wrapper {
    display: flex;
    align-items: center;
}
.ps-grid .cell-symbol {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: -0.01em;
    color: #1e293b !important;
}
.ps-grid .cell-position {
    color: #475569 !important;
    font-size: 0.75rem !important;
}
.ps-grid .cell-qty-tag {
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 500;
    margin-left: 2px;
}
.ps-grid .ps-muted {
    color: #cbd5e1 !important;
}
.ps-grid .cell-mono {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.75rem !important;
    display: inline-block !important;
    text-align: inherit !important;
}
.ps-grid .cell-mono-leg {
    opacity: 0.8;
    font-size: 0.7rem !important;
}
.ps-grid .qty-text {
    color: #475569;
}
.ps-grid .cell-leg-name {
    color: #334155 !important;
    font-size: 0.72rem !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: normal;
}
.ps-grid .leg-name-text {
    color: #64748b;
}
.ps-grid .leg-connector {
    color: #94a3b8;
    font-size: 0.7rem;
}
.ps-grid .leg-type-tag {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.ps-grid .leg-put  {
    background: rgba(239,68,68,0.10);
    color: #ef4444;
}
.ps-grid .leg-call {
    background: rgba(16,185,129,0.10);
    color: #10b981;
}
.ps-grid .leg-stock {
    background: rgba(74,108,247,0.10);
    color: #4a6cf7;
}
.ps-grid .badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.ps-grid .badge-put-credit    { background: rgba(16,185,129,0.12); color: #059669; }
.ps-grid .badge-iron-condor   { background: rgba(124,58,237,0.12); color: #6d28d9; }
.ps-grid .badge-covered-call  { background: rgba(74,108,247,0.12); color: #4338ca; }
.ps-grid .badge-naked-put     { background: rgba(249,115,22,0.12); color: #ea580c; }
.ps-grid .badge-long-put      { background: rgba(239,68,68,0.12); color: #dc2626; }
.ps-grid .pnl-positive { color: #059669 !important; }
.ps-grid .pnl-negative { color: #dc2626 !important; }
.ps-grid .pnl-bold     { font-weight: 700 !important; }
.ps-grid .dte-safe     { color: #475569 !important; }
.ps-grid .dte-caution  { color: #d97706 !important; }
.ps-grid .dte-warning  { color: #ea580c !important; }
.ps-grid .dte-danger   { color: #dc2626 !important; font-weight: 600 !important; }
.ps-grid .days-critical { color: #dc2626; }
.ps-grid .days-warning  { color: #ea580c; }
.ps-grid .days-normal   { color: #475569; }
.ps-grid .mark-low      { color: #94a3b8; }
.ps-grid .mark-normal   { color: #475569; }
/* Extrinsic burn-down bar */
.ps-grid .ps-ext-bar {
    position: relative;
    width: 100%;
    height: 16px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.ps-grid .ps-ext-bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.ps-grid .ps-ext-bar__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ps-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: #1e293b;
    z-index: 1;
}
/* Bar color by extrinsic level */
.ps-grid .ps-ext--normal   .ps-ext-bar__fill { background: rgba(5,150,105,0.35); }
.ps-grid .ps-ext--medium   .ps-ext-bar__fill { background: rgba(217,119,6,0.35); }
.ps-grid .ps-ext--low      .ps-ext-bar__fill { background: rgba(234,88,12,0.45); }
.ps-grid .ps-ext--critical .ps-ext-bar__fill { background: rgba(220,38,38,0.45); }
/* Text color on hover (dark row) */
.ps-grid.tabulator .tabulator-row:hover .ps-ext-bar__text { color: #f1f5f9 !important; }
.ps-grid.tabulator .tabulator-row:hover .ps-ext-bar { background: rgba(255,255,255,0.08); }
.ps-grid.tabulator .tabulator-row:hover .ps-ext--normal   .ps-ext-bar__fill { background: rgba(52,211,153,0.4); }
.ps-grid.tabulator .tabulator-row:hover .ps-ext--medium   .ps-ext-bar__fill { background: rgba(251,191,36,0.4); }
.ps-grid.tabulator .tabulator-row:hover .ps-ext--low      .ps-ext-bar__fill { background: rgba(251,146,60,0.45); }
.ps-grid.tabulator .tabulator-row:hover .ps-ext--critical .ps-ext-bar__fill { background: rgba(248,113,113,0.5); }
.ps-grid .bwd-hot    { color: #ea580c !important; font-weight: 600 !important; }
.ps-grid .bwd-normal { color: #334155 !important; }
.ps-grid .action-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.1s;
}
.ps-grid .action-badge:hover {
    filter: brightness(1.2);
}

/* Expand chevron for multi-leg positions */
.ps-grid .expand-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
    cursor: pointer;
    margin-right: 4px;
    border-radius: 3px;
}
.ps-grid .expand-chevron:hover {
    color: #475569;
    background: rgba(0,0,0,0.05);
}
.ps-grid .expand-chevron.open {
    transform: rotate(90deg);
}
.ps-grid .action-HOLD    { background: rgba(16,185,129,0.10); color: #059669; }
.ps-grid .action-ROLL    { background: rgba(245,158,11,0.12); color: #d97706; }
.ps-grid .action-CLOSE   { background: rgba(239,68,68,0.12); color: #dc2626; }
.ps-grid .action-ADJUST  { background: rgba(74,108,247,0.12); color: #4338ca; }
.ps-grid .action-MONITOR { background: rgba(100,116,139,0.10); color: #334155; }
.ps-grid .totals-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.5px !important;
}
.ps-grid .group-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.ps-grid .group-symbol {
    font-weight: 700;
    font-size: 0.82rem;
    color: #1e293b;
    min-width: 48px;
}
.ps-grid .group-count {
    font-size: 0.64rem;
    color: #94a3b8;
}
.ps-grid .group-info {
    font-size: 0.7rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    gap: 16px;
    margin-left: auto;
}
.ps-grid .group-info .gi-val {
    font-weight: 600;
}
.ps-grid .group-info .gi-label {
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 4px;
}

/* ============================================================================
   MONOSPACE CELLS
   ============================================================================ */
.ps-grid .ps-mono {
    font-family: var(--ps-mono);
    font-size: 11px;
}

/* ============================================================================
   RISK DOT
   ============================================================================ */
.ps-risk-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.ps-risk-dot--critical { background: var(--ps-red); }
.ps-risk-dot--high     { background: var(--ps-orange); }
.ps-risk-dot--medium   { background: var(--ps-amber); }
.ps-risk-dot--low      { background: var(--ps-green); }

/* ============================================================================
   EXPAND CHEVRON
   ============================================================================ */
.ps-expand {
    color: var(--ps-text-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    user-select: none;
}
.ps-expand:hover { background: rgba(0,0,0,0.05); }
.ps-expand.ps-expand--open { transform: rotate(90deg); }

/* ============================================================================
   POSITION NAME
   ============================================================================ */
.ps-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ps-name__ticker  { font-weight: 600; color: var(--ps-text-primary); }
.ps-name__details { font-weight: 400; color: var(--ps-text-secondary); font-family: var(--ps-mono); }

/* ============================================================================
   BADGES (strategy, moneyness, action, phase, cc-status, result)
   ============================================================================ */
.ps-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 1.4;
    border: 1px solid transparent;
}

/* Strategy badges — 26 canonical codes (strategies SSOT, migration 046) */
/* Income — Credit: undefined risk (warm) */
.ps-badge--NP                       { background: rgba(249,115,22,0.12); color: var(--ps-orange); }
.ps-badge--SS, .ps-badge--JL        { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
/* Income — Credit: defined risk (cool) */
.ps-badge--BPS, .ps-badge--BCS      { background: rgba(16,185,129,0.12); color: var(--ps-green); }
.ps-badge--IC, .ps-badge--IB        { background: rgba(59,130,246,0.12); color: var(--ps-blue); }
.ps-badge--CC                       { background: rgba(16,185,129,0.15); color: var(--ps-green); }
/* Income — Ratio & Butterfly */
.ps-badge--PRS, .ps-badge--CRS,
.ps-badge--PLDR, .ps-badge--P112    { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
.ps-badge--BWP,  .ps-badge--BWC     { background: rgba(6,182,212,0.12); color: var(--ps-cyan); }
/* Income — Time (calendars, diagonals, PMCC/PMPP) */
.ps-badge--CAL, .ps-badge--PCAL, .ps-badge--CCAL,
.ps-badge--DIAG, .ps-badge--PDIAG, .ps-badge--CDIAG,
.ps-badge--PMCC, .ps-badge--PMPP    { background: rgba(139,92,246,0.12); color: var(--ps-purple); }
/* Directional — Debit */
.ps-badge--CDS, .ps-badge--PDS      { background: rgba(168,85,247,0.12); color: var(--ps-violet); }
/* Investment — LEAPs */
.ps-badge--LEAPC, .ps-badge--LEAPP  { background: rgba(34,197,94,0.12); color: var(--ps-emerald); }

/* Action badges */
.ps-badge--HOLD     { background: rgba(16,185,129,0.12); color: var(--ps-green); }
.ps-badge--PROFIT   { background: rgba(16,185,129,0.15); color: var(--ps-green); border-color: rgba(16,185,129,0.3); }
.ps-badge--ROLL     { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
.ps-badge--ADJUST   { background: rgba(59,130,246,0.12); color: var(--ps-blue); }
.ps-badge--MONITOR  { background: rgba(249,115,22,0.12); color: var(--ps-orange); }
.ps-badge--CLOSE    { background: rgba(239,68,68,0.15); color: var(--ps-red); border-color: rgba(239,68,68,0.3); }
.ps-badge--CLOSE-W  { background: rgba(249,115,22,0.15); color: var(--ps-orange); border-color: rgba(249,115,22,0.3); }
.ps-badge--REVIEW   { background: rgba(239,68,68,0.12); color: var(--ps-red); }
.ps-badge--WRITE-CC { background: rgba(59,130,246,0.12); color: var(--ps-blue); }
.ps-badge--RENEW-CC { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
.ps-badge--HARVEST  { background: rgba(16,185,129,0.15); color: var(--ps-green); border-color: rgba(16,185,129,0.3); }
.ps-badge--ADD      { background: rgba(59,130,246,0.12); color: var(--ps-blue); }
.ps-badge--REDEPLOY { background: rgba(217,119,6,0.15); color: var(--ps-amber); border-color: rgba(217,119,6,0.3); }

/* Clickable action badges */
.ps-badge--action { cursor: pointer; padding: 3px 10px; }
.ps-badge--action:hover { opacity: 0.8; }

/* Action badge rich tooltip */
.ps-badge--has-tt { position: relative; }

/* Base visual styles — not scoped so they survive smart-tooltip.js portal reparenting */
.action-tt-popup {
    background: var(--ps-surface-elevated, #1e2432);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    text-align: left;
    white-space: normal;
    width: 220px;
}

/* Hidden state + CSS-hover fallback (overridden by smart-tooltip.js in portal) */
.ps-badge--has-tt .action-tt-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
}
.ps-badge--has-tt:hover .action-tt-popup { display: block; }
.action-tt-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ps-text-muted, #94a3b8);
    margin-bottom: 4px;
}
.action-tt-reason {
    font-size: 12px;
    color: var(--ps-text, #e2e8f0);
    line-height: 1.4;
}
.action-tt-context {
    font-size: 11px;
    color: var(--ps-text-muted, #94a3b8);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(148,163,184,0.12);
    font-family: 'JetBrains Mono', monospace;
}

/* Phase badges */
.ps-badge--ACTIVE     { background: rgba(59,130,246,0.12); color: var(--ps-blue); }
.ps-badge--HEALING    { background: rgba(16,185,129,0.12); color: var(--ps-green); }
.ps-badge--HARVESTING { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
.ps-badge--GML        { background: rgba(139,92,246,0.12); color: var(--ps-purple); }
.ps-badge--EXPIRED    { background: rgba(148,163,184,0.12); color: var(--ps-text-muted); }

/* Moneyness badges */
.ps-moneyness { display: inline-flex; align-items: center; gap: 4px; }
.ps-moneyness--dual { gap: 2px; font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.ps-moneyness__side { font-weight: 600; white-space: nowrap; }
.ps-moneyness__side--otm { color: var(--ps-green); }
.ps-moneyness__side--itm { color: var(--ps-red); }
.ps-moneyness__sep { color: var(--ps-text-muted); font-weight: 400; margin: 0 1px; }
.ps-moneyness__tag {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
}
.ps-moneyness__tag--OTM { background: rgba(16,185,129,0.12); color: var(--ps-green); }
.ps-moneyness__tag--ATM { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
.ps-moneyness__tag--ITM { background: rgba(239,68,68,0.12); color: var(--ps-red); }
.ps-moneyness__pct { font-size: 11px; color: var(--ps-text-secondary); }

/* CC Status badges */
.ps-badge--covered   { background: rgba(16,185,129,0.12); color: var(--ps-green); }
.ps-badge--partial   { background: rgba(245,158,11,0.12); color: var(--ps-amber); }
.ps-badge--uncovered { background: rgba(59,130,246,0.12); color: var(--ps-blue); }

/* Assignment badge (equity grid) */
.ps-badge--ASSIGNED  { background: rgba(245,158,11,0.15); color: var(--ps-amber); border-color: rgba(245,158,11,0.3); }

/* Result badges (closed grid) */
.ps-badge--WIN  { color: var(--ps-green); font-weight: 600; }
.ps-badge--LOSS { color: var(--ps-red); font-weight: 600; }

/* ============================================================================
   DTE COLORING
   ============================================================================ */
.ps-dte--safe    { color: var(--ps-text-secondary); }
.ps-dte--caution { color: var(--ps-amber); }
.ps-dte--warning { color: var(--ps-orange); }
.ps-dte--danger  { color: var(--ps-red); font-weight: 700; }

/* ============================================================================
   P&L COLORING
   ============================================================================ */
.ps-pnl--profit     { color: var(--ps-green); }
.ps-pnl--loss       { color: var(--ps-red); }
.ps-pnl--neutral    { color: var(--ps-text-secondary); }
.ps-pnl--big-profit { color: var(--ps-green); font-weight: 700; }
.ps-pnl--big-loss   { color: var(--ps-red); font-weight: 700; }

/* ============================================================================
   GROUP HEADER METRICS
   ============================================================================ */
.ps-group-key   { font-weight: 700; color: var(--ps-text-primary); }
.ps-group-count { color: var(--ps-text-muted); font-weight: 400; margin-left: 4px; }
.ps-group-metric { color: var(--ps-text-secondary); font-weight: 500; margin-left: 16px; }

/* ============================================================================
   CONTEXT MENU (dark theme — matches positions_table_v6 prototype)
   ============================================================================ */
.ps-ctx {
    position: fixed;
    z-index: 1000;
    background: #1a1a28;
    border: 1px solid #2a2a3c;
    border-radius: 8px;
    padding: 4px 0;
    min-width: 230px;
    display: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
    font-size: 0.76rem;
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transform-origin: top left;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.ps-ctx.ps-ctx--open { display: block; }
.ps-ctx.ps-ctx--visible { opacity: 1; transform: scale(1) translateY(0); }

/* --- Header --- */
.ps-ctx__header {
    padding: 8px 14px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 2px;
}
.ps-ctx__sym {
    font-weight: 700;
    font-size: 0.82rem;
    color: #f1f5f9;
}
.ps-ctx__badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.2px;
}
.ps-ctx__pnl {
    margin-left: auto;
    font-family: var(--ps-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 600;
}

/* --- Separator --- */
.ps-ctx__sep {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 0;
}

/* --- Menu items --- */
.ps-ctx__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
    color: #e2e8f0;
    user-select: none;
}
.ps-ctx__item:hover { background: rgba(74, 108, 247, 0.10); }
.ps-ctx__item--danger:hover { background: rgba(239, 68, 68, 0.10); }

.ps-ctx__ico {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    line-height: 1;
}
.ps-ctx__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ps-ctx__main {
    font-weight: 500;
    font-size: 0.76rem;
}
.ps-ctx__sub {
    font-size: 0.62rem;
    color: #64748b;
}
.ps-ctx__item:hover .ps-ctx__sub { color: #94a3b8; }

.ps-ctx__key {
    font-size: 0.62rem;
    color: #475569;
    font-family: var(--ps-font-mono, 'JetBrains Mono', monospace);
    font-weight: 500;
    flex-shrink: 0;
}
.ps-ctx__item:hover .ps-ctx__key { color: #94a3b8; }

/* --- SGE suggested action highlight --- */
.ps-ctx__item--suggested {
    background: rgba(74, 108, 247, 0.06);
}
.ps-ctx__item--suggested:hover {
    background: rgba(74, 108, 247, 0.12);
}

/* --- Color utilities --- */
.ps-ctx--green  { color: #34d399 !important; }
.ps-ctx--red    { color: #f87171 !important; }
.ps-ctx--yellow { color: #fbbf24 !important; }
.ps-ctx--blue   { color: #818cf8 !important; }

/* ============================================================================
   TOAST NOTIFICATION
   ============================================================================ */
.ps-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #1a1a28;
    border: 1px solid #2a2a3c;
    border-radius: 8px;
    padding: 10px 20px;
    color: #f1f5f9;
    font-size: 0.76rem;
    font-weight: 500;
    z-index: 2000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-toast.ps-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   DETAIL PANEL
   ============================================================================ */
.ps-detail {
    position: fixed;
    right: 0;
    top: 0;
    width: 480px;
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
    z-index: 100;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.ps-detail--open { transform: translateX(0); }

.ps-detail__close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
    padding: 4px;
}
.ps-detail__close:hover { color: #1e293b; }

.ps-detail__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-right: 32px;
    color: #1e293b;
}

.ps-detail__section {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #f1f5f9;
    border-radius: 6px;
}
.ps-detail__section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 8px;
}
.ps-detail__row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 12px;
}
.ps-detail__label { color: #64748b; }
.ps-detail__value { color: #1e293b; font-weight: 500; }

.ps-detail__actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.ps-detail__btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    transition: background 0.15s ease;
}
.ps-detail__btn:hover { background: #f8fafc; }
.ps-detail__btn--primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.ps-detail__btn--primary:hover { background: #1d4ed8; }

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.ps-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}
.ps-empty__icon  { display: flex; justify-content: center; margin-bottom: 12px; color: #64748b; }
.ps-empty__icon svg { opacity: 0.7; }
.ps-empty__title { font-weight: 600; margin-bottom: 8px; color: #475569; }
.ps-empty__desc  { font-size: 0.85rem; margin-bottom: 16px; }
.ps-empty__btn {
    padding: 8px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}
.ps-empty__btn:hover { opacity: 0.9; }

/* ============================================================================
   RISK TINT ROWS (applied by rowFormatter)
   ============================================================================ */
.ps-grid .tabulator-row.ps-risk-critical {
    background: var(--ps-risk-critical) !important;
}
.ps-grid .tabulator-row.ps-risk-high {
    background: var(--ps-risk-high) !important;
}

/* ============================================================================
   LEG / TRANCHE ROWS (dataTree children)
   ============================================================================ */
.ps-grid .tabulator-row.ps-leg-row {
    /* Slightly smaller than parent rows but not cramped */
    font-size: 0.85em;
    color: #64748b;
}
.ps-grid .tabulator-row.ps-leg-row .tabulator-cell {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 0.72rem !important;
}

/* ================================================================== */
/*  COLUMN SELECTOR SIDEBAR                                          */
/* ================================================================== */

.ps-column-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 480px;
    background: #2a2a3c;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ps-column-sidebar--open {
    transform: translateX(0);
}

.ps-column-sidebar__header {
    padding: 12px 16px;
    border-bottom: 1px solid #1e1e30;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ps-column-sidebar__title {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.ps-column-sidebar__close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}

.ps-column-sidebar__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.ps-column-sidebar__search {
    padding: 10px 16px;
    border-bottom: 1px solid #1e1e30;
}

.ps-column-sidebar__search-input {
    width: 100%;
    padding: 6px 10px;
    background: #1e1e30;
    border: 1px solid #3a3a4c;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.15s;
}

.ps-column-sidebar__search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ps-column-sidebar__search-input:focus {
    border-color: #2563eb;
}

.ps-column-sidebar__content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ps-column-sidebar__content::-webkit-scrollbar {
    width: 6px;
}

.ps-column-sidebar__content::-webkit-scrollbar-track {
    background: #1e1e30;
}

.ps-column-sidebar__content::-webkit-scrollbar-thumb {
    background: #3a3a4c;
    border-radius: 3px;
}

.ps-column-sidebar__content::-webkit-scrollbar-thumb:hover {
    background: #4a4a5c;
}

.ps-column-sidebar__category {
    margin-bottom: 4px;
}

.ps-column-sidebar__category-header {
    padding: 8px 16px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.ps-column-sidebar__category-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ps-column-sidebar__category-icon {
    font-size: 0.9rem;
}

.ps-column-sidebar__category-chevron {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.ps-column-sidebar__category--collapsed .ps-column-sidebar__category-chevron {
    transform: rotate(-90deg);
}

.ps-column-sidebar__category-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
}

.ps-column-sidebar__columns {
    padding: 0 16px 0 16px;
    max-height: 800px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.ps-column-sidebar__category--collapsed .ps-column-sidebar__columns {
    max-height: 0;
}

.ps-column-sidebar__column {
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 3px;
}

.ps-column-sidebar__column:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ps-column-sidebar__checkbox {
    width: 14px;
    height: 14px;
    border: 2px solid #3a3a4c;
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s;
}

.ps-column-sidebar__checkbox--checked {
    background: #2563eb;
    border-color: #2563eb;
}

.ps-column-sidebar__checkbox--checked::after {
    content: '✓';
    position: absolute;
    top: -3px;
    left: 1px;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: bold;
}

.ps-column-sidebar__column-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ps-column-sidebar__column-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
}

.ps-column-sidebar__column-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.62rem;
    margin: 0;
    line-height: 1.1;
    margin-top: 1px;
}

.ps-column-sidebar__footer {
    padding: 12px 16px;
    border-top: 1px solid #1e1e30;
    display: flex;
    gap: 8px;
}

.ps-column-sidebar__btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ps-column-sidebar__btn--secondary {
    background: #1e1e30;
    color: rgba(255, 255, 255, 0.8);
}

.ps-column-sidebar__btn--secondary:hover {
    background: #2a2a40;
}

.ps-column-sidebar__btn--primary {
    background: #2563eb;
    color: #ffffff;
}

.ps-column-sidebar__btn--primary:hover {
    background: #1d4ed8;
}

/* Overlay backdrop */
.ps-column-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ps-column-sidebar-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Position Score (PS) & Position Fit (PF) Columns
   ========================================================================== */

/* PS Score (Professional+ tier) */
.ps-score {
    font-weight: 600;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
}

/* PS Traffic Light (Shield tier) */
.ps-light {
    font-size: 14px;
}

.ps-green {
    color: var(--accent-green);
}

.ps-yellow {
    color: var(--accent-yellow);
}

.ps-red {
    color: var(--accent-red);
}

/* PF Shield */
.pf-shield {
    font-size: 14px;
    cursor: help;
}

.pf-green {
    filter: hue-rotate(0deg);
}

.pf-yellow {
    filter: hue-rotate(40deg);
}

.pf-orange {
    filter: hue-rotate(20deg) saturate(1.5);
}

.pf-red {
    filter: hue-rotate(-10deg) saturate(2);
}

/* PF Locked (Shield tier) */
.pf-locked {
    opacity: 0.3;
    font-size: 12px;
    cursor: pointer;
}

/* Divergence Alert Icon */
.divergence-icon {
    font-size: 12px;
    margin-left: 2px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ── Option A: Income Position Cell — two-line format ── */
.ps-grid .cell-income-pos {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    gap: 3px;
    padding: 2px 0;
    line-height: normal;
}
.ps-grid .cell-income-pos__top {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}
.ps-grid .cell-income-pos__sym {
    font-weight: 700;
    font-size: 0.82rem;
    color: #1e293b;
    letter-spacing: -0.01em;
}
.ps-grid .cell-income-badge {
    font-size: 0.58rem !important;
    padding: 1px 6px !important;
    line-height: 1.3 !important;
}
.ps-grid .cell-income-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 600;
    background: rgba(148,163,184,0.10);
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}
.ps-grid .cell-income-roll {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.62rem;
    color: #f97316;
    font-weight: 600;
}
.ps-grid .cell-income-roll svg {
    vertical-align: middle;
    flex-shrink: 0;
}
.ps-grid .cell-income-roll sup {
    font-size: 0.5rem;
    vertical-align: super;
}
.ps-grid .cell-income-underperformer {
    background: #dc2626;
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 600;
}
.ps-grid .cell-income-pos__legs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.ps-grid .cell-leg-pill {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.4;
}
.ps-grid .cell-leg-pill--put {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
}
.ps-grid .cell-leg-pill--call {
    background: rgba(16,185,129,0.08);
    color: #10b981;
}
.ps-grid .cell-leg-expiry {
    font-size: 0.60rem;
    color: #64748b;
    margin-left: 2px;
}

/* Hover state overrides for Option A cells */
.ps-grid.tabulator .tabulator-row:hover .cell-income-pos__sym   { color: #ffffff !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-income-qty        { color: #94a3b8 !important; background: rgba(148,163,184,0.15) !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-income-roll       { color: #fb923c !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-leg-pill--put     { color: #fca5a5 !important; background: rgba(239,68,68,0.12) !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-leg-pill--call    { color: #6ee7b7 !important; background: rgba(16,185,129,0.12) !important; }
.ps-grid.tabulator .tabulator-row:hover .cell-leg-expiry        { color: #94a3b8 !important; }

/* ── Working order controls in action column ────────────── */
.ps-working-order {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}
.ps-working-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-amber, #f59e0b);
    letter-spacing: 0.03em;
    animation: ps-working-pulse 2s ease-in-out infinite;
}
.ps-working-price {
    width: 54px;
    padding: 1px 3px;
    font-size: 0.68rem;
    font-family: var(--font-mono, monospace);
    background: var(--bg-primary, #0f0f23);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 3px;
    color: var(--text-primary, #e2e8f0);
    text-align: right;
}
.ps-working-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
    line-height: 1;
}
.ps-working-btn.modify { color: var(--accent-green, #10b981); }
.ps-working-btn.cancel { color: var(--accent-red, #ef4444); }
.ps-working-btn:hover { opacity: 0.7; }
.ps-working-select {
    background: var(--bg-secondary, #1e2433);
    border: 1px solid var(--border-color, #2d3748);
    color: var(--text-primary, #e2e8f0);
    border-radius: 4px;
    font-size: 0.65rem;
    font-family: inherit;
    padding: 1px 2px;
    cursor: pointer;
    max-width: 100px;
}
.ps-working-select:focus { border-color: var(--accent-blue, #4a6cf7); outline: none; }
@keyframes ps-working-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Premium Edge cell (Pro+ only) */
.edge-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.edge-cell.edge-positive { color: var(--ps-green, #22c55e); font-weight: 600; }
.edge-cell.edge-negative { color: var(--ps-red, #ef4444); font-weight: 600; }
.edge-cell.edge-neutral  { color: var(--ps-gray, #9ca3af); }