/* 2.86.0: Supervise (public/supervise.js). Mobile first: one column of big cards and big buttons (44 px), the queues as
   a row of tiles that scrolls sideways; on a wide screen the agents' grid beside the waiting and missed lists. Green,
   amber, red: a coloured edge and a soft tint (with the state's words, never colour alone). */
.sv-page { --sv-green: var(--ok, #16a34a); --sv-amber: #d97706; --sv-red: var(--fault, #dc2626); }
.sv-page [data-lv="amber"] { --sv-lv: var(--sv-amber); }
.sv-page [data-lv="red"] { --sv-lv: var(--sv-red); }
.sv-page [data-lv="green"] { --sv-lv: var(--sv-green); }
.sv-off { max-width: 640px; }
.sv-big-btn { min-height: 44px; padding-inline: 22px; font-size: 16px; }
.sv-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--sunk); color: var(--muted); font-size: 14px; line-height: 1.45; }
.sv-note svg { flex: none; margin-top: 2px; }

/* the spy bar: sticky at the top while listening */
.sv-spybar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 12px; padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--panel); border: 2px solid var(--wait, #d97706); box-shadow: var(--shadow); }
.sv-spybar.on { border-color: var(--sv-green); }
.sv-spybar b { display: inline-flex; align-items: center; gap: 4px; }
.sv-spy-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-spy-btns button { min-height: 44px; min-width: 72px; }
.sv-spy-btns button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }

/* queue tiles */
.sv-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 78%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin-bottom: 6px; }
.sv-tile { scroll-snap-align: start; background: var(--panel); border: 1px solid var(--line); border-inline-start: 5px solid var(--sv-lv, var(--line)); border-radius: var(--r-md, 10px); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sv-tile-name { font-weight: 600; }
.sv-tile-main { display: flex; gap: 18px; }
.sv-big { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sv-tile[data-lv="red"] .sv-big .sv-time, .sv-tile[data-lv="amber"] .sv-big .sv-time { color: var(--sv-lv); }
.sv-k { font-size: 12px; color: var(--muted); }
.sv-tile-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.sv-tile-foot span { display: inline-flex; align-items: center; gap: 3px; }
.sv-bad { color: var(--sv-red); font-weight: 600; }

/* filters */
.sv-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.sv-chip { flex: none; min-height: 40px; border-radius: 999px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.sv-chip[aria-pressed="true"] { background: var(--accent-soft, var(--sunk)); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sv-n { font-size: 12px; padding: 0 6px; border-radius: 999px; background: var(--sunk); color: var(--ink); }

/* layout */
.sv-cols { display: flex; flex-direction: column; gap: 14px; }
.sv-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .sv-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .sv-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); overflow: visible; } }
@media (min-width: 1200px) { .sv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .sv-side { position: sticky; top: 8px; } }

/* an agent */
.sv-agent { background: var(--panel); border: 1px solid var(--line); border-inline-start: 5px solid var(--sv-lv, var(--line)); border-radius: var(--r-md, 10px); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sv-agent[data-lv="red"] { background: color-mix(in srgb, var(--sv-red) 6%, var(--panel)); }
.sv-agent[data-lv="amber"] { background: color-mix(in srgb, var(--sv-amber) 6%, var(--panel)); }
.sv-agent.st-off, .sv-agent.st-out { opacity: .75; }
.sv-agent-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sv-who { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sv-state { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--sunk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-state.st-call { background: color-mix(in srgb, var(--info, #2563eb) 14%, var(--panel)); }
.sv-state.st-ring { background: color-mix(in srgb, var(--wait, #d97706) 16%, var(--panel)); }
.sv-state.st-free { background: color-mix(in srgb, var(--sv-green) 14%, var(--panel)); }
.sv-state.st-pause, .sv-state.st-wrap { background: color-mix(in srgb, var(--sv-amber) 12%, var(--panel)); }
.sv-agent[data-lv="red"] .sv-state, .sv-agent[data-lv="amber"] .sv-state { color: var(--sv-lv); }
.sv-reason, .sv-call { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.sv-queues { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-btns button { min-height: 44px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sv-btns-sm button { min-height: 40px; flex: 0 1 auto; font-size: 14px; }

/* waiting and missed */
.sv-side .panel h2 { font-size: 16px; }
.sv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-list > li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-sm, 8px); background: var(--sunk); border-inline-start: 4px solid var(--sv-lv, transparent); }
.sv-list .sv-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-list > li[data-lv="red"] .sv-time, .sv-list > li[data-lv="amber"] .sv-time { color: var(--sv-lv); }
.sv-li-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv-missed .sv-btns { width: 100%; }
.sv-qpick { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sv-times td, .sv-times th { padding: 4px 6px; }
.sv-sec { width: 90px; }