/* Kibbutzit client demo - one stylesheet, right to left, system fonts only, no external files. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1d2733;
  --muted: #5d6b7a;
  --line: #d9e0e7;
  --line-strong: #b9c4cf;
  --brand: #1f5c8b;
  --brand-dark: #154466;
  --brand-soft: #e6eff7;
  --green: #1e7b34;
  --green-soft: #e3f3e7;
  --orange: #a95300;
  --orange-soft: #fff0df;
  --red: #b3261e;
  --red-soft: #fde8e6;
  --grey: #55606b;
  --grey-soft: #eceff2;
  --blue: #1f5c8b;
  --blue-soft: #e3eef8;
  --purple: #6b3fa0;
  --purple-soft: #f0e8fa;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(16, 32, 48, 0.08);
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  line-height: 1.5;
  direction: rtl;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; }

code { font-family: Consolas, "Courier New", monospace; background: var(--grey-soft); padding: 0 0.3em; border-radius: 3px; }

/* ---------------------------------------------------------------- demo mark, header, navigation */
.demo-bar {
  background: #fff3c4;
  color: #6a4b00;
  border-bottom: 1px solid #e6cf73;
  text-align: center;
  font-weight: 600;
  padding: 0.35rem 1rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--brand);
  color: #fff;
  padding: 0.6rem 1.25rem;
}
.site-header a { color: #fff; }
.brand { font-size: 1.3rem; font-weight: 700; }
.brand-sub { font-size: 0.85rem; font-weight: 400; opacity: 0.85; margin-inline-start: 0.4rem; }
.company-box { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.company-label { opacity: 0.85; }
.company-change {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 0.15rem 0.6rem;
  font-size: 0.9rem;
}
/* the signed-in user and the sign-out link (AUTH_DESIGN_V1 section 2) */
.user-box { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.user-label { opacity: 0.85; }
.sign-out {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 0.15rem 0.6rem;
  font-size: 0.9rem;
}
/* the sign-in page and the refusal pages */
.sign-in-card { max-width: 520px; margin: 2rem auto; }
.sign-in-mount { min-height: 12rem; display: flex; justify-content: center; }

.main-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 1.25rem;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.nav-list a {
  display: inline-block;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  border-bottom: 3px solid transparent;
  font-weight: 500;
}
.nav-list a:hover { background: var(--brand-soft); text-decoration: none; }
.nav-list a.active { border-bottom-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.nav-next { border-top: 1px dashed var(--line); padding: 0.25rem 0; align-items: center; font-size: 0.85rem; }
/* Polish round, D-DEMO-1008-10 (walk-through F10): the title of the greyed row is a link to the "next version" page
   and looks like one - the brand colour and an underline - instead of a label. */
.nav-next .nav-next-title a {
  padding: 0.2rem 0.4rem;
  color: var(--brand);
  font-weight: 600;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.nav-disabled {
  display: inline-block;
  color: #9aa5b1;
  padding: 0.2rem 0.45rem;
  cursor: not-allowed;
  border: 1px dashed #c9d1d9;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- page layout */
.page { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.page-header h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.breadcrumbs { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5rem; }
.breadcrumbs a { color: var(--muted); }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 70ch; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.text-red { color: var(--red); font-weight: 600; }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.section { margin-top: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* definition lists for record pages */
dl.fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
dl.fields dt { color: var(--muted); font-weight: 500; }
dl.fields dd { margin: 0; }
dl.fields-compact { font-size: 0.9rem; gap: 0.15rem 0.75rem; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--grey-soft); text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--brand-soft); border-color: #bcd3e6; color: var(--brand-dark); }
.btn-warning { background: var(--orange-soft); border-color: #f0c999; color: var(--orange); }
.btn-danger { background: var(--red-soft); border-color: #f2b8b3; color: var(--red); }
.btn-small { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: not-allowed; }
form.inline { display: inline; }

/* ---------------------------------------------------------------- messages and notices */
.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.msg { padding: 0.6rem 0.9rem; border-radius: var(--radius); margin-bottom: 0.4rem; border: 1px solid; }
.msg-success { background: var(--green-soft); border-color: #a9d8b4; color: var(--green); }
.msg-info { background: var(--blue-soft); border-color: #b6d0e6; color: var(--brand-dark); }
.msg-warning { background: var(--orange-soft); border-color: #f0c999; color: var(--orange); }
.msg-error { background: var(--red-soft); border-color: #f2b8b3; color: var(--red); }
/* Polish round, D-DEMO-1008-10 (lane 3 F3): on the work-order page (body.has-sections) an action returns to its own
   section, so the message at the top of the page would be out of view: there the messages stay at the top edge of
   the window while the page is scrolled, and a section the page scrolls to leaves room for them above it. */
body.has-sections .messages { position: sticky; top: 0; z-index: 5; margin-bottom: 0.5rem; }
body.has-sections .section, body.has-sections #reminder { scroll-margin-top: 5.5rem; }

.alert { padding: 0.7rem 1rem; border-radius: var(--radius); border: 1px solid; margin: 0.75rem 0; }
.alert-info { background: var(--blue-soft); border-color: #b6d0e6; }
.alert-warning { background: var(--orange-soft); border-color: #f0c999; }
.alert-danger { background: var(--red-soft); border-color: #f2b8b3; }

/* "בגרסה הבאה" inline note for a feature the demo does not yet perform */
.next-version {
  display: inline-block;
  color: #7b8794;
  border: 1px dashed #c9d1d9;
  border-radius: var(--radius);
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
  background: #fafbfc;
}
.next-version::before { content: "בגרסה הבאה: "; font-weight: 600; }

.empty {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
}

/* ---------------------------------------------------------------- badges (states and priorities) */
.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-green { background: var(--green-soft); color: var(--green); border-color: #a9d8b4; }
.badge-orange { background: var(--orange-soft); color: var(--orange); border-color: #f0c999; }
.badge-red { background: var(--red-soft); color: var(--red); border-color: #f2b8b3; }
.badge-grey { background: var(--grey-soft); color: var(--grey); border-color: #d3d9df; }
.badge-blue { background: var(--blue-soft); color: var(--blue); border-color: #b6d0e6; }
.badge-purple { background: var(--purple-soft); color: var(--purple); border-color: #d6c3ee; }

/* priority colours of SPEC 11.2: normal green, medium orange, urgent red */
.priority-normal { color: var(--green); }
.priority-medium { color: var(--orange); }
.priority-urgent { color: var(--red); font-weight: 700; }
tr.row-priority-normal > td:first-child { box-shadow: inset -4px 0 0 var(--green); }
tr.row-priority-medium > td:first-child { box-shadow: inset -4px 0 0 #e07b00; }
tr.row-priority-urgent > td:first-child { box-shadow: inset -4px 0 0 var(--red); }

/* ---------------------------------------------------------------- filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.filter-bar > div, .filter-bar .filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 140px;
}
.filter-bar label { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.filter-bar input, .filter-bar select { min-width: 140px; }
/* V13 (browser check V12B-04): the labels and the bounds of a range share one text line (baseline), so a bound whose
   error line grows under it moves nothing else in the row. */
.filter-bar .filter-range { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.filter-bar .filter-buttons { flex-direction: row; gap: 0.4rem; min-width: 0; }
.filter-bar .helptext { display: none; }
/* V13 (browser check V12B-04): each bound of a range is one part - its box and, under it, its own error line (V12 put
   the line under the whole range row). In every filter bar an error line takes the width of its own field and wraps
   there (width 0 with min-width 100%: it never widens the field). */
.filter-bar .filter-range-part { display: flex; flex-direction: column; gap: 0.15rem; }
.filter-bar ul.errorlist { width: 0; min-width: 100%; margin: 0; }

.count { color: var(--muted); margin: 0.25rem 0 0.5rem; font-size: 0.92rem; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.93rem;
}
table.data th, table.data td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}
table.data thead th {
  background: #eef2f6;
  color: #334455;
  font-weight: 600;
  position: sticky;
  top: 0;
  white-space: nowrap;
}
table.data tbody tr:nth-child(even) { background: #fafbfc; }
table.data tbody tr:hover { background: #f0f5fa; }
table.data td.num, table.data th.num { text-align: left; white-space: nowrap; }
table.data td.company-cell { font-size: 0.85rem; color: var(--muted); }
table.data tfoot td { font-weight: 700; background: #f3f6f9; }
table.data tr.is-cancelled td { color: #8a96a3; text-decoration: line-through; }
table.data tr.is-overdue td.due { color: var(--red); font-weight: 600; }
.money { unicode-bidi: isolate; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- wide tables (polish round, D-DEMO-1008-10; walk-through F1, F2, lane 2 F11) */
/* A wide list keeps every column: its frame scrolls sideways (.table-wrap), a short line above it says so, and its
   actions column - the last one, at the left edge of this right-to-left layout - stays in view while the rest scrolls. */
.table-scroll-hint { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.3rem; }
.table-scroll-hint::before { content: "\2194\00a0"; }
.table-wrap-wide table.data th.sticky-col,
.table-wrap-wide table.data td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line), 6px 0 8px -4px rgba(16, 32, 48, 0.18);
}
.table-wrap-wide table.data thead th.sticky-col { background: #eef2f6; z-index: 2; }
.table-wrap-wide table.data tbody tr:nth-child(even) td.sticky-col { background: #fafbfc; }
.table-wrap-wide table.data tbody tr:hover td.sticky-col { background: #f0f5fa; }
.table-wrap-wide table.data tfoot td.sticky-col { background: #f3f6f9; }

/* ---------------------------------------------------------------- forms */
.form-card { max-width: 820px; }
.form-stack > div, .form-stack p { margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.form-stack label, .form-row label { font-weight: 600; font-size: 0.92rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem 1rem; }
.form-grid > div { display: flex; flex-direction: column; gap: 0.2rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.helptext, .help { color: var(--muted); font-size: 0.85rem; }

input[type="text"], input[type="number"], input[type="email"], input[type="search"],
input[type="tel"], input[type="file"], select, textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  max-width: 100%;
}
input[type="number"], input[type="email"], input[type="tel"] { direction: ltr; text-align: right; }
textarea { min-height: 4.5rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9cc3e4; outline-offset: 0; border-color: var(--brand); }
/* V12 (browser check V11B-02): a field the server refused (aria-invalid="true") is marked, not only its message. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); background-color: #fff8f7; }
.required-mark { color: var(--red); }
/* V12: text for a screen reader only (a date field's format description, the context of a range's "עד"). */
.kbz-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Polish round, D-DEMO-1008-10 (lane 3 F8): a stacked field is a flex column, so a label and a mark that are two
   children land on two lines; the templates wrap them in one .field-label, inside which both stay inline. */
.field-label > label { display: inline; }

ul.errorlist { list-style: none; margin: 0.15rem 0; padding: 0; color: var(--red); font-size: 0.88rem; }
ul.errorlist.nonfield { background: var(--red-soft); border: 1px solid #f2b8b3; padding: 0.5rem 0.75rem; border-radius: var(--radius); }

/* ---------------------------------------------------------------- the Israeli date field (V11, D-V9-1014-13) */
/* core.date_fields: a text field that shows and accepts dd/mm/yyyy (mm/yyyy for a month, HH:MM for a time) and the
   Hebrew calendar of core/static/core/il_forms.js - right to left, Sunday first. The button is hidden until the
   script shows it. */
.kbz-date {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0.25rem;
  max-width: 100%;
  align-self: flex-start;
  vertical-align: middle;
}
.kbz-date-input { direction: ltr; text-align: right; width: 9em; }
.kbz-month-input { width: 6.5em; }
/* V12 (browser check V11B-01): the time box holds its example "18:30" and a typed time whole, also on a narrow screen
   (it never shrinks; the date-and-time pair wraps instead). */
.kbz-time-input { direction: ltr; text-align: right; width: 5.5em; min-width: 5.5em; flex: none; }
.kbz-datetime { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0.4rem; align-self: flex-start; max-width: 100%; }
.kbz-date-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0 0.45rem;
  font: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-dark);
  cursor: pointer;
}
.kbz-date-button:hover { background: #d4e4f2; }
.kbz-date-button:focus-visible { outline: 2px solid #9cc3e4; outline-offset: 1px; }
.kbz-date-button[hidden], .kbz-cal[hidden] { display: none; }
/* The calendar is fixed to the window; il_forms.js places it under (or above) its field. */
.kbz-cal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 18.5rem;
  max-width: calc(100vw - 1rem);
  padding: 0.6rem;
  direction: rtl;
  text-align: right;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 32, 48, 0.2);
}
.kbz-cal-head { display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.4rem; }
.kbz-cal-title { flex: 1; text-align: center; font-weight: 700; }
.kbz-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand-dark);
  cursor: pointer;
}
.kbz-cal-nav:hover { background: var(--brand-soft); }
table.kbz-cal-grid { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.kbz-cal-grid th { padding: 0.15rem 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: center; }
.kbz-cal-grid td { height: 2.1rem; padding: 0; text-align: center; vertical-align: middle; border-radius: var(--radius); }
.kbz-cal-grid td.kbz-cal-month { height: 2.6rem; }
.kbz-cal-day, .kbz-cal-month { cursor: pointer; font-variant-numeric: tabular-nums; }
.kbz-cal-day:hover, .kbz-cal-month:hover { background: var(--brand-soft); }
.kbz-cal-grid td.is-today { box-shadow: inset 0 0 0 2px var(--brand); font-weight: 700; }
.kbz-cal-grid td.is-selected { background: var(--brand); color: #fff; font-weight: 700; }
.kbz-cal-grid td.is-disabled { color: #b4bdc6; background: none; cursor: not-allowed; }
.kbz-cal-grid td:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.kbz-cal-foot { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; }

/* ---------------------------------------------------------------- the file field (V12, D-V12-1014-01) */
/* core.file_fields: the browser's file input stays the real control; once il_forms.js has set the control up it lies
   transparent over our face - "בחירת קובץ" and the chosen file's name (or "לא נבחר קובץ") - so the browser's own
   text, in the browser's language, is never seen. Without the script the face stays hidden and the input is shown. */
.kbz-file { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; max-width: 100%; align-self: flex-start; }
.kbz-file-control { position: relative; display: inline-flex; max-width: 100%; }
.kbz-file-face { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; min-width: 0; }
.kbz-file-face[hidden] { display: none; }
.kbz-file-button {
  display: inline-block;
  flex: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45rem 0.9rem;
  border: 1px solid #bcd3e6;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-dark);
  white-space: nowrap;
}
.kbz-file-name { min-width: 0; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.92rem; }
.kbz-file-name.has-file { color: var(--text); font-weight: 500; }
.kbz-file[data-kbz-ready] .kbz-file-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.kbz-file-input:hover + .kbz-file-face .kbz-file-button { background: #d4e4f2; }
.kbz-file-input:focus + .kbz-file-face .kbz-file-button { outline: 2px solid var(--brand); outline-offset: 2px; }
.kbz-file-input[aria-invalid="true"] + .kbz-file-face .kbz-file-button { border-color: var(--red); }
.kbz-file-again { color: var(--orange); font-size: 0.85rem; }

/* ---------------------------------------------------------------- the confirmation dialog (V12, D-V12-1014-01) */
/* il_forms.js: a modal <dialog> (the page behind it is inert), right to left, the two buttons named by the action. */
dialog.kbz-dialog {
  width: 30rem;
  max-width: calc(100vw - 2rem);
  padding: 1.1rem 1.25rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  direction: rtl;
  text-align: right;
  box-shadow: 0 12px 32px rgba(16, 32, 48, 0.25);
}
dialog.kbz-dialog::backdrop { background: rgba(16, 32, 48, 0.45); }
.kbz-dialog-question { font-size: 1.15rem; margin: 0 0 0.5rem; }
.kbz-dialog-detail { margin: 0; color: var(--muted); }
.kbz-dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.kbz-dialog .btn:focus { outline: 2px solid var(--text); outline-offset: 2px; }

/* V11 (browser check C-02): a phone number inside free text (a work order's description) is isolated left to right
   and never broken, so its digits, hyphen and parentheses keep their order inside right-to-left text. */
.phone { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* V11 (browser check C-03; Hebrew-copy review H2-05): a long left-to-right token (a file's digital fingerprint, a
   file name) is isolated and may wrap anywhere, so it never widens its column or scrolls the page sideways. */
.ltr-token { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tiles, company choice, tree */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  color: var(--text);
}
.tile:hover { border-color: var(--brand); text-decoration: none; }
.tile-title { font-size: 1.15rem; font-weight: 700; color: var(--brand-dark); }
.tile-text { color: var(--muted); }
.tile-figure { margin-top: auto; font-weight: 600; }

.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.company-card { display: flex; flex-direction: column; gap: 0.5rem; }
.company-card h2 { margin: 0; }
.company-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.company-card-number { color: var(--muted); font-size: 0.9rem; }

/* the not-found page (polish round, D-DEMO-1008-10) */
.not-found-card { max-width: 720px; margin: 1rem auto; }
.not-found-links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

ul.tree, ul.tree ul { list-style: none; margin: 0; padding-inline-start: 1.25rem; }
ul.tree { padding-inline-start: 0; }
ul.tree li { margin: 0.2rem 0; }
ul.tree .tree-node { font-weight: 600; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { padding: 0.45rem 0.8rem; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--text); }
.tabs a.active { background: var(--surface); border-color: var(--line); font-weight: 600; }

.history { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--line); }
.history li { padding: 0.25rem 0.75rem; position: relative; }
.history li::before { content: ""; position: absolute; right: -6px; top: 0.7rem; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.history .when { color: var(--muted); font-size: 0.85rem; margin-inline-end: 0.5rem; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.photo-grid figure { margin: 0; width: 180px; }
.photo-grid img { width: 180px; height: 135px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--grey-soft); }
.photo-grid figcaption { font-size: 0.82rem; color: var(--muted); }

/* ---------------------------------------------------------------- the printable Payment Demand */
.doc {
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.doc-mark {
  border: 2px solid #c79a00;
  color: #6a4b00;
  background: #fff8db;
  text-align: center;
  font-weight: 700;
  padding: 0.4rem;
  margin-bottom: 1rem;
}
.doc-header { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-bottom: 2px solid var(--text); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.doc-issuer { font-size: 0.92rem; }
.doc-issuer .issuer-name { font-size: 1.15rem; font-weight: 700; }
.doc-title { font-size: 1.4rem; font-weight: 700; }
.doc-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; font-size: 0.92rem; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; font-size: 0.92rem; }
table.doc-lines { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.92rem; }
table.doc-lines th, table.doc-lines td { border-bottom: 1px solid var(--line); padding: 0.35rem 0.5rem; text-align: right; vertical-align: top; }
table.doc-lines th { border-bottom: 2px solid var(--text); }
table.doc-lines td.num, table.doc-lines th.num { text-align: left; white-space: nowrap; }
table.doc-lines tr.line-discount td, table.doc-lines tr.line-manual_credit td { color: #355c2f; }
table.doc-lines tr.line-note td { font-style: italic; color: var(--muted); }
.line-reason { display: block; font-size: 0.85rem; color: var(--muted); }
.doc-totals { margin-inline-start: auto; width: 320px; max-width: 100%; border-collapse: collapse; }
.doc-totals td { padding: 0.25rem 0.5rem; }
.doc-totals td.num { text-align: left; }
.doc-totals tr.grand td { border-top: 2px solid var(--text); font-weight: 700; font-size: 1.05rem; }
/* Polish round, D-DEMO-1008-10 (walk-through F11): the reminder's totals table carries longer labels ("סכום דרישת
   התשלום (כולל מע"מ)", "בפיגור 115 ימים") than the Payment Demand's, so it is wider and its values do not wrap. */
.doc-totals-reminder { width: 480px; }
.doc-totals-reminder td.num { white-space: nowrap; }
.doc-balances { margin-top: 1rem; font-size: 0.9rem; }
.doc-footer { margin-top: 1.5rem; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.5rem; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 1400px;
  margin: 1rem auto 0;
  padding: 0.75rem 1.25rem 1.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 700px) {
  .page { padding: 0.75rem; }
  .site-header { padding: 0.5rem 0.75rem; }
  .main-nav { padding: 0 0.5rem; }
  dl.fields { grid-template-columns: 1fr; }
  .doc { padding: 1rem; }
  .doc-parties { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- print (the Payment Demand page) */
@media print {
  html { font-size: 12px; }
  body { background: #fff; }
  .no-print, .site-header, .main-nav, .site-footer, .messages, .actions, .filter-bar, .btn { display: none !important; }
  .demo-bar { border: 2px solid #000; background: #fff; color: #000; }
  .page { max-width: none; padding: 0; }
  .doc { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .doc-mark { border-color: #000; background: #fff; color: #000; }
  /* Polish round, D-DEMO-1008-10 (walk-through F6, lane 2 F13): a page that carries a customer document with its own
     mark (body.has-doc - the Payment Demand page, the reminder page) prints the document's mark only; the page bar
     would print the same demo line a second time. Every other page keeps the page bar in print. */
  body.has-doc .demo-bar { display: none !important; }
  a { color: inherit; text-decoration: none; }
  table.data thead th { position: static; }
  .table-scroll-hint { display: none; }
  .table-wrap-wide table.data th.sticky-col, .table-wrap-wide table.data td.sticky-col { position: static; box-shadow: none; }
  /* V11 (D-V9-1014-13): the calendar button and the calendar of a date field are never printed. */
  .kbz-date-button, .kbz-cal { display: none !important; }
  /* V12 (D-V12-1014-01): the confirmation dialog is never printed. */
  dialog.kbz-dialog { display: none !important; }
  dialog.kbz-dialog::backdrop { display: none !important; }
  /* V11 (browser check P-02): the account state of the Payment Demand - from "מצב החשבון בחוזה" to "סה"כ לתשלום" -
     and the document's totals above it (.doc-account) are never split across two printed pages; the heading stays
     with its table. */
  .doc-account { break-inside: avoid; page-break-inside: avoid; }
  .doc-balances h3 { break-after: avoid; page-break-after: avoid; }
  .doc-totals tr { break-inside: avoid; page-break-inside: avoid; }
}