/* Theme Tables — Dark mode overrides for Bootstrap tables + DataTables
   Light mode uses original CSS unchanged. */

/* Row selection — DataTables v2+ uses CSS variables for box-shadow inset on
   selected rows. Light gets peach (pre-upgrade behavior). Dark gets muted slate. */
:root {
  --dt-row-selected: 255, 229, 180;       /* #FFE5B4 peach */
  --dt-row-selected-text: 0, 0, 0;
}

[data-theme="dark"] {
  --dt-row-selected: 45, 75, 110;         /* #2d4b6e muted slate blue */
  --dt-row-selected-text: 230, 237, 243;  /* same as --text-primary */
  --dt-row-selected-link: 88, 166, 255;   /* same as --accent-primary */
}

[data-theme="dark"] {
  /* Base table */
  .table,
  table.dataTable {
    color: var(--text-primary);
    background-color: transparent;
  }

  /* Header */
  .table thead th,
  .table thead td,
  table.dataTable thead th,
  table.dataTable thead td {
    color: var(--text-primary);
    background-color: var(--table-header-bg);
    border-color: var(--border-subtle);
  }

  /* Body cells */
  .table tbody th,
  .table tbody td,
  .table tfoot th,
  .table tfoot td,
  table.dataTable tbody th,
  table.dataTable tbody td,
  table.dataTable tfoot th,
  table.dataTable tfoot td {
    color: var(--text-primary);
    background-color: transparent;
    border-color: var(--border-subtle);
  }

  /* Striped rows — subtle so text stays readable */
  .table-striped tbody tr:nth-of-type(odd),
  table.dataTable.stripe tbody tr.odd,
  table.dataTable.display tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.025);
  }
  .table-striped tbody tr:nth-of-type(odd) > td,
  .table-striped tbody tr:nth-of-type(odd) > th {
    background-color: transparent;
  }

  /* Bordered variant */
  .table-bordered,
  .table-bordered th,
  .table-bordered td,
  table.dataTable.row-border th,
  table.dataTable.row-border td,
  table.dataTable.cell-border th,
  table.dataTable.cell-border td {
    border-color: var(--border-subtle);
  }

  /* Hover */
  .table-hover tbody tr:hover,
  table.dataTable.hover tbody tr:hover,
  table.dataTable.display tbody tr:hover {
    background-color: var(--row-hover);
  }
  .table-hover tbody tr:hover > td,
  .table-hover tbody tr:hover > th {
    background-color: transparent;
  }

  /* DataTables wrapper chrome */
  .dataTables_wrapper,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_processing,
  .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary);
  }

  /* Filter / length inputs */
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
  }

  /* Pagination buttons */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    background: transparent !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--text-inverse) !important;
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--text-primary) !important;
    background: var(--row-hover) !important;
    border-color: var(--border-strong) !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-muted) !important;
    background: transparent !important;
    border-color: var(--border-subtle) !important;
  }

  /* Sort indicators — keep readable on the elevated header */
  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_desc,
  table.dataTable thead .sorting_asc_disabled,
  table.dataTable thead .sorting_desc_disabled {
    background-color: var(--table-header-bg);
  }
}

/* Column-Order popover — universal layout (light + dark). Replaces the
   inline styles that used to live in colReorderButton.js so the popover can
   theme cleanly via tokens in dark mode. */
.dt-col-reorder-popover {
  min-width: 240px;
}
.dt-col-reorder-popover .dt-col-reorder-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  /* JS sets a precise max-height based on available viewport room; this is
     the safety net if the JS hook ever fails to run. */
  max-height: 50vh;
}
.dt-col-reorder-popover .dt-col-reorder-list {
  margin: 0;
  cursor: move;
}
.dt-col-reorder-popover .dt-col-reorder-actions {
  margin-top: 0.5rem;
  text-align: right;
}

/* Dark mode — theme the popover that hosts the reorder list. The popover is
   appended to <body>, so the [data-theme="dark"] selector on <html> still
   reaches it through descendant matching. */
[data-theme="dark"] .popover.dt-col-reorder-popover-host {
  background-color: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .arrow::before {
  border-bottom-color: var(--border-subtle);
  border-top-color: var(--border-subtle);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .arrow::after {
  border-bottom-color: var(--bg-card);
  border-top-color: var(--bg-card);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .popover-header {
  background-color: var(--bg-elevated);
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .popover-body {
  color: var(--text-primary);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .list-group-item {
  background-color: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .list-group-item:hover {
  background-color: var(--row-hover);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .list-group-item .text-muted {
  color: var(--text-muted) !important;
}
/* jQuery-UI sortable placeholder while dragging */
[data-theme="dark"] .popover.dt-col-reorder-popover-host .list-group-item.bg-light {
  background-color: var(--bg-base) !important;
  border-color: var(--border-strong);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .btn-secondary {
  background-color: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="dark"] .popover.dt-col-reorder-popover-host .btn-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
}

/* ─────────────────────────────────────────────────────────────────────
   P3.2 — `.table-clean` borderless + hover variant
   ─────────────────────────────────────────────────────────────────────
   Opt-in modifier for interactive data tables (Positions, Orders,
   Margins, Holdings, Notifications, MarketWatch, Trade-tab quantity).
   Adopted via the `type` parameter on fragments/table/table-card so
   the markup stays `class="table table-striped table-bordered nowrap
   compact table-clean"`. Bootstrap's striped + bordered chrome is then
   overridden here.

   Treatment:
     - Strip all cell borders (.table-bordered)
     - Strip zebra striping (.table-striped + DataTables .stripe/.display)
     - Single 1px row divider on body, 2px on header / footer separator
     - Subtle hover row using --row-hover in dark, rgba(0,0,0,0.025) light

   Summary tables (accSumTable, symbolSumTable) deliberately NOT in the
   opt-in list — their `<th colspan>` column-group structure is what the
   bordered chrome reinforces, so retaining borders there pairs with P3.1.

   Light + dark modes both shipped. */

/* Strip cell borders that .table-bordered painted */
table.table-clean.table-bordered,
table.table-clean.table-bordered thead th,
table.table-clean.table-bordered thead td,
table.table-clean.table-bordered tbody th,
table.table-clean.table-bordered tbody td,
table.table-clean.table-bordered tfoot th,
table.table-clean.table-bordered tfoot td {
  border: 0;
}

/* Strip zebra striping — Bootstrap variant (background-color on tr) */
table.table-clean.table-striped tbody tr:nth-of-type(odd) {
  background-color: transparent;
}
table.table-clean.table-striped tbody tr:nth-of-type(odd) > td,
table.table-clean.table-striped tbody tr:nth-of-type(odd) > th {
  background-color: transparent;
}

/* Strip zebra striping — DataTables 2.x variant. DT 2 paints stripes via
   `box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05)` on
   each odd-row cell (the same technique that breaks tr-background row
   selection — see Gotcha #6). A `background-color: transparent` on tr
   does nothing against that. We have to kill the box-shadow itself.
   Without this, the lingering stripe also masks the hover background:
   the box-shadow inset is painted on top of the tr's hover bg, so on
   striped rows hover appears to do nothing. */
table.table-clean.dataTable.stripe > tbody > tr.odd > *,
table.table-clean.dataTable.display > tbody > tr.odd > * {
  box-shadow: none;
}

/* Row dividers + header / footer separators — light mode */
table.table-clean.table-bordered tbody td,
table.table-clean.table-bordered tbody th {
  border-bottom: 1px solid #eaecef;
}
table.table-clean.table-bordered thead th,
table.table-clean.table-bordered thead td {
  border-bottom: 2px solid #d0d7de;
}
table.table-clean.table-bordered tfoot td,
table.table-clean.table-bordered tfoot th {
  border-top: 2px solid #d0d7de;
}

/* Faint vertical column dividers — light mode.
   Low contrast (`rgba(0,0,0,0.04)`) so they read as quiet guides, not
   the loud spreadsheet borders we just retired. `:not(:last-child)`
   keeps the rightmost column flush with the row edge. */
table.table-clean.table-bordered thead tr > th:not(:last-child),
table.table-clean.table-bordered thead tr > td:not(:last-child),
table.table-clean.table-bordered tbody tr > td:not(:last-child),
table.table-clean.table-bordered tbody tr > th:not(:last-child),
table.table-clean.table-bordered tfoot tr > th:not(:last-child),
table.table-clean.table-bordered tfoot tr > td:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.04);
}

/* Hover row — light mode */
table.table-clean tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.025);
}

/* Dark mode — token-driven dividers + hover */
[data-theme="dark"] table.table-clean.table-bordered tbody td,
[data-theme="dark"] table.table-clean.table-bordered tbody th {
  border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] table.table-clean.table-bordered thead th,
[data-theme="dark"] table.table-clean.table-bordered thead td {
  border-bottom-color: var(--border-strong);
}
[data-theme="dark"] table.table-clean.table-bordered tfoot td,
[data-theme="dark"] table.table-clean.table-bordered tfoot th {
  border-top-color: var(--border-strong);
}
[data-theme="dark"] table.table-clean.table-bordered thead tr > th:not(:last-child),
[data-theme="dark"] table.table-clean.table-bordered thead tr > td:not(:last-child),
[data-theme="dark"] table.table-clean.table-bordered tbody tr > td:not(:last-child),
[data-theme="dark"] table.table-clean.table-bordered tbody tr > th:not(:last-child),
[data-theme="dark"] table.table-clean.table-bordered tfoot tr > th:not(:last-child),
[data-theme="dark"] table.table-clean.table-bordered tfoot tr > td:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] table.table-clean tbody tr:hover {
  background-color: var(--row-hover);
}

/* ─────────────────────────────────────────────────────────────────────
   P3.1 — Retire pastel column-group classes
   ─────────────────────────────────────────────────────────────────────
   Replaces the sticky-note pastel backgrounds applied to every header
   and body cell of `color-highlight / color-lavender / color-old-lace /
   color-mint-green / color-azure` column groups. The grouping cue now
   reads as architectural sectioning, not a tinted spreadsheet:

     - <th colspan> header cells get an accent-tinted band, uppercase
       11px letter-spaced label, accent text.
     - Body cells lose the tint entirely (transparent).
     - Accent rail behavior splits by table type:
         · Summary tables (no .table-clean): a single 3px rail at the
           LEFTMOST cell of each color group. Header band carries the
           strong sectioning cue; one strong rail per group is enough.
         · .table-clean tables (Positions/Orders/Margins/Holdings):
           a 1px rail on EVERY color-X cell. These tables have no
           color-group header band, so the per-cell rail is the only
           cue keeping column identity visible during scroll.

   Survives DataTables colReorder — selectors match by class, not by
   DOM position. */

/* Header band typography — both modes.
   `color-identifier` is the neutral-gray group used for leading
   identifier columns (e.g. Exchange + Symbol on symbolSumTable). It
   inherits the same uppercase 11px treatment but pairs with a muted
   accent instead of one of the data-group hues. */
table thead th.color-highlight,
table thead th.color-highlight-low,
table thead th.color-lavender,
table thead th.color-old-lace,
table thead th.color-mint-green,
table thead th.color-azure,
table thead th.color-identifier {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ── LIGHT MODE ── (overrides app.css `.color-*` !important originals) */

/* Body cells — strip the pastel tint */
table.dataTable td.color-highlight,
table.dataTable td.color-highlight-low,
table.dataTable td.color-lavender,
table.dataTable td.color-old-lace,
table.dataTable td.color-mint-green,
table.dataTable td.color-azure,
table.dataTable tfoot th.color-highlight,
table.dataTable tfoot th.color-highlight-low {
  background-color: transparent !important;
}

/* Header bands — accent tint + accent text */
table thead th.color-highlight,
table thead th.color-highlight-low {
  background-color: rgba(180, 83, 9, 0.10) !important;
  color: #b45309;
}
table thead th.color-lavender {
  background-color: rgba(124, 58, 237, 0.10) !important;
  color: #7c3aed;
}
table thead th.color-old-lace {
  background-color: rgba(198, 106, 0, 0.10) !important;
  color: #c66a00;
}
table thead th.color-mint-green {
  background-color: rgba(22, 163, 74, 0.10) !important;
  color: #16a34a;
}
table thead th.color-azure {
  background-color: rgba(8, 145, 178, 0.10) !important;
  color: #0891b2;
}
table thead th.color-identifier {
  background-color: rgba(108, 117, 125, 0.08) !important;
  color: #6c757d;
}

/* Accent rail — Summary tables (NOT .table-clean) — 3px, leftmost only
   ─────────────────────────────────────────────────────────────────────
   Summary tables (accSumTable, symbolSumTable) carry their full column-
   group identity in the header band (uppercase 11px accent label).
   Inside the table body, a single strong 3px rail at the *start* of
   each group is enough sectioning — non-leftmost cells stay clean so
   the data dominates within each section.
   `*:not(.color-X) + :is(th, td).color-X` matches the first color-X
   cell after a non-matching predecessor, surviving colReorder. */
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-highlight:first-child,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-highlight-low:first-child,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-highlight) + :is(th, td).color-highlight,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-highlight-low) + :is(th, td).color-highlight-low {
  border-left: 3px solid #b45309;
}
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-lavender:first-child,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-lavender) + :is(th, td).color-lavender {
  border-left: 3px solid #7c3aed;
}
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-old-lace:first-child,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-old-lace) + :is(th, td).color-old-lace {
  border-left: 3px solid #c66a00;
}
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-mint-green:first-child,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-mint-green) + :is(th, td).color-mint-green {
  border-left: 3px solid #16a34a;
}
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-azure:first-child,
table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-azure) + :is(th, td).color-azure {
  border-left: 3px solid #0891b2;
}

/* Accent rail — .table-clean tables — 1px, every color-X cell
   ─────────────────────────────────────────────────────────────────────
   In interactive data tables (Positions/Orders/Margins/Holdings),
   color-highlight is applied to individual "primary value" body
   columns via DataTables columnDefs. There is no header band to mark
   the column; a thin per-cell rail at 1px preserves column identity
   during vertical scroll. */
table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-highlight,
table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-highlight-low {
  border-left: 1px solid #b45309;
}
table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-lavender {
  border-left: 1px solid #7c3aed;
}
table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-old-lace {
  border-left: 1px solid #c66a00;
}
table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-mint-green {
  border-left: 1px solid #16a34a;
}
table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-azure {
  border-left: 1px solid #0891b2;
}

/* Suppress P3.2 faint right-border on cells immediately preceding a
   color-X cell in .table-clean tables. Per CSS border-collapse spec
   (CSS 2.1 §17.6.2.1) the left-hand cell's right-border wins over the
   right-hand cell's left-border at equal width + style. Without this
   rule the 1px accent left-border would be drowned out by P3.2's
   1px faint right-border at every group-entry boundary. Higher
   specificity (0,0,3,5) clears the P3.2 rule (0,0,3,4). */
table.table-clean.table-bordered :is(thead, tbody, tfoot) > tr > :is(th, td):has(+ :is(th, td).color-highlight),
table.table-clean.table-bordered :is(thead, tbody, tfoot) > tr > :is(th, td):has(+ :is(th, td).color-highlight-low),
table.table-clean.table-bordered :is(thead, tbody, tfoot) > tr > :is(th, td):has(+ :is(th, td).color-lavender),
table.table-clean.table-bordered :is(thead, tbody, tfoot) > tr > :is(th, td):has(+ :is(th, td).color-old-lace),
table.table-clean.table-bordered :is(thead, tbody, tfoot) > tr > :is(th, td):has(+ :is(th, td).color-mint-green),
table.table-clean.table-bordered :is(thead, tbody, tfoot) > tr > :is(th, td):has(+ :is(th, td).color-azure) {
  border-right: 0;
}

/* ── DARK MODE ── (overrides theme-colors.css dark tints + body cell bg) */

/* Body cells — strip the muted dark tint set in theme-colors.css */
[data-theme="dark"] table.dataTable td.color-highlight,
[data-theme="dark"] table.dataTable td.color-highlight-low,
[data-theme="dark"] table.dataTable td.color-lavender,
[data-theme="dark"] table.dataTable td.color-old-lace,
[data-theme="dark"] table.dataTable td.color-mint-green,
[data-theme="dark"] table.dataTable td.color-azure,
[data-theme="dark"] table.dataTable tfoot th.color-highlight,
[data-theme="dark"] table.dataTable tfoot th.color-highlight-low {
  background-color: transparent !important;
}

/* Header bands — accent tint over the dark elevated header background */
[data-theme="dark"] table thead th.color-highlight,
[data-theme="dark"] table thead th.color-highlight-low {
  background-color: rgba(210, 153, 34, 0.14) !important;
  color: var(--accent-warning);
}
[data-theme="dark"] table thead th.color-lavender {
  background-color: rgba(167, 139, 250, 0.14) !important;
  color: #a78bfa;
}
[data-theme="dark"] table thead th.color-old-lace {
  background-color: rgba(251, 133, 0, 0.14) !important;
  color: var(--exchange-mcx);
}
[data-theme="dark"] table thead th.color-mint-green {
  background-color: rgba(63, 185, 80, 0.14) !important;
  color: var(--accent-success);
}
[data-theme="dark"] table thead th.color-azure {
  background-color: rgba(34, 211, 238, 0.14) !important;
  color: #22d3ee;
}
[data-theme="dark"] table thead th.color-identifier {
  background-color: rgba(154, 164, 178, 0.10) !important;
  color: var(--text-secondary);
}

/* Accent rail — Summary tables (NOT .table-clean) — 3px, leftmost only (dark) */
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-highlight:first-child,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-highlight-low:first-child,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-highlight) + :is(th, td).color-highlight,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-highlight-low) + :is(th, td).color-highlight-low {
  border-left: 3px solid var(--accent-warning);
}
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-lavender:first-child,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-lavender) + :is(th, td).color-lavender {
  border-left: 3px solid #a78bfa;
}
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-old-lace:first-child,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-old-lace) + :is(th, td).color-old-lace {
  border-left: 3px solid var(--exchange-mcx);
}
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-mint-green:first-child,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-mint-green) + :is(th, td).color-mint-green {
  border-left: 3px solid var(--accent-success);
}
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) :is(th, td).color-azure:first-child,
[data-theme="dark"] table.table-bordered:not(.table-clean) :is(thead, tbody, tfoot) *:not(.color-azure) + :is(th, td).color-azure {
  border-left: 3px solid #22d3ee;
}

/* Accent rail — .table-clean tables — 1px, every color-X cell (dark) */
[data-theme="dark"] table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-highlight,
[data-theme="dark"] table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-highlight-low {
  border-left: 1px solid var(--accent-warning);
}
[data-theme="dark"] table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-lavender {
  border-left: 1px solid #a78bfa;
}
[data-theme="dark"] table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-old-lace {
  border-left: 1px solid var(--exchange-mcx);
}
[data-theme="dark"] table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-mint-green {
  border-left: 1px solid var(--accent-success);
}
[data-theme="dark"] table.table-clean.table-bordered :is(thead, tbody, tfoot) :is(th, td).color-azure {
  border-left: 1px solid #22d3ee;
}

/* ─────────────────────────────────────────────────────────────────────
   P3.3 — Sticky first column (desktop-only)
   ─────────────────────────────────────────────────────────────────────
   Sticky thead is delivered by the DataTables fixedHeader plugin
   (3.4.0, already loaded), wired in JS in initPortfolioTable() and the
   two portfolio-summary.js table inits. CSS only handles the first
   column sticking against horizontal scroll inside .table-responsive.

   Breakpoint matches the JS guard `window.matchMedia('(min-width:768px)')`.
   On mobile we let DataTables responsive column-collapse handle narrow
   viewports; sticky positioning becomes a no-op when columns collapse.

   Scope — 6 tables per the plan:
     positions, orders, margins, holdings, accSumTable, symbolSumTable.
   Notifications excluded by the plan (fixedHeader still on for it).
   MW Classic excluded (uses scrollX, has its own scroll wrapper).
   quantityTable excluded (too small to need it).

   Sticky cells need an opaque background, otherwise body cells scroll
   under them. P3.2 sets body-cell bg to transparent, so we restore an
   opaque card-colored bg here. Same trick for hover-row state — without
   the override the sticky cell stays stark while the rest of the row
   dims. */
@media (min-width: 768px) {

  /* ── LIGHT MODE ── */

  /* Body cells */
  #positionsTable > tbody > tr > td:first-child,
  #positionsTable > tbody > tr > th:first-child,
  #ordersTable > tbody > tr > td:first-child,
  #ordersTable > tbody > tr > th:first-child,
  #marginsTable > tbody > tr > td:first-child,
  #marginsTable > tbody > tr > th:first-child,
  #holdingsTable > tbody > tr > td:first-child,
  #holdingsTable > tbody > tr > th:first-child,
  #accSumTable > tbody > tr > td:first-child,
  #accSumTable > tbody > tr > th:first-child,
  #symbolSumTable > tbody > tr > td:first-child,
  #symbolSumTable > tbody > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
  }

  /* Header cells — both the original (in-place) thead AND the cloned
     floating thead the fixedHeader plugin generates. The clone is a
     separate DOM tree (not a child of #positionsTable etc.), so we need
     a parallel selector targeting .fixedHeader-floating. The plugin
     keeps id-less clones in v3.4, so we scope by class. */
  #positionsTable > thead > tr > th:first-child,
  #positionsTable > thead > tr > td:first-child,
  #ordersTable > thead > tr > th:first-child,
  #ordersTable > thead > tr > td:first-child,
  #marginsTable > thead > tr > th:first-child,
  #marginsTable > thead > tr > td:first-child,
  #holdingsTable > thead > tr > th:first-child,
  #holdingsTable > thead > tr > td:first-child,
  #accSumTable > thead > tr > th:first-child,
  #accSumTable > thead > tr > td:first-child,
  #symbolSumTable > thead > tr > th:first-child,
  #symbolSumTable > thead > tr > td:first-child,
  table.fixedHeader-floating > thead > tr > th:first-child,
  table.fixedHeader-floating > thead > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  /* Footer cells */
  #positionsTable > tfoot > tr > td:first-child,
  #positionsTable > tfoot > tr > th:first-child,
  #ordersTable > tfoot > tr > td:first-child,
  #ordersTable > tfoot > tr > th:first-child,
  #marginsTable > tfoot > tr > td:first-child,
  #marginsTable > tfoot > tr > th:first-child,
  #holdingsTable > tfoot > tr > td:first-child,
  #holdingsTable > tfoot > tr > th:first-child,
  #accSumTable > tfoot > tr > td:first-child,
  #accSumTable > tfoot > tr > th:first-child,
  #symbolSumTable > tfoot > tr > td:first-child,
  #symbolSumTable > tfoot > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
  }

  /* Hover row — keep sticky cell visually attached to the hovered row */
  #positionsTable > tbody > tr:hover > td:first-child,
  #positionsTable > tbody > tr:hover > th:first-child,
  #ordersTable > tbody > tr:hover > td:first-child,
  #ordersTable > tbody > tr:hover > th:first-child,
  #marginsTable > tbody > tr:hover > td:first-child,
  #marginsTable > tbody > tr:hover > th:first-child,
  #holdingsTable > tbody > tr:hover > td:first-child,
  #holdingsTable > tbody > tr:hover > th:first-child,
  #accSumTable > tbody > tr:hover > td:first-child,
  #accSumTable > tbody > tr:hover > th:first-child,
  #symbolSumTable > tbody > tr:hover > td:first-child,
  #symbolSumTable > tbody > tr:hover > th:first-child {
    background-color: #f7f7f7;
  }

  /* ── DARK MODE ── (token-driven) */

  [data-theme="dark"] #positionsTable > tbody > tr > td:first-child,
  [data-theme="dark"] #positionsTable > tbody > tr > th:first-child,
  [data-theme="dark"] #ordersTable > tbody > tr > td:first-child,
  [data-theme="dark"] #ordersTable > tbody > tr > th:first-child,
  [data-theme="dark"] #marginsTable > tbody > tr > td:first-child,
  [data-theme="dark"] #marginsTable > tbody > tr > th:first-child,
  [data-theme="dark"] #holdingsTable > tbody > tr > td:first-child,
  [data-theme="dark"] #holdingsTable > tbody > tr > th:first-child,
  [data-theme="dark"] #accSumTable > tbody > tr > td:first-child,
  [data-theme="dark"] #accSumTable > tbody > tr > th:first-child,
  [data-theme="dark"] #symbolSumTable > tbody > tr > td:first-child,
  [data-theme="dark"] #symbolSumTable > tbody > tr > th:first-child {
    background-color: var(--bg-card);
  }

  [data-theme="dark"] #positionsTable > tfoot > tr > td:first-child,
  [data-theme="dark"] #positionsTable > tfoot > tr > th:first-child,
  [data-theme="dark"] #ordersTable > tfoot > tr > td:first-child,
  [data-theme="dark"] #ordersTable > tfoot > tr > th:first-child,
  [data-theme="dark"] #marginsTable > tfoot > tr > td:first-child,
  [data-theme="dark"] #marginsTable > tfoot > tr > th:first-child,
  [data-theme="dark"] #holdingsTable > tfoot > tr > td:first-child,
  [data-theme="dark"] #holdingsTable > tfoot > tr > th:first-child,
  [data-theme="dark"] #accSumTable > tfoot > tr > td:first-child,
  [data-theme="dark"] #accSumTable > tfoot > tr > th:first-child,
  [data-theme="dark"] #symbolSumTable > tfoot > tr > td:first-child,
  [data-theme="dark"] #symbolSumTable > tfoot > tr > th:first-child {
    background-color: var(--bg-card);
  }

  [data-theme="dark"] #positionsTable > tbody > tr:hover > td:first-child,
  [data-theme="dark"] #positionsTable > tbody > tr:hover > th:first-child,
  [data-theme="dark"] #ordersTable > tbody > tr:hover > td:first-child,
  [data-theme="dark"] #ordersTable > tbody > tr:hover > th:first-child,
  [data-theme="dark"] #marginsTable > tbody > tr:hover > td:first-child,
  [data-theme="dark"] #marginsTable > tbody > tr:hover > th:first-child,
  [data-theme="dark"] #holdingsTable > tbody > tr:hover > td:first-child,
  [data-theme="dark"] #holdingsTable > tbody > tr:hover > th:first-child,
  [data-theme="dark"] #accSumTable > tbody > tr:hover > td:first-child,
  [data-theme="dark"] #accSumTable > tbody > tr:hover > th:first-child,
  [data-theme="dark"] #symbolSumTable > tbody > tr:hover > td:first-child,
  [data-theme="dark"] #symbolSumTable > tbody > tr:hover > th:first-child {
    background-color: var(--bg-elevated);
  }
}

/* fixedHeader floating clone — ensure the floating thead has an opaque
   background in both themes (otherwise body content scrolls visibly
   behind it). The plugin keeps the clone's class hooks intact, so the
   existing `.table thead th` styling cascades; this just guarantees a
   solid surface. */
table.fixedHeader-floating {
  background-color: #ffffff;
}
[data-theme="dark"] table.fixedHeader-floating {
  background-color: var(--bg-card);
}

/* FixedHeader 3.4 builds the floating clone as:
     <div class="dtfh-floatingparent dtfh-floatingparenthead"   ← wrapper
          style="position:fixed; overflow:hidden; left:<table.offset().left>">
       <table class="fixedHeader-floating"                      ← clone
              style="position:fixed; top:0; left:0">
   Because the clone is position:fixed it anchors to the viewport, NOT
   the wrapper — so the wrapper's overflow:hidden does not clip it and
   the wrapper's left does not move it. On pages with a sidebar (table
   offset > 0) the clone draws ~71px left of the live table, putting
   each header label one visual column ahead of its body cell.
   `contain: paint` makes the wrapper a containing block for fixed
   descendants (per CSS Containment spec), so the clone's left:0 now
   means "0 from wrapper" and the wrapper's overflow:hidden clips the
   clone's right-edge overflow for free. JS-side anchoring of the
   wrapper to .table-responsive (applyFloatingHeaderCardConstraint)
   handles the card-width clamp. */
.dtfh-floatingparent.dtfh-floatingparenthead {
  contain: paint;
}

/* ─────────────────────────────────────────────────────────────────────
   symbolSumTable — sticky leading 2 columns (Exchange + Symbol)
   ─────────────────────────────────────────────────────────────────────
   The table merges the three previously-duplicated Exchange/Symbol
   columns into a single leading "Symbol" group (colspan=2). Both
   columns need to stay anchored during horizontal scroll. Col 1 is
   pinned to width 60px so col 2's `left: 60px` lands exactly at col
   1's right edge (without this, dynamic col widths can break the
   alignment). Sticky col 1 itself is already handled by the generic
   P3.3 block above (matches #symbolSumTable in its selector list);
   here we layer on the width constraint + col 2's sticky offset.

   ColReorder is NOT enabled on symbolSumTable, so :nth-child(2)
   always means Symbol — no need to scope by class. */
@media (min-width: 768px) {

  /* Force col 1 width to 60px on every row of the table (data rows,
     both thead rows, footer) so col 2's `left: 60px` stays aligned.
     `nowrap` on the table prevents content wrap; longer content is
     hidden with ellipsis. Common exchange codes (NSE/BSE/MCX/NFO/BFO/
     CDS/MCX/NCDEX) all fit comfortably. */
  #symbolSumTable > thead > tr:nth-child(2) > th:first-child,
  #symbolSumTable > tbody > tr > td:first-child,
  #symbolSumTable > tfoot > tr > th:first-child,
  #symbolSumTable > tfoot > tr > td:first-child {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sticky col 2 — Symbol header (second thead row) + every body and
     footer cell. The first thead row's second cell is the NET group
     header (colspan=11), which we deliberately do NOT make sticky. */
  #symbolSumTable > thead > tr:nth-child(2) > th:nth-child(2),
  #symbolSumTable > tbody > tr > td:nth-child(2),
  #symbolSumTable > tbody > tr > th:nth-child(2),
  #symbolSumTable > tfoot > tr > td:nth-child(2),
  #symbolSumTable > tfoot > tr > th:nth-child(2) {
    position: sticky;
    left: 60px;
    z-index: 1;
    background-color: #ffffff;
  }

  /* Thead second row col 2 sits above body cells */
  #symbolSumTable > thead > tr:nth-child(2) > th:nth-child(2) {
    z-index: 2;
  }

  /* Hover row — keep col 2 visually attached to the hovered row */
  #symbolSumTable > tbody > tr:hover > td:nth-child(2),
  #symbolSumTable > tbody > tr:hover > th:nth-child(2) {
    background-color: #f7f7f7;
  }

  /* Dark mode — token-driven bgs for col 2 */
  [data-theme="dark"] #symbolSumTable > thead > tr:nth-child(2) > th:nth-child(2),
  [data-theme="dark"] #symbolSumTable > tbody > tr > td:nth-child(2),
  [data-theme="dark"] #symbolSumTable > tbody > tr > th:nth-child(2),
  [data-theme="dark"] #symbolSumTable > tfoot > tr > td:nth-child(2),
  [data-theme="dark"] #symbolSumTable > tfoot > tr > th:nth-child(2) {
    background-color: var(--bg-card);
  }
  [data-theme="dark"] #symbolSumTable > tbody > tr:hover > td:nth-child(2),
  [data-theme="dark"] #symbolSumTable > tbody > tr:hover > th:nth-child(2) {
    background-color: var(--bg-elevated);
  }

  /* fixedHeader floating clone of symbolSumTable — its thead second row
     also needs col 2 sticky. The clone has no #symbolSumTable ID, so
     scope by .fixedHeader-floating. Discriminate from accSumTable's
     clone (which also carries `.color-identifier` on its leading
     header) via the NET group's unique colspan=11 — only symbolSumTable
     has it. */
  table.fixedHeader-floating:has(thead th.color-highlight[colspan="11"]) > thead > tr:nth-child(2) > th:first-child {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.fixedHeader-floating:has(thead th.color-highlight[colspan="11"]) > thead > tr:nth-child(2) > th:nth-child(2) {
    position: sticky;
    left: 60px;
    z-index: 2;
    background-color: #ffffff;
  }
  [data-theme="dark"] table.fixedHeader-floating:has(thead th.color-highlight[colspan="11"]) > thead > tr:nth-child(2) > th:nth-child(2) {
    background-color: var(--bg-card);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   accSumTable — sticky leading 2 columns (Pseudo Acc + Trading Acc)
   ─────────────────────────────────────────────────────────────────────
   Mirrors the symbolSumTable pattern above. Col 1 is pinned to 140px
   so col 2's `left: 140px` lands exactly at col 1's right edge. Account
   names are longer than exchange codes (10–15 chars typical), hence
   the wider fixed width vs. symbolSumTable's 60px. */
@media (min-width: 768px) {

  /* Force col 1 width to 140px across thead row 2, body, and footer. */
  #accSumTable > thead > tr:nth-child(2) > th:first-child,
  #accSumTable > tbody > tr > td:first-child,
  #accSumTable > tfoot > tr > th:first-child,
  #accSumTable > tfoot > tr > td:first-child {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sticky col 2 — Trading Acc header (second thead row) + every body
     and footer cell. The first thead row's second cell is the NET group
     header (colspan=6), which we deliberately do NOT make sticky. */
  #accSumTable > thead > tr:nth-child(2) > th:nth-child(2),
  #accSumTable > tbody > tr > td:nth-child(2),
  #accSumTable > tbody > tr > th:nth-child(2),
  #accSumTable > tfoot > tr > td:nth-child(2),
  #accSumTable > tfoot > tr > th:nth-child(2) {
    position: sticky;
    left: 140px;
    z-index: 1;
    background-color: #ffffff;
  }

  /* Thead second row col 2 sits above body cells */
  #accSumTable > thead > tr:nth-child(2) > th:nth-child(2) {
    z-index: 2;
  }

  /* Hover row — keep col 2 visually attached to the hovered row */
  #accSumTable > tbody > tr:hover > td:nth-child(2),
  #accSumTable > tbody > tr:hover > th:nth-child(2) {
    background-color: #f7f7f7;
  }

  /* Dark mode — token-driven bgs for col 2 */
  [data-theme="dark"] #accSumTable > thead > tr:nth-child(2) > th:nth-child(2),
  [data-theme="dark"] #accSumTable > tbody > tr > td:nth-child(2),
  [data-theme="dark"] #accSumTable > tbody > tr > th:nth-child(2),
  [data-theme="dark"] #accSumTable > tfoot > tr > td:nth-child(2),
  [data-theme="dark"] #accSumTable > tfoot > tr > th:nth-child(2) {
    background-color: var(--bg-card);
  }
  [data-theme="dark"] #accSumTable > tbody > tr:hover > td:nth-child(2),
  [data-theme="dark"] #accSumTable > tbody > tr:hover > th:nth-child(2) {
    background-color: var(--bg-elevated);
  }

  /* fixedHeader floating clone of accSumTable — discriminated from
     symbolSumTable's clone via the Margin group's unique colspan=3
     (color-lavender) — only accSumTable has it. */
  table.fixedHeader-floating:has(thead th.color-lavender[colspan="3"]) > thead > tr:nth-child(2) > th:first-child {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.fixedHeader-floating:has(thead th.color-lavender[colspan="3"]) > thead > tr:nth-child(2) > th:nth-child(2) {
    position: sticky;
    left: 140px;
    z-index: 2;
    background-color: #ffffff;
  }
  [data-theme="dark"] table.fixedHeader-floating:has(thead th.color-lavender[colspan="3"]) > thead > tr:nth-child(2) > th:nth-child(2) {
    background-color: var(--bg-card);
  }
}

/* marketwatchTable — Symbol column pinned via FixedColumns 4.x extension.
   CSS sticky for .col-symbol removed; FixedColumns manages it internally
   and keeps header/body aligned during horizontal scroll (no drift). */

/* ─────────────────────────────────────────────────────────────────────
   Tick-flash keyframes — shared by MW Classic (and reusable elsewhere)
   Respects prefers-reduced-motion so users with vestibular disorders
   or motion sensitivity get no animation.
   ─────────────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: no-preference) {
  .tick-flash-up   { animation: tickFlashUp   450ms ease-out; }
  .tick-flash-down { animation: tickFlashDown 450ms ease-out; }

  @keyframes tickFlashUp {
    0%   { background-color: var(--accent-buy, #c8e6c9); }
    100% { background-color: transparent; }
  }
  @keyframes tickFlashDown {
    0%   { background-color: var(--accent-sell, #ffcdd2); }
    100% { background-color: transparent; }
  }

  [data-theme="dark"] .tick-flash-up   { animation: tickFlashUpDark   450ms ease-out; }
  [data-theme="dark"] .tick-flash-down { animation: tickFlashDownDark 450ms ease-out; }

  @keyframes tickFlashUpDark {
    0%   { background-color: rgba(63, 185, 80, 0.35); }
    100% { background-color: transparent; }
  }
  @keyframes tickFlashDownDark {
    0%   { background-color: rgba(248, 81, 73, 0.35); }
    100% { background-color: transparent; }
  }
}