/* SaleSee - sales and goals. RTL, offline (no CDNs).
   Brand: deep navy, mauve "Sale", white "See". */

:root {
  --font-display: "Segoe UI", system-ui, Arial, sans-serif;
  /* brand */
  --brand: #d49ab9;            /* mauve - "Sale" */
  --brand-strong: #9c4f77;     /* mauve for text on white */
  --brand-deep: #172440;       /* navy */
  --brand-soft: #f7edf2;
  --brand-light: #e9cfdd;      /* the Hebrew line on navy */
  --navy: #172440;
  /* surfaces & ink */
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --surface-3: #eceff4;
  --ink: #161f36;
  --ink-2: #454e63;
  --muted: #687385;
  --line: #e1e5ec;
  --line-strong: #cbd2dd;
  --grid: #edf0f3;
  /* interactive = navy; mauve stays an accent so it never competes with "below target" red */
  --primary: #172440;
  --primary-hover: #0f1830;
  --primary-ink: #ffffff;
  --primary-soft: #e9ecf3;
  /* product identity - none of them shares a hue with the status colours */
  --pension: #2f5fa7;
  --insurance: #1f9d8b;
  --finance: #b5607c;
  --previous: #b4bec9;
  /* status - reserved for meaning, always with icon + label */
  --good: #0f8a3c;
  --good-soft: #e5f5eb;
  --warn: #b26a00;
  --warn-fill: #f2a516;
  --warn-soft: #fdf3df;
  --bad: #c73434;
  --bad-soft: #fbe9e9;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); font-size: 14px; line-height: 1.5; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 0; }
h3 { font-size: 14px; margin: 0; }
p { margin: 0 0 12px; }
a { color: var(--primary); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ltr { direction: ltr; unicode-bidi: plaintext; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 60px; background: var(--navy); color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; flex: none; }
.wordmark { font-family: "Segoe UI", system-ui, Arial, sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -.4px; line-height: 1;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.wm-sale { color: var(--brand); }
.wm-see { color: #fff; }
.mainnav { display: flex; gap: 2px; flex: 1; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  display: flex; align-items: center; padding: 0 14px; color: rgba(255, 255, 255, .72); text-decoration: none; font-weight: 600; font-size: 14px;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent; white-space: nowrap;
}
.mainnav a:hover { color: #fff; }
.mainnav a.active { color: #fff; border-bottom-color: var(--brand); }
.userbox { display: flex; align-items: center; gap: 10px; flex: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand); color: var(--navy); font-weight: 700; font-size: 14px;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.25; color: #fff; text-decoration: none; }
.user-name { font-weight: 600; font-size: 13px; }
.user-role { font-size: 12px; color: rgba(255, 255, 255, .62); }
.topbar .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; }
.topbar .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.userbox form { margin: 0; }

/* -------------------------------------------------------------------- page */
.page { max-width: 1200px; margin: 0 auto; padding: 24px 24px 56px; }
.page-wide { max-width: 1500px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 720px; }
.page-head h1 { color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 28px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.card-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; flex-wrap: wrap; }
.section-title:first-child { margin-top: 4px; }
.section-title h2 { font-size: 17px; color: var(--navy); }
.section-title .muted { font-size: 13px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 8px 16px; cursor: pointer; text-decoration: none; line-height: 1.3; transition: background .15s, border-color .15s;
}
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-danger-ghost { background: var(--surface); border-color: #efc2c2; color: var(--bad); }
.btn-link { background: none; border: 0; color: var(--primary); cursor: pointer; font: inherit; font-weight: 600; padding: 4px 6px; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 15px; padding: 6px 9px; border-radius: 6px; }
.btn-icon:hover { color: var(--bad); background: var(--bad-soft); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------------------------------- forms */
input, select {
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 10px; min-width: 0; height: 38px;
}
input:hover, select:hover { border-color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--primary); }
label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: end; }
.span-all { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.row-actions form { margin: 0; }

/* ------------------------------------------------------------ status, chips */
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 16px; }
.alert ul { margin: 6px 0 0; padding-inline-start: 18px; }
.alert-icon { font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; color: #fff; }
.alert-error { background: var(--bad-soft); color: #7a1f1f; border: 1px solid #f0c9c9; }
.alert-error .alert-icon { background: var(--bad); }
.alert-ok { background: var(--good-soft); color: #0e5a2a; border: 1px solid #bfe3cc; }
.alert-ok .alert-icon { background: var(--good); }
.alert-warn { background: var(--warn-soft); color: #6b4300; border: 1px solid #f1d9a8; }
.alert-warn .alert-icon { background: var(--warn-fill); color: #4a2f00; }

.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px;
  border-radius: 99px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; line-height: 1.6;
}
.badge-success, .badge-good { background: var(--good-soft); color: var(--good); }
.badge-rejected, .badge-failed, .badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }

.status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 10px 3px 8px; border-radius: 99px; white-space: nowrap;
}
.status i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; }
.status-good { background: var(--good-soft); color: var(--good); }
.status-good i { background: var(--good); }
.status-warn { background: var(--warn-soft); color: var(--warn); }
.status-warn i { background: var(--warn-fill); color: #4a2f00; }
.status-bad { background: var(--bad-soft); color: var(--bad); }
.status-bad i { background: var(--bad); }
.status-none { background: var(--surface-3); color: var(--muted); }
.status-none i { background: var(--previous); }

.pct-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; line-height: 18px; white-space: nowrap; }
.pct-chip.good { background: var(--good-soft); color: var(--good); }
.pct-chip.warn { background: var(--warn-soft); color: var(--warn); }
.pct-chip.bad { background: var(--bad-soft); color: var(--bad); }
.delta { font-weight: 700; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-inline-end: 7px; flex: none; }
.p-pension { --c: var(--pension); }
.p-insurance { --c: var(--insurance); }
.p-finance { --c: var(--finance); }
.prod { display: inline-flex; align-items: center; font-weight: 700; }

/* ------------------------------------------------------------------- login */
.login-body { background: var(--bg); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(420px, 100%); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 0 32px 30px;
  border: 1px solid var(--line); overflow: hidden; }
.login-hero { margin: 0 -32px 24px; padding: 30px 24px 26px; background: var(--navy); text-align: center; }
.login-hero .wordmark { font-size: 42px; }
.hero-en { margin-top: 14px; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .3px; }
.hero-he { margin-top: 8px; color: var(--brand-light); font-size: 15px; }
.login-hero-sm { padding: 20px 24px; }
.login-hero-sm .wordmark { font-size: 32px; }
.login-card .btn { width: 100%; padding: 11px; font-size: 15px; }
.login-card input { height: 42px; }
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-inline-end: 64px; }
.password-field button { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); font-size: 12px; }

/* ------------------------------------------------------------------ upload */
.steps { display: flex; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; padding-inline-end: 28px; position: relative; }
.steps li::before {
  counter-increment: step; content: counter(step); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--line-strong); font-size: 13px; background: var(--surface);
}
.steps li:not(:last-child)::after { content: ""; width: 18px; height: 2px; background: var(--line-strong); position: absolute; inset-inline-end: 5px; }
.steps li.done { color: var(--good); }
.steps li.done::before { content: "✓"; background: var(--good); border-color: var(--good); color: #fff; }
.steps li.current { color: var(--primary); }
.steps li.current::before { border-color: var(--primary); background: var(--primary); color: #fff; }

.source-grid { border: 0; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.source-grid legend { font-weight: 700; margin-bottom: 10px; font-size: 15px; }
.source-option {
  display: flex; flex-direction: column; gap: 6px; font-weight: 400; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s;
}
.source-option:hover { border-color: var(--line-strong); background: var(--surface-2); }
.source-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(30, 42, 70, .12); }
.source-option input { position: absolute; inset-inline-end: 14px; top: 16px; }
.source-title { font-weight: 700; font-size: 15px; padding-inline-end: 26px; }
.source-desc { color: var(--ink-2); font-size: 13px; }
.source-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.source-meta a { font-weight: 600; text-decoration: none; }
.source-meta a:hover { text-decoration: underline; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 26px 16px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2); font-weight: 400; transition: border-color .15s, background .15s; margin-bottom: 18px;
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone .dz-icon { font-size: 26px; line-height: 1; color: var(--primary); }
.dropzone .dz-main { font-weight: 700; color: var(--ink); font-size: 15px; }
.dropzone.has-file { border-style: solid; border-color: var(--good); background: var(--good-soft); }
.dropzone.has-file .dz-icon { color: var(--good); }

.confirm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.confirm-numbers div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.confirm-numbers b { display: block; font-size: 22px; }
.confirm-numbers span { color: var(--muted); font-size: 12px; }
.confirm-numbers .warn { background: var(--warn-soft); border-color: #f1d9a8; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.log-message { white-space: pre-line; }
details.inline-details summary { cursor: pointer; color: var(--primary); font-weight: 600; }

/* ------------------------------------------------------------------- users */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.search { position: relative; flex: 1 1 240px; max-width: 360px; }
.search input { width: 100%; padding-inline-start: 32px; }
.search::before { content: "⌕"; position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 16px; pointer-events: none; }
.user-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.user-row { border-bottom: 1px solid var(--line); }
.user-row:last-child { border-bottom: 0; }
.user-row > summary {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) 120px minmax(160px, 1.6fr) 90px 110px 24px;
  gap: 12px; align-items: center; padding: 12px 18px; cursor: pointer; list-style: none;
}
.user-row > summary::-webkit-details-marker { display: none; }
.user-row > summary:hover { background: var(--surface-2); }
.user-row[open] > summary { background: var(--primary-soft); }
.user-row .chev { color: var(--muted); transition: transform .2s; text-align: center; }
.user-row[open] .chev { transform: rotate(180deg); }
.user-head { display: grid; grid-template-columns: minmax(180px, 1.4fr) 120px minmax(160px, 1.6fr) 90px 110px 24px; gap: 12px; padding: 10px 18px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.user-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-name-cell .avatar { width: 30px; height: 30px; font-size: 13px; }
.user-name-cell b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-name-cell span { font-size: 12px; color: var(--muted); }
.scope-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.user-edit { padding: 18px; border-top: 1px solid var(--line); background: var(--surface); }
.user-edit-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.panel-title { font-weight: 700; margin-bottom: 10px; }
.user-row.inactive .user-name-cell b { color: var(--muted); }
.new-user { border: 1.5px solid var(--primary); }
.scope-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.scope-row { display: flex; gap: 6px; align-items: center; }
.scope-row select { width: 130px; flex: none; }
.scope-row input { flex: 1; }
.empty-scope { color: var(--warn); font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------------- table */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.data th {
  text-align: start; font-weight: 600; color: var(--muted); background: var(--surface-2); font-size: 12px;
  position: sticky; top: 0; z-index: 1; white-space: nowrap; border-bottom: 1px solid var(--line);
}
table.data th, table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: #f6f4f8; }
table.data td.num, table.data th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink); }
table.data th.sortable::after { content: " ↕"; opacity: .35; font-size: 11px; }
table.data th[aria-sort=ascending]::after { content: " ▲"; opacity: 1; color: var(--primary); }
table.data th[aria-sort=descending]::after { content: " ▼"; opacity: 1; color: var(--primary); }
table.data th.group { text-align: center; border-bottom: 1px solid var(--line); }
table.data th.group-start, table.data td.group-start { border-inline-start: 1px solid var(--line); }
table.data tr.row-flag td { background: #fff7f7; }
table.data tr.row-flag td:first-child { box-shadow: inset -3px 0 0 var(--bad); }
.cell-name { font-weight: 600; }
.cell-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.flag { color: var(--bad); font-weight: 700; }

/* value + bar, the number is never clipped by the bar */
.vbar { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.vbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vbar-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.vbar-track { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; display: flex; }
.vbar-track > i { display: block; height: 100%; background: var(--c, var(--primary)); border-radius: 99px; }
.vbar.neg .vbar-track > i { background: var(--bad); }
.vbar.pos .vbar-track > i { background: var(--good); }

/* -------------------------------------------------------------- dashboard */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; flex-wrap: wrap; box-shadow: var(--shadow); }
.tabs button {
  font: inherit; font-weight: 600; border: 0; background: none; color: var(--ink-2);
  padding: 8px 18px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected=true] { background: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
.freshness { display: flex; gap: 8px; flex-wrap: wrap; }
.fresh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; }
.fresh-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.fresh-chip.none::before { background: var(--previous); }

/* dashboard: filters in a full-height side panel at the right edge (RTL start), separated by a line */
:root { --side-w: 260px; }
.dash-body { display: block; }
.dash-main { min-width: 0; }
.filters-side {
  position: fixed; top: 64px; bottom: 0; inset-inline-start: 0; width: var(--side-w); z-index: 10;
  background: var(--surface); border-inline-end: 1px solid var(--line); overflow-y: auto;
}
body.has-filters-side:not(.no-filters) main.page { max-width: none; margin-inline-start: var(--side-w); margin-inline-end: 0; }
/* the content keeps a readable width on wide screens: charts are SVGs that grow with their width */
body.has-filters-side main.page > * { max-width: 1440px; margin-inline: auto; }
body.no-filters .filters-side { display: none; }
.filters { padding: 20px 18px 28px; display: flex; flex-direction: column; gap: 14px; }
.filters-title { font-weight: 700; color: var(--navy); font-size: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.filters label { display: block; width: 100%; }
.filters label select, .filters label input { width: 100%; }
.filters [hidden] { display: none !important; }
.filters #f-reset { width: 100%; }
.period-group { display: flex; flex-direction: column; gap: 5px; }
.months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.months button {
  font: inherit; font-size: 13px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  border-radius: 7px; padding: 0 4px; height: 32px; cursor: pointer; min-width: 0; transition: all .12s;
}
.months .all-year { grid-column: 1 / -1; }
.months button:hover { border-color: var(--primary); color: var(--primary); }
.months button[aria-pressed=true] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.months .all-year { font-weight: 700; padding: 0 12px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.af-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-soft); color: var(--primary); border-radius: 99px; padding: 2px 4px 2px 10px; font-weight: 600; }
.af-chip.static { padding: 2px 10px; background: var(--surface-3); color: var(--ink-2); }
.af-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 13px; width: 20px; height: 20px; border-radius: 50%; padding: 0; }
.af-chip button:hover { background: rgba(30, 42, 70, .15); }

.view { transition: opacity .15s; }
.view.is-loading { opacity: .45; pointer-events: none; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid > .card { margin-bottom: 0; }
/* grid with titles over its columns: the main title over pension+risks, a side title over finance */
.grid-titled { margin-top: 26px; row-gap: 0; }
.grid-titled > .card { order: 1; margin-top: 16px; }
.grid-titled > .section-title { margin: 0; }
.grid-titled > .gt-main { grid-column: span 2; }
@media (max-width: 1100px) {
  .grid-titled > .gt-main { grid-column: 1 / -1; }
  .grid-titled > .gt-side { grid-column: 1 / -1; order: 2; margin-top: 26px; }
  .grid-titled > .gt-finance { order: 3; }
}

/* headline banner */
.headline {
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  position: relative; overflow: hidden; padding-inline-start: 24px;
}
.headline-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy); }
.headline-items { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.headline-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* KPI cards */
.kpi { position: relative; overflow: hidden; padding-top: 20px; }
.kpi-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-name { font-size: 16px; }
.kpi-main { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 2px; }
.kpi-pct { font-size: 40px; font-weight: 700; line-height: 1; direction: ltr; letter-spacing: -1px; }
.kpi-pct-label { color: var(--muted); font-size: 13px; }
.meter { position: relative; height: 10px; border-radius: 99px; background: var(--surface-3); margin: 14px 0 6px; }
.meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; background: var(--meter, var(--primary)); }
.meter > b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.meter-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.meter.good { --meter: var(--good); }
.meter.warn { --meter: var(--warn-fill); }
.meter.bad { --meter: var(--bad); }
.kpi-rows { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 13px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.kpi-rows dt { color: var(--muted); }
.kpi-rows dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-rows dd.strong { font-size: 15px; }

/* stat tiles */
.tile-value { font-size: 28px; font-weight: 700; margin: 6px 0 2px; line-height: 1.1; }
.tile-sub { color: var(--muted); font-size: 13px; }
.tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.tile-trend { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }

/* charts */
.chart-card .card-head { margin-bottom: 6px; }
.chart-total { font-size: 20px; font-weight: 700; direction: ltr; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: inherit; fill: var(--muted); font-size: 11px; }
.chart .grid-line { stroke: var(--grid); }
.chart .base-line { stroke: var(--line-strong); }
.chart .bar-label { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.chart rect.hit { fill: transparent; cursor: default; }
.chart rect.hit:hover { fill: rgba(30, 42, 70, .07); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); margin: 0 0 6px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-inline-end: 6px; }
.tip {
  position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px;
  padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow-lg); white-space: pre-line; line-height: 1.5;
  opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s; max-width: 260px;
}
.tip.show { opacity: 1; transform: none; }

.toggle-group { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 3px; gap: 2px; }
.toggle-group button { font: inherit; font-size: 12px; font-weight: 600; border: 0; background: none; color: var(--ink-2); padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.toggle-group button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.table-search { height: 34px; font-size: 13px; width: 200px; }

.matrix td.val { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.matrix td.val.empty-cell { color: var(--line-strong); }
.matrix td:first-child, .matrix th:first-child { position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 2; box-shadow: -1px 0 0 var(--line) inset; }
.matrix th:first-child { background: var(--surface-2); z-index: 3; }

.empty-state { text-align: center; padding: 48px 20px; }
.empty-state h1, .empty-state h2 { margin-bottom: 6px; }
.empty-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; margin: 0 auto 14px; font-size: 22px; font-weight: 700; }

/* ------------------------------------------------------------------- guide */
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-toc { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.guide-toc a { padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.guide-toc a:hover { background: var(--surface-2); color: var(--primary); }
.guide section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; scroll-margin-top: 80px; }
.guide h2 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.guide h2 .n { width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 13px; }
.guide ul, .guide ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.guide .facts { grid-template-columns: 110px 1fr; gap: 10px 16px; }
.guide .facts dt { font-weight: 700; color: var(--ink); }
.legend-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .user-edit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .user-head { display: none; }
  .user-row > summary { grid-template-columns: 1fr auto 24px; }
  .user-row > summary .hide-sm { display: none; }
}
@media (max-width: 720px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .brand-text, .user-meta { display: none; }
  .page { padding: 16px 16px 40px; }
  .facts, .guide .facts { grid-template-columns: 1fr; }
  .kpi-pct { font-size: 34px; }
  .tabs { width: 100%; }
  .tabs button { flex: 1 1 auto; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* chart beside its table (comparisons) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.months button.no-data { border-style: dashed; color: var(--muted); background: var(--surface-2); }
.months button.no-data[aria-pressed=true] { color: var(--primary-ink); }
.matrix td:first-child { white-space: nowrap; }
.filters-toggle { display: none; }
@media (max-width: 900px) {
  .filters-side { position: static; width: auto; border-inline-end: 0; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
  body.has-filters-side:not(.no-filters) main.page { margin-inline-start: auto; }
}
@media (max-width: 720px) {
  .filters-toggle { display: inline-flex; width: 100%; margin-bottom: 8px; }
  .filters:not(.open) { display: none; }
  .freshness { width: 100%; }
}

/* ---------------------------------------------------------------- assistant */
.as-fab {
  position: fixed; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: grab;
  background: var(--navy); color: #fff; display: grid; place-items: center; touch-action: none;
  box-shadow: 0 6px 18px rgba(185, 38, 79, .38); transition: transform .15s, box-shadow .15s;
}
.as-fab:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(185, 38, 79, .5); }
.as-fab:active { cursor: grabbing; }
.as-fab.is-open { background: var(--navy); }
.as-panel {
  position: fixed; z-index: 61; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.as-panel[hidden] { display: none; }
.as-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--navy); color: #fff; position: relative; }
.as-head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--brand); }
.as-head-brand { display: flex; align-items: center; gap: 10px; }
.as-head-brand img { width: 30px; height: 30px; background: #fff; border-radius: 50%; padding: 3px; }
.as-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.as-sub { font-size: 12px; opacity: .85; }
.as-head-actions { display: flex; align-items: center; gap: 4px; }
.as-head .btn-link { color: #fff; font-size: 12px; opacity: .9; }
.as-close { background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; }
.as-close:hover { background: rgba(255, 255, 255, .15); }
.as-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.as-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.as-msg p { margin: 0 0 6px; }
.as-msg p:last-child { margin-bottom: 0; }
.as-msg ul { margin: 4px 0 6px; padding-inline-start: 16px; display: flex; flex-direction: column; gap: 4px; }
.as-user { align-self: flex-start; background: var(--navy); color: #fff; border-end-start-radius: 4px; }
.as-bot { align-self: flex-end; background: var(--surface); border: 1px solid var(--line); border-end-end-radius: 4px; }
.as-status { font-size: 11px; padding: 1px 7px 1px 5px; vertical-align: 1px; }
.as-status i { width: 13px; height: 13px; font-size: 9px; }
.as-scope { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.as-note { margin-top: 4px; font-size: 11.5px; color: var(--ink-2); }
.as-did { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.as-chip { font-size: 11px; background: var(--brand-soft); color: var(--brand-strong); border-radius: 99px; padding: 1px 8px; font-weight: 600; }
.as-undo { font-size: 12px; margin-inline-start: auto; }
.as-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.as-opt {
  font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--primary); border-radius: 99px; padding: 4px 10px; cursor: pointer; text-decoration: none; text-align: start;
}
.as-opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.as-link { background: var(--primary); color: #fff; border-color: var(--primary); }
.as-link:hover { background: var(--primary-hover); }
.as-typing { display: flex; gap: 4px; padding: 12px 14px; }
@keyframes asDot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.as-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.as-input { flex: 1; }
.as-send { padding: 8px 14px; }
/* pointing at the answer on the page */
.as-flash { animation: asFlash 6s ease forwards; border-radius: var(--radius); }
@keyframes asFlash {
  0% { box-shadow: 0 0 0 0 rgba(242, 165, 22, 0); }
  8% { box-shadow: 0 0 0 4px rgba(242, 165, 22, .85); }
  80% { box-shadow: 0 0 0 4px rgba(242, 165, 22, .6); }
  100% { box-shadow: 0 0 0 0 rgba(242, 165, 22, 0); }
}
tr.as-row td { animation: asRow 6s ease forwards; }
@keyframes asRow { 0%, 80% { background: #fff1cc; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .as-flash, tr.as-row td { animation-duration: .01s; } }
.as-msg .delta { direction: rtl; unicode-bidi: normal; }

/* ------------------------------------------------- medals: places 1, 2, 3 */
.medal {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11.5px; font-weight: 800; line-height: 1; vertical-align: middle; margin-inline-end: 8px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .18);
}
.medal-cell { display: inline-flex; align-items: center; }
.as-msg .medal { width: 19px; height: 19px; font-size: 10.5px; margin-inline-end: 6px; }
.as-msg li:has(> .medal) { list-style: none; margin-inline-start: -16px; }

/* ------------------------------------------- KPI cards: target hit or missed */
.kpi-pct.good { color: var(--good); }
.kpi-pct.warn { color: var(--warn); }
.kpi-pct.bad  { color: var(--bad); }


.tmeter { margin: 16px 0 2px; }
.tmeter-track { position: relative; height: 12px; border-radius: 99px; background: var(--surface-3); }
.tmeter-track i { position: absolute; inset-block: 0; }
.tmeter-fill { inset-inline-start: 0; border-radius: 99px; background: var(--c, var(--primary)); }   /* product colour */
[dir=rtl] .tmeter-over { border-radius: 99px 0 0 99px; }
.tmeter-target { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--navy); box-shadow: 0 0 0 2px var(--surface); }
.tmeter-labels { position: relative; height: 18px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.tmeter-labels span { position: absolute; top: 0; white-space: nowrap; }
.tmeter-target-label { transform: translateX(50%); font-weight: 700; color: var(--navy); }

/* ---------------------------------- agent tables: achievement bar per cell */
.ach { display: flex; flex-direction: column; gap: 4px; min-width: 128px; text-align: start; }
.ach-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ach-track { position: relative; height: 7px; border-radius: 99px; background: var(--surface-3); }
.ach-track i { position: absolute; inset-block: 0; }
.ach-target { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--navy); }
.ach-sub { font-size: 11px; color: var(--muted); }

/* very light tint of agent x product cells by goal status (wins over medal row tint) */
table.data tr td.st-good { background: #eef8f2; }
table.data tr td.st-warn { background: #fdf6e6; }
table.data tr td.st-bad  { background: #fcefef; }
table.data tbody tr:hover td.st-good { background: #e3f3e9; }
table.data tbody tr:hover td.st-warn { background: #fbefd5; }
table.data tbody tr:hover td.st-bad  { background: #f9e3e3; }

/* ======================================================= spec 0.17 additions */
.userbox .user-meta { text-decoration: none; color: inherit; border-radius: 6px; padding: 2px 4px; }
.userbox .user-meta:hover { background: var(--surface-2); }

/* KPI row (summary, detail, goals, proposals, agreements, data screens) */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; position: relative; overflow: hidden; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.15; margin-top: 4px; direction: ltr; text-align: right; }
.stat.st-good .stat-value { color: var(--good); }
.stat.st-bad .stat-value { color: var(--bad); }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card .stat-row { margin-bottom: 14px; }
.card .stat { box-shadow: none; background: var(--surface-2); }

/* summary: month bars in each branch card, drill-down, freshness strip */
.minibars { width: 100%; height: auto; display: block; margin: 12px 0 0; }
.minibars .mb-label { font-size: 12px; fill: var(--muted); }
.minibars rect.hit { fill: transparent; }
.minibars rect.hit:hover { fill: rgba(30, 42, 70, .06); }
.kpi-drill { margin-top: 12px; width: 100%; }
table.data tr.row-click { cursor: pointer; }
table.data tr.row-click:focus-visible td { background: var(--primary-soft); }
.drill { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--brand-soft); }
.drill-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fresh-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 8px; font-size: 12px; }
.fresh-strip-title { font-weight: 700; color: var(--navy); margin-inline-end: 4px; }
.fresh-pill { display: inline-flex; gap: 6px; align-items: center; border-radius: 99px; padding: 2px 10px; background: var(--good-soft); color: #0e5a2a; }
.fresh-pill.late { background: var(--warn-soft); color: #6b4300; }
.fresh-pill b { font-variant-numeric: tabular-nums; }
.prods { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.row-trend { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: middle; }
.branch-picker .dot { margin-inline-end: 5px; }
.branch-picker button { display: inline-flex; align-items: center; gap: 4px; }

/* promotions */
.tier-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: 13px; }
.tier-chip b { color: var(--navy); }

/* data management sub navigation (same look as the dashboard tabs) */
.subnav { margin-bottom: 18px; }
.subnav a { font-weight: 600; text-decoration: none; color: var(--ink-2); padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.subnav a:hover { color: var(--ink); background: var(--surface-2); }
.subnav a[aria-current=page] { background: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
.page-head .who { font-size: 12px; font-weight: 600; color: var(--brand-strong); background: var(--brand-soft); border-radius: 99px; padding: 2px 10px; }

/* Excel-like grid editor (spec 4.13) */
.grid-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.grid-toolbar .spacer { flex: 1; }
.grid-status { font-size: 12px; color: var(--muted); }
.grid-status.dirty { color: var(--warn); font-weight: 700; }
.egrid-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
table.egrid { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
table.egrid th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; text-align: start; padding: 7px 8px; border-bottom: 1px solid var(--line-strong); border-inline-end: 1px solid var(--line); white-space: nowrap; }
table.egrid th .req { color: var(--bad); }
table.egrid td { border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); padding: 0; vertical-align: middle; background: var(--surface); }
table.egrid td.rownum { color: var(--muted); font-size: 11px; text-align: center; padding: 0 6px; background: var(--surface-2); min-width: 34px; }
table.egrid input, table.egrid select { border: 0; border-radius: 0; height: 32px; width: 100%; padding: 4px 8px; background: transparent; font-size: 13px; }
table.egrid input:focus, table.egrid select:focus { outline: 2px solid var(--primary); outline-offset: -2px; background: #fff; }
table.egrid td.ro { padding: 4px 8px; color: var(--ink-2); font-size: 12px; background: var(--surface-2); }
table.egrid tr.is-new td { background: #f3f8ff; }
table.egrid tr.is-changed td { background: #fffbea; }
table.egrid tr.is-deleted td { background: #fdeeee; text-decoration: line-through; opacity: .7; }
table.egrid tr.flag-row td:nth-child(2) { box-shadow: inset -3px 0 0 var(--bad); }
table.egrid td.has-error { background: var(--bad-soft) !important; box-shadow: inset 0 0 0 2px var(--bad); }
table.egrid td.cell-changed input, table.egrid td.cell-changed select { font-weight: 700; }
table.egrid .row-del { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px 8px; font-size: 13px; }
table.egrid .row-del:hover { color: var(--bad); }
.grid-errors { margin-top: 10px; }
.grid-errors li { font-size: 13px; }
.hint-line { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); }
.changes-list { font-size: 12px; }
.changes-list td { vertical-align: top; }
.changes-list .chg { display: block; }
.changes-list .chg del { color: var(--bad); }
.changes-list .chg ins { color: var(--good); text-decoration: none; }

/* upload screen: chosen producer / branch / agency / period */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 16px; }
.file-version { font-size: 11px; color: var(--muted); }
.missing-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.missing-item { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface-2); font-size: 13px; }
.missing-item b { display: block; }
.versions { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; }
.versions li { display: flex; gap: 8px; align-items: center; }

/* promotions setup */
.promo-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.promo-list { display: flex; flex-direction: column; gap: 6px; }
.promo-item { display: block; text-align: start; width: 100%; font: inherit; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; }
.promo-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.promo-item[aria-current=true] { border-color: var(--primary); background: var(--primary-soft); }
.promo-item b { display: block; color: var(--navy); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: start; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.mini-table td { padding: 3px 4px; }
.mini-table input, .mini-table select { width: 100%; height: 34px; }

/* two-step sign-in */
.qr { display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 0 auto 10px; width: fit-content; }
.qr svg { width: 220px; height: 220px; max-width: 70vw; max-height: 70vw; display: block; }
.secret { font-family: Consolas, monospace; direction: ltr; letter-spacing: 1px; background: var(--surface-2); border-radius: 6px; padding: 6px 10px; text-align: center; font-size: 13px; word-break: break-all; }
.code-input { font-size: 22px; letter-spacing: 6px; text-align: center; direction: ltr; height: 48px !important; }
.created-list td { font-family: Consolas, monospace; direction: ltr; }

@media (max-width: 820px) {
  .promo-layout { grid-template-columns: 1fr; }
  .stat-value { font-size: 22px; }
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 10px 12px; }
}

/* =====================================================================
   Readability. Same colours and layout; larger type,
   stronger contrast, and the numbers stand out. Nothing below 12.5px,
   secondary text is dark enough to read (≥ 6:1 on white).
   ===================================================================== */
:root {
  --muted: #535f70;            /* was #6b7785 - secondary text, 6.3:1 on white */
  --ink-2: #363f52;            /* was #464f63 */
  --line: #dde3ea;
}
body { font-size: 15px; line-height: 1.55; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.small { font-size: 13px; }
label, .label { font-size: 14px; color: var(--ink); }
input, select { height: 40px; font-size: 15px; }

/* topbar and tabs */
.brand-sub, .user-role { font-size: 12.5px; }
.tabs button { font-size: 15px; }
.fresh-chip { font-size: 13px; }

/* cards and section titles */
.card-head h2 { font-size: 18px; color: var(--navy); }
.card-head .sub { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.section-title h2 { font-size: 19px; }
.section-title .muted { font-size: 14px; color: var(--ink-2); }
.hint, .hint-line { font-size: 13.5px; }
.page-head p { color: var(--ink-2); font-size: 15px; }
.headline-title { font-size: 20px; }
.headline .muted.small { font-size: 14px; color: var(--ink-2); }
.headline-item { font-size: 15px; }

/* badges, status and chips */
.badge { font-size: 13px; padding: 3px 10px; }
.status { font-size: 13px; padding: 4px 11px 4px 9px; }
.status i { width: 18px; height: 18px; font-size: 11px; }
.pct-chip { font-size: 12.5px; line-height: 21px; padding: 0 8px; }
.af-chip { font-size: 13.5px; }
.active-filters { font-size: 13.5px; color: var(--ink-2); }

/* tables: readable headers, bold names, the sublines are not tiny grey text */
table.data { font-size: 14.5px; }
table.data th { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
table.data th, table.data td { padding: 11px 13px; }
table.data th.sortable::after { font-size: 12px; }
table.data tfoot td { font-size: 15px; color: var(--navy); }
.cell-name { font-weight: 700; color: var(--ink); }
.cell-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ach-sub { font-size: 12.5px; color: var(--muted); }
.ach-top { font-weight: 700; }
.mini-table th { font-size: 13px; color: var(--ink-2); }
table.egrid th { font-size: 13.5px; color: var(--ink-2); font-weight: 700; }
table.egrid td.rownum { font-size: 12.5px; }
table.egrid td.ro { font-size: 13.5px; }
.grid-status, .changes-list, .versions, .file-version, .confirm-numbers span, .user-name-cell span { font-size: 13px; }
.kbd { font-size: 12.5px; }

/* KPI cards: the percentage and the money are what the eye should find first */
.kpi-name { font-size: 18px; }
.kpi-pct { font-size: 46px; font-weight: 800; }
.kpi-pct-label { font-size: 14px; color: var(--ink-2); }
.meter-scale, .tmeter-labels { font-size: 12.5px; }
.tmeter-target-label { font-size: 13px; }
.kpi-rows { font-size: 14.5px; gap: 9px 12px; }
.kpi-rows dt { color: var(--ink-2); }
.kpi-rows dd { font-weight: 700; color: var(--ink); }
.kpi-rows dd.strong { font-size: 17px; color: var(--navy); }
.kpi-rows .cell-sub { font-size: 12.5px; }
.tile-value { font-size: 30px; color: var(--navy); }
.tile-sub { font-size: 14px; color: var(--ink-2); }
.tile-foot { font-size: 14px; }
.tile-trend { font-size: 13px; }
.stat-label { font-size: 13.5px; color: var(--ink-2); font-weight: 700; }
.stat-value { font-size: 28px; }
.stat-sub { font-size: 13.5px; color: var(--ink-2); }

/* charts (SVG text is in chart units; the charts are drawn close to their on-screen size) */
.chart-total { font-size: 22px; color: var(--navy); }
.chart text { font-size: 13px; fill: var(--ink-2); }
.chart .bar-label { font-size: 13px; font-weight: 700; fill: var(--ink); }
.minibars .mb-label { font-size: 13px; fill: var(--ink-2); }
.legend { font-size: 14px; }
.tip { font-size: 14px; padding: 8px 12px; }
.fresh-strip { font-size: 13.5px; }
.toggle-group button { font-size: 14px; padding: 6px 12px; }

/* filters panel */
.filters-title { font-size: 18px; }
.months button { font-size: 14px; height: 36px; }

/* assistant */
.as-sub, .as-head .btn-link, .as-undo { font-size: 13px; }
.as-scope, .as-note { font-size: 13px; }
.as-chip, .as-status { font-size: 12.5px; }

/* agent who moved between supervisors: one sub-row per supervisor period under the agent row */
table.data tr.sub-row td { background: var(--surface-2); border-bottom: 1px dashed var(--line); padding-block: 7px; font-size: 13.5px; color: var(--ink-2); }
table.data tbody tr.sub-row:hover td { background: var(--surface-3); }
.seg-label { display: inline-flex; align-items: baseline; gap: 6px; padding-inline-start: 14px; white-space: nowrap; }
.seg-label b { color: var(--navy); }
.seg-arrow { color: var(--muted); }
.seg-months { color: var(--muted); font-size: 12.5px; }
.seg-label.seg-unknown b { color: var(--warn); }
.sub-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--primary); background: var(--primary-soft); border: 0; border-radius: 99px; padding: 2px 10px; cursor: pointer; }
.sub-toggle:hover { background: #dde2ee; }
.sub-caret { display: inline-block; transition: transform .15s; }
[dir=rtl] .sub-caret { transform: scaleX(-1); }
.sub-toggle[aria-expanded=true] .sub-caret { transform: rotate(90deg); }

/* ------------------------------------------------ date picker (Hebrew, site design) */
.dp { position: relative; display: block; }
.dp-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px;
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer; text-align: start; font-variant-numeric: tabular-nums; }
.dp-field:hover { border-color: var(--muted); }
.dp-field:focus-visible, .dp-field[aria-expanded=true] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.dp-field.dp-empty .dp-text { color: var(--muted); }
.dp-icon { font-size: 15px; opacity: .75; }
.dp-panel { position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline-start: 0; width: 288px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-size: 15px; color: var(--navy); }
.dp-nav { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 20px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.dp-nav:hover { background: var(--surface-3); color: var(--ink); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.dp-day { height: 34px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-day:hover:not([disabled]) { background: var(--primary-soft); color: var(--primary); }
.dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 700; }
.dp-day.is-selected { background: var(--navy); color: #fff; font-weight: 700; }
.dp-day[disabled] { color: var(--line-strong); cursor: default; }
.dp-day:focus-visible, .dp-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-foot .btn-link[disabled] { opacity: .4; cursor: default; }

/* ------------------------------------------------ dropdowns (select.js), site design */
.cs { position: relative; display: block; min-width: 0; }
.cs-native { display: none !important; }
.cs-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer; text-align: start; }
.cs-field:hover:not([disabled]) { border-color: var(--muted); }
.cs-field:focus-visible, .cs-field[aria-expanded=true], .cs-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cs-field[disabled] { background: var(--surface-2); color: var(--muted); cursor: default; }
.cs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chevron { flex: none; width: 8px; height: 8px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.cs-field[aria-expanded=true] .cs-chevron { transform: translateY(2px) rotate(-135deg); }
.cs-panel { position: absolute; z-index: 45; top: calc(100% + 6px); inset-inline: 0; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.cs-panel.cs-up { top: auto; bottom: calc(100% + 6px); }
.cs-search { width: 100%; height: 36px; margin-bottom: 6px; font-size: 14px; }
.cs-list { position: relative; max-height: 264px; overflow-y: auto; }
.cs-option { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 7px; font-size: 14.5px; color: var(--ink); cursor: pointer; line-height: 1.35; }
.cs-option.is-active { background: var(--primary-soft); color: var(--primary); }
.cs-option.is-selected { font-weight: 700; color: var(--navy); }
.cs-option.is-disabled { color: var(--muted); cursor: default; }
.cs-check { flex: none; width: 14px; color: var(--brand-strong); font-weight: 800; }
.cs-group { padding: 8px 10px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cs-empty { padding: 10px; color: var(--muted); font-size: 14px; }
.cs-combo .cs-input { width: 100%; }

/* selects left as they are (editable tables): same look when closed */
select { appearance: none; -webkit-appearance: none; padding-inline-end: 30px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23363f52' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-position: left 12px center; }

.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dp-month { height: 38px; font-size: 14px; }

/* ------------------------------------------------ supervisor periods page */
.period-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.period-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 99px; background: var(--surface-3); font-size: 13px; white-space: nowrap; }
.period-chip b { color: var(--navy); }
.period-chip.is-unknown { background: var(--warn-soft); }
.period-chip.is-unknown b { color: var(--warn); }
table.data tr.row-warn td:first-child { box-shadow: inset -3px 0 0 var(--warn-fill); }
table.data tr.period-editor-row > td { background: var(--surface-2); padding: 14px 16px; }
.period-editor .mini-table { width: 100%; max-width: 720px; }
.period-editor .mini-table td { padding: 4px 6px; vertical-align: middle; }
.period-editor .mini-table td:nth-child(1), .period-editor .mini-table td:nth-child(2) { width: 170px; }
.period-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 720px; flex-wrap: wrap; }
.period-actions .spacer { flex: 1; }
.period-msg { margin-top: 10px; max-width: 720px; }
.inline-filter { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.inline-filter .cs { min-width: 170px; }

/* upload: the period of the file */
.period-pick { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.period-pick .toggle-group { align-self: flex-start; }
.period-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.period-fields[hidden] { display: none; }

/* the alert window after a failed / partial load */
.load-report { border: none; border-radius: var(--radius); padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(0,0,0,.25); background: var(--surface, #fff); color: inherit; }
.load-report::backdrop { background: rgba(20, 20, 30, .45); }
.load-report[open] { display: flex; flex-direction: column; }
.load-report-head { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; border-bottom: 1px solid var(--line, #e6e6e6); }
.load-report-head h2 { margin: 0 0 4px; font-size: 18px; }
.load-report-head p { margin: 0; }
.load-report-head.is-bad .alert-icon { background: var(--bad); }
.load-report-head.is-warn .alert-icon { background: var(--warn-fill); color: #4a2f00; }
.load-report-body { overflow: auto; padding: 12px 20px; display: grid; gap: 10px; }
.load-report-item { border-radius: var(--radius-sm); padding: 10px 12px; border: 1px solid; }
.load-report-item.is-bad { background: var(--bad-soft); border-color: #f0c9c9; }
.load-report-item.is-warn { background: var(--warn-soft); border-color: #f1d9a8; }
.load-report-item ul { margin: 6px 0 0; padding-inline-start: 18px; line-height: 1.6; }
.load-report-file { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.load-report-actions { padding: 12px 20px 16px; display: flex; justify-content: flex-start; border-top: 1px solid var(--line, #e6e6e6); }

/* export to Excel: pick the agents */
.export-dialog { border: none; border-radius: var(--radius); padding: 0; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(0,0,0,.25); background: var(--surface); color: inherit; }
.export-dialog[open] { display: flex; flex-direction: column; }
.export-dialog::backdrop { background: rgba(20, 20, 30, .45); }
.export-head { padding: 18px 20px 6px; }
.export-head h2 { margin: 0 0 4px; font-size: 18px; }
.export-head p { margin: 0; }
.export-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.export-tools .table-search { flex: 1 1 180px; }
.export-list { overflow: auto; padding: 8px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 12px; min-height: 120px; }
.export-dialog label.export-item { display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: flex-start; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-weight: 400; font-size: 14px; color: var(--ink); text-align: start; }
.export-item:hover { background: var(--surface-2); }
.export-dialog label.export-item[hidden] { display: none; }
.export-item input { width: 16px; height: 16px; flex: none; }
.export-msg { padding: 0 20px; color: var(--bad); min-height: 1.2em; }
.export-actions { display: flex; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }

/* export preview: looks like the sheet in Excel */
.export-tabs { margin-top: 10px; }
.export-dialog .export-list[hidden], .export-dialog .export-tools[hidden], .export-preview[hidden] { display: none; }
.export-preview { padding: 10px 20px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 160px; }
.xl-wrap { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid #c8ccd2; background: #fff; }
.xl-sheet { border-collapse: collapse; font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 13px; color: #1f1f1f; direction: rtl; }
.xl-sheet td, .xl-sheet th { border: 1px solid #d4d4d4; padding: 3px 8px; white-space: nowrap; text-align: right; }
.xl-sheet td.xl-num { text-align: left; font-variant-numeric: tabular-nums; }
.xl-sheet thead th { position: sticky; top: 0; background: #f3f3f3; color: #555; font-weight: 400; text-align: center; z-index: 2; }
.xl-sheet th.xl-row { background: #f3f3f3; color: #555; font-weight: 400; text-align: center; min-width: 34px; position: sticky; right: 0; z-index: 1; }
.xl-sheet thead th.xl-corner { right: 0; z-index: 3; }
.xl-sheet tr.xl-head td { background: #e8ecf2; font-weight: 700; position: sticky; top: 24px; z-index: 1; }

/* export window: pick the agents on the sheet itself, saved picks */
.export-tools .spacer { flex: 1 1 auto; }
.export-tools select { max-width: 220px; }
.export-tools input.table-search[maxlength] { flex: 0 1 160px; }
.export-msg.is-ok { color: var(--good); }
.xl-sheet tbody tr:not(.xl-head) { cursor: pointer; }
.xl-sheet tbody tr:not(.xl-head):hover td { background: #f5f8fc; }
.xl-sheet tr.xl-off td { color: #a0a4ab; background: #fafafa; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.18); }
.xl-sheet tr[hidden] { display: none; }
.xl-sheet label.xl-pick { display: flex; flex-direction: row; align-items: center; gap: 6px; justify-content: flex-start; font-weight: 400; font-size: 12px; color: #555; cursor: pointer; margin: 0; }
.xl-sheet label.xl-pick input { width: 15px; height: 15px; margin: 0; flex: none; }
.xl-sheet .xl-n { min-width: 22px; text-align: center; }
.xl-sheet th.xl-row { min-width: 58px; }

/* promotion participants */
.part-box { margin-top: 12px; display: grid; gap: 12px; }
.part-box[hidden] { display: none; }
.part-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.part-tool { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.part-results { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.part-hit { display: flex; justify-content: space-between; gap: 8px; text-align: start; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--surface); cursor: pointer; color: var(--ink); }
.part-hit:hover:not([disabled]) { border-color: var(--primary); }
.part-hit[disabled] { opacity: .6; cursor: default; }
.part-sups { display: grid; gap: 4px; max-height: 200px; overflow: auto; }
.part-sups label.check { font-weight: 400; font-size: 13px; }
.part-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.part-head .spacer { flex: 1 1 auto; }
.part-list { max-height: 360px; overflow: auto; }
.import-ok { color: var(--good); }
.import-warn { color: var(--warn); }
.part-tool label.file-btn { display: inline-flex; flex-direction: row; align-self: flex-start; position: relative; cursor: pointer; }
.part-tool label.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.part-multi { position: relative; }
.part-mpanel { min-width: 300px; }
.part-mtools { display: flex; gap: 14px; padding: 0 4px 6px; font-size: 13px; }
.part-mlist { max-height: 320px; }
.part-mlist label.part-mopt { flex-direction: row; font-weight: 400; gap: 8px; }
.part-mlist label.part-mopt input { width: 15px; height: 15px; flex: none; margin: 0; }

/* the site's own confirmation window (confirm.js) */
.confirm-dialog { border: none; border-radius: var(--radius); padding: 20px 22px 16px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); background: var(--surface); color: var(--ink); }
.confirm-dialog::backdrop { background: rgba(20, 20, 30, .45); }
.confirm-dialog p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.confirm-actions { display: flex; gap: 8px; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }

/* ייצוא לסוכן */
.agent-send { width: 100%; margin-top: 8px; }
.agent-send[hidden] { display: none; }
.mail-meta { padding: 8px 20px; display: grid; gap: 2px; font-size: 14px; border-bottom: 1px solid var(--line); }
.mail-preview { padding: 10px 20px; }
.mail-preview iframe { width: 100%; height: min(60vh, 640px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.promo-agent-filter { margin-bottom: 8px; }
#promo-agent-note { margin: 0 0 8px; }
.promo-item .badge { align-self: flex-start; margin-top: 4px; font-size: 11.5px; }
.promo-item[hidden] { display: none; }

/* the upload screen guesses where a file belongs */
.detect-box { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.detect-box ul { margin: 4px 0 0; padding-inline-start: 18px; }
.detect-box.is-ok { background: var(--good-soft); border-color: #bfe3cc; }
.detect-box.is-partial { background: var(--warn-soft); border-color: #f1d9a8; }
.dropzone { position: relative; }
.dz-clear { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.dz-clear:hover { background: var(--bad-soft); color: var(--bad); border-color: #f0c9c9; }
.dz-clear[hidden] { display: none; }
/* a field the upload screen could not tell: the orange of the warning */
.field-missing .cs-field, .field-missing > select, .field-missing input:not([type=hidden]), .field-missing .dp-field { border-color: var(--warn-fill) !important; box-shadow: 0 0 0 3px rgba(242, 165, 22, .25) !important; }
.period-pick.field-missing { outline: 2px solid var(--warn-fill); outline-offset: 6px; border-radius: 6px; }
.field-missing { color: var(--warn); }
/* the file is being scanned: a spinner, a moving bar and a sweep over the drop zone */
.detect-box.is-scanning { background: var(--primary-soft); border-color: var(--primary); display: grid; gap: 8px; }
.scan-head { display: flex; align-items: center; gap: 10px; }
.scan-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scan-secs { margin-inline-start: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.scan-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--primary); animation: scan-spin .8s linear infinite; }
.scan-bar { position: relative; height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.scan-bar i { position: absolute; inset-block: 0; width: 35%; border-radius: 99px; background: var(--primary); animation: scan-bar 1.3s ease-in-out infinite; }
.dropzone.is-scanning { border-color: var(--primary); overflow: hidden; }
.dropzone.is-scanning::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); animation: scan-sweep 1.4s linear infinite; pointer-events: none; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
@keyframes scan-bar { 0% { inset-inline-start: -35%; } 100% { inset-inline-start: 100%; } }
@keyframes scan-sweep { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .scan-spin, .scan-bar i, .dropzone.is-scanning::after { animation-duration: 4s; } }
.detect-box.is-invalid { background: var(--bad-soft); border-color: #f0c9c9; color: #7a1f1f; display: grid; gap: 4px; }
.dropzone.is-invalid { border-color: var(--bad); }
.detect-existing { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1d9a8; color: #6b4300; }
/* the file already exists: a warning window */
.warn-dialog { border: none; border-radius: var(--radius); padding: 24px 24px 18px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); background: var(--surface); color: var(--ink); text-align: center; }
.warn-dialog::backdrop { background: rgba(20, 20, 30, .45); }
.warn-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--warn-fill); color: #4a2f00; font-size: 32px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(242, 165, 22, .18); }
.warn-body h2 { margin: 0 0 8px; font-size: 20px; }
.warn-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: start; font-size: 14.5px; line-height: 1.6; }
.warn-body li { background: var(--warn-soft); border: 1px solid #f1d9a8; border-radius: var(--radius-sm); padding: 10px 12px; }
.warn-actions { margin-top: 16px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.warn-actions .btn { min-width: 120px; }
.file-name { unicode-bidi: isolate; }
.file-ver { font-size: 11.5px; margin-inline-start: 6px; white-space: nowrap; }

/* several files at once */
.is-batch [data-single] { display: none !important; }
.batch { margin-top: 16px; display: grid; gap: 12px; }
.batch[hidden] { display: none; }
.batch-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-end; }
.batch-head h2 { margin: 0 0 2px; font-size: 18px; }
.batch-summary { font-size: 14px; }
.batch-summary .ok { color: var(--good); font-weight: 700; }
.batch-summary .warn { color: var(--warn); font-weight: 700; }
.batch-table td { vertical-align: middle; }
.batch-table select, .batch-table input { min-width: 0; width: 100%; font-size: 13.5px; }
.batch-table td:nth-child(2) { min-width: 120px; } .batch-table td:nth-child(3) { min-width: 170px; } .batch-table td:nth-child(4) { min-width: 150px; }
.batch-file { max-width: 240px; } .batch-file b { display: block; overflow-wrap: anywhere; font-size: 13.5px; }
.batch-period { display: flex; gap: 6px; align-items: center; min-width: 230px; }
.batch-row { border-inline-start: 4px solid transparent; }
.batch-row.is-ready td:first-child, .batch-row.is-done td:first-child { box-shadow: inset -4px 0 0 var(--good); }
.batch-row.is-missing td:first-child, .batch-row.is-exists td:first-child, .batch-row.is-partial td:first-child, .batch-row.is-saved td:first-child { box-shadow: inset -4px 0 0 var(--warn-fill); }
.batch-row.is-invalid td:first-child, .batch-row.is-failed td:first-child { box-shadow: inset -4px 0 0 var(--bad); }
.batch-row.is-invalid td, .batch-row.is-failed td { background: var(--bad-soft); }
.batch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.batch-chip .scan-spin { width: 12px; height: 12px; border-width: 2px; }
.batch-chip.is-ready, .batch-chip.is-done { background: var(--good-soft); color: var(--good); }
.batch-chip.is-missing, .batch-chip.is-exists, .batch-chip.is-partial, .batch-chip.is-saved { background: var(--warn-soft); color: var(--warn); }
.batch-chip.is-invalid, .batch-chip.is-failed { background: var(--bad-soft); color: var(--bad); }
.batch-chip.is-scanning, .batch-chip.is-uploading { background: var(--primary-soft); color: var(--primary); }
.batch-notes-row td { padding-top: 0; border-top: none; }
.batch-notes-row[hidden] { display: none; }
.batch-notes { font-size: 12.5px; color: var(--ink-2); display: grid; gap: 2px; }
.batch-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.load-report-head.is-ok .alert-icon { background: var(--good); }
.load-report-item.is-ok { background: var(--good-soft); border-color: #bfe3cc; }

/* several files: a card per file, as many as fit on the screen */
.batch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.batch-card { position: relative; display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); border-top: 4px solid var(--line); min-width: 0; }
.batch-card.is-ready, .batch-card.is-done { border-top-color: var(--good); }
.batch-card.is-missing, .batch-card.is-exists, .batch-card.is-partial, .batch-card.is-saved { border-top-color: var(--warn-fill); }
.batch-card.is-invalid, .batch-card.is-failed { border-top-color: var(--bad); background: var(--bad-soft); }
.batch-card.is-scanning, .batch-card.is-uploading { border-top-color: var(--primary); }
.bc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bc-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.bc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; direction: rtl; unicode-bidi: plaintext; }
.bc-name span { flex: none; font-size: 12px; }
.batch-x { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 12px; }
.batch-x:hover { background: var(--bad-soft); color: var(--bad); }
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.bc-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.bc-field.bc-wide { grid-column: 1 / -1; }
.bc-field select, .bc-field input, .bc-field .cs-field, .bc-field .dp-field { height: 34px; font-size: 13px; min-width: 0; width: 100%; }
.batch-card .batch-notes { font-size: 12px; color: var(--ink-2); display: grid; gap: 2px; padding-top: 6px; border-top: 1px dashed var(--line); }
.batch-card .batch-notes[hidden] { display: none; }
/* the full name of every file, on its own line (wraps, never cut) */
.batch-cards { align-items: stretch; }   /* the cards of a row: the same height */
.batch-card { align-content: start; }
.bc-head .bc-size { flex: 1 1 auto; font-size: 12px; }
.batch-card .bc-name { display: block; font-weight: 700; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.bc-field.field-missing > span { color: var(--warn); }
.batch-card.is-check { border-top-color: var(--warn-fill); }
.batch-chip.is-check { background: var(--warn-soft); color: var(--warn); }
.bc-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 4px; }
.bc-actions label.bc-confirm { flex-direction: row; font-weight: 600; font-size: 12.5px; color: var(--ink); }
/* password fields: the eye, and the rules ticked while typing */
.password-field input { padding-inline-end: 40px; }
.pw-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 6px; padding: 0; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--ink); background: var(--surface-2); outline: none; }
.pw-rules { list-style: none; margin: -4px 0 4px; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.pw-rules li { color: var(--muted); display: flex; gap: 6px; align-items: center; }
.pw-rules li::before { content: '○'; width: 14px; text-align: center; }
.pw-rules.is-started li:not(.is-ok) { color: var(--bad); }
.pw-rules.is-started li:not(.is-ok)::before { content: '✕'; }
.pw-rules li.is-ok { color: var(--good); }
.pw-rules li.is-ok::before { content: '✓'; font-weight: 700; }
/* two-step sign-in: a phone opens the app with a button, a computer scans the code */
.twofa-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.twofa-steps .btn { display: flex; justify-content: center; margin-top: 6px; }
.twofa-steps .on-desktop { display: inline; } .twofa-steps .on-phone { display: none; }
@media (pointer: coarse) { .twofa-steps .on-desktop, .qr.on-desktop { display: none; } .twofa-steps .on-phone { display: inline; } }
.secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.twofa-remember { font-weight: 400; font-size: 13px; }
/* the upload screen: a link to the OneDrive folder of the new files */
.newfiles-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-inline-start: 4px solid var(--primary); border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--ink); text-decoration: none; }
.newfiles-link:hover, .newfiles-link:focus-visible { border-color: var(--primary); outline: none; }
.newfiles-link > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.newfiles-icon { font-size: 22px; } .newfiles-go { font-size: 18px; color: var(--primary); font-weight: 700; }
.inline-form { display: inline; margin: 0; }
.danger-link { color: var(--danger, #b42318); }
/* loading screen of uploads and cancels (busy.js) */
.busy-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); cursor: progress; }
.busy-overlay[hidden] { display: none; }
.busy-box { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 280px; max-width: min(460px, calc(100vw - 32px)); padding: 28px 32px; border-radius: 14px; background: var(--surface, #fff); box-shadow: 0 20px 50px rgba(0,0,0,.25); text-align: center; }
.busy-spin { width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgba(0,0,0,.1); border-top-color: var(--primary); animation: scan-spin .8s linear infinite; }
.busy-text { font-size: 17px; }
.busy-detail { color: var(--muted, #667085); font-size: 13px; word-break: break-all; }
.busy-detail:empty, .busy-secs:empty { display: none; }
.busy-secs { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted, #667085); }
.busy-note { font-size: 12px; color: var(--muted, #667085); }
body.is-busy { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation-duration: 3s; } }
/* the agent filter of the dashboard: several agents, the name and his number under it */
.filter-field { display: block; width: 100%; }
.filter-field > .label { display: block; margin-bottom: 4px; }
.agent-multi .cs-field { width: 100%; min-height: 40px; height: auto; }
.agent-multi .cs-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: start; }
.agent-pick-name { font-weight: 600; }
.agent-pick-id, .agent-opt-id { font-size: 12px; color: var(--muted); direction: rtl; text-align: right; }
.agent-opt-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; text-align: right; min-width: 0; }
/* everything to the right: the tick box beside the name (the filters' own "label" rule made it a block) */
.filters .agent-multi label.agent-opt { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; width: 100%;
  text-align: right; direction: rtl; font-weight: 400; margin: 0; }
.filters .agent-multi label.agent-opt input { margin-top: 3px; }
.agent-multi .part-mtools { justify-content: flex-start; }
.agent-multi .cs-search { text-align: right; }
.agent-multi .part-mpanel { min-width: 260px; }
/* the totals row of a long table stays in view at the bottom of the screen while the page scrolls: a copy of it, fixed to the bottom, while the table's own row is below the screen (totals.js) */
.totals-float { position: fixed; bottom: 0; z-index: 30; overflow: hidden; pointer-events: none;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, .12); border-top: 2px solid var(--line-strong); background: var(--surface-2); }
.totals-float[hidden] { display: none; }
.totals-float table.data { table-layout: fixed; margin: 0; }
.totals-float table.data tfoot td { border-top: 0; }
/* merging agents (data_agents.js) */
.merge-manual { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 8px; }
.merge-manual > .muted { grid-column: 1 / -1; }
@media (max-width: 760px) { .merge-manual { grid-template-columns: 1fr; } }
/* dropping files anywhere on the upload page (upload.js) */
.drop-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px;
  background: rgba(15, 23, 42, .35); pointer-events: none; }
.drop-overlay[hidden] { display: none; }
.drop-overlay-box { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, 100%); padding: 40px 28px;
  border: 3px dashed var(--primary); border-radius: 16px; background: var(--surface, #fff); text-align: center; font-size: 17px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }
.drop-overlay-box .dz-icon { font-size: 38px; color: var(--primary); }
.batch-drop { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 12px 0; padding: 18px;
  border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.batch-drop:hover, .is-batch ~ .batch .batch-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.batch-drop .dz-icon { font-size: 22px; color: var(--primary); }
/* "הגדרת עמודות" (columns.js) */
.cols-dialog { width: min(920px, calc(100vw - 32px)); }
.cols-body h3 { margin: 16px 0 8px; font-size: 15px; }
.cols-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cols-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.cols-fields label.field-missing select { border-color: var(--warn, #d97706); box-shadow: 0 0 0 2px rgba(217, 119, 6, .25); }
.cols-premium { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; max-height: 240px; overflow-y: auto; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; }
.cols-premium label.check { font-weight: 400; }
.cols-msg { padding: 0 24px; font-size: 14px; }
.cols-msg.is-ok { color: var(--good); }
.cols-saved { margin: 0; padding-inline-start: 18px; font-size: 14px; }
@media (max-width: 760px) { .cols-top, .cols-fields, .cols-premium { grid-template-columns: 1fr; } }

/* =====================================================================
   SaleSee design layer. Flat, quiet surfaces in the brand's navy and mauve;
   colour is kept for the data and for meaning (below / close / on target).
   No decorative stripes, glows or patterns; numbers in tabular figures.
   ===================================================================== */
:root {
  /* the three branches - from the brand: navy-blue, mauve, and a muted teal that sits between them */
  --pension: #2c4f8f;
  --insurance: #b86d97;
  --finance: #2e8a84;
  --previous: #c3cad6;
  --grid: #eef0f4;
  --radius: 8px;
  --shadow: none;
}
body { background: var(--bg); font-feature-settings: "tnum" 1; }

/* page titles: plain, no underline bar */
.page-head h1 { font-family: inherit; font-weight: 700; font-size: 24px; letter-spacing: -.2px; }
.section-title h2 { font-weight: 700; font-size: 17px; }
.headline-title { font-family: inherit; font-weight: 700; }

/* cards: one hairline, no shadow, no coloured edges */
.card, .stat { box-shadow: none; border-color: var(--line); }
.kpi { padding-top: 18px; }
.headline { box-shadow: none; }

/* dashboard tabs: an underline tab bar, not a box of pills */
.tabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; box-shadow: none; gap: 0; }
.tabs button { border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; box-shadow: none; }
.tabs button:hover { background: transparent; color: var(--ink); }
.tabs button[aria-selected=true] { background: transparent; color: var(--navy); box-shadow: none; border-bottom-color: var(--navy); }

/* status: a small dot and the word, in the status colour - no pill, no icon in a circle */
.status { background: none !important; padding: 0; gap: 6px; font-weight: 600; font-size: 13px; }
.status i { width: 8px; height: 8px; font-size: 0; color: transparent; }
.status-none { color: var(--muted); }
.pct-chip { background: none !important; padding: 0; font-size: 12px; }

/* the big percentage in the ink colour; its status is said by the label next to it */
.kpi-pct, .kpi-pct.good, .kpi-pct.warn, .kpi-pct.bad { color: var(--navy); font-weight: 600; letter-spacing: -.5px; }
.kpi-pct-label { color: var(--muted); }

/* the target bar: flat colours, no stripes */
.tmeter-track { height: 8px; background: var(--surface-3); }
.tmeter-gap { background: rgba(199, 52, 52, .18); }
.tmeter-over { background: rgba(15, 138, 60, .35); }
.tmeter-target { width: 2px; top: -4px; bottom: -4px; box-shadow: none; }
.meter { height: 8px; }

/* small square markers of the branches */
.dot, .legend i { border-radius: 2px; width: 9px; height: 9px; }

/* charts: hairline grid, quiet labels, square columns */
.chart text { font-size: 11px; fill: #6a7487; }
.chart .grid-line { stroke: var(--grid); }
.chart .base-line { stroke: #c9d0db; }
.chart .bar-label { fill: var(--ink); font-weight: 600; }
.chart rect.hit:hover { fill: rgba(23, 36, 64, .05); }

/* data freshness and the active filters: text, not pills */
.fresh-chip { background: transparent; border: 0; padding: 0 10px 0 0; border-radius: 0; color: var(--muted); }
.af-chip { border-radius: 4px; }
.af-chip.static { background: transparent; padding: 2px 0; }

/* quick search button: a plain round button, no coloured glow, no grow on hover */
.as-fab { box-shadow: 0 2px 8px rgba(16, 24, 40, .18); transition: background .15s; width: 48px; height: 48px; }
.as-fab:hover { transform: none; box-shadow: 0 2px 8px rgba(16, 24, 40, .22); background: #22335a; }

/* buttons and inputs: the same small radius everywhere */
.btn { border-radius: 6px; box-shadow: none; }
input, select, textarea, .cs-field { border-radius: 6px; }
.as-typing { color: var(--muted); font-size: 13px; }

/* icons: one line set in the current text colour (no emoji, no text glyphs) */
.ic { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: -3px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-folder { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3C/svg%3E"); }
.ic-external { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204h6v6%22/%3E%3Cpath%20d%3D%22M20%204l-9%209%22/%3E%3Cpath%20d%3D%22M18%2014v4a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h4%22/%3E%3C/svg%3E"); }
.ic-upload { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V4%22/%3E%3Cpath%20d%3D%22M7%209l5-5%205%205%22/%3E%3Cpath%20d%3D%22M4%2016v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2%22/%3E%3C/svg%3E"); }
.ic-calendar { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22/%3E%3C/svg%3E"); }
.ic-columns { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%224%22%20width%3D%2217%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M9.5%204v16M15%204v16%22/%3E%3C/svg%3E"); }
.ic-edit { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22/%3E%3Cpath%20d%3D%22M13.5%206.5l4%204%22/%3E%3C/svg%3E"); }
.ic-users { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22/%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.5a6%206%200%200%201%203.5%205.5%22/%3E%3C/svg%3E"); }
.ic-search { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M15%2015l5%205%22/%3E%3C/svg%3E"); }
.ic-lock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.5%22%20y%3D%2210.5%22%20width%3D%2215%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2010.5V7.5a4%204%200%200%201%208%200v3%22/%3E%3C/svg%3E"); }
.ic-mail { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3.5%206.5l8.5%206%208.5-6%22/%3E%3C/svg%3E"); }
.dz-icon.ic { width: 28px; height: 28px; }
.newfiles-icon.ic { width: 22px; height: 22px; }
.guide h2 .n .ic { width: 15px; height: 15px; }
.dp-icon.ic { width: 15px; height: 15px; opacity: .7; }
/* the data-management menu: the same underline tab bar as the dashboard */
.subnav a { border-radius: 0; padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { background: transparent; color: var(--ink); }
.subnav a[aria-current=page] { background: transparent; color: var(--navy); box-shadow: none; border-bottom-color: var(--navy); }
/* who a page is for: plain secondary text */
.page-head .who { background: none; color: var(--muted); font-weight: 500; padding: 0; border-radius: 0; }
/* figures inside a card: a row of plain figures split by hairlines, not cards inside a card */
.card .stat-row { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card .stat-row .stat { border: 0; border-radius: 0; background: transparent; box-shadow: none; border-inline-start: 1px solid var(--line); }
.card .stat-row .stat:first-child { border-inline-start: 0; }
/* places 1-3: a small rank number in the brand colours - no metallic gradients, no tinted rows */
.medal, .medal.m1, .medal.m2, .medal.m3 { background: var(--surface-3); color: var(--navy); box-shadow: none; text-shadow: none; font-weight: 700; }
.medal.m1 { background: var(--navy); color: #fff; }
table.data tr.medal-1 td, table.data tr.medal-2 td, table.data tr.medal-3 td { background: transparent; }
table.data tr.medal-row:hover td { filter: none; background: var(--surface-2); }
/* the name column keeps a readable width (a long agency name does not break into one word a line) */
table.data td .cell-name { min-width: 170px; display: inline-block; }
.sub-toggle { border-radius: 4px; }
/* one corner radius scale: 4px for small things, 6px for controls, 8px for cards, 12px for dialogs */
.badge, .pct-chip, .fresh-chip, .af-chip, .batch-chip { border-radius: 4px; }
.toggle-group { border-radius: 6px; }
.toggle-group button { border-radius: 4px; }
.alert { border-radius: 6px; }
.busy-overlay { backdrop-filter: none; background: rgba(15, 23, 42, .4); }
/* the search field: the same line icon as the rest of the site */
.search::before { content: ""; width: 15px; height: 15px; background: var(--muted); transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M15%2015l5%205%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M15%2015l5%205%22/%3E%3C/svg%3E") center / contain no-repeat; }
/* data freshness per producer: text with a small dot (green = up to date, amber = late), not a row of pills */
.fresh-strip { gap: 4px 18px; }
.fresh-pill, .fresh-pill.late { background: none; padding: 0; border-radius: 0; color: var(--ink-2); gap: 6px; }
.fresh-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.fresh-pill.late::before { background: var(--warn-fill); }
.fresh-pill b { color: var(--ink); font-weight: 600; }
/* the filters wait for their lists - no flash of empty fields while the page loads */
#filters:not(.is-ready) > :not(.filters-title) { visibility: hidden; }
/* the first load of a screen: a small spinner and a word, no empty card */
#view > .empty-state:only-child { background: transparent; border: 0; box-shadow: none; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 64px 0; }
#view > .empty-state:only-child p { margin: 0; }
#view > .empty-state:only-child::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--navy); animation: scan-spin .8s linear infinite; }
.empty-icon.ic { display: block; width: 28px; height: 28px; margin: 0 auto 10px; color: var(--muted); background: currentColor; font-size: 0; }
/* a flagged row: a faint tint only, no coloured edge */
table.data tr.row-flag td { background: #fdf6f6; }
table.data tr.row-flag td:first-child, table.data tr.row-warn td:first-child { box-shadow: none; }
/* narrow screens: the tab bars stay one row and scroll sideways, as in mobile apps */
@media (max-width: 760px) {
  .tabs, .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .tabs::-webkit-scrollbar, .subnav::-webkit-scrollbar { display: none; }
  .tabs button, .subnav a { flex: none; }
}
/* batch upload cards: one hairline frame; the state is said by the label on the card, not by a coloured top edge */
.batch-card, .batch-card.is-ready, .batch-card.is-done, .batch-card.is-missing, .batch-card.is-exists, .batch-card.is-partial,
.batch-card.is-saved, .batch-card.is-check, .batch-card.is-invalid, .batch-card.is-failed, .batch-card.is-scanning, .batch-card.is-uploading {
  border-top: 1px solid var(--line); background: var(--surface); }
.batch-card.is-invalid, .batch-card.is-failed { border-color: #ecc6c6; }
.batch-chip { font-weight: 600; padding: 2px 8px; }
/* the warning window: a modest icon, not a large yellow disc */
.warn-icon { width: 36px; height: 36px; font-size: 20px; font-weight: 700; }
/* quick search: results, not a chat - the question is a small line, the answer a plain block, no bubbles */
.as-panel { border-radius: 10px; }
.as-head { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.as-head::after { content: none; }
.as-head-brand img { display: none; }
.as-title { font-family: inherit; font-weight: 700; font-size: 15px; color: var(--navy); }
.as-sub { opacity: 1; color: var(--muted); }
.as-head .btn-link { color: var(--primary); }
.as-close { color: var(--muted); }
.as-close:hover { background: var(--surface-2); }
.as-log { background: var(--surface); gap: 4px; padding: 10px 14px; }
.as-msg { max-width: none; width: 100%; border-radius: 0; padding: 0; }
.as-user { align-self: stretch; background: none; color: var(--muted); font-size: 12.5px; padding-top: 10px; border-top: 1px solid var(--line); }
.as-user::before { content: "חיפוש: "; }
.as-log > .as-user:first-child { border-top: 0; padding-top: 0; }
.as-bot { align-self: stretch; background: none; border: 0; padding-bottom: 6px; }
.as-chip { border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
.as-opt { border-radius: 4px; }
/* error pages: the status code, the title, one way back */
.error-page { max-width: 520px; margin: 12vh auto 0; text-align: center; }
.error-brand { display: inline-block; margin-bottom: 28px; text-decoration: none; padding: 10px 16px; border-radius: 8px; background: var(--navy); }
.error-code { font-size: 64px; font-weight: 600; line-height: 1; color: var(--line-strong); letter-spacing: -1px; margin-bottom: 12px; }
.error-page h1 { color: var(--navy); margin-bottom: 8px; }
.error-page .btn { margin-top: 12px; }
/* the users list: neutral initials (the brand colour stays for the signed-in user in the top bar) */
.user-name-cell .avatar { background: var(--surface-3); color: var(--navy); }
.user-row[open] > summary { background: var(--surface-2); }
/* a normal state on every row: quiet text with a small green dot; colour tags are kept for the exceptions */
.state-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.state-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
/* the remaining chips: the same small radius as the rest */
.tier-chip, .period-chip, .sub-toggle { border-radius: 4px; }
.login-card { border-radius: 12px; }

/* =====================================================================
   Motion. Few and short: windows ease in, the quick search grows from its button, period rows fade in,
   and the bars of a screen grow once on its first showing. Opacity and transform only.
   ===================================================================== */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* 1. every window (confirm, load report, columns, export, merge...) eases in; centred, no movement across */
dialog[open] { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
dialog[open]::backdrop { opacity: 1; transition: opacity 300ms var(--ease-out); }
@starting-style {
  dialog[open] { opacity: 0; transform: scale(0.97); }
  dialog[open]::backdrop { opacity: 0; }
}

/* 2. the quick search grows from its button (the origin is set in assistant.js) */
.as-panel:not([hidden]) { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
@starting-style { .as-panel:not([hidden]) { opacity: 0; transform: scale(0.96); } }

/* 3. a supervisor's period rows fade in under their agent */
table.data tr.sub-row:not([hidden]) td { opacity: 1; transition: opacity 250ms var(--ease-out); }
@starting-style { table.data tr.sub-row:not([hidden]) td { opacity: 0; } }

/* 4. a chart or target bar whose values changed (the first showing included) moves from the old values to the
   new ones; --from is old / new, set per bar in dashboard.js. The ones that did not change stay still. */
@keyframes grow-up { from { transform: scaleY(var(--from, 0)); } }
@keyframes grow-across { from { transform: scaleX(var(--from, 0)); } }
@keyframes fade-in { from { opacity: 0; } }
svg.anim path.bar[data-v], svg.anim rect.mbar[data-v] {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: grow-up 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.anim > .tmeter-fill, .vbar-track.anim > i {
  transform-origin: right center; animation: grow-across 800ms var(--ease-out) both; }
.anim > .tmeter-gap, .anim > .tmeter-over { animation: fade-in 400ms 450ms var(--ease-out) both; }

/* less motion when the system asks for it: a short fade instead of growing and scaling */
@media (prefers-reduced-motion: reduce) {
  dialog[open], .as-panel:not([hidden]) { transition: opacity 150ms linear; transform: none; }
  @starting-style { dialog[open], .as-panel:not([hidden]) { transform: none; } }
  svg.anim path.bar[data-v], svg.anim rect.mbar[data-v], .anim > .tmeter-fill, .vbar-track.anim > i {
    animation: fade-in 250ms linear both; animation-delay: 0ms; }
}

/* =====================================================================
   Product layer (design review, 2026-11-09): one type scale, a clear hierarchy in the branch cards,
   quieter table headers, press feedback, a calmer tooltip and skeleton screens while loading.
   ===================================================================== */
:root {
  --fs-meta: 12.5px;     /* labels, metadata, table headers */
  --fs-body: 14px;       /* text and table cells */
  --fs-title: 16px;      /* card and section titles */
  --fs-page: 20px;       /* the page title */
  --fs-figure: 40px;     /* the one big number of a card */
}

/* the context line of a screen (replaces a card that only repeated what the cards below say) */
.page-context { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 2px 0 14px; }
.page-context-title { font-size: var(--fs-page); font-weight: 700; color: var(--navy); margin: 0; }
.page-context-meta { font-size: var(--fs-meta); color: var(--muted); }

/* titles: one scale */
.card-head h2, .section-title h2, .kpi-name { font-size: var(--fs-title); font-weight: 700; }
.card-head .sub, .section-title .muted { font-size: var(--fs-meta); }

/* branch card: percent of goal, then the figures, the bar, the comparison, the months */
.kpi-main { margin: 14px 0 4px; gap: 8px; }
.kpi-pct, .kpi-pct.good, .kpi-pct.warn, .kpi-pct.bad { font-size: var(--fs-figure); }
.kpi-pct-label { font-size: var(--fs-meta); }
.kpi-figures { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-body); color: var(--ink-2); }
.kpi-figures b { color: var(--ink); font-weight: 700; }
.kpi .tmeter { margin: 12px 0 0; }
.kpi-rows { margin-top: 14px; padding-top: 12px; gap: 8px 12px; font-size: var(--fs-body); }
.kpi-rows dd .cell-sub { display: block; margin-top: 1px; }
.kpi-months { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.kpi-months-title { display: block; font-size: var(--fs-meta); color: var(--muted); margin-bottom: 6px; }
.kpi-drill { margin-top: 14px; }

/* tables: quiet headers; the sort arrow shows on hover and on the sorted column only */
table.data th { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); letter-spacing: .1px; }
table.data td { font-size: var(--fs-body); }
table.data th.sortable::after { content: "▾"; opacity: 0; font-size: 10px; margin-inline-start: 4px; transition: opacity 120ms; }
table.data th.sortable:hover::after { opacity: .4; }
table.data th[aria-sort=ascending]::after { content: "▴"; opacity: 1; color: var(--navy); }
table.data th[aria-sort=descending]::after { content: "▾"; opacity: 1; color: var(--navy); }
table.data th[aria-sort] { color: var(--navy); }

/* the tooltip of charts and cells: navy, small radius, aligned figures */
.tip { background: var(--navy); border-radius: 6px; font-size: var(--fs-meta); padding: 7px 10px; box-shadow: 0 4px 14px rgba(16, 24, 40, .18);
  font-variant-numeric: tabular-nums; }

/* buttons answer the press */
.btn { transition: background .15s, border-color .15s, transform 120ms var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(0.98); }

/* skeleton of a screen while its first data loads (no spinner in an empty card) */
.skeleton { display: grid; gap: 16px; }
.sk { background: var(--surface-3); border-radius: var(--radius); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-line { height: 22px; width: 260px; border-radius: 4px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sk-card { height: 300px; }
.sk-block { height: 220px; }
@keyframes sk-pulse { 50% { opacity: .55; } }
@media (max-width: 900px) { .sk-grid { grid-template-columns: 1fr; } .sk-card { height: 160px; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* =====================================================================
   One page header on every screen: the title of what the screen answers, a meta line, and the screen's
   own controls at the end - a line on the page, not another card above the cards.
   ===================================================================== */
.headline { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: 0 0 12px; padding-inline-start: 0; margin: 2px 0 18px; overflow: visible; align-items: flex-end; justify-content: space-between; }
.headline-title { font-size: var(--fs-page); font-weight: 700; color: var(--navy); }
.headline .muted.small { font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; }
.page-context { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }

/* the goals screen: the figures of a branch the way the summary shows them */
.kpi .tile-sub { margin-top: 10px; font-size: var(--fs-body); color: var(--ink-2); }

/* a tab bar that scrolls on a narrow screen fades at its end, so it reads as "there is more" */
@media (max-width: 760px) {
  .tabs { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px); mask-image: linear-gradient(to left, transparent 0, #000 28px); }
  .headline { align-items: flex-start; }
  .headline .branch-picker { width: 100%; }
  .kpi-pct, .kpi-pct.good, .kpi-pct.warn, .kpi-pct.bad { font-size: 32px; }
}
/* the data screens use the same title size as the dashboard screens */
.page-head h1 { font-size: var(--fs-page); }

/* =====================================================================
   One window per screen (the user, 2026-11-09): on a computer screen the dashboard does not scroll. Each screen
   takes the height of the window; a long table scrolls inside its card with its header and totals row in place;
   what does not fit is split into parts picked at the top of the screen. Narrow or short screens scroll as before.
   ===================================================================== */
.pane[hidden] { display: none !important; }
.page-context { justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.pc-text { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; min-width: 0; }
.pc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pane-picker button { white-space: nowrap; }
.fresh-line { font: inherit; font-size: var(--fs-meta); color: var(--muted); background: none; border: 0; padding: 4px 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; }
.fresh-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.fresh-line.is-late i { background: var(--warn-fill, #d9a400); }
.fresh-line:hover { color: var(--ink); background: var(--surface-2); }
.alert-line { padding: 8px 12px; margin: 0; font-size: var(--fs-meta); align-items: center; }

/* compact branch cards: the three figures side by side under the bar */
.kpi-compact { padding: 14px 16px 12px; }
.kpi-compact .kpi-main { margin: 8px 0 2px; }
.kpi-compact .kpi-pct, .kpi-compact .kpi-pct.good, .kpi-compact .kpi-pct.warn, .kpi-compact .kpi-pct.bad { font-size: 32px; }
.kpi-compact .tmeter { margin-top: 10px; }
.kpi-compact .tmeter-labels { height: 16px; margin-top: 4px; }
.kpi-rows-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; padding-top: 10px; }
.kpi-rows-3 > div { padding-inline: 10px; border-inline-start: 1px solid var(--line); min-width: 0; }
.kpi-rows-3 > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.kpi-rows-3 dt { font-size: var(--fs-meta); margin-bottom: 2px; }
.kpi-rows-3 dd { text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-compact .tile-foot { margin-top: 8px; padding-top: 8px; }
.kpi-compact .tile-value { font-size: 24px; }

/* promotion tiers: one line */
.tiers-card { padding: 10px 16px; }
.tiers-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tiers-title { color: var(--navy); font-size: var(--fs-meta); cursor: help; }

/* two columns of a screen (transfers, proposals) */
.fit-cols { display: grid; gap: 16px; }
.fit-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.fit-cols > .card, .fit-col > .card { margin: 0; }
@media (min-width: 1100px) {
  .fit-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fit-cols-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

@media (min-width: 1100px) and (min-height: 500px) {
  body.has-filters-side { height: 100vh; display: flex; flex-direction: column; overflow: clip; }
  body.has-filters-side > .topbar { flex: none; }
  body.has-filters-side main.page { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: clip; padding: 12px 22px 14px; width: auto; }
  body.has-filters-side main.page > * { width: 100%; }
  .dash-head { flex: none; margin-bottom: 10px; }
  .dash-body, .dash-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .active-filters { flex: none; min-height: 0; margin-bottom: 8px; }
  .active-filters:empty { display: none; }

  #view { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  #view > * { flex: none; margin: 0; }
  #view .page-context { margin: 0; padding-bottom: 10px; }
  #view .stat-row { margin: 0; }
  #view .grid { gap: 14px; }
  #view .fill { flex: 1 1 0; min-height: 0; }
  #view .pane.fill { display: flex; flex-direction: column; gap: 12px; }
  #view .pane > * { margin: 0; }

  /* a card that fills: its table scrolls inside, the header row on top and the totals row at the bottom stay */
  #view .card.fill, #view .grid.fill > .card { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 14px 16px; }
  #view .card.fill > .card-head, #view .grid.fill > .card > .card-head { flex: none; margin-bottom: 10px; }
  #view .card.fill > .table-wrap, #view .grid.fill > .card > .table-wrap,
  #view .drill .table-wrap { flex: 1 1 0; min-height: 0; overflow: auto; }
  #view .fill table.data tfoot td { position: sticky; bottom: 0; z-index: 1; }

  /* a row of cards that fills: one row of the window's height (a titled row has its titles above) */
  #view .grid.fill { grid-template-rows: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
  #view .grid.fill.grid-titled { grid-template-rows: auto minmax(0, 1fr); }
  #view .grid.fill.grid-titled > .section-title { margin: 0; }

  /* a chart takes the height it is given (it keeps its proportions, centred) */
  #view .fill > .chart-card > svg.chart, #view .chart-card.fill > svg.chart { flex: 1 1 0; min-height: 0; height: 100%; }
  #view .chart-card.fill { display: flex; flex-direction: column; padding: 14px 16px; }
  #view .chart-card.fill > .card-head { flex: none; margin-bottom: 6px; }

  /* comparison: the chart beside the table, both the height of the card */
  #view .split.fill { grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 22px; }
  #view .split.fill > .chart-col { display: flex; flex-direction: column; min-height: 0; }
  #view .split.fill > .chart-col > svg.chart { flex: 1 1 0; min-height: 0; height: 100%; }
  #view .split.fill > .table-wrap { min-height: 0; overflow: auto; }
  #view .card.fill > .stat-row { flex: none; margin-bottom: 12px; }

  /* two columns: each column the height of the window */
  #view .fit-cols.fill { grid-template-rows: minmax(0, 1fr); }
  #view .fit-col > .card { flex: 1 1 0; min-height: 0; }

  /* producers -> agents: the agents take the place of the producers table, with a way back */
  #view .card.is-drilled > .table-wrap { display: none; }
  #view .drill-holder:not(:empty) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  #view .drill { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; }

  /* figures that stand in a row take less height */
  #view .stat { padding: 10px 14px; }
  #view .kpi-row .card { margin: 0; }
  body.has-filters-side .totals-float { display: none !important; }
}
/* a branch card: the percent at the start of the line, the amounts at its end */
.kpi-line { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px 12px; flex-wrap: wrap; margin-top: 8px; }
.kpi-line .kpi-main { margin: 0; }
.kpi-line .kpi-figures { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.35; font-size: var(--fs-meta); }
.kpi-line .kpi-figures b { font-size: var(--fs-body); }
.tiers-line .tier-row { display: contents; }
@media (min-width: 1100px) and (min-height: 500px) {
  .kpi-compact .tmeter-labels { display: none; }       /* the target tick is on the bar; the target amount is above it */
  .kpi-compact .tmeter { margin-top: 12px; }
  .tabs button { padding-block: 8px; }
  .active-filters { margin-bottom: 6px; }
  #view .fit-cols.fill > .pane { min-height: 0; }
}
.kpi-rows-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr); }
.kpi-rows-3 > div { padding-inline: 8px; }

/* summary: one branch at a time. Right half: the title, the goal card (its buttons pick the branch) and the two
   month charts one above the other; left half: the producers table, the full height of the screen */
.summary-layout { display: grid; gap: 14px; }
.summary-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.summary-side > .card, .summary-layout > .card { margin: 0; }
@media (min-width: 1100px) { .summary-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.kpi-half { padding: 12px 16px 12px; }
.kpi-half .kpi-head { gap: 10px; flex-wrap: wrap; }
.kpi-half .kpi-main { margin: 10px 0 0; gap: 8px; }
.kpi-half .kpi-pct, .kpi-half .kpi-pct.good, .kpi-half .kpi-pct.warn, .kpi-half .kpi-pct.bad { font-size: 30px; }
.kpi-half .tmeter { margin-top: 8px; }
.kpi-half .tmeter-labels { display: none; }                    /* the tick on the bar is the target */
.ks-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 0; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.ks-fig { padding: 0 12px; border-inline-start: 1px solid var(--line); min-width: 0; }
.ks-fig:nth-child(3n + 1) { padding-inline-start: 0; border-inline-start: 0; }
.ks-fig dt { font-size: var(--fs-meta); color: var(--muted); margin-bottom: 2px; }
.ks-fig dd { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-fig dd b { font-weight: 700; }
.ks-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }

/* the producers table: the name, a long bar, the policies */
.sellers-wide table.data th:first-child { width: 30%; }
.sellers-wide table.data th:last-child { width: 16%; }

@media (min-width: 1100px) and (min-height: 500px) {
  #view .summary-layout.fill { grid-template-rows: minmax(0, 1fr); }
  #view .summary-side > .page-context { flex: none; }
  #view .summary-side > .kpi { flex: none; }
  #view .summary-side > .chart-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px; }
  #view .summary-side > .chart-card > .card-head { flex: none; margin-bottom: 2px; }
  #view .summary-side > .chart-card > svg.chart { flex: 1 1 0; min-height: 0; height: 100%; }
}

/* the goal card: the percent and the bar on one line, then six figures in a grid of three */
.kpi-goal-line { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.kpi-goal-line .kpi-main { margin: 0; flex: none; }
.kpi-goal-line .tmeter { flex: 1 1 auto; margin: 0; }
.kpi-half .ks-figs { margin-top: 10px; }
.kpi-half .ks-fig dt { margin-bottom: 0; }
.kpi-goal-line .kpi-pct-label { display: flex; flex-direction: column; line-height: 1.3; }
.kpi-period { font-size: 12px; color: var(--muted); }
@media (min-width: 1100px) and (min-height: 500px) {
  #view .summary-side > .chart-card { padding: 8px 14px 6px; }
  #view .summary-side > .chart-card > .card-head { margin-bottom: 0; }
}

/* the three branches across the dashboard: one brand colour, the navy, in three close shades
   (the user, 2026-11-09: not three different colours) */
:root {
  --pension: #1f3561;
  --insurance: #3e5a8c;
  --finance: #7189b3;
}

/* =====================================================================
   The top of a dashboard screen takes only what it needs (the user, 2026-11-09): the tabs, then one title row
   with the period, the active filters and the screen's buttons. The "מוצג" line repeated the period of the title
   row - on a computer screen it is not shown; its filters are chips in the title row.
   ===================================================================== */
.tip { width: max-content; max-width: 320px; }
body.has-filters-side main.page > .tip { width: max-content; max-width: 320px; margin: 0; }
.pc-filters { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-filters .af-chip { font-size: var(--fs-meta); padding: 2px 4px 2px 8px; }
@media (max-width: 1099px), (max-height: 499px) { .pc-filters { display: none; } }
@media (min-width: 1100px) and (min-height: 500px) {
  .active-filters { display: none; }
  .dash-head { margin-bottom: 8px; }
  .tabs button { padding: 7px 12px; }
  #view { gap: 10px; }
  #view .page-context, #view .summary-side > .page-context { padding-bottom: 0; border-bottom: 0; margin: 0; min-height: 0; align-items: center; }
  .page-context-title { font-size: 17px; }
  .page-context .toggle-group button { padding: 4px 10px; font-size: 13px; }
}

/* =====================================================================
   The goal card in three lines (the user, 2026-11-09): the branch, its status and percent of the goal; the bar;
   four figures, each with what belongs to it under it (the target under the actual, the done share under the
   annual goal).
   ===================================================================== */
.kpi-half { padding: 10px 14px; }
.kpi-half .kpi-head { align-items: center; gap: 10px; flex-wrap: nowrap; }
.kpi-half .kpi-head .kpi-main { margin: 0; margin-inline-start: auto; display: flex; align-items: baseline; gap: 8px; }
.kpi-half .kpi-pct, .kpi-half .kpi-pct.good, .kpi-half .kpi-pct.warn, .kpi-half .kpi-pct.bad { font-size: 26px; }
.kpi-half .tmeter { margin: 8px 0 0; }
.kpi-half .ks-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; padding-top: 6px; }
.kpi-half .ks-fig, .kpi-half .ks-fig:nth-child(3n + 1) { padding: 0 10px; border-inline-start: 1px solid var(--line); }
.kpi-half .ks-fig:first-child { padding-inline-start: 0; border-inline-start: 0; }
.kpi-half .ks-fig dd { font-size: 13.5px; }

/* =====================================================================
   The three branches in shades of the pink of the SaleSee logo (the user, 2026-11-09), for the columns, the
   target bars and every mark of a branch. The part missing to the target is a light grey, not red on pink.
   ===================================================================== */
:root {
  --pension: #bf6f98;
  --insurance: #d18fb2;
  --finance: #dfaac6;
}
.tmeter-gap { background: rgba(23, 36, 64, .12); }

/* =====================================================================
   The filter panel in the navy of the top bar, narrower and in smaller type (the user, 2026-11-09).
   The lists that open from it stay light, for reading.
   ===================================================================== */
:root { --side-w: 220px; }
.filters-side { background: var(--navy); border-inline-end: 0; top: 60px; color: #fff; color-scheme: dark; }
.filters { padding: 14px 14px 22px; gap: 10px; }
.filters-title { color: #fff; font-size: 14px; padding-bottom: 8px; border-bottom-color: rgba(255, 255, 255, .14); }
.filters-side .label, .filters-side .filters > label, .filters-side .period-group > .label { color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.filters-side .filters > label { display: flex; flex-direction: column; gap: 4px; }
.filters-side .cs-field { height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.filters-side .cs-field:hover:not([disabled]) { border-color: rgba(255, 255, 255, .38); }
.filters-side .cs-field:focus-visible, .filters-side .cs-field[aria-expanded=true] { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(212, 154, 185, .3); }
.filters-side .cs-field.has-value { border-color: rgba(212, 154, 185, .7); }
.filters-side .cs-chevron { border-color: rgba(255, 255, 255, .75); }
.filters-side .agent-multi .cs-field { height: auto; min-height: 32px; padding-block: 4px; }
.filters-side .agent-pick-id { color: rgba(255, 255, 255, .6); }
.filters-side .months { gap: 3px; }
.filters-side .months button { height: 26px; font-size: 12px; border-radius: 5px; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.filters-side .months button:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.filters-side .months button[aria-pressed=true] { background: var(--brand); border-color: var(--brand); color: var(--navy); }
.filters-side .months button.no-data { background: transparent; border-style: dashed; color: rgba(255, 255, 255, .4); }
.filters-side .months button.no-data[aria-pressed=true] { background: rgba(212, 154, 185, .35); color: #fff; }
.filters-side #f-reset, .filters-side .filters-toggle { height: 32px; font-size: 13px; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .28); }
.filters-side #f-reset:hover { background: rgba(255, 255, 255, .08); }
.filters-side .agent-send { background: var(--brand); color: var(--navy); font-size: 13px; }
/* the lists that open: light, in the normal type */
.filters-side .cs-panel { color: var(--ink); color-scheme: light; }
.filters-side .cs-panel label, .filters-side .cs-panel .label { color: var(--ink); font-size: 13px; font-weight: 400; }
.filters-side .part-mpanel, .filters-side .agent-multi .part-mpanel { min-width: 0; }
@media (max-width: 900px) {
  .filters-side { background: var(--navy); border: 0; }
}

/* a filter in use stands out, gently (the user, 2026-11-09): its name in pink with a dot, its field tinted pink;
   the panel title counts the filters in use and the reset button lights up */
.filters-side .filter-field.is-active > .label, .filters-side .period-group.is-active > .label { color: var(--brand); }
.filters-side .filter-field.is-active > .label::before, .filters-side .period-group.is-active > .label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  margin-inline-end: 6px; vertical-align: middle; }
.filters-side .filter-field.is-active .cs-field { background: rgba(212, 154, 185, .16); border-color: var(--brand); font-weight: 600; }
.filters-side .cs-field { transition: background .2s, border-color .2s; }
.filters-count { display: inline-block; min-width: 18px; margin-inline-start: 8px; padding: 0 6px; border-radius: 99px;
  background: var(--brand); color: var(--navy); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.filters-side #f-reset.is-active { border-color: var(--brand); color: var(--brand); }
.filters-side #f-reset.is-active:hover { background: rgba(212, 154, 185, .12); }

/* =====================================================================
   The branches in soft shades of the brand blue (the user, 2026-11-09), finance the lightest.
   Ombré where it belongs: the filter panel, the columns and the line charts (in charts.js), the target bars and
   the bars in the tables.
   ===================================================================== */
:root {
  --pension: #34528c;
  --insurance: #6a8cc9;
  --finance: #afc4e8;
}
.filters-side { background: linear-gradient(180deg, #172440 0%, #1c2c4e 55%, #24385f 100%); }
.tmeter-fill { background: linear-gradient(to left, color-mix(in srgb, var(--c, var(--primary)) 55%, #fff), var(--c, var(--primary))); }
.vbar:not(.neg):not(.pos) .vbar-track > i { background: linear-gradient(to left, color-mix(in srgb, var(--c, var(--primary)) 50%, #fff), var(--c, var(--primary))); }

/* line charts: the line, its dots, the area under it, the dashed monthly target */
.chart-line .grid-line { stroke: var(--grid); }
.chart-line .pt { transition: r .12s; }
.chart-line .target-line { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; }
.chart-line .target-label { fill: var(--navy); font-size: 11px; font-weight: 600; opacity: .75; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chart-key i { display: inline-block; width: 14px; margin-inline-start: 6px; }
.chart-key .key-line { height: 3px; border-radius: 2px; background: var(--c); }
.chart-key .key-target { height: 0; border-top: 2px dashed rgba(23, 36, 64, .55); }
/* a line draws itself when its figures change; the area and the dots come after it */
@keyframes ln-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
svg.anim.chart-line .ln { stroke-dasharray: 1; animation: ln-draw 900ms var(--ease-out) both; }
svg.anim.chart-line .area, svg.anim.chart-line .pt, svg.anim.chart-line .bar-label { animation: fade-in 500ms 350ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  svg.anim.chart-line .ln { animation: none; stroke-dasharray: none; }
  svg.anim.chart-line .area, svg.anim.chart-line .pt, svg.anim.chart-line .bar-label { animation: fade-in 300ms both; }
}

/* a table that fits its place, with no sideways scroll (the comparison): full numbers when there is room,
   short ones (14.7M, the full number on hover) and narrower columns when there is not */
.dual .n-short { display: none; }
.table-wrap.fit { overflow-x: hidden; }
.table-wrap.fit td .cell-name { min-width: 0; }
.table-wrap.is-compact .dual .n-full { display: none; }
.table-wrap.is-compact .dual .n-short { display: inline; cursor: help; }
.table-wrap.is-compact table.data th, .table-wrap.is-compact table.data td { padding-inline: 8px; }
.table-wrap.is-compact table.data th { white-space: normal; }
.table-wrap.is-compact .vbar { min-width: 56px; }
.table-wrap.is-tight table.data { font-size: 12px; }
.table-wrap.is-tight table.data th, .table-wrap.is-tight table.data td { padding-inline: 5px; }
.table-wrap.is-tight .vbar { min-width: 0; }
.table-wrap.is-tight .vbar-track { display: none; }
.table-wrap.is-tight .medal { display: none; }

/* last year in a line chart: a dashed grey line (the comparison) */
:root { --previous: #9ea8ba; }
.chart-line .ln-prev { stroke-dasharray: 5 4; }
.chart-key .key-prev { border-top-color: var(--previous); }
.compare-key { margin-bottom: 4px; }
svg.anim.chart-line .ln-prev { animation: fade-in 600ms 200ms var(--ease-out) both; }
/* a phone: the comparison table tighter still, so every column fits */
.table-wrap.is-tight table.data { font-size: 11px; }
.table-wrap.is-tight table.data th, .table-wrap.is-tight table.data td { padding-inline: 3px; }
/* a phone: less padding inside the cards, more room for the tables */
@media (max-width: 720px) { #view .card { padding: 12px 10px; } }
/* the signed-in user in the navy bar: a light hover that keeps the white name readable */
.userbox .user-meta:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.userbox .user-meta:hover .user-role { color: rgba(255, 255, 255, .8); }

/* the tick boxes of the filter lists: the text a little away from the box, on the same line */
.part-mlist label.part-mopt { align-items: center; gap: 10px; padding-inline: 8px; }
.part-mlist label.part-mopt input { margin: 0; }
.filters .agent-multi label.agent-opt { align-items: center; gap: 10px; }
.filters .agent-multi label.agent-opt input { margin-top: 0; }
/* the tick boxes in the filter lists: an older rule made every label in the panel a block, so the box and its
   text sat on a baseline, touching - here they are one centred line with a gap */
.filters .part-mlist label.part-mopt, .filters .agent-multi label.agent-opt {
  display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1.35; }
.filters .part-mlist label.part-mopt input, .filters .agent-multi label.agent-opt input { margin: 0; flex: none; }

/* "חדשים לשיוך": the numbers taken off the list, folded under it */
.dismissed-box { margin-top: 14px; }
.dismissed-box > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-meta); font-weight: 600; }
.dismissed-box[open] > summary { margin-bottom: 8px; }

/* the targets screen: an agent's annual goal and the share done, under the goal of the months shown */
.ach-year { margin-top: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: end; }
.ach-year b { color: var(--ink-2); font-weight: 600; }

/* the targets table, low rows (the user, 2026-11-09): every figure stays - two lines per cell, the bar a thin
   line at the bottom of the cell, the supervisors button beside the agent's name */
table.data.goals-compact td { padding: 5px 10px; }
table.data.goals-compact th { padding: 7px 10px; }
.goals-compact .gcell { position: relative; padding-bottom: 5px; min-width: 150px; }
.goals-compact .gcell-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; line-height: 1.3; font-weight: 700; }
.goals-compact .gcell-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; line-height: 1.3; text-align: start; }
.goals-compact .gcell-year { cursor: help; }
.goals-compact .gcell-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; }
.goals-compact .gcell-bar .ach-target { top: -2px; bottom: -2px; }
.goals-compact td:first-child { white-space: nowrap; }
.goals-compact td:first-child .cell-name { display: inline-block; vertical-align: middle; min-width: 0; line-height: 1.3; }
.goals-compact td:first-child .cell-sub { margin-top: 0; font-size: 11.5px; }
.goals-compact td:first-child .sub-toggle { vertical-align: middle; margin: 0; margin-inline-start: 8px; padding: 1px 6px; font-size: 11px; }
.goals-compact .pct-chip { font-size: 11.5px; }
.goals-compact td:first-child { white-space: normal; }
.goals-compact td:first-child .cell-name { max-width: 300px; }

/* =====================================================================
   Export to Excel (the user, 2026-11-09): the window - the parts on the side, the sheet as in Excel in the middle,
   the sheet tabs, the file name and the download at the bottom
   ===================================================================== */
.x-btn { display: inline-flex; align-items: center; gap: 6px; }
.x-ic { width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 11v3h12v-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 11v3h12v-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.card-head .x-btn:empty, .card-head .x-btn { padding-inline: 8px; }
dialog.xd { width: min(1280px, 96vw); height: min(820px, 92vh); padding: 0; border: 0; border-radius: 10px; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(16, 24, 40, .3); color: var(--ink); }
dialog.xd:not([open]) { display: none; }
dialog.xd::backdrop { background: rgba(23, 36, 64, .45); }
.xd-head { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none; }
.xd-head h2 { margin: 0; font-size: var(--fs-title); color: var(--navy); }
.xd-close { margin-inline-start: auto; font-size: 18px; color: var(--muted); }
.xd-body { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.xd-list { overflow: auto; padding: 12px 14px; border-inline-end: 1px solid var(--line); background: var(--surface-2); }
.xd-page { padding: 8px 0; border-bottom: 1px solid var(--line); }
.xd-page:last-child { border-bottom: 0; }
.xd-list label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.xd-list input[type=checkbox] { margin: 0; flex: none; }
.xd-page-head { color: var(--navy); }
.xd-part { padding: 4px 0 4px 0; padding-inline-start: 22px; font-size: 13px; }
.xd-part.is-empty { opacity: .55; }
.xd-sum { font-size: 12px; margin-inline-start: auto; }
.xd-opts { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 4px; padding-inline-start: 24px; }
.xd-opt { display: flex; flex-direction: column; gap: 3px; }
.xd-opt .toggle-group { flex-wrap: wrap; }
.xd-opt .toggle-group button { font-size: 12px; padding: 3px 9px; }
.xd-bad { color: var(--bad); }
.xd-preview { min-width: 0; min-height: 0; padding: 12px; display: flex; flex-direction: column; }
.xd-sheet-wrap { flex: 1 1 0; max-height: none; }
.xd-empty { margin: auto; color: var(--muted); }
.xd-sheet td { white-space: nowrap; }
.xd-sheet tr.xd-title td { background: #172440; color: #fff; font-weight: 700; font-size: 15px; text-align: center; height: 34px; }
.xd-sheet tr.xd-sub td { background: #f6eaf1; color: #172440; font-weight: 700; text-align: center; }
.xd-sheet tr.xd-stamp td, .xd-sheet tr.xd-credit td { color: #7d858d; font-size: 11px; font-style: italic; text-align: center; border-color: transparent; }
.xd-sheet tr.xd-gap td { height: 8px; padding: 0; border-color: transparent; }
.xd-sheet tr.xd-headrow td { background: #172440; color: #d49ab9; font-weight: 700; text-align: center; white-space: normal; position: sticky; top: 24px; z-index: 1; }
.xd-filter { font-size: 9px; margin-inline-start: 6px; opacity: .7; }
.xd-sheet tr.xd-total td { background: #e9edf5; color: #172440; font-weight: 700; }
.xd-sheet tr.xd-more td { color: #7d858d; font-style: italic; text-align: center; }
.xd-sheet td.xd-up { color: #0f765f; font-weight: 700; }
.xd-sheet td.xd-down { color: #c0392b; font-weight: 700; }
.xd-sheet tbody tr:not(.xl-head) { cursor: default; }
.xd-foot { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.xd-tabs { display: flex; gap: 2px; overflow-x: auto; max-width: 45%; }
.xd-tabs button { font: inherit; font-size: 12px; border: 1px solid var(--line); border-top: 0; background: var(--surface-2); color: var(--ink-2);
  padding: 4px 10px; border-radius: 0 0 5px 5px; cursor: pointer; white-space: nowrap; }
.xd-tabs button[aria-selected=true] { background: #fff; color: var(--navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--navy); }
.xd-info { font-size: 12px; color: var(--muted); }
.xd-msg { font-size: 12px; color: var(--good); }
.xd-name-label { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.xd-name { width: 300px; height: 32px; }
@media (max-width: 820px) { .xd-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .xd-list { max-height: 34vh; } }
/* the preview of the selected-agents export: the headings as in the file, navy with pink text */
.xl-sheet tr.xl-head td { background: #172440; color: #d49ab9; }
.xl-sheet tr.xl-head .xl-pick { color: #555; }

/* the export window: Excel and the report formats side by side */
.xd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.xd-msg { max-width: 420px; }
/* print a report: only the report, on a white page, the whole length (the one-window layout does not apply) */
#print-root { display: none; }
@media print {
  body.printing { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
}

/* =====================================================================
   The export window, v2 (the user, 2026-11-10): the format at the top, its preview in the middle - the sheet, the
   printed pages, or the email - and the print settings beside the pages (PDF, print)
   ===================================================================== */
.xd-head { align-items: center; }
.xd-formats { margin-inline-start: 18px; }
.xd-formats button { font-size: 13px; padding: 5px 14px; }
.xd-body.with-settings { grid-template-columns: 250px minmax(0, 1fr) 250px; }
.xd-settings { display: none; }
.xd-body.with-settings .xd-settings { display: flex; flex-direction: column; gap: 12px; overflow: auto; padding: 14px; border-inline-start: 1px solid var(--line); background: var(--surface-2); }
.xd-settings h3 { margin: 0; font-size: 14px; color: var(--navy); }
.xd-settings .xd-opt { display: flex; flex-direction: column; gap: 4px; }
.xd-opt-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.xd-settings .toggle-group { flex-wrap: wrap; }
.xd-settings .toggle-group button { font-size: 12px; padding: 3px 10px; }
.xd-hint { font-size: 11px; color: var(--muted); }
.xd-reset { align-self: flex-start; font-size: 12px; }
.xd-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.xd-preview { overflow: auto; }
/* the pages */
.xd-pages { background: #e6e8ec; border-radius: 6px; padding: 16px; overflow: hidden; }
.xd-pages-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; width: max-content; margin-inline: auto; }
.xd-paper { position: relative; background: #fff; box-shadow: 0 2px 12px rgba(16, 24, 40, .2); box-sizing: border-box; overflow: hidden; }
.xd-page-content { transform-origin: top right; }
.xd-break { position: absolute; inset-inline: 0; border-top: 2px dashed #b9c0cc; }
.xd-break span { position: absolute; inset-inline-start: 8px; top: -10px; background: #e6e8ec; color: #5b6472; font-size: 10px; padding: 1px 6px; border-radius: 3px; }
/* the email */
.xd-mail { background: #fff; border: 1px solid var(--line); border-radius: 8px; max-width: 980px; margin: 0 auto; box-shadow: 0 2px 10px rgba(16, 24, 40, .08); }
.xd-mail-head > div { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.xd-mail-k { min-width: 110px; color: var(--muted); font-size: 12.5px; }
.xd-mail-to { color: var(--muted); font-style: italic; }
.xd-att { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; font-size: 12px; }
.xd-att-ic { font-size: 9px; font-weight: 700; color: #fff; border-radius: 3px; padding: 1px 4px; }
.xd-att-ic.xls { background: #1d6f42; }
.xd-att-ic.pdf { background: #c0392b; }
.xd-mail-body { padding: 16px; }
@media (max-width: 1100px) { .xd-body.with-settings { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; } }

/* the pages of the preview take their whole height and the window scrolls them */
.xd-pages { flex: none; }
.xd-preview > * { flex-shrink: 0; }

/* the months charts: columns by default, a line by the switch (the user, 2026-11-10) */
.chart-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface, #fff); }
.chart-switch button { appearance: none; border: 0; background: none; padding: 4px 7px; cursor: pointer; display: inline-flex;
  align-items: center; color: var(--muted); transition: background-color .15s, color .15s; }
.chart-switch button + button { border-inline-start: 1px solid var(--line); }
.chart-switch button:hover { color: var(--navy); background: var(--surface-2); }
.chart-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.chart-switch button:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.cs-ico { width: 14px; height: 12px; display: block; background: currentColor; }
.cs-bars { -webkit-mask: linear-gradient(currentColor 0 0) 0 100%/3px 60% no-repeat, linear-gradient(currentColor 0 0) 50% 100%/3px 100% no-repeat,
  linear-gradient(currentColor 0 0) 100% 100%/3px 40% no-repeat;
  mask: linear-gradient(#000 0 0) 0 100%/3px 60% no-repeat, linear-gradient(#000 0 0) 50% 100%/3px 100% no-repeat,
  linear-gradient(#000 0 0) 100% 100%/3px 40% no-repeat; }
.cs-line { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 10 L5 5 L8 7 L13 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 10 L5 5 L8 7 L13 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.compare-key-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.compare-key-row .compare-key { margin-bottom: 0; }
/* the dashed monthly target over the columns, as over the line */
.chart .target-line { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; }
.chart .target-label { fill: var(--navy); font-size: 11px; font-weight: 600; opacity: .75; }
svg.anim .target-line, svg.anim .target-label { animation: fade-in 500ms 300ms var(--ease-out) both; }
/* the legend follows the chart: a square for columns, a line for a line */
[data-chart="columns"] .chart-key .key-line { width: 10px; height: 10px; border-radius: 2px; }
[data-chart="columns"] .chart-key .key-prev { width: 10px; height: 10px; border: 0; border-radius: 2px; background: var(--previous); opacity: .8; }

/* the summary, all the branches (the client, 2026-11-10): three columns side by side, one per branch - its goal
   card, its months and its producers. Each column stands alone: nothing is added across the branches. */
.summary-all { display: grid; gap: 14px; }
.summary-all .kpi-half .kpi-head { flex-wrap: wrap; row-gap: 4px; }
.summary-all .kpi-half .ks-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; }
.summary-all .kpi-half .ks-fig, .summary-all .kpi-half .ks-fig:nth-child(3n + 1) { padding: 0 10px; border-inline-start: 1px solid var(--line); }
.summary-all .kpi-half .ks-fig:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
.summary-all .chart-card .card-head { flex-wrap: wrap; row-gap: 4px; }
.summary-all .chart-card .card-head h2 { font-size: var(--fs-body); }
.summary-all .chart-total { font-size: 16px; }
.summary-all .sellers-wide table.data th:first-child { width: auto; }
@media (min-width: 1100px) { .summary-all { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (min-height: 500px) {
  #view .summary-all.fill { grid-template-rows: minmax(0, 1fr); }
  #view .summary-all > .kpi { flex: none; }
  #view .summary-all > .chart-card { flex: 1 1 0; min-height: 120px; display: flex; flex-direction: column; padding: 8px 12px 6px; }
  #view .summary-all > .chart-card > .card-head { flex: none; margin-bottom: 0; }
  #view .summary-all > .chart-card > svg.chart { flex: 1 1 0; min-height: 0; height: 100%; }
  #view .summary-all > .sellers-wide { flex: 1.8 1 0; padding: 10px 12px; }
}
/* a short window: the chart and the producers keep a readable height, and the three columns scroll together
   inside their area (a tall window shows them whole, no scroll) */
@media (min-width: 1100px) and (min-height: 500px) {
  #view .summary-all.fill { overflow-y: auto; overscroll-behavior: contain; }
  #view .summary-all > .chart-card { min-height: 170px; }
  #view .summary-all > .sellers-wide { min-height: 260px; }
}
.summary-all .kpi-half .ks-fig dd { font-size: 13px; }

/* =====================================================================
   Every screen size (the user, 2026-11-10: on a laptop everything was squashed). The window-height layout stays,
   but nothing shrinks below a readable size: a chart keeps at least ~190px, a table at least ~8 rows. When the
   window is shorter than that, the screen area scrolls (the top bar, the tabs and the filters stay in place).
   Short windows (most laptops: 1366x768, 1280x800, 1536x864 at 125%) get a tighter top, cards and filter panel;
   very wide screens get a wider page.
   ===================================================================== */
@media (min-width: 1100px) and (min-height: 500px) {
  #view { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
  /* the parts that fill the window grow to hold what they hold (their least size comes from the tables and the
     charts below); a tall window still stretches them to its height */
  #view .fill, #view .card.fill, #view .grid.fill > .card, #view .drill-holder:not(:empty), #view .drill { min-height: auto; }
  #view .grid.fill, #view .summary-layout.fill, #view .summary-all.fill, #view .split.fill, #view .fit-cols.fill { grid-template-rows: 1fr; }
  #view .grid.fill.grid-titled { grid-template-rows: auto 1fr; }
  #view .summary-all.fill { overflow: visible; }
  /* the least readable sizes: a table ~8 rows, a chart ~190px */
  #view .card.fill > .table-wrap, #view .grid.fill > .card > .table-wrap, #view .drill .table-wrap,
  #view .split.fill > .table-wrap, #view .fit-col > .card > .table-wrap { min-height: 320px; }
  #view .summary-all > .sellers-wide > .table-wrap { min-height: 230px; }      /* three columns: ~5 producers, then it scrolls */
  /* a chart keeps its own least height, whatever its title row takes (a narrow card wraps it to two lines) */
  #view .summary-side > .chart-card, #view .summary-all > .chart-card, #view .fill > .chart-card, #view .fit-col > .chart-card,
  #view .chart-card.fill { min-height: auto; }
  #view .summary-side > .chart-card > svg.chart, #view .summary-all > .chart-card > svg.chart,
  #view .fill > .chart-card > svg.chart, #view .fit-col > .chart-card > svg.chart { min-height: 165px; }
  #view .chart-card.fill > svg.chart, #view .split.fill > .chart-col > svg.chart { min-height: 220px; }
  #view .split.fill > .chart-col { min-height: 280px; }
}

@media (min-width: 1100px) and (min-height: 500px) and (max-height: 860px) {
  :root { --fs-meta: 12px; --fs-body: 13px; --fs-title: 15px; --fs-page: 16px; --fs-figure: 30px; }
  .topbar { height: 52px; min-height: 52px; }
  .filters-side { top: 52px; }
  body.has-filters-side main.page { padding: 8px 16px 10px; }
  .dash-head { margin-bottom: 6px; }
  .tabs button { padding: 5px 10px; font-size: 13px; }
  #view { gap: 8px; }
  #view .page-context-title { font-size: 16px; }
  #view .card.fill, #view .grid.fill > .card { padding: 10px 12px; }
  #view .card.fill > .card-head, #view .grid.fill > .card > .card-head { margin-bottom: 6px; }
  .card-head .sub { line-height: 1.35; }
  .page-context .toggle-group button { padding: 3px 9px; font-size: 12.5px; }
  .kpi-half { padding: 8px 12px; }
  .kpi-half .kpi-pct, .kpi-half .kpi-pct.good, .kpi-half .kpi-pct.warn, .kpi-half .kpi-pct.bad { font-size: 22px; }
  .kpi-compact { padding: 10px 12px 8px; }
  .kpi-compact .kpi-pct, .kpi-compact .kpi-pct.good, .kpi-compact .kpi-pct.warn, .kpi-compact .kpi-pct.bad { font-size: 26px; }
  table.data th, table.data td { padding-top: 6px; padding-bottom: 6px; }
  /* the filter panel fits the window without its own scroll */
  .filters { padding: 8px 14px 10px; gap: 4px; }
  .filters-title { font-size: 15px; padding-bottom: 6px; }
  .months { gap: 3px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .months button { padding: 0 1px; }
  .months button { height: 23px; font-size: 12px; }
  .filters select, .filters input, .filters .cs-field { min-height: 29px; height: 29px; padding-block: 2px; font-size: 13px; }
  .filters .label { font-size: 12px; margin-bottom: 2px; }
  .filters .agent-send { margin-top: 4px; }
}

/* a narrow laptop (1100-1400px wide): the filter panel narrower, the page uses the room */
@media (min-width: 1100px) and (max-width: 1400px) {
  :root { --side-w: 210px; }
  body.has-filters-side main.page { padding-inline: 12px; }
}
/* very wide screens (2K, 4K at 150%): the page may be wider than 1440px */
@media (min-width: 2200px) {
  body.has-filters-side main.page > * { max-width: 1800px; }
}
/* a laptop width: the tables tighter, so a wide one (the policies by agent and insured, 11 columns) fits without
   a sideways scroll; headings may take two lines */
@media (min-width: 1100px) and (max-width: 1500px) {
  #view table.data th, #view table.data td { padding-inline: 7px; }
  #view table.data th { white-space: normal; }
  #view table.data td { font-size: 13px; }
}
/* a column of the three that is wide enough (a large screen): the four figures of its goal card in one row */
.summary-all > .kpi { container-type: inline-size; }
@container (min-width: 400px) {
  .summary-all .kpi-half .ks-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .summary-all .kpi-half .ks-fig:nth-child(odd) { padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
  .summary-all .kpi-half .ks-fig:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .summary-all .kpi-half .ks-fig, .summary-all .kpi-half .ks-fig:nth-child(odd) { padding-inline: 8px; }
  .summary-all .kpi-half .ks-fig:first-child { padding-inline-start: 0; }
  .summary-all .kpi-half .ks-fig dd { font-size: 12.5px; }
}
/* a very short window (a 1280x720 or 1366x768 laptop with the browser's bars): the filter labels beside their
   fields, so the whole panel fits; the top tighter still */
@media (min-width: 1100px) and (min-height: 500px) and (max-height: 660px) {
  .topbar { height: 46px; min-height: 46px; }
  .filters-side { top: 46px; }
  .filters .filter-field, .filters > label { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; column-gap: 6px; }
  .filters .filter-field > .label { margin: 0; line-height: 1.2; }
  .filters .filter-field > .agent-send { grid-column: 1 / -1; }
  .filters .period-group { gap: 3px; }
  .tabs button { padding: 4px 9px; }
  body.has-filters-side main.page { padding-top: 6px; }
}
/* the three columns share their rows: the nine cards in one grid - the goal cards, the charts, the producers -
   so the rows line up across the branches even when one card's title takes two lines. A phone: one column,
   branch by branch. */
.summary-all > .sa-card { order: var(--o); margin: 0; min-width: 0; }
@media (min-width: 1100px) {
  #view .summary-all, #view .summary-all.fill { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: max-content 1fr 1fr 1.6fr; }
  .summary-all > .sa-col-1 { grid-column: 1; } .summary-all > .sa-col-2 { grid-column: 2; } .summary-all > .sa-col-3 { grid-column: 3; }
  .summary-all > .sa-row-1 { grid-row: 1; } .summary-all > .sa-row-2 { grid-row: 2; } .summary-all > .sa-row-3 { grid-row: 3; }
  .summary-all > .sa-row-4 { grid-row: 4; }
}

/* all the branches with the policies too (the user, 2026-11-10): four rows - the goal card, premium by month,
   policies by month, the producers. The two charts a little lower; the producers keep ~5 rows. */
@media (min-width: 1100px) and (min-height: 500px) {
  #view .summary-all > .chart-card > svg.chart { min-height: 120px; }
}@media (min-width: 1100px) and (min-height: 500px) {
  #view .summary-all > .sellers-wide > .table-wrap { min-height: 250px; }
  #view .summary-all table.data th, #view .summary-all table.data td { padding-top: 4px; padding-bottom: 4px; }
  #view .summary-all > .sellers-wide > .card-head { margin-bottom: 4px; }
  /* its rows take their least sizes when the window is short (not grown in proportion to the producers) and the
     screen area scrolls; a tall window shares out the rest */
  #view .summary-all.fill { min-height: 0; }
}
/* the goal card in three lines (the user, 2026-11-10): the branch and its sales on the title line (61.4M ₪ מתוך
   73.3M ₪), the status and the percent at its end; the bar; the other figures in one row */
.kpi-half .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.kpi-title { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; flex-wrap: wrap; }
.kpi-amount { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help; }
.kpi-amount b { font-size: 17px; font-weight: 700; color: var(--ink); }
.kpi-of { font-size: var(--fs-meta); color: var(--muted); }
.kpi-state { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.kpi-half .kpi-head .kpi-state .kpi-main { margin: 0; display: inline-flex; align-items: baseline; }
.kpi-facts { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--line); white-space: nowrap; font-size: 12.5px; }
.kf-item { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; cursor: help; }
.kf-label { color: var(--muted); }
.kf-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* a narrow goal card (three columns on a laptop): the status as its icon (its words in the tooltip), so the
   title line holds the branch, its sales and the percent; the row of figures a little tighter */
.kpi-half { container-type: inline-size; }
@container (max-width: 400px) {
  .kpi-half .kpi-state .status { padding-inline: 5px; }
  .kpi-half .kpi-state .status .status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kpi-facts { font-size: 12px; gap: 4px 8px; }
  .kf-item { gap: 3px; }
}
/* the second row of figures: the annual goal done, last year's figure and the difference from it */
.kpi-facts.kpi-facts-2 { margin-top: 4px; padding-top: 0; border-top: 0; }
.kf-short { display: none; }
@container (max-width: 400px) {
  .kf-long { display: none; }
  .kf-short { display: inline; }
}
/* a protected file (Meitav): its password, typed on its card or in the form - kept only for that upload */
.bc-password { display: inline-flex; align-items: center; gap: 6px; }
.bc-password input { width: 170px; }
.file-password { display: grid; gap: 4px; max-width: 320px; margin: 4px 0 10px; font-size: var(--fs-meta); color: var(--muted); }
/* the company target of a producer (the targets file): the percent done, in the colours of the goal status */
.goal-pct { font-weight: 700; cursor: help; }
.goal-pct.good { color: var(--good, #0f765f); }
.goal-pct.warn { color: #b7791f; }
.goal-pct.bad { color: var(--bad, #c0392b); }

/* =====================================================================
   The dashboard on a very light tint of the brand blue (the user, 2026-11-12); the cards stay white.
   ===================================================================== */
body.has-filters-side { background: #eef3fb; }
body.has-filters-side .dash-head, body.has-filters-side .tabs { background: transparent; }
.n-tip { cursor: help; }

/* =====================================================================
   The summary screen, larger and with room (the user, 2026-11-12): bigger type, more space between the parts,
   charts and tables at a comfortable size. The screen may scroll (it does not squeeze into the window).
   ===================================================================== */
body[data-tab="summary"] #view { gap: 16px; }
body[data-tab="summary"] #view .page-context-title { font-size: 20px; }
body[data-tab="summary"] #view .page-context-meta { font-size: 14px; }
body[data-tab="summary"] #view .summary-all, body[data-tab="summary"] #view .summary-all.fill { gap: 18px; row-gap: 18px; }
body[data-tab="summary"] #view .summary-layout { gap: 18px; }
body[data-tab="summary"] #view .summary-side { gap: 16px; }
body[data-tab="summary"] #view .card { padding: 16px 18px; }
body[data-tab="summary"] #view .card-head h2 { font-size: 17px; }
body[data-tab="summary"] #view .card-head .sub { font-size: 13px; }
body[data-tab="summary"] #view .chart-total { font-size: 19px; }
/* the goal card */
body[data-tab="summary"] #view .kpi-half .kpi-name { font-size: 19px; }
body[data-tab="summary"] #view .kpi-amount b { font-size: 20px; }
body[data-tab="summary"] #view .kpi-of { font-size: 14px; }
body[data-tab="summary"] #view .kpi-half .kpi-pct, body[data-tab="summary"] #view .kpi-half .kpi-pct.good,
body[data-tab="summary"] #view .kpi-half .kpi-pct.warn, body[data-tab="summary"] #view .kpi-half .kpi-pct.bad { font-size: 28px; }
body[data-tab="summary"] #view .kpi-half .tmeter { margin-top: 10px; }
body[data-tab="summary"] #view .kpi-facts { font-size: 14px; margin-top: 10px; padding-top: 8px; gap: 6px 16px; }
body[data-tab="summary"] #view .kpi-facts.kpi-facts-2 { margin-top: 6px; padding-top: 0; }
/* the charts: their labels larger, more height */
body[data-tab="summary"] #view .chart text { font-size: 13px; }
body[data-tab="summary"] #view .summary-all > .chart-card > svg.chart,
body[data-tab="summary"] #view .summary-side > .chart-card > svg.chart { min-height: 230px; }
/* the producers: larger rows, more of them before the table scrolls */
body[data-tab="summary"] #view table.data th { font-size: 13px; }
body[data-tab="summary"] #view table.data td { font-size: 14.5px; }
body[data-tab="summary"] #view table.data th, body[data-tab="summary"] #view table.data td { padding-top: 8px; padding-bottom: 8px; }
body[data-tab="summary"] #view .summary-all > .sellers-wide > .table-wrap,
body[data-tab="summary"] #view .sellers-wide > .table-wrap { min-height: 420px; }

/* the goal card's title line stays one line, its words and figures on one baseline (the user, 2026-11-12: a percent
   of four digits, 105.1%, dropped to a second line on a laptop and the name and the figures sat at other heights).
   A narrow card makes its figures smaller instead of breaking the line. */
.kpi-half .kpi-head, body[data-tab="summary"] #view .kpi-half .kpi-head { flex-wrap: nowrap; align-items: baseline; }
.kpi-half .kpi-title { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; align-items: baseline; white-space: nowrap; overflow: hidden; }
.kpi-half .kpi-title .kpi-name { flex: none; line-height: 1.2; }
.kpi-half .kpi-amount { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi-half .kpi-state { flex: none; align-items: baseline; }
.kpi-half .kpi-state .status { align-self: baseline; }
.kpi-half .kpi-state .kpi-main, .kpi-half .kpi-pct { line-height: 1.2; }
@container (max-width: 420px) {
  body[data-tab="summary"] #view .kpi-half .kpi-name, .kpi-half .kpi-name { font-size: 16px; }
  body[data-tab="summary"] #view .kpi-amount b, .kpi-amount b { font-size: 16px; }
  body[data-tab="summary"] #view .kpi-of, .kpi-of { font-size: 12px; }
  body[data-tab="summary"] #view .kpi-half .kpi-pct, body[data-tab="summary"] #view .kpi-half .kpi-pct.good,
  body[data-tab="summary"] #view .kpi-half .kpi-pct.warn, body[data-tab="summary"] #view .kpi-half .kpi-pct.bad,
  .kpi-half .kpi-pct, .kpi-half .kpi-pct.good, .kpi-half .kpi-pct.warn, .kpi-half .kpi-pct.bad { font-size: 21px; }
  .kpi-half .kpi-title { gap: 4px 6px; }
  .kpi-half .kpi-head { gap: 4px 8px; }
}
@container (max-width: 330px) {
  body[data-tab="summary"] #view .kpi-of, .kpi-of { display: none; }      /* "מתוך": in the tooltip of the amount */
}
/* a narrow goal card (three columns on a laptop): its rows of figures at a size that fits, on the summary screen too */
@container (max-width: 420px) {
  body[data-tab="summary"] #view .kpi-facts, .kpi-facts { font-size: 12px; gap: 4px 8px; }
  body[data-tab="summary"] #view .kf-item, .kf-item { gap: 3px; }
}
@container (max-width: 345px) {
  body[data-tab="summary"] #view .kpi-facts, .kpi-facts { font-size: 11.5px; gap: 4px 4px; }
  body[data-tab="summary"] #view .kf-item, .kf-item { gap: 2px; }
}
@media (min-width: 1100px) and (max-width: 1440px) {
  /* a narrow laptop: the goal cards of the three columns a little less padded, so their rows fit the width */
  body[data-tab="summary"] #view .summary-all > .kpi { padding: 12px 12px; }
}

/* =====================================================================
   An animation at every change of page (the user, 2026-11-12).
   Between the screens of the dashboard: the parts of the new screen come in one after the other - a fade and a
   short rise. Between the pages of the site: a soft cross-fade of the whole page (the browser's view transitions).
   ===================================================================== */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
#view.page-enter > *:not(.summary-all), #view.page-enter .summary-all > * {
  animation: page-in 420ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
  animation-delay: calc(var(--k, 0) * 40ms);
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
::view-transition-new(root) { animation: 280ms cubic-bezier(.22, 1, .36, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  #view.page-enter > *:not(.summary-all), #view.page-enter .summary-all > * { animation: fade-in 200ms linear both; animation-delay: 0ms; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}