/* ============================================================
   ECHUD BRAND TOKENS — sampled from echud.co.il (2026-06-05)
   Primary red    = #ED1C24  (CTA buttons, primary accent)
   Dark gray      = #2C2C2C  (top bar text, secondary buttons)
   White          = #FFFFFF
   Soft gray      = #F5F5F5
   Font           = "Nachlieli CLM" (fallback Heebo / Assistant)
   Border radius  = 4px
   ============================================================ */
:root {
  --echud-red:        #ED1C24;
  --echud-red-dark:   #C8161E;
  --echud-red-light:  #FFE5E7;
  --echud-red-tint:   #FEF5F6;
  --echud-dark:       #2C2C2C;
  --echud-dark-soft:  #4A4A4A;
  --surface:          #FFFFFF;
  --bg:               #ECEEF1;  /* Option B (picked 2026-06-09) — light cool gray; tile borders carry the edge */
  --card-border:      #D8DCE2;  /* Hairline border on KPI tiles + table cards (Option B) */
  --soft:             #F5F5F5;
  --text:             #1A1A1A;
  --muted:            #6B7280;
  --border:           #E5E7EB;
  --green:            #10B981;
  --green-light:      #ECFDF5;
  --amber:            #F59E0B;
  --amber-light:      #FFFBEB;
  /* Current-year / "active now" highlight — Option B3 blue (picked 2026-06-10),
     replaces the alarming red that read as "a problem" on the yearly bars. */
  --current-blue:       #2563EB;
  --current-blue-dark:  #1E5EB8;
  --current-blue-light: #3B82F6;
}
* { box-sizing: border-box; }
html, body {
  font-family: "Nachlieli CLM", "Heebo", "Assistant", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  direction: rtl;
}

/* ============================================================
   App header (used by _Layout for authenticated pages)
   ============================================================ */
.header {
  background: var(--surface);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.logo-wrap { display: flex; align-items: center; gap: 18px; }
.logo-img { height: 80px; width: auto; }
.logo-divider { width: 1px; height: 50px; background: var(--border); }
.system-name { display: flex; flex-direction: column; line-height: 1.1; }
.system-name .label { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }
.system-name .title { font-size: 22px; font-weight: 700; color: var(--echud-dark); }
.header-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.header-nav a { color: var(--echud-dark); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; cursor: pointer; }
.header-nav a.active { border-bottom-color: var(--echud-red); color: var(--echud-red); font-weight: 600; }
.header-nav a:hover { color: var(--echud-red); }
.user-block { display: flex; align-items: center; gap: 12px; }
.user-chip {
  background: var(--soft);
  color: var(--echud-dark);
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
}
.btn-logout {
  background: var(--echud-red);
  color: white;
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-logout:hover { background: var(--echud-red-dark); color: white; }

/* ============================================================
   Login page (full-bleed centered card — L1)
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-card {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 36px 40px 32px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.login-card .login-logo { height: 90px; width: auto; margin-bottom: 16px; }
.login-card h1 {
  margin: 8px 0 24px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--echud-red);
  letter-spacing: 0.3px;
}
.login-form { text-align: right; }
.login-form .field { margin-bottom: 16px; }
.login-form label { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.login-form input[type=text],
.login-form input[type=password] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  direction: rtl;
  background: var(--surface);
  color: var(--text);
}
.login-form input:focus {
  outline: none;
  border-color: var(--echud-red);
  box-shadow: 0 0 0 2px var(--echud-red-light);
}
.login-form .remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 20px;
}
.login-form .remember input { accent-color: var(--echud-red); }
.login-form .btn-submit {
  background: var(--echud-red);
  color: white;
  border: none;
  padding: 11px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
}
.login-form .btn-submit:hover { background: var(--echud-red-dark); }
.login-form .error {
  background: var(--echud-red-tint);
  border: 1px solid var(--echud-red-light);
  color: var(--echud-red-dark);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 13px;
  text-align: right;
}
.login-footer { margin-top: 20px; font-size: 12px; color: var(--muted); }

/* ============================================================
   Dashboard layout (sidebar + main)
   ============================================================ */
.layout { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 114px); }
.sidebar {
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 22px 20px;
}
.main {
  padding: 24px 32px;
  overflow: auto;
  background: var(--bg);
}

/* ============================================================
   KPI tiles (Dashboard)
   ============================================================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface);
  border-radius: 4px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border-top: 3px solid var(--echud-red);
}
.kpi.gray  { border-top-color: var(--echud-dark); }
.kpi.green { border-top-color: var(--green); }
.kpi.amber { border-top-color: var(--amber); }
.kpi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.kpi-title { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 32px; font-weight: 800; line-height: 1; color: var(--echud-dark); }
.kpi-delta { font-size: 13px; margin-top: 8px; color: var(--green); font-weight: 500; }
.kpi-delta.neg { color: var(--echud-red); }

/* ============================================================
   Dashboard — Phase 5 real wiring
   ============================================================ */

/* Sidebar filter panel */
.view-tabs { display: flex; background: var(--soft); padding: 4px; border-radius: 4px; margin-bottom: 24px; }
.view-tab {
  flex: 1; padding: 10px 12px; text-align: center; border-radius: 3px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--muted);
  border: none; background: transparent; font-family: inherit;
}
.view-tab.active {
  background: var(--echud-red); color: white;
  box-shadow: 0 2px 4px rgba(237, 28, 36, 0.25);
}
.sidebar h3 {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.6px; margin: 0 0 10px 0; font-weight: 700;
}
.filter-block { margin-bottom: 22px; }
.filter-block label { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.filter-block input[type="date"],
.filter-block select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 4px; font-family: inherit; font-size: 14px;
  background: var(--surface); color: var(--text);
}
.filter-block input:focus, .filter-block select:focus {
  outline: none; border-color: var(--echud-red);
  box-shadow: 0 0 0 2px var(--echud-red-light);
}
.btn-apply {
  background: var(--echud-red); color: white; border: none;
  padding: 11px; border-radius: 4px; font-family: inherit;
  font-weight: 600; cursor: pointer; font-size: 15px; width: 100%; margin-top: 10px;
}
.btn-apply:hover { background: var(--echud-red-dark); }
.btn-reset {
  background: transparent; color: var(--muted); border: none;
  cursor: pointer; font-size: 13px; padding: 8px; width: 100%; text-align: center;
}
.btn-reset:hover { color: var(--echud-red); }

/* Main content */
.page-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.page-title .crumbs { color: var(--muted); font-size: 13px; }
.page-title h1 { margin: 4px 0 0 0; font-size: 24px; font-weight: 700; color: var(--echud-dark); }
.page-title .period {
  color: var(--muted); font-size: 14px; background: var(--surface);
  padding: 8px 14px; border-radius: 4px; border: 1px solid var(--border);
}
.page-title .period strong { color: var(--echud-red); font-weight: 600; }

/* Charts */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.card {
  background: var(--surface); border-radius: 4px; padding: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--soft);
}
.card-title { font-weight: 700; font-size: 16px; color: var(--echud-dark); }
.card-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.bar-list { padding: 4px 0; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14px; }
.bar-row .lbl { width: 130px; color: var(--text); font-weight: 500; }
.bar-row .track { flex: 1; height: 12px; background: var(--soft); border-radius: 2px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--echud-red); }
.bar-row .val { width: 60px; text-align: left; color: var(--echud-dark); font-weight: 600; }

/* Data table card with AG Grid */
.table-card {
  background: var(--surface); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden;
}
.table-header {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.table-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--echud-dark); }
.table-actions { display: flex; gap: 8px; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 4px; font-family: inherit;
  font-size: 13px; cursor: pointer; color: var(--echud-dark);
}
.btn-ghost:hover { border-color: var(--echud-red); color: var(--echud-red); background: var(--echud-red-tint); }

/* AG Grid quartz theme echud overrides */
.ag-theme-quartz {
  --ag-font-family: "Nachlieli CLM", "Heebo", "Assistant", sans-serif;
  --ag-header-background-color: #F8FAFC;
  --ag-header-foreground-color: var(--echud-dark);
  --ag-header-cell-hover-background-color: var(--echud-red-tint);
  --ag-odd-row-background-color: #FCFCFD;
  --ag-row-hover-color: var(--echud-red-tint);
  --ag-selected-row-background-color: var(--echud-red-light);
  --ag-border-color: var(--border);
  --ag-font-size: 13px;
  --ag-row-height: 42px;
  --ag-header-height: 46px;
}

.pill { display: inline-block; padding: 3px 12px; border-radius: 2px; font-size: 11px; font-weight: 600; }
.pill-private { background: var(--echud-red-light); color: var(--echud-red-dark); }
.pill-company { background: var(--soft); color: var(--echud-dark); }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--echud-dark); }
.empty-state p { margin: 4px 0; font-size: 14px; }
.empty-state code {
  background: var(--soft); padding: 2px 6px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 12px;
}

/* ============================================================
   v2 REDESIGN — toolbar + GridStack dashboard + settings
   ============================================================ */
:root {
  --purple: #8B5CF6;
  --blue:   #3B82F6;
}

/* Role badge in header chip */
.role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; margin-inline-start: 6px;
  background: var(--echud-red-light); color: var(--echud-red);
}

/* Toast notification (TempData["StatusMessage"]) */
.toast-status {
  background: #ECFDF5; border: 1px solid var(--green); border-radius: 4px;
  padding: 10px 16px; margin: 12px 32px 0 32px; font-size: 13px;
  color: #064E3B;
}

/* Toolbar above dashboard */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 32px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.toolbar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.period-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--soft); padding: 6px 12px; border-radius: 18px; font-size: 13px;
}
.period-pill select, .period-pill input {
  border: none; background: transparent; font-family: inherit; font-size: 13px;
  color: var(--echud-dark); cursor: pointer;
}
.period-pill input[type=date] { cursor: auto; }
.period-pill .sep { color: var(--muted); }
.period-summary { font-size: 13px; color: var(--muted); }
.btn-tool {
  background: transparent; color: var(--echud-dark); padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 4px; font-family: inherit;
  font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-tool:hover { border-color: var(--echud-red); color: var(--echud-red); }
.btn-tool.active { background: var(--echud-red); color: white; border-color: var(--echud-red); }

/* Dash wrap = container for the GridStack */
.dash-wrap { padding: 16px 24px; }

/* GridStack overrides (echud styling) */
/* GridStack's `margin: 14` (set in initGrid) creates a 14px content inset
   around every item, while the .kpi-row above has no such inset — so tables
   visually sit 14px narrower than the KPIs and the right/left edges don't
   line up. Compensate with a negative margin on .grid-stack that pulls its
   outer edges out by exactly the GridStack margin amount; items then end up
   flush with the parent's edges, matching the KPI tile alignment. */
.grid-stack {
  background: transparent;
  margin-left: -14px;
  margin-right: -14px;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content,
.kpi-row > .kpi-row-tile > .grid-stack-item-content {
  background: var(--surface);
  /* Option B (picked 2026-06-09): 1px hairline border + soft shadow so the
     tile edge is explicit against the new lighter-gray page bg (#ECEEF1).
     12px corners are noticeably rounded vs the old 8px. */
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* KPI row — CSS Grid auto-fit so every tile is the same width and they
   wrap to a second row when the viewport can't fit them all at the min
   width. Tiles are NOT in GridStack (no drag/resize); the saved layout
   for KPIs is ignored by grid.load(..., addAndRemove=false) since the
   gs-id entries no longer match anything in the GridStack DOM. */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;          /* breathing room between KPI tiles */
  margin-bottom: 22px; /* gap before the tables row */
}
/* All visible KPI tiles forced onto a single row (overrides the auto-fit
   wrap). --kpi-cols is set by JS (applyKpiVisibility) to the count of
   non-removed tiles — as a custom property, NOT an inline
   grid-template-columns, so the ≤768px media query below can still win and
   stack the tiles one per row on phones. */
.kpi-row.kpi-row-5 {
  grid-template-columns: repeat(var(--kpi-cols, 5), minmax(0, 1fr));
}
/* KPI removed from view via the × button (count adjusted by JS). */
.kpi-row-tile.kpi-hidden { display: none; }

/* × remove button on each KPI tile — only visible in edit mode
   (body.layout-editing, toggled by "ערוך פריסה"). Sits at the end of the
   tile header (left side in RTL). The KPIs are NOT in GridStack — this only
   hides/removes them, no move or resize. */
.kpi-remove-btn {
  display: none;
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--echud-red); color: #fff;
  font-size: 15px; line-height: 1; font-weight: 700;
  cursor: pointer; margin-inline-end: 4px;
}
.kpi-remove-btn:hover { background: var(--echud-red-dark); }
body.layout-editing .kpi-remove-btn { display: inline-flex; }
/* Edit-mode affordance: outline each KPI tile so it's clear it's removable. */
body.layout-editing .kpi-row-tile > .grid-stack-item-content {
  outline: 2px dashed rgba(237,28,36,.45);
  outline-offset: -2px;
}
.kpi-row-tile {
  height: 240px;
  position: relative;
  display: flex;
}
.kpi-row-tile > .grid-stack-item-content { flex: 1; }
/* Title bar of every tile/panel — soft red-tinted background so headers stand
   apart from the white body. The 3px accent stripe sits above, so the title
   sits on the tint, framed top + bottom for clear contrast. */
.gs-item-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: var(--echud-red-tint);
  border-bottom: 1px solid var(--border);
}
.gs-item-header .ttl { font-size: 13px; font-weight: 600; color: var(--echud-dark); }
/* Inline date-range chip in tile/table headers — populated from the dashboard
   date picker via refreshDateRangeChips(). Sits next to the title, muted so
   it doesn't compete with the title. */
.gs-item-header .header-date-range {
  font-size: 11px; color: var(--muted); font-weight: 500;
  white-space: nowrap;
  margin-inline-start: 8px;
  flex: 1; text-align: start;
}
.gs-item-header .gs-item-actions { flex-shrink: 0; }
.gs-item-actions { display: flex; gap: 6px; align-items: center; }
.gs-item-actions .row-count { font-size: 11px; color: var(--muted); }
.gs-item-actions .icon-btn {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 3px;
}
.gs-item-actions .icon-btn:hover { background: var(--soft); color: var(--echud-dark); }
/* overflow: hidden — KPI tiles must never show a scrollbar (their content is
   small + static), and the data-table panels manage their own scroll inside
   AG Grid. Without this the panel-level outer scrollbar showed up on the
   left (RTL default) on top of AG Grid's own. */
.gs-item-body { padding: 14px; flex: 1; overflow: hidden; }

/* KPI tile content inside a GridStack item */
.kpi-tile { position: relative; }
.kpi-tile .stripe {
  position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: var(--echud-red); z-index: 1;
}
.kpi-tile.gray   .stripe { background: var(--echud-dark); }
.kpi-tile.green  .stripe { background: var(--green); }
.kpi-tile.amber  .stripe { background: var(--amber); }
.kpi-tile.blue   .stripe { background: var(--blue); }
.kpi-tile.purple .stripe { background: var(--purple); }
.gs-item-body.kpi {
  display: flex; flex-direction: column; justify-content: center;
}
.gs-item-body.kpi .lbl { font-size: 12px; color: var(--muted); }
.gs-item-body.kpi .val { font-size: 26px; font-weight: 800; color: var(--echud-dark); line-height: 1.1; margin-top: 4px; }

/* ============================================================
   Settings page (sub-nav + content panel)
   ============================================================ */
.settings-shell {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 20px; padding: 20px 32px;
}
.settings-nav {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 0; height: fit-content;
}
.settings-nav a {
  display: block; padding: 10px 18px; color: var(--echud-dark);
  text-decoration: none; font-size: 14px; border-right: 3px solid transparent;
  cursor: pointer;
}
.settings-nav a.active {
  background: var(--echud-red-tint); color: var(--echud-red);
  border-right-color: var(--echud-red); font-weight: 600;
}
.settings-nav a:hover:not(.disabled) { background: var(--soft); }
.settings-nav a.disabled { opacity: .5; cursor: not-allowed; }

.settings-content {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px;
}
.settings-content h2 { margin: 0 0 4px 0; font-size: 20px; color: var(--echud-dark); }
.settings-content .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

.users-table-wrap {
  margin-top: 18px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.users-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table-wrap th {
  padding: 10px 12px; background: var(--soft); text-align: right;
  font-weight: 600; color: var(--echud-dark);
}
.users-table-wrap td { padding: 10px 12px; border-top: 1px solid var(--border); }
.users-table-wrap tr:hover td { background: var(--echud-red-tint); }
.icon-btn {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.icon-btn:hover { background: var(--soft); color: var(--echud-dark); }
.icon-btn.danger:hover { background: var(--echud-red-light); color: var(--echud-red); }
.role-pill {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.role-pill.admin { background: var(--echud-red-light); color: var(--echud-red); }
.role-pill.user  { background: var(--soft); color: var(--echud-dark); }

.btn-primary {
  background: var(--echud-red); color: white; padding: 10px 18px;
  border: none; border-radius: 4px; font-family: inherit;
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.btn-primary:hover { background: var(--echud-red-dark); }
.btn-secondary {
  background: transparent; color: var(--echud-dark); padding: 10px 18px;
  border: 1px solid var(--border); border-radius: 4px; font-family: inherit;
  font-size: 14px; cursor: pointer;
}

/* Modal */
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-back.open { display: flex; }
.modal {
  background: white; border-radius: 8px; padding: 24px;
  width: 480px; max-width: 95vw;
}
.modal h3 { margin: 0 0 4px 0; font-size: 18px; color: var(--echud-dark); }
.modal .sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.form-field { margin-bottom: 12px; }
.form-field label {
  display: block; font-size: 13px; color: var(--echud-dark);
  margin-bottom: 4px; font-weight: 500;
}
.form-field input, .form-field select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 4px; font-family: inherit; font-size: 14px; direction: rtl;
}
.form-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}

/* Reports placeholder ("coming soon") */
.coming-soon {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 60px 20px; text-align: center;
  max-width: 600px; margin: 0 auto;
}
.coming-soon .icon { font-size: 48px; }
.coming-soon h2 { margin: 12px 0 6px; color: var(--echud-dark); }
.coming-soon p { color: var(--muted); margin: 0; line-height: 1.6; }

/* Login shell (forced password change uses this without _Layout) */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 20px;
}
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.validation-summary ul { list-style: none; padding: 0; margin: 0; }
.validation-summary {
  background: var(--echud-red-tint); border: 1px solid var(--echud-red-light);
  color: var(--echud-red-dark); padding: 10px 14px; border-radius: 4px;
  margin-bottom: 14px; font-size: 13px; text-align: right;
}
.validation-summary li { margin: 2px 0; }
.text-danger { color: var(--echud-red); font-size: 12px; }

/* ============================================================
   v3 — Column picker popup (per-table) — and dashboard polish
   ============================================================ */
.col-picker-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 1100;
}
.col-picker {
  background: white; border-radius: 8px; width: 460px; max-width: 95vw;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.col-picker-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.col-picker-header strong { font-size: 15px; color: var(--echud-dark); }
.col-picker-close {
  background: transparent; border: none; font-size: 18px; cursor: pointer;
  color: var(--muted);
}
.col-picker-actions {
  padding: 8px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 8px;
}
.col-picker-actions button {
  background: var(--soft); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 12px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.col-picker-actions button:hover { background: var(--echud-red-tint); color: var(--echud-red); }
.col-picker-list {
  padding: 12px 18px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.col-picker-list label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.col-picker-list label:hover { background: var(--soft); }
.col-picker-list label .raw {
  margin-inline-start: auto; font-family: ui-monospace, monospace;
  font-size: 10px; color: var(--muted);
}
.col-picker-list input[type=checkbox] { accent-color: var(--echud-red); }

/* Hint line above the all/none actions */
.col-picker-hint {
  padding: 6px 18px 0; font-size: 11px; color: var(--muted); text-align: right;
}

/* Draggable rows */
.col-picker-list .col-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; font-size: 13px;
  background: white; border: 1px solid transparent;
  cursor: grab;
}
.col-picker-list .col-row:hover { background: var(--soft); }
.col-picker-list .col-row.dragging { opacity: .45; cursor: grabbing; }
.col-picker-list .col-row.drop-before { border-top-color: var(--echud-red); }
.col-picker-list .col-row.drop-after  { border-bottom-color: var(--echud-red); }
.col-picker-list .col-row .col-row-label { flex: 0 1 auto; }
.col-picker-list .col-row .raw {
  margin-inline-start: auto; font-family: ui-monospace, monospace;
  font-size: 10px; color: var(--muted);
}
.col-picker-list .col-row .drag-handle {
  font-size: 14px; color: var(--muted); padding: 0 4px; cursor: grab;
  user-select: none;
}
.col-picker-list .col-row input[type=checkbox] { cursor: pointer; }

/* Per-column × button on AG Grid headers. Only available while edit-layout
   mode is active (body.layout-editing, toggled by "ערוך פריסה") — outside
   edit mode it's display:none, so it can't be hovered or clicked. Within
   edit mode it still reveals on header hover. */
.ag-header-cell { position: relative; }
.header-remove-x {
  display: none;
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 16px; height: 16px; line-height: 12px; padding: 0;
  border: none; background: transparent; color: var(--muted);
  font-size: 16px; cursor: pointer; border-radius: 3px;
  opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
  z-index: 2;
}
body.layout-editing .header-remove-x { display: block; }
body.layout-editing .ag-header-cell:hover .header-remove-x { opacity: 1; }
.header-remove-x:hover { background: var(--echud-red-tint); color: var(--echud-red); }

/* ============================================================
   Excel-style set filter popup (custom Community filter —
   SetValuesFilter in dashboard.js)
   ============================================================ */
.set-filter { padding: 8px; width: 232px; font-size: 13px; font-family: inherit; }
.set-filter .sf-search {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 4px; font-family: inherit; font-size: 12.5px; margin-bottom: 6px;
}
.set-filter .sf-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 2px; cursor: pointer;
}
.set-filter .sf-row:hover { background: var(--soft); border-radius: 3px; }
.set-filter .sf-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-filter .sf-all { border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 4px; font-weight: 600; }
.set-filter .sf-list { max-height: 240px; overflow-y: auto; }
.set-filter .sf-empty { color: var(--muted); padding: 8px; text-align: center; }
.set-filter .sf-footer { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.set-filter .sf-clear {
  background: transparent; border: none; color: var(--echud-red);
  cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 2px 4px;
}
.set-filter .sf-clear:hover { text-decoration: underline; }

/* ============================================================
   Row-detail drawer (double-click a row → side panel)
   ============================================================ */
.row-drawer-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 1100; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.row-drawer-back.open { opacity: 1; pointer-events: auto; }

.row-drawer {
  position: fixed; top: 0; bottom: 0;
  /* In RTL, inset-inline-start is the visual right edge — slides in from there */
  inset-inline-start: 0;
  width: 480px; max-width: 92vw;
  background: white;
  display: flex; flex-direction: column;
  box-shadow: 0 0 20px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1101;
}
.row-drawer-back.open .row-drawer { transform: translateX(0); }

.row-drawer-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--soft);
}
.row-drawer-header strong {
  font-size: 15px; color: var(--echud-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-drawer-close {
  background: transparent; border: none; font-size: 22px; cursor: pointer;
  color: var(--muted); line-height: 1; padding: 0 6px;
}
.row-drawer-close:hover { color: var(--echud-red); }

.row-drawer-body {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.row-drawer-section { padding: 8px 18px 14px; }
.row-drawer-section-title {
  margin: 4px 0 8px; padding: 4px 8px;
  font-size: 13px; color: var(--echud-dark);
  background: var(--echud-red-tint); border-radius: 4px;
  position: sticky; top: 0; z-index: 1;
}
.row-drawer-list {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 4px 12px;
}
.row-drawer-row { display: contents; }
.row-drawer-row dt {
  font-size: 12px; color: var(--muted);
  padding: 6px 8px; text-align: right;
  border-bottom: 1px dashed var(--border);
}
.row-drawer-row dd {
  margin: 0; font-size: 13px; color: var(--echud-dark);
  padding: 6px 8px; word-break: break-word;
  border-bottom: 1px dashed var(--border);
}
.row-drawer-empty {
  padding: 10px 8px; font-size: 12px; color: var(--muted); font-style: italic;
}

/* Save-as-default button — momentary success state */
#save-default-btn.saved {
  background: #e8f5e9; color: #1b5e20; border-color: #66bb6a;
}

/* ============================================================
   Vertical scrollbars on the RIGHT edge (override RTL default)
   The whole BI is in Hebrew but the user prefers right-side
   scrollbars. The trick: set the scrolling element to LTR (which
   moves its scrollbar to the right) and reset RTL on its children
   so content layout is unchanged.
   ============================================================ */

/* Page-level scrollbar (window) — flip via the html element */
html { direction: ltr !important; }
body { direction: rtl !important; }

/* AG Grid v31: the vertical scrollbar lives on either .ag-body-viewport
   (older/community) or .ag-body-vertical-scroll-viewport (newer split
   scrollbar layout). Forcing those to LTR moves the scrollbar to the right;
   inner row/column containers are restored to RTL so column order and
   horizontal scroll origin are unchanged. The high-specificity selectors
   (`.ag-rtl.ag-theme-quartz`) are required to beat AG Grid's own RTL rules
   that target the same chained pair. */
.ag-theme-quartz .ag-body-viewport,
.ag-theme-quartz .ag-body-vertical-scroll,
.ag-theme-quartz .ag-body-vertical-scroll-viewport,
.ag-rtl.ag-theme-quartz .ag-body-viewport,
.ag-rtl.ag-theme-quartz .ag-body-vertical-scroll,
.ag-rtl.ag-theme-quartz .ag-body-vertical-scroll-viewport,
.ag-theme-quartz.ag-rtl .ag-body-viewport,
.ag-theme-quartz.ag-rtl .ag-body-vertical-scroll,
.ag-theme-quartz.ag-rtl .ag-body-vertical-scroll-viewport {
  direction: ltr !important;
}
.ag-theme-quartz .ag-row,
.ag-theme-quartz .ag-header-row,
.ag-theme-quartz .ag-center-cols-clipper,
.ag-theme-quartz .ag-center-cols-viewport,
.ag-theme-quartz .ag-center-cols-container,
.ag-theme-quartz .ag-pinned-left-cols-container,
.ag-theme-quartz .ag-pinned-right-cols-container {
  direction: rtl !important;
}
/* AG Grid v31 puts the dedicated `.ag-body-vertical-scroll` element inside a
   flex row `.ag-body` whose direction is rtl, so the scrollbar element naturally
   lands on the visual LEFT. Setting its flex order to -1 makes it the first
   item in the row — in RTL flex that's the visual RIGHT edge, which is where
   we want the scrollbar. Confirmed by inspecting the live DOM at
   #grid-clients .ag-body > children. */
.ag-theme-quartz .ag-body-vertical-scroll,
.ag-rtl.ag-theme-quartz .ag-body-vertical-scroll,
.ag-theme-quartz.ag-rtl .ag-body-vertical-scroll {
  order: -1 !important;
}

/* Our own scrollable popups */
.row-drawer-body { direction: ltr !important; }
.row-drawer-body > section { direction: rtl !important; }

.col-picker-list { direction: ltr !important; }
.col-picker-list > .col-row { direction: rtl !important; }

/* ============================================================
   System Settings screen
   ============================================================ */
.system-settings-list {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.system-setting-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 6px;
  background: white;
}
.system-setting-row .ss-text { flex: 1; min-width: 0; }
.system-setting-row .ss-title {
  font-size: 14px; font-weight: 600; color: var(--echud-dark);
  margin-bottom: 4px;
}
.system-setting-row .ss-desc {
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.system-setting-row .ss-action { flex-shrink: 0; }
.ss-status {
  margin-top: 16px; padding: 10px 14px; border-radius: 4px;
  font-size: 13px;
}
.ss-status.ss-ok  { background: #e8f5e9; color: #1b5e20; border: 1px solid #66bb6a; }
.ss-status.ss-err { background: #fdecea; color: #b71c1c; border: 1px solid #e57373; }

/* ============================================================
   5-year KPI charts (top of dashboard)
   ============================================================ */
/* NOTE: .kpi-chart-tile is a GridStack item now — no position:relative here
   (GridStack controls its absolute positioning). */
/* Make .grid-stack-item-content the containing block for .stripe so the
   stripe is laid out INSIDE the rounded+overflow:hidden box. Without this,
   the stripe's containing block was .kpi-chart-tile (the outer wrapper),
   which has no border-radius/overflow:hidden — so the stripe escaped the
   clipping and its top corners rendered as sharp 90° angles. */
/* (content must keep GridStack's absolute fill — no position override) */
.kpi-chart-tile .stripe {
  /* Hidden per user request 2026-06-09 — the red bar created visual noise
     above the title row. Title bar's red-tint background still provides the
     brand accent. Kept the rule (rather than deleting the div from views)
     so it can be reinstated with one line if desired. */
  display: none;
}

/* ============================================================
   Edit-mode layout controls — × remove button + drag affordance.
   The × sits in the top-left (RTL) corner of each tile and only
   appears when #grid has the .editing class (set by toggleEdit).
   ============================================================ */
.gs-item-remove {
  display: none;
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--echud-red); color: #fff;
  font-size: 15px; line-height: 1; font-weight: 700;
  cursor: pointer; margin-inline-end: 4px;
}
.gs-item-remove:hover { background: var(--echud-red-dark); }
/* shown as a flex item at the end (left in RTL) of the header in edit mode */
.grid-stack.editing .gs-item-remove { display: inline-flex; }
/* While editing, outline every tile + show the move cursor so it's obvious
   the tiles can be dragged/resized. */
.grid-stack.editing > .grid-stack-item > .grid-stack-item-content {
  outline: 2px dashed rgba(37,99,235,.55);
  outline-offset: -2px;
  cursor: move;
}

.kpi-chart-body {
  display: flex; flex-direction: column;
  /* Override the global .gs-item-body padding: tighter on top, normal sides */
  padding: 10px 16px 12px !important;
  gap: 8px;
}

.kpi-chart-top {
  display: flex; flex-direction: row-reverse; align-items: baseline; gap: 12px;
  /* row-reverse → current value on the RIGHT in RTL flow (visually the start) */
}
.kpi-chart-current {
  font-size: 34px; font-weight: 800; color: var(--echud-dark);
  line-height: 1; letter-spacing: -0.5px;
}
.kpi-chart-delta {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
}
.kpi-chart-delta.kpi-delta-up   { background: #e8f5e9; color: #1b5e20; }
.kpi-chart-delta.kpi-delta-down { background: var(--echud-red-tint); color: var(--echud-red); }

.kpi-chart-bars {
  display: flex; flex-direction: row-reverse;  /* '22 on the left, '26 on the right in RTL */
  align-items: flex-end; justify-content: space-between;
  flex: 1; min-height: 80px; padding-top: 16px;
  gap: 6px;
}
.kpi-bar-wrap {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; height: 100%;
  cursor: default;
}
.kpi-bar {
  position: relative;
  width: 100%; max-width: 36px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  transition: opacity .15s ease, transform .15s ease;
  margin-top: auto;
}
/* All years share ONE color — no current-vs-prior distinction (per user
   2026-06-10: the brighter current-year bar was confusing). */
.kpi-bar.prior,
.kpi-bar.current { background: linear-gradient(to top, var(--current-blue-dark), var(--current-blue-light)); box-shadow: 0 -2px 4px rgba(37,99,235,.14); }
.kpi-bar-wrap:hover .kpi-bar { opacity: .85; transform: translateY(-1px); }

.kpi-bar-val {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; font-weight: 700; color: var(--echud-dark);
  white-space: nowrap;
}
/* Uniform label color for every year */
.kpi-bar.prior   .kpi-bar-val,
.kpi-bar.current .kpi-bar-val { color: var(--echud-dark); }

.kpi-bar-label {
  margin-top: 4px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}

/* ============================================================
   Policy tile (פוליסות) — STACKED BARS BY policy_type.
   Body is a horizontal split (row-reverse) — bars on the LEFT,
   right-side legend matching גורם מפנה's row structure. Each bar
   stacks 4 colored segments (רכב / עסק / דירה / אחר) sized to the
   policy_type breakdown for that year's snapshot date.
   ============================================================ */
.kpi-split-body {
  display: flex; flex-direction: row-reverse; align-items: stretch;
  /* row-reverse → chart on LEFT (RTL end), legend on RIGHT (RTL start) — matches .kpi-donut-body */
  padding: 10px 14px 12px !important;
  gap: 12px;
}
.kpi-split-chart {
  flex: 1 1 60%; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-split-legend {
  flex: 0 0 38%; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  justify-content: center;
}
/* Match the לקוחות sub-label (.kpi-merged-stat-label) exactly — same font
   size/color across every KPI's "פעילות כעת"/"חדשים השנה" caption. */
.kpi-split-active-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  cursor: help;
}

/* Wraps in the policies bar row push val + bar + label to the BOTTOM so the
   "5,282" label sits just above its bar regardless of bar height. */
.kpi-split-body .kpi-bar-wrap {
  justify-content: flex-end;
}

/* Total count rendered ABOVE each stacked bar */
.kpi-stack-bar-val {
  font-size: 12.5px; font-weight: 700; color: var(--echud-dark);
  margin-bottom: 3px;
  white-space: nowrap;
}

/* The stacked bar itself — replaces .kpi-bar for the policies tile only */
.kpi-stack-bar {
  width: 100%; max-width: 36px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  display: flex; flex-direction: column-reverse;
  /* column-reverse: first child renders at BOTTOM (so רכב — the first seg —
     sits at the foundation, with smaller categories stacked above it). */
  box-shadow: 0 -2px 4px rgba(0,0,0,.06);
  transition: opacity .15s ease, transform .15s ease;
}
/* No special highlight for the current year — same shadow as every other bar. */
.kpi-stack-bar.current {
  box-shadow: 0 -2px 4px rgba(0,0,0,.06);
}
.kpi-bar-wrap:hover .kpi-stack-bar {
  opacity: .85; transform: translateY(-1px);
}

/* Each color segment within the bar */
.kpi-stack-seg {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.98);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  overflow: hidden;
}
.kpi-stack-seg.seg-rechev { background: #ED1C24; }  /* רכב — brand red */
.kpi-stack-seg.seg-esek   { background: #3B82F6; }  /* עסק — blue */
.kpi-stack-seg.seg-dira   { background: #F59E0B; }  /* דירה — amber */
.kpi-stack-seg.seg-other  { background: #6B7280; }  /* אחר — gray (long-tail categories folded together) */

/* ============================================================
   Merged Clients tile (לקוחות) — two stats on top + paired bars per year.
   Each metric (active vs new) scales to its OWN max so bar heights are
   comparable within metric but NOT directly across metrics.
   ============================================================ */
.kpi-merged-body {
  display: flex; flex-direction: column;
  padding: 10px 14px 12px !important;
  gap: 4px;
}
.kpi-merged-top {
  display: flex; flex-direction: row-reverse;
  align-items: center; gap: 14px;
}
.kpi-merged-stat { display: flex; flex-direction: column; }
.kpi-merged-stat-val {
  font-size: 26px; font-weight: 800; color: var(--echud-dark);
  line-height: 1; letter-spacing: -0.5px;
}
.kpi-merged-stat-label {
  font-size: 11.5px; color: var(--muted); margin-top: 4px;
  cursor: help;
}
.kpi-merged-stat-sep {
  width: 1px; height: 30px; background: var(--border);
}

.kpi-merged-legend {
  display: flex; flex-direction: row-reverse; justify-content: flex-start;
  gap: 12px; font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
}
.kpi-merged-legend-item { display: flex; align-items: center; gap: 4px; }
.kpi-merged-legend-item .sw {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.kpi-merged-legend-item .sw.active { background: var(--current-blue-light); }
.kpi-merged-legend-item .sw.newc   { background: #2d8f60; }

.kpi-merged-bars {
  display: flex; flex-direction: row-reverse;
  align-items: stretch; justify-content: space-between;
  flex: 1; min-height: 80px; padding-top: 18px;
  gap: 6px;
}
.kpi-bar-mini { position: relative; }
.kpi-bar-mini-val {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.kpi-bar-mini-val.active { color: var(--current-blue-dark); }
.kpi-bar-mini-val.newc   { color: #2d8f60; }
.kpi-bar-pair-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; height: 100%;
  cursor: default;
}
.kpi-bar-pair {
  flex: 1; display: flex; flex-direction: row;
  align-items: flex-end; justify-content: center;
  gap: 3px; width: 100%; max-width: 56px;
}
.kpi-bar-mini {
  flex: 1; min-height: 4px;
  border-radius: 3px 3px 0 0;
  transition: opacity .15s ease, transform .15s ease;
}
/* Uniform per series — current & prior years use the SAME color (active=blue,
   new=green). Only the metric (active vs new) is encoded by color, never the year. */
.kpi-bar-mini.active.current,
.kpi-bar-mini.active.prior   { background: linear-gradient(to top, var(--current-blue-dark), var(--current-blue-light)); box-shadow: 0 -2px 4px rgba(37,99,235,.12); }
.kpi-bar-mini.newc.current,
.kpi-bar-mini.newc.prior     { background: linear-gradient(to top, #2d8f60, #45b07b); box-shadow: 0 -2px 4px rgba(45,143,96,.12); }
.kpi-bar-pair-wrap:hover .kpi-bar-mini { opacity: 0.85; transform: translateY(-1px); }

/* ============================================================
   Referral-source donut KPI (גורם מפנה)
   ============================================================ */
.kpi-donut-body {
  display: flex; flex-direction: row-reverse; align-items: center;
  /* row-reverse → donut on the visual right (RTL start), legend on the left */
  gap: 12px;
  padding: 10px 14px 12px !important;
}
.kpi-donut-svg-wrap {
  position: relative; flex: 0 0 130px;
  display: flex; align-items: center; justify-content: center;
}
.kpi-donut-svg { width: 130px; height: 130px; display: block; }
.kpi-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.kpi-donut-total {
  font-size: 24px; font-weight: 800; color: var(--echud-dark); line-height: 1;
}
.kpi-donut-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
}
.kpi-donut-legend {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 100%; overflow-y: auto;
}
.kpi-donut-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 7px; align-items: center;
  font-size: 12.5px; font-weight: 500; color: var(--echud-dark);
}
.kpi-donut-swatch {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.kpi-donut-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
}
/* Count + percentage columns hidden per user request 2026-06-09 — the
   color + label alone are enough on the dashboard; numbers add noise. The
   grid above drops to "12px 1fr" automatically since the auto-sized columns
   collapse to 0 when their cells are display:none. */
.kpi-donut-count { display: none; }
.kpi-donut-pct   { display: none; }
.kpi-donut-loading {
  width: 100%; text-align: center; color: var(--muted); font-size: 12px;
  padding: 20px;
}

/* ============================================================
   RESPONSIVE — mobile layout (≤ 768px)
   ============================================================
   The dashboard was designed for desktop. On phones the desktop
   layout overflows horizontally (header crammed, toolbar wraps
   awkwardly, KPI tiles wider than the viewport, GridStack tables
   side-by-side instead of stacked). This block tightens spacing,
   collapses multi-column rows to single column, hides edit-mode
   actions, and shrinks the header.
   GridStack's own column layout is handled separately in
   dashboard.js (initGrid switches to column=1 below 768px and
   re-applies on resize).
   ============================================================ */
@media (max-width: 768px) {
  /* Prevent any stray fixed-width element from creating horizontal scroll */
  html, body { overflow-x: hidden; }
  body { min-width: 0; }

  /* ---------- Header ---------- */
  .header {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .logo-img { height: 40px; }
  .logo-divider { display: none; }
  .system-name { display: none; }      /* "מערכת BI · בינה עסקית" — drop the subtitle text to save space */
  .logo-wrap { gap: 8px; flex: 1; }
  .header-nav { gap: 14px; font-size: 13px; }
  .header-nav a { padding: 4px 0; }
  .user-block { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  /* Hide the "שלום, <name>" greeting chip — keep only the role badge if admin,
     the 🔑 link, and the logout button. Greeting is the longest element and
     adds the most visual noise on a small screen. */
  .user-block > .user-chip:first-of-type { display: none; }
  .user-block .user-chip { padding: 6px 10px; font-size: 13px; }
  .btn-logout { padding: 6px 12px; font-size: 13px; }

  /* ---------- Toolbar ---------- */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }
  .toolbar-left, .toolbar-right { width: 100%; gap: 8px; }
  .toolbar-left { flex-wrap: wrap; }
  .toolbar-right { justify-content: flex-end; flex-wrap: wrap; }
  #quick-text { width: 100% !important; }
  .period-pill { flex-wrap: wrap; gap: 6px; }
  .period-summary { width: 100%; text-align: center; font-size: 12px; }

  /* On mobile the "edit layout" + "reset layout" buttons are not useful —
     users view the BI on their phone, they don't reorganize widgets there.
     Hide them outright to clear screen space. */
  .toolbar-right .btn-tool { display: none; }

  /* ---------- Main content ---------- */
  .dash-wrap { padding: 10px 12px; }
  .kpi-row { gap: 12px; margin-bottom: 14px; }
  /* Force KPI tiles to a single column so each one takes the full width.
     .kpi-row.kpi-row-5 specificity matches the desktop one-row rule, and
     being later + inside the media query it wins on phones. */
  .kpi-row, .kpi-row.kpi-row-5 { grid-template-columns: 1fr; }
  /* Allow tile heights to grow with content instead of locking to 240px */
  .kpi-row-tile { height: auto; min-height: 220px; }

  /* ---------- KPI tile internals ---------- */
  /* Policies tile: stack bars on top, legend below (instead of side-by-side)
     because the right-side legend squeezes the bars on narrow screens. */
  .kpi-split-body { flex-direction: column; gap: 10px; }
  .kpi-split-chart, .kpi-split-legend { flex: 1 1 auto; }
  .kpi-split-legend { gap: 5px; }

  /* Referral-source donut: also stack — donut on top, legend below */
  .kpi-donut-body { flex-direction: column; gap: 10px; }
  .kpi-donut-svg-wrap { flex: 0 0 auto; }
  .kpi-donut-legend { width: 100%; max-height: none; }

  /* Make sure the chart bar rows fit the tile width — no horizontal overflow */
  .kpi-chart-bars { min-height: 110px; }

  /* ---------- GridStack tables ---------- */
  /* Remove the negative-margin trick (it pulls the grid past the viewport
     edges on desktop to line up with the KPI row; on mobile we don't want
     any negative margin — would cause horizontal scroll). */
  .grid-stack { margin-left: 0; margin-right: 0; }
  /* Each grid-stack-item gets full width and auto height when GridStack
     itself switches to 1-column. Belt-and-braces — the JS does the real work
     here, but if the JS resize hook misfires (e.g. orientation change) this
     CSS keeps the page from breaking. */
  .grid-stack-item { width: 100% !important; left: 0 !important; }
  .grid-stack > .grid-stack-item { min-height: 380px; }

  /* AG Grid: allow horizontal scroll inside each table so columns don't
     squeeze. The table card itself stays full-width; the data inside scrolls. */
  .ag-theme-quartz { font-size: 12px; }

  /* ---------- Login + Settings + Modals ---------- */
  .login-card { padding: 24px 20px; max-width: 340px; }
  .ss-content, .settings-page { padding: 12px !important; }
}