/* ranking_table — colors driven by theme variables (assets_ui/css/fa.css) */

.rt-root {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--font-family);
    color: var(--text-main);
    margin-bottom: 16px;
}
.rt-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
}
.rt-title { margin: 0; color: var(--text-main); }
.rt-meta  { color: var(--text-muted); }
.rt-actions { margin-left: auto; display: flex; gap: 6px; }
.rt-action {
    background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main);
    padding: 5px 10px; border-radius: 4px; cursor: pointer; font: inherit;
}
.rt-action:hover { background: var(--table-header-bg); }
.rt-action-compare { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.rt-action-compare:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.rt-table-wrap { overflow-x: auto; }
.rt-table { width: 100%; border-collapse: collapse; }
.rt-table th, .rt-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); }
.rt-table thead th {
    text-align: left; background: var(--bg-card);
 text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-color); cursor: default;
}
.rt-cat-path { font-size: var(--fs-xs); color: var(--text-muted); }
.rt-table .rt-num { text-align: right; font-variant-numeric: tabular-nums; }
.rt-table .rt-col-rank { width: 40px; color: var(--text-muted); }
.rt-table .rt-col-icon { width: 32px; }
.rt-icon { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; background: var(--table-header-bg); }

.rt-table .rt-row-sorted-by {
    font-weight: 700;
    color: var(--text-main);
    background: rgba(250, 204, 21, 0.18);
}
.rt-table thead th.rt-sortable { cursor: pointer; }
.rt-table thead th.rt-sortable:hover { color: var(--text-main); }
.rt-table thead th.rt-col-sorted {
    color: var(--primary-color);
    font-weight: 700;
}
.rt-table thead th.rt-col-sorted::after { content: ' ↓'; }

.rt-table tbody tr:hover { background: var(--primary-row-hover); cursor: pointer; }

.rt-footer { padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.rt-show-more {
    background: var(--bg-card); border: 1px solid var(--border-color); padding: 5px 12px;
    border-radius: 4px; cursor: pointer; font: inherit; color: var(--text-main);
}
.rt-show-more:hover { background: var(--table-header-bg); }
.rt-empty { color: var(--text-muted); font-style: italic; }

.rt-loading {
    padding: 30px; text-align: center; color: var(--text-muted);
    background: var(--table-header-bg); border: 1px dashed var(--border-color); border-radius: 8px;
}