/* =========================================================
   Reports — mobile-first, RTL (Hebrew)
   ========================================================= */

:root {
  --ink: #1c2326;
  --ink-soft: #55626a;
  --paper: #f3f5f4;
  --surface: #ffffff;
  --line: #dde3e1;
  --brand: #12343b;        /* header / primary */
  --brand-contrast: #ffffff;
  --accent: #1f7a8c;       /* links, active states */
  --yolk: #e0a100;         /* highlights */
  --good: #2e7d4f;
  --bad: #b3392f;
  --focus: #e0a100;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 6px; --r-md: 10px;
  --gutter: 16px;

  /* chart series (read by site.js) */
  --c1: #1f7a8c; --c2: #e0a100; --c3: #8e4a6b; --c4: #6a994e; --c5: #5b6770;
  --c6: #d1603d; --c7: #3d5a80; --c8: #b5838d;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6ecea; --ink-soft: #9fb0b5; --paper: #0f1a1d; --surface: #172428;
    --line: #2a3a3f; --brand: #0b2328; --accent: #5fb3c4; --yolk: #f0b82e;
    --good: #5cbf85; --bad: #ef7a6f;
    --c1: #5fb3c4; --c2: #f0b82e; --c3: #c67fa1; --c4: #93c271; --c5: #9aa7ae;
    --c6: #ee8a66; --c7: #86a6d4; --c8: #d9a7b0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e6ecea; --ink-soft: #9fb0b5; --paper: #0f1a1d; --surface: #172428;
  --line: #2a3a3f; --brand: #0b2328; --accent: #5fb3c4; --yolk: #f0b82e;
  --good: #5cbf85; --bad: #ef7a6f;
  --c1: #5fb3c4; --c2: #f0b82e; --c3: #c67fa1; --c4: #93c271; --c5: #9aa7ae;
  --c6: #ee8a66; --c7: #86a6d4; --c8: #d9a7b0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.05rem; }

.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--brand); color: var(--brand-contrast);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--s3);
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); height: 56px;
}
.brand {
  color: inherit; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: var(--s2);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yolk); color: var(--brand);
  display: grid; place-items: center; font-size: .95rem; font-weight: 800;
}
.topbar .spacer { flex: 1; }
.menu-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: inherit;
  border-radius: var(--r-sm); height: 36px; padding: 0 var(--s3); font: inherit; cursor: pointer;
}
.menu { position: relative; }
.menu-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); min-width: 210px; padding: var(--s2) 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: none;
}
.menu.open .menu-list { display: block; }
.menu-list a, .menu-list button {
  display: block; width: 100%; text-align: start; padding: var(--s2) var(--s4);
  color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--paper); text-decoration: none; }
.menu-list .who { padding: var(--s2) var(--s4); color: var(--ink-soft); font-size: .85rem; border-bottom: 1px solid var(--line); margin-bottom: var(--s1); }

/* ---------- page ---------- */
main {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: var(--s4) var(--gutter) var(--s6);
}
.page-head { margin-bottom: var(--s4); }
.page-head p { margin: var(--s1) 0 0; color: var(--ink-soft); }
.back { display: inline-block; margin-bottom: var(--s2); font-size: .9rem; }

.flash { padding: var(--s3) var(--s4); border-radius: var(--r-sm); margin-bottom: var(--s4); background: color-mix(in srgb, var(--good) 14%, var(--surface)); border-inline-start: 4px solid var(--good); }
.flash.error { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); border-color: var(--bad); }

/* ---------- home: report list ---------- */
.report-group { margin-bottom: var(--s5); }
.report-group h2 { color: var(--ink-soft); font-size: .9rem; font-weight: 500; margin-bottom: var(--s2); }
.report-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.report-list li + li { border-top: 1px solid var(--line); }
.report-list a {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--ink); min-height: 64px;
}
.report-list a:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); text-decoration: none; }
.report-list .t { font-weight: 600; display: block; }
.report-list .d { color: var(--ink-soft); font-size: .88rem; display: block; }
.report-list .chev { margin-inline-start: auto; color: var(--ink-soft); font-size: 1.3rem; }
.empty { padding: var(--s5); text-align: center; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md); }

/* ---------- filter bar ---------- */
.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3); margin-bottom: var(--s4);
}
.presets { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.presets::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.range-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); align-items: end; }
.range-form label { font-size: .8rem; color: var(--ink-soft); display: grid; gap: 2px; }
.range-form .actions { grid-column: 1 / -1; display: flex; gap: var(--s2); }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.day-label { font-size: 1.05rem; text-align: center; flex: 1; }
.day-step { padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); white-space: nowrap; font-size: .9rem; }
.day-step:hover { text-decoration: none; border-color: var(--accent); }
.day-step.disabled { color: var(--ink-soft); opacity: .45; }
.range-summary { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; margin-top: var(--s2); font-size: .82rem; color: var(--ink-soft); }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=date], input[type=search], select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px;
}
input[type=date] { padding: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-sm); border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.07); }
.btn.secondary { background: transparent; color: var(--accent); }
.btn.block { width: 100%; }

.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5) var(--s4); max-width: 460px; margin: 0 auto;
}
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field label { font-weight: 500; font-size: .95rem; }
.field .hint { font-size: .82rem; color: var(--ink-soft); }
.check { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.check input { width: 20px; height: 20px; }
.field-error, .validation-summary-errors { color: var(--bad); font-size: .88rem; }
.validation-summary-errors ul { margin: 0 0 var(--s3); padding-inline-start: var(--s4); }
.validation-summary-valid { display: none; }

/* ---------- login ---------- */
.auth-wrap { min-height: calc(100vh - 56px); display: grid; align-content: center; padding: var(--s5) 0; }
.auth-title { text-align: center; margin-bottom: var(--s5); }
.auth-title .brand-mark { width: 52px; height: 52px; font-size: 1.6rem; margin: 0 auto var(--s3); }
.auth-title p { color: var(--ink-soft); margin: var(--s1) 0 0; }

/* ---------- report grid ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4); min-width: 0;
}
.block > h2 { margin-bottom: var(--s3); }
.block.bare { background: none; border: 0; padding: 0; }

/* KPI tiles: 2 per row on phones */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-width: 0; border-top: 3px solid var(--accent);
}
.kpi:nth-child(4n+2) { border-top-color: var(--yolk); }
.kpi:nth-child(4n+3) { border-top-color: var(--c3); }
.kpi:nth-child(4n+4) { border-top-color: var(--c4); }
.kpi .label { font-size: .85rem; color: var(--ink-soft); }
.kpi .value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.kpi .note { font-size: .78rem; color: var(--ink-soft); margin-top: var(--s1); }
.kpi .note.up { color: var(--good); }
.kpi .note.down { color: var(--bad); }

.chart-box { position: relative; width: 100%; }

/* tables: real table on wide screens, stacked cards on phones */
.table-tools { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.table-tools input { max-width: 320px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: 10px var(--s3); text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-weight: 600; color: var(--ink-soft); font-size: .82rem; white-space: nowrap; position: sticky; top: 56px; background: var(--surface); }
.tbl td.n, .tbl th.n { text-align: end; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.more-row { text-align: center; margin-top: var(--s3); }
.muted { color: var(--ink-soft); font-size: .85rem; }

@media (max-width: 719px) {
  /* narrow tables (up to 3 columns) stay a compact table; wider ones turn into cards */
  .tbl.cards thead { display: none; }
  .tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td, .tbl.cards tfoot { display: block; width: 100%; }
  .tbl.compact th { top: 56px; }
  .tbl.compact th, .tbl.compact td { padding: 9px 8px; }
  .tbl.cards tr { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: var(--s2); padding: var(--s2) var(--s3); }
  .tbl.cards tbody tr:hover { background: none; }
  .tbl.cards td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--s3); text-align: end; }
  .tbl.cards td::before { content: attr(data-label); color: var(--ink-soft); font-size: .82rem; text-align: start; flex: none; max-width: 45%; }
  .tbl.cards td:first-child { font-weight: 600; }
  .tbl td.hide-m, .tbl th.hide-m { display: none; }
  .tbl.cards tfoot tr { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
}

.error-box {
  background: color-mix(in srgb, var(--bad) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line));
  border-radius: var(--r-md); padding: var(--s4);
}
.error-box code { display: block; margin-top: var(--s2); white-space: pre-wrap; word-break: break-word; font-size: .85rem; direction: ltr; text-align: left; }

/* admin users list */
.user-row .badges { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: 2px; }
.badge { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.badge.admin { border-color: var(--yolk); color: var(--ink); }
.badge.off { border-color: var(--bad); color: var(--bad); }

footer.site { text-align: center; color: var(--ink-soft); font-size: .78rem; padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); }

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  :root { --gutter: 24px; }
  h1 { font-size: 1.7rem; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
  .kpi .value { font-size: 1.9rem; }
  .range-form { grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); }
  .range-form .actions { align-self: end; }
  .range-form .actions { grid-column: auto; }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid > * { grid-column: span 12; }
  .grid > .span-3 { grid-column: span 3; } .grid > .span-4 { grid-column: span 4; }
  .grid > .span-5 { grid-column: span 5; } .grid > .span-6 { grid-column: span 6; }
  .grid > .span-7 { grid-column: span 7; } .grid > .span-8 { grid-column: span 8; }
  .grid > .span-9 { grid-column: span 9; }
}

@media print {
  .topbar, .filters, .table-tools, .more-row, footer.site { display: none !important; }
  body { background: #fff; }
  .block { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}