/* ══════════════════════════════════════════════════════════════════════
   פורטל הצוות — הקליפה
   ⚠️ בהיר בלבד. אין `prefers-color-scheme: dark` ואסור שיהיה — זו הכרעת
      עיצוב מפורשת, לא השמטה.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#e9eeed; --page:#f7f9f9; --surface:#fff;
  --border:#e4eae9; --border2:#eef3f2;
  --text:#16241f; --muted:#7b8f8c; --muted2:#a7b6b4;
  --accent:#0f766e; --accent-deep:#0b5b55; --accent-soft:#e6f2f0;
  --ok:#15722f; --ok-soft:#e7f3ea;
  --warn:#a8570b; --warn-soft:#fbf0e2;
  --danger:#a92620; --danger-soft:#fbeceb; --danger-line:#e8b6b2;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --side-w:236px;
  --tabbar-h:64px;
}

*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  background:var(--page); color:var(--text);
  font-family:Heebo,"Segoe UI",Arial,sans-serif; font-size:var(--fs-md); line-height:1.6;
  direction:rtl; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
.hide{display:none !important}

/* אייקון — קווי, יורש צבע מההורה */
svg.i{width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ── הקליפה ───────────────────────────────────────────────────────────
   ⚠️ `#side` ראשון ב-DOM ⇒ ב-RTL הוא יושב מימין. */
.app{display:flex; min-height:100dvh; background:var(--page)}
.pane{flex:1; min-width:0; display:flex; flex-direction:column}
.view{flex:1; padding:4px 20px 26px}

/* ── סרגל הצד (מחשב) ─────────────────────────────────────────────────
   🔴 `border-inline-end` = הגבול מול התוכן, כי הסרגל מימין.
      `border-left` היה נכון במקרה, ונשבר ברגע שמישהו מסתכל ב-LTR. */
.side{
  width:var(--side-w); flex:none; background:var(--surface);
  border-inline-end:1px solid var(--border);
  display:flex; flex-direction:column; padding:18px 13px 14px;
  position:sticky; top:0; height:100dvh;
}
.side-top{display:flex; align-items:center; gap:11px;
  padding:0 8px 17px; border-bottom:1px solid var(--border2)}
.side-top .t{font-size:var(--fs-lg); font-weight:700; line-height:1.25; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.orgmark{width:38px; height:38px; border-radius:11px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-sm); flex:none; overflow:hidden}
.orgmark img{width:100%; height:100%; object-fit:cover; display:block}

.nav{display:flex; flex-direction:column; gap:2px; padding-top:13px; flex:1}
.side-foot{display:flex; flex-direction:column; gap:2px;
  padding-top:11px; border-top:1px solid var(--border2)}
.nav button, .side-foot button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:right;
  padding:10px 12px; border:none; border-radius:var(--r-md);
  background:none; color:var(--text); font-size:var(--fs-md); font-weight:500;
}
.nav button:hover, .side-foot button:hover{background:var(--page)}
.nav button.on{background:var(--accent-soft); color:var(--accent-deep); font-weight:700}
.nav .count{margin-inline-start:auto; font-size:var(--fs-xs); font-weight:700;
  background:var(--accent); color:#fff; border-radius:var(--r-pill);
  min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center;
  font-variant-numeric:tabular-nums}
.nav button.on .count{background:var(--accent-deep)}
/* 🔴 **יציאה אינה מחיקה ואינה נצבעת אדום.** אדום שמור למחיקה
   ולאי-החזרה בלבד; יציאה הפיכה לגמרי בכניסה מחדש. אדום שמפוזר על
   פעולות רגילות מאבד את המשמעות שלו בדיוק כשהיא נחוצה. */

/* ── הסרגל העליון ────────────────────────────────────────────────────
   ⭐ לוגו המוסד ראשון בשורה ⇒ בפינה הימנית. ברכה קטנה, שם גדול. אין אווטאר. */
.topbar{display:flex; align-items:center; gap:13px; padding:20px 20px 16px; min-height:74px}
.topbar .who{min-width:0}
.topbar .g{font-size:var(--fs-md); color:var(--muted); line-height:1.3; display:block}
.topbar .n{font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* מסך פנימי: חץ חזרה + כותרת. ⚠️ לא ברכה — ברכה בכל מסך מפסיקה להיות ברכה. */
.topbar .back{background:none; border:none; padding:6px; margin-inline-start:-6px;
  color:var(--text); display:grid; place-items:center}
.topbar .title{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.02em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* ⚠️ החץ מצביע ימינה ב-RTL — כלומר "חזרה" לכיוון שממנו באנו. */

/* ── הסרגל התחתון (נייד) ─────────────────────────────────────────────
   ⚠️ שלוש קופסאות **מרובעות וזהות**. כך העיגול של הפריט הפעיל יוצא באמת
      עגול, הכפתור המרכזי מיושר עם חבריו, ומעבר בין לשוניות אינו מזיז
      את הסרגל. */
.tabbar{
  display:none; position:fixed; inset-inline:0; bottom:0; z-index:30;
  background:var(--surface); border-top:1px solid var(--border);
  padding:6px 26px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-between; align-items:flex-start;
}
.tabbar button{
  background:none; border:none; padding:0;
  display:grid; justify-items:center; gap:2px; color:var(--muted); font-size:var(--fs-xs); font-weight:600;
}
.tabbar .box{width:42px; height:42px; border-radius:var(--r-pill);
  display:grid; place-items:center; transition:background .16s ease, color .16s ease}
.tabbar button.on{color:var(--accent-deep); font-weight:700}
/* מצב — עיגול **רך**, לא מלא, כדי שלא יתחרה בכפתור התפריט */
.tabbar button.on .box{background:var(--accent-soft); color:var(--accent-deep)}
/* פעולה — מלא. התפריט הוא שער הניווט היחיד בנייד, ולכן הוא הכפתור הראשי */
.tabbar button.act .box{background:var(--accent); color:#fff}
.tabbar button.act{color:var(--accent-deep); font-weight:700}
.tabbar .box svg.i{width:22px; height:22px; transition:transform .22s ease}
.tabbar button.open .box svg.i{transform:rotate(90deg)}

/* ── החלונית מלמטה ───────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(18,33,30,.34);
  opacity:0; transition:opacity .2s ease}
.scrim.in{opacity:1}
.sheet{
  position:fixed; inset-inline:0; bottom:0; z-index:41;
  background:var(--surface); border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px rgba(18,33,30,.18);
  padding:8px 14px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.8,.3,1);
  max-height:78dvh; overflow-y:auto;
}
.sheet.in{transform:translateY(0)}
.sheet-grip{width:42px; height:4px; border-radius:var(--r-pill);
  background:#dbe4e2; margin:6px auto 12px}
.sheet-nav{display:flex; flex-direction:column; gap:2px}
.sheet-nav button{
  display:flex; align-items:center; gap:13px; width:100%; text-align:right;
  padding:13px 12px; border:none; border-radius:var(--r-md);
  background:none; color:var(--text); font-size:var(--fs-lg); font-weight:500;
}
.sheet-nav button:active{background:var(--page)}
.sheet-nav .count{margin-inline-start:auto; font-size:var(--fs-sm); font-weight:700;
  background:var(--accent); color:#fff; border-radius:var(--r-pill);
  min-width:22px; height:22px; padding:0 7px; display:grid; place-items:center;
  font-variant-numeric:tabular-nums}


/* ── הבועית של "אחורה" ───────────────────────────────────────────── */
.toast{
  position:fixed; z-index:50; inset-inline:0; margin-inline:auto; width:max-content;
  bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  background:var(--text); color:#fff; font-size:var(--fs-sm); font-weight:600;
  padding:9px 16px; border-radius:var(--r-pill);
  opacity:0; transition:opacity .18s ease;
}
.toast.in{opacity:1}

/* ══ שער הכניסה ══════════════════════════════════════════════════════
   "אותו כרטיס, תוכן מתחלף." הכרטיס זהה במחשב ובנייד; משתנה רק המרחב סביבו. */
.gate{min-height:100dvh; display:grid; place-items:center; padding:28px 18px; background:var(--ground)}
.lg-card{width:100%; max-width:352px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:0 2px 10px rgba(18,33,30,.07);
  padding:30px 28px 26px; text-align:center}
.lg-mark{width:54px; height:54px; border-radius:15px; font-size:var(--fs-lg); margin:0 auto 12px}
.lg-org{font-size:var(--fs-lg); font-weight:700; line-height:1.3}
.lg-tag{font-size:var(--fs-sm); color:var(--muted); margin-bottom:22px}
.lg-card h2{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.02em; margin-bottom:8px}
.lg-sub{font-size:var(--fs-md); color:var(--muted); margin-bottom:18px}
.lg-sub b{color:var(--text); font-weight:700}
.lg-icon{width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; margin:0 auto 14px}
.lg-icon svg.i{width:26px; height:26px}
.lg-icon.danger{background:var(--danger-soft); color:var(--danger)}

.fld-lbl{display:block; text-align:right; font-size:var(--fs-sm); font-weight:600;
  color:var(--muted); margin-bottom:5px}
.fld{border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  height:48px; display:flex; align-items:center; padding:0 13px; transition:border-color .14s ease}
.fld:focus-within{border-color:var(--accent)}
.fld.bad{border-color:var(--danger)}
.fld input{border:none; outline:none; background:none; width:100%; font-family:inherit;
  font-size:var(--fs-lg); color:var(--text); text-align:right; letter-spacing:.02em}
/* ⚠️ 16px ומעלה — מתחת לזה iOS מקרב את המסך בפוקוס ומזיז את הפריסה. */

.err{font-size:var(--fs-sm); color:var(--danger); text-align:right;
  min-height:18px; margin:5px 0 10px; line-height:1.45}

.code-in{width:100%; height:56px; border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); font-family:inherit; font-size:26px; font-weight:700;
  letter-spacing:.34em; text-align:center; color:var(--text); outline:none;
  direction:ltr; font-variant-numeric:tabular-nums}
.code-in:focus{border-color:var(--accent)}

/* כפתור ראשי — אחד בלבד במסך. */
.btn{width:100%; height:48px; border:none; border-radius:var(--r-md);
  background:var(--accent); color:#fff; font-size:var(--fs-lg); font-weight:700;
  margin-top:4px; transition:background .14s ease}
.btn:hover{background:var(--accent-deep)}
.btn:disabled{background:var(--muted2); cursor:default}
.lg-link{display:block; width:100%; background:none; border:none; margin-top:13px;
  font-size:var(--fs-md); font-weight:600; color:var(--accent)}
.lg-timer{font-size:var(--fs-sm); color:var(--muted); margin-top:12px; min-height:18px}
.lg-foot{display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--fs-sm); color:var(--muted2); margin-top:18px}
.lg-foot svg.i{width:15px; height:15px}

.note{display:flex; gap:9px; text-align:right; background:var(--accent-soft);
  color:var(--accent-deep); border-radius:var(--r-md); padding:11px 13px;
  font-size:var(--fs-sm); line-height:1.55; margin-bottom:16px}
.note svg.i{width:17px; height:17px; margin-top:2px}
.note.warn{background:var(--warn-soft); color:var(--warn)}

/* ── מצב ריק זמני עד שהמסכים ייבנו ──────────────────────────────── */
.stub{padding:40px 4px; text-align:center; color:var(--muted)}
.stub svg.i{width:30px; height:30px; color:var(--muted2); margin-bottom:10px}

/* ══ נייד ══════════════════════════════════════════════════════════
   ⚠️ הסף הוא 900px: מתחתיו אין מקום לסרגל צד, ולכן הוא מוחלף בסרגל
      תחתון ובחלונית. אין מצב ביניים שבו שניהם מוצגים. */
@media (max-width:899px){
  .side{display:none}
  .tabbar{display:flex}
  /* ⚠️ ריפוד ולא margin — הסרגל `fixed`, ובלי זה התוכן האחרון נחבא מתחתיו. */
  .view{padding:4px 16px calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom))}
  .topbar{padding:16px 16px 12px}
  .topbar .n{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  .sheet,.scrim,.toast,.tabbar .box,.tabbar .box svg.i{transition:none}
}

/* ══ מסך הבית ════════════════════════════════════════════════════════
   ⭐ כרטיס אחד, הצעה אחת: משפט · מספר · כפתור. אין אריחים ואין רשת. */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px 20px; margin-bottom:20px; max-width:520px}
.card h3{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.02em; line-height:1.3}
.card-sub{color:var(--muted); margin-top:5px; margin-bottom:16px}
.card .btn{max-width:210px}
.card .fld{margin:12px 0 14px}
.card-ico{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:12px}
.card-ico.ok{background:var(--ok-soft); color:var(--ok)}
.card-ico.warn{background:var(--warn-soft); color:var(--warn)}
.card-ico svg.i{width:22px; height:22px}
/* ⚠️ תקלת ערוץ מחליפה את הכרטיס ואינה נדחקת לצדו. */
.card.alert{border-color:var(--warn); background:var(--warn-soft)}
.card.alert h3{font-size:var(--fs-lg)}
.card.alert .card-sub{color:var(--warn)}
.btn.ghost{background:none; color:var(--accent); border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center; gap:8px}
.btn.ghost:hover{background:var(--accent-soft)}

.sec-h{font-size:var(--fs-sm); font-weight:700; color:var(--muted);
  letter-spacing:.04em; margin-bottom:10px}
.quick{display:flex; flex-direction:column; gap:8px; max-width:520px}
.quick button{display:flex; align-items:center; gap:12px; text-align:right;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px; font-size:var(--fs-md); font-weight:600}
.quick button:hover{border-color:var(--accent); color:var(--accent-deep)}
.quick .qi{width:32px; height:32px; border-radius:9px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; flex:none}
.empty-win{text-align:center}
.empty-win.big{padding:56px 20px; text-align:center}
.empty-win .card-ico{margin-inline:auto}

/* ══ התיבה ═══════════════════════════════════════════════════════════ */
.list-head{font-size:var(--fs-sm); color:var(--muted); margin-bottom:12px}
.list-head b{color:var(--text); font-size:var(--fs-md); font-weight:700}
.fld.search{max-width:520px; margin-bottom:14px; gap:9px; color:var(--muted)}
.fld.search input{font-size:var(--fs-md)}
.rows{list-style:none}
/* ⚠️ overflow:hidden הוא מה שמחביא את כפתור ההחלקה מתחת לשורה. */
.row{position:relative; overflow:hidden; border-bottom:1px solid var(--border2)}
.row-in{display:flex; align-items:center; gap:11px; padding:13px 4px; cursor:pointer;
  background:var(--page); position:relative; z-index:1; transition:background .13s ease}
.row-in:hover{background:var(--surface)}
.row-txt{flex:1; min-width:0}
.row-top{display:flex; align-items:center; gap:8px}
.row-top b{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-sub{color:var(--muted); font-size:var(--fs-sm); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 🔴 **אין כאן נקודת "חדש", ובכוונה.** המסך שאושר מציג נקודה טורקיזית
   לפנייה חדשה — אבל נמדד מול המערכת שאין מצב "נקרא" לפנייה כלל, ואין
   שדה שאפשר לגזור ממנו. ⇒ עדיף להשמיט סימן מאשר לצבוע נקודה שאינה
   אומרת דבר. ייבנה כשיהיה מצב קריאה. */
.tag{font-size:var(--fs-xs); font-weight:600; color:var(--muted); background:var(--border2);
  border-radius:var(--r-pill); padding:2px 8px; white-space:nowrap; flex:none}
.when{margin-inline-start:auto; font-size:var(--fs-xs); color:var(--muted2);
  white-space:nowrap; font-variant-numeric:tabular-nums}
/* הפעולות מחליפות את השעה בריחוף. */
.row-acts{display:none; gap:6px; margin-inline-start:auto}
.row-in:hover .row-acts{display:flex}
.row-in:hover .when{display:none}
.row-acts button{font-size:var(--fs-sm); font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:none; border-radius:var(--r-sm); padding:5px 11px}
.row-acts button:hover{background:var(--accent); color:#fff}
.row-swipe{position:absolute; inset-block:0; inset-inline-start:0; width:96px;
  background:var(--accent); color:#fff; border:none; font-weight:700; font-size:var(--fs-sm)}

/* ⚠️ בנייד אין ריחוף כלל — הפעולות נחשפות בהחלקה, ולכן `.row-acts` מוסתר
   לגמרי ולא "מוצג בלחיצה". כפתור שנחשף במגע היה נפתח בכל גלילה. */
@media (hover:none){
  .row-in:hover .row-acts{display:none}
  .row-in:hover .when{display:inline}
}

/* המחבר — יושב בתוך החלונית מלמטה, ולכן הוא זהה בנייד ובמחשב. */
.composer{padding:4px 4px 8px; text-align:right}
.composer h4{font-size:var(--fs-lg); font-weight:800; margin-bottom:10px}
.composer textarea{width:100%; border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:11px 13px; font-family:inherit; font-size:var(--fs-md); color:var(--text);
  background:var(--surface); resize:vertical; min-height:96px; outline:none}
.composer textarea:focus{border-color:var(--accent)}

/* ══ ארבע דרגות כפתור — ולא יותר ═══════════════════════════════════════
   🔴 **כפתור ראשי אחד בלבד במסך.** אם יש שניים, אף אחד מהם אינו ראשי.
   🔴 **אדום שמור למחיקה ואי-החזרה בלבד.** שגיאה ואזהרה אינן כפתור. */
.btn.secondary{background:var(--surface); color:var(--accent-deep);
  border:1.5px solid var(--accent-line,#9ecfc9)}
.btn.secondary:hover{background:var(--accent-soft)}
.btn.quiet{background:none; color:var(--muted); border:none; font-weight:600}
.btn.quiet:hover{color:var(--text); background:var(--border2)}
.btn.danger{background:var(--danger); color:#fff}
.btn.danger:hover{background:#8f1f1a}
/* ⚠️ המצב המושבת נראה מושבת — כפתור שנראה פעיל ואינו מגיב מלמד להתעלם. */
.btn:disabled{background:var(--border); color:var(--muted2); cursor:default; border-color:transparent}
.btn.secondary:disabled{background:var(--surface); color:var(--muted2)}
/* ⚠️ "שולח…" אינו קישוט: כפתור בלי משוב מייצר לחיצה כפולה, ולחיצה
   כפולה כאן שולחת שתי הודעות לפונה. */
.btn.busy{opacity:.75; cursor:default}
.btn.done{background:var(--ok); color:#fff}

/* ══ דיאלוג אישור ══════════════════════════════════════════════════════
   🔴 **בצבעי המערכת ולא `confirm()` של הדפדפן.** confirm נראה כמו שגיאת
      מערכת, אינו ניתן לעיצוב, ובנייד הוא חוסם את כל המסך בלי הקשר. */
.dlg-wrap{position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(18,33,30,.4); padding:20px; opacity:0; transition:opacity .16s ease}
.dlg-wrap.in{opacity:1}
.dlg{background:var(--surface); border-radius:var(--r-lg); padding:24px 22px 18px;
  width:100%; max-width:360px; text-align:right; box-shadow:0 20px 50px rgba(18,33,30,.22)}
.dlg h3{font-size:var(--fs-lg); font-weight:800; margin-bottom:6px}
.dlg p{color:var(--muted); margin-bottom:18px}
.dlg .acts{display:flex; flex-direction:column; gap:8px}
.dlg .acts .btn{margin-top:0}