/* Ranking selector — shared by the team block of AlocacaoProcessos and by
   PersonProcessAllocationView (manager + employee screens). Global instead of
   scoped because two components render it and the styles must not drift.

   Replaces the filled pills that used to sit under the
   streamgraph. One row per process: colour dot, name, bar proportional to
   the process weight, and the hour total. Clicking a row toggles the
   series in the chart.

   Chrome (rails, labels, hover) comes from the theme palette. The only
   literal colours are the per-process series colours, which are bound
   inline from the data — report series identity, never theme-driven. */

.rank-legend {
    border-top: 1px solid var(--rksam-border-subtle);
    margin-top: var(--rksam-space-4);
    padding-top: var(--rksam-space-4);
}

.rank-legend__title {
    font-size: var(--rksam-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rksam-text-tertiary);
    margin-bottom: var(--rksam-space-3);
}

.rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 34px;
}

/* Two columns halve the list height, but do not fit a narrow viewport. */
@media (max-width: 760px) {
    .rank-grid {
        grid-template-columns: 1fr;
    }
}

.rank-row {
    display: flex;
    align-items: center;
    gap: var(--rksam-space-3);
    padding: 6px 4px;
    cursor: pointer;
    border-radius: var(--rksam-radius-sm);
    transition: background var(--rksam-duration-fast) var(--rksam-easing);
    user-select: none;
}

.rank-row:hover {
    background: var(--rksam-surface-hover);
}

/* Process toggled off: dimmed, but still readable and still clickable. */
.rank-row--off {
    opacity: .4;
}

.rank-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.rank-name {
    font-size: var(--rksam-fs-sm);
    width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--rksam-text-primary);
}

.rank-track {
    flex: 1;
    height: 8px;
    background: var(--rksam-bg-subtle);
    border-radius: var(--rksam-radius-sm);
    overflow: hidden;
}

.rank-fill {
    height: 100%;
    border-radius: var(--rksam-radius-sm);
}

.rank-val {
    font-size: var(--rksam-fs-xs);
    color: var(--rksam-text-secondary);
    width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}