/* ============================================================================
   GroupiApp — app-shell.css
   מעטפת האפליקציה למשתמש מחובר: תפריט צד מתקפל (RTL: ימין · LTR: שמאל) +
   בר תחתון בנייד. הוראת המנכ"ל, 01.09.2026 — ראו
   AppMD/01_SPEC/project/APP_SHELL_AND_CALENDAR_2026-09-01.md.

   נבנה על הטוקנים הקיימים של style.css בלבד (--bg-elev, --line, --ink-2,
   --accent, --brand...). שום צבע חדש לא הומצא כאן. עובד אוטומטית בכהה/בהיר
   כי הטוקנים עצמם מתהפכים ב-style.css.

   נטען אחרי style.css ולפני ה-CSS הייעודי של כל עמוד. מוזרק רק כש-app-shell.js
   מזהה משתמש מחובר (event gapp:account מ-account-nav.js). למשתמש מנותק —
   הדף נשאר בדיוק כמו שהוא היום.
   ============================================================================ */

:root{
  --shell-rail:64px;            /* מצומצם — אייקונים בלבד */
  --shell-rail-expanded:236px;  /* מורחב — אייקון + שם */
  --shell-bottombar:60px;       /* בר תחתון בנייד */
  --shell-drawer-w:min(84vw,300px);
  /* קנה מידה מקומי אחד למעטפת — גאומטריה בלבד, לא צבע. הצבעים כולם טוקנים
     קיימים של style.css. שומר על ריתמוס אחיד בין ה-rail, הפריטים והאייקונים. */
  --shell-gutter:8px;           /* מרווח פנימי בין ה-chip לקצה ה-rail */
  --shell-item-h:44px;          /* גובה פריט — יעד מגע 44px */
  --shell-item-radius:10px;     /* פינת ה-chip — עקבי עם --radius-sm/-md */
  --shell-icon:20px;            /* גודל אייקון קו על רשת 24 */
}

/* ==========================================================================
   1 · תפריט הצד — רכיב אחד, שתי צורות תצוגה: מדף קבוע (דסקטופ) או מגירה
   נגררת (מובייל, ≤640px). אותו DOM בדיוק, ראו app-shell.js.
   ========================================================================== */
.gapp-sidebar{
  position:fixed;
  top:64px; bottom:0; inset-inline-start:0;
  width:var(--shell-rail);
  background:var(--bg-elev);
  border-inline-end:1px solid var(--line);
  overflow-x:hidden; overflow-y:auto;
  z-index:40;
  display:flex; flex-direction:column;
  padding-block:6px 12px;
  transition:width var(--dur-ui,200ms) var(--ease-out,ease);
}
.gapp-sidebar.is-expanded{ width:var(--shell-rail-expanded) }

/* התוכן של הדף זז כדי לפנות מקום למדף — רק main ורק footer.
   הכותרת העליונה (header.nav) נשארת ברוחב מלא, קבוע, לא זזה. */
body.gapp-shell-on #main,
body.gapp-shell-on .foot{
  padding-inline-start:var(--shell-rail);
  transition:padding-inline-start var(--dur-ui,200ms) var(--ease-out,ease);
}
body.gapp-shell-on.gapp-shell-expanded #main,
body.gapp-shell-on.gapp-shell-expanded .foot{
  padding-inline-start:var(--shell-rail-expanded);
}

/* W-142: הכרזה הצהובה רצה מתחת למדף ולא נעצרת בקצה שלו.
   המדף קבוע מ-64px מלמעלה (מתחת לקפסולת הניווט) ו-#main מרופד בגובה שלו, ולכן הכרזה נעצרה בקצה המדף ו-64 הפיקסלים העליונים של
   עמודת המדף נשארו בצבע הדף: פער שנראה כמו פיקסל חסר. עכשיו הכרזה נמשכת על ריפוד #main (שוליים שליליים) ומקבלת אותו ריפוד פנימי,
   כך שהתוכן שבתוכה יושב בדיוק היכן שישב, והצהוב ממשיך עד קצה המסך. המדף (z-index 40) מכסה את החלק שמתחתיו. רק ≥641px (בנייד אין ריפוד);
   המעבר זהה למעבר של #main כדי שהקצה לא יזוז לפני התוכן. תכונות לוגיות: ב-LTR המדף משמאל והכרזה נמשכת לשמאל. */
@media (min-width:641px){
  body.gapp-shell-on #main .v2-poster{
    margin-inline-start:calc(var(--shell-rail) * -1);
    padding-inline-start:var(--shell-rail);
    transition:margin-inline-start var(--dur-ui,200ms) var(--ease-out,ease),
               padding-inline-start var(--dur-ui,200ms) var(--ease-out,ease);
  }
  body.gapp-shell-on.gapp-shell-expanded #main .v2-poster{
    margin-inline-start:calc(var(--shell-rail-expanded) * -1);
    padding-inline-start:var(--shell-rail-expanded);
  }
}

/* --- כפתור הקיפול/הרחבה — שורת בקרה בראש המדף, מופרדת בקו-שיער מהניווט --- */
.gapp-toggle{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:48px; padding-inline:20px; margin:0 0 6px;
  background:none; border:0; border-block-end:1px solid var(--line);
  color:var(--ink-3); font:inherit; cursor:pointer; flex:0 0 auto;
  transition:background-color var(--dur-ui,200ms) var(--ease-out,ease),
             color var(--dur-ui,200ms) var(--ease-out,ease);
}
@media (hover:hover) and (pointer:fine){
  .gapp-toggle:hover{ background:var(--band); color:var(--ink) }
}
.gapp-toggle-icon{ color:var(--ink-2) }

/* --- פריטי הניווט — chip מעוגל עם מרווח מקצה ה-rail (Linear/Notion) --- */
.gapp-list{
  list-style:none; margin:0;
  padding:6px var(--shell-gutter,8px);
  display:flex; flex-direction:column; gap:2px;
}
.gapp-item{
  display:flex; align-items:center;
  block-size:var(--shell-item-h,44px);
  padding-inline:12px;
  border-radius:var(--shell-item-radius,10px);
  color:var(--ink-2); text-decoration:none;
  font-size:15px; font-weight:500;
  transition:background-color var(--dur-ui,200ms) var(--ease-out,ease),
             color var(--dur-ui,200ms) var(--ease-out,ease);
}
@media (hover:hover) and (pointer:fine){
  .gapp-item:hover{ background:var(--band); color:var(--ink) }
}
/* עמוד נוכחי — chip במילוי --accent-soft, כלומר **הצהוב**, לא מילוי דיו.
   ⚠ עודכן 17.09.2026 עם «כרזה צהובה»: הנוסח הקודם ("geo/accent, לא קורל")
   מת יחד עם הקורל. הכלל החדש הוא "תקציב מילוי־הדיו" (§21 ב-style.css):
   מילוי דיו שמור ל-.btn/.num/.enemy/.foot/.act-next-badge, וסימון «נוכחי»
   אינו אחד מהם — «נבחר» ו«הפעולה הראשית» אינם אותו צבע (ch07 §7.11.2).
   הצבע יורש לאייקון דרך currentColor. */
.gapp-item[aria-current="page"]{
  /* geo כטקסט (--accent), לא --accent-ink שהוא קורל: coral-על-geo-soft נמדד 4.57:1
     (שוליים מסוכנים), geo-על-geo-soft ~6.2:1. תואם את כוונת ההערה מעל ("geo, לא קורל").
     G4, 03.09.2026. */
  color:var(--accent); background:var(--accent-soft); font-weight:600;
}

/* אייקון: תיבה בגודל קבוע שממרכזת SVG של 24-grid. stroke=currentColor,
   כך שהאייקון יורש רגיל/hover/פעיל בלי כלל צבע נפרד. position:relative = עוגן ל-badge. */
.gapp-icon{
  flex:0 0 var(--shell-icon,20px);
  inline-size:var(--shell-icon,20px); block-size:var(--shell-icon,20px);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
}
.gapp-icon svg{ inline-size:var(--shell-icon,20px); block-size:var(--shell-icon,20px); display:block }

.gapp-label{
  margin-inline-start:12px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:opacity var(--dur-ui,200ms) var(--ease-out,ease);
}

/* מכווץ (rail) — דסקטופ בלבד. אייקון ממורכז, שם נעלם לגמרי (inline-size:0)
   כדי שלא יציץ סליבר טקסט חתוך. בנייד המדף הוא מגירה מלאה עם שמות — ולכן
   הכללים האלה מגודרים ל-min-width:641px ולא נוגעים במגירה. */
@media (min-width:641px){
  .gapp-sidebar:not(.is-expanded) .gapp-toggle{ justify-content:center; padding-inline:0 }
  .gapp-sidebar:not(.is-expanded) .gapp-item{ justify-content:center; padding-inline:0 }
  .gapp-sidebar:not(.is-expanded) .gapp-label{ opacity:0; inline-size:0; margin-inline-start:0 }
}

/* Unread-notifications badge — anchored to the icon so it survives both the
   collapsed (icon-only) and expanded sidebar, and the bottom bar (app-shell.js
   attaches it only to the "notifications" item's icon). Same "danger pill" formula
   as .acct-badge (style.css) / .pill.is-danger (panel.css) — a translucent tint with
   full-saturation text and a matching border, already the accessible contrast
   contract this codebase uses for danger-colored small text, not a new one. */
.gapp-badge{
  position:absolute; inset-inline-end:-7px; inset-block-start:-6px;
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  border-radius:999px; font-size:10px; font-weight:800; line-height:14px; text-align:center;
  background:color-mix(in srgb, var(--danger) 16%, transparent);
  color:var(--danger); border:1px solid var(--danger);
}
/* No separate [hidden] override needed — style.css's global
   `[hidden]{display:none!important}` already wins here. */

.gapp-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:65 }

/* ווידג'ט הנגישות (a11y.js) יושב ב-inset-inline-end לכולם מאז W-143 (style.css .a11y-root): זו הפינה הנגדית למדף, ולכן הכלל שהיה כאן
   (הזזה לשם רק כשה-shell פעיל) נמחק. אורח קיבל את הפינה של המדף, וכיסה את עמודת השעה בפיד. */

/* ==========================================================================
   2 · בר תחתון — מובייל בלבד. בדסקטופ המדף המתקפל הוא הראשי, בלי בר תחתון.
   ========================================================================== */
.gapp-bottombar{ display:none }

@media (max-width:640px){
  /* G4 fix — the closed drawer sits at inset-inline-start:-300px (a real,
     300px-wide box just parked off-screen, not display:none) and that
     negative offset was letting some browsers count it into the page's own
     horizontal scroll extent, producing a genuine sideways scroll at 390px
     (found live in Playwright, not theoretical). Scoped to only when the
     shell is actually on — this must not suppress horizontal scroll a page
     WITHOUT the shell legitimately needs elsewhere. A child element's own
     overflow-x:auto container (data tables, code blocks) still scrolls
     normally; this only clips the outer page-level axis. */
  html, body.gapp-shell-on{ overflow-x:hidden }

  /* המדף הופך למגירה נגררת שמכסה את כל הגובה, כולל הכותרת. */
  .gapp-sidebar{
    top:0;
    width:var(--shell-drawer-w);
    inset-inline-start:calc(-1 * var(--shell-drawer-w));
    z-index:70;
    box-shadow:var(--elev-float);
    padding-block:12px;
    transition:inset-inline-start .25s var(--ease-out,ease);
  }
  .gapp-sidebar.is-open{ inset-inline-start:0 }
  /* .is-expanded (0,2,0) גובר על .gapp-sidebar הבסיסי גם בתוך media query זה,
     כי specificity לא מושפעת מ-@media — בלי השורה הבאה, מגירה שנפתחת כשמצב
     "מורחב" נשמר מהדסקטופ ב-localStorage מקבלת את רוחב ה-rail (232px) במקום
     רוחב המגירה (300px). נמצא ב-Playwright, לא נוחש. */
  .gapp-sidebar.is-expanded{ width:var(--shell-drawer-w) }
  .gapp-toggle{ display:none }   /* אין קיפול/הרחבה במגירה — תמיד מלא */

  body.gapp-shell-on #main,
  body.gapp-shell-on .foot,
  body.gapp-shell-on.gapp-shell-expanded #main,
  body.gapp-shell-on.gapp-shell-expanded .foot{
    padding-inline-start:0;
    padding-block-end:calc(var(--shell-bottombar) + env(safe-area-inset-bottom,0px));
  }

  .gapp-bottombar{
    display:flex; align-items:stretch; justify-content:space-around;
    position:fixed; inset-inline:0; bottom:0;
    height:var(--shell-bottombar);
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--bg-elev);
    border-block-start:1px solid var(--line);
    z-index:55;
  }

  /* ווידג'ט הנגישות יושב גם הוא בפינה תחתונה — מזיזים אותו מעל הבר החדש
     כדי שלא יתנגשו. ראה a11y.js / .a11y-root ב-style.css. */
  body.gapp-shell-on .a11y-root{
    inset-block-end:calc(var(--shell-bottombar) + 14px + env(safe-area-inset-bottom,0px));
  }
  /* W-143 (axe target-size on /blocked, signed in, 390px): the report/safety button (report.js .rpt-fab, bottom 18px, z 8500) sat ON the
     bottom bar and hid 78x18px of its first item. Same rule as the accessibility button above, same 14px gap; the menu it opens rises with
     it (it was fixed at 78px = 18 + 52 + 8). Specificity (0,2,1) beats the 0,1,0 style report.js injects, whatever the order. */
  body.gapp-shell-on .rpt-fab{
    inset-block-end:calc(var(--shell-bottombar) + 14px + env(safe-area-inset-bottom,0px));
  }
  body.gapp-shell-on .rpt-menu{
    inset-block-end:calc(var(--shell-bottombar) + 74px + env(safe-area-inset-bottom,0px));
  }
}

.gapp-bottom-item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-width:44px; min-height:44px;
  color:var(--ink-2); text-decoration:none; background:none; border:0;
  font:inherit; cursor:pointer; padding:0;
}
.gapp-bottom-item .gapp-icon{ flex-basis:24px; inline-size:24px; block-size:24px }
.gapp-bottom-item .gapp-icon svg{ inline-size:22px; block-size:22px }
.gapp-bottom-label{ font-size:10.5px; font-weight:600; line-height:1.2 }
.gapp-bottom-item[aria-current="page"]{ color:var(--accent-ink) }
.gapp-bottom-item[aria-expanded="true"]{ color:var(--accent-ink) }

/* הפריט המרכזי ("פרסום פעילות") — הפעולה הראשית של הבר, ולכן קורל.
   בדיוק אותו כלל שכבר חל על .btn ו-.spec-when .dot ב-style.css. */
.gapp-bottom-primary .gapp-icon{
  inline-size:36px; block-size:36px; flex-basis:36px;
  border-radius:50%;
  background:var(--brand); color:var(--brand-ink);
  box-shadow:var(--shadow-1);
  margin-block-end:-2px;
}
.gapp-bottom-primary .gapp-icon svg{ inline-size:20px; block-size:20px }
.gapp-bottom-primary{ color:var(--ink-2) }

/* ==========================================================================
   3 · העדפות מערכת — ההעברה הכללית שכבר קיימת ב-style.css (סעיף 18) מכסה
   גם את המעברים כאן (transition-duration:120ms!important). זה כאן מפורש
   ומיועד לכפתור ההתחברות (style.css) — לא נדרש כאן דבר נוסף למדף/למגירה.
   ========================================================================== */

/* ==========================================================================
   4 · תפריט החשבון בנייד צר — QA, 04.10.2026
   style.css (max-width:400px) נותן ל-.nav nav גלילה אופקית פנימית, כדי
   שקישורי הניווט של מבקר מנותק לא ידחפו את העמוד. אבל overflow-x:auto הופך
   את ה-nav למיכל גלילה, ותפריט החשבון (position:absolute בתוך .acct) נחתך
   בתוכו: בנייד, לחיצה על הכפתור פתחה תפריט בלתי-נראה, ו"התנתקות" ו"החשבון
   וההגדרות שלי" לא היו נגישים בכלל. נמדד ב-Playwright ב-390px, בעברית
   ובאנגלית (elementFromPoint על #acct-out החזיר אלמנט מתחת לתפריט).
   כשהמעטפת מותקנת (משתמש מחובר) app-shell.js מסתיר את קישורי ה-<a> הישנים
   בכותרת, וב-nav נשאר רק .acct, ולכן אין מה לגלול ואפשר להחזיר overflow
   גלוי. מבקר מנותק לא מושפע: הכלל חל רק על body.gapp-shell-on.
   ========================================================================== */
@media (max-width:400px){
  body.gapp-shell-on .nav nav{ overflow:visible }
}