/* Heebo 500/700/800 only — the three weights the standard allows (§7). 400/600 requests fall
   to the nearest loaded face, so no page can accidentally render a fourth weight. */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@500;700;800&display=swap");

/* ── kg-theme.css — the ONLY place a colour is allowed to be written ────────────────────
   Loaded on every KG24 page, immediately after the inline pre-paint snippet that puts
   data-theme on <html>. See DECISIONS 20.8.26.

   WHY THIS FILE EXISTS
   The 🌙/☀️ toggle was never broken: kg-nav.js has always set <html data-theme> correctly
   (preference light|dark|auto, effective light|dark). What was broken is that every page
   declared its OWN dark palette inside its own <style> — `:root{--bg:#0b1220;--card:#121b2e…}`
   — which loads AFTER this file and therefore won. The toggle flipped an attribute that
   nothing but the chrome's own --kgn-* tokens listened to. So the fix is not more JavaScript;
   it is deleting those 35 local palettes and letting these tokens resolve.

   TWO LAYERS, ON PURPOSE:
     1. CANONICAL tokens — the vocabulary. Every new rule uses these.
     2. LEGACY ALIASES  — the 35 existing pages already say var(--fg), var(--line), var(--ok).
        Aliasing those names onto the canonical ones makes all of them theme-reactive without
        touching a single selector in a single page. Rewriting ~1000 declarations by hand
        across pages nobody has visually reviewed is how you ship a dark-on-dark page; this
        way the blast radius is one file.
     Aliases are frozen: they exist for pages that predate the token set. NEW code uses the
     canonical names. */

:root {
  /* ── typography scale (29.8.26) ────────────────────────────────────────────────────────
     A single multiplier controls all font sizes. The default 1.32 is "xlarge" — chosen
     for readability in-store (2.9.26). User can pick 1.0 (regular), 1.18 (large), or 1.5
     (huge) from the settings panel. The scale is applied via --fs-scale, read from
     localStorage kg24_fs_scale by kg-theme-boot.js before first paint.

     Semantic tokens in BASE pixels (at scale=1.0):
       --fs-body:   17px  →  body text, table cells, list items
       --fs-small:  15px  →  secondary text, muted captions, help
       --fs-tiny:   14px  →  badges, chips, timestamps
       --fs-btn:    17px  →  buttons, inputs, selects (iOS zoom threshold)
       --fs-h1:     26px  →  page title
       --fs-h2:     20px  →  section heading
       --fs-h3:     17px  →  card heading, subsection
       --fs-nav:    12px  →  bottom nav labels

     Usage: font-size: calc(var(--fs-body) * var(--fs-scale));
     Or use the pre-computed shortcuts below. */

  --fs-scale: 1.32;  /* default: xlarge. Overridden by data-fs attribute on <html> */

  /* base values, in rem (16.9.26 — was px). 1rem = the device body size: on iOS/iPadOS/macOS
     Safari `html{font:-apple-system-body}` below makes it follow the Dynamic Type setting
     (17px at the default step), everywhere else it is the browser's 16px. So the employee's
     device text size AND the in-app scale both apply — the standard's §6/ו. The ratios are the
     old px set divided by 17. */
  --fs-body-base:  1rem;
  --fs-small-base: .882rem;
  --fs-tiny-base:  .824rem;
  --fs-btn-base:   1rem;
  --fs-h1-base:    1.53rem;
  --fs-h2-base:    1.176rem;
  --fs-h3-base:    1rem;
  --fs-nav-base:   .706rem;

  /* ── iOS-27 layer tokens (16.9.26). Consumed by kg-ios.css and the chrome; never literal in a page. ── */
  --font: "Heebo", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
  --r-card: 20px;
  --r-btn: 999px;
  --r-input: 14px;
  --r-bar: 24px;
  --r-sheet: 24px;
  --dur: 200ms;
  --dur-fast: 120ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glass-bg: rgba(255,255,255,.82);        /* light glass: white at 82% over the page */
  --glass-line: rgba(15,23,42,.10);
  --glass-blur: 18px;
  --glass-accent: rgba(37,99,235,.86);      /* the FAB: accent glass */
  --card-line: rgba(15,23,42,.06);
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.08);
  --shadow-float: 0 8px 28px rgba(16,24,40,.18);
  --bar-color: #ffffff;                     /* <meta name="theme-color"> — Safari's own chrome */

  /* pre-computed scaled values (use these in rules) */
  --fs-body:  calc(var(--fs-body-base)  * var(--fs-scale));
  --fs-small: calc(var(--fs-small-base) * var(--fs-scale));
  --fs-tiny:  calc(var(--fs-tiny-base)  * var(--fs-scale));
  --fs-btn:   calc(var(--fs-btn-base)   * var(--fs-scale));
  --fs-h1:    calc(var(--fs-h1-base)    * var(--fs-scale));
  --fs-h2:    calc(var(--fs-h2-base)    * var(--fs-scale));
  --fs-h3:    calc(var(--fs-h3-base)    * var(--fs-scale));
  --fs-nav:   calc(var(--fs-nav-base)   * var(--fs-scale));

  /* line height for readability */
  --lh: 1.45;

  /* ── canonical: light (the default) ── */
  --bg:#f8fafc;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --text-dim:#475569;
  --border:#e2e8f0;
  --accent:#2563eb;
  --accent-text:#ffffff;
  --danger:#dc2626;
  --success:#16a34a;
  --warn:#f59e0b;

  /* ── extensions ──
     The 11 canonical tokens cannot express what the pages actually do: they use a second
     surface level, low-alpha status tints for pills and row highlights, a scrim behind
     modals, and a dark ink that sits on a filled success button. Without these, a sweep has
     nowhere to send ~350 literals and they stay hardcoded — so they are tokens, not
     exceptions. */
  --surface-2:#f1f5f9;          /* raised/sunken panel: table headers, inset blocks */
  --tint-accent:rgba(37,99,235,.10);
  --tint-success:rgba(22,163,74,.12);
  --tint-danger:rgba(220,38,38,.10);
  --tint-warn:rgba(245,158,11,.14);
  --tint-neutral:rgba(71,85,105,.08);
  --on-success:#052e16;         /* text/icon on a --success fill */
  --on-danger:#ffffff;
  --on-warn:#3f2d05;
  --scrim:rgba(15,23,42,.45);   /* modal backdrop */
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);

  /* ── legacy aliases (frozen — do not add to this list) ── */
  --fg:var(--text);
  --mut:var(--text-dim);
  --muted:var(--text-dim);
  --ink:var(--text);
  --line:var(--border);
  --ok:var(--success);
  --err:var(--danger);
  --danger-c:var(--danger);
  --surface2:var(--surface-2);
  --done:var(--success);
  --open:var(--danger);
  --info:var(--accent);
  --accent-d:var(--accent);

  /* UX-STD v1 — צבעי זיהוי עסקים (תיוג בלבד, לא לשימוש אחר) */
  --biz-kg24: #2f6fdb;
  --biz-epgb: #8b5fc9;
  --biz-gard: #2fa36b;

  /* ── 12 צבעי עובדים קבועים (26.9.26) — צ'יפ משמרת בסידור, לפי roster_week_v1.color_idx ──
     נפרדים מצבעי העסקים --biz-* בכוונה: צבע עסק מזהה "של מי המסמך", צבע עובד מזהה "מי
     במשמרת". שניהם תיוג, אף אחד מהם לא סטטוס. הגוונים נבחרו בהירים מספיק לדיו כהה
     (--emp-ink) על רקע בהיר וכהה, ורחוקים זה מזה בגוון כדי שגם 12 עובדים בעמודה אחת
     ייקראו כמובחנים. */
  --emp-ink: #0f172a;
  --emp-c0:  #93c5fd;   /* כחול */
  --emp-c1:  #86efac;   /* ירוק */
  --emp-c2:  #fcd34d;   /* צהוב */
  --emp-c3:  #fca5a5;   /* אדום-ורוד */
  --emp-c4:  #c4b5fd;   /* סגול */
  --emp-c5:  #fdba74;   /* כתום */
  --emp-c6:  #67e8f9;   /* תכלת */
  --emp-c7:  #f9a8d4;   /* ורוד */
  --emp-c8:  #bef264;   /* ליים */
  --emp-c9:  #a5b4fc;   /* אינדיגו */
  --emp-c10: #5eead4;   /* טורקיז */
  --emp-c11: #d6d3d1;   /* אפור-חם */
}

[data-theme="dark"] {
  --bg:#0b1220;
  --surface:#111827;
  --card:#1f2937;
  --text:#f3f4f6;
  --text-dim:#9ca3af;
  --border:#374151;
  --accent:#3b82f6;
  --accent-text:#ffffff;
  --danger:#f87171;
  --success:#4ade80;
  --warn:#fbbf24;

  --surface-2:#16203a;
  --tint-accent:rgba(59,130,246,.15);
  --tint-success:rgba(74,222,128,.15);
  --tint-danger:rgba(248,113,113,.15);
  --tint-warn:rgba(251,191,36,.16);
  --tint-neutral:rgba(148,163,184,.12);
  --on-success:#04231a;
  --on-danger:#1a0505;
  --on-warn:#2a1a03;
  --scrim:rgba(0,0,0,.62);
  --shadow:none;

  /* iOS-27 layer, dark: the "dark glass" — gray-800 at 78% over the near-black page */
  --glass-bg: rgba(31,41,55,.78);
  --glass-line: rgba(255,255,255,.10);
  --glass-accent: rgba(59,130,246,.86);
  --card-line: rgba(255,255,255,.08);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  --shadow-float: 0 10px 30px rgba(0,0,0,.55);
  --bar-color: #1f2937;
}

html, body {
  background:var(--bg);
  color:var(--text);
}

/* A flip should read as the same page changing clothes, not as a navigation. Scoped to the
   two properties that actually change so it can never animate a layout, and dropped entirely
   for anyone who asked for less motion. */
html, body, .card, .panel, table, th, td, input, select, textarea, button, .modal, .sheet {
  transition:background-color .15s linear, color .15s linear;
}
@media (prefers-reduced-motion: reduce) {
  html, body, .card, .panel, table, th, td, input, select, textarea, button, .modal, .sheet {
    transition:none;
  }
}

/* The scrollbar and the browser's own form widgets are painted by the UA, not by us — without
   this they stay light-on-dark and the page looks half-converted. */
:root { color-scheme:light; }
[data-theme="dark"] { color-scheme:dark; }

/* תג "התאמה חלקית" של חיפוש הקטלוג (catalog_search_v2, 28.8.26).
   assets/kg-theme.css נטען בכל 36 עמודי kg24, ולכן זה המקום המשותף. */
.kg-partial{display:inline-block;font-size:var(--fs-tiny);font-weight:600;padding:2px 7px;
border-radius:999px;background:#FEF3C7;color:#92400E;margin-inline-start:6px;
vertical-align:middle;}

/* ── font scale attribute selectors ───────────────────────────────────────────────────── */
html[data-fs="regular"] { --fs-scale: 1.0; }
html[data-fs="large"]   { --fs-scale: 1.18; }
html[data-fs="xlarge"]  { --fs-scale: 1.32; }
html[data-fs="huge"]    { --fs-scale: 1.5; }

/* ── base typography ──────────────────────────────────────────────────────────────────── */
html {
  /* `-apple-system-body` is the iOS Dynamic-Type body style: 1rem now tracks the device text
     size on Apple platforms. Other engines reject the value and keep their 16px default — the
     rem tokens above were built for both. `auto` (was 100%) lets Safari apply the user's text
     size in landscape too; the global --fs-scale still multiplies on top (§ו). */
  font: -apple-system-body;
  -webkit-text-size-adjust: auto;
  text-size-adjust: auto;
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
}

/* form elements inherit scale — critical for iOS (no zoom on focus when ≥16px) */
input, select, textarea, button {
  font-size: var(--fs-btn);
  font-family: inherit;
}

/* semantic heading defaults (pages can override) */
h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3, h4 { font-size: var(--fs-h3); line-height: 1.35; }

/* utility classes for scaled font sizes */
.fs-body  { font-size: var(--fs-body) !important; }
.fs-small { font-size: var(--fs-small) !important; }
.fs-tiny  { font-size: var(--fs-tiny) !important; }
.fs-btn   { font-size: var(--fs-btn) !important; }
.fs-h1    { font-size: var(--fs-h1) !important; }
.fs-h2    { font-size: var(--fs-h2) !important; }
.fs-h3    { font-size: var(--fs-h3) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   עמודת תוכן נעולה — דסקטופ (19.9.26)

   הדפים נבנו mobile-first, ובלי תקרת רוחב כל כרטיס נמתח ל-1920px: שורות
   שנבנו כ-space-between נפרשו לקצוות עד שנקראו כמנותקות, ותגים שמעוגנים
   ל-inset-inline-end התרחקו מהטקסט שהם שייכים לו.

   התיקון הוא עמודה אחת: אותה עמודת מובייל, ממורכזת. mobile-first נשאר המקור
   ואין פריסת דסקטופ נפרדת לתחזק — מתחת ל-700px שום דבר כאן לא פעיל.

   🛑 קובץ אחד לכל הדפים. אין max-width פר-דף.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --kg-col: 560px; }

@media (min-width: 700px) {

  /* מכל התוכן — ‎39 מ-44 העמודים עוטפים ב-#app/.app; השאר נשענים על ילדי body
     ישירים (header / a.home / gate / main / wrap), ולכן שניהם מכוסים. */
  #app, .app,
  body > main, body > .wrap,
  body > header, body > .header, body > a.home, body > .gate,
  body > h1, body > h2, body > form, body > table {
    max-width: var(--kg-col);
    margin-inline: auto;
  }

  /* הסרגל העליון: הרקע נשאר לרוחב מלא (זו רצועת הזכוכית), והתוכן שבתוכו
     מתיישר לאותה עמודה דרך padding. ‎max() שומר על 6px המקוריים בצרים. */
  html #kgNav {
    padding-inline: max(6px, calc((100% - var(--kg-col)) / 2));
  }

  /* הסרגל התחתון הוא קפסולה צפה (inset-inline:12px) — הגבלה + auto ממרכזת
     אותה מול העמודה במקום להימתח לרוחב המסך. */
  html #kgBnav {
    max-width: var(--kg-col);
    margin-inline: auto;
  }

  /* ה-FAB מעוגן לקצה המסך; בדסקטופ הוא נצמד לקצה העמודה כדי לא לרחף לבד. */
  html #epgbFab {
    inset-inline-start: max(16px, calc((100% - var(--kg-col)) / 2 + 16px));
  }

  /* באנרי kg-nav (‎#kgnRelabel / #kgnOwner) כבר ממורכזים ב-justify-content,
     והרקע שלהם אמור להישאר לרוחב מלא — לא נגענו בהם בכוונה. */

  /* ניווט ובאנרים ברמת תוכן — לא chrome, ולכן באותה עמודה. */
  body > nav.tri,
  body > .hub-banner, body > .info-banner, body > .onboard-banner,
  body > a.onboard-banner {
    max-width: var(--kg-col);
    margin-inline: auto;
  }

  /* ארבעת העמודים שאין בהם מכל #app — מסכי התוכן יושבים ישירות על body.
     מנויים בשמם כי אין להם מכנה משותף, ו-‎body > div גורף היה תופס גם
     לייטבוקסים, גיליונות וטוסטים שחייבים להישאר על כל המסך. */
  body > #gridScreen, body > #detailScreen,          /* bake */
  body > #queueView, body > #linesView,              /* dn-receive */
  body > #capDeny                                    /* snif */
  {
    max-width: var(--kg-col);
    margin-inline: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   פריסת דסקטופ אמיתית — ‎≥900px (21.9.26). מחליפה את החלטת 19.9 ("עמודת מובייל
   ממורכזת") מרוחב 900 ומעלה; בין 700 ל-899 העמודה של 560px נשארת כפי שהייתה.

   מתחת ל-900px שום דבר כאן לא פעיל — כל הכללים בתוך שני media queries בלבד.

   מה קורה כאן (וב-kg-nav.js / fab.css, שמחזיקים את הכללים של האלמנטים שלהם):
     · --kg-col עולה ל-1100px (‎≥900) ו-1360px (‎≥1280); padding אופקי 24px.
     · הטאב-בר התחתון (#kgBnav) הופך לרייל אנכי 220px בצד ההתחלה (ימין ב-RTL);
       ה-body מקבל padding-inline-start תואם. אותו nav, אותם פריטים — CSS בלבד.
     · הבאנרים הקבועים של הכרום (#kgnRelabel / #kgnOwner) יושבים ברוחב התוכן.
     · מכל כרטיסים (#app / .app עם ≥2 כרטיסים ישירים) → grid של 340px+.
     · .tblwrap → טבלה אמיתית עם כותרת דביקה בגלילה אנכית פנימית.
     · פסי כפתור דביקים בתחתית של עמודים בודדים → inline. ה-FAB → כפתור בכותרת
       (fab.css + fab.js).
   🛑 קובץ אחד לכל הדפים. אין פריסת דסקטופ פר-דף.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  :root { --kg-col: 1100px; --kg-rail: 220px; }

  /* ── א. רוחב התוכן ── (0,1,2) מנצח את body{} של כל עמוד בלי !important */
  html.kg-has-nav body { padding-inline: 24px; }
  html.kg-has-bnav body { padding-inline-start: calc(var(--kg-rail) + 24px); }
  /* הספייסר של הסרגל התחתון — אין סרגל תחתון בדסקטופ */
  html.kg-has-bnav body::after { display: none; }
  /* הכרטיס "הוסף למסך הבית" יושב בעמודה כמו כל תוכן */
  body > #kgA2hs { max-width: var(--kg-col); margin-inline: auto; }

  /* ── ג. כרטיסים → grid ──
     רק מכל שיש בו לפחות שני כרטיסים ישירים. !important כי העמודים חושפים את #app
     עם style.display="block"; ה-:not שומר על ההסתרה (display:none inline / .hidden). */
  #app:has(> .card ~ .card):not(.hidden):not([style*="display:none"]):not([style*="display: none"]),
  .app:has(> .card ~ .card):not(.hidden):not([style*="display:none"]):not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-content: start;
  }
  #app:has(> .card ~ .card) > .card, .app:has(> .card ~ .card) > .card {
    margin-block: 0;
    break-inside: avoid;
    min-width: 0;
  }
  /* כל מה שאינו כרטיס (שורת תאריך, באנרים, טאבים) וכרטיס שמחזיק טבלה — שורה מלאה */
  #app:has(> .card ~ .card) > :not(.card), .app:has(> .card ~ .card) > :not(.card),
  #app:has(> .card ~ .card) > .card:has(table, .tblwrap), .app:has(> .card ~ .card) > .card:has(table, .tblwrap) {
    grid-column: 1 / -1;
  }

  /* ── ד. טבלאות ── גלילה רק בתוך המיכל, כותרת דביקה בתוכו */
  .tblwrap {
    overflow: auto;
    max-height: calc(100dvh - var(--kgn-h, 48px) - 140px);
  }
  .tblwrap thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
  .tblwrap table { min-width: 0; }
  /* /schedule: העמודה של שם העובד דביקה בצד ימין (כבר sticky בעמוד; מעל הכותרת בפינה) */
  .tblwrap th.emp { z-index: 3; }

  /* ── ה. פסי כפתור דביקים של עמודים בודדים → inline. מנויים בשמם, כמו בבלוק 700. ──
     oos .abar · relabel .bar · dn-receive .bottom-bar · theft .fab-new/.fab-add ·
     invoices/suppliers .fab */
  body > .abar, body > .bar, body > .bottom-bar,
  body > .fab, html .fab-new, html .fab-add {
    position: static;
    inset: auto;
    transform: none;
    z-index: auto;
    box-shadow: none;
  }
  body > .abar, body > .bar, body > .bottom-bar {
    max-width: var(--kg-col);
    margin: 12px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--r-card, 20px);
    padding: 12px 16px;
    background: var(--card);
  }
  body > .fab {
    display: block;
    width: auto; height: auto;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    margin: 12px auto 0;
    font-size: var(--fs-btn);
  }
  body > .fab[style*="display:none"], body > .fab[style*="display: none"] { display: none; }
  html .fab-new { width: auto; margin: 12px 0; }
  html .fab-add { margin: 12px 0; }
}

@media (min-width: 1280px) {
  :root { --kg-col: 1360px; }
}

@media print {
  html.kg-has-nav body { padding-inline: 0 !important; }
}