/*
 * rotation.css — Rotation dashboard table layout overrides
 *
 * The shared ../style.css provides the base design system.
 * This file adds rotation-specific table refinements.
 */

/* --- Prevent horizontal scroll: table uses full width --- */
#rotation-table {
    table-layout: fixed;
    width: 100%;
}

/* --- Compact Table Padding --- */
#rotation-table th,
#rotation-table td {
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Sticky Table Header --- */
#rotation-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-bg-card);
    /* Override style.css opacity:0.7 which makes the ENTIRE element transparent,
       letting rows bleed through. Use full opacity + muted color instead. */
    opacity: 1;
    color: var(--color-text-card);
    box-shadow: 0 1px 0 0 var(--color-border-subtle);
}
/* Inactive (non-sorted) headers: dim text only, not background */
#rotation-table thead th:not(.sort-active) {
    opacity: 1;
    color: inherit;
}
#rotation-table thead th:not(.sort-active) .sort-icon {
    opacity: 0.4;
}
.table-container {
    position: relative;
}

/* --- Quadrant Column: wider for badge + sort icon --- */
#rotation-table th[data-sort="rank"] {
    white-space: nowrap;
    overflow: visible; /* allow the sort icon to show */
}
#rotation-table td:nth-child(1) {
    text-align: center;
}

#rotation-table td:nth-child(2) {
    white-space: nowrap;
    overflow: visible;
}

/* --- Sub-Industry Column: ellipsis for long names --- */
#rotation-table td:nth-child(3) {
    overflow: hidden;
}
#rotation-table td:nth-child(3) .sub-industry-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sector Column: trim whitespace, clip overflow --- */
#rotation-table th[data-sort="gics"],
#rotation-table td:nth-child(4) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 4px;
}

/* --- RS-Ratio and RS-Mom Columns: force single-line headers --- */
#rotation-table th[data-sort="x"],
#rotation-table th[data-sort="y"] {
    white-space: nowrap;
}

/* --- Visibility Checkboxes --- */
.row-checkbox, #select-all-checkbox {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent-bullish);
    vertical-align: middle;
}