/* =============================================================================
   ETF.CSS — Page-Specific Styles: ETF Hub
   AI Supply Chain Dashboard
   Created: 2025-02-27

   ACCENT: Indigo (#818cf8) — represents "structured/packaged" products

   SHARED MODULES IMPORTED:
   - base.css, scores.css, index-bar.css, table.css, admin.css

   REVERT: Paste rules back into etf.html <style>.
   ============================================================================= */

:root {
    --acc:          #818cf8;
    --acc-dim:      rgba(129,140,248,0.08);
    --acc-glow:     rgba(129,140,248,0.15);
    --ambient-colour: rgba(129,140,248,0.06);
}

/* ETF table: selected rows get an indigo tint */
.uni-table tbody tr.selected { background: rgba(129,140,248,0.07); }

/* Chip badges — ETF holding labels */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
    background: var(--acc-dim);
    color: var(--acc);
    border: 1px solid rgba(129,140,248,0.2);
    font-family: var(--font-data);
}

/* ETF check / view toggle buttons */
.etf-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: none;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 10px;
    color: var(--text-dim);
}

.etf-check.checked {
    background: var(--acc-glow);
    border-color: var(--acc);
    color: var(--acc);
}

.view-btn {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-mid);
    cursor: pointer;
    font-family: var(--font-data);
    transition: all 0.2s;
}

.view-btn:hover       { border-color: var(--acc); color: var(--acc); }
.view-btn.active      { border-color: var(--acc); color: var(--acc); background: var(--acc-dim); }

/* Cat badge in ETF sidebar */
.cat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
    font-family: var(--font-data);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}