/* Copyright (c) 2026 Goldeneye Technologies LLC. All rights reserved. */
/* Accessible non-spatial (tabular) view modal (Phase 0 Accessibility). Mirrors
   content_chart.css: the overlay sits above every Leaflet pane/control
   (.leaflet-control caps at z-index 1000) and the side nav so it reads as a true
   modal over the map. Tokens from tokens.css. */

#data_table_overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
}
#data_table_overlay.table_open {
    display: flex;
}

#data_table_modal {
    display: flex;
    flex-direction: column;
    float: none;
    width: 80vw;
    max-width: 900px;
    height: 80vh;
    max-height: 90vh;
    /* dvh twin (same pattern as the bottom-sheet snap classes): on iOS Safari
       `100vh` includes the strip BEHIND the browser chrome, and this box is
       centred in a `position: fixed; inset: 0` overlay that covers the LAYOUT
       viewport — so a vh-sized modal can have its top and bottom edges hidden
       under that chrome. In portrait the margin absorbs it; in landscape, where
       the viewport is ~390px tall, it does not. `dvh` tracks the visible
       viewport. The vh lines above stay as the fallback. <JAS 2026-08-21> */
    height: 80dvh;
    max-height: 90dvh;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

#data_table_header {
    display: flex;
    float: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
}
#data_table_title {
    float: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}
#data_table_status {
    float: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.data_table_filter_group {
    float: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}
#data_table_filter {
    float: none;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}
#data_table_count {
    float: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}
#data_table_close {
    float: none;
    font-family: inherit;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
}
#data_table_close:hover {
    background: var(--color-bg-hover);
}

/* Scrollable region holding the table; thead stays pinned while the body
   scrolls (~500 rows). */
#data_table_scroll {
    float: none;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: auto;
}

#data_table {
    float: none;
    width: 100%;
    /* Fixed layout (was auto). With ~4,000 rows, auto layout forced the browser
       to measure every cell on every open to size the columns — an O(rows)
       reflow that was the ~300ms jank. Fixed layout sizes columns from the
       explicit widths below, so layout cost no longer scales with row count.
       <JAS 2026-06-24> */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
#data_table th,
#data_table td {
    float: none;
    text-align: left;
    padding: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
#data_table tbody th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
#data_table tbody td {
    color: var(--color-text);
}
#data_table td.data_table_pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Explicit column widths feed the fixed table layout above. Company / HQ City
   take the remaining space and truncate with an ellipsis; the untruncated text
   stays in the DOM (textContent), so screen readers and the filter still match
   full names — only the desktop visual is clipped. Mobile (@media below)
   overrides these (drops HQ City, narrows % Change).

   Columns are addressed by a `col_<key>` CLASS, not by nth-child / :last-child.
   The Verified column (P14) shifted % Change and Add one place right, and an
   index-keyed rule silently sizes the wrong column when that happens — which,
   under `table-layout: fixed`, is a layout break rather than a cosmetic one. The
   class is written from the COLUMNS model in data_table.js, so header and body
   cells can't drift apart. <JAS 2026-06-24, updated 2026-08-15> */
#data_table .col_ticker   { width: 4.5em; }
#data_table .col_verified { width: 6em; }
#data_table .col_pct      { width: 6em; }
/* Sector (A7, atlas mode only — it takes % Change's slot). Wide enough for the
   longest label in the taxonomy ("Manufacturing & Transport") because this
   column is the decode channel for the map's colouring: an ellipsis here would
   put two sectors behind the same visible prefix. <JAS 2026-09-05> */
#data_table .col_sector   { width: 13em; }
#data_table .col_add      { width: 3.5em; }
#data_table td.col_company,
#data_table td.col_city {                          /* fill the remainder, truncate */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ticker cell link to /ticker/<SYM> (P16). It sits INSIDE the row header, so it
   inherits the header's weight and adds only link affordance. The underline is
   permanent, not hover-only: colour must not be the sole "this is a link" cue
   (WCAG 1.4.1), the same posture the Verified column takes on its state words.
   <JAS 2026-08-19> */
#data_table .data_table_ticker_link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#data_table .data_table_ticker_link:hover {
    color: var(--color-accent-hover);
}

/* "Tickerscape Verified" state column (P14). The state WORD is the decode
   channel — colour only reinforces it — so these rules are safe to lose. Tints
   mirror the .ts-badge-* palette in global.css (accent teal for Verified, the
   amber-brown "different KIND of address" for Filed address), and Pending
   stays plain body text: it is the neutral majority, not a warning.
   <JAS 2026-08-15, relabelled 2026-09-07> */
#data_table td.data_table_verified {
    font-size: var(--font-size-xs);
}
#data_table td.data_table_verified.is_verified { color: var(--color-accent); }
#data_table td.data_table_verified.is_filed    { color: #8a5300; }
#data_table td.data_table_verified.is_none     { color: var(--color-text-muted); }

/* Add-to-info-panel action column (S3). Icon-only button; the accessible name
   lives on aria-label (and title), which _setAddState re-words for the
   already-added state. The added state swaps the glyph plus -> check, so it is
   decodable without colour. <JAS 2026-07-25> */
#data_table td.data_table_add_cell {
    padding: var(--space-1);
    text-align: center;
}
span.data_table_head_plain {
    display: block;
    padding: var(--space-2) var(--space-1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: center;
}
button.data_table_add {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--color-accent);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
button.data_table_add svg {
    width: 16px;
    height: 16px;
    pointer-events: none;   /* clicks always land on the button (delegation) */
}
button.data_table_add:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
}
button.data_table_add.is_added {
    color: var(--color-text-muted);
    cursor: default;
}
button.data_table_add.is_added:hover {
    background: none;
    border-color: transparent;
}

/* Sticky, sortable header. */
#data_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-muted);
    border-bottom: 2px solid var(--color-border);
    padding: 0;
}
button.data_table_sort {
    float: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    background: none;
    border: 0;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}
#data_table thead th.col_pct button.data_table_sort {
    justify-content: flex-end;
}
button.data_table_sort:hover {
    background: var(--color-bg-hover);
}
.data_table_sort_indicator {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ----------------------------------------- */
/* Mobile viewport (≤ 768 CSS px wide; Lane E / Prompt 4 feedback). In portrait
   the 80vw modal + four nowrap columns overflowed into an awkward horizontal
   scroll and the flex header squeezed the title into a sliver. Widen the modal,
   let the header chrome wrap into stacked rows, and switch the table to a fixed
   layout that drops the secondary HQ City column and truncates Company so
   Ticker / Company / % Change all fit with no horizontal scroll. The full city
   + untruncated company names remain in the desktop / landscape view.
   <JAS 2026-06-22> */
/* ----------------------------------------- */
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    /* Width only. The height deliberately stays on the base 80vh/90dvh that
       `#chart_modal` also uses: a 90vh/92vh box is ~10% of the viewport TALLER
       than the chart, and because both overlays are `inset: 0` + `align-items:
       center` that extra height is spent equally off the top and the bottom —
       so the table's header sat higher than the chart's and, in landscape,
       close enough to the top edge to be clipped by the browser chrome. On
       desktop the two modals have always been the same box; this makes mobile
       agree. <JAS 2026-08-21> */
    #data_table_modal {
        width: 96vw;
    }
    /* Stack the header: title (+ close) on row 1, status on row 2, filter on
       row 3 — `order` drives the layout since the close button is last in DOM. */
    #data_table_header {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: var(--space-2);
    }
    #data_table_title {
        order: 1;
        flex: 1 1 auto;
        font-size: var(--font-size-base);
        white-space: nowrap;
    }
    #data_table_close {
        order: 2;
    }
    #data_table_status {
        order: 3;
        flex: 1 1 100%;
        white-space: normal;
    }
    .data_table_filter_group {
        order: 4;
        flex: 1 1 100%;
        margin-left: 0;
    }
    #data_table_filter {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* With the three columns now fitting (fixed layout + dropped HQ City +
       truncated Company), there's nothing to scroll sideways to — kill the
       horizontal scrollbar so only vertical scroll remains (round-2 feedback).
       overflow-y stays `auto` from the base #data_table_scroll rule. <JAS 2026-06-22> */
    #data_table_scroll {
        overflow-x: hidden;
    }
    /* Fixed layout → predictable column widths + working ellipsis truncation. */
    #data_table {
        table-layout: fixed;
    }
    #data_table .col_ticker {
        width: 4.5em;
    }
    /* HQ City and Verified are the two secondary columns dropped on narrow
       viewports so Ticker / Company / % Change / Add fit with no horizontal
       scroll. Verification stays reachable on mobile through the info-panel
       card's badge (the same claim, same reader). <JAS 2026-08-15> */
    #data_table .col_city,
    #data_table .col_verified {
        display: none;
    }
    #data_table .col_pct {
        width: 5.5em;
    }
    /* Sector STAYS on mobile, unlike HQ City and Verified: it is the non-colour
       decode channel for the map's sector colouring, and a touch user has no
       hover tooltip to fall back on. It narrows and truncates instead — the
       full string is still in textContent for AT and for the filter.
       <JAS 2026-09-05> */
    #data_table .col_sector {
        width: 8em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #data_table td.col_company {
        overflow: hidden;              /* Company fills the remainder, truncates */
        text-overflow: ellipsis;
    }
    /* Add column: a 44x44 touch target (Lane E), so the column widens and the
       cell drops its padding. <JAS 2026-07-25> */
    #data_table .col_add {
        width: 52px;
    }
    #data_table td.data_table_add_cell {
        padding: 0;
    }
    button.data_table_add {
        width: 44px;
        height: 44px;
    }
}