/* טוקנים — מתוך העיצוב. כל צבע במערכת יוצא מכאן. */
:root {
  --paper:   #efece6;
  --surface: #faf9f6;
  --card:    #ffffff;
  --ink:     #1c1b19;
  --ink-2:   #57534d;
  --muted:   #78736c;
  --faint:   #a8a29a;
  --line:    #e5e1d8;
  --line-2:  #f1efe9;

  --accent:      #c2610a;
  --accent-dark: #9c4d06;
  --good:        #2f7a4f;
  --clean:       #1f6f8b;
  --scrap:       #a8342b;
  --pending:     #7a5cc0;

  --dark:    #1c1b19;
  --dark-2:  #252220;
  --dark-3:  #332f2b;

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --pill: 999px;

  --sans: Assistant, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* מספרים תמיד במונו ומיושרים בעמודה — כל המסך הוא מספרים */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: none; }

/* ---------- מעטפת מסך ---------- */
.screen {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: relative;
}
.wide { max-width: 1100px; }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar .grow { flex: 1; min-width: 0; }
.topbar h1 { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.2; }
.topbar .sub { font-size: 12px; color: var(--muted); }

.body { flex: 1; padding: 16px 18px 96px; }

.bottombar {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- טיפוגרפיה ---------- */
h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
small { font-size: 12px; }

/* ---------- כפתורים ---------- */
.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-sm);
  padding: 15px;
  font: 600 15px var(--sans);
  text-align: center;
  cursor: pointer;
  background: var(--dark);
  color: #fff;
}
.btn.accent { background: var(--accent); }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.btn:disabled, .btn.off { background: #ddd8ce; color: #8a847b; cursor: not-allowed; }
.btn.inline { width: auto; padding: 10px 18px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--sans);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 6px 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.chip.on { background: var(--dark); color: #fff; border-color: var(--dark); }
/* דגל — ריבוע קבוע, כדי ש-ע ודגל אמוג'י יישבו באותו גודל */
.chip.flag {
  width: 34px; height: 34px; padding: 0; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1; border-radius: 50%;
  background: var(--card); color: var(--ink-2);
  overflow: hidden; opacity: .5;   /* לא grayscale — דגל אפור לא מזוהה */
}
.chip.flag svg { width: 100%; height: 100%; display: block; }
.chip.flag.on { filter: none; opacity: 1; background: var(--card); border-color: var(--accent); color: var(--ink); }
.side .chip.flag { background: var(--dark-2); border-color: transparent; color: #c9c3ba; }
.side .chip.flag.on { background: var(--dark-3); border-color: var(--accent); color: #fff; }
.chiprow { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
/* בסרגל העליון הדגלים חייבים להיכנס לצד הכותרת גם בטלפון צר */
.topbar .chiprow { gap: 4px; padding-bottom: 0; }
.topbar .chip.flag { width: 26px; height: 26px; font-size: 12px; }
@media (max-width: 430px) { .topbar { gap: 8px; padding-inline: 12px; } .topbar h1 { font-size: 17px; } }
.chiprow::-webkit-scrollbar { display: none; }

/* ---------- שדות ---------- */
/* date ו-number לא היו כאן, והרוחב הטבעי שלהם גלש מהמסך במסך המשאית.
   שדות בתוך .counter מעוצבים בנפרד ולכן מוחרגים. */
input[type=text], input[type=password], input[type=search], input[type=tel],
input[type=date], input[type=number]:not(.val), textarea, select {
  width: 100%;
  font: 400 15px var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------- גלריית מוצרים ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: block;
  color: inherit;
}
.tile.done { border-color: var(--good); }
.tile .photo {
  height: 112px;
  background: var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--line-2);
}
.tile .photo img { height: 96px; width: auto; max-width: 84%; object-fit: contain; mix-blend-mode: multiply; }
.tile .photo .none { color: var(--faint); font-size: 26px; }

/* התג הוא מה שמזהה בפועל — שלוש החוליות נראות זהות */
.badge {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  font: 600 11px var(--mono);
  background: var(--dark);
  color: #fff;
  border-radius: 6px;
  padding: 3px 7px;
}
.badge.color-white  { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.badge.color-red    { background: var(--scrap); }
.badge.color-yellow { background: #b8860b; }
.badge.color-blue   { background: #1f4e9c; }
.badge.color-green  { background: var(--good); }

.tile .meta { padding: 9px 11px 11px; }
.tile .name { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.tile .flow { display: flex; gap: 9px; margin-top: 6px; font: 500 10.5px var(--mono); color: var(--faint); }
.tile .left { margin-top: 5px; display: flex; align-items: baseline; gap: 5px; }
.tile .left b { font: 700 19px var(--mono); color: var(--accent); }
.tile.done .left b { color: var(--good); }

/* ---------- מסך ספירה ---------- */
.hero {
  height: 156px;
  background: var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.hero img { height: 140px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.flowbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 10px;
}
.flowbar > span, .flowbar > b { display: flex; flex-direction: column; gap: 1px; }
.flowbar em { font: 500 11.5px var(--sans); color: var(--faint); font-style: normal; }
.flowbar i  { font: 600 17px var(--mono); color: var(--ink-2); font-style: normal; }
/* מה שנשאר אצל הלקוח הוא המספר שמנחה את העובד — הוא הכי גדול במסך */
.flowbar b em { color: var(--muted); font-weight: 600; }
.flowbar b i  { font: 700 26px var(--mono); color: var(--ink); }

/* פילוח ההחזרות שכבר נרשמו על הפריט הזה באתר — היסטוריה, לא הספירה הנוכחית */
.hist {
  display: flex; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 10px;
}
.hist > span { display: flex; flex-direction: column; gap: 1px; }
.hist em { font: 500 11px var(--sans); color: var(--faint); font-style: normal; }
.hist i  { font: 600 15px var(--mono); font-style: normal; }

.here {
  display: flex; align-items: baseline; gap: 8px;
  background: #eef6f1; border: 1px solid #cfe4d8;
  border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 12px;
}
.here b { font: 700 18px var(--mono); color: var(--good); margin-inline-start: auto; }
.here span { font-size: 13px; color: var(--good); }

.counter {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.counter .bar { width: 8px; height: 36px; border-radius: 4px; flex: none; }
.counter .lbl { flex: 1; min-width: 0; }
.counter .lbl b { font-size: 15px; }
.counter .lbl small { display: block; color: var(--faint); font-size: 11.5px; }
.counter .step {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font: 500 22px var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}
.counter .step:active { background: #ecebe5; }
/* המספר הוא שדה הזנה, לא תווית. עם 2,050 יחידות אף אחד לא לוחץ פלוס. */
.counter .val {
  width: 72px;
  min-width: 72px;
  text-align: center;
  font: 700 24px var(--mono);
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 4px 2px;
  -moz-appearance: textfield;
}
.counter .val:hover { border-color: var(--line); }
.counter .val:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--card); }
.counter .val::-webkit-outer-spin-button,
.counter .val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.total { display: flex; align-items: baseline; padding: 4px 0 12px; }
.total .n { margin-inline-start: auto; font: 700 28px var(--mono); }
.total .of { font: 500 15px var(--mono); color: var(--muted); }
.total.over .n, .total.over span { color: var(--scrap); }

/* ---------- תמונות ---------- */
.phead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.phead b { font-size: 13.5px; }
.phead small { color: var(--faint); font-size: 11.5px; margin-inline-start: auto; }
summary::-webkit-details-marker { display: none; }
summary.phead { padding: 8px 0; }
summary.phead small { margin-inline-start: auto; }
summary.phead::after { content: "＋"; color: var(--faint); font-size: 15px; margin-inline-start: 8px; }
details[open] > summary.phead::after { content: "−"; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.photos .add {
  width: 64px; height: 64px;
  border: 1px dashed var(--faint);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 22px; cursor: pointer;
  background: var(--card);
}

/* ---------- דיאלוגים ---------- */
dialog {
  border: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  margin: auto auto 0;
  background: var(--surface);
  color: var(--ink);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
/* לוג ותמונות צריכים רוחב. במובייל זה נשאר גיליון תחתון. */
@media (min-width: 720px) {
  dialog.wide { max-width: 900px; margin: auto; border-radius: var(--r-lg); }
}
dialog.wide table { font-size: 13px; }

/* ---------- לייטבוקס תמונות ---------- */
/* תמונת ספק נפתחת במקום, לא בטאב חדש — במשרד מכריעים עליה מול המסך. */
dialog#lightbox { width: auto; max-width: min(92vw, 1100px); margin: auto; border-radius: var(--r-lg); padding: 12px; }
dialog#lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; object-fit: contain; }
.photos a,
img[src^="/img/products/"],
img[src^="/uploads/"] { cursor: zoom-in; }
/* בתוך קישור התמונה היא כפתור ניווט, לא זכוכית מגדלת */
a img, button img, label img { cursor: inherit; }
/* השרטוט הוא קווים דקים — במסך מלא הוא חייב רקע לבן כדי להיקרא */
dialog#lightbox img { background: #fff; border-radius: var(--r-sm); }

/* תעודת משלוח: כמעט מסך מלא, כי משווים אותה מול השורות שנקלטו */
dialog#pdfbox {
  width: 94vw; max-width: 1200px; height: 92vh; max-height: 92vh;
  margin: auto; border-radius: var(--r-lg); padding: 38px 0 0; overflow: hidden;
}
/* הכפתור ברצועה משלו ולא מעל התעודה — לצופה ה-PDF יש סרגל כלים משלו שם */
dialog#pdfbox iframe { width: 100%; height: 100%; border: 0; display: block; }
dialog#pdfbox .x {
  position: absolute; inset-inline-end: 8px; top: 4px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 14px; line-height: 1;
}
dialog .handle { width: 38px; height: 4px; border-radius: 2px; background: #ddd8ce; margin: 0 auto 16px; }
dialog h3 { font-size: 19px; margin: 0 0 8px; }

/* ---------- הודעות ---------- */
.note {
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.note.warn { background: #fdf3ef; border: 1px solid #f0cfc4; color: var(--scrap); }
.note.ok   { background: #eef6f1; border: 1px solid #cfe4d8; color: var(--good); }
.note.info { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- רשימות ומשרד ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: block;
  color: inherit;
}
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--line); }
th { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: end; }
.tablewrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs a { padding: 8px 14px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.tabs a.on { background: var(--dark); color: #fff; border-color: var(--dark); }

.pill { display: inline-block; font: 500 11px var(--mono); border-radius: var(--pill); padding: 3px 9px; background: var(--line-2); color: var(--ink-2); }
.pill.warn { background: #fdf3ef; color: var(--scrap); }
.pill.ok { background: #eef6f1; color: var(--good); }

/* ================= מעטפת המשרד: sidebar מתקפל ================= */
/* ponytail: checkbox + CSS. אין JS, אין state לנהל, עובד בלי מקורות חיצוניים. */
.shell { display: flex; min-height: 100dvh; }
#nav { display: none; }

.side {
  width: 236px;
  flex: none;
  background: var(--dark);
  color: #c9c3ba;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .15s ease;
}
.side .brand {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  padding: 2px 4px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--dark-3);
}
.side .brand .mark { display: none; }          /* מוצג רק במצב מקופל */
.side .brand-logo {
  display: block; width: 100%; height: auto;
  background: #fff; border-radius: 10px; padding: 7px 10px;
}
.side .brandtxt small { display: block; text-align: center; color: #8a847b; font-size: 11px; }
.side .brand .mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--dark-3);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--mono); color: var(--accent); flex: none;
}
.side .brand b { color: #faf9f6; font-size: 15px; display: block; line-height: 1.2; }
.side .brand small { color: #8a847b; font-size: 11px; }

.side .grp { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
             color: #6f6960; padding: 14px 10px 6px; }
.side .item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: #c9c3ba; font-size: 14px; font-weight: 500;
}
.side .item:hover { background: var(--dark-2); color: #faf9f6; }
.side .item.on { background: var(--dark-3); color: #fff; }
.side .item .ico { width: 18px; text-align: center; flex: none; opacity: .85; }
.side .item .badge2 {
  margin-inline-start: auto; font: 600 11px var(--mono);
  background: var(--accent); color: #fff; border-radius: var(--pill); padding: 1px 7px;
}
.side .foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--dark-3); }
.side .foot .who { padding: 0 10px 10px; font-size: 12px; color: #8a847b; }

.main { flex: 1; min-width: 0; background: var(--surface); display: flex; flex-direction: column; }
.main .topbar { padding-inline-start: 18px; }
/* התוכן נפרס על כל הרוחב; מה שלא אמור להימתח מוגבל אצלו, לא כאן */
.main .body { width: 100%; }
.split3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; }

/* רשת קוביות — auto-fit ולא auto-fill: עמודות ריקות מתכווצות והקוביות
   נמתחות למלא את הרוחב. עם auto-fill נשארו רצועות ריקות וקובייה בודדת
   ישבה צרה בפינה. min() כדי שברוחב קטן מ-320 הקובייה לא תגלוש. */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.cardgrid .card { margin: 0; height: 100%; display: flex; flex-direction: column; }
.cardgrid.wide { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
/* hidden חייב לנצח style מוטבע — אחרת שדה הבלאי מופיע גם בלי פסול */
[hidden] { display: none !important; }
/* תור ההכרעה: כרטיס קומפקטי, כדי שייכנסו כמה למסך אחד ולא אחד לכל גלילה */
.pendgrid { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.pendgrid .card { padding: 12px; }

/* ---------- DataTables בשפת העיצוב של המערכת ---------- */
/* הספרייה מביאה עיצוב משלה; כאן מחזירים אותה לטוקנים שלנו במקום לשכתב טבלאות */
.dt-container { width: 100%; }
.dt-layout-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dt-layout-row:last-child { margin: 10px 0 0; }
.dt-layout-cell.dt-end { margin-inline-start: auto; }

.dt-search input, div.dt-container .dt-search input {
  width: 260px; max-width: 100%; padding: 9px 12px;
  font: 400 13.5px var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--pill);
}
.dt-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

div.dt-container .dt-info { color: var(--faint); font: 500 12px var(--mono); padding: 0; }

div.dt-container .dt-paging .dt-paging-button {
  min-width: 32px; height: 32px; padding: 0 9px; margin: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink-2) !important; font: 500 12.5px var(--mono);
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--dark) !important; color: #fff !important; border-color: var(--dark);
}
div.dt-container .dt-paging .dt-paging-button.disabled { opacity: .4; }

div.dt-container .dt-buttons { display: flex; gap: 7px; }
div.dt-container .dt-button { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 6px 13px; font: 500 12px var(--sans); color: var(--ink-2); }
div.dt-container .dt-button:hover { border-color: var(--accent); color: var(--accent); }

table.dataTable thead th { cursor: pointer; }
table.dataTable thead th.nosort { cursor: default; }
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after { opacity: .35; }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--accent); }
table.dataTable > tbody > tr { background: transparent; }
table.dataTable.no-footer { border-bottom: 1px solid var(--line); }

/* ---------- הדפסה ושמירה כ-PDF ----------
   FR-26 בלי ספריית PDF: הדפדפן כבר יודע לייצר PDF מדף מודפס.
   מה שנשאר זה להחליט מה לא מודפס. */
@media print {
  .side, .burger, .scrim, .chiprow, .btn, .dt-search, .dt-paging,
  .dt-buttons, .noprint { display: none !important; }
  .shell { display: block; }
  .main .topbar { position: static; border-bottom: 2px solid #000; }
  .body { padding: 0 !important; }
  .card { break-inside: avoid; border-color: #999; }
  table { font-size: 11px; }
  thead { display: table-header-group; }   /* כותרת חוזרת בכל עמוד */
  tr { break-inside: avoid; }
  a[href]::after { content: ""; }          /* בלי כתובות באמצע הטקסט */
  body { background: #fff; }
  @page { margin: 12mm; }
}

/* ---------- טפסי ניהול ---------- */
/* הטופס לא נמתח לרוחב הצג: שדה טקסט של 1600px הוא לא קריא ולא נוח */
.admform { max-width: 100%; }
.admform > label {
  display: grid; gap: 4px; margin-bottom: 12px; max-width: 420px;
  font: 600 12.5px var(--sans); color: var(--muted);
}
.admform > label small { font-weight: 400; }
.admform > label.chk {
  display: flex; align-items: center; gap: 8px; max-width: none;
  font-size: 13.5px; color: var(--ink-2);
}
.admform > label.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.admform > label.chk small { margin-inline-start: 6px; }
@media (min-width: 900px) {
  .admform { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
  .admform > h2, .admform > .row { grid-column: 1 / -1; }
}

/* קליטת תעודה: המקור מצד אחד, מה שחולץ ממנו מהשני */
.wbsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wbpdf { position: sticky; top: 72px; height: calc(100dvh - 110px);
         border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.wbpdf object { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .wbsplit { grid-template-columns: 1fr; } .wbpdf { position: static; height: 60vh; } }
.cardgrid .split3, .cardgrid .fwwrap, .cardgrid .decide .row { max-width: none; }
/* label ו-span הם inline כברירת מחדל — בלי זה הכיתוב יושב לצד השדה ולא מעליו */
.split3 label, .split3 label span, .fwwrap span { display: block; }
.split3 label span, .fwwrap span { margin-bottom: 3px; }
.scrim { display: none; }
.burger {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); font-size: 17px; color: var(--ink);
}

/* ---- מצב מקופל: אייקונים בלבד. class על <html> כדי שיישרד ניווט ---- */
@media (min-width: 901px) {
  html.rail .side { width: 62px; padding-inline: 8px; }
  html.rail .side .brand { align-items: center; padding: 4px 0 16px; }
  html.rail .side .brand .mark { display: flex; }
  html.rail .side .brandtxt { display: none; }
  html.rail .side .grp { height: 0; padding: 10px 0 0; overflow: hidden; visibility: hidden; }
  html.rail .side .item {
    justify-content: center; gap: 0; padding: 11px 0;
    font-size: 0;              /* מסתיר את טקסט התווית שהוא text node חשוף */
    position: relative;
  }
  html.rail .side .item .ico { font-size: 16px; width: auto; }
  html.rail .side .item .badge2 {
    position: absolute; top: 3px; inset-inline-end: 4px; margin: 0;
    font-size: 9.5px; padding: 0 4px; line-height: 14px;
  }
  html.rail .side .foot .who { display: none; }
  html.rail .side .chiprow { flex-direction: column; align-items: center; gap: 5px; overflow: visible; }
}

@media (max-width: 900px) {
  .side {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
    transform: translateX(var(--off, -110%));
    transition: transform .18s ease;
  }
  html[dir=rtl] .side { --off: 110%; }
  #nav:checked ~ .shell .side { transform: translateX(0); }
  #nav:checked ~ .shell .scrim {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 30;
  }
}

/* ---------- דשבורד ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.kpi em { font-style: normal; font-size: 11.5px; color: var(--muted); display: block; }
.kpi b { font-size: 26px; font-weight: 700; display: block; line-height: 1.15; margin: 2px 0; }
.kpi small { color: var(--faint); font-size: 11px; }
.kpi.warn { border-color: #f0cfc4; background: #fdf3ef; }
.kpi.warn b { color: var(--scrap); }

.bar-track { height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--good); border-radius: 3px; }

/* ================= מסך התחברות: תמונה מצד אחד, טופס מהשני ================= */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; }

.login-aside {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 46px 48px;
  color: #fff;
  background:
    linear-gradient(200deg, rgba(28,27,25,.42), rgba(28,27,25,.78) 70%),
    url("../img/login-bg.jpg") center/cover no-repeat;
}
/* נגיעת המותג על התמונה הכחולה, אחרת המסך לא מדבר באותם צבעים כמו המערכת */
.login-aside::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 82% 8%, rgba(194,97,10,.30), transparent 70%);
}
.login-aside > * { position: relative; z-index: 1; }

/* הלוגו על רקע לבן — הוא מגיע עם רקע לבן, אז נותנים לו כרטיס משלו */
.lg-logo {
  height: 78px; width: auto;
  background: #fff; padding: 8px 14px; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
/* קרדיט בפינה השמאלית הפיזית, בשתי שפות הכיוון */
.lg-by {
  position: fixed; inset-block-end: 14px; left: 16px; z-index: 2;
  font: 500 12px var(--mono); letter-spacing: .02em;
  color: var(--faint); opacity: .85;
}
.lg-by:hover { color: var(--accent); }

.login-form-wrap { display: grid; place-items: center; padding: 40px 28px; background: var(--surface); }
.login-card { width: min(370px, 100%); }
.login-card h2 { font-size: 25px; margin: 0; }
.lg-cardfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-aside { min-height: 150px; padding: 20px 22px; justify-content: center; align-items: center; }
  .lg-logo { height: 54px; }
  .login-form-wrap { padding: 26px 20px 40px; place-items: start center; }
}

/* לוגו בסרגל העליון של מסכי השטח */
.tb-logo { height: 27px; width: auto; flex: none; }
/* הדגלים לא יבלעו את הכותרת בטלפון — הם גוללים בתוך רוחב קבוע */
.topbar .chiprow { max-width: 124px; }
@media (max-width: 380px) { .tb-logo { height: 22px; } .topbar .chiprow { max-width: 96px; } }

/* ---------- טיפוגרפיה במשרד ---------- */
/* מסך משרד נצפה ממרחק ישיבה ולא ביד. .shell הוא המשרד בלבד, ולכן
   השטח לא מושפע. הכל יחסי לגודל הבסיס, כדי שההגדלה תהיה עקבית. */
.shell { font-size: 16.5px; }
.shell .topbar h1 { font-size: 21px; }
.shell .topbar .sub { font-size: 13px; }
.shell h2 { font-size: 19px; }
.shell table { font-size: 14.5px; }
.shell table th { font-size: 13.5px; }
.shell .chip { font-size: 13px; padding: 7px 14px; }
.shell .btn { font-size: 16px; }
.shell .btn.inline { padding: 11px 20px; }
.shell input[type=text], .shell input[type=password], .shell input[type=search],
.shell input[type=number], .shell input[type=date], .shell textarea, .shell select {
  font-size: 15.5px;
}
.shell .side .item { font-size: 15px; }
.shell .faint, .shell .muted { font-size: inherit; }