:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --border: #e2e5ea;
  --text: #1c2230;
  --muted: #4b5563; /* 7:1 on white. Was #6b7280 = 4.83:1 */
  --accent: #2563eb;
  --accent-weak: #eaf0fe;
  --ok: #16a34a;
  --ok-weak: #e8f8ee;
  --warn: #d97706;
  --warn-weak: #fdf2e2;
  --danger: #dc2626;
  --danger-weak: #fdeaea;
  --purple: #7c3aed;
  --purple-weak: #f1e9fe;
  --teal: #0d9488;
  --teal-weak: #e3f7f4;
  --radius: 10px;
  --brand-gradient: linear-gradient(90deg, #2563eb, #7c3aed);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  direction: rtl;
}

header.app-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

header.app-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 3px;
  background: var(--brand-gradient);
}

header.app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

header.app-header .brand-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

header.app-header h1 {
  font-size: 18px;
  margin: 0;
}

header.app-header .version {
  color: var(--muted);
  font-size: 13px;
}

nav.tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

nav.tabs button {
  border: none;
  background: none;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

nav.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

main {
  max-width: 1080px;
  margin: 24px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.panel h2 {
  font-size: 15px;
  margin: 0 0 14px;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

label { font-size: 13px; color: var(--muted); }

input[type="text"], input[type="date"], select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
}

button.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
}

button.primary:disabled { opacity: 0.5; cursor: default; }

button.secondary {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

th { color: var(--muted); font-weight: 600; }

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.badge.ok { background: #e8f8ee; color: var(--ok); }
.badge.warn { background: #fdf2e2; color: var(--warn); }
.badge.danger { background: #fdeaea; color: var(--danger); }

.stackbar {
  display: flex;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.stackbar span { display: block; height: 100%; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-inline-end: 5px;
  vertical-align: middle;
}

.muted { color: var(--muted); font-size: 13px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A Hebrew drop target, in place of the browser's English file control. */
.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--border); border-radius: var(--radius); background: #fafbfd;
  padding: 22px 16px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone:focus-within { border-color: var(--accent); background: #f5f8ff; }
.drop-zone.dragging { border-color: var(--accent); background: #eef4ff; }
.drop-zone.has-files { border-style: solid; border-color: #16a34a; background: #f4fbf6; }
.drop-zone-icon { font-size: 22px; color: var(--muted); }
.drop-zone-main { font-size: 14px; font-weight: 600; color: var(--text); }
.drop-zone-sub { font-size: 11.5px; color: var(--muted); }
.file-list { font-size: 13px; color: var(--muted); margin-top: 10px; }
.file-list-head { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.file-list-item { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid var(--border); }
.file-list-name { overflow-wrap: anywhere; }
.file-list-size { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

.empty-state {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  color: var(--muted);
  font-size: 14px;
}
.loader.small { padding: 12px; font-size: 12.5px; }
.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid var(--accent-weak);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
.loader.small .spinner { width: 14px; height: 14px; border-width: 2px; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

.hidden { display: none !important; }

/* ---------- Operational dashboard ---------- */
.panel-hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: -8px 0 14px;
  line-height: 1.5;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.kpi-card {
  border-radius: var(--radius);
  padding: 14px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-card .kpi-value { font-size: 24px; font-weight: 700; }
.kpi-card .kpi-label { font-size: 12.5px; opacity: 0.92; }

.kpi-card.c-blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.kpi-card.c-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.kpi-card.c-teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.kpi-card.c-amber { background: linear-gradient(135deg, #d97706, #f59e0b); }
.kpi-card.c-rose { background: linear-gradient(135deg, #dc2626, #ef4444); }
/* A fifth measurement colour that is NOT in the warning family. The centre's
   average call length is a fact about the queue, not a red flag about the
   centre, and a red tile reads as an alarm before anyone gets to the label. */
.kpi-card.c-indigo { background: linear-gradient(135deg, #4338ca, #6366f1); }

/* The flat, value-coloured tile: white card, thin rail, colour from the
   number. Same pattern as .dash-kpi on the live efficiency dashboard, so the
   two halves of the system read the same way. */
.kpi-card.flat {
  background: var(--panel, #fff);
  color: var(--text);
  border: 1px solid var(--border);
  border-top: 4px solid #cbd2dd;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.kpi-card.flat .kpi-value { font-variant-numeric: tabular-nums; }
.kpi-card.flat .kpi-label { color: var(--muted); opacity: 1; font-weight: 600; }
.kpi-card.flat.st-ok { border-top-color: #16a34a; }
.kpi-card.flat.st-warn { border-top-color: #d97706; }
.kpi-card.flat.st-crit { border-top-color: #dc2626; }
.kpi-card.flat.st-na { border-top-color: #cbd2dd; }
.kpi-card.flat.st-neutral { border-top-color: #94a3b8; }
.kpi-card.flat.st-crit .kpi-value { color: #b91c1c; }
.kpi-card.flat.st-warn .kpi-value { color: #b45309; }

.insight-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 18px;
}
.insight-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.insight-section h3 {
  font-size: 14px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 700px) {
  .insight-columns { grid-template-columns: minmax(0, 1fr); }
}

.mini-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.mini-table th, .mini-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.mini-table th { color: var(--muted); font-weight: 600; }

.ss-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.ss-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.table-scroll { overflow-x: auto; }
.table-scroll table.mini-table { white-space: nowrap; }
.table-scroll table.mini-table th, .table-scroll table.mini-table td { padding: 6px 10px; }

.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 90px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.trend-chart .bar {
  flex: 0 0 auto;
  width: 8px;
  min-height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px 2px 0 0;
}

.empty-state.small { padding: 12px; font-size: 12.5px; }

.badge.info { background: var(--accent-weak); color: var(--accent); }

/* ---------- Operational dashboard: view switcher ---------- */
.op-switch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.view-switch { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.op-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.op-range-label { font-weight: 700; color: var(--muted); }
.op-range label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.op-range input[type="date"] { padding: 5px 8px; font-size: 13px; }
.op-range button { padding: 6px 10px; font-size: 12.5px; }
.op-window-chip { margin-inline-start: auto; background: var(--accent-weak); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.op-window-chip.all { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
@media (max-width: 720px) { .op-window-chip { margin-inline-start: 0; } }
.view-switch button {
  border: none;
  background: none;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
}
.view-switch button.active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.op-view { display: flex; flex-direction: column; gap: 20px; }

/* agent-efficiency mini table (guided view) */
.agent-eff-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.agent-eff-table th, .agent-eff-table td { padding: 7px 9px; text-align: right; border-bottom: 1px solid var(--border); }
.agent-eff-table th { color: var(--muted); font-weight: 600; }
.occ-bar { width: 74px; height: 7px; border-radius: 4px; background: var(--border); display: inline-block; overflow: hidden; vertical-align: middle; margin-inline-end: 6px; }
.occ-bar > span { display: block; height: 100%; background: var(--brand-gradient); }
.score-pill { display: inline-block; min-width: 32px; text-align: center; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; }
/* Owner ruling: colour never means "good" or "bad" on a person. The pill
   keeps the number and the neutral chrome the rest of the app uses for a
   value that carries no judgement. */
.score-pill.neutral { background: var(--bg); color: var(--text); border: 1px solid var(--border); }

/* ---------- Mission control (dense grid) ---------- */
.mc-tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mc-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; }
.mc-tile .v { font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mc-tile .l { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.mc-tile.warn .v { color: var(--warn); } .mc-tile.danger .v { color: var(--danger); } .mc-tile.ok .v { color: var(--ok); } .mc-tile.tech .v { color: var(--purple); }
.mc-grid3 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 900px) { .mc-grid3, .mc-grid2 { grid-template-columns: minmax(0, 1fr); } }
.mc-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.mc-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--border); background: #fafbfd; font-size: 11.5px; }
.mc-panel-h span { color: var(--muted); font-size: 11.5px; }
.mc-panel table { font-size: 11.5px; }
.mc-panel th, .mc-panel td { padding: 5px 8px; }
/* The panel body needs its own padding and a floor: a short stack bar used
   to collapse the box to nothing at all. */
.mc-panel-body { padding: 10px; min-height: 42px; }
.mc-inline-legend { padding: 0 10px 10px; margin: 0; }
.mc-spark { display: flex; align-items: flex-end; gap: 1px; height: 60px; padding: 8px; }
.mc-spark i { display: block; width: 5px; background: var(--brand-gradient); border-radius: 1px 1px 0 0; }

/* ---------- Leaderboard ---------- */
/* minmax(0, 1fr), not 1fr: a grid track defaults to its content's minimum
   width, so the wide leaderboard table refused to shrink and pushed the
   320px side panel off the right edge of the page. The table scrolls inside
   its own track instead. */
.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .lb-layout { grid-template-columns: minmax(0, 1fr); } }
.lb-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lb-toolbar select, .lb-toolbar input { font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; }
.lb-toolbar input[type="search"] { flex: 1; min-width: 160px; }
.lb-toolbar .sortnote { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.lb-head { padding: 14px 16px 0; }
/* The two sample/scope switches. They read as controls, not as labels, so a
   reader can tell the list is filtered and can widen it. */
.lb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.lb-toggle input { accent-color: var(--accent); cursor: pointer; }
.lb-count { margin-inline-start: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lb-main table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-main th, .lb-main td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.lb-main th { color: var(--muted); font-weight: 600; font-size: 12px; }
.lb-main tr.lb-row { cursor: pointer; }
.lb-main tr.lb-row:hover td { background: #f7f9fc; }
.lb-main tr.lb-row.selected td { background: var(--accent-weak); }
.lb-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 14px; }
.lb-side .panel { padding: 14px 16px; }
.lb-side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.lb-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.lb-kv span:first-child { color: var(--muted); }

/* ---------- Clickable employee rows (drill-down) ---------- */
.mini-table tr.emp-row,
.agent-eff-table tr.emp-row { cursor: pointer; }
.mini-table tr.emp-row:hover td,
.agent-eff-table tr.emp-row:hover td { background: #f7f9fc; }

/* ---------- Employee day drill-down modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 34, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-panel {
  background: var(--panel);
  border-radius: var(--radius);
  width: min(920px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0 0 2px; font-size: 16px; }
.modal-head select { font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Stop scroll chaining: once this box has scrolled to its end the wheel
     used to carry on scrolling the page underneath, which moved the list
     behind the dialog instead of its contents and made the dialog feel
     unusable. */
  overscroll-behavior: contain;
}

/* Children of a scrolling flex column must not be allowed to shrink.
   `.day-accordion` sets `overflow: hidden` (for its rounded corners), which
   makes it a scroll container, which makes its `min-height: auto` resolve to
   ZERO. As a flex item with the default `flex-shrink: 1` it was therefore
   squashed to fit the panel instead of overflowing it: measured on a 5-day
   range, the open day rendered 462px tall around 727px of content and each
   collapsed header 29px tall instead of 44px. Because nothing overflowed,
   `scrollHeight === clientHeight` and the browser had nothing to scroll - the
   wheel did nothing inside the dialog and the content below the fold was
   unreachable without closing and reopening it. */
.modal-body > * { flex-shrink: 0; }
/* The backdrop covers the page, so a wheel event over it has nothing of its
   own to scroll and would otherwise scroll the page behind it. */
.modal-backdrop { overscroll-behavior: contain; }
/* Belt and braces: while any dialog is open the page itself does not scroll.
   `position: fixed` keeps the scroll position instead of jumping to the top,
   and app.js restores the offset on close. */
body.modal-open {
  position: fixed;
  inset-inline: 0;
  overflow: hidden;
  width: 100%;
}
.dd-section h3 { font-size: 13.5px; margin: 0 0 8px; }
.dd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 8px; }
.dd-kpis .kpi-card { padding: 10px 12px; }
.dd-kpis .kpi-card .kpi-value { font-size: 18px; }
.dd-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.dd-table th, .dd-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.dd-table th { color: var(--muted); font-weight: 600; }

/* ---------- Column headings that survive scrolling ----------
   These tables are read by scrolling down a long list of rows, and a row of
   numbers whose column headings have scrolled away is unreadable - the
   reader has to scroll back up to find out which column is which. The
   heading row sticks to the top of whatever box is doing the scrolling.

   `background` is not optional: a sticky cell is painted over the rows
   passing beneath it, and a transparent one lets them show through. The
   border is drawn with box-shadow rather than border-bottom because a
   border on a sticky cell scrolls away with the table's own border
   collapsing, leaving the heading floating over the rows with no edge. */
.dd-table thead th,
.mini-table thead th,
.agent-eff-table thead th,
.lb-main thead th,
.panel table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}
/* The section heading inside a scrolling modal sticks too, so it is always
   clear which table the rows belong to. It sits above the column headings. */
.modal-body .dd-section > h3 {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
  padding: 6px 0 6px;
  margin: 0 0 4px;
}
.modal-body .dd-section > h3 ~ * .dd-table thead th,
.modal-body .dd-section .dd-table thead th { top: 30px; }
.dd-explanation { color: var(--muted); font-size: 11.5px; }

/* ---------- Closed shift breakdown modal ---------- */
.cat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cat-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  text-align: right;
  background: #fff;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.cat-card:hover { box-shadow: 0 3px 10px rgba(28,34,48,0.08); }
.cat-card .cat-head { display: flex; align-items: center; gap: 8px; }
.cat-card .cat-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cat-card .cat-name { font-size: 13px; font-weight: 700; color: var(--text); }
.cat-card .cat-total { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-card .cat-total .dec { font-size: 12px; font-weight: 600; color: var(--muted); }
.cat-card .cat-sub { font-size: 11.5px; color: var(--muted); }
.cat-card .cat-check { margin-inline-start: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cat-card .cat-check svg { width: 12px; height: 12px; color: #fff; }

.recon-strip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); background: var(--ok-weak); border: 1px solid #bfe6cc; border-radius: 8px; padding: 8px 14px; }
.recon-strip.mismatch { background: var(--warn-weak); border-color: #f3d9a8; }
.recon-strip b { color: var(--text); font-variant-numeric: tabular-nums; }
.recon-strip .eq-check { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 700; }
.recon-strip.mismatch .eq-check { color: var(--warn); }
.recon-strip .eq-check svg { width: 13px; height: 13px; }

.seg-row {
  display: grid;
  grid-template-columns: 10px 90px minmax(0, 1fr) 90px 90px 80px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  transition: background .12s, opacity .12s;
}
.seg-row .seg-dot { width: 9px; height: 9px; border-radius: 50%; }
.seg-row .seg-status { font-weight: 600; }
.seg-row .seg-note { color: var(--muted); font-size: 11.5px; }
.seg-row .seg-time { font-family: "Segoe UI", monospace; font-size: 11.5px; color: var(--muted); }
.seg-row .seg-dur { font-family: "Segoe UI", monospace; font-size: 12px; font-weight: 600; text-align: left; }

/* ---------- Inline field explanations (hover tooltip) ---------- */
.field-label-row { display: inline-flex; align-items: center; gap: 5px; }
.info-icon { position: relative; width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--muted); font-size: 10px; /* glyph, not prose - exempt from the 11.5px floor */ font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; flex-shrink: 0; }
.info-icon .tooltip-bubble {
  /* The bubble must never be a hover target of its own. Once placeTooltip
     pins it to the viewport it can come to rest over ANOTHER "?" - the icons
     sit close together in a KPI row and in table headings - and the pointer,
     which is really over the bubble, then counts as hovering that second
     icon too. Two bubbles opened at once, overlapping and each cutting the
     other's text in half. Letting the pointer pass straight through means
     only the icon actually under the cursor ever opens. */
  pointer-events: none;
  display: none; position: absolute; z-index: 20; top: 22px; right: -8px;
  background: #1c2230; color: #fff; font-size: 12px; line-height: 1.5;
  border-radius: 7px; padding: 9px 12px; width: min(250px, 62vw); font-weight: 400;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); text-align: right;
  white-space: normal;
}
.info-icon:hover .tooltip-bubble,
.info-icon:focus .tooltip-bubble,
.info-icon:focus-visible .tooltip-bubble,
.info-icon.open .tooltip-bubble { display: block; }
/* A real control, not a decorative span: it takes focus, it shows that it
   has focus, and on a touch screen it is large enough to hit. */
.info-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-icon.open { background: var(--accent); color: #fff; }
@media (pointer: coarse) {
  .info-icon { width: 20px; height: 20px; font-size: 12px; }
}
/* The bubble is absolutely positioned and opens leftwards on this RTL page.
   On an icon that already sits near the left edge - the trailing columns of
   a wide table, or a panel's left side - it is flipped to open rightwards
   instead, so it is never cut off by the edge of its container. */
.info-icon.flip .tooltip-bubble { right: auto; left: -8px; }
/* A heading's explanation must not stretch the heading's own line. */
h2 .field-label-row, h3 .field-label-row { display: inline-flex; }

/* A finding is shown by its Hebrew name; several findings on one row read as
   a list. The raw engine code stays on the element's title attribute and
   never becomes the visible text. */
.reason-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.badge .field-label-row { gap: 4px; }
.badge .info-icon { width: 13px; height: 13px; font-size: 9px; background: rgba(0, 0, 0, 0.12); }

/* ---------- Employee drill-down: clickable KPIs + row highlighting ---------- */
/* A KPI card that is also a way in. Used by the employee drill-down and by
   the efficiency centre, so the rule is not scoped to either of them. */
.kpi-card.clickable { cursor: pointer; border: none; font-family: inherit; text-align: right; position: relative; }
.kpi-card.clickable.active { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,0.15); }
.kpi-card.clickable:hover { filter: brightness(1.06); }
.kpi-card .kpi-tap-hint { font-size: 9.5px; opacity: 0.85; margin-top: 3px; }
tr.row-highlight-net td { background: var(--ok-weak); }
tr.row-highlight-net td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.row-highlight-issue td { background: var(--danger-weak); }
tr.row-highlight-issue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.row-highlight-decision td { background: rgba(139, 92, 246, 0.12); }
tr.row-highlight-decision td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; }

/* ---------- Employee drill-down: multi-day accordion (data never mixes) ---------- */
.day-accordion { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.day-accordion-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fafbfd; cursor: pointer; border: none; width: 100%; font-family: inherit; text-align: right; }
.day-accordion-head .chevron { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; transition: transform .15s; }
.day-accordion.open .day-accordion-head .chevron { transform: rotate(90deg); }
.day-accordion-head .day-date { font-weight: 700; font-size: 13.5px; min-width: 100px; }
.day-accordion-head .day-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex: 1; }
.day-accordion-head .day-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.day-accordion-body { padding: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.day-accordion:not(.open) .day-accordion-body { display: none; }

/* ---------- Insights & conclusions ---------- */
.insight-card { display: flex; gap: 10px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 8px; }
.insight-card:last-child { margin-bottom: 0; }
.insight-card .dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.insight-card.CRITICAL { background: var(--danger-weak); border-color: rgba(220,38,38,0.25); }
.insight-card.CRITICAL .dot { background: var(--danger); }
.insight-card.WARNING { background: var(--warn-weak); border-color: rgba(217,119,6,0.25); }
.insight-card.WARNING .dot { background: var(--warn); }
.insight-card.INFO { background: var(--accent-weak); border-color: rgba(37,99,235,0.2); }
.insight-card.INFO .dot { background: var(--accent); }
.insight-card h4 { margin: 0 0 3px; font-size: 13.5px; }
.insight-card p { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.5; }

/* ================================================================
   Telephony efficiency (ACD) — tab 4
   Design rule for this whole block: colour marks POSITION IN A
   DISTRIBUTION, never "good" or "bad". No traffic lights on people,
   no red rows, no score pills. Context sits next to the number.
   ================================================================ */

/* Numbers are LTR runs inside RTL text; isolate them so "12:34" and
   "+1:08" never get re-ordered by the bidi algorithm. */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.eff-note {
  margin: 12px 0 0;
  padding: 9px 12px;
  background: var(--accent-weak);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  color: #1d4ed8;
  font-size: 12.5px;
  line-height: 1.6;
}

.eff-level { display: flex; flex-direction: column; gap: 20px; }

/* ---- breadcrumb + persistent centre context ---- */
.eff-nav-panel { padding: 12px 20px; }
.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.crumbs button {
  border: none; background: none; font-family: inherit; font-size: 13px;
  color: var(--accent); cursor: pointer; padding: 4px 7px; border-radius: 6px;
}
.crumbs button:hover { background: var(--accent-weak); }
.crumbs .sep { color: var(--muted); font-size: 12px; }
.crumbs .current { font-weight: 700; padding: 4px 7px; }

.eff-context-strip {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
.eff-context-strip b { color: var(--text); }

/* ---- coverage / info strips (never red, never a verdict) ---- */
.eff-strip {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--border); background: #fafbfd;
  border-radius: 8px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.6; margin-top: 12px;
}
.eff-strip.partial { background: var(--warn-weak); border-color: #f3d9a8; }
#op-freshness-strip:not(:empty) { margin-bottom: 14px; }
/* A number withheld because the sample is too thin. Visibly a dash and
   not a zero, with the exact shortfall in its tooltip. */
.thin-sample { color: var(--muted); font-weight: 600; cursor: help; border-bottom: 1px dotted var(--border); }
/* "Nothing was measured here" - visibly not a pass and not a failure. */
.badge.neutral { background: #eef1f5; color: var(--muted); }
/* A value the engine supplied because the file did not carry it. Marked,
   never silently blended with what the file actually said. */
.repaired-value { color: #b45309; font-style: italic; }
/* What the chosen range actually holds, at the top of the drill-down. */
.dd-range-strip { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; background: #f7f8fa; }
.dd-range-line { font-size: 13px; line-height: 1.6; }
.dd-range-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dd-range-chip { display: flex; flex-direction: column; gap: 1px; text-align: right; font-family: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; color: var(--text); }
.dd-range-chip:hover { border-color: var(--accent); }
.dd-range-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dd-range-chip.has-issue { border-inline-start: 3px solid #d97706; }
.dd-range-chip-date { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-range-chip-nums { font-size: 11.5px; color: var(--muted); }
/* A shift that reaches into this day but is filed under another date. */
.dd-other-shift { border: 1px solid #f3d9a8; background: #fdf8ef; border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; }
.dd-other-shift-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 4px; }
.dd-other-shift-note { font-size: 11.5px; color: #b45309; border: 1px solid #f3d9a8; border-radius: 5px; padding: 1px 6px; cursor: help; }
/* A raw row whose shift is filed under a different date. */
.shift-elsewhere { color: #b45309; font-weight: 600; }
/* The date an exit actually happened, when it is not the shift's own date. */
.next-day-chip { display: inline-block; margin-inline-start: 6px; font-size: 11.5px; font-weight: 600;
  color: #1d4ed8; background: #eef4ff; border: 1px solid #c7d8fb; border-radius: 5px; padding: 0 6px; cursor: help;
  font-variant-numeric: tabular-nums; }
.eff-strip .eff-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 6px; flex: none; }
.eff-strip.partial .eff-strip-dot { background: var(--warn); }

.eff-callout {
  background: #fafbfd; border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 13px; font-size: 12.5px; line-height: 1.65; margin: 0 0 12px;
}

.seg-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.seg-divider::before, .seg-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }

/* ---- neutral badges (no valence) ---- */
.badge.neutral { background: #f1f3f7; color: var(--muted); font-weight: 600; }
.badge.soft { background: var(--warn-weak); color: #a16207; }

/* ---- distribution band: where this number sits in the comparison group ---- */
.dist-band { position: relative; display: inline-block; width: 92px; height: 10px; vertical-align: middle; margin-inline-start: 8px; }
.dist-band i { position: absolute; display: block; }
.dist-band .db-outer { top: 3px; height: 4px; background: #e6eaf1; border-radius: 2px; }
.dist-band .db-inner { top: 2px; height: 6px; background: #ccd6e5; border-radius: 2px; }
.dist-band .db-med { top: 0; width: 1.5px; height: 10px; background: #8a94a6; }
.dist-band .db-dot { top: 1px; width: 8px; height: 8px; margin-right: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.band-label { font-size: 11.5px; color: var(--muted); margin-inline-start: 6px; white-space: nowrap; }

/* ---- expected-vs-actual gap cell ---- */
.gap-btn {
  border: 1px solid var(--border); background: #fff; border-radius: 6px;
  padding: 3px 9px; font-family: inherit; font-size: 12.5px; color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.gap-btn:hover { border-color: #c3cad6; background: #f7f9fc; }
.gap-btn .gap-caret { color: var(--muted); font-size: 11.5px; }

/* ---- composition table ---- */
.split-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 7px; vertical-align: middle; }

/* ---- hour-of-day chart (hand-drawn inline SVG, no library) ---- */
.hour-chart-wrap { overflow-x: auto; padding-bottom: 4px; }
.eff-chart { display: block; width: 100%; min-width: 680px; height: auto; }
.eff-chart .grid { stroke: var(--border); stroke-width: 1; }
.eff-chart .grid.zero { stroke: #c9cfda; }
.eff-chart .ax { fill: var(--muted); font-size: 11.5px; font-family: "Segoe UI", Arial, sans-serif; }
.eff-chart .ax.dim { fill: #b8bec9; }
.eff-chart .axtitle { fill: var(--muted); font-size: 11.5px; font-weight: 600; font-family: "Segoe UI", Arial, sans-serif; }
.eff-chart .sparse-band { fill: #eef1f6; }
.eff-chart .bar { fill: #2563eb; opacity: 0.17; }
.eff-chart .bar.sparse { opacity: 0.09; }
.eff-chart .occ-line { fill: none; stroke: #2563eb; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.eff-chart .ref-line { fill: none; stroke: #7c3aed; stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linejoin: round; }
.eff-chart .occ-dot { fill: #2563eb; }
.eff-chart .occ-dot.sparse { fill: #fff; stroke: #2563eb; stroke-width: 1.5; }
.eff-chart .hover-band { fill: #2563eb; opacity: 0; }
.eff-chart .hover-band:hover { opacity: 0.05; }

/* ---- agent detail card ---- */
.agent-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.agent-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.eva-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .eva-grid { grid-template-columns: minmax(0, 1fr); } }
.eva-cell { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: #fff; }
.eva-cell .eva-label { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.eva-cell .eva-value { font-size: 21px; font-weight: 700; }
.eva-cell .eva-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.eva-cell.gap { background: #fafbfd; }

/* ---- the two LOGIN totals on the employee card ----
   Two numbers, one per source, with nothing between them: no gap figure,
   no tick, no colour. Colour here would be a verdict on a difference the
   screen deliberately does not compute. */
.login-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .login-tiles { grid-template-columns: minmax(0, 1fr); } }
.login-tile .v { font-size: 26px; }
.login-tile .v .unit { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.login-tile .v .unknown { font-size: 15px; font-weight: 600; color: var(--muted); }
.login-tile .l { font-size: 12px; margin-top: 6px; }
/* The source name, above the number — so which tile is which reads before
   the number does, not just below it (owner request, 15/09). */
.login-tile-src { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 4px; }

/* ---- "סה״כ במשמרת": raw entry-to-exit total, directly under the ---------
   "כניסות ויציאות" table it is summed from. The accent top border and the
   tight margin read as "this belongs to the table above", not as a new,
   separate panel - it deliberately sits inside #attendance-report-panel. */
.shift-span-total {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  background: #fafbfd;
}
.shift-span-total .v { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.shift-span-total .v .unit { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.shift-span-total .v .unknown { font-size: 15px; font-weight: 600; color: var(--muted); }
.shift-span-total .l { font-size: 12px; color: var(--muted); margin-top: 5px; }
.shift-span-total .partial-note { margin-top: 6px; font-size: 12px; color: #a16207; line-height: 1.5; }

/* six headline numbers read as two rows of three, not five-then-one */
#eff-centre-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { #eff-centre-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 460px) { #eff-centre-kpis { grid-template-columns: minmax(0, 1fr); } }

/* the "part of the range had no reference" marker on a gap cell: a footnote
   mark, deliberately not a badge and deliberately not coloured */
.cmp-mark { color: var(--muted); font-size: 12px; cursor: help; font-weight: 700; }

/* ---------- Unknown is not zero ----------
   A measure that was never determined is written out in words, in the
   muted voice the app uses for "no data", so it can never be mistaken for
   a measured 0 or for a cell that failed to render. */
.unknown-value { color: var(--muted); font-style: italic; cursor: help; }
.kpi-value.unknown { font-size: 20px; opacity: 0.92; }

/* ================================================================
   Agent row light + action line (efficiency tab)
   ----------------------------------------------------------------
   The only place on this app where a colour on a person's row means
   "ok / borderline / off" rather than "position in a distribution".
   It is an owner ruling and it is scoped to this one table: a light
   is a prompt to look at something, and the sentence beside it says
   what to look at, so the colour is never the whole message.
   ================================================================ */
.agents-table .light-cell { white-space: nowrap; }
.light-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-inline-end: 6px; cursor: help;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.light-dot.ok { background: var(--ok); }
.light-dot.warn { background: var(--warn); }
.light-dot.danger { background: var(--danger); }
/* No light at all: an empty ring, so "not measured" can never be mistaken
   for a measured green. */
.light-dot.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); }
.light-text { font-size: 11.5px; color: var(--muted); }
.light-text.ok { color: var(--ok); }
.light-text.warn { color: var(--warn); }
.light-text.danger { color: var(--danger); }

/* The measured value that earned a light keeps the light's colour, so the
   number and the dot are read as one statement. */
.num.light-warn { color: var(--warn); }
.num.light-danger { color: var(--danger); }

.agents-table .action-cell {
  white-space: normal; min-width: 260px; max-width: 380px;
  font-size: 12px; line-height: 1.5; color: var(--text);
}
.agents-table tr.light-row-danger td { background: rgba(220, 38, 38, 0.035); }
.agents-table tr.light-row-warn td { background: rgba(217, 119, 6, 0.03); }
.eff-context-row td { background: #fafbfd; font-weight: 600; }

/* The comparison band's marker, when the owner's green/amber/red applies to
   it. Without a level it keeps the neutral single-hue position ramp. */
.dist-band .db-dot.lit-ok { background: var(--ok); }
.dist-band .db-dot.lit-warn { background: var(--warn); }
.dist-band .db-dot.lit-danger { background: var(--danger); }
.band-label.lit-ok { color: var(--ok); }
.band-label.lit-warn { color: var(--warn); }
.band-label.lit-danger { color: var(--danger); }

/* A day the engine never measured has no bar to draw: an empty slot that
   says so, never a zero-height bar that reads as "nobody worked". */
.trend-chart .bar.unknown,
.mc-trend i.unknown {
  height: 100%; background: repeating-linear-gradient(135deg, var(--border) 0 3px, transparent 3px 6px);
  opacity: 0.55;
}

/* The owner's whole point is that the light and the sentence beside it are
   read together, so the sentence must not sit past the right-hand edge of a
   horizontally scrolling table. This table wraps instead of scrolling: nine
   columns fit, and the action line is the one that gets the slack. */
.agents-table { white-space: normal; table-layout: auto; }
.agents-table th, .agents-table td { white-space: nowrap; }
.agents-table .action-cell { white-space: normal; width: 30%; min-width: 190px; }
.agents-table td:nth-child(2) { white-space: normal; min-width: 108px; }
.agents-table th, .agents-table td { padding: 6px 7px; }
/* Nine columns and a sentence have to fit the panel without the sentence
   ending up off the edge, so the HEADINGS are what wraps - the values stay
   on one line, where a broken "12:34" would be unreadable. */
.agents-table th { white-space: normal; max-width: 92px; line-height: 1.3; vertical-align: bottom; }
.agents-table th:first-child, .agents-table th:last-child { max-width: none; }
.agents-table .dist-band { width: 52px; margin-inline-start: 4px; }
/* One line, clipped rather than wrapped: a wrapped position label grew its
   own cell and ran straight over the sentence in the column beside it. */
.agents-table .band-label {
  font-size: 11.5px; display: inline-block; max-width: 78px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}

/* Below this width nine columns and a sentence cannot both fit, and the
   sentence is the one the owner asked for. The position label drops out
   (its band, its colour and its tooltip all stay), and the light's word
   moves under its own dot. */
@media (max-width: 1200px) {
  .agents-table .light-text { display: block; margin-top: 2px; }
  .agents-table .band-label { display: none; }
  .agents-table .action-cell { min-width: 150px; }
}

/* The finding, restated at the top of the agent card: the same light and
   the same sentence the row carried, so opening a row opens on what was
   found rather than on a wall of numbers to interpret. */
.agent-verdict {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.agent-verdict .light-dot { margin-top: 4px; }
.agent-verdict.ok { background: var(--ok-weak); border-color: rgba(22,163,74,0.22); }
.agent-verdict.warn { background: var(--warn-weak); border-color: rgba(217,119,6,0.25); }
.agent-verdict.danger { background: var(--danger-weak); border-color: rgba(220,38,38,0.25); }
.agent-verdict-head { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.agent-verdict-say { font-size: 13px; line-height: 1.55; }
.agent-verdict-parts { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.agent-verdict-parts .vp.warn { color: var(--warn); }
.agent-verdict-parts .vp.danger { color: var(--danger); }
.agent-verdict-parts .vp-ref { color: var(--muted); }

/* ================================================================
   A wide table scrolls inside its own panel, never sideways with the
   whole page
   ----------------------------------------------------------------
   The efficiency screen already wrapped its tables in .table-scroll;
   every other panel handed the browser a bare <table>, so on a narrow
   window the document itself grew wider than the viewport and the
   header, the tabs and the panels all shifted off the right edge in
   this RTL layout. These are the containers those tables are drawn
   into, so one rule covers every render path into them.
   ================================================================ */
#imports-table,
#employee-daily-overview-table,
#status-durations,
#shifts-table,
#issues-table,
#lb-table,
#top10-wrap,
#op-issues-by-reason,
#op-issues-top-employees,
#op-tech-disconnects,
#op-consistent,
#op-inconsistent,
#op-status-breakdown,
#op-inactive,
#op-agent-efficiency,
#mc-top-issues,
#mc-issue-breakdown,
#mc-consistency,
#mc-status-breakdown,
#drilldown-body .dd-section > table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto;
}

/* The bubble is pinned to the window on hover (see placeTooltip in app.js),
   which is what lets it escape a scrolling table's clip box and stay inside
   both edges of the screen. It needs to sit above the modals too. */
.info-icon .tooltip-bubble { z-index: 1200; }

/* ---------- דיווח נוכחות: the entry/exit report table ----------
   Direction is the column a manager scans rather than reads, so it carries a
   mark as well as a word; and a row whose exit was never approved is tinted,
   because an empty time cell alone reads as an oversight rather than as the
   engine's honest answer. */
.dir-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.dir-chip.in { background: var(--ok-weak); color: var(--ok); border-color: var(--ok); }
.dir-chip.out { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }
tr.row-unknown > td { background: color-mix(in srgb, var(--danger-weak) 50%, transparent); }
.nextday-chip {
  display: inline-block; margin-inline-start: 5px; padding: 0 5px; vertical-align: 1px;
  border-radius: 5px; font-size: 11.5px; font-weight: 700;
  background: var(--purple-weak); color: var(--purple); border: 1px solid var(--purple);
}
.cell-sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.note-cell { max-width: 46ch; }

/* The employee screen's headline counts: how many employees the panel shows,
   and how many the system holds. Quiet by design - they are context for the
   table under them, not a result in their own right. */
.overview-total { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
.overview-total .num.strong { color: var(--text); font-weight: 700; font-size: 13.5px; }

/* ---------- Date fields written the way they are read ----------
   The native <input type="date"> keeps the ISO value and the platform
   calendar, but draws its text in the BROWSER's language - which on this
   Hebrew page can be month/day. So it is taken out of the reading order and
   a text field in front of it shows the same value as dd/mm/yyyy. It stays
   in the DOM, focusable and pickable, rather than being display:none, which
   would also disable showPicker(). */
.date-field { display: inline-flex; align-items: stretch; position: relative; }
.date-field-text {
  width: 116px; text-align: center; font-variant-numeric: tabular-nums;
  border-radius: 8px 0 0 8px;
}
.date-field-pick {
  border: 1px solid var(--border); border-right: none; background: var(--panel);
  border-radius: 0 8px 8px 0; padding: 0 8px; cursor: pointer; font-size: 14px; line-height: 1;
}
.date-field-pick:hover { background: var(--bg); }
.date-field .date-field-native {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: 1px; height: 1px; padding: 0; border: 0; margin: 0;
  opacity: 0; pointer-events: none;
}

/* ---------- Efficiency: the way in, told apart from the measurements ----------
   The coloured cards above these are measured numbers. These two hold a count
   of names in a file, which is not a measurement - more teams is not better
   than fewer - so they are deliberately plain: white, bordered, chevroned,
   and never coloured by their value. */
.eff-drill-card {
  cursor: pointer; font-family: inherit; text-align: right; width: 100%;
  display: flex; flex-direction: column; gap: 2px;
}
.eff-drill-card:hover { border-color: var(--accent); background: var(--bg); }
.eff-drill-card .v { color: var(--text); }
.eff-drill-sub {
  display: flex; align-items: center; gap: 4px;
  color: var(--accent); font-size: 11.5px; font-weight: 600; margin-top: 4px;
}
.eff-drill-sub svg { width: 12px; height: 12px; }
#eff-centre-drill { margin-top: 12px; }

/* The centre row pinned above the team rows: the context every row is read
   against, and never a target. Quiet, not highlighted. */
.mini-table tr.eff-context-row td { background: #fafbfd; font-weight: 600; }
/* The column the reader arrived by. Marked so the number they clicked is the
   one they land on - a table order, never a rank. */
.mini-table th.eff-focus-col { text-decoration: underline; text-underline-offset: 3px; }
/* The chevron that makes a clickable row look clickable. */
.mini-table td.row-go { width: 18px; padding-inline: 4px; color: var(--muted); }
.mini-table tr.emp-row:hover td.row-go { color: var(--accent); }
.mini-table td.row-go .chevron { width: 13px; height: 13px; }

/* The centre's own tick on a distribution band. Same weight as the median
   tick but in the accent hue, so "where the centre sits" is told apart from
   "where the middle of the group sits" - they are different questions and on
   the normalised measure they are rarely the same place. */
.dist-band .db-centre { position: absolute; top: -2px; width: 1.5px; height: 14px; background: var(--accent); }

/* ---------- Rules tab ---------- */
.rules-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.rules-toc { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; max-height: calc(100vh - 24px); overflow-y: auto; }
.rules-toc-title { font-size: 12px; color: var(--muted); letter-spacing: .02em; padding: 4px 8px 8px; }
.rules-toc a { color: var(--text); text-decoration: none; font-size: 13px; padding: 6px 8px; border-radius: 6px; line-height: 1.35; }
.rules-toc a:hover { background: var(--accent-weak); color: var(--accent); }
.rules-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rules-chapter { scroll-margin-top: 12px; }
.rules-chapter h2 { font-size: 16px; margin-bottom: 10px; }
.rules-chapter h3 { font-size: 13.5px; margin: 18px 0 8px; color: var(--text); }
.rules-chapter p { font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; max-width: 72ch; }
.rules-table { margin: 4px 0 8px; }
.rules-table th, .rules-table td { vertical-align: top; line-height: 1.5; }
.rules-table td:first-child { font-weight: 600; }
.rules-example td:first-child, .rules-example td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.rules-example td:first-child { font-weight: 500; }
.rules-example td:nth-child(3) { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; direction: ltr; text-align: right; }
.rules-result { background: var(--accent-weak); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.rules-note { color: var(--muted); font-size: 12.8px; line-height: 1.6; border-right: 3px solid var(--border); padding-right: 10px; }
.rules-alt { color: var(--muted); font-weight: 400; font-size: 12px; }
.rules-formula { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--accent-weak); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; line-height: 1.8; }
.rules-intro code { font-size: 12px; background: var(--accent-weak); padding: 1px 5px; border-radius: 4px; direction: ltr; unicode-bidi: embed; }
.rules-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); direction: ltr; text-align: right; margin-top: 2px; }
.rules-sev { font-weight: 600; white-space: nowrap; }
.rules-sev-legend { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 12.8px; line-height: 1.5; }
.rules-sev-chip { padding: 6px 10px; border-radius: 6px; background: var(--accent-weak); }
.rules-sev-issue, .rules-sev-chip.rules-sev-issue strong { color: #b42318; }
.rules-sev-warning, .rules-sev-chip.rules-sev-warning strong { color: #b54708; }
.rules-sev-info, .rules-sev-chip.rules-sev-info strong { color: #175cd3; }
@media (max-width: 900px) {
  .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .rules-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .rules-toc-title { width: 100%; }
}

/* ======================= live efficiency dashboard ======================= */
:root {
  /* semantic status - separate from the brand accent */
  --st-ok: #12805c; --st-ok-weak: #e3f5ed;
  --st-warn: #b8620a; --st-warn-weak: #fdf1df;
  --st-crit: #b42318; --st-crit-weak: #fbe9e7;
  --st-na: #9aa3b2; --st-na-weak: #eef1f5;
  --st-roster: #6d5bd0; --st-roster-weak: #efecfb;
  /* measurement hues (no valence) */
  --m-login: #2563eb; --m-talk: #0d9488; --m-occ: #4338ca; --m-cph: #475569; --m-aht: #7c3aed;
  /* sequential heatmap: light = idle, dark = busy */
  --seq-0: #f3f6fb; --seq-1: #d6e2f5; --seq-2: #a9c3ea; --seq-3: #6f97d8; --seq-4: #3b66bd; --seq-5: #1f3f86;
  --ink-axis: #c9cfda; --ink-grid: #eceff4; --ink-ref: #1c2230; --whisker: #8a94a6;
  --sh-1: 0 1px 2px rgba(28,34,48,.06); --sh-2: 0 4px 14px rgba(28,34,48,.08);
  --sh-focus: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}
.eff-dash { display: flex; flex-direction: column; gap: 16px; }
.dash-panel { box-shadow: var(--sh-1); }
.dash-panel h2 { font-size: 15px; margin-bottom: 6px; }
.dash-panel .panel-hint { margin: 0 0 12px; }
.dash-skel { height: 140px; border-radius: 8px; background: linear-gradient(90deg, var(--ink-grid), #f7f8fb, var(--ink-grid)); background-size: 200% 100%; animation: dash-shimmer 1.4s linear infinite; }
@keyframes dash-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.dash-ax { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.dash-ax-he { font-size: 11.5px; font-weight: 600; fill: var(--text); }
.dash-grid, .dash-tick { stroke: var(--ink-grid); stroke-width: 1; }
.dash-tick { stroke: var(--ink-axis); }
.dash-ref { stroke: var(--ink-axis); stroke-width: 1.2; }
.dash-hair { stroke: var(--ink-ref); stroke-width: 1; stroke-dasharray: 2 3; }
.dash-weekend { fill: #6b7280; opacity: .06; }
.dash-gapfill { fill: var(--st-warn); opacity: .13; }
.dash-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-line-calls { stroke: var(--m-cph); }
.dash-line-login { stroke: var(--m-login); }
.dash-dot-calls { fill: var(--m-cph); }
.dash-dot-login { fill: var(--m-login); }
.dash-endlabel { font-size: 11.5px; font-weight: 700; fill: var(--text); }
.dash-legend { margin-top: 6px; font-size: 12px; }
.dash-legend .dot.sq { border-radius: 3px; }
.dash-legend-gap { background: var(--st-warn); opacity: .35; }
.dash-legend-wk { background: #6b7280; opacity: .2; }
.dash-legend-hatch { background: repeating-linear-gradient(45deg, var(--ink-axis) 0 1px, var(--seq-0) 1px 4px); }
.dash-legend-flag { background: #fff; box-shadow: inset 0 0 0 2px var(--st-warn); }

/* hero */

/* KPI tiles */
/* The row of five, plus a full-width note line above it when a fact
   belongs to the whole row rather than to one tile. */
.dash-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dash-kpis-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); margin-bottom: -4px; }
.dash-kpi { position: relative; background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--rail); border-radius: var(--radius); padding: 12px 14px 10px; text-align: right; font-family: inherit; cursor: pointer; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: box-shadow .15s, transform .15s; color: var(--text); }
.dash-kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.dash-kpi:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.dash-kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.dash-kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.dash-kpi-sub { font-size: 11.5px; color: var(--muted); }
.dash-spark { width: 100%; height: 28px; display: block; margin-top: 4px; }
.dash-kpi-delta { font-size: 11.5px; color: var(--muted); min-height: 14px; }
.dash-kpi-go { font-size: 11.5px; color: var(--accent); margin-top: 2px; }

/* table chrome shared by the dashboard tables (named after the removed
   forest plot; the team ranking table still uses these classes) */
.dash-forest-tools { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.dash-seg { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--text); }
.dash-seg.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dash-forest-wrap { overflow-x: auto; }
.dash-forest { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.dash-forest th, .dash-forest td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.dash-forest th { color: var(--muted); font-weight: 600; font-size: 12px; }
.dash-forest .dash-forest-plot { width: 44%; min-width: 220px; padding: 0 8px; }
.dash-forest-axis-label { white-space: normal; font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 2px; }
.dash-forest-axis, .dash-forest-row { width: 100%; height: auto; display: block; }
.dash-forest-row { height: 34px; }
.dash-centre-line { stroke: var(--ink-ref); stroke-width: 1.5; }
.dash-whisker { stroke: var(--whisker); stroke-width: 1.5; }
.dash-forest-tr { cursor: pointer; transition: background .12s; }
.dash-forest-tr:hover { background: var(--accent-weak); }
.dash-forest-tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.dash-forest-name { font-weight: 600; white-space: normal !important; min-width: 160px; }
.dash-forest-name .dash-chip { margin-inline-start: 6px; }
/* Gap in hours is this table's lead comparison metric: a real number a
   non-technical manager reads at a glance, given visual weight of its own
   ahead of the ratio dot-plot (which stays as supporting confidence context). */
.dash-forest th.dash-forest-gap-th { color: var(--text); font-weight: 700; }
.dash-forest-gap { min-width: 92px; }
.dash-forest-gap-value { display: block; font-size: 15px; font-weight: 700; }
.dash-forest-gap-bar { display: block; margin-top: 4px; height: 4px; border-radius: 2px; background: var(--ink-grid); overflow: hidden; }
.dash-forest-gap-fill { display: block; height: 100%; border-radius: 2px; min-width: 2px; }
.dash-forest-divider td { padding: 0 8px; border-bottom: none; }
.dash-forest-back td { color: var(--muted); }
.dash-forest-back .dash-forest-tr { cursor: default; }
.dash-forest-back .dash-forest-tr:hover { background: none; }

/* team ranking leaderboard - deliberately the one dashboard view allowed to
   rank and colour a team next to its name (see dashboard.js's comment on
   dashRenderTeamRanking). One row per team on a shared grid: a position
   marker, the name, the two ranked metrics (large value, rank badge, bar in
   the green->red ramp) and the three neutral metrics (compact value, grey
   bar). The ramp is dashboard.js's teamRankColor, which reads var(--st-ok)
   and var(--st-crit) as literal RGB triples, because it interpolates a
   continuous gradient between them rather than picking a fixed level; each
   ranked cell receives its colour as --c and its bar length as --w, each row
   its entrance delay as --d. Colour is spent only where the ranking is; the
   values themselves wear the text ink.
   Breakpoints: >= 1001px one line per team under a column header; 700-1000px
   two lines (ranked above, neutral below) with the label inside each cell;
   <= 699px a stacked card with the five metrics in two columns. */
.dash-lb { --lb-cols: 34px minmax(170px, 1.5fr) minmax(150px, 1.3fr) minmax(150px, 1.3fr) repeat(3, minmax(92px, .85fr)); }

/* sort toggle + legend */
.dash-lb-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.dash-lb-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--st-na-weak); border: 1px solid var(--border); border-radius: 999px; padding: 3px; isolation: isolate; }
.dash-lb-seg .dash-seg { position: relative; z-index: 1; border: none; background: none; border-radius: 999px; padding: 4px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .2s; }
.dash-lb-seg .dash-seg.on { color: var(--accent); background: none; }
.dash-lb-seg .dash-seg:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.dash-lb-thumb { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(28,34,48,.16), 0 0 0 1px var(--accent-weak); }
.dash-lb-seg[data-on="cph"] .dash-lb-thumb { inset-inline-start: 50%; }
/* on a toggle the fresh DOM carries from-<previous>; the thumb slides from
   there to its resting place (percentages are of the thumb's own width,
   which is exactly the distance between the two cells) */
.dash-lb-seg.from-occ .dash-lb-thumb { animation: dash-lb-thumb-from-start .28s cubic-bezier(.2,.7,.2,1); }
.dash-lb-seg.from-cph .dash-lb-thumb { animation: dash-lb-thumb-from-end .28s cubic-bezier(.2,.7,.2,1); }
@keyframes dash-lb-thumb-from-start { from { transform: translateX(100%); } }
@keyframes dash-lb-thumb-from-end { from { transform: translateX(-100%); } }
.dash-lb-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin: 0 0 12px; }
.dash-lb-legend-sep { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }
.dash-lb-sw { display: inline-block; width: 22px; height: 6px; border-radius: 3px; flex: none; }
.dash-lb-sw.ranked { background: linear-gradient(to left, var(--st-ok), var(--st-crit)); }
.dash-lb-sw.neutral { background: var(--st-na); }

/* column header (desktop) */
.dash-lb-head { display: grid; grid-template-columns: var(--lb-cols); gap: 12px; align-items: end; padding: 0 10px 8px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.dash-lb-head-cell { display: inline-flex; align-items: center; gap: 5px; line-height: 1.25; }
.dash-lb-head-cell .dash-lb-sw { width: 12px; height: 4px; }
.dash-lb-head-cell.sorted { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* rows */
.dash-lb-list { display: flex; flex-direction: column; }
.dash-lb-row { display: grid; grid-template-columns: var(--lb-cols); gap: 12px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--ink-grid); border-radius: 8px; cursor: pointer; color: var(--text); transition: background .15s, box-shadow .15s, transform .15s; animation: dash-lb-in .38s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.dash-lb-list > .dash-lb-row:first-child { border-top-color: transparent; }
.dash-lb-row:hover { background: #f6f8fc; box-shadow: var(--sh-2); transform: translateY(-1px); position: relative; z-index: 1; }
.dash-lb-row:focus-visible { outline: none; box-shadow: var(--sh-focus); position: relative; z-index: 1; }
.dash-lb-lead, .dash-lb-metrics { display: contents; }
.dash-lb-pos { width: 30px; height: 30px; border-radius: 50%; background: var(--c, var(--st-na)); color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(28,34,48,.18); }
.dash-lb-pos.none { background: none; color: var(--st-na); box-shadow: inset 0 0 0 1.5px var(--ink-axis); font-weight: 600; }
.dash-lb-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-lb-team { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dash-lb-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-lb-agents { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dash-lb-agents .num { font-weight: 600; }

/* metric cells */
.dash-lb-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-lb-label { display: none; font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.dash-lb-top { display: flex; align-items: center; gap: 7px; }
.dash-lb-val { font-size: 18px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-lb-val.small { font-size: 13px; font-weight: 600; }
.dash-lb-metric.thin .dash-lb-val { font-weight: 400; color: var(--muted); font-size: 13px; }
.dash-lb-badge { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--c); border-radius: 999px; padding: 0 7px; line-height: 1.6; font-variant-numeric: tabular-nums; flex: none; }
.dash-lb-track { display: block; height: 6px; border-radius: 3px; background: var(--ink-grid); overflow: hidden; }
.dash-lb-track.thin { height: 4px; }
/* the bar grows from the right edge (RTL start) to --w; square at that
   baseline, rounded at the data end */
.dash-lb-fill { display: block; height: 100%; width: var(--w, 0%); min-width: 3px; background: var(--c); border-start-end-radius: 3px; border-end-end-radius: 3px; animation: dash-lb-grow .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0ms) + 80ms); }
/* neutral metrics (no real better/worse direction) never touch the
   green/red ramp - grey is the one colour spent on them, so a reader tells
   the two kinds of metric apart without reading text */
.dash-lb-fill.neutral { background: var(--st-na); }
.dash-lb-divider { margin: 18px 0 8px; }
.dash-lb-back .dash-lb-row { color: var(--muted); }
@keyframes dash-lb-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes dash-lb-grow { from { width: 0; } }
/* a re-render of the same teams (the dashboard request landing after the
   teams request) draws still - no second entrance within a second */
.dash-lb.still .dash-lb-row, .dash-lb.still .dash-lb-fill { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .dash-lb-row, .dash-lb-fill, .dash-lb-thumb, .dash-lb-seg .dash-seg { animation: none !important; transition: none !important; }
  .dash-lb-row:hover { transform: none; }
}

/* 700-1000px: two lines per team, label inside each cell, no column header */
@media (max-width: 1000px) {
  .dash-lb-head { display: none; }
  .dash-lb-label { display: block; }
  .dash-lb-row { grid-template-columns: 34px minmax(0, 1.2fr) repeat(6, minmax(0, 1fr)); grid-template-areas: "pos name occ occ occ cph cph cph" "pos name aht aht talk talk login login"; row-gap: 8px; }
  .dash-lb-row .dash-lb-pos { grid-area: pos; }
  .dash-lb-row .dash-lb-name { grid-area: name; }
  .dash-lb-row .k-occ { grid-area: occ; }
  .dash-lb-row .k-cph { grid-area: cph; }
  .dash-lb-row .k-aht { grid-area: aht; }
  .dash-lb-row .k-talk { grid-area: talk; }
  .dash-lb-row .k-login { grid-area: login; }
}
/* phone: a stacked card - the two ranked metrics side by side, the three
   neutral ones in a compact triple beneath them (a plain 2-column grid left
   the fifth cell orphaned on a third line and the card a third taller) */
@media (max-width: 699px) {
  .dash-lb-row { display: block; padding: 10px 8px; }
  .dash-lb-row:hover { transform: none; }
  .dash-lb-lead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .dash-lb-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; }
  .dash-lb-row .dash-lb-metric { grid-area: auto; grid-column: span 2; }
  .dash-lb-row .dash-lb-metric.ranked { grid-column: span 3; }
  .dash-lb-label { overflow-wrap: anywhere; }
  .dash-lb-val { font-size: 17px; }
  .dash-lb-seg .dash-seg { padding: 4px 10px; }
}

/* chips */
.dash-chip { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; line-height: 1.6; background: var(--st-na-weak); color: var(--st-na); vertical-align: middle; }
.dash-chip.crit { background: var(--st-crit-weak); color: var(--st-crit); }
.dash-chip.warn { background: var(--st-warn-weak); color: var(--st-warn); }
.dash-chip.ok { background: var(--st-ok-weak); color: var(--st-ok); }
.dash-chip.roster { background: var(--st-roster-weak); color: var(--st-roster); }
.dash-chip.info { background: var(--accent-weak); color: var(--accent); font-weight: 500; }

/* heatmap */
.dash-heat-wrap { overflow-x: auto; }
.dash-heat-svg { width: 100%; min-width: 0; height: auto; display: block; }
@media (max-width: 700px) { .dash-heat-svg { min-width: 520px; } }
.dash-heat-cell { transition: opacity .12s; }
.dash-heat-cell:hover { opacity: .8; }
.dash-heat-cell.flagged { cursor: pointer; }
.dash-heat-cell:focus-visible { outline: none; stroke: var(--accent); stroke-width: 2; }
.dash-heat-legend { flex-wrap: wrap; }

/* problem cards */
/* Four fixed columns left each card ~100px of usable width, which is how a
   card whose only job is to say WHO to look at ended up truncating the
   name in three dots. minmax(260px, 1fr) lets the row wrap to two-by-two
   instead of shrinking below what a name needs. */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.dash-card { background: var(--panel); border: 1px solid var(--border); border-inline-start: 4px solid var(--rail); border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.dash-card.open { grid-column: 1 / -1; }
.dash-card.empty { opacity: .75; }
.dash-card-h { padding: 12px 14px 8px; cursor: pointer; }
.dash-card-h:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 8px; }
.dash-card-title { font-size: 13.5px; font-weight: 700; }
.dash-card-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; min-height: 32px; }
.dash-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; }
.dash-card-total { font-size: 26px; font-weight: 700; line-height: 1; }
.dash-card-unit { font-size: 12px; font-weight: 600; color: var(--muted); }
.dash-micro { width: 120px; height: 24px; flex-shrink: 0; }
.dash-card-count { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.dash-card .dash-chip { margin-top: 8px; align-self: flex-start; }
.dash-card-list { list-style: none; margin: 0; padding: 0 6px; border-top: 1px solid var(--border); }
.dash-card-list li + li { border-top: 1px solid var(--ink-grid); }
.dash-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; background: none; border: none; font-family: inherit; text-align: right; padding: 8px 8px; cursor: pointer; color: var(--text); border-radius: 6px; }
.dash-item:hover { background: var(--accent-weak); }
.dash-item:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.dash-item-rank { color: var(--muted); font-size: 11.5px; width: 16px; flex-shrink: 0; padding-top: 1px; }
.dash-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-item-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; white-space: normal; line-height: 1.35; }
.dash-item-sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; white-space: normal; line-height: 1.4; }
.dash-item-val { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: left; }
.dash-item-excess { font-size: 14px; font-weight: 700; white-space: nowrap; }
.dash-item-unit { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dash-item-trig { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dash-card-more { font-size: 12px; color: var(--accent); padding: 8px 14px 10px; cursor: pointer; }
.dash-card.open .dash-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.dash-card.open .dash-card-list li { border-top: 1px solid var(--ink-grid); }

/* drill stage */
.dash-drill-panel { border-inline-start: 4px solid var(--accent); }
.dash-drill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dash-drill-head h2 { margin-bottom: 4px; }
.dash-drill-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.dash-drill-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dash-drill-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 10px; }
.dash-drill-ratio { margin-bottom: 14px; }
.dash-bar-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 2fr) minmax(120px, 1.2fr); align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--ink-grid); }
.dash-bar-label { color: var(--muted); font-weight: 600; }
.dash-bar-track { position: relative; height: 12px; background: var(--ink-grid); border-radius: 6px; overflow: visible; }
.dash-bar-fill { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--accent); transition: width .5s ease-out; }
.dash-bar-fill.warn { background: var(--st-warn); }
.dash-bar-fill.na { background: var(--st-na); }
.dash-bar-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-ref); transform: translateX(50%); }
.dash-bar-nums { font-size: 12px; }
.dash-members { margin-top: 14px; }
.dash-members-counts { display: flex; gap: 6px; align-items: center; font-size: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dash-members-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.dash-members-list li + li { border-top: 1px solid var(--ink-grid); }
.dash-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.dash-mini { margin: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px; cursor: pointer; background: #fff; }
.dash-mini.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.dash-mini:hover { background: var(--accent-weak); }
.dash-mini:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.dash-mini svg { width: 100%; height: auto; display: block; }
.dash-mini figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* floating tooltip for SVG marks */
.dash-tip { position: absolute; z-index: 1300; background: #1c2230; color: #fff; font-size: 12px; line-height: 1.55; border-radius: 7px; padding: 9px 12px; max-width: min(300px, 80vw); box-shadow: 0 8px 20px rgba(0,0,0,.25); pointer-events: none; text-align: right; }
.dash-tip .num { font-variant-numeric: tabular-nums; }
.dash-tip-go { color: #a9c3ea; font-size: 11.5px; }
.dash-tip .dash-chip { background: rgba(255,255,255,.14); color: #fff; }

/* enter animation, once per fetch */
.dash-enter .dash-spark-line, .dash-enter .dash-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: dash-draw .7s ease-out forwards; }
.dash-enter .dash-whisker[data-len] { transform-origin: center; animation: dash-grow .4s ease-out forwards; }
.dash-enter .dash-heat-cell { animation: dash-fade .3s ease-out both; }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }
@keyframes dash-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dash-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dash-enter *, .dash-kpi, .dash-bar-fill, .dash-skel { animation: none !important; transition: none !important; }
}

/* responsive */
@media (max-width: 1200px) {
  .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .dash-kpis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 4px; }
  .dash-kpi { flex: 0 0 160px; scroll-snap-align: start; }
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-card.open .dash-card-list { grid-template-columns: minmax(0, 1fr); }
  .dash-drill-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-bar-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.dash-thin-dot { fill: #fff; stroke: var(--muted); stroke-width: 1.2; }
.dash-item-name { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-item-sub { white-space: normal; line-height: 1.3; }
.dash-item-trig { white-space: normal; text-align: left; max-width: 120px; line-height: 1.3; }

/* ======================= responsive pass (all screens) ======================= */
html, body { max-width: 100%; overflow-x: clip; }  /* clip, not hidden: hidden would create a scroll container and kill the sticky nav bar */
/* The tab strip scrolls on a narrow screen, and used to give no sign of it:
   three of five tabs were visible and the other two were simply invisible.
   A fade at the edge that still has tabs behind it is the standard hint, and
   it is driven by a class the script sets, so it disappears at both ends. */
nav.tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; position: relative; scroll-behavior: smooth; }
nav.tabs button { flex: 0 0 auto; white-space: nowrap; }
.tabs-wrap { position: relative; }
.tabs-wrap::before,
.tabs-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 3;
}
/* RTL: "start" is the right edge, "end" is the left one. */
.tabs-wrap::before { right: 0; background: linear-gradient(to left, var(--panel), rgba(255,255,255,0)); }
.tabs-wrap::after  { left: 0;  background: linear-gradient(to right, var(--panel), rgba(255,255,255,0)); }
.tabs-wrap.more-start::before { opacity: 1; }
.tabs-wrap.more-end::after { opacity: 1; }
@media (max-width: 900px) {
  main { padding: 0 12px; margin: 14px auto; gap: 14px; }
  nav.tabs { padding: 0 8px; }
  nav.tabs button { padding: 10px 12px; font-size: 13px; }
  header.app-header { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
  header.app-header h1 { font-size: 16px; }
  .panel { padding: 14px 14px; }
  /* a table wider than the phone scrolls inside its own panel; the page never does */
  .panel { overflow-x: auto; }
  .ss-controls { gap: 8px; }
  .ss-controls label { flex: 1 1 140px; min-width: 0; }
  .ss-controls input[type="date"], .ss-controls input[list], .ss-controls select { width: 100%; box-sizing: border-box; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-label-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .row { gap: 8px; }
  .row > * { max-width: 100%; }
  h2 { font-size: 14px; }
}

.import-files-cell { display: flex; flex-direction: column; gap: 4px; }
.import-file-link { font-size: 12.5px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.import-file-link:hover { text-decoration: underline; }

/* ---------- load history: one clean card per load ----------
   Owner ruling (17/09) "אני רוצה דף נקי". Replaces the 9-column table + a
   second notes row per load. Reads on the phone without sideways scroll. */
.load-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.load-card.stopped { border-style: dashed; background: #fcfcfd; }
.lc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lc-file { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-kind { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--accent-weak); color: var(--accent); }
.lc-kind.eff { background: #f3edfe; color: #7c3aed; }
.lc-kind.q { background: #e6f6f2; color: #0f766e; }
.lc-right { flex: 0 0 auto; }
.lc-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lc-pill.ok { background: var(--ok-weak); color: var(--ok); }
.lc-pill.stop { background: var(--warn-weak, #fdf2e2); color: var(--warn, #b45309); }
.lc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lc-meta b { color: var(--text); font-weight: 600; }
.lc-meta .muted-inline { color: var(--muted); }
.lc-dl { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-note { color: var(--muted); font-size: 12px; background: #fafbfd; border-radius: 8px; padding: 7px 10px; line-height: 1.6; }
.loads-toggle {
  width: 100%; text-align: center; background: #fafbfd;
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 11px; color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; margin-top: 4px;
}
.loads-toggle:hover { background: #f2f4f9; }
.loads-stopped { margin-top: 10px; }
.loads-stopped.hidden { display: none; }

/* ---------- efficiency navigation: always a way back ----------
   The trail existed from the start, but a drill-down scrolls the page far
   past it - measured at 2,310px above the fold - so in practice there was no
   way back except the browser's own. Sticky keeps it on screen, and the
   arrow makes it read as an exit rather than as a location. */
.eff-nav-panel {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--sh-1);
}
.eff-nav-panel.stuck { box-shadow: var(--sh-2); }
.eff-back {
  border: 1px solid var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-inline-end: 10px;
  white-space: nowrap;
}
.eff-back:hover { background: var(--accent); color: #fff; }
.eff-back:focus-visible { outline: none; box-shadow: var(--sh-focus); }


/* ---------- insights that can be opened ---------- */
.insight-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.insight-people-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.insight-person {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.insight-person:hover { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.insight-person:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.top10-negligible { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: #f7f8fa; font-size: 12px; color: var(--muted); line-height: 1.6; }
.top10-negligible b { color: var(--text); }

/* What the engine said about a load, under its own row. */
.batch-note-row td { background: #f7f8fa; font-size: 11.5px; color: var(--muted); line-height: 1.6; padding: 6px 10px; }
.batch-note-mark { font-weight: 600; color: var(--text); }

/* The all-employees list, folded while one employee is the subject. */
#employee-daily-overview-panel.collapsed > :not(#overview-toggle) { display: none; }
#employee-daily-overview-panel.collapsed { padding-block: 10px; }
.overview-toggle {
  display: inline-flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; text-align: right; padding: 2px 0;
}
.overview-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.overview-toggle-caret { color: var(--muted); transition: transform .15s; }
.overview-toggle.is-collapsed .overview-toggle-caret { transform: rotate(90deg); }
.insight-range { font-size: 11.5px; color: var(--muted); margin: 2px 0 6px; }

/* UX20 — the people who repeat between cards, and the cards that fold. */
.insight-repeat-strip {
  font-size: 11.5px; line-height: 1.55; color: var(--text);
  background: var(--accent-weak); border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.insight-person.repeat { border-color: var(--accent); }
.insight-person-repeat {
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-weak); border-radius: 999px; padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.insight-person:hover .insight-person-repeat { color: inherit; background: transparent; }
.insight-card.folded { padding: 8px 14px; }
.insight-fold-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-align: start; font: inherit; color: inherit;
}
.insight-fold-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 4px; }
.insight-fold-caret { font-size: 10px; color: var(--muted); }
.insight-fold-btn h4 { margin: 0; }
.insight-fold-body { margin-top: 6px; }
/* The row the reader just stepped back out of. Fades by itself; it marks a
   place, it does not mark a finding. */
.eff-returned { animation: eff-return-pulse 2.2s ease-out; }
@keyframes eff-return-pulse {
  0%, 40% { background: var(--accent-weak, #eef4ff); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .eff-returned { animation: none; background: var(--accent-weak, #eef4ff); }
}
.insight-person-value { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.insight-person:hover .insight-person-value { color: inherit; }
/* The sample the chip's number rests on. Quieter than the number, but never
   hidden: it is what stops a measurement from being read as a verdict. */
.insight-person-sample {
  font-size: 11.5px;
  color: var(--muted);
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 6px;
  margin-inline-start: 2px;
  font-variant-numeric: tabular-nums;
}
.insight-person:hover .insight-person-sample { color: inherit; }

.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.linklike:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 3px; }

/* Kept after the demand-vs-staffing card was removed: the forest plot's team
   drill-down and the heatmap's cell drill-down both print a headline figure
   in this shape. */
.dash-big-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.dash-big-value { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.dash-big-delta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 899px) {
  .dash-big-value { font-size: 32px; }
}

/* The KPI row as the screen's top bar.
   It sticks BELOW the breadcrumb panel, whose real height is measured at
   runtime into --eff-nav-h, because guessing it leaves either a gap or an
   overlap the moment the crumbs wrap to two lines. */
#dash-kpis-sentinel { height: 1px; margin-bottom: -1px; }
.dash-kpis {
  position: sticky;
  top: var(--eff-nav-h, 46px);
  z-index: 35;
  background: var(--bg);
  padding: 10px 0;
  transition: padding .15s ease;
}
/* Stuck: a strip, not a wall. The sparkline, the previous-window line and the
   drill hint all fold away, leaving the label and the number - which is what
   a bar you scrolled past is for. The whole tile stays clickable. */
.dash-kpis.stuck {
  padding: 6px 0;
  box-shadow: 0 6px 14px -10px rgba(16, 24, 40, .5);
}
.dash-kpis.stuck .dash-kpi { padding: 6px 10px; gap: 2px; }
.dash-kpis.stuck .dash-spark,
.dash-kpis.stuck .dash-kpi-delta,
.dash-kpis.stuck .dash-kpi-go,
.dash-kpis.stuck .dash-kpi-sub { display: none; }
.dash-kpis.stuck .dash-kpi-value { font-size: 18px; }
.dash-kpis.stuck .dash-kpis-note { display: none; }
@media (max-width: 699px) {
  /* On a phone the bar would take a third of the screen. It scrolls with the
     page there and keeps its full tiles. */
  .dash-kpis { position: static; padding: 0; }
  .dash-kpis.stuck { box-shadow: none; }
}

/* Why a range came back empty — stated once, above the panels, instead of
   four panels each saying "אין נתונים" and none of them saying why. */
.empty-explain {
  background: var(--warn-weak);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
}
.empty-explain b { font-weight: 700; }
.empty-explain-others { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(217,119,6,0.25); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.empty-explain-others > div { flex-basis: 100%; }

/* ---------- מדריך: כרטיסי סרטוני הדרכה (טאב מדריך) ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; transition: .15s; box-shadow: var(--sh-1); }
.guide-card:hover { border-color: var(--st-roster); transform: translateY(-2px); box-shadow: var(--sh-2); }
.guide-card .gc-ic { font-size: 1.7rem; }
.guide-card .gc-play { position: absolute; inset-inline-start: 14px; top: 16px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--st-roster); color: #fff; display: grid; place-items: center; font-size: .85rem; }
.guide-card b { margin-top: 8px; font-size: 1.02rem; }
.guide-card .gc-desc { font-size: .84rem; color: var(--muted); }

/* ---------- הרשאות מרובות (בחירה מרובה של תפקידים) ---------- */
.admin-roles { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.role-chk { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.role-chk input { width: 16px; height: 16px; accent-color: var(--st-roster); cursor: pointer; }

/* ---------- דירוגי משמרות בדשבורד (בקשת בעל המערכת, 17/09) ---------- */
.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rank-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.rank-head { background: var(--accent-weak); color: var(--accent); font-weight: 700; padding: 8px 12px; font-size: 13px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rank-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.rank-table tr:last-child td { border-bottom: none; }
.rank-pos { color: var(--muted); width: 22px; font-variant-numeric: tabular-nums; }
.rank-table .num { text-align: left; font-variant-numeric: tabular-nums; }

/* תכנון מול ביצוע מהנוכחות */
.cvp-table { width: 100%; font-size: 12.5px; }
.cvp-table td, .cvp-table th { text-align: center; padding: 5px 8px; }
.cvp-table .num { font-variant-numeric: tabular-nums; }
.cvp-short { color: var(--danger); font-weight: 700; }
.cvp-over { color: var(--accent); }
.cvp-ok { color: var(--ok); }

/* המשמרות שהוצעו לנציג (מנוע ההפצה) */
.asg-panel .asg-table { width: 100%; font-size: 13px; margin-top: 6px; }
.asg-panel .asg-table td, .asg-panel .asg-table th { padding: 7px 10px; text-align: right; }
.asg-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.asg-badge.proposed { background: var(--accent-weak); color: var(--accent); }
.asg-badge.approved { background: var(--ok-weak); color: var(--ok); }
.asg-badge.declined { background: var(--danger-weak); color: var(--danger); }
.asg-badge.cancelled { background: #eef1f6; color: var(--muted); }
.asg-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* לוח-שבוע ל"המשמרות שהוצעו לי" (בקשת בעל המערכת, 18/09): עמודה ליום,
   המשמרות כבלוקים של טווח-שעות. גולש אופקית במסך צר במקום להידחס. */
.cal-week { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.cal-col { flex: 1 1 0; min-width: 84px; background: var(--bg, #f7f8fb); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; }
.cal-col.has { background: var(--card, #fff); }
.cal-head { text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.cal-let { display: block; font-weight: 700; font-size: 13px; }
.cal-date { display: block; font-size: 11px; color: var(--muted); }
.cal-body { padding: 6px 5px; display: flex; flex-direction: column; gap: 5px; min-height: 44px; }
.cal-empty { color: var(--muted); text-align: center; font-size: 12px; padding: 6px 0; }
.cal-block { border-radius: 8px; padding: 5px 6px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.cal-block-st { display: block; font-size: 10px; font-weight: 600; opacity: 0.85; }
.cal-block.proposed { background: var(--accent-weak); color: var(--accent); }
.cal-block.approved { background: var(--ok-weak); color: var(--ok); }
.cal-block.declined { background: var(--danger-weak); color: var(--danger); text-decoration: line-through; }
.cal-block.cancelled { background: #eef1f6; color: var(--muted); text-decoration: line-through; }

/* היסטוריית המשמרות של הנציג */
.hist-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 14px; }
.hist-tile { background: var(--bg, #f7f8fb); border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; }
.hist-tile .n { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.hist-tile .t { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.hist-period { margin-top: 12px; }
.hist-period-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.hist-period-range { font-size: 12px; color: var(--muted); font-weight: 500; }
@media (max-width: 520px) { .hist-summary { grid-template-columns: repeat(2, 1fr); } }

/* פתיחת-משמרת לאחמ״ש (18/09): מתוכנן מול בפועל, זה לצד זה ומסומן במקור */
.src-tag { display: inline-block; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; vertical-align: middle; margin-inline-start: 4px; }
.src-tag.plan { background: var(--st-roster-weak, #efecfb); color: var(--st-roster, #6d5bd0); }
.src-tag.att { background: var(--ok-weak); color: var(--ok); }
.sd-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 6px 0 12px; }
.sd-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; }
.sd-tile .n { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.sd-tile .t { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.sd-tile.ok .n { color: var(--ok); } .sd-tile.warn .n { color: var(--warn); } .sd-tile.bad .n { color: var(--danger); }
.sd-note { background: var(--warn-weak); color: var(--warn); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; margin: 0 0 10px; }
.sd-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sd-badge.ontime { background: var(--ok-weak); color: var(--ok); }
.sd-badge.late { background: var(--warn-weak); color: var(--warn); }
.sd-badge.nologin { background: var(--danger-weak); color: var(--danger); }
.sd-badge.unplanned { background: var(--accent-weak); color: var(--accent); }
.sd-badge.early { background: #fff4e0; color: #a9640a; margin-inline-start: 4px; }
.sd-badge.pending { background: var(--warn-weak); color: var(--warn); }
.ns-tiles { grid-template-columns: repeat(4, 1fr); }
.ns-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ns-range { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ns-bad { color: var(--danger); font-weight: 800; }
.ns-sub { font-size: 14px; margin: 14px 0 6px; }
.ns-controls .ns-emp { min-width: 160px; }
@media (max-width: 720px) { .ns-tiles { grid-template-columns: repeat(2, 1fr); } }
.sd-key { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sd-plan, .sd-act { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-table td, .adh-table td { vertical-align: middle; }
.conf.ok { color: var(--ok); } .conf.warn { color: var(--warn); } .conf.bad { color: var(--danger); }
.shr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 12px; }
.shr-card { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--border); }
.shr-card.plan { background: var(--st-roster-weak, #efecfb); }
.shr-card.unplan { background: var(--danger-weak); }
.shr-h { font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.shr-big { font-size: 24px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.shr-big small { font-size: 12px; font-weight: 600; color: var(--muted); }
.shr-s { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.shr-weeks { margin-bottom: 12px; }
.sd-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.sd-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.sd-controls input, .sd-controls select { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.sd-controls button { border-radius: 9px; padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: #fff; }
.sd-controls button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 640px) { .sd-tiles { grid-template-columns: repeat(2, 1fr); } .shr-row { grid-template-columns: 1fr; } }

/* היסטוריה + יום עמוס (לשונית חיזוי, 22/09) — מקורות מסומנים, לא מעורבבים (כלל 1) */
.src-tag.acd { background: #e6f0fb; color: #1f4e79; }
.src-tag.off { background: #f1f3f7; color: var(--muted); }
.hs-table th.hs-plan, .hs-table td.hs-plan { background: rgba(109,91,208,.06); }
.hs-table th.hs-att, .hs-table td.hs-att { background: rgba(31,138,91,.07); }
.hs-table th.hs-acd, .hs-table td.hs-acd { background: rgba(31,78,121,.06); }
.hs-ok { color: var(--ok); font-weight: 800; } .hs-bad { color: var(--danger); font-weight: 800; }
.hs-table tr.muted td { color: var(--muted); }


/* מיון בלחיצה על כותרת (sortable.js) — לוח בקרה תפעולי ויעילות */
#tab-operational thead th[data-sortable], #tab-efficiency thead th[data-sortable] { cursor: pointer; user-select: none; position: relative; }
#tab-operational thead th[data-sortable]:hover, #tab-efficiency thead th[data-sortable]:hover { color: var(--accent); }
#tab-operational thead th[data-sortable]::after, #tab-efficiency thead th[data-sortable]::after {
  content: "⇅"; font-size: 11px; color: #b6bfcd; margin-inline-start: 4px; opacity: 0; transition: opacity .12s;
}
#tab-operational thead th[data-sortable]:hover::after, #tab-efficiency thead th[data-sortable]:hover::after { opacity: 1; }
#tab-operational thead th[data-sort="desc"]::after, #tab-efficiency thead th[data-sort="desc"]::after { content: "▼"; color: var(--accent); opacity: 1; }
#tab-operational thead th[data-sort="asc"]::after, #tab-efficiency thead th[data-sort="asc"]::after { content: "▲"; color: var(--accent); opacity: 1; }
#tab-operational thead th[data-sort], #tab-efficiency thead th[data-sort] { color: var(--accent); }