/* CallTranscribe — Design tokens & global styles */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Primary (purple, default) */
  --primary-50:  #f3f0ff;
  --primary-100: #e6e0ff;
  --primary-200: #cdc1ff;
  --primary-400: #8b73ff;
  --primary-500: #6346ff;
  --primary-600: #5530f5;
  --primary-700: #4421d4;
  --primary-grad: linear-gradient(135deg, #6346ff 0%, #8b6dff 100%);

  /* Surface */
  --bg:          #f6f7fb;
  --bg-deep:     #eef0f7;
  --surface:    #ffffff;
  --surface-2: #fafbfd;
  --stroke:    #e6ebf3;
  --stroke-strong: #d6dde8;

  /* Text */
  --text:       #0f1729;
  --text-2:     #3d4866;
  --text-3:     #6b7894;
  --text-4:     #9aa4b8;
  --text-inv:    #ffffff;

  /* Semantic */
  --success: #16a86b;
  --success-bg: #e6f7ee;
  --danger:  #e0395a;
  --danger-bg: #fdebef;
  --warn:    #d97a16;
  --warn-bg: #fef3e2;
  --info:    #1e7ad9;
  --info-bg: #e6f0fb;

  /* Speakers */
  --agent: #6346ff;
  --agent-bg: #efecff;
  --customer: #0a9da0;
  --customer-bg: #e2f5f5;

  /* Sentiment */
  --sent-pos: #16a86b;
  --sent-neg: #e0395a;
  --sent-neu: #8e96ab;

  /* Type scale */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 14px;
  --fs-4: 16px;
  --fs-5: 18px;
  --fs-6: 22px;
  --fs-7: 28px;
  --fs-8: 36px;

  /* Spacing — comfortable default */
  --pad: 24px;
  --pad-sm: 16px;
  --gap: 16px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 41, 0.06);
  --shadow-lg: 0 12px 36px rgba(15, 23, 41, 0.10);
}

/* Color themes via [data-primary] */
[data-primary="blue"] {
  --primary-50:  #ecf3ff;
  --primary-100: #d8e6ff;
  --primary-200: #b6cdff;
  --primary-400: #5b8aff;
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --primary-grad: linear-gradient(135deg, #2563eb 0%, #5b8aff 100%);
  --agent: #2563eb;
  --agent-bg: #ecf3ff;
}
[data-primary="green"] {
  --primary-50:  #e8f7ee;
  --primary-100: #ceeed9;
  --primary-200: #9adcb6;
  --primary-400: #2cb37e;
  --primary-500: #0f9b62;
  --primary-600: #088053;
  --primary-700: #066441;
  --primary-grad: linear-gradient(135deg, #0f9b62 0%, #2cb37e 100%);
  --agent: #0f9b62;
  --agent-bg: #e8f7ee;
}
[data-primary="orange"] {
  --primary-50:  #fff1e6;
  --primary-100: #ffdec0;
  --primary-200: #ffbe85;
  --primary-400: #ff8a3a;
  --primary-500: #ed6611;
  --primary-600: #c8520b;
  --primary-700: #9c4209;
  --primary-grad: linear-gradient(135deg, #ed6611 0%, #ff8a3a 100%);
  --agent: #ed6611;
  --agent-bg: #fff1e6;
}

/* Density */
[data-density="compact"] {
  --pad: 16px;
  --pad-sm: 12px;
  --gap: 12px;
}
[data-density="spacious"] {
  --pad: 32px;
  --pad-sm: 22px;
  --gap: 22px;
}

/* Type scale knob */
[data-typescale="sm"] { --fs-3: 13px; --fs-4: 15px; --fs-5: 17px; --fs-6: 20px; --fs-7: 26px; --fs-8: 32px;}
[data-typescale="lg"] { --fs-3: 15px; --fs-4: 17px; --fs-5: 20px; --fs-6: 24px; --fs-7: 32px; --fs-8: 40px;}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: 'Heebo', -apple-system, system-ui, sans-serif;
  font-size: var(--fs-3);
  color: var(--text);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* English / numbers in Hebrew context */
.num, .en { font-family: 'Inter', sans-serif; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.mono { font-family: 'JetBrains Mono', monospace; direction: ltr; unicode-bidi: isolate; }

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* Layout */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  background: var(--bg);
}
.main {
  flex: 1 1 auto;
  padding: 20px 24px 28px 24px;
  min-width: 0;
  overflow-x: hidden;
}

/* Sidebar */
.sidebar {
  flex: 0 0 220px;
  width: 220px;
  position: sticky;
  top: 12px;
  align-self: flex-start;
  height: calc(100vh - 24px);
  margin: 12px 12px 12px 0;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: 18px 12px 12px 12px;
  display: flex;
  flex-direction: column;
}
.sidebar__brand {
  padding: 4px 8px 16px 8px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
/* Brand logo: anchor-right (RTL natural), capped height for the sidebar
   chrome. `object-fit: contain` keeps the wordmark crisp on hi-DPI and
   never letterboxes against the transparent PNG background. */
.sidebar__brand-logo {
  display: block;
  height: 34px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
  margin: 2px 0 4px;
}
/* Legacy h1 + dot kept as a fallback for any screen that hasn't migrated
   to the <img> yet — same visual rhythm. */
.sidebar__brand h1 { font-size: 17px; font-weight: 800; margin: 0; color: var(--text); letter-spacing: -0.01em; display: flex; gap: 8px; align-items: center; justify-content: flex-start; flex-direction: row-reverse;}
.sidebar__brand h1 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-grad); display: inline-block; box-shadow: 0 0 0 3px var(--primary-50); }
.sidebar__brand p { margin: 4px 0 0; color: var(--text-3); font-size: 11px; }
.sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar__nav::-webkit-scrollbar { width: 4px;}
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 2px;}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: right;
  font-weight: 500;
  transition: background 120ms;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--primary-grad);
  color: white;
  box-shadow: 0 6px 18px -6px var(--primary-500);
  font-weight: 600;
}
.nav-item.active .nav-icon { color: white; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center;}
.nav-item .badge {
  margin-right: auto;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  min-width: 20px;
  text-align: center;
}
.nav-item.active .badge { background: rgba(255,255,255,0.25); }

.sidebar__user {
  border-top: 1px solid var(--stroke);
  padding-top: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
  text-align: right;
}
.sidebar__user .avatar { width: 30px; height: 30px; font-size: 11px;}
.sidebar__user-info b { font-size: 12px;}
.sidebar__user-info span { font-size: 10px;}
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-grad); color: white; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;}
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px;}
.sidebar__user-info { flex: 1; min-width: 0; }
.sidebar__user-info b { display: block; font-size: 14px; color: var(--text); font-weight: 600;}
.sidebar__user-info span { font-size: 12px; color: var(--text-3);}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.topbar h2 {
  font-size: var(--fs-7);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--text);
}
.topbar h2 .sub { color: var(--text-3); font-weight: 400; font-size: var(--fs-5); margin-right: 8px; }
/* The spacer pushes itself to the end of the flex line via `order:99`, so
   actions sit immediately next to the title rather than at the opposite
   edge. In an RTL document this puts: [title][actions]——————[spacer]
   → both title and date/dept filters anchor on the right side. */
.topbar__spacer  { flex: 1; order: 99; }
.topbar__actions { display: flex; gap: 10px; align-items: center; flex-direction: row-reverse;}

/* ── Department picker (rendered inside TopBar.actions) ────────────────
   Pill-shaped chip with an icon, a static label, a thin divider, the
   actual <select>, and a subtle "active selection" dot when scoped to a
   single department. The whole pill responds to hover with the same
   primary-tinted surface used elsewhere in the app so it visually
   belongs in the toolbar. */
.ct-dept-picker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  height: 34px;
}
.ct-dept-picker:hover {
  border-color: var(--primary-300, #c4b6ff);
  background: var(--surface-2);
}
.ct-dept-picker:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.ct-dept-picker > svg { color: var(--primary-500); flex-shrink: 0; }
.ct-dept-picker__label {
  color: var(--text-3); font-weight: 600; letter-spacing: 0.01em;
}
.ct-dept-picker__divider {
  width: 1px; height: 16px; background: var(--stroke);
  margin: 0 2px;
}
.ct-dept-picker__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; background: transparent;
  color: var(--text); font-weight: 600; font-size: 13px;
  cursor: pointer;
  padding: 4px 22px 4px 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236346ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 10px 10px;
  font-family: inherit;
  min-width: 130px;
}
.ct-dept-picker__select:focus { outline: none; }
.ct-dept-picker__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-50);
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
  flex-direction: row-reverse;
}
.btn:hover { border-color: var(--stroke-strong); background: var(--surface-2); }
.btn--primary {
  background: var(--primary-grad);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 14px -4px var(--primary-500);
  font-weight: 600;
}
.btn--primary:hover { filter: brightness(1.05); background: var(--primary-grad); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); border-color: transparent; color: white;}
.btn--danger:hover { background: #c12d4d;}
.btn--sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm);}
.btn--icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.btn--icon.btn--sm { width: 30px; height: 30px;}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--pad);
}
.card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.card__head h3 { margin: 0; font-size: var(--fs-5); font-weight: 600; color: var(--text); letter-spacing: -0.01em;}
.card__head p { margin: 4px 0 0; color: var(--text-3); font-size: 13px;}
.card__head .spacer { flex: 1; }

/* Stats grid (dashboard) */
.stat {
  position: relative;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.stat__label { font-size: 13px; color: var(--text-3); font-weight: 500;}
.stat__value { font-size: 30px; font-weight: 700; color: var(--text); margin-top: 10px; letter-spacing: -0.02em; line-height: 1.4; padding-top: 2px;}
.stat__delta { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; margin-top: 12px; padding: 3px 8px; border-radius: var(--r-pill); flex-direction: row-reverse;}
.stat__delta.up { background: var(--success-bg); color: var(--success);}
.stat__delta.down { background: var(--danger-bg); color: var(--danger);}
.stat__icon { position: absolute; top: 18px; inset-inline-end: 18px; width: 38px; height: 38px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; }
.stat { text-align: right; }
.stat__label { display: block; padding-inline-end: 50px; }

/* Chips & tags */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--stroke);flex-direction: row-reverse;}
.chip--success { background: var(--success-bg); color: var(--success); border-color: transparent;}
.chip--danger { background: var(--danger-bg); color: var(--danger); border-color: transparent;}
.chip--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent;}
.chip--info { background: var(--info-bg); color: var(--info); border-color: transparent;}
.chip--primary { background: var(--primary-50); color: var(--primary-700); border-color: transparent;}
.chip--solid { background: var(--text); color: white; border-color: transparent;}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;}

/* Search input */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text-2);
  min-width: 280px;
  flex-direction: row-reverse;
}
.search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--text); text-align: right; }
.search input::placeholder { color: var(--text-4); }

/* Tables */
.table { width: 100%; border-collapse: collapse; table-layout: auto; }
.table th, .table td {
  padding: 14px 16px;
  text-align: right;
  font-size: 14px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: middle;
  white-space: nowrap;       /* prevents wrap that visually breaks alignment */
}
/* Long ULID ids would otherwise dominate the layout and squeeze every
   other column — clip to one line with an ellipsis and keep things
   honest. The full id is still visible on hover via the cell's title. */
.table td.num,
.table td:first-child {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table th {
  font-weight: 500;
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
}
.table tbody tr { cursor: pointer; transition: background 80ms;}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.selected { background: var(--primary-50);}
.table tbody tr:last-child td { border-bottom: 0;}

/* Severity / sentiment dot */
.sent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;}
.sent-dot.pos { background: var(--sent-pos);}
.sent-dot.neg { background: var(--sent-neg);}
.sent-dot.neu { background: var(--sent-neu);}

/* Page sections */
.section-title { font-size: var(--fs-6); font-weight: 700; margin: 0 0 16px 0; letter-spacing: -0.01em;}

/* Utility */
.row { display: flex; gap: var(--gap); flex-direction: row-reverse;}
.col { display: flex; flex-direction: column; gap: var(--gap);}
.flex1 { flex: 1; }
.muted { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--stroke); margin: 16px 0;}

/* DLP redaction */
.dlp {
  display: inline-flex;
  background: repeating-linear-gradient(135deg, #ffe6c8 0 6px, #ffdcb0 6px 12px);
  color: #844209;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px dashed #d97a16;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92em;
  direction: ltr;
  unicode-bidi: isolate;
}
.dlp::before { content: '🔒 '; font-size: 0.85em;}

/* Speaker bubble — `content-visibility: auto` is the single biggest win
   for long transcripts: it tells the browser to skip layout + paint for
   bubbles outside the viewport. Combined with `contain-intrinsic-size`
   (a height hint so the scrollbar still behaves), a 200-segment call
   renders in a couple of frames instead of hundreds of ms. */
.bubble {
  display: flex; gap: 12px; padding: 14px;
  border-radius: var(--r-lg);
  flex-direction: row-reverse;
  content-visibility: auto;
  contain-intrinsic-size: 0 110px;
}
.bubble--agent { background: var(--agent-bg); }
.bubble--customer { background: var(--customer-bg);}
/* Defense-in-depth — when a segment somehow reaches the UI with an
   `unknown` speaker (e.g. legacy data), give it a muted grey style
   instead of a colourless transparent bubble that looks broken. The
   pipeline already pins every segment to agent/customer, so this
   should never render in current code paths. */
.bubble--unknown { background: var(--surface-2);}
.bubble__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white;}
.bubble--agent .bubble__avatar { background: var(--agent);}
.bubble--customer .bubble__avatar { background: var(--customer);}
.bubble--unknown .bubble__avatar { background: var(--text-3);}
.bubble__body { flex: 1; min-width: 0;}
.bubble__head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-direction: row-reverse;}
.bubble__name { font-weight: 600; font-size: 14px;}
.bubble--agent .bubble__name { color: var(--agent);}
.bubble--customer .bubble__name { color: var(--customer);}
.bubble--unknown .bubble__name { color: var(--text-3);}
.bubble__time { font-size: 12px; color: var(--text-3); font-family: 'Inter', sans-serif;}
.bubble__text { font-size: 15px; line-height: 1.65; color: var(--text);}
.bubble__text mark { background: #fff7d4; padding: 1px 3px; border-radius: 3px;}
.bubble__meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--text-3); flex-direction: row-reverse;}

/* Confidence bar */
.confidence { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); flex-direction: row-reverse;}
.confidence__bar { width: 48px; height: 4px; border-radius: 2px; background: var(--stroke); overflow: hidden;}
.confidence__bar > span { display: block; height: 100%; background: var(--success); }
.confidence__bar.low > span { background: var(--warn);}

/* Waveform */
.waveform { display: flex; gap: 2px; align-items: center; height: 64px; padding: 0 4px;}
.waveform__bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--stroke-strong); transition: background 80ms;}
.waveform__bar.played { background: var(--primary-500);}
.waveform__bar.cursor { background: var(--primary-700) !important; box-shadow: 0 0 0 2px var(--primary-100);}

/* Audio player */
/* Base player layout — no visual chrome. The host card supplies the
   border / background; this rule is purely about positioning the
   controls. In an RTL document, default `flex: row` orders the
   children right-to-left (play first → rightmost, speed last → leftmost). */
.player {
  display: flex; align-items: center; gap: 14px;
}
.player--polished { /* reserved for any future visual tweaks */ }

/* Logical pairs: play + elapsed time on one side, total time + speed on
   the other. Each pair sits in its own pill so the eye reads them as a
   single control unit instead of three lonely items adrift. */
.player__group {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.player__group--start { padding-inline-end: 4px; }
.player__group--end   { padding-inline-start: 4px; }

.player__btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary-grad); color: white;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -6px var(--primary-500), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
  flex-shrink: 0;
}
.player__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -8px var(--primary-500); filter: brightness(1.06); }
.player__btn:active:not(:disabled) { transform: translateY(0); }
.player__btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.player__time {
  font-size: 13px;
  font-weight: 600;
  font-feature-settings: 'tnum';
  letter-spacing: 0.01em;
  color: var(--text-3);
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.player__time--now    { color: var(--primary-600, var(--primary-500)); }
.player__time--total  { color: var(--text-2); }

.player__speed {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.player__speed:hover { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-600, var(--primary-500)); }

.player__wave { flex: 1; min-width: 0; overflow: hidden; cursor: pointer; }

/* Sentiment timeline */
.sentiment-timeline { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--stroke);}
.sentiment-timeline > span { height: 100%;}
.sentiment-timeline > .pos { background: var(--sent-pos);}
.sentiment-timeline > .neg { background: var(--sent-neg);}
.sentiment-timeline > .neu { background: var(--sent-neu);}

/* Tabs */
/* In an RTL doc, default `flex: row` already orders tabs right-to-left
   (תמלול first → rightmost, סיכום last → leftmost). */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stroke); margin-bottom: 20px;}
.tab { padding: 10px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-3); font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: -1px;}
.tab.active { color: var(--primary-600); border-bottom-color: var(--primary-500); font-weight: 600;}
.tab:hover { color: var(--text-2);}

/* Toggle switch */
.switch { position: relative; width: 40px; height: 22px; background: var(--stroke-strong); border-radius: 11px; cursor: pointer; transition: background 120ms; border: 0; padding: 0;}
.switch.on { background: var(--primary-500);}
.switch::before { content: ''; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: right 120ms;}
.switch.on::before { right: 20px;}

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-2);}
.field input, .field select, .field textarea {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 120ms;
  text-align: right;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50);}

/* Focus ring for inline-styled inputs (tag/mention editors) — the inline
   styles can't express :focus, so this class adds the house focus affordance
   without overriding their existing inline border/padding. */
.ct-input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); outline: none; }

/* Layout variants for transcription page */
[data-tx-layout="default"] .tx-grid { grid-template-columns: 1.6fr 1fr; }
[data-tx-layout="wide"] .tx-grid    { grid-template-columns: 2.4fr 1fr; }
[data-tx-layout="focus"] .tx-grid   { grid-template-columns: 1fr; }
[data-tx-layout="focus"] .tx-side   { display: none;}

/* Scrollable area */
.scroll-area { overflow-y: auto; }
.scroll-area::-webkit-scrollbar { width: 6px;}
.scroll-area::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 3px;}

/* Animation */
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0);} }
.fade-in { animation: slideIn 200ms ease-out;}

@keyframes pulse { 0%,100% { opacity: 1;} 50% { opacity: 0.4;} }
.pulse { animation: pulse 1.6s ease-in-out infinite;}

@keyframes recordPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224, 57, 90, 0.5);} 50% { box-shadow: 0 0 0 10px rgba(224, 57, 90, 0);} }
.rec { animation: recordPulse 1.6s ease-out infinite;}

@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55);} 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0);} }
@keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.7);} 70% { box-shadow: 0 0 0 8px rgba(99,102,241,0);} 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0);} }

/* Live cursor */
.typing-cursor::after { content: '▎'; color: var(--primary-500); animation: pulse 800ms infinite; margin-right: 2px;}

/* ────────────────────────────────────────────────────────────────
   ─── Login screen + UserChip (Firebase Auth gate)
   ──────────────────────────────────────────────────────────────── */

.ct-login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(99,70,255,0.12), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(139,109,255,0.10), transparent 60%),
    var(--bg);
  z-index: 9999;
  padding: 24px;
}
.ct-login__card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: 40px 36px 32px;
  box-shadow: var(--shadow-lg);
  text-align: right;
}
/* Brand block — centered wordmark at the top of the card. A subtle
   divider beneath it separates the logo from the welcome copy without
   adding clutter. */
.ct-login__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--stroke);
}
.ct-login__brand--stacked {
  gap: 8px;
}
.ct-login__brand--stacked p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
}
.ct-login__logo {
  display: block;
  height: 52px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
  object-position: center;
}
.ct-login__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary-grad);
  box-shadow: 0 0 0 4px var(--primary-50);
  display: inline-block;
}
.ct-login__card h1 {
  font-size: 26px; font-weight: 700;
  margin: 0 0 6px; letter-spacing: -0.02em;
  color: var(--text);
  text-align: right;
}
.ct-login__sub {
  margin: 0 0 24px;
  color: var(--text-3);
  font-size: 14px;
  text-align: right;
  line-height: 1.55;
}
.ct-login__form {
  display: flex; flex-direction: column; gap: 16px;
}
.ct-login__form label {
  display: flex; flex-direction: column;
  font-size: 13px; color: var(--text-2); font-weight: 600; gap: 8px;
  text-align: right;
}
.ct-login__form input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  text-align: right;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.ct-login__form input::placeholder { color: var(--text-3); opacity: 0.7; }
.ct-login__form input:hover { border-color: var(--stroke-strong); }
.ct-login__form input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100, rgba(99,70,255,0.15));
}
/* Suppress the browser's blue/yellow autofill wash — keeps the card
   visually clean when Chrome restores saved credentials. */
.ct-login__form input:-webkit-autofill,
.ct-login__form input:-webkit-autofill:hover,
.ct-login__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
/* RTL password row: input fills the line; toggle pill is the LAST DOM
   child so default flex-row in an RTL doc anchors it to the LEFT (away
   from where the text starts). Old layout had the toggle in the way of
   the field, which felt off. */
.ct-login__pwd-row {
  display: flex; gap: 8px; align-items: stretch;
}
.ct-login__pwd-row input { flex: 1; }
.ct-login__pwd-toggle {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 0 16px;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  min-width: 64px;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.ct-login__pwd-toggle:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-700, var(--primary-500)); }
.ct-login__error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: #94203a;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
}
.ct-login__submit {
  background: var(--primary-grad);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  font-family: inherit;
  box-shadow: 0 8px 22px -6px var(--primary-500), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 120ms, filter 120ms, box-shadow 120ms;
  letter-spacing: 0.01em;
}
.ct-login__submit:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--primary-500), inset 0 1px 0 rgba(255,255,255,0.22); }
.ct-login__submit:active { transform: translateY(0); }
.ct-login__submit:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
.ct-login__foot {
  margin: 24px 0 0;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.ct-login__foot a, .ct-login__foot button { color: var(--primary-600, var(--primary-500)); }
.ct-login__spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--primary-100);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: ct-login-spin 800ms linear infinite;
}
@keyframes ct-login-spin { to { transform: rotate(360deg); } }

/* ── UserChip — used inside the existing shell ────────────────── */
.ct-userchip {
  display: inline-flex; align-items: center; gap: 10px;
  flex-direction: row-reverse;
  padding: 6px 10px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.ct-userchip__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary-grad);
  color: white;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.ct-userchip__info {
  display: flex; flex-direction: column;
  line-height: 1.2;
  font-size: 12px;
  min-width: 0;
}
.ct-userchip__info b {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.ct-userchip__info span { color: var(--text-3); }
.ct-userchip__logout {
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  margin-right: 4px;
}
.ct-userchip__logout:hover {
  background: var(--danger-bg); border-color: var(--danger); color: var(--danger);
}

/* ── Data-source chip (now docked at TOP-LEFT, well clear of the
 *    right-side sidebar). Previously top: 14px / left: 18px overlapped
 *    the sticky sidebar's brand area on viewports where the sidebar's
 *    real width changed (responsive collapses). Keep it tight to the
 *    edge so it never bleeds into the main content either. ─────────── */
.ct-source-chip {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 9000;
  display: inline-flex; align-items: center; gap: 8px;
  flex-direction: row-reverse;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
/* On viewports where the sidebar collapses to a bottom rail, hide the
   chip entirely — the same info now lives in the user menu. */
@media (max-width: 899px) {
  .ct-source-chip { display: none !important; }
}
.ct-source-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 168, 107, 0.16);
  display: inline-block;
  animation: ct-chip-pulse 1.6s ease-in-out infinite;
}
.ct-source-chip__dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(217, 122, 22, 0.16); }
.ct-source-chip--live  { border-color: rgba(22, 168, 107, 0.35); }
.ct-source-chip--mock  { border-color: rgba(217, 122, 22, 0.35); }
@keyframes ct-chip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: .75; }
}

/* ── Empty-state overlay (live mode, no calls yet) ────────────── */
.ct-empty-tenant {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  padding: 40px 24px;
  color: var(--text);
}
.ct-empty-tenant__icon {
  font-size: 64px;
  margin-bottom: 14px;
  filter: grayscale(0.2);
}
.ct-empty-tenant h2 {
  font-size: 24px; font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ct-empty-tenant p {
  max-width: 540px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 6px 0;
}
.ct-empty-tenant code {
  background: var(--bg-deep);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--primary-600);
  font-weight: 500;
}
.ct-empty-tenant__err {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: #94203a;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  max-width: 480px;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE — viewport-driven layout
   ─────────────────────────────────────────────────────────────────────────
   Activated for real 2026-07-29 (operator request: full mobile adaptation).
   Until then CallTranscribe.html pinned the viewport to width=1440, so none
   of these tiers ever ran on a phone — the meta is now device-width.

   Screens use heavy INLINE styles (style={{gridTemplateColumns:…}}), so the
   sanctioned trick here is attribute-substring selectors + !important
   (div[style*="…"]) matching the SERIALIZED style attribute — hyphenated
   property names (grid-template-columns), value fragments kept short enough
   to survive engine re-serialization (e.g. "minmax(0" not "minmax(0,").
   Desktop rules above this banner are untouched; everything below is
   media-scoped, so ≥1440px stays pixel-identical.

   Breakpoints:
     XXL ≥1920px  — ultra-wide desktops: cap main content width, center it
     XL  ≥1440px  — large desktops: default layout
     LG  1200-1439 — standard laptops: tighten paddings
     MD  900-1199  — small laptops: narrow sidebar, smaller font
     SM  600-899   — tablets: collapse sidebar to icon-only rail
     XS  <600px    — phones: stack everything, hide sidebar nav labels
   ───────────────────────────────────────────────────────────────────────── */

/* XXL — center content on ultra-wide monitors so lines don't get unreadable */
@media (min-width: 1920px) {
  .main {
    padding: 28px 48px 36px 48px;
  }
  .main > * {
    max-width: 1760px;
    margin-inline: auto;
  }
}

/* LG — tighten padding so KPIs fit without overflow on 1366×768 laptops */
@media (max-width: 1439px) and (min-width: 1200px) {
  .main { padding: 16px 18px 24px 18px; }
  .stat__value { font-size: 26px; }
}

/* MD — sidebar gets narrower, font scales down */
@media (max-width: 1199px) and (min-width: 900px) {
  .sidebar { flex: 0 0 180px; width: 180px; }
  .main { padding: 14px 16px 20px 16px; }
  .stat__value { font-size: 22px; }
  /* 4-column KPI grids reflow to 2 columns */
  .stat-grid-4,
  div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* Dynamic KPI rows written as repeat(N, minmax(0, 1fr)) — N is computed at
     runtime (stats.length), so we can't enumerate it; match the minmax()
     fragment instead. "minmax(0" (no closing paren) also survives engines
     that serialize the 0 as 0px in the style attribute. */
  /* 2, not 3: with the 180px sidebar the content column is ~820px, so a
     4-card KPI row rendered 3 + 1 orphan (visual QA at 1024, 2026-07-29)
     and the orphan's label wrapped against its details link. 2x2 is
     balanced and leaves each card room for its "click for details" row. */
  div[style*="minmax(0"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* SM — sidebar becomes an icon-rail; main content takes the rest */
@media (max-width: 899px) {
  .app { flex-direction: column-reverse; }
  .sidebar {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    position: sticky;
    bottom: 0;
    top: auto;
    margin: 0;
    border-radius: 0;
    flex-direction: row;
    padding: 8px;
    z-index: 100;
  }
  .sidebar__brand { display: none; }
  /* Keep the user chip on the rail (avatar + cog only) — hiding it entirely
     removed the ONLY sign-out / password-reset entry point on phones. */
  .sidebar__user { border-top: 0; padding-top: 0; margin-top: 0; flex: 0 0 auto; gap: 6px; }
  .sidebar__user-info { display: none; }
  /* The account menu is an inline-styled popover stretched to the chip's
     width (left:0 + right:0). On the narrow rail chip that would be ~70px —
     keep the left anchor, drop the right one, give it a readable width. */
  .sidebar__user > div[style*="bottom"] {
    right: auto !important;
    width: 240px;
    max-width: calc(100vw - 24px);
  }
  .sidebar__nav { flex-direction: row; gap: 2px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  /* width:auto — the desktop rule sets .nav-item { width:100% }, which on a
     horizontal rail makes EVERY tab viewport-wide. flex-basis:auto reads the
     width property, so it must be reset here, not just the flex shorthand. */
  .sidebar__nav > button { flex: 0 0 auto; width: auto; padding: 6px 10px !important; font-size: 11px; }
  .sidebar__nav .nav-icon { width: 14px; height: 14px; }
  .nav-label { display: none; }   /* labels hidden on phones; icon-only */
  .main { padding: 12px; }

  /* Any grid > 2 cols collapses to 2 */
  div[style*="repeat(2, 1fr)"],
  div[style*="repeat(3, 1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(5, 1fr)"],
  div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="1.5fr 1fr"],
  div[style*="2fr 1fr"],
  div[style*="auto 1fr"] { grid-template-columns: 1fr !important; }
  /* Dynamic repeat(N, minmax(0, 1fr)) KPI rows → 2 columns (see MD note). */
  div[style*="minmax(0"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Transcription page: the transcript/side split comes from the
     [data-tx-layout] class rules (not inline styles) — stack the columns. */
  .tx-grid { grid-template-columns: 1fr !important; }

  .stat__value { font-size: 20px; }
  .card__head h3 { font-size: 14px; }
  .table { font-size: 11px; }
  .table th, .table td { padding: 6px 8px; }
  /* Each table becomes its own horizontal scroll container so a wide table
     pans inside its card instead of dragging the whole page sideways.
     (display:block on <table> wraps the row boxes in an anonymous table
     box that overflows — the classic responsive-table pattern.) */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* XS — phones */
@media (max-width: 600px) {
  .main { padding: 8px; }
  /* Everything single-column. Beyond the enumerated repeat(N, 1fr) grids:
     - minmax(0 …)   → dynamic repeat(N, minmax(0,1fr)) KPI rows
     - minmax(420px  → auto-fit category cards whose 420px min column is
                       wider than the whole phone viewport (would overflow)
     - "1fr 1fr", "240px 1fr" → two-column layouts written literally
       (NOT covered by the repeat() selectors; "1.5fr 1fr" does not
       contain the substring "1fr 1fr", so weights stay distinct at SM) */
  div[style*="repeat(2, 1fr)"],
  div[style*="repeat(3, 1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(5, 1fr)"],
  div[style*="repeat(6, 1fr)"],
  div[style*="minmax(0"],
  div[style*="minmax(420px"],
  div[style*="1fr 1fr"],
  div[style*="240px 1fr"] { grid-template-columns: 1fr !important; }
  .stat__value { font-size: 18px; }
  .card { padding: 12px; }
  .card__head h3 { font-size: 13px; }
  .card__head p { font-size: 10px; }

  /* Make the top bar wrap so the title doesn't overflow */
  .topbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar h2 { font-size: 16px; }
  .topbar > * { flex-basis: auto; }

  /* Transcription bubbles fill width */
  .bubble {
    max-width: 95% !important;
  }

  /* Safety net — nothing may drag the page sideways on phones. The real
     fixes are the grid/table rules above; this only catches stragglers. */
  html, body { overflow-x: hidden; }

  /* Inline min-widths (search boxes, filter pills, drill-down columns…)
     were sized for the 1440px layout — remove the floor so flex/grid can
     shrink them. DIV-only and .main-scoped on purpose: inputs, buttons and
     spans (weight fields, score badges, chips) keep their own minimums. */
  .main div[style*="min-width"] { min-width: 0 !important; }

  /* Top-bar filters (date range, period pills, dept/agent pickers, search):
     on phones each control takes a FULL row of its own, so the header reads
     as one tidy stacked filter panel instead of ragged part-width pills
     hugging one edge (operator screenshot at ~500px, 2026-07-29). */
  .topbar__actions { flex-wrap: wrap; width: 100%; }
  .topbar__actions > * { width: 100%; }
  /* Period pills share the row equally — a segmented control. */
  .topbar__actions .btn--sm { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; }
  /* Date inputs stretch so the מ-/עד range fills its row. */
  .topbar__actions input[type="date"] { flex: 1 1 0; min-width: 0; }
  .ct-dept-picker { width: 100%; }
  .ct-dept-picker__select { min-width: 0; flex: 1 1 auto; }
  .search { min-width: 0; flex: 1 1 auto; }
  .search .chip { display: none; }   /* ⌘K shortcut hint — meaningless on touch */

  /* Login card — tighter padding on small phones (card is already
     max-width:440 + centered, so the viewport fix does the rest). */
  .ct-login__card { padding: 28px 20px 24px; }
}

/* Common: prevent any element from overflowing horizontally on small viewports */
@media (max-width: 1199px) {
  svg[viewBox] {
    max-width: 100%;
    height: auto;
  }
  pre, code {
    word-break: break-word;
    white-space: pre-wrap;
  }
}

/* ── Top bar overflow fix (visual QA at 1024/820, 2026-07-29) ──────────
   The header row is [title][date filter][period pills][dept picker] on a
   single nowrap flex line sized for 1440px. Between ~600px and ~1400px it
   was WIDER than the viewport, and because the document is RTL the excess
   ran off to the LEFT and got clipped — the moked picker literally
   disappeared off-screen. (The ≤600 tier already wrapped; everything in
   between did not.) Wrapping the row and letting its children shrink is
   the whole fix; at ≥1400px there is room to spare, so desktop is
   unchanged either way. */
@media (max-width: 1399px) {
  .topbar          { flex-wrap: wrap; row-gap: 10px; }
  .topbar__actions { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
  .topbar > *      { min-width: 0; }
  /* The spacer's `flex:1` would otherwise reserve a full line for itself
     once the row wraps, pushing the filters down and leaving a gap. */
  .topbar__spacer  { display: none; }
}

/* ── Fluid-by-default (operator directive, 2026-07-29) ─────────────────
   "It should be automatic — don't chase resolutions." The layout must
   hold at ANY window size the customer picks, not only at enumerated
   breakpoints. Two width-independent invariants deliver that; the media
   tiers above remain only to choose layout DENSITY (how many columns),
   never to prevent breakage.

   1. No element may refuse to shrink. Grid/flex children default to
      min-width:auto — they hold their content width, force the track
      wider than the viewport, and in RTL the overflow runs LEFT and is
      clipped (this is exactly how the "נציגים מובילים" card vanished at
      ~1260px). min-width:0 lets tracks share whatever space exists; at
      full width nothing changes because nothing needs to shrink. */
div[style*="grid-template-columns"] > * { min-width: 0; }

/* 2. A wide table pans inside its own card at every width instead of
      dragging the page sideways. width:100% keeps it filling the card
      when content is narrow; the scrollbar appears only when needed. */
.card > .table,
.card .table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}

/* Dashboard — volume-chart drill-down modal table: must fit its container
   with no horizontal scroll. Overrides the global .table nowrap so columns
   may wrap/shrink instead of overflowing. */
.table--fit { width: 100%; }
.table--fit th, .table--fit td { white-space: normal; overflow-wrap: anywhere; }