/* SocDashboard (SOC operational dashboard, /soc/overview) — migrated from SocDashboard.razor.css; scoped under .page-soc-dashboard. */
.page-soc-dashboard { display: flex; flex-direction: column; gap: 34px; }

.page-soc-dashboard .soc-ops { gap: 16px; width: 100%; position: relative; }
.page-soc-dashboard .soc-head { margin-bottom: 2px; }
.page-soc-dashboard .soc-head h1 { font-size: 34px; }

/* ─── Header controls ───────────────────────────────────────────── */
.page-soc-dashboard .range-select { display: inline-flex; border: 1px solid var(--line); }
.page-soc-dashboard .range-btn {
    padding: 8px 15px; border: none; background: var(--surface);
    color: var(--muted); font: 600 13px var(--font-body); cursor: pointer;
    border-right: 1px solid var(--line); transition: background .15s, color .15s;
}
.page-soc-dashboard .range-btn:last-child { border-right: none; }
.page-soc-dashboard .range-btn:hover { color: var(--text); }
.page-soc-dashboard .range-btn.is-active { background: var(--accent-soft); color: var(--accent-2); }

.page-soc-dashboard .btn-icon { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.page-soc-dashboard .btn-icon svg { width: 14px; height: 14px; }

/* Manual refresh — matches the Incidents tab's .tb-btn (that class is scoped to that page). */
.page-soc-dashboard .refresh-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 10px; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted);
    font: 500 13px var(--font-body); cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.page-soc-dashboard .refresh-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.page-soc-dashboard .refresh-btn svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.page-soc-dashboard .refresh-btn svg.spin { transform-box: fill-box; transform-origin: center; animation: dash-spin .7s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }

.page-soc-dashboard .refresh-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.page-soc-dashboard .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(61,220,151,.14); }
.page-soc-dashboard .live-dot.pulsing { background: var(--accent); animation: soc-pulse 1s ease-in-out infinite; }
@keyframes soc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.page-soc-dashboard .wire-note { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px dashed var(--accent-line); background: var(--accent-soft); color: var(--muted); font-size: 12.5px; }
.page-soc-dashboard .wire-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ─── Board layout: one 12-column grid, all on one screen ───────────
   Row 1  stat strip (6 tiles, full width)
   Row 2  queue (cols 1–6) · By customer (7–9) · By assignee (10–12)
   Row 3  queue (cont.)    · Incident volume (7–12)
   Row 4  queue (cont.)    · By priority (7–12)
   The queue is one tall box down the left. Cells are placed EXPLICITLY (not auto-flow spans) so the
   queue is guaranteed to occupy rows 2–4 and always stretches to the exact bottom of the right-hand
   column beside it — customer/assignee, volume and priority stacked.                              */
/* Zero-floor tracks (§26): a bare `1fr` can't shrink below its widest child, so a card with an
   unbreakable row widened its column and was cut off at the panel edge on a narrow screen. */
.page-soc-dashboard .soc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; }
.page-soc-dashboard .stat-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.page-soc-dashboard .soc-grid > *,
.page-soc-dashboard .stat-strip > * { min-width: 0; }
.page-soc-dashboard .card--queue    { grid-column: 1 / 7;   grid-row: 2 / 5; align-self: stretch; }
.page-soc-dashboard .card--customer { grid-column: 7 / 10;  grid-row: 2; }
.page-soc-dashboard .card--assignee { grid-column: 10 / 13; grid-row: 2; }
.page-soc-dashboard .card--volume   { grid-column: 7 / 13;  grid-row: 3; }
.page-soc-dashboard .card--priority { grid-column: 7 / 13;  grid-row: 4; }
/* Keep the donut/goofy boxes the same height regardless of legend length. */
.page-soc-dashboard .card--customer, .page-soc-dashboard .card--assignee { min-height: 258px; }

/* ─── Cards ─────────────────────────────────────────────────────── */
.page-soc-dashboard .card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px 16px 16px; }
.page-soc-dashboard .card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.page-soc-dashboard .card-head h3 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text); }
.page-soc-dashboard .card-sub { font-size: 12px; color: var(--faint); }

/* ─── Stat tiles ────────────────────────────────────────────────── */
.page-soc-dashboard .stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.page-soc-dashboard .stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.page-soc-dashboard .stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--text); }

/* ─── Donut charts ──────────────────────────────────────────────── */
.page-soc-dashboard .donut-block { display: flex; flex: 1; align-items: center; gap: 16px; }
.page-soc-dashboard .donut-wrap { position: relative; flex: none; width: 152px; height: 152px; }
.page-soc-dashboard .donut { width: 152px; height: 152px; }
.page-soc-dashboard .donut circle { transition: stroke-dasharray .4s ease; }
.page-soc-dashboard .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.page-soc-dashboard .donut-total { font-family: var(--font-display); font-size: 29px; font-weight: 700; color: var(--text); line-height: 1; }
.page-soc-dashboard .donut-cap { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.page-soc-dashboard .donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.page-soc-dashboard .donut-legend li { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 9px; font-size: 12.5px; }
.page-soc-dashboard .donut-legend .dot { width: 11px; height: 11px; border-radius: 2px; }
.page-soc-dashboard .lg-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-soc-dashboard .lg-count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Volume chart (bars + y-axis scale + flowing trend line) ───── */
/* The card's mode toggle: raised across the board's window, or resolved per calendar month. Pushed to
   the right of the head so it never competes with the heading or with the span the ticked mode names
   beside it. The whole label is the hit target, so the words are as clickable as the box. */
.page-soc-dashboard .vol-mode { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.page-soc-dashboard .vol-mode:hover { color: var(--text); }
.page-soc-dashboard .vol-mode input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; cursor: pointer; }
/* What the chart couldn't draw, and why (a failed read, a capped scan) — sits above the plot rather
   than inside it, so it can't be mistaken for a data label. */
.page-soc-dashboard .vol-note { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--faint); }

/* The wrapper hosts a y-axis gutter and the gridlines. The gridline overlay is anchored to the plot
   area: top = .vol-chart padding-top (14px); bottom = the x-axis label row (.vol-label height 12px +
   margin-top 5px = 17px); left = the tick gutter (30px). Keep these offsets in sync with .vol-chart /
   .vol-label below. */
.page-soc-dashboard .vol-chart-wrap { position: relative; padding-left: 30px; }
.page-soc-dashboard .vol-scale { position: absolute; left: 0; right: 0; top: 14px; bottom: 17px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.page-soc-dashboard .vol-grid-row { display: flex; align-items: center; height: 0; }
.page-soc-dashboard .vol-tick { flex: none; width: 30px; padding-right: 7px; text-align: right; font-size: 10px; line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-soc-dashboard .vol-grid-line { flex: 1; border-top: 1px dashed var(--line); opacity: .7; }

.page-soc-dashboard .vol-chart { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 14px; }
.page-soc-dashboard .vol-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.page-soc-dashboard .vol-bar-wrap { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.page-soc-dashboard .vol-count { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.page-soc-dashboard .vol-bar { width: 64%; min-height: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-line)); border-radius: 2px 2px 0 0; transition: height .4s ease; }
.page-soc-dashboard .vol-label { font-size: 10px; color: var(--faint); margin-top: 5px; white-space: nowrap; height: 12px; }

/* ─── Horizontal bars (priority / status) ───────────────────────── */
.page-soc-dashboard .hbars { display: flex; flex-direction: column; gap: 11px; }
.page-soc-dashboard .hbar-row { display: grid; grid-template-columns: 100px 1fr 36px 38px; align-items: center; gap: 9px; font-size: 12.5px; }
.page-soc-dashboard .hbar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-soc-dashboard .hbar-track { height: 9px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.page-soc-dashboard .hbar-fill { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.page-soc-dashboard .hbar-count { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.page-soc-dashboard .hbar-pct { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ─── SLA meters ────────────────────────────────────────────────── */
.page-soc-dashboard .meter { margin-bottom: 14px; }
.page-soc-dashboard .meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.page-soc-dashboard .meter-label { font-size: 13px; color: var(--muted); }
.page-soc-dashboard .meter-value { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.page-soc-dashboard .meter-track { height: 9px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.page-soc-dashboard .meter-fill { height: 100%; background: var(--accent); transition: width .4s ease; }

/* ─── Live queue (primary left column) — a fixed-size box; the list scrolls inside it ───────────── */
.page-soc-dashboard .card--queue { position: relative; overflow: hidden; align-self: stretch; padding: 0; }
/* The inner is absolutely positioned (inset:0) so the number of incident rows can NEVER inflate the
   grid row. The card instead takes its height from the shorter right-hand column beside it (via
   align-self:stretch across rows 2–4) and the list scrolls within — so the queue's bottom always lines
   up with the bottom of the board, whether there are 3 incidents or 300. */
.page-soc-dashboard .queue-inner { position: absolute; inset: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; }
/* Queue filters. A fixed row between the head and the scroller, so it stays put while the list scrolls
   under it and never inflates the card, since .queue-inner is inset:0 and the scroller takes what is left. */
.page-soc-dashboard .queue-filters {
    display: flex;
    /* flex-start, not center: an open menu makes its group tall, and the search box and Clear beside it
       should stay on the top line with the triggers rather than drift to the middle of the panel. */
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* The three multi-select groups. Their panel expands INLINE, on its own line beneath the triggers,
   rather than hanging off the button it belongs to: .card--queue is a fixed box with overflow:hidden
   (the list scrolls inside it), which clips an absolutely positioned .pop exactly as .content .panel
   does on the queue pages (§26/§38). Open, it takes its space from the scroller below, which is what a
   scroller is for. The wrapper carries .tb-pop as well, so the shared document-level dismiss gate (§27)
   can tell a press on a trigger or inside the panel from one that should close the menu. */
.page-soc-dashboard .q-menus {
    flex: 3 1 330px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.page-soc-dashboard .q-filter-menu {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    cursor: pointer;
}
.page-soc-dashboard .q-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-soc-dashboard .q-menu-chev { flex: none; width: 12px; height: 12px; opacity: .7; }
.page-soc-dashboard .q-filter-menu:hover { border-color: var(--accent-line); color: var(--text); }
/* Ticked and open are different states and both have to read: a filter that is narrowing the queue keeps
   its accent whether its menu is open or shut, so the reader can see a group is on without opening it. */
.page-soc-dashboard .q-filter-menu.is-on { border-color: var(--accent-line); color: var(--text); }
.page-soc-dashboard .q-filter-menu.is-open { border-color: var(--accent-line); }
.page-soc-dashboard .q-filter-menu.is-open .q-menu-chev { transform: rotate(180deg); }

/* Inherits the shared .pop surface (components.css) and overrides only its placement: static and
   full-width instead of an absolute drop, laid out in columns so a long customer list stays a few rows
   rather than a scroll the height of the card. */
.page-soc-dashboard .q-pop {
    position: static;
    flex: 1 1 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px 6px;
    max-height: 170px;
    overflow-y: auto;
    border-radius: var(--radius-sm);
}
.page-soc-dashboard .q-pop .pop-item { min-width: 0; }
.page-soc-dashboard .q-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.page-soc-dashboard .q-filter {
    min-width: 0;
    flex: 1 1 110px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: 400 12px var(--font-body);
}
/* The search box earns more of the row than the three selects beside it. */
.page-soc-dashboard .q-filter-search { flex: 2 1 150px; }
.page-soc-dashboard .q-filter:focus { outline: none; border-color: var(--accent-line); }
.page-soc-dashboard .q-filter::placeholder { color: var(--faint); }
/* The true-positive tick. flex: 0 0 auto so it costs the row only the width of its own label: the
   search box and the three groups keep the share of the line they had, and the card's width is the
   grid's either way. nowrap + line-height:1 keep it exactly as tall as the buttons beside it, so
   adding it can't push the row onto a second line and take a queue row with it. */
.page-soc-dashboard .q-filter-tick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.page-soc-dashboard .q-filter-tick input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.page-soc-dashboard .q-filter-tick:hover { border-color: var(--accent-line); }
/* On is the same accent the menu triggers carry, so one glance says which filters are narrowing the queue. */
.page-soc-dashboard .q-filter-tick.is-on { border-color: var(--accent-line); }

.page-soc-dashboard .q-filter-clear {
    flex: 0 0 auto;
    color: var(--muted);
    cursor: pointer;
}
.page-soc-dashboard .q-filter-clear:hover { border-color: var(--accent-line); color: var(--text); }

/* On the wall display there is room for the whole row on one line and no mouse to use it with, so the
   filters are still there but out of the way rather than competing with the board. */
.page-soc-dashboard .soc-ops.is-fs .queue-filters { opacity: .55; transition: opacity .2s ease; }
.page-soc-dashboard .soc-ops.is-fs .queue-filters:hover,
.page-soc-dashboard .soc-ops.is-fs .queue-filters:focus-within,
/* An open menu is full brightness whatever the pointer is doing: :focus-within alone can't carry it,
   since a browser that leaves a pressed button unfocused would fade the panel the reader just opened. */
.page-soc-dashboard .soc-ops.is-fs .queue-filters.is-open { opacity: 1; }

/* What the list on screen left out. Above the scroller rather than inside it, so it cannot be mistaken
   for a row, and it takes its space from the scroller like the filters do. */
.page-soc-dashboard .queue-note { margin: 0 0 8px; font-size: 11.5px; line-height: 1.45; color: var(--faint); }

.page-soc-dashboard .queue-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.page-soc-dashboard .queue-scroll::-webkit-scrollbar { width: 8px; }
.page-soc-dashboard .queue-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.page-soc-dashboard .queue-scroll::-webkit-scrollbar-track { background: transparent; }
/* Fixed layout + per-column widths so the six columns always fit the card and never spill; long
   cells clip with an ellipsis rather than widening the table. */
.page-soc-dashboard .queue-table { font-size: 13px; table-layout: fixed; width: 100%; }
.page-soc-dashboard .queue-table th, .page-soc-dashboard .queue-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sticky header so the column labels stay put while the rows scroll underneath. */
.page-soc-dashboard .queue-table thead th { background: var(--surface); padding: 9px 10px; position: sticky; top: 0; z-index: 1; }
.page-soc-dashboard .queue-table tbody td { padding: 6px 10px; vertical-align: middle; }
/* Only the Summary (col 2) may clip — it has no fixed width and soaks up whatever's left. Key and
   Status are sized to always show in full; Pri is one letter and Analyst is a single avatar. */
.page-soc-dashboard .queue-table th:nth-child(1), .page-soc-dashboard .queue-table td:nth-child(1) { width: 96px; }   /* Key — always shown */
.page-soc-dashboard .queue-table th:nth-child(3), .page-soc-dashboard .queue-table td:nth-child(3) { width: 46px; }   /* Pri — single letter */
.page-soc-dashboard .queue-table th:nth-child(4), .page-soc-dashboard .queue-table td:nth-child(4) { width: 162px; }  /* Status — always shown */
.page-soc-dashboard .queue-table th:nth-child(5), .page-soc-dashboard .queue-table td:nth-child(5) { width: 104px; }  /* Customer */
.page-soc-dashboard .queue-table th:nth-child(6), .page-soc-dashboard .queue-table td:nth-child(6) { width: 92px; }   /* Analyst — wide enough that the header isn't clipped to "anal…" */
.page-soc-dashboard .q-summary { color: var(--muted); }
.page-soc-dashboard .q-key { text-overflow: clip; }   /* never show an ellipsis on the key */
.page-soc-dashboard .q-pri, .page-soc-dashboard .q-analyst { text-align: center; overflow: visible; }
.page-soc-dashboard .q-analyst .user-avatar { margin: 0 auto; }   /* centre the fixed-width puck in its column */
.page-soc-dashboard .q-unassigned { color: var(--faint); }

/* High/critical incidents get a red box drawn around the whole row so they're impossible to miss.
   The table uses border-collapse, so a 2px border on the cells wins over the 1px row separators and
   the four edges collapse into one clean rectangle. The selectors carry `tbody tr` so they out-rank
   the admin-kit base rules (`.data-table tbody td` / `tbody tr:last-child td`) that would otherwise
   keep the 1px bottom separator — without that, the box's bottom edge goes missing. */
/* The red frame slowly breathes brighter and back — a soft border-only pulse, nothing inside the box. */
.page-soc-dashboard .queue-table tbody tr.q-row-alert td {
    border-top: 2px solid #DC3232; border-bottom: 2px solid #DC3232;
    background: rgba(220, 50, 50, .07);
    animation: q-alert-glow 3.2s ease-in-out infinite;
}
.page-soc-dashboard .queue-table tbody tr.q-row-alert td:first-child { border-left: 2px solid #DC3232; }
.page-soc-dashboard .queue-table tbody tr.q-row-alert td:last-child { border-right: 2px solid #DC3232; }
@keyframes q-alert-glow { 0%, 100% { border-color: #DC3232; } 50% { border-color: #ff6a6a; } }

/* Priority chip — a single letter on its own severity colour scale (fixed hexes so it reads the same
   in light and dark). Critical = dark red · High = red · Medium = orange · Low = yellow · Info = light blue. */
.page-soc-dashboard .pri-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; font-size: 12px; font-weight: 700; line-height: 1;
}
.page-soc-dashboard .pri-crit { background: #8B1A1A; color: #fff; }
.page-soc-dashboard .pri-high { background: #DC3232; color: #fff; }
.page-soc-dashboard .pri-med  { background: #E67514; color: #fff; }
.page-soc-dashboard .pri-low  { background: #E3B23C; color: #1c1a12; }
.page-soc-dashboard .pri-info { background: #8FCDEB; color: #0d3549; }
.page-soc-dashboard .pri-none { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* Status chip — an outlined lozenge tinted with its own lane colour, one colour per status so the
   Status column reads as a key at a glance (blue = being worked, amber = with the customer, violet =
   with us, red = escalated, green = closed out, grey = new / cancelled). Each lane declares two hexes:
   --st-c is tuned for the dark theme, --st-d is the darker variant the light theme swaps in — a single
   mid-tone can't hold contrast against both a dark and a white surface. The lane classes come from
   StatusKey() in SocDashboard.razor.cs, which buckets Jira's open-ended status names by keyword. */
.page-soc-dashboard .status-chip {
    display: inline-block; max-width: 100%; box-sizing: border-box;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.55;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--st-c); border: 1px solid var(--st-c);
    background: color-mix(in srgb, var(--st-c) 15%, transparent);
}
html[data-theme="light"] .page-soc-dashboard .status-chip {
    color: var(--st-d);
    border-color: color-mix(in srgb, var(--st-d) 45%, transparent);
    background: color-mix(in srgb, var(--st-d) 11%, transparent);
}
.page-soc-dashboard .st-progress  { --st-c: #4D9FFF; --st-d: #1F5FD0; }   /* Work in progress · Investigating */
.page-soc-dashboard .st-customer  { --st-c: #E3B23C; --st-d: #8A6209; }   /* Waiting for customer */
.page-soc-dashboard .st-analyst   { --st-c: #C084FC; --st-d: #6D28D9; }   /* Waiting for support (us) */
.page-soc-dashboard .st-escalated { --st-c: #FF6B6B; --st-d: #C22B2B; }   /* Escalated */
.page-soc-dashboard .st-done      { --st-c: #3DDC97; --st-d: #0B7C70; }   /* Resolved · Closed · Done */
.page-soc-dashboard .st-new       { --st-c: #8FA3B0; --st-d: #4A5A66; }   /* Open · New · To Do */
.page-soc-dashboard .st-cancelled { --st-c: #7B858A; --st-d: #5C666B; }   /* Cancelled · Won't do */

/* ─── Tone helpers ──────────────────────────────────────────────── */
.page-soc-dashboard .tone-good { color: var(--good); }
.page-soc-dashboard .tone-warn { color: var(--warn); }
.page-soc-dashboard .tone-bad  { color: var(--bad); }
.page-soc-dashboard .tone-crit { color: var(--crit); }
.page-soc-dashboard .hbar-fill.tone-good { background: var(--good); }
.page-soc-dashboard .hbar-fill.tone-warn { background: var(--warn); }
.page-soc-dashboard .hbar-fill.tone-bad  { background: var(--bad); }
.page-soc-dashboard .hbar-fill.tone-crit { background: var(--crit); }
.page-soc-dashboard .hbar-fill.tone-neutral { background: var(--accent); }
.page-soc-dashboard .meter-fill.tone-good { background: var(--good); }
.page-soc-dashboard .meter-fill.tone-warn { background: var(--warn); }
.page-soc-dashboard .meter-fill.tone-bad  { background: var(--bad); }

/* ─── Loading skeletons ─────────────────────────────────────────── */
.page-soc-dashboard .sk-donut { width: 152px; height: 152px; border-radius: 50%; flex: none; }
.page-soc-dashboard .sk-queue-row { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.page-soc-dashboard .sk-queue-row:last-child { border-bottom: none; }
.page-soc-dashboard .sk-bar-row { margin-bottom: 13px; }
.page-soc-dashboard .sk-bar-row:last-child { margin-bottom: 0; }

/* ─── Goofy mode ────────────────────────────────────────────────── */
.page-soc-dashboard .goofy-toggle {
    position: absolute; bottom: 8px; right: 10px; z-index: 5;
    width: 15px; height: 15px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2);
    opacity: .28; cursor: pointer; transition: opacity .2s ease, transform .2s ease;
}
.page-soc-dashboard .goofy-toggle:hover { opacity: .9; transform: scale(1.2); }

/* Goofy mode: the black box fills the ENTIRE card (edge to edge, inside the border) so the area the
   pucks bounce in is exactly the box the user sees; the header floats on top. */
.page-soc-dashboard .card--assignee.goofy { position: relative; overflow: hidden; }
.page-soc-dashboard .card--assignee.goofy .card-head { position: relative; z-index: 2; margin-bottom: 0; }
.page-soc-dashboard .dvd-box {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    box-sizing: border-box; background: #000;
    transition: box-shadow .2s ease;
}
.page-soc-dashboard .dvd-box.corner-hit { animation: dvd-flash .7s ease; }
@keyframes dvd-flash {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: inset 0 0 0 3px #ffd54f, inset 0 0 60px rgba(255,213,79,.45); }
}
/* NB: .dvd-puck and .dvd-corners are created in JavaScript, so they can't be styled from this scoped
   sheet (they'd lack the scope attribute). Their rules live in wwwroot/app.css (global). */

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .page-soc-dashboard .queue-table tbody tr.q-row-alert td { animation: none; border-color: #DC3232; }
}

/* ─── Fullscreen (wall display) ─────────────────────────────────── */
.page-soc-dashboard .soc-ops.is-fs { height: 100vh; overflow-y: auto; padding: 22px 30px; background: var(--bg); }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1250px) {
    /* Stack: the queue is no longer a full-height side column — everything flows in source order. It's
       now alone in its row with no in-flow content (the inner is absolute), so give it a fixed box
       height to scroll within. */
    .page-soc-dashboard .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-soc-dashboard .card--queue    { grid-column: 1 / -1;  grid-row: auto; height: 460px; }
    .page-soc-dashboard .card--customer { grid-column: 1 / 7;   grid-row: auto; }
    .page-soc-dashboard .card--assignee { grid-column: 7 / 13;  grid-row: auto; }
    .page-soc-dashboard .card--volume   { grid-column: 1 / -1;  grid-row: auto; }
    .page-soc-dashboard .card--priority { grid-column: 1 / -1;  grid-row: auto; }
}
@media (max-width: 820px) {
    .page-soc-dashboard .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-soc-dashboard .card--customer, .page-soc-dashboard .card--assignee,
    .page-soc-dashboard .card--priority { grid-column: 1 / -1; grid-row: auto; }
    .page-soc-dashboard .donut-block { flex-direction: column; align-items: stretch; }
    .page-soc-dashboard .donut-wrap { align-self: center; }
}