/**
 * Routing tab.
 *
 * Composed entirely from the panel's existing tokens — no new colour, radius or
 * shadow is invented here. The page borrows the table, card, stats-grid, subtab
 * and empty-state chrome that already exist; what follows is only the handful of
 * things this page genuinely has that no other page does: an availability dot,
 * a workload bar, and a two-step remove.
 */

/* ---------------------------------------------------------------- status */

/* Dot AND word, always together. State is never carried by colour alone. */
.wr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.wr-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--color-gray-400);
}
.wr-status.is-on  .wr-status-dot { background: var(--color-success); }
.wr-status.is-off .wr-status-dot { background: var(--color-gray-400); }
.wr-status.is-off { color: var(--color-text-secondary); }

.wr-sub {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.wr-muted { color: var(--color-text-tertiary); }

/* ----------------------------------------------------------------- table */

.wr-table td { vertical-align: top; }

/* An unavailable agent is still readable — dimmed, not hidden. They are part of
   the roster and their workload still matters. */
.wr-row-off .wr-agent { color: var(--color-text-secondary); }

.wr-agent {
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The one piece of accent on the page: whoever takes the next escalation. */
.wr-next {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Workload as a number first, bar second — the bar is comparison, not data. */
.wr-load {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 64px;
}
.wr-load-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.wr-load-bar {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-gray-200);
    overflow: hidden;
}
.wr-load-bar > span {
    display: block;
    height: 100%;
    background: var(--color-gray-400);
}

/* --------------------------------------------------------------- copying */

.wr-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 4px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    cursor: pointer;
}
.wr-copy:hover { background: var(--color-bg-tertiary); }
.wr-copy:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}
.wr-copy.is-copied { color: var(--color-primary); }

/* -------------------------------------------------------- remove / arming */

/* Two-step: the second click commits. Armed state reads as a question, not as
   a threat — the danger colour arrives only once it can actually do something. */
.wr-remove-armed {
    color: var(--color-danger) !important;
    background: var(--color-danger-light) !important;
}

/* ------------------------------------------------------------------- add */

/* Sits ABOVE the roster, not under it. A control you only find by scrolling
   past the thing it changes is a control people ask for again. */
.wr-add {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}
.wr-add.is-empty {
    color: var(--color-text-tertiary);
    font-size: 13px;
    background: transparent;
}
.wr-add-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}
.wr-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wr-add-hint {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------- select */

/* The native select was inheriting .form-control, which is built for text
   inputs — the arrow doubled up and the control sat at the wrong height.
   Own wrapper, own arrow, tokens throughout. */
.wr-select {
    position: relative;
    display: inline-flex;
    min-width: 180px;
}
.wr-select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid var(--color-text-tertiary);
    border-bottom: 1.5px solid var(--color-text-tertiary);
    transform: rotate(45deg);
    pointer-events: none;
}
.wr-select > select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;
    padding: 0 28px 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
}
.wr-select > select:hover { border-color: var(--color-border-hover); }
.wr-select > select:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
    border-color: var(--color-border-focus);
}

/* --------------------------------------------------------------- history */

.wr-history {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wr-history-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.wr-history-item:last-child { border-bottom: 0; }
.wr-history-who { font-weight: 500; color: var(--color-text-primary); }
.wr-history-reason { color: var(--color-text-secondary); }
.wr-history-when {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A command that reached us but changed nothing on our side. Rare, and worth
   seeing rather than hiding — it is how a mapping gap becomes visible. */
.wr-history-flag {
    font-size: 11px;
    color: var(--color-warning);
    background: var(--color-warning-light);
    border-radius: 4px;
    padding: 1px 6px;
}

/* -------------------------------------------------------------- skeleton */

.wr-skeleton { padding: 8px 20px; }
.wr-skeleton-row {
    display: flex;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.wr-skeleton-cell {
    height: 10px;
    border-radius: 4px;
    background: var(--color-gray-200);
    animation: wr-pulse 1.4s ease-in-out infinite;
}
@keyframes wr-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .wr-skeleton-cell { animation: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
    .wr-load-bar { display: none; }          /* the number still carries it */
    .wr-history-item { flex-wrap: wrap; }
    .wr-history-when { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- filters */

/* One row, shared by the three historical tabs, so the period you chose
   survives moving between them — changing tab to see the same week from
   another angle should not reset the week. */
.wr-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
}
.wr-filter { width: auto; min-width: 150px; }
.wr-filter-summary {
    margin-left: auto;
    font-size: 13px;
    color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------------ chart */

/* Deliberately bars and not a library: one number per bucket, and the only
   thing that must stand out is a period with nobody on. */
.wr-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 132px;
    padding: 4px 0;
    overflow-x: auto;
}
.wr-bar {
    flex: 1 0 6px;
    min-width: 6px;
    background: var(--color-primary);
    opacity: 0.75;
    border-radius: 2px 2px 0 0;
    transition: opacity 120ms ease;
}
.wr-bar:hover { opacity: 1; }
/* Nobody available. Full height in the danger colour, because a gap is not a
   small bar — it is the absence of the thing being measured. */
.wr-bar.is-zero {
    background: var(--color-danger);
    opacity: 0.28;
}
.wr-chart-legend {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* ------------------------------------------------------- team + reasons */

.wr-pct { font-variant-numeric: tabular-nums; font-weight: 500; }
.wr-pct.is-low { color: var(--color-warning); }

.wr-chip {
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    padding: 0 8px;
    margin: 0 4px 2px 0;
    border-radius: 9px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wr-mix { display: flex; flex-direction: column; gap: 10px; }
.wr-mix-row { display: flex; align-items: center; gap: 12px; }
.wr-mix-label { flex: 0 0 130px; font-size: 13px; color: var(--color-text-secondary); }
.wr-mix-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--color-gray-200);
    overflow: hidden;
}
.wr-mix-bar > span { display: block; height: 100%; background: var(--color-primary); opacity: 0.6; }
.wr-mix-value {
    flex: 0 0 auto;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

/* -------------------------------------------------------- add to rotation */

.wr-add-head { margin-bottom: 10px; }
.wr-add-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

@media (max-width: 720px) {
    .wr-filter-summary { margin-left: 0; width: 100%; }
    .wr-mix-label { flex-basis: 96px; }
}

/* --------------------------------------------------- chart axis + ticks */

/* Bars without a scale are decoration. The axis says how many agents a full
   bar means; the ticks say when. */
.wr-chart-wrap { display: flex; align-items: stretch; gap: 10px; }
.wr-chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 2px 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
}
.wr-chart-wrap .wr-chart { flex: 1; }
.wr-chart-ticks {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 0 34px;
    font-size: 11px;
    color: var(--color-text-tertiary);
}

/* An agent's name is a filter — one click instead of hunting the dropdown. */
.wr-agent-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
}
.wr-agent-link:hover { color: var(--color-primary); text-decoration: underline; }
.wr-agent-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------------- combobox */

/* One searchable dropdown for every choice on the page. Fourteen agents make
   type-to-filter worth having; using it for seven reasons too means there is
   one behaviour to learn, not two controls that look alike and differ. */
.wr-combo { position: relative; display: inline-flex; }
.wr-combo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    min-width: 150px;
    justify-content: space-between;
    font: inherit;
    font-size: 13px;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
}
.wr-combo-btn.has-value { color: var(--color-text-primary); font-weight: 500; }
.wr-combo-btn:hover { border-color: var(--color-border-hover); }
.wr-combo-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.wr-combo-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 230px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 30, 0.12);
    padding: 6px;
}
.wr-combo-search {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    margin-bottom: 4px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-secondary);
}
.wr-combo-search:focus { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.wr-combo-list { max-height: 260px; overflow-y: auto; }
.wr-combo-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 8px;
    border: 0;
    border-radius: 5px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
}
.wr-combo-opt:hover, .wr-combo-opt.is-cursor { background: var(--color-bg-tertiary); }
.wr-combo-opt.is-active { color: var(--color-primary); font-weight: 500; }
.wr-combo-none { padding: 8px; font-size: 13px; color: var(--color-text-tertiary); }

/* ------------------------------------------------------------ as-of + pager */

.wr-asof {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--color-text-tertiary);
}
.wr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--color-border);
}
.wr-pager-label { font-size: 13px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.wr-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* -------------------------------------------------- honesty + affordances */

/* "simulated" rides the column header rather than a page banner, so the
   caveat sits on the number it qualifies and cannot be scrolled away from. */
.wr-sim {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-warning);
    background: var(--color-warning-light);
    border-radius: 3px;
    padding: 1px 5px;
}
.wr-foot {
    margin: 0;
    padding: 12px 20px 16px;
    font-size: 12.5px;
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border);
}
.wr-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.wr-link {
    border: 0; background: none; padding: 0; font: inherit;
    color: var(--color-primary); cursor: pointer; text-decoration: underline;
}
.wr-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: 3px; }
.mono-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    padding: 1px 5px;
}

/* Sortable headers — the header IS the control, so it must look pressable. */
.wr-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.wr-th-sort:hover { color: var(--color-text-primary); }
.wr-th-sort .wr-sort-arrow { margin-left: 5px; opacity: 0.35; font-size: 10px; }
.wr-th-sort.is-sorted { color: var(--color-text-primary); }
.wr-th-sort.is-sorted .wr-sort-arrow { opacity: 1; color: var(--color-primary); }

/* Unavailable rows: present but quiet. They are context, not the work. */
.wr-row-off td { padding-top: 9px; padding-bottom: 9px; }
.wr-row-off .wr-agent-link { color: var(--color-text-secondary); }

/* ------------------------------------------------------------ pulse notes */

/* Sentences the tiles cannot carry: a number says "5", a sentence says what
   five means and what to do. Only rendered when there is something to say. */
.wr-notes {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wr-notes li {
    font-size: 13px;
    color: var(--color-text-secondary);
    padding-left: 14px;
    position: relative;
}
.wr-notes li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-gray-300);
}
.wr-notes b { color: var(--color-text-primary); font-weight: 600; }