/* =============================================================================
   TABLE.CSS — Data Table Component
   AI Supply Chain Dashboard
   Created: 2025-02-27

   PURPOSE: .uni-table is duplicated (with minor variations) in universe.html,
   etf.html, and screener.html (as .res-table). This file unifies them under
   a single .data-table base class with modifier variants.

   COMPONENTS:
   - .data-table              Base table (universe + etf)
   - .data-table--screener    Amber-accent variant for screener
   - .table-wrap              Scrollable container with sticky header support

   MIGRATION NOTE: HTML should be updated to use .data-table instead of
   .uni-table or .res-table. During transition, both old and new class names
   are aliased below.

   USAGE: @import './table.css'; in universe, etf, screener pages.

   REVERT: Copy the .uni-table / .res-table rules back into each page's
   <style> block. Remove this import.
   ============================================================================= */

/* =============================================================================
   TABLE WRAP — scrollable container
   ============================================================================= */
.table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* =============================================================================
   BASE DATA TABLE
   ============================================================================= */
.data-table,
.uni-table {     /* legacy alias — remove after HTML migration */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-data);
    font-size: 10px;
}

/* --- Sticky header --- */
.data-table thead th,
.uni-table thead th {
    position: sticky;
    top: 0;
    background: #0a0a0f;
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left;
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mid);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    z-index: 10;
}

.data-table thead th:hover,
.uni-table thead th:hover { color: var(--text-base); }

/* Sort indicators */
.data-table thead th.sorted-asc::after,
.uni-table thead th.sorted-asc::after   { content: ' ▲'; color: var(--acc); }
.data-table thead th.sorted-desc::after,
.uni-table thead th.sorted-desc::after  { content: ' ▼'; color: var(--acc); }

/* --- Body rows --- */
.data-table tbody tr,
.uni-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.12s;
}

.data-table tbody tr:hover,
.uni-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Selected row (ETF multi-select) */
.data-table tbody tr.selected,
.uni-table tbody tr.selected { background: rgba(129,140,248,0.07); }

/* --- Cells --- */
.data-table td,
.uni-table td {
    padding: 5px 8px;
    white-space: nowrap;
}

.data-table td.ticker,
.uni-table td.ticker {
    font-weight: 700;
    color: var(--text-hi);
}

/* =============================================================================
   SCREENER VARIANT — amber accent, tighter padding
   Replaces .res-table from screener.html
   ============================================================================= */
.data-table--screener thead th:hover         { color: var(--acc); }
.data-table--screener thead th.sorted-asc::after  { color: var(--acc); }
.data-table--screener thead th.sorted-desc::after { color: var(--acc); }
.data-table--screener tbody tr                    { cursor: pointer; }
.data-table--screener tbody tr:hover              { background: rgba(245,158,11,0.04); }

/* Legacy alias */
.res-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 10px;
    font-family: var(--font-data);
}

.res-table thead th {
    position: sticky;
    top: 0;
    background: #08080d;
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left;
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mid);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    z-index: 5;
}

.res-table thead th:hover            { color: var(--acc); }
.res-table thead th.sorted-asc::after  { content: ' ▲'; color: var(--acc); }
.res-table thead th.sorted-desc::after { content: ' ▼'; color: var(--acc); }

.res-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.025);
    transition: background 0.12s;
    cursor: pointer;
}

.res-table tbody tr:hover { background: rgba(245,158,11,0.04); }

.res-table td {
    padding: 5px 8px;
    white-space: nowrap;
}

/* =============================================================================
   SELECTION BAR — floating action bar (ETF page)
   Appears when rows are selected in the ETF table.
   ============================================================================= */
.selection-bar {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card);
    border: 1px solid var(--border-mid);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7);
    transition: bottom 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 50;
    white-space: nowrap;
}

.selection-bar.visible { bottom: 24px; }

.selection-count {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-hi);
}

.selection-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 400px;
    overflow: hidden;
}

/* =============================================================================
   EMPTY STATE — shown when table has no results
   ============================================================================= */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; }
.empty-msg  { font-size: 11px; color: var(--text-dim); }
.empty-sub  { font-size: 9px; color: #333; margin-top: 4px; }