/* ── Hagrid (grid-engine) → portal tokens ───────────────────────────────
   grid-engine.css is GENERATED from @arx-prime/hagrid (see CLAUDE.md) —
   never edit it. This file is linked AFTER it and re-skins every grid in
   the portal from --portal-* tokens.

   Why the selectors ignore the ig-grid--light / ig-grid--dark modifier:
   grid-engine.js stamps the modifier ONCE, from <html data-theme>, when a
   grid is built. The portal's light/dark toggle flips that attribute live
   without rebuilding grids, so a grid built in light mode keeps
   ig-grid--light after the page goes dark. Every rule below therefore
   applies to BOTH modifiers and wins by specificity (a leading `body` plus
   the .ig-grid class out-rank the equivalent grid-engine.css rule), keying
   colours on the tokens — which DO follow the mode.

   Theme hooks: --portal-grid-font (default: body font, NOT Hagrid's
   Courier), --portal-grid-mono-font (numeric cells may opt in),
   --portal-grid-header-bg, --portal-grid-zebra-bg, --portal-grid-hover-bg,
   --portal-grid-selected-bg, --portal-grid-group-bg, --portal-grid-footer-bg.
   ─────────────────────────────────────────────────────────────────────── */

body .ig-grid {
    --portal-grid-font: var(--portal-body-font);
    --portal-grid-header-bg: var(--portal-surface);
    --portal-grid-zebra-bg: var(--portal-surface-alt);
    --portal-grid-hover-bg: var(--portal-hover-bg);
    --portal-grid-selected-bg: var(--portal-selected-bg);
    --portal-grid-group-bg: color-mix(in srgb, var(--portal-primary) 10%, var(--portal-surface));
    --portal-grid-group-sub-bg: var(--portal-surface-alt);
    --portal-grid-footer-bg: color-mix(in srgb, var(--portal-primary) 16%, var(--portal-surface));
    font-family: var(--portal-grid-font);
    color: var(--portal-text);
    background: transparent;
}

/* Header */
body .ig-grid.ig-grid--light thead th,
body .ig-grid.ig-grid--dark thead th,
body .ig-grid thead th {
    color: var(--portal-text-muted);
    border-bottom: 1px solid var(--portal-border-color);
}

body .ig-grid.ig-grid--sticky-header.ig-grid--light thead th,
body .ig-grid.ig-grid--sticky-header.ig-grid--dark thead th {
    background: var(--portal-grid-header-bg);
}

/* Body cells */
body .ig-grid.ig-grid--light tbody td,
body .ig-grid.ig-grid--dark tbody td,
body .ig-grid tbody td {
    font-family: var(--portal-grid-font);
    color: var(--portal-text);
    border-bottom: 1px solid var(--portal-border-color);
}

/* Zebra — grid-engine shades odd rows in light and even rows in dark;
   the portal uses one rule (even rows) in both modes. */
body .ig-grid.ig-grid--zebra.ig-grid--light tbody tr:not(.ig-group-header):not(.ig-footer-row):nth-child(odd) td,
body .ig-grid.ig-grid--zebra.ig-grid--dark tbody tr:not(.ig-group-header):not(.ig-footer-row):nth-child(even) td {
    background: transparent;
}

body .ig-grid.ig-grid--zebra.ig-grid--light tbody tr:not(.ig-group-header):not(.ig-footer-row):nth-child(even) td,
body .ig-grid.ig-grid--zebra.ig-grid--dark tbody tr:not(.ig-group-header):not(.ig-footer-row):nth-child(even) td {
    background: var(--portal-grid-zebra-bg);
}

/* Hover */
body .ig-grid.ig-grid--light tbody tr:hover td,
body .ig-grid.ig-grid--dark tbody tr:hover td,
body .ig-grid.ig-grid--zebra.ig-grid--light tbody tr:not(.ig-group-header):not(.ig-footer-row):hover td,
body .ig-grid.ig-grid--zebra.ig-grid--dark tbody tr:not(.ig-group-header):not(.ig-footer-row):hover td {
    background: var(--portal-grid-hover-bg);
}

/* Selection */
body .ig-grid.ig-grid--light tbody tr.ig-selected td,
body .ig-grid.ig-grid--dark tbody tr.ig-selected td,
body .ig-grid.ig-grid--zebra.ig-grid--light tbody tr.ig-selected:not(.ig-group-header):not(.ig-footer-row) td,
body .ig-grid.ig-grid--zebra.ig-grid--dark tbody tr.ig-selected:not(.ig-group-header):not(.ig-footer-row) td {
    background: var(--portal-grid-selected-bg);
    color: var(--portal-selected-text);
}

/* Group rows (groupSupport grids: Real-Time P&L) */
body .ig-grid.ig-grid--light .ig-group-level-0 td,
body .ig-grid.ig-grid--dark .ig-group-level-0 td {
    background: var(--portal-grid-group-bg);
    color: var(--portal-text);
    border-top: 2px solid var(--portal-border-color);
}

body .ig-grid.ig-grid--light .ig-group-level-0:hover td,
body .ig-grid.ig-grid--dark .ig-group-level-0:hover td,
body .ig-grid.ig-grid--light .ig-group-level-1:hover td,
body .ig-grid.ig-grid--dark .ig-group-level-1:hover td {
    background: var(--portal-grid-hover-bg);
}

body .ig-grid.ig-grid--light .ig-group-level-1 td,
body .ig-grid.ig-grid--dark .ig-group-level-1 td {
    background: var(--portal-grid-group-sub-bg);
    color: var(--portal-text-muted);
    border-top: 1px solid var(--portal-border-color);
}

body .ig-grid.ig-grid--light .ig-footer-row td,
body .ig-grid.ig-grid--dark .ig-footer-row td {
    background: var(--portal-grid-footer-bg);
    color: var(--portal-text);
    border-top: 3px double var(--portal-border-color);
    font-weight: 700;
}

/* Sort indicator / resize handle / column drag */
body .ig-sort-icon,
body .ig-sort-ordinal {
    color: var(--portal-accent);
}

body .ig-resize-handle:hover,
body .ig-column-drop-indicator {
    background: var(--portal-accent);
}

body .ig-column-drag-ghost {
    border-color: var(--portal-accent);
    background: var(--portal-surface);
    color: var(--portal-text);
    font-family: var(--portal-grid-font);
    box-shadow: var(--portal-shadow);
}

/* Links inside cells */
body .ig-grid .symbol-link,
body .ig-grid .qty-link {
    color: var(--portal-link);
}

body .ig-grid .symbol-link:hover,
body .ig-grid .qty-link:hover {
    color: color-mix(in srgb, var(--portal-link) 70%, var(--portal-text));
}

/* NOTE: .gain-positive / .gain-negative cell classes (query-columns.js,
   LivePositions) have never been visible inside a grid — grid-engine's
   `.ig-grid--light tbody td` colour out-ranks them — and query-columns.js
   applies them to EVERY signed money column (price, market value), not just
   gains. Colouring them here would turn prices green, so it is deliberately
   left unchanged. A theme may opt in with
   `body .ig-grid.ig-grid--light tbody td.gain-negative, ...--dark...`. */