/* ==========================================================================
   בדיקת תלושי שכר — design system
   One typeface throughout: Assistant. Self-hosted only: the CSP is `default-src 'none'`, so nothing may be
   fetched from a third party. That also means no payslip visit leaks to a
   font CDN.
   ========================================================================== */

/* Assistant — Hebrew sans, the interface and every figure. */
@font-face {
  font-family: "Assistant";
  src: url("fonts/assistant-var-hebrew.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/assistant-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

/* --------------------------------------------------------------------------
   Tokens. Every text pair below was measured, not eyeballed: the lowest
   contrast in either theme is 5.03:1 against a 4.5:1 requirement.
   -------------------------------------------------------------------------- */
:root {
  --ink: #0F1B2D;
  --ink-soft: #55627A;
  --paper: #FFFFFF;
  --paper-sunken: #FAFBFD;
  --canvas: #F4F6F9;
  --line: #E2E7EE;
  --line-strong: #7C8595;      /* interactive borders: >= 3:1 (WCAG 1.4.11) */
  --brand: #14304F;
  --brand-deep: #0C1E34;
  --brand-lift: #1D4470;
  --on-brand: #FFFFFF;
  --gold: #8A6A2B;
  --gold-bright: #C6A461;
  --gold-bg: #F6EEDE;
  --ok: #0F6244;
  --ok-bg: #E7F3EC;
  --ok-line: #BEDFCD;
  --bad: #9C2A22;
  --bad-bg: #FBECEA;
  --bad-line: #EFC7C1;
  --warn: #7A5606;
  --warn-bg: #FCF3E2;
  --warn-line: #E8D2A2;

  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .05);
  --shadow-md: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px -12px rgba(15, 27, 45, .18);
  --shadow-lg: 0 2px 4px rgba(15, 27, 45, .05), 0 24px 48px -24px rgba(15, 27, 45, .28);
  --shadow-brand: 0 8px 20px -10px rgba(20, 48, 79, .55);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 160ms;
  --slow: 260ms;

  --measure: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E9EEF6;
    --ink-soft: #9BA9BF;
    --paper: #121C2E;
    --paper-sunken: #0E1727;
    --canvas: #0B1220;
    --line: #243350;
    --line-strong: #61708C;
    --brand: #0D1729;
    --brand-deep: #070E1B;
    --brand-lift: #16294A;
    --gold: #D9B978;
    --gold-bright: #E7CE9A;
    --gold-bg: #2A2314;
    --ok: #5FD3A0;
    --ok-bg: #102C22;
    --ok-line: #1E5540;
    --bad: #F58A7C;
    --bad-bg: #331714;
    --bad-line: #6A2A22;
    --warn: #E8BC5C;
    --warn-bg: #2E2410;
    --warn-line: #5C4718;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -24px rgba(0, 0, 0, .85);
    --shadow-brand: 0 8px 20px -10px rgba(0, 0, 0, .8);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The icon sprite is definitions only. It must be hidden from a stylesheet,
   not an inline style attribute -- `style-src 'self'` blocks inline styles,
   so a style="display:none" here renders as a tall empty block instead. */
.sprite { display: none; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 520px at 85% -10%,
      color-mix(in srgb, var(--brand-lift) 8%, transparent), transparent 70%),
    radial-gradient(900px 420px at 5% 0%,
      color-mix(in srgb, var(--gold) 6%, transparent), transparent 65%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Assistant", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-3); }
a { color: var(--brand-lift); }

.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }

/* Every figure in this system is a number the auditor compares down a column. */
.num, td.num, .stat .n, table td, .periods span {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bar {
  background:
    linear-gradient(90deg, rgba(8, 20, 40, .90), rgba(8, 20, 40, .74)),
    url("img/header.webp") center 35% / cover no-repeat,
    linear-gradient(135deg, var(--brand-deep), var(--brand) 55%, var(--brand-lift));
  color: var(--on-brand);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--shadow-brand);
  position: relative;
}
.bar::after {
  /* A single hairline of brass — the only ornament in the whole interface. */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: .55;
}
.bar-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-family: "Assistant", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.brand svg { width: 26px; height: 26px; flex: none; color: var(--gold-bright); }
.bar form { margin: 0; }

main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-4);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-top: 1px solid var(--line);
  margin-top: var(--space-5);
  text-align: center;
  color: var(--ink-soft);
  font-size: .8125rem;
}
.footer-note { margin-bottom: var(--space-3); }
.credit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.5;
}
.credit::before {
  content: "";
  width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-bottom: var(--space-2);
}
.credit .by { color: var(--ink); font-weight: 700; font-size: .9375rem; }
.credit .role { color: var(--ink-soft); }
.credit a {
  color: var(--ink-soft);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  padding: 2px 6px;
  border-radius: 5px;
}
.credit a:hover { color: var(--brand-lift); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-md);
}
.card.narrow { max-width: 420px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Login screen — the artwork carries the page, the card sits over the calm
   right-hand side of it (which is where RTL reading starts).
   -------------------------------------------------------------------------- */
body.login-page {
  background:
    linear-gradient(90deg, rgba(7, 18, 36, .55), rgba(7, 18, 36, .82)),
    url("img/hero.webp") center / cover no-repeat,
    var(--brand-deep);
  background-attachment: fixed;
}
body.login-page main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: min(72vh, 620px);
}
body.login-page .card.narrow {
  margin-inline: 0 auto;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
/* The artwork's gold wave passes behind the footer, and 72%-white text on
   that gold measures well under 4.5:1. A scrim makes the effective backdrop
   at worst #322F26, which puts the muted text at 10.1:1 and the name at
   13.4:1 whatever the image is doing underneath. */
body.login-page footer {
  /* Full-bleed, so the scrim reads as the base of the page rather than a
     floating panel sitting on top of the artwork. */
  max-width: none;
  padding-inline: max(var(--space-4), calc((100% - var(--measure)) / 2));
  border-top-color: rgba(255, 255, 255, .18);
  background: linear-gradient(to top, rgba(7, 18, 36, .94), rgba(7, 18, 36, .80));
  color: rgba(255, 255, 255, .85);
}
body.login-page .credit::before { background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); }
body.login-page .credit .by { color: #fff; }
body.login-page .credit .role,
body.login-page .credit a { color: rgba(255, 255, 255, .85); }
body.login-page .credit a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Hero band — the artwork inside the app, not only on the way in.
   Sits at the top of the working screen and carries that screen's title.
   The scrim is the same one used in the footer: over the artwork's brightest
   feature (the gold wave) it puts white at 13.4:1 and the muted line at 10.1:1.
   -------------------------------------------------------------------------- */
.hero-band {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--space-3);
  padding: var(--space-6) var(--space-5);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The scrim is a ramp, not a flat wash: nearly clear over the illustration
     on the left so the artwork actually reads, and heavy from 60% rightwards,
     which is the only part the Hebrew text occupies. */
  background:
    linear-gradient(90deg,
      rgba(7, 18, 36, .12) 0%,
      rgba(7, 18, 36, .38) 34%,
      rgba(7, 18, 36, .90) 60%),
    url("img/band.webp") left 45% / cover no-repeat,
    var(--brand-deep);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.hero-band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: .7;
}
.hero-band h1 { color: #fff; margin-bottom: var(--space-1); }
.hero-band p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 46ch; }
.hero-band strong { color: var(--gold-bright); font-weight: 700; }

/* --------------------------------------------------------------------------
   Forms & buttons
   -------------------------------------------------------------------------- */
label { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: .9375rem; }

input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-sunken);
  color: var(--ink);
  font: inherit;
  margin-bottom: var(--space-3);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input[type="password"]:focus {
  border-color: var(--brand-lift);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-lift) 18%, transparent);
  outline: none;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-lift);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
@media (prefers-color-scheme: dark) {
  :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--gold); }
}

button, .primary, .secondary, .danger {
  font: inherit;
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: 11px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-lift));
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(20, 48, 79, .7); }
.primary:active { transform: translateY(0); }
.primary[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}
.secondary:hover { background: var(--paper-sunken); }

.danger { background: var(--paper); color: var(--bad); border-color: var(--bad-line); }
.danger:hover { background: var(--bad-bg); }

.link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .85);
  padding: 6px 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--fast) var(--ease);
}
.link:hover { color: #fff; }
.link svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Dropzone
   -------------------------------------------------------------------------- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: pointer;
  background: var(--paper-sunken);
  margin-bottom: var(--space-3);
  font-weight: 400;
  transition: border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.dropzone:hover { border-color: var(--brand-lift); }
.dropzone.over {
  border-color: var(--gold);
  border-style: solid;
  background: var(--gold-bg);
  transform: scale(1.005);
}
.dropzone svg { width: 34px; height: 34px; color: var(--ink-soft); margin-bottom: var(--space-1); }
.dropzone.over svg { color: var(--gold); }
.dropzone-title { font-family: "Assistant", "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 1.0625rem; }
.dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.filelist { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 6px; }
.filelist li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-sunken);
  font-size: .875rem;
}
.filelist li svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.filelist li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plainlist { margin: 0; padding-inline-start: 18px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */
.flash {
  padding: 12px 15px;
  border-radius: var(--r-sm);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  border: 1px solid;
}
.flash svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.flash-error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.flash-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.result-head h1 { margin-bottom: var(--space-1); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--paper-sunken);
}
.stat .n {
  display: block;
  font-family: "Assistant", "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.stat span:last-child { color: var(--ink-soft); font-size: .8125rem; }
/* A value like "7/2024 – 12/2024" is far longer than a count and would wrap
   to two lines, making its card taller than the rest of the row. */
.stat.range .n { font-size: 1.0625rem; letter-spacing: 0; white-space: nowrap; padding-block: 5px; }
.stat.good { background: var(--ok-bg); border-color: var(--ok-line); }
.stat.good .n { color: var(--ok); }
.stat.bad { background: var(--bad-bg); border-color: var(--bad-line); }
.stat.bad .n { color: var(--bad); }
.stat.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.stat.warn .n { color: var(--warn); }

.ocr-banner {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ocr-banner svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ocr-banner p { margin: 0; }

.ok-banner {
  background: var(--ok-bg);
  border-color: var(--ok-line);
  color: var(--ok);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ok-banner svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ok-banner p { margin: 0; }
.bad-text { color: var(--bad); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  text-align: right;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color var(--fast) var(--ease); }
tbody tr:hover { background: var(--paper-sunken); }
td.num { white-space: nowrap; }
.row-bad td { background: var(--bad-bg); }
.row-bad:hover td { background: color-mix(in srgb, var(--bad-bg) 80%, var(--bad-line)); }

table.plain thead { display: none; }
table.plain tr:last-child th,
table.plain tr:last-child td { border-bottom: none; }
table.plain th {
  text-align: right;
  width: 190px;
  font-weight: 600;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .875rem;
}

.periods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.periods span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .8125rem;
  background: var(--paper-sunken);
  color: var(--ink-soft);
}

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; }

code {
  background: var(--paper-sunken);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .8125rem;
  direction: ltr;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Motion — entrance only, and only when the visitor allows it.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
main > .card { animation: rise var(--slow) var(--ease) both; }
main > .card:nth-child(2) { animation-delay: 50ms; }
main > .card:nth-child(3) { animation-delay: 100ms; }
main > .card:nth-child(4) { animation-delay: 150ms; }
main > .card:nth-child(n+5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .primary:hover, .dropzone.over { transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  main { padding: var(--space-4) var(--space-3) var(--space-3); }
  .card { padding: var(--space-3); border-radius: var(--r-md); }
  .table-wrap { margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); }
  .result-head { flex-direction: column; }
  .result-head .primary { width: 100%; justify-content: center; }
  .bar-inner { padding: var(--space-3); }
  .hero-band {
    padding: var(--space-4) var(--space-3);
    min-height: 0;
    background-position: 30% center;
  }
  .hero-band p { font-size: .9375rem; }
  body.login-page { background-attachment: scroll; }
  body.login-page main { justify-content: center; min-height: 0; }
  body.login-page .card.narrow { margin-inline: auto; }
  /* Touch targets stay at least 44px tall on small screens. */
  button, .primary, .secondary, .danger { padding: 13px 20px; min-height: 44px; }
}