/* קונסולת קטלוג — "לוח מחוונים": מסגרות במקום צללים, מבטא יחיד, RTL.
   מעטפת: סרגל צד (ימין) + עמודת תוכן. במובייל הסרגל הופך לפס עליון. */

:root {
  --bg: #F6F7FA;
  --surface: #FFFFFF;
  --surface-2: #F0F2F6;
  --line: #E4E7EC;
  --line-strong: #C9CFDA;
  --text: #131720;
  --muted: #6B7385;
  --accent: #00806F;
  --accent-bright: #00C2A8;
  --accent-soft: #E0F5F1;
  --add: #1F8A50;      --add-soft: #E4F5EB;
  --change: #9A6508;   --change-soft: #FBF1DC;
  --remove: #C42B1C;   --remove-soft: #FBE9E7;
  --info: #1F5FA8;     --info-soft: #E7F0FB;
  --same: #6B7385;
  /* --err/--warn/--ok לא הוגדרו מעולם, ושמונה מקומות בקוד כותבים
     var(--err, #d33) ומקבלים תמיד את ברירת המחדל הקשיחה. במצב כהה
     #d33 הוא אדום עכור על רקע כהה במקום #F04438 של הפלטה. הכינויים
     האלה מיישרים את כולם בבת אחת: הם יושבים על :root, ולכן הם
     נפתרים מול ה---remove/--change/--add שגברו בקסקייד — כלומר
     מקבלים את הערכים הכהים במצב כהה בלי להיכתב שוב בכל בלוק */
  --err: var(--remove);
  --warn: var(--change);
  --ok: var(--add);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --r-card: 12px;
  --r-ctl: 7px;
}
/* הלוח הכהה מוגדר פעמיים בכוונה: פעם למצב "אוטומטי" (מערכת כהה, בלי כפיית
   בהיר) ופעם לכפייה מפורשת דרך המתג — כך data-theme גובר על המערכת לשני
   הכיוונים. לעדכן את שני הבלוקים יחד. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0E13;
    --surface: #141821;
    --surface-2: #1A1F2A;
    --line: #232935;
    --line-strong: #39424F;
    --text: #E6E9EF;
    --muted: #8B94A7;
    --accent: #00C2A8;
    --accent-bright: #00C2A8;
    --accent-soft: #0F241F;
    --add: #2FBF71;    --add-soft: #12271B;
    --change: #F5A524; --change-soft: #2A2110;
    --remove: #F04438; --remove-soft: #2B1512;
    --info: #5EA0E8;   --info-soft: #121E2E;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0E13;
  --surface: #141821;
  --surface-2: #1A1F2A;
  --line: #232935;
  --line-strong: #39424F;
  --text: #E6E9EF;
  --muted: #8B94A7;
  --accent: #00C2A8;
  --accent-bright: #00C2A8;
  --accent-soft: #0F241F;
  --add: #2FBF71;    --add-soft: #12271B;
  --change: #F5A524; --change-soft: #2A2110;
  --remove: #F04438; --remove-soft: #2B1512;
  --info: #5EA0E8;   --info-soft: #121E2E;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; }
html { font-size: 16px; }
body {
  font-family: "Assistant", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex;
}
button, input, select, textarea { font: inherit; color: inherit; }
.mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.ic { display: inline-flex; width: 18px; height: 18px; vertical-align: -3px; flex: none; }
.ic svg { width: 100%; height: 100%; }
.ic.lg { width: 22px; height: 22px; }
.ic.sm { width: 15px; height: 15px; }

kbd {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; background: var(--surface);
}

/* ================= מעטפת ================= */
#sidebar {
  /* overflow-y: במסך נמוך (מחשב נייד, חלון מחצית) הכפתורים שבתחתית
     גלשו מחוץ לקופסה ולא היה אפשר להגיע אליהם */
  width: 216px; flex: none; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  background: var(--surface); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 10px; gap: 6px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 4px 10px 14px; }
.brand-mark { width: 13px; height: 13px; border-radius: 4px; background: var(--accent-bright); display: inline-block; flex: none; }
/* שם המוצר ומתחתיו שורת המיצוג, בקשת הבעלים 12/9: "Dreamy CRM — תוכנה
   לניהול עסקים". שתי שורות בעמודה אחת, כדי שהריבוע יישאר מיושר לשם */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
/* גודל הבסיס בלבד: fitBrandTag ב-app.js מכוון את הגופן כך שהשורה
   תהיה בדיוק ברוחב של השם שמעליה, כמו שהבעלים ביקש (12/9) */
.brand-tag { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; display: inline-block; line-height: 1.1; }

#nav { display: flex; flex-direction: column; gap: 2px; }
#nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: var(--r-ctl);
  border-inline-start: 3px solid transparent;
  padding: 9px 12px; cursor: pointer; color: var(--muted);
  font-weight: 600; font-size: 14px; text-align: start;
}
#nav button:hover { color: var(--text); background: var(--surface-2); }
#nav button.active {
  color: var(--accent); background: var(--accent-soft);
  border-inline-start-color: var(--accent-bright);
}
#nav .navbadge {
  margin-inline-start: auto; min-width: 20px; text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--accent-bright); color: #fff;
  border-radius: 999px; padding: 1px 6px;
}

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.side-foot .chip { justify-content: center; }

#main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 26px 24px 90px; }

.banner {
  padding: 10px 20px; display: flex; gap: 12px; align-items: center; font-size: 14px;
}
.banner.err { background: var(--remove); color: #fff; }
.banner.warn { background: var(--change); color: #fff; }
.banner .btn { margin-inline-start: auto; flex: none; align-self: center; }
.banner .stop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.banner button.link.inv { color: #fff; text-decoration: underline; opacity: .85; padding: 0 2px; font-size: 12.5px; }
.banner button.link.inv:hover { opacity: 1; }
.banner code#stop-raw {
  display: block; background: rgba(0, 0, 0, .25); border-radius: 6px;
  padding: 8px 10px; font-size: 12px; white-space: pre-wrap; direction: ltr; text-align: left;
  max-height: 120px; overflow-y: auto;
}

h1 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.screen-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.screen-head .grow { flex: 1; min-width: 240px; }
.screen-head h1 { display: flex; align-items: center; gap: 10px; }
.screen-head h1 .ic { color: var(--accent); }

/* ================= כרטיסים ================= */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px;
}
.card-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: 700; font-size: 14px; margin-bottom: 12px;
}
.card-h .ic { color: var(--accent); }
.card-h .spacer { flex: 1; }

/* ================= כפתורים ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-ctl); padding: 0 16px; min-height: 40px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  background: none; border: 1px solid var(--line-strong); color: var(--text);
  white-space: nowrap;
}
.btn:hover { border-color: var(--text); background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.danger { border-color: var(--remove); color: var(--remove); }
.btn.danger:hover { background: var(--remove); color: #fff; }
.btn.danger.solid { background: var(--remove); color: #fff; }
.btn.ghost { border-color: var(--line-strong); }
.btn.inv { border-color: #fff; color: #fff; background: none; }
.btn.inv:hover { background: #fff; color: var(--remove); }
/* אייקון בתוך כפתור לוקח את צבע הכפתור, לא את צבע הכותרת שמעליו.
   בלי זה `.card-h .ic` צבע את ה-+ בירוק אקסנט על גבי כפתור primary ירוק,
   וכפתור "הוסף תזכורת" בלוח הבקרה נראה כמו ריבוע ירוק ריק. */
.card-h .btn .ic, .section-h .btn .ic, .screen-head .btn .ic { color: inherit; }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn.iconbtn { width: 40px; padding: 0; }
/* כפתור החיוג (dialer.js) יושב צמוד למספר בתוך תא טבלה או שורת
   פרטים, ולא כפקד בפני עצמו: בגודל כפתור רגיל הוא דחף את המספר
   לשורה משלו והכפיל את גובה כל שורה בכרטיס "שיחות שלא נענו" */
.dial-btn { min-height: 22px; padding: 0 6px; font-size: 12px; vertical-align: middle; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: none; border-color: var(--line-strong); }
.btn.primary:disabled:hover { background: var(--accent); }
button.link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  padding: 2px 4px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
button.link:hover { text-decoration: underline; }
a.link { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
a.link:hover { text-decoration: underline; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; margin-inline-start: -1px; }
.btn-group .btn:first-child { border-start-start-radius: var(--r-ctl); border-end-start-radius: var(--r-ctl); margin-inline-start: 0; }
.btn-group .btn:last-child { border-start-end-radius: var(--r-ctl); border-end-end-radius: var(--r-ctl); }

/* ================= פקדים ================= */
input[type=text], input[type=number], input[type=search], input[type=email],
input[type=date], input[type=datetime-local], input[type=tel], select, textarea {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); padding: 9px 12px; font-size: 14px; color: var(--text);
  min-height: 40px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 1px;
}
input[type=number] { font-family: var(--mono); direction: ltr; text-align: center; }
input.invalid, select.invalid { border-color: var(--remove); background: var(--remove-soft); }
.field-err { color: var(--remove); font-size: 12px; margin-top: 3px; }

/* מונה כמות עם +/- */
.stepper { display: inline-flex; align-items: stretch; direction: ltr; }
.stepper input { width: 64px; border-radius: 0; border-inline: none; min-height: 36px; padding: 4px 6px; }
.stepper button {
  width: 32px; background: var(--surface-2); border: 1px solid var(--line-strong);
  cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.stepper button:hover { color: var(--text); background: var(--line); }
.stepper button:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.stepper button:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.stepper.disabled { opacity: .5; pointer-events: none; }

/* מתג ניהול מלאי */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; }
.switch .track {
  width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong);
  position: relative; transition: background .15s; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.switch.on .track { background: var(--accent-bright); }
.switch.on .track::after { transform: translateX(-16px); }
:root[dir="ltr"] .switch.on .track::after { transform: translateX(16px); }
.switch.pending .track { outline: 2px solid var(--change); outline-offset: 1px; }

/* שדה סריקה */
.scan-wrap { display: flex; gap: 10px; margin-bottom: 14px; position: relative; }
.scan-wrap input {
  flex: 1; font-size: 17px; min-height: 48px; border-width: 2px;
  border-color: var(--accent); background: var(--surface); padding-inline-start: 44px;
}
.scan-wrap .scan-ic {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: var(--accent); width: 20px; height: 20px; pointer-events: none;
}
.suggest {
  position: absolute; top: 100%; inset-inline: 0; z-index: 30; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); overflow: hidden; max-height: 300px; overflow-y: auto;
}
.suggest button {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: start;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 9px 14px; cursor: pointer; font-size: 13px;
}
.suggest button:hover, .suggest button.sel { background: var(--accent-soft); }
.suggest button:last-child { border-bottom: none; }

/* ================= טבלאות ================= */
.tablecard { padding: 0; overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
  text-align: right; color: var(--muted); font-weight: 600; font-size: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 5;
}
table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* תא .mono מקבל direction: ltr כדי שמספר ותאריך ייקראו נכון, ולכן
   "ההתחלה" שלו היא שמאל: הערך נדבק לשמאל בזמן שהכותרת שמעליו מיושרת
   לימין. בטבלה צרה זה לא נראה, ובטבלה רחבה הערך נראה כאילו הוא שייך
   לעמודה השכנה */
table.grid td.mono, table.grid th.mono { text-align: right; }
/* שורות פירוט הזמנות רכש — צפופות: הרבה שורות, מעט אוויר */
tr.po-detail td { padding-top: 2px; padding-bottom: 2px; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
table.grid tr.rowerr td { background: var(--remove-soft); }

.thumb { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--line); border-radius: 7px; background: #fff; flex: none; }

/* ================= תגיות ================= */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.plain::before { display: none; }
.pill.exists, .pill.instock, .pill.ok { background: var(--add-soft); color: var(--add); }
.pill.new, .pill.info { background: var(--info-soft); color: var(--info); }
.pill.decide, .pill.draft, .pill.warn { background: var(--change-soft); color: var(--change); }
.pill.outofstock, .pill.err { background: var(--remove-soft); color: var(--remove); }
.pill.neutral { background: var(--surface-2); color: var(--muted); }
/* תזכורות — צהוב מובהק */
.pill.remind { background: #FFF3B0; color: #7a6400; }
.chip.remind { color: #a88a00; border-color: #e6c200; background: #FFF9D6; }
:root:not([data-theme="light"]) .pill.remind { background: #3a3200; color: #FFD43B; }
:root:not([data-theme="light"]) .chip.remind { color: #FFD43B; border-color: #8a7a00; background: #2a2400; }
:root[data-theme="dark"] .pill.remind { background: #3a3200; color: #FFD43B; }
:root[data-theme="dark"] .chip.remind { color: #FFD43B; border-color: #8a7a00; background: #2a2400; }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

.chip {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.ok { color: var(--add); border-color: var(--add); }
.chip.warn { color: var(--change); border-color: var(--change); }
.chip.err { color: var(--remove); border-color: var(--remove); }
/* צ'יפ שנבחר — בורר המועד בתזכורת. aria-pressed הוא גם הנגישות וגם
   הסימון: בלי סימון מלא אי אפשר לדעת איזה מועד ייקבע בלחיצה על "קבע" */
.chip[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent); font-weight: 700;
}

/* ================= אריחי סטטיסטיקה ================= */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 3px;
  text-align: start; cursor: default;
}
.tile .num { font-size: 24px; font-weight: 700; font-family: var(--mono); }
.tile .lbl { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
button.tile { cursor: pointer; }
button.tile:hover { border-color: var(--accent-bright); }
button.tile.sel { border-color: var(--accent-bright); background: var(--accent-soft); }
.tile.t-err .num { color: var(--remove); }
.tile.t-warn .num { color: var(--change); }
.tile.t-ok .num { color: var(--add); }
.tile.t-info .num { color: var(--info); }
.tile.t-zero { opacity: .55; }
.tile.t-zero .num { color: var(--add); }

/* ================= שורות דיף ================= */
.diff-summary {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 12px 16px; margin-bottom: 12px; font-size: 14px;
}
.diff-summary .big { font-size: 22px; font-weight: 700; font-family: var(--mono); }
.diff-summary .warn { color: var(--change); font-weight: 600; }
.diff-summary .err { color: var(--remove); font-weight: 600; }

.diff-row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 10px;
}
.diff-row.blocked { border-color: var(--remove); }
.diff-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.diff-head .name { font-weight: 700; font-size: 15px; }
.diff-head .ids { color: var(--muted); font-size: 12px; }
.diff-fields { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; align-items: center; font-size: 14px; }
.diff-fields .label { color: var(--muted); font-size: 13px; }
.val-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.val-old { color: var(--muted); }
.val-arrow { color: var(--muted); }
.val-new { font-weight: 700; padding: 2px 10px; border-radius: var(--r-ctl); }
.val-new.add { background: var(--add-soft); color: var(--add); }
.val-new.change { background: var(--change-soft); color: var(--change); }
.val-new.remove { background: var(--remove-soft); color: var(--remove); }
.val-delta { font-size: 12px; font-weight: 600; font-family: var(--mono); }
.val-delta.pos { color: var(--add); }
.val-delta.neg { color: var(--change); }
.val-same { color: var(--muted); font-size: 13px; }
.diff-notes { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.note { font-size: 13px; color: var(--muted); display: flex; gap: 7px; align-items: baseline; }
.note.warn { color: var(--change); }
.note.err { color: var(--remove); }

/* שערי אישור */
.gate-box {
  border: 1px solid var(--change); background: var(--change-soft);
  border-radius: var(--r-card); padding: 14px 16px; margin: 14px 0;
}
.gate-box .card-h .ic { color: var(--change); }
.gate-box label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 8px; cursor: pointer; }
.gate-box input[type=checkbox] { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--change); }
.gate-box input[type=text] { min-height: 34px; padding: 4px 10px; }

/* לוג התקדמות */
.joblog {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 12px 16px; max-height: 340px; overflow-y: auto; font-size: 13px;
  font-family: var(--mono); direction: ltr; text-align: left;
}
.joblog .err { color: var(--remove); }
.joblog .warn { color: var(--change); }
.progressbar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.progressbar > div { height: 100%; background: var(--accent-bright); transition: width .3s; }

.vocab-warn {
  border: 1px solid var(--change); background: var(--change-soft); color: var(--change);
  border-radius: var(--r-ctl); padding: 8px 12px; font-size: 13px; margin-top: 6px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* ================= ריק / שלד ================= */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 20px; text-align: center; color: var(--muted);
}
.empty .ic { width: 34px; height: 34px; color: var(--line-strong); }
.empty .t { font-weight: 700; font-size: 15px; color: var(--text); }
.empty p { font-size: 13.5px; max-width: 420px; margin: 0; }

.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 6px; min-height: 14px; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ================= טוסט + מודאל ================= */
#toast-root { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }

/* חזרה לראש העמוד. מסך הפניות הוא 78 שורות, והדרך היחידה חזרה
   לחיפוש ולמסננים שבראשו הייתה גלילה ידנית של כל הרשימה.
   שמאל, ולא ימין: בעברית הצד הימני תפוס — שם התפריט וההתראות, והכפתור
   נחת עליהם. ‎left‎ פיזי ולא ‎inset-inline-end‎ בכוונה: זה הכפתור היחיד
   במערכת שחייב לשבת באותו מקום בכל דפדפן של טלפון, ומאפיין לוגי הוא
   עוד דבר שדפדפן יכול לפרש אחרת. 12/9/2026: זה הכפתור היחיד — לוח
   הבקרה והספרים ציירו כל אחד כפתור משלו באותה פינה, ובנייד ראו שניים
   אחד על השני עם אימוג'י במקום חץ. ‎safe-area‎: באייפון בלי זה הכפתור
   יושב על פס הבית */
#to-top {
  position: fixed; z-index: 95;
  left: 16px; right: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); box-shadow: 0 3px 12px #0003;
  display: flex; align-items: center; justify-content: center;
}
#to-top svg { width: 22px; height: 22px; display: block; }
#to-top:hover { border-color: var(--accent-bright); color: var(--accent); }
.toast {
  background: var(--text); color: var(--bg); padding: 10px 16px;
  border-radius: var(--r-card); font-size: 14px; max-width: 440px;
  display: flex; gap: 10px; align-items: center;
}
.toast.err { background: var(--remove); color: #fff; }
.toast.ok { background: var(--add); color: #fff; }
.toast button { background: none; border: none; color: inherit; cursor: pointer; opacity: .7; padding: 0; display: flex; }
.toast button:hover { opacity: 1; }

#modal-root:not(:empty) {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 13, 18, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-card); padding: 20px; width: 100%; max-width: 460px;
  /* מודאל ארוך — השוואת מסמכים כפולים, רשימת נמענים — גלש מחוץ
     למסך והכפתורים שבתחתיתו לא היו נגישים בכלל */
  max-height: calc(100dvh - 32px); overflow-y: auto;
}
.modal h3 { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.modal p { font-size: 14px; color: var(--muted); margin-bottom: 8px; line-height: 1.55; }
.modal input[type=text] { width: 100%; margin-top: 6px; }
.modal .actions { justify-content: flex-end; margin-top: 18px; }

/* ================= מסך מלאי ================= */
td.qty-cell .noqty { color: var(--muted); font-size: 12px; }
.qty-wrap { display: flex; align-items: center; gap: 8px; }
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 0; font-size: 14px; }
.radio-row label { display: flex; gap: 7px; align-items: center; cursor: pointer; }
.radio-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.autoflag { font-size: 11px; color: var(--info); font-weight: 600; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar .spacer { flex: 1; }
.summary-inline { font-size: 13px; color: var(--muted); display: flex; gap: 14px; }

/* מסך מוצר: לוח תמונות */
.media-tile { position: relative; cursor: grab; }
.media-tile img { width: 92px; height: 92px; }
.media-tile .ovl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(10, 13, 18, .55); border-radius: 7px; opacity: 0; transition: opacity .12s;
}
.media-tile:hover .ovl { opacity: 1; }
.media-tile .ovl button {
  background: #fff; color: var(--text); border: none; border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.media-tile .ovl button:hover { background: var(--accent-soft); color: var(--accent); }
.media-tile .ovl button.rm:hover { background: var(--remove-soft); color: var(--remove); }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; font-size: 14px; }
.info-grid .k { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.info-grid .v { font-weight: 600; }
.info-grid .v.big { font-size: 20px; font-weight: 700; }

/* ================= מובייל ================= */
/* ================= טלפון: תפריט נפתח ================= */
/* סרגל עליון + מגירה, כמו באתר. הרצועה האופקית שהייתה כאן דחסה
   שבעה-עשר אייקונים בלי מילים לשורה אחת שנגללת — אי אפשר היה לדעת
   מה כל אייקון, ומה שנדחף החוצה פשוט לא היה קיים */
#topbar { display: none; }
#drawer-scrim { display: none; }

@media (max-width: 860px) {
  body { flex-direction: column; }
  #topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 50;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    background: var(--surface); border-bottom: 1px solid var(--line);
    font-weight: 700; font-size: 16px;
  }
  #menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; padding: 9px; flex: none;
    background: none; border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl); cursor: pointer;
  }
  #menu-btn span {
    display: block; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .18s, opacity .18s;
  }
  body[data-drawer="open"] #menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body[data-drawer="open"] #menu-btn span:nth-child(2) { opacity: 0; }
  body[data-drawer="open"] #menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  #drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: #0007; opacity: 0; pointer-events: none;
    transition: opacity .18s;
  }
  body[data-drawer="open"] #drawer-scrim { opacity: 1; pointer-events: auto; }

  #sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 70;
    width: min(84vw, 300px); height: 100dvh; max-height: 100dvh;
    flex-direction: column; overflow-y: auto;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
    border-inline-end: none; border-inline-start: 1px solid var(--line);
    box-shadow: -8px 0 28px #0004;
    transform: translateX(100%); transition: transform .2s ease;
  }
  body[data-drawer="open"] #sidebar { transform: none; }
  /* המסך שמאחורי המגירה לא נגלל: גלילה שם בזמן שהתפריט פתוח נראית
     כאילו התפריט "מדלג" על התוכן */
  body[data-drawer="open"] { overflow: hidden; }
  .brand { padding: 0 4px 12px; }
  .brand-name { display: inline; }
  /* המילים חוזרות: במגירה יש מקום, וזה כל העניין */
  #nav { flex-direction: column; }
  #nav button { padding: 12px 12px; min-height: 46px; font-size: 15px; }
  #nav button .navlbl { display: inline; }
  .btn, select, input[type="search"], input[type="text"] { min-height: 40px; }
  table.grid { font-size: 13px; }
  .side-foot { margin-top: auto; flex-direction: column; }
  main { padding: 14px 12px 70px; }
  /* 7/9/2026: הדף כולו נגלל הצידה בטלפון. כתובת מוצר ארוכה בלוח הבקרה
     (409px ברוחב 393) ושבבי מוצרים במסך ההזדמנויות (nowrap, 1,365px)
     מתחו את המסמך לרוחב של פי שלושה מהמסך, והפס העליון כיסה רק את
     הקצה הימני שלו. שלוש שכבות: מילה שלא נכנסת נשברת; שבב נשבר לשתי
     שורות במקום להימתח; ומה שבכל זאת גולש נחתך בעמודת התוכן ולא מרחיב
     את הדף. clip ולא hidden: hidden הופך את העמודה למכולת גלילה, ותפריט
     נפתח שבתוכה היה נגלל בתוכה במקום לצוף; hidden נשאר רק כגיבוי
     לדפדפן ישן שלא מכיר clip */
  #main-col { overflow-x: hidden; overflow-x: clip; }
  /* break-word ולא anywhere: anywhere משנה את רוחב-המינימום של כל טקסט
     לתו אחד, ופריט flex שנלחץ בשורה צפופה קרס לעמודה של אות בשורה */
  main { overflow-wrap: break-word; }
  .chip { white-space: normal; max-width: 100%; }
  .pill { white-space: normal; }
  /* קישור שהטקסט שלו הוא כתובת: רק לו מותר להישבר בכל מקום */
  a.link { overflow-wrap: anywhere; }
  /* תמיכה מרחוק: 1fr לבדו הוא minmax(auto, 1fr), וכרטיס עם תיבת קוד
     רחבה נשאר 421px ברוחב 393 ומשך את הדף הצידה. #main-col מפני
     שהכלל של המסך עצמו יושב בהמשך הקובץ */
  #main-col .rs-lobby { grid-template-columns: minmax(0, 1fr); }
  #main-col .rs-code { min-width: 0; }
  /* רשת לוח הבקרה נולדה עם עמודה של 430px לפחות, ובטלפון של 360
     הכרטיסים נחתכו בשמאלם; span 2 בפריסה של עמודה אחת פותח עמודה
     שנייה ברוחב אפס */
  /* עם #main-col: הכלל המקורי של הרשת יושב בהמשך הקובץ ובאותו משקל,
     ובלי זה הוא היה גובר על הכלל הזה */
  #main-col .dash-grid { grid-template-columns: minmax(0, 1fr); }
  #main-col .dash-grid > .span-wide { grid-column: auto; }
  /* --- הלוח כרשימת אריחים ---
     סגור: כותרת ושורת הסיכום בלבד, ולחיצה עליו פותחת. פתוח: הריבוע
     לבדו על המסך, גולל עם הדף (גלילה בתוך תיבה היא מלכודת באצבע),
     והכותרת נדבקת מתחת לפס העליון כדי שכפתור החזרה תמיד בהישג יד */
  #main-col .dash-grid:not(.focused) .dash-body { display: none; }
  #main-col .dash-grid:not(.focused) .card-h select,
  #main-col .dash-grid:not(.focused) .card-h input,
  #main-col .dash-grid:not(.focused) .dash-foot input,
  #main-col .dash-grid:not(.focused) .dash-foot .btn { display: none; }
  #main-col .dash-grid:not(.focused) .dash-card > .card-h {
    cursor: pointer; -webkit-tap-highlight-color: var(--accent-soft);
  }
  #main-col .dash-grid:not(.focused) .dash-card > .card-h::after {
    content: "›"; color: var(--muted); font-size: 20px; line-height: 1;
    margin-inline-start: 2px;
  }
  #main-col .dash-grid.focused > .dash-card:not(.open) { display: none; }
  #main-col .dash-card.open .dash-body {
    max-height: none; overflow: visible;
  }
  #main-col .dash-card.open > .card-h {
    position: sticky; top: var(--dash-head-top, 0px); z-index: 8;
  }
  #main-col .dash-card.open .dash-back { display: inline-flex; }
  /* ריבוע פתוח בטלפון גולל עם הדף, ולכן שורת ההוספה שבתחתיתו יושבת
     אחרי כל הרשימה: בכרטיס התזכורות זה היה 66 שורות של גלילה עד
     "מה להזכיר?". רצועה שיש בה פעולה עולה מעל הגוף; רצועה שהיא רק
     שורת סיכום נשארת במקומה */
  #main-col .dash-card.open .dash-foot:has(input, select, .btn) {
    order: -1; border-top: 0; border-bottom: 1px solid var(--line);
  }
  #main-col .dash-card.open .rem-add input,
  #main-col .dash-card.open .rem-add select,
  #main-col .dash-card.open .rem-add .btn {
    min-height: 38px; font-size: 14px;
  }
  #main-col .dash-card.open .rem-add #rem-party { flex: 1 1 100%; }
  #main-col .dash-zoom { display: none; }
  /* הריבוע הפתוח תופס את המסך: הכותרת, החיפוש, האריחים והשבבים
     יורדים, וכפתור החזרה הוא שמחזיר אותם */
  #screen-root.dash-focused .screen-head,
  #screen-root.dash-focused .scan-wrap,
  #screen-root.dash-focused .dash-tiles,
  #screen-root.dash-focused .dash-sect,
  #screen-root.dash-focused .dash-state,
  #screen-root.dash-focused .dash-syncs { display: none; }
  /* בטלפון אריח לרוחב מלא מבזבז את המסך על מספר אחד; שניים בשורה */
  #main-col .dash-tiles > .tile-hot { min-width: 0; flex: 1 1 calc(50% - 6px); }
  /* פאנל שנפתח עם "הצג הכל" גולל בתוך עצמו בדסקטופ כדי לא למתוח את
     הדף (ראו panel() ב-customer_detail.js) -- בנייד גלילה מקוננת היא
     מלכודת: האצבע נתקעת בתוך התיבה במקום לגלול את הדף. עדיף דף ארוך */
  [data-more] { max-height: none !important; overflow-y: visible !important; }
  /* בורר סינון (‎.btn-group‎) הוא inline-flex ולכן לא נשבר לשתי שורות:
     "הכל / כרטסת לבקש / יתרה פתוחה / RMA פתוח" במסך הספקים יצא 396px
     ברוחב 373, ו-‎#main-col‎ חתך את הכפתור האחרון — הוא לא היה קיים.
     גלילה אופקית ולא flex-wrap: העיגול המשותף של הקצוות נשבר בשורה
     שנייה, והכפתורים צריכים להישאר ברוחבם ולא להידחס לאות */
  #main-col .btn-group {
    display: flex; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #main-col .btn-group::-webkit-scrollbar { display: none; }
  #main-col .btn-group > .btn { flex: none; }
  .diff-fields { grid-template-columns: 100px 1fr; }
  table.grid { font-size: 13px; }
  table.grid td, table.grid th { padding: 7px 6px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* ---- עורך תוכן (editor.js) ---- */
.ed {
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  overflow: hidden; background: var(--surface);
}
.ed:focus-within { border-color: var(--accent); }
.ed-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 5px 6px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.ed-toolbar button {
  border: none; background: none; color: var(--text); cursor: pointer;
  min-width: 30px; height: 28px; padding: 0 7px; border-radius: 6px;
  font: inherit; font-size: 13px; display: inline-flex; align-items: center;
  justify-content: center; gap: 4px;
}
.ed-toolbar button:hover { background: var(--surface); }
.ed-toolbar button.active { background: var(--accent-soft); color: var(--accent); }
.ed-toolbar button:disabled { opacity: .35; cursor: default; background: none; }
.ed-toolbar .ic svg { width: 15px; height: 15px; display: block; }
.tsep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; flex: none; }
.ed-mode {
  margin-inline-start: auto; display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; background: var(--surface);
}
.ed-mode button { border-radius: 0; height: 26px; font-size: 12px; }
.ed-mode button.active { background: var(--accent); color: #fff; }

.wysiwyg {
  padding: 12px 14px; outline: none; overflow: auto; max-height: 540px;
  font-size: 14.5px; line-height: 1.65;
}
.wysiwyg:empty::before, .wysiwyg > br:only-child + *::before {
  content: attr(data-placeholder); color: var(--muted);
}
.wysiwyg p { margin: 0 0 10px; }
.wysiwyg h2 { font-size: 19px; margin: 14px 0 8px; }
.wysiwyg h3 { font-size: 16px; margin: 12px 0 6px; }
.wysiwyg ul, .wysiwyg ol { margin: 0 0 10px; padding-inline-start: 22px; }
.wysiwyg a { color: var(--accent); }
.wysiwyg table {
  border-collapse: collapse; width: 100%; font-size: 13.5px; margin: 10px 0;
}
.wysiwyg th, .wysiwyg td {
  border: 1px solid var(--line-strong); padding: 7px 10px; text-align: right;
  min-width: 40px;
}
.wysiwyg thead th { background: var(--surface-2); font-weight: 700; }
.wysiwyg tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }

.htmlbox {
  display: block; width: 100%; border: none; outline: none; resize: vertical;
  padding: 12px 14px; background: var(--surface); color: var(--text);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  direction: ltr; text-align: left; max-height: 540px;
}

.ed-label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--muted); margin: 14px 0 6px;
}
.ed-label .flag { font-weight: 400; font-size: 12px; }
.dirty-chip {
  font-size: 11.5px; font-weight: 700; color: var(--change, #B36B00);
  background: var(--change-soft, #FFF3E0); border-radius: 999px; padding: 2px 10px;
}

.content-diff { margin-top: 14px; border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.cd-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; font-size: 13.5px; }
.cd-row .f { font-weight: 700; min-width: 90px; }
.cd-row .delta { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---- כרטיס עלות ורווחיות ---- */
.cost-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.cost-stat {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 10px 12px;
}
.cost-stat.danger { border-color: var(--remove); background: var(--remove-soft); }
.cost-stat .k { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.cost-stat .v { font-size: 21px; font-weight: 700; line-height: 1.15; }
.cost-stat .v.pos { color: var(--add); }
.cost-stat .v.neg { color: var(--remove); }
.cost-stat .s { color: var(--muted); font-size: 11.5px; margin-top: 3px; }

.cost-input-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-input-row input {
  width: 160px; font-size: 18px; font-weight: 700; text-align: start;
  padding: 8px 12px; letter-spacing: .5px;
}
.cost-input-row .unit { font-size: 16px; color: var(--muted); margin-inline-start: -4px; }

.cost-live { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.cost-live-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.cost-live-row .lbl { color: var(--muted); font-size: 12.5px; min-width: 120px; }
.cost-live-row .val { font-weight: 700; font-size: 16px; }
.cost-live-row .val.pos { color: var(--add); }
.cost-live-row .val.neg { color: var(--remove); }
.cost-live-row .was { color: var(--muted); font-weight: 400; font-size: 13px; text-decoration: line-through; }
.cost-live-row .muted { font-size: 12px; }

.cost-flag {
  display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5;
  border-radius: var(--r-ctl); padding: 8px 11px; margin-top: 8px;
}
.cost-flag.err { background: var(--remove-soft); color: var(--remove); }
.cost-flag.warn { background: var(--change-soft); color: var(--change); }
.cost-flag .ic { flex: none; margin-top: 1px; }

tr.imp-cheapest td { background: var(--add-soft); }
tr.imp-cheapest td:first-child { font-weight: 700; }

/* ---- מסגרת התצוגה המקדימה ---- */
.pv-bar {
  display: flex; align-items: center; gap: 4px; padding: 6px 12px;
  border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap;
}
.pv-bar .grow { flex: 1; min-width: 220px; }
.pv-bar .link { padding: 6px 10px; }
.pv-warn { padding: 4px 12px 10px; }
.pv-warn .cost-flag { margin-top: 6px; }
.pv-foot {
  padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12.5px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

/* ================= לוח בקרה: כותרות מקטע, פסים ופילוח ================= */
.section-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: 700; font-size: 15px; margin: 20px 0 10px;
}
.section-h:first-child { margin-top: 0; }
.section-h .ic { color: var(--accent); }
.section-h .spacer { flex: 1; }
.section-h .note { font-weight: 400; font-size: 12px; color: var(--muted); }

/* פס יחס: תווית | מסילה | ערך. המסילה תמיד מציגה את המכנה, אף פעם לא רק אחוז. */
.barrow {
  display: grid; grid-template-columns: minmax(110px, 1.2fr) 3fr minmax(112px, auto);
  gap: 12px; align-items: center; padding: 5px 0; font-size: 13px;
}
.barrow + .barrow { border-top: 1px solid var(--line); }
.bartrack { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barfill { display: block; height: 100%; border-radius: 999px; background: var(--accent); min-width: 2px; }
.barfill.ok { background: var(--add); }
.barfill.warn { background: var(--change); }
.barfill.err { background: var(--remove); }
.barfill.info { background: var(--info); }
.barval { color: var(--muted); font-size: 12px; white-space: nowrap; font-family: var(--mono); }
.barrow.clickable { cursor: pointer; }
.barrow.clickable:hover .barlbl { color: var(--accent); text-decoration: underline; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }

.info-grid .sub { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.info-grid .v.neg { color: var(--remove); }
.info-grid .v.pos { color: var(--add); }

.caveat {
  display: flex; gap: 7px; align-items: flex-start; margin: 12px 0 0;
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.caveat .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* ===== מסך קידום (SEO/GEO) ================================================ */

/* לשוניות משנה — אין רכיב כזה בשאר המסכים; הבסיס הוא .btn-group אבל כאן
   הלשונית פעילה מסומנת בקו תחתון במקום ברקע, כדי לא להתחרות בכפתור הראשי */
.subtabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.subtabs button {
  background: none; border: 0; padding: 10px 14px; cursor: pointer;
  color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: var(--r-ctl) var(--r-ctl) 0 0;
  display: inline-flex; align-items: center; gap: 7px;
}
.subtabs button:hover { color: var(--text); background: var(--surface-2); }
.subtabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.subtabs .tabcount {
  font-size: .75rem; background: var(--surface-2); color: var(--muted);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.subtabs button.active .tabcount { background: var(--accent-soft); color: var(--accent); }

/* ===== כרטיס לקוח: לשוניות הכרטיסים וסדר לפי פעילות ==================== */
/* כרטיס לקוח הוא כמעט שלושים כרטיסים. הלשוניות מצמצמות לתחום אחד,
   והסדר (order על פריטי הרשת) מעלה את מה שקרה לאחרונה. כרטיס בלי
   פעילות אינו נעלם — הוא יורד מתחת לקו ומועם, כי "לא נמכר לו רישיון"
   הוא תשובה, לא רעש */
.cd-tabs { margin-bottom: 14px; }
@media (min-width: 861px) {
  .cd-tabs {
    position: sticky; top: 0; z-index: 6;
    background: var(--bg); padding-top: 8px;
  }
}
.cd-off { display: none !important; }
.cd-quiet { opacity: .55; transition: opacity .15s; }
.cd-quiet:hover, .cd-quiet:focus-within { opacity: 1; }
.cd-sep {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 12px; margin: 2px 0 0;
}
.cd-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* גרירת כרטיסים — אותה שפה של ריבועי לוח הבקרה, אבל בלי ידית שמוזרקת
   ל-DOM: הכותרת עצמה היא משטח הגרירה, והסימן הוא ::before. כרטיס
   שמחליף את כל תוכנו כשהוא חוזר מהשרת מחק ידית אמיתית, וזה לא. */
.cd-grid > [data-card] > .card-h { cursor: grab; }
.cd-grid > [data-card] > .card-h::before {
  content: "⠿"; color: var(--muted); font-size: 15px; line-height: 1;
  flex: none; margin-inline-end: 2px; opacity: 0; transition: opacity .15s;
}
.cd-grid > [data-card]:hover > .card-h::before { opacity: 1; }
/* הגרירה עצמה ב-pointer events, ולכן הדפדפן לא צריך לגלול את הדף
   כשמתחילים אותה באצבע על הכותרת */
.cd-grid > [data-card] > .card-h { touch-action: pan-y; }
.cd-dragging {
  opacity: .75; outline: 2px dashed var(--accent-bright); cursor: grabbing;
}
/* בזמן גרירה: הנפשה קצרה כדי שיראו לאן הכרטיסים הולכים, ובחירת טקסט
   מכובה — גרירה מעל טבלה סימנה את כל השורות */
.cd-reordering { user-select: none; }
.cd-reordering > [data-cg] { transition: transform .12s ease; }
.cd-reordering > [data-cg]:not(.cd-dragging) { pointer-events: none; }
/* באצבע אין ריחוף: הסימן תמיד נראה במסך צר */
@media (hover: none) {
  .cd-grid > [data-card] > .card-h::before { opacity: .6; }
}

/* תצוגת SERP — מחקה את התוצאה בגוגל, כולל כיווניות. הכותרת מוצגת בגודל
   ובצבע של גוגל בכוונה: זו הנקודה היחידה במסך שבה "איך זה ייראה" חשוב
   יותר מ"מה השדה מכיל". */
.serp {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 18px; max-width: 640px;
}
.serp + .serp { margin-top: 12px; }
.serp.mobile { max-width: 420px; }
.serp .serp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.serp .serp-head .lbl { font-size: .78rem; color: var(--muted); font-weight: 600; }
.serp-site { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.serp-favicon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .7rem; color: var(--muted); flex: none;
}
.serp-org { font-size: .82rem; line-height: 1.2; }
.serp-url { font-size: .75rem; color: var(--muted); direction: ltr; text-align: start; }
.serp-title {
  color: #1a0dab; font-size: 1.25rem; line-height: 1.3; margin: 2px 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-theme="dark"] .serp-title { color: #8ab4f8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .serp-title { color: #8ab4f8; }
}
.serp-desc {
  font-size: .875rem; line-height: 1.58; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.serp-cut { color: var(--remove); }

/* מד רוחב — נמדד ב-canvas מול הפונט האמיתי, לא בספירת תווים */
.meter { margin-top: 8px; }
.meter-track {
  height: 6px; background: var(--surface-2); border-radius: 3px;
  overflow: hidden; border: 1px solid var(--line);
}
.meter-fill { height: 100%; background: var(--add); transition: width .12s; }
.meter-fill.warn { background: var(--change); }
.meter-fill.over { background: var(--remove); }
.meter-lbl {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .74rem; color: var(--muted); margin-top: 4px;
}
.meter-lbl .mono { font-size: .74rem; }

/* תג מקור: מותאם / אוטומטי / דריסה */
.src-pill {
  font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.src-pill.custom { background: var(--add-soft); color: var(--add); border-color: transparent; }
.src-pill.override { background: var(--info-soft); color: var(--info); border-color: transparent; }
.src-pill.generated { background: var(--surface-2); }
.src-pill.boiler { background: var(--remove-soft); color: var(--remove); border-color: transparent; }

/* רשימת עמודים */
.seo-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px 14px;
  align-items: center; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); margin-bottom: 7px; background: var(--surface);
}
.seo-row:hover { border-color: var(--line-strong); }
.seo-row .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-row .dsc { grid-column: 1 / -1; font-size: .8rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-row .flags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* בדיקת מוכנות לתשובה */
.checks { display: grid; gap: 7px; }
.check {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px;
  align-items: start; padding: 9px 11px; border-radius: var(--r-ctl);
  background: var(--surface-2);
}
.check.ok { background: var(--add-soft); }
.check .mark { font-weight: 700; }
.check.ok .mark { color: var(--add); }
.check:not(.ok) .mark { color: var(--muted); }
.check .t { font-weight: 600; }
.check .h { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.check .d { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* מטריצת סורקי AI */
.crawler {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px;
  align-items: start; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); margin-bottom: 8px;
}
.crawler .agent { font-family: var(--mono); font-size: .85rem; font-weight: 600; }
.crawler .impact { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.crawler .state { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.crawler.blocked { border-color: var(--remove); background: var(--remove-soft); }
.crawler.blocked .state { color: var(--remove); }
.crawler.allowed .state { color: var(--add); }

/* טופס הגדרות */
.setrow {
  display: grid; grid-template-columns: 260px 1fr; gap: 12px 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.setrow:last-child { border-bottom: 0; }
.setrow .lbl { font-weight: 600; }
.setrow .help { font-size: .78rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.setrow input[type=text], .setrow input[type=number], .setrow textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); background: var(--surface);
}
.setrow textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.setrow .dirty-mark { color: var(--change); font-weight: 700; }
.setrow .preview {
  font-size: .8rem; color: var(--muted); margin-top: 6px;
  padding: 7px 9px; background: var(--surface-2); border-radius: var(--r-ctl);
  border-inline-start: 3px solid var(--accent);
}
@media (max-width: 820px) { .setrow { grid-template-columns: 1fr; } }

/* אזהרת bidi */
.bidi-warn {
  margin-top: 8px; padding: 9px 11px; border-radius: var(--r-ctl);
  background: var(--change-soft); border-inline-start: 3px solid var(--change);
  font-size: .8rem; line-height: 1.55;
}
.bidi-visual {
  font-family: var(--mono); font-size: .78rem; direction: ltr; text-align: left;
  margin-top: 5px; padding: 6px 8px; background: var(--surface); border-radius: 5px;
  overflow-x: auto; white-space: nowrap;
}

/* ===== סטטוס פרסום + חיפוש תמונה ========================================== */

/* בורר הסטטוס: ארבע אפשרויות זו לצד זו, הנוכחית מסומנת. לא תפריט נפתח — מצב
   הפרסום הוא הדבר שהכי חשוב לראות בלי ללחוץ. */
.statusbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.statusbar button {
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--muted); border-radius: var(--r-ctl); padding: 7px 13px;
  cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.statusbar button:hover:not(.cur) { border-color: var(--accent); color: var(--text); }
.statusbar button.cur { cursor: default; }
.statusbar button.cur[data-s="publish"] { background: var(--add-soft); color: var(--add); border-color: transparent; }
.statusbar button.cur[data-s="draft"]   { background: var(--change-soft); color: var(--change); border-color: transparent; }
.statusbar button.cur[data-s="pending"] { background: var(--info-soft); color: var(--info); border-color: transparent; }
.statusbar button.cur[data-s="private"] { background: var(--surface-2); color: var(--text); border-color: transparent; }
.statusbar button:disabled { opacity: .55; cursor: not-allowed; }

.status-note { font-size: .78rem; color: var(--muted); margin-top: 7px; line-height: 1.5; }

/* רשימת בקרת האיכות שלפני פרסום */
.readycheck { display: grid; gap: 5px; margin-top: 10px; }
.readycheck .rc {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 9px;
  align-items: baseline; font-size: .82rem; padding: 5px 8px;
  border-radius: 5px; background: var(--surface-2);
}
.readycheck .rc.ok { background: transparent; color: var(--muted); }
.readycheck .rc.err { background: var(--remove-soft); }
.readycheck .rc.warn { background: var(--change-soft); }
.readycheck .rc .m { font-weight: 700; }
.readycheck .rc.ok .m { color: var(--add); }
.readycheck .rc.err .m { color: var(--remove); }
.readycheck .rc.warn .m { color: var(--change); }
.readycheck .rc .d { color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* חיפוש תמונה בגוגל */
.imgsearch { display: flex; gap: 6px; margin-top: 2px; }
.imgsearch input {
  flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); background: var(--surface); font-size: .85rem;
}

/* מק"ט להעתקה בלחיצה — שם המוצר הוא משפט שלם וגם קישור, וסימון
   "7FMXV" מתוכו בעכבר כמעט בלתי אפשרי */
.copyrow { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.copychip {
  font-family: var(--mono, ui-monospace, monospace);
  /* משקל קבוע — בכרטיס לקוח הצ'יפ יושב בתוך שורת פריט מודגשת */
  font-size: 11.5px; font-weight: 400; line-height: 1;
  padding: 3px 6px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--muted);
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.copychip:hover { border-color: var(--accent); color: var(--accent); }
.copychip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.copychip.sku { color: var(--text); font-weight: 600; }
.copychip.more { color: var(--accent); border-style: dashed; }
.copychip.copied {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.copychip::before { content: "⧉ "; opacity: .55; }
.copychip.more::before { content: ""; }

/* שדה תאריך מצייר את עצמו לפי ערכת הנושא של הדפדפן ולא של הדף.
   בלי זה, במצב "אוטומטי" על מערכת כהה, הטקסט כמעט בלתי נראה */
input[type=date], input[type=datetime-local], input[type=time] {
  color-scheme: light dark;
}
:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] input[type=datetime-local],
:root[data-theme="dark"] input[type=time] { color-scheme: dark; }
:root[data-theme="light"] input[type=date],
:root[data-theme="light"] input[type=datetime-local],
:root[data-theme="light"] input[type=time] { color-scheme: light; }

/* תאריך שהוקלד ואינו קיים — נראה מיד, לא רק בשמירה */
input.bad { border-color: var(--err, #d33) !important; background: rgba(221,51,51,.06); }

/* יעד קפיצה — שלא ייצמד לקצה העליון של החלון */
.anchor { scroll-margin-top: 70px; }

/* כרטיס סיכום שמוביל לטבלה שהוא מסכם */
.card.jump { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.card.jump:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.10); }
@keyframes flashbg { from { background: rgba(232,163,61,.30); } to { background: transparent; } }
.flash { animation: flashbg 1.2s ease-out; border-radius: 6px; }

/* כרטיס סיכום שנבחר כמסנן */
.card.picked { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.card.jump .muted::after { content: ''; }

/* מסך הסוכנים. הצבע במסגרת הימנית הוא ההיקף — במה הסוכן רשאי לגעת —
   ולא אילו כלים יש לו: לשלושת סוכני הביקורת יש Write כדי לכתוב את הדוח
   שלהם, וכרטיס שסימן אותם כ"כותבים" בגלל זה סתר את מה שכתוב בו עצמו. */
.ag-totals { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.ag-total { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 11px 15px; min-width: 132px; }
.ag-total b { display: block; font-size: 20px; }
.ag-total span { color: var(--muted); font-size: 12.5px; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 15px; }
.ag-card { padding: 16px 17px; }
.ag-card.ag-read { border-right: 3px solid var(--accent); }
.ag-card.ag-plan { border-right: 3px solid var(--line-strong); }
.ag-card.ag-live { border-right: 3px solid var(--change); }
.ag-name { font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.ag-title { color: var(--muted); font-size: 13px; margin-bottom: 9px; }
.ag-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.ag-tag { font-size: 11.5px; padding: 2.5px 8px; border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.ag-tag.model { background: var(--info-soft); color: var(--info); border-color: transparent; }
.ag-tag.ok { background: var(--add-soft); color: var(--add); border-color: transparent; }
.ag-tag.warn { background: var(--change-soft); color: var(--change); border-color: transparent; }
.ag-desc { font-size: 13.5px; line-height: 1.65; margin: 0 0 13px; }
.ag-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
  padding: 6px 0; border-top: 1px solid var(--line); }
.ag-row span { color: var(--muted); white-space: nowrap; }
.ag-row b { font-weight: 600; text-align: left; }
.ag-row b.bad { color: var(--remove); }
.ag-caps { margin: 12px 0 0; padding: 0; list-style: none; }
.ag-caps li { font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.ag-caps li::before { content: "— "; }
.ag-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.ag-def { margin-top: 12px; }
.ag-def summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.ag-card pre { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 12px; font-family: var(--mono);
  font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow: auto; text-align: right; margin: 9px 0 0; }
.ag-edit { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-strong); }
.ag-edit label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.ag-edit input[type=text], .ag-edit input[type=number], .ag-edit select,
.ag-edit textarea { display: block; width: 100%; margin-top: 4px; }
.ag-edit textarea { font-size: 13px; line-height: 1.6; resize: vertical; }
.ag-edit textarea.ag-body { font-family: var(--mono); font-size: 11.5px; }
.ag-pair { display: flex; gap: 10px; }
.ag-pair label { flex: 1; }
.ag-check { display: flex !important; align-items: center; gap: 7px; }
.ag-check input { width: auto !important; margin: 0 !important; }
.ag-note { font-size: 12px; color: var(--muted); line-height: 1.6;
  background: var(--surface-2); border-radius: var(--r-ctl); padding: 9px 11px; margin: 4px 0 12px; }
.ag-output { margin-top: 12px; }
.ag-out-head { font-size: 12px; color: var(--muted); margin-bottom: 2px; }


/* --- שדה עם תווית מעליו. חוזר בכל טופס בכרטיס העובד, והיה נכתב
   בכל שורה מחדש כ-style מוטבע עד שקיבל שם --- */
.fld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px;
       color: var(--muted); }
.fld > input, .fld > select, .fld > textarea { color: var(--text); }
.fld > textarea { resize: vertical; font-family: inherit; }

/* --- מסך הכניסה של עובד. מוצג במקום כל הממשק כשאין הרשאה, ולכן
   הוא לא נשען על שום דבר מהשלד שמסביב --- */
#login-wrap { position: fixed; inset: 0; display: flex; align-items: center;
              justify-content: center; background: var(--bg); z-index: 60;
              padding: 20px; }
#login-box { width: 100%; max-width: 340px; background: var(--surface);
             border: 1px solid var(--line); border-radius: 14px;
             padding: 24px 22px; box-shadow: 0 8px 30px rgba(0,0,0,.10); }
#login-box h2 { margin: 0 0 2px; font-size: 19px; }
#login-box .tag { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
#login-box .sub { margin: 0 0 16px; }
#login-box input { width: 100%; margin-bottom: 9px; direction: ltr;
                   text-align: left; }
#login-box button { width: 100%; justify-content: center; }
#login-err { color: var(--remove); font-size: 13px; margin: 8px 0 0;
             min-height: 18px; }

/* ---- תמיכה מרחוק (screens/remote.js) ---------------------------------
   המסך הזה הוא היחיד שמתהפך ל-LTR כשבוחרים אנגלית (dir על .rs-wrap),
   והקנבס תמיד LTR: קואורדינטות של מסך אינן מתהפכות עם השפה */
.rs-wrap { display: flex; flex-direction: column; gap: 14px; }
.rs-head { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 12px; flex-wrap: wrap; }
.rs-head h1 { display: flex; align-items: center; gap: 8px; margin: 0; }
.rs-head p { margin: 4px 0 0; }
.rs-langs { display: flex; align-items: center; gap: 6px; }
.rs-lobby { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.4fr); gap: 14px; }
.rs-code-form { display: flex; gap: 8px; }
.rs-code { flex: 1; font-family: var(--mono); font-size: 20px; letter-spacing: 2px;
           text-align: center; }
.rs-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rs-waiting h3, .rs-history h3 { margin: 0 0 10px; }
.rs-waiting-list { display: flex; flex-direction: column; gap: 8px; }
.rs-agent { display: flex; justify-content: space-between; align-items: center; gap: 10px;
            padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl);
            background: var(--surface-2); flex-wrap: wrap; }
.rs-agent.busy { opacity: .7; }
.rs-agent-main, .rs-agent-side { display: flex; flex-direction: column; gap: 3px; }
.rs-agent-side { align-items: flex-end; }
.rs-agent code { font-family: var(--mono); font-size: 18px; letter-spacing: 1px; }
.rs-session { display: flex; flex-direction: column; gap: 8px; }
.rs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
              padding: 8px 10px; background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--r-card); }
.rs-status { font-weight: 600; padding: 4px 10px; border-radius: 999px;
             background: var(--surface-2); }
.rs-status.ok { background: var(--add-soft); color: var(--add); }
.rs-status.bad { background: var(--remove-soft); color: var(--remove); }
.rs-monitors { display: flex; gap: 4px; flex-wrap: wrap; }
.rs-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.rs-custlang { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.rs-stats { font-family: var(--mono); font-size: 12px; margin-inline-start: auto; }
.rs-stage { position: relative; background: #000; border-radius: var(--r-card);
            overflow: hidden; min-height: 200px; }
.rs-stage:fullscreen { border-radius: 0; display: flex; align-items: center; justify-content: center; }
.rs-canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 220px);
             object-fit: contain; outline: none; cursor: default; }  /* חץ רגיל — הצלב בלבל */
.rs-stage:fullscreen .rs-canvas { max-height: 100vh; width: auto; max-width: 100vw; }
.rs-canvas:focus { box-shadow: inset 0 0 0 2px var(--accent-bright); }
.rs-chat { position: absolute; bottom: 10px; inset-inline-end: 10px; width: 300px;
           background: var(--surface); border: 1px solid var(--line-strong);
           border-radius: var(--r-card); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rs-chat-log { max-height: 180px; overflow-y: auto; font-size: 13px; display: flex;
               flex-direction: column; gap: 4px; }
.rs-msg.me { color: var(--accent); }
.rs-chat-form { display: flex; gap: 6px; }
.rs-chat-form input { flex: 1; }
.rs-hint { margin: 0; font-size: 12.5px; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rs-table th { text-align: start; color: var(--muted); font-weight: 600; padding: 6px 8px;
               border-bottom: 1px solid var(--line-strong); }
.rs-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
@media (max-width: 760px) {
  .rs-lobby { grid-template-columns: 1fr; }
  .rs-canvas { max-height: 60vh; }
}

/* שליחת קישור ללקוח (screens/remote.js) */
.rs-share-hint { margin: 0 0 10px; }
.rs-share-pick { position: relative; max-width: 460px; }
.rs-cust-search { width: 100%; }
.rs-cust-results { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 4px);
                   background: var(--surface); border: 1px solid var(--line-strong);
                   border-radius: var(--r-ctl); box-shadow: 0 8px 24px rgba(0,0,0,.12);
                   max-height: 320px; overflow-y: auto; }
.rs-cust-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
               width: 100%; text-align: start; background: none; border: none;
               border-bottom: 1px solid var(--line); padding: 9px 12px; cursor: pointer;
               font: inherit; color: var(--text); }
.rs-cust-row:hover { background: var(--surface-2); }
.rs-cust-row .muted { font-size: 12.5px; }
.rs-cust-none { padding: 10px 12px; color: var(--muted); }
.rs-share-targets { margin-top: 14px; }
.rs-share-head { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px; margin-bottom: 8px; }
.rs-share-group { margin-top: 10px; }
.rs-share-label { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 5px; }
.rs-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-share-btns .btn { align-items: center; }
.rs-share-btns .muted { font-size: 11.5px; }

/* שליחה ידנית (screens/remote.js) */
.rs-manual { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.rs-manual-row { display: flex; gap: 8px; margin-top: 8px; max-width: 460px; }
.rs-manual-row input { flex: 1; }
.rs-manual-row .btn { white-space: nowrap; }

/* מונה זמן + חיוב בתמיכה מרחוק (screens/remote.js) */
.rs-timer { font-family: var(--mono); font-size: 14px; font-weight: 600;
            padding: 3px 8px; border-radius: 6px; background: var(--surface-2); }
.rs-status.ok ~ .rs-timer { color: var(--add); }
.rs-table-scroll { overflow-x: auto; }
.rs-hist-bill { white-space: nowrap; }
.rs-bill-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.rs-amount { width: 72px; margin-inline-start: 6px; }
.rs-assign { position: relative; }
.rs-assign-in { width: 160px; }
.rs-assign-results { position: absolute; z-index: 25; inset-inline-start: 0; top: calc(100% + 2px);
                     min-width: 220px; background: var(--surface); border: 1px solid var(--line-strong);
                     border-radius: var(--r-ctl); box-shadow: 0 8px 24px rgba(0,0,0,.14);
                     max-height: 260px; overflow-y: auto; }
.rs-note-text { font-size: 13px; }

/* סיכום ומחיקה בהיסטוריית התמיכה מרחוק */
.rs-hist-note { min-width: 220px; }
.rs-note-actions { display: inline-flex; gap: 4px; float: inline-end; margin-inline-start: 6px; }
.rs-note-text { white-space: pre-wrap; font-size: 13px; }
.rs-sum-edit { display: flex; flex-direction: column; gap: 6px; }
.rs-sum-ta { width: 100%; min-width: 220px; resize: vertical; font: inherit; }
.rs-sum-btns { display: flex; gap: 6px; }

/* שורת עריכת סיכום — לרוחב כל הטבלה */
.rs-sum-row td { background: var(--surface-2); padding: 12px; }
.rs-sum-row .rs-sum-ta { width: 100%; box-sizing: border-box; resize: vertical;
                         font: inherit; min-height: 96px; }

/* ריבוי סשנים + מסך רחב בתמיכה מרחוק (screens/remote.js), 5/9/2026 */
.rs-sessions { display: flex; flex-direction: column; gap: 8px; }
.rs-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
          border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2);
          font: inherit; color: var(--text); }
.rs-tab.active { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rs-tab code { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; }
.rs-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.rs-tab-dot.ok { background: var(--add); }
.rs-tab-dot.bad { background: var(--remove); }
.rs-tab-x { margin-inline-start: 4px; padding: 0 5px; border-radius: 4px; color: var(--muted); font-size: 15px; }
.rs-tab-x:hover { background: var(--remove-soft); color: var(--remove); }
/* הקוד של הלקוח בראש הסרגל — מה שמבדיל בין סשנים פתוחים */
.rs-sess-id { display: inline-flex; align-items: center; gap: 8px; }
.rs-sess-code { font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 2px;
                padding: 2px 8px; border-radius: 6px; background: var(--accent-soft, var(--surface-2));
                color: var(--accent); }
.rs-sess-name { font-size: 12.5px; }
/* מסך רחב: התפריט, הלובי וההיסטוריה נעלמים, הקנבס על כל הדפדפן */
body.rs-wide #topbar, body.rs-wide #nav, body.rs-wide .rs-head, body.rs-wide .rs-lobby,
body.rs-wide .rs-share, body.rs-wide .rs-history, body.rs-wide .rs-hint { display: none !important; }
body.rs-wide main { max-width: none; padding: 8px 10px; }
body.rs-wide .rs-wrap { gap: 8px; }
body.rs-wide .rs-canvas { max-height: calc(100vh - 118px); }
.rs-sess-cust { display: inline-flex; align-items: center; gap: 4px; }
.rs-sess-cust .chip { text-decoration: none; }
.rs-unassigned { border-style: dashed; }
.rs-live-assign { max-width: 420px; }
/* סמן הלקוח מעל הקנבס (screens/remote.js) — הצילום לא כולל את הסמן */
.rs-cursor { position: absolute; pointer-events: none; z-index: 5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.rs-agent-btns { display: inline-flex; gap: 4px; }
/* פופאפ "לקוח ממתין לתמיכה מרחוק" (remote_watch.js) */
.toast.remote-alert { background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
                      box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: rs-pop .3s ease-out; }
.toast.remote-alert .btn { background: #fff; color: var(--accent); border: none; font-weight: 700; }
@keyframes rs-pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= לוח בקרה: רשת ריבועים =================
   הלוח היה טור אחד ארוך: התזכורות, ההודעות המתוזמנות והפעילות
   האחרונה ישבו זו מתחת לזו וכדי לראות את התחתונה היה צריך לגלול
   שלושה מסכים. הריבועים מציגים את כולן יחד, וכל ריבוע גולל בתוך
   עצמו — כך אף כרטיס ארוך לא דוחף את שכניו מהמסך.
   הרוחב: על מסך 1920 (‎1920-216 של התפריט) יש מקום לשלושה טורים,
   ותקרת ה-1160 של main חנקה אותם לטור אחד. הכלל תופס רק את הלוח */
main:has(#dash) { max-width: 1700px; }
/* אותו סיפור במסך המעבדה שלנו: תשע עמודות, ואחת מהן בורר סטטוס
   שהאפשרות הארוכה בו היא "ממתין לאיסוף המעבדה". בתוך 1160 הטבלה
   גלשה הצידה וקיבלה סרגל גלילה אופקי — בזמן שרבע מהמסך מימין
   ומשמאל עמד ריק. רוחב מלא וריפוד צר יותר בתאים, ואותן שורות
   נכנסות בלי לגלול. ‎.tablecard‎ נשאר גולל, בשביל מסך צר באמת */
main:has(#shoplab) { max-width: 1700px; }
main:has(#shoplab) table.grid td,
main:has(#shoplab) table.grid th {
  padding-left: 8px; padding-right: 8px;
}
/* כותרת מפרידה בין שתי שורות האריחים. השבבים של הסנכרון נכנסים
   לתוך שורת "מצב" — הם בדיוק זה, ולא היה להם מה לעשות בשורה משלהם */
.dash-sect {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  flex-wrap: wrap;
}
.dash-sect > b {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .03em; flex: none;
}
.dash-sect > i { flex: 1 1 40px; height: 1px; background: var(--line); }
.dash-tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* flex: 0 1 auto + min-width: 0 — בטלפון ארבעת השבבים רחבים מהמסך,
   ובלי הרשות להתכווץ השבב האחרון נחתך מחוץ לקצה במקום לרדת שורה */
.dash-syncs {
  display: flex; gap: 8px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0;
  justify-content: flex-end;
}

/* אריח "דורש טיפול": המספר הוא הדבר הראשון שנקרא, והצבע אומר כמה
   זה בוער. הפס הצדדי הוא מה שמבדיל אותו משבב מצב במבט חטוף */
.tile-hot {
  cursor: pointer; text-align: center; min-width: 150px; flex: 1;
  padding: 12px 14px; border-inline-start: 3px solid var(--line);
  transition: transform .1s ease, box-shadow .1s ease;
  /* הוא <button>, ולכן צריך לבטל את ברירות המחדל שלו */
  font: inherit; color: inherit; display: block;
}
.tile-hot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-hot:hover { transform: translateY(-1px); box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.10)); }
.tile-hot .tile-n { font-size: 2.2rem; font-weight: 800; line-height: 1.05; }
.tile-hot .tile-l { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.tile-hot .tile-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tile-hot.err { border-inline-start-color: var(--err, #d33); }
.tile-hot.err .tile-n { color: var(--err, #d33); }
.tile-hot.warn { border-inline-start-color: var(--warn, #e8a33d); }
.tile-hot.warn .tile-n { color: var(--warn, #e8a33d); }
.tile-hot.ok { border-inline-start-color: var(--ok); }
.tile-hot.ok .tile-n { color: var(--ok); }
.tile-hot.accent { border-inline-start-color: var(--accent); }
.tile-hot.accent .tile-n { color: var(--accent); }
.dash-clear {
  flex: 1; padding: 16px; text-align: center; color: var(--ok);
  font-weight: 600; border: 1px dashed var(--line); border-radius: var(--r-card, 10px);
}

/* מונה הממתינים לתשובה — אדם אחד לכל שבב, לא הודעה אחת */
.dash-count { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cnt {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 104px; padding: 8px 14px; border-radius: var(--r-card, 12px);
  background: var(--surface); border: 1px solid var(--line);
}
/* חלק מהשבבים הם <button> (לחיצה מעבירה לתור) וחלק <div> — הצורה
   זהה, וברירות המחדל של הכפתור מבוטלות כאן */
button.cnt { font: inherit; color: inherit; cursor: pointer; }
button.cnt:hover { border-color: var(--accent); }
button.cnt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cnt-n { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.cnt-l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cnt.cnt-total { background: var(--remove-soft); border-color: var(--err); }
.cnt.cnt-total .cnt-n { color: var(--err); }
.cnt.cnt-total .cnt-l { color: var(--err); }
.cnt.cnt-nocard { border-style: dashed; }
.cnt-old {
  align-self: center; font-size: 12px; color: var(--muted); padding: 0 4px;
}

/* שורת המצב: מונים שמסתכלים עליהם ולא עובדים מהם */
.dash-state { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tile-chip {
  display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  color: var(--muted); font-family: inherit;
}
.tile-chip > b { font-size: 14px; font-weight: 700; color: var(--fg, inherit); }
.tile-chip:hover { border-color: var(--accent); color: var(--fg, inherit); }

.dash-grid {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
}
.dash-grid > .span2 { grid-column: 1 / -1; }
/* כרטיס ברוחב שני טורים — משלים את השורה האחרונה במקום להשאיר
   טור ריק. בפריסה של טור אחד הוא פשוט חוזר לרוחב מלא */
.dash-grid > .span-wide { grid-column: span 2; }
/* מתחת ל-1140 אין מקום לשני טורים (216 של התפריט ועוד השוליים).
   בלי הכלל הזה `span 2` הכריח את הרשת לשני טורים גם ברוחב 700,
   השני יצא ברוחב 200 פיקסל והטבלאות גלשו מהמסך */
@media (max-width: 1140px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-grid > .span-wide, .dash-grid > .span2 { grid-column: 1 / -1; }
}
.dash-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.dash-card > .card-h {
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.dash-body {
  flex: 1; overflow-y: auto; padding: 4px 16px;
  /* גובה שנגזר מהמסך. 22vh נתנו שלוש שורות מתוך שבעים, וכל ריבוע
     היה באר גלילה זעירה בפני עצמה — תשע כאלה על מסך אחד. שורת
     האריחים התכווצה לשתי שורות נמוכות, והמקום שהתפנה הולך לכאן */
  max-height: clamp(220px, 32vh, 440px); min-height: 90px;
}
.dash-body.flush { padding: 0; }
/* ריבוע בלי תוכן מתכווץ לגובה ההודעה שבו במקום לתפוס משבצת מלאה */
.dash-card.is-empty .dash-body { max-height: none; min-height: 0; }
.dash-card.is-empty .dash-empty { padding: 16px 10px; }
/* המונה הדחוף בכותרת — "23 ממתינים לתשובה" ליד שם הריבוע */
.dash-badge { display: inline-flex; flex: none; }
.dash-badge .pill { font-size: 11px; border: 0; cursor: inherit; }
.dash-badge button.pill { cursor: pointer; font-family: inherit; }
.dash-foot {
  border-top: 1px solid var(--line); padding: 6px 16px;
  font-size: 11.5px; color: var(--muted); text-align: start;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.dash-foot .spacer { flex: 1; }
.dash-empty { color: var(--muted); text-align: center; padding: 30px 10px; font-size: 13px; }
.dash-back { display: none; flex: none; }
/* הגדלת ריבוע במחשב. בטלפון זה קיים מזמן (‎.focused/.open‎ בבלוק של
   860px); במחשב נשארה באר גלילה של 240 פיקסל, וקריאה של 42 פניות
   בתוכה היא חמש שורות בכל פעם. הכפתור מופיע רק כשהעכבר על הריבוע
   כדי לא להוסיף עוד סמל קבוע לכותרת */
.dash-zoom {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: var(--muted); font-size: 14px; line-height: 1; opacity: 0;
  transition: opacity .12s ease;
}
.dash-card:hover .dash-zoom, .dash-zoom:focus-visible { opacity: 1; }
.dash-zoom:hover { color: var(--accent); }
.dash-grid.zoomed > .dash-card:not(.zoom) { display: none; }
.dash-grid.zoomed > .dash-card.zoom { grid-column: 1 / -1; }
.dash-grid.zoomed > .dash-card.zoom .dash-body {
  max-height: calc(100vh - 230px);
}
.dash-card.zoom .dash-zoom { opacity: 1; }
.dash-card select.mini, .dash-card input.mini {
  min-height: 26px; padding: 0 6px; font-size: 12px; border-radius: var(--r-ctl);
}
/* הוספת תזכורת — טופס, לא ארבעה פקדים שנדחסים ברצועה. הנוסח תופס
   שורה שלמה כי הוא השדה האמיתי; השיוך, המועד והכפתור מתחתיו. הרקע
   מפריד אותו מהרשימה שמעליו, כדי שייראה מקום שכותבים בו */
.rem-add {
  display: flex; flex-wrap: wrap; gap: 6px; width: 100%; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 8px;
}
.rem-add #rem-text { flex: 1 1 100%; }
.rem-add #rem-party { flex: 1 1 150px; min-width: 0; }
.rem-add select { flex: 0 1 128px; min-width: 0; }
.rem-add .btn { flex: none; }
/* טבלת פניות — table-layout: fixed. בלעדיו גוף ההודעה מתח את הטבלה
   מעבר לרוחב הריבוע, עמודת "מתי" נדחקה החוצה והתאריך נראה כ-"1:23" */
table.inq { table-layout: fixed; }
table.inq th:nth-child(1), table.inq td:nth-child(1) { width: 26%; }
table.inq th:nth-child(2), table.inq td:nth-child(2) { width: 24%; }
/* שתי תגיות ערוץ צריכות לשבת זו לצד זו: כשהן נשברו לשורות נפרדות
   שורת ספק אחת תפסה גובה של שלוש */
table.inq td:nth-child(2) .pill { font-size: 10.5px; padding: 2px 7px; }
table.inq th:nth-child(4), table.inq td:nth-child(4) { width: 19%; }
table.inq th:nth-child(5), table.inq td:nth-child(5) { width: 34px; }
/* טבלת ההזדמנויות — אותה מלכודת בדיוק, ובה היא עולה כסף: העמודה
   האחרונה היא הסכום, 34 הפיקסלים חתכו אותו באמצע, ו-₪5,500 הוצג
   כ-"₪5,:". מספר חתוך גרוע ממספר חסר — קוראים אותו ומאמינים לו */
table.inq.opp th:nth-child(1), table.inq.opp td:nth-child(1) { width: 24%; }
table.inq.opp th:nth-child(2), table.inq.opp td:nth-child(2) { width: 16%; }
table.inq.opp th:nth-child(3), table.inq.opp td:nth-child(3) { width: auto; }
table.inq.opp th:nth-child(4), table.inq.opp td:nth-child(4) { width: 14%; }
table.inq.opp th:nth-child(5), table.inq.opp td:nth-child(5) {
  width: 17%; text-align: start;
}
/* טבלת השיחות — חמש עמודות תוכן. העמודה האחרונה נושאת את "ממתין /
   חזרנו" וגם את ✓ שמוציא את השורה מהתור, ולכן היא הרחבה שבהן: ב-16%
   הכפתור נחתך בדיוק כמו שנחתך כשניסו להוסיף אותו בפעם הראשונה */
table.inq.miss th:nth-child(1), table.inq.miss td:nth-child(1) { width: 22%; }
table.inq.miss th:nth-child(2), table.inq.miss td:nth-child(2) { width: 13%; }
/* עמודת הטלפון נושאת גם את כפתור החיוג. ב-22% הוא נדחק לשורה משלו
   מתחת למספר וכל שורה בכרטיס גדלה בחצי; העמודה הראשונה מקוצרת
   בהתאמה — יש עליה ellipsis, ועל המספר אין */
table.inq.miss th:nth-child(3), table.inq.miss td:nth-child(3) {
  width: 25%; white-space: nowrap; font-size: 11.5px;
}
table.inq.miss td:nth-child(3) { direction: ltr; }
table.inq.miss th:nth-child(4), table.inq.miss td:nth-child(4) {
  width: 19%; font-size: 11.5px; white-space: nowrap;
}
table.inq.miss th:nth-child(5), table.inq.miss td:nth-child(5) {
  width: 21%; white-space: nowrap;
}
/* ✓ / ↩ בשורת השיחה: צר ככל האפשר, כי כל פיקסל שלו בא על חשבון
   המספר שלצידו — ומאותה סיבה הריפוד בטבלה הזו צר משל אחיותיה:
   שש עמודות של תוכן בכרטיס אחד, והריווח הוא מה שאפשר לוותר עליו */
.inq-row .miss-ret { padding: 2px 5px; font-size: 12px; line-height: 1.4; }
table.inq.miss td, table.inq.miss th { padding-inline: 5px; }
/* בטלפון הכרטיס הפתוח תופס את המסך, ורוחבו כ-371 פיקסלים — חמש
   עמודות וכפתור אינן נכנסות בו. הפתרון הוא גובה ולא רוחב: התאריך
   נשבר לשתי שורות, וכך גם הפתק ו-✓ שלצידו, במקום שייחתכו. השעה
   נחתכה שם עוד לפני שהכפתור נוסף */
@media (max-width: 760px) {
  table.inq.miss td:nth-child(4), table.inq.miss td:nth-child(5) {
    white-space: normal;
  }
  table.inq.miss td:nth-child(2) .pill { padding-inline: 4px; }
  /* המספר אינו נשבר לשתי שורות — חצי מספר טלפון הוא מספר אחר.
     נקודה פחות היא מה שמכניס אותו שלם */
  table.inq.miss td:nth-child(3) { font-size: 10.5px; }
}
/* פנייה שנסגרה נשארת ברשימה ודוהה — היא עדיין חלק מהיום, והכפתור
   שלה הופך ל-↩ כדי שאפשר יהיה להחזיר אותה לתור בלחיצה */
.inq-row.done td { opacity: .5; }
.inq-row .inq-x { padding: 2px; font-size: 14px; }
.inq-row td { padding: 7px 8px; overflow: hidden; }
table.inq th { padding: 8px; }
.inq-row .snip {
  color: var(--muted); font-size: 12.5px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inq-name {
  font-weight: 600; display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
.inq-row.wait td { background: color-mix(in srgb, var(--remove-soft) 55%, transparent); }

/* ================= משימות (my_tasks.js + לוח הבקרה) ================= */
.task-row {
  display: flex; gap: 8px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.task-row:last-child { border-bottom: none; }
.task-row .grow { flex: 1; }
.task-row .task-title { font-weight: 600; }
/* מועד שעבר הוא הדבר היחיד שצריך לקפוץ לעין ברשימת משימות */
.task-row.late .task-title { color: var(--remove); }
.task-row.done { opacity: .6; }
/* שורה בעריכה: שבעה פקדים אינם נכנסים לשורה אחת, והרקע אומר
   "השורה הזו במצב עריכה" בלי להוסיף כותרת */
.task-row.task-editing {
  flex-wrap: wrap; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 8px; margin: 4px 0;
}
.task-row.task-editing input, .task-row.task-editing select { min-height: 32px; }
@media (max-width: 860px) {
  .task-row.task-editing input,
  .task-row.task-editing select,
  .task-row.task-editing .btn { min-height: 38px; font-size: 14px; }
}
/* הוספת משימה — אותו דפוס של הוספת תזכורת: הכותרת בשורה שלמה (היא
   השדה האמיתי), ומתחתיה המועד, הדחיפות, מי מטפל והשיוך. רקע מפריד
   כדי שהטופס לא ייראה כשורה ראשונה ברשימה */
.task-add {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 8px; margin: 4px 0 8px;
}
.task-add [data-t-title] { flex: 1 1 100%; }
.task-add input, .task-add select { min-height: 32px; font-size: 13px; }
@media (max-width: 860px) {
  .task-add input, .task-add select, .task-add .btn { min-height: 38px; font-size: 14px; }
  .task-add #tk-party { flex: 1 1 100%; }
}

/* ידית הגרירה של ריבוע בלוח. pointer events ולא HTML5 drag-and-drop:
   הראשון עובד גם באצבע, והשני לא קיים במגע */
.dash-handle {
  cursor: grab; color: var(--muted); font-size: 15px; line-height: 1;
  flex: none; padding: 0 2px; touch-action: none; user-select: none;
}
.dash-handle:hover { color: var(--text); }
.dash-card.dragging {
  opacity: .75; outline: 2px dashed var(--accent-bright); cursor: grabbing;
}
/* בזמן גרירה: הכרטיסים זזים בהנפשה קצרה כדי שיראו לאן הם הולכים,
   ובחירת טקסט מכובה — גרירה מעל טבלה סימנה את כל השורות */
.dash-grid.reordering { user-select: none; }
.dash-grid.reordering .dash-card { transition: transform .12s ease; }
.dash-grid.reordering .dash-card:not(.dragging) { pointer-events: none; }

/* ================= גרף פסים אופקי (reports.js) =================
   "מי הגדול" כשאין ציר זמן. הטבלה שמתחתיו נשארת מקור האמת; הגרף
   עונה על מה שהטבלה לא עונה במבט אחד — מאיזו שורה זה כבר זנב */
.hbars { display: flex; flex-direction: column; gap: 6px; }
.hbar {
  display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto;
  gap: 10px; align-items: center; font-size: 12.5px;
}
.hbar-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track {
  background: var(--surface-2); border-radius: 4px; height: 14px;
  overflow: hidden; display: block;
}
.hbar-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.hbar-val { white-space: nowrap; font-size: 12px; }
@media (max-width: 860px) {
  .hbar { grid-template-columns: minmax(70px, 120px) 1fr auto; font-size: 12px; }
}

/* הזדמנות שהגיעו אליה מקישור ממוקד (‎#/opportunities/#123‎) — סימון
   רגעי, כדי שהעין תמצא אותה גם באמצע רשימה ארוכה */
.opp-focus {
  outline: 2px solid var(--accent-bright);
  animation: opp-flash 1.6s ease-out 1;
}
@keyframes opp-flash {
  from { background: var(--accent-soft); }
  to { background: transparent; }
}

/* --- רכבים: כרטיס ברשימה, כותרת הכרטיס, ומצב הרכב ---
   הכרטיס ברשימה הוא כפתור שלם, ולכן צריך להיראות כזה כשעוברים עליו;
   תיבות התאריך במצב הרכב נצבעות לפי הדחיפות, כמו האריחים */
.fl-card { transition: border-color .12s, box-shadow .12s; }
.fl-card:hover { border-color: var(--accent-bright); box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
.vh-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.vh-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.vh-date { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 10px; font-size: 12.5px; }
.vh-date .lbl { color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }
.vh-date.t-warn { border-color: var(--change); }
.vh-date.t-err { border-color: var(--remove); }
@media (max-width: 860px) {
  /* בטלפון הכותרת עם "כל הרכבים" נדבקת למעלה — הדרך חזרה תמיד בהישג יד,
     גם אחרי גלילה ארוכה בטבלת האירועים */
  .vh-head { position: sticky; top: 0; background: var(--surface); z-index: 6; padding-top: 6px; }
  /* הפס העליון בטלפון דביק בעצמו (63px) ומעל הכותרת, ו-top:0 הדביק
     אותה מאחוריו: הלוחית ושורת "כל הרכבים" נעלמו בגלילה (12/9/2026).
     הגובה נמדד ב-fleet.js כמו --dash-head-top בלוח הבקרה */
  #main-col .vh-head { top: var(--vh-head-top, 0px); }
  /* שורת הניווט מעל הכותרת חוזרת על הלוחית (ב-h1) ועל "כל הרכבים"
     (כפתור) — בטלפון הכותרת הדביקה מספיק גבוהה גם בלעדיה */
  #main-col .vh-head .grow > div:first-child { display: none !important; } /* inline display:flex */
  /* סיכום הרכבים: שלושה אריחים בשורה (110px, הכלל הכללי של האריחים)
     מספיקים למונה, לא לסכום — "₪2,803" נשבר ל-"₪2,80" ו-"3" (12/9/2026).
     שניים בשורה; #main-col כדי לגבור על הכלל הכללי שיושב לפני זה
     באותו משקל */
  #main-col #fl-sum, #main-col #vh-root .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main-col #fl-sum .num, #main-col #vh-root .tile .num { white-space: nowrap; }
  /* "דורש טיפול": טבלה של שש עמודות ברוחב 366px דחסה את שם הרכב ואת
     ההתראה לעמודות של מילה בשורה. בטלפון כל שורה היא בלוק: הלוחית
     והרכב, ההתראה בשורה משלה, והתאריך ו"פתח" בסוף */
  #main-col #fl-attn table, #main-col #fl-attn tbody { display: block; }
  #main-col #fl-attn tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
    padding: 8px 0; border-bottom: 1px solid var(--line);
  }
  #main-col #fl-attn tr:last-child { border-bottom: none; }
  #main-col #fl-attn td { display: inline; padding: 0; border: 0; width: auto !important; }
  #main-col #fl-attn td:nth-child(4) { flex-basis: 100%; }
  /* חשבוניות מהמייל: טבלת הכללים (שש עמודות) גללה הצידה בתוך .tablecard
     ושם הכלל נדחס למילה בשורה. בטלפון כל שורה היא בלוק — תא מתחת לתא,
     בלי שורת הכותרות: הערכים מסבירים את עצמם ("מאת:", "נושא:", "→ רכב") */
  #main-col #fl-mail .tablecard { overflow-x: visible; }
  #main-col #fl-mail table.grid, #main-col #fl-mail table.grid tbody { display: block; }
  #main-col #fl-mail table.grid thead { display: none; }
  #main-col #fl-mail table.grid tr { display: block; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  #main-col #fl-mail table.grid tr:last-child { border-bottom: none; }
  #main-col #fl-mail table.grid td {
    display: block; padding: 2px 0; border: 0; width: auto !important; white-space: normal;
  }
  #main-col #fl-mail table.grid td:first-child { font-weight: 700; }
  /* אירועי הרכב ומסמכיו: טבלאות של 6–7 עמודות (633px ברוחב 366) גללו
     הצידה בתוך הכרטיס, והסכום — העמודה שבשבילה באים — נשאר מחוץ למסך.
     בטלפון כל שורה היא בלוק: תאריך וסכום בשורה הראשונה, האירוע (או שם
     המסמך) בשורה משלו, השאר מתחת, והפעולות בסוף. שורות העריכה נשארות
     מוסתרות: display:flex על tr היה גובר על [hidden] של הדפדפן */
  #main-col #vh-events .tablecard, #main-col #vh-docs .tablecard { overflow-x: visible; }
  #main-col #vh-events table.grid, #main-col #vh-docs table.grid,
  #main-col #vh-events table.grid tbody, #main-col #vh-docs table.grid tbody,
  #main-col #vh-events table.grid tfoot, #main-col #vh-docs table.grid tfoot { display: block; }
  #main-col #vh-events table.grid thead, #main-col #vh-docs table.grid thead { display: none; }
  #main-col #vh-events table.grid tr, #main-col #vh-docs table.grid tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--line);
  }
  #main-col #vh-events table.grid tr[hidden], #main-col #vh-docs table.grid tr[hidden] { display: none; }
  #main-col #vh-events table.grid td, #main-col #vh-docs table.grid td {
    display: block; padding: 0; border: 0; width: auto !important;
  }
  #main-col #vh-events tr[data-ev] > td:nth-child(4) { order: 1; margin-inline-start: auto; }
  #main-col #vh-events tr[data-ev] > td:nth-child(2) { order: 2; flex-basis: 100%; }
  #main-col #vh-events tr[data-ev] > td:nth-child(3),
  #main-col #vh-events tr[data-ev] > td:nth-child(5),
  #main-col #vh-events tr[data-ev] > td:nth-child(6) { order: 3; }
  #main-col #vh-events tr[data-ev] > td:last-child { order: 4; margin-inline-start: auto; }
  #main-col #vh-docs tr[data-doc] > td:first-child { flex-basis: 100%; }
  #main-col #vh-docs tr[data-doc] > td:last-child { margin-inline-start: auto; }
  /* בלי שורת כותרות שני תאריכים עירומים לא אומרים כלום — התווית חוזרת */
  #main-col #vh-docs tr[data-doc] > td:nth-child(2)::before { content: "הונפק "; color: var(--muted); }
  #main-col #vh-docs tr[data-doc] > td:nth-child(3)::before { content: "בתוקף עד "; color: var(--muted); }
  #main-col #vh-events tr[data-ev-editrow] > td, #main-col #vh-docs tr[data-doc-editrow] > td { flex-basis: 100%; }
}

/* ================= התאמת ספרים בטלפון (12/9/2026) =================
   חמש-שש עמודות בעמודת תוכן של 366 פיקסלים: טבלת "דוחות שנקלטו" יצאה
   409 רחבה, וכפתור "פתח השוואה" — שיושב בעמודה האחרונה, כלומר בקצה
   השמאלי — התחיל 37 פיקסלים מחוץ לכרטיס. בטבלאות ההשוואה עצמן "✔ טופל"
   נחתך עד 89. הדרך היחידה אליו הייתה גלילה אופקית בתוך הכרטיס, וגלילה
   מקוננת באצבע היא מלכודת (ראה ‎[data-more]‎ למעלה) — בפועל אי אפשר היה
   לפתוח השוואה מהטלפון. בטלפון כל שורה היא כרטיס: תא מתחת לתא, בלי
   שורת הכותרות, והכפתור בשורה משלו לרוחב הכרטיס. התוויות (.bk-l) חוזרות
   כאן, כי בטבלת הפערים שלוש עמודות של כסף וסכום בלי "אצלי/ברווחית"
   לידו אינו אומר דבר. אותה תרופה כמו ‎#fl-mail‎ */
.bk-l { display: none; color: var(--muted); font-size: 11.5px; margin-inline-end: 5px; }
@media (max-width: 860px) {
  #main-col .bk-cards .tablecard { overflow-x: visible; }
  #main-col .bk-cards table.grid,
  #main-col .bk-cards table.grid tbody,
  #main-col .bk-cards table.grid tfoot { display: block; }
  #main-col .bk-cards table.grid thead { display: none; }
  #main-col .bk-cards table.grid tr {
    display: block; padding: 9px 12px; border-bottom: 1px solid var(--line);
  }
  #main-col .bk-cards table.grid tr:last-child { border-bottom: none; }
  #main-col .bk-cards table.grid td {
    display: block; padding: 2px 0; border: 0; width: auto !important;
    white-space: normal;
  }
  #main-col .bk-cards .bk-l { display: inline; }
  /* כפתור של 84 פיקסלים הוא מטרה קטנה באצבע, ובשורה משלו יש מקום */
  #main-col .bk-cards table.grid td.bk-act { padding-top: 8px; }
  #main-col .bk-cards table.grid td.bk-act .btn { width: 100%; }
}

/* --- פאנל הוספת תיבת דואר במסך ההגדרות (screens/settings.js) --- */
.mb-panel {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
  padding: 12px 14px; margin-top: 10px;
}
.mb-panel .copyline {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 7px 10px;
}
/* קישור שנראה ככפתור אינו צריך קו תחתון — .btn לא ביטל אותו, ולכן
   כל <a class="btn"> (כאן, וגם "PDF" במסמך היכולות) נראה מקווקו */
a.btn { text-decoration: none; }