/* ───── App shell — סרגל ניווט צדי + סרגל עליון (Step 1) ─────────────────
   RTL: inset-inline-start = הקצה הימני. הגוף ממשיך לגלול — אין scroller חדש. */
:root{
  --nav-bg:#08384a; --nav-fg:#e7f1f5; --nav-sub:#b9cfd9; --nav-caption:#dbe9f0;
  --nav-muted:#8aa8b6; --nav-brand:#4fb8d8;
  --nav-line:rgba(255,255,255,.09); --nav-line-strong:rgba(255,255,255,.18);
  --nav-hover:rgba(255,255,255,.07); --nav-selected:rgba(255,255,255,.10);
  --nav-switch:rgba(255,255,255,.06);
  --nav-locked-opacity:.45; --nav-w:268px; --nav-w-rail:68px; --topbar-h:56px;   /* 268 = compact; roomy would be 292 */
}

/* מצב כהה — גוון הסרגל הצדי מוזז כדי שיישאר מובחן מהעמוד הכהה, לא נבלע בו. */
:root[data-theme="dark"]{
  --nav-bg:var(--nav-dark-bg); --nav-fg:var(--nav-dark-fg); --nav-sub:var(--nav-dark-sub);
  --nav-caption:var(--nav-dark-caption); --nav-muted:var(--nav-dark-muted); --nav-brand:var(--nav-dark-brand);
  --nav-line:rgba(255,255,255,.07); --nav-line-strong:rgba(255,255,255,.14);
  --nav-hover:rgba(255,255,255,.06); --nav-selected:rgba(255,255,255,.09);
  --nav-switch:rgba(255,255,255,.05);
}

body.has-app-nav{ padding-inline-start:var(--nav-w); }
html.nav-rail body.has-app-nav{ padding-inline-start:var(--nav-w-rail); }
@media (max-width:1100px){ body.has-app-nav{ padding-inline-start:var(--nav-w-rail); } }

.app-nav{
  position:fixed; inset-inline-start:0; top:0; bottom:0; z-index:40;
  width:var(--nav-w); display:flex; flex-direction:column;
  background:var(--nav-bg); transition:width .18s ease;
}
html.nav-rail .app-nav{ width:var(--nav-w-rail); }
@media (max-width:1100px){ .app-nav{ width:var(--nav-w-rail); } }

/* ── head — transcribed from the v2 mockup, lines 50-60. Do not round. ──── */
.app-nav-head{ flex:none; display:flex; align-items:center; gap:10px; padding:14px 14px 12px; border-bottom:1px solid var(--nav-line); }
.app-nav-logo{ width:40px; height:40px; flex:none; border-radius:9px; background:#fff; box-sizing:border-box; position:relative; overflow:hidden; }  /* rule-exempt: css-light-literal — logo plate stays white behind the transparent-background logo image in both themes (TAK-984) */
/* ה-JPEG מגיע עם שוליים לבנים מובנים — 210% עם היסט שלילי חותך אותם.
   אל תחליפו ב-inset:0 / 100% — הלוגו ייראה קטן בתוך ריבוע לבן. */
.app-nav-logo img{ position:absolute; width:210%; height:210%; left:-55%; top:-13%; object-fit:contain; }
.app-nav-brand{ flex:1; min-width:0; }
.app-nav-brand-name{ font:700 21px/1.1 var(--font-display); color:var(--nav-fg); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-nav-brand-name .plan{ font-style:normal; font-weight:400; color:var(--nav-brand); }
.app-nav-brand-sub{ margin-top:2px; font:400 11px var(--font-body); color:var(--nav-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-nav-rail-btn{ flex:none; width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,.22); background:var(--nav-switch); color:var(--nav-muted); cursor:pointer; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; }  /* rule-exempt: css-light-literal — faint highlight on the always-dark sidebar rail, not theme-reactive (TAK-984) */
.app-nav-rail-btn:hover{ background:rgba(255,255,255,.08); color:var(--nav-fg); }  /* rule-exempt: css-light-literal — faint highlight on the always-dark sidebar rail, not theme-reactive (TAK-984) */

.app-nav-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; box-sizing:border-box; padding:8px 8px 4px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
.app-nav-scroll::-webkit-scrollbar{ width:9px }
.app-nav-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.26); border-radius:6px; border:3px solid transparent; background-clip:content-box }  /* rule-exempt: css-light-literal — faint scrollbar thumb on the always-dark sidebar, not theme-reactive (TAK-984) */

/* ── tenant card — from the v2 mockup, lines 64-75. It is the FIRST item inside
   the scroll area, not part of the head. */
.app-nav-tenant{ position:relative; margin:2px 4px 12px; padding:10px; border-radius:10px; background:var(--nav-switch); border:1px solid rgba(255,255,255,.12); }  /* rule-exempt: css-light-literal — faint border on the always-dark sidebar tenant card, not theme-reactive (TAK-984) */
.app-nav-tenant-cap{ font:600 10.5px var(--font-display); letter-spacing:.08em; color:var(--nav-muted); margin-bottom:7px }
.app-nav-ident{ width:100%; display:flex; align-items:center; gap:9px; background:transparent; border:none; padding:0; font-family:inherit; text-align:start; }
button.app-nav-ident{ cursor:pointer; }
button.app-nav-ident:hover{ opacity:.85; }
.app-nav-ident-text{ flex:1; min-width:0; }
.app-nav-ident-name{ display:block; font:600 13px var(--font-body); color:var(--nav-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-nav-ident-slug{ display:block; font:400 10.5px var(--font-mono); direction:ltr; color:var(--nav-muted); }
.app-nav-ident-glyph{ flex:none; font-size:10px; color:var(--nav-muted); }   /* ⇅ — system_admin only */

/* disconnected state — mockup lines 115-120 (§6). Swaps the tenant-card
   contents entirely when a system_admin has no active tenant. */
.app-nav-noconn-title{ font:600 12.5px var(--font-body); color:var(--nav-fg); margin-bottom:3px }
.app-nav-noconn-body { font:400 11.5px/1.45 var(--font-body); color:var(--nav-muted); margin-bottom:8px }
.app-nav-noconn-btn  { width:100%; min-height:32px; border-radius:6px; border:1px solid var(--brand-primary); background:var(--brand-primary); color:#fff; font:600 12.5px var(--font-body); cursor:pointer }

.app-nav-group{ margin-bottom:9px }
.app-nav-caption{ display:flex; align-items:center; gap:11px; padding:10px 10px 6px; font:600 14.5px var(--font-body); color:var(--nav-caption); }
.app-nav-caption .ic{ flex:none; width:18px; text-align:center; font-size:15px }
.app-nav-caption .lbl{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* TAK-102: the caption is now a <button> (AC-13, native keyboard semantics —
   Tab + Enter/Space, no custom key handling needed). */
button.app-nav-caption{ width:100%; background:none; border:0; font-family:inherit; text-align:start; cursor:pointer }
button.app-nav-caption:hover{ background:var(--nav-hover) }
button.app-nav-caption:focus-visible{ outline:2px solid var(--nav-brand); outline-offset:-2px }
.app-nav-chevron{ flex:none; font-size:11px; color:var(--nav-muted); transition:transform .18s ease }
.app-nav-group.is-open .app-nav-chevron{ transform:rotate(180deg) }

/* פריטי משנה: ללא אייקון, מוזחים מתחת לכותרת הקבוצה */
.app-nav-link{
  position:relative; box-sizing:border-box; display:flex; align-items:center;
  width:100%; padding:7px 10px; padding-inline-start:39px;
  border:0; border-radius:8px; background:transparent; color:var(--nav-sub);
  font:400 13px var(--font-body); text-align:start; text-decoration:none; cursor:pointer;
}
.app-nav-link:hover{ background:var(--nav-hover); color:var(--nav-fg); text-decoration:none }
.app-nav-link.active{ background:var(--nav-selected); color:var(--nav-fg); font-weight:600 }
html.nav-rail .app-nav-link{ padding:9px 8px }
.app-nav-link.active::before{ content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--nav-brand); }
.app-nav-link:focus-visible{ outline:2px solid var(--nav-brand); outline-offset:-2px }

/* TAK-1018 C1-T6 — a module the municipality's plan excludes. The locked
   entry stays hoverable (NO pointer-events:none): a title tooltip only shows
   on an element the pointer can reach, and the tooltip is the explanation. */
.app-nav-locked-caption{ display:flex; align-items:center; gap:11px; padding:10px 10px 6px; font:600 14.5px var(--font-body); color:var(--nav-caption); }
.app-nav-locked-caption .ic{ flex:none; width:18px; text-align:center; font-size:15px }
.app-nav-locked-caption .lbl{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.app-nav-locked-icon{ display:none; box-sizing:border-box; width:100%; align-items:center; justify-content:center; padding:9px 0; color:var(--nav-fg); font-size:16px }
.app-nav-locked-caption.is-locked,
.app-nav-locked-icon.is-locked,
.app-nav-link.is-locked{ cursor:not-allowed }
/* Dim the label/icon/lock; the reason lives in the title tooltip and a visually-hidden aria-describedby target (Bootstrap .visually-hidden). */
.is-locked .ic,.is-locked .lbl,.is-locked .app-nav-lock,.app-nav-locked-icon.is-locked{ opacity:var(--nav-locked-opacity) }
.app-nav-link.is-locked{ gap:6px }
.app-nav-link.is-locked:hover{ background:transparent; color:var(--nav-sub) }
.app-nav-lock{ flex:none; font-size:12px }
html.nav-rail .app-nav-locked-caption{ display:none }
html.nav-rail .app-nav-locked-icon{ display:flex }
@media (max-width:1100px){
  .app-nav-locked-caption{ display:none }
  .app-nav-locked-icon{ display:flex }
}

/* section_header — תווית לא-לחיצה בתוך קבוצה (TAK-440). לא <a>, לא active.
   TAK-102 AC-25: aligned with an item's own text start (39px, same as
   .app-nav-link above), same font-size as an item, distinguished by colour
   + weight, separator above it (the existing .app-nav-sep, no new element). */
.app-nav-subhead{ display:block; padding:9px 10px 4px; padding-inline-start:39px; font:600 13px var(--font-display); letter-spacing:.01em; color:var(--nav-brand); }
.app-nav-sep{ height:1px; margin:6px 10px; background:var(--nav-line); }

/* rail: כל קבוצה מתכווצת לאייקון בודד. TAK-102 AC-08: no longer a link — a
   button that opens a flyout (app_nav.js, DT5) instead of navigating. */
.app-nav-group-icon{ display:none; box-sizing:border-box; width:100%; align-items:center; justify-content:center; padding:9px 0; border:0; font-family:inherit; border-radius:8px; background:transparent; color:var(--nav-fg); font-size:16px; cursor:pointer; text-decoration:none; position:relative; }
.app-nav-group-icon:hover{ background:var(--nav-hover) }

/* TAK-102: the accordion — every group's items are always in the DOM (D-01),
   hidden here and shown only for the open group. */
.app-nav-group-items{ display:none }
.app-nav-group.is-open .app-nav-group-items{ display:block }

/* TAK-102: the rail flyout title row — hidden in the expanded sidebar, shown
   only inside an open flyout (below). */
.app-nav-rail-flyout-title{ display:none }

/* TAK-102 rail flyout (AC-08/AC-09, clamped per D-16 in app_nav.js). Order
   matters: both blocks below share specificity (0,3,1), so the flyout rule
   must come SECOND to win when a group is simultaneously is-open (server-
   rendered) and is-flyout-open (user-clicked in rail mode). */
html.nav-rail .app-nav-group.is-open .app-nav-group-items{ display:none }
html.nav-rail .app-nav-group.is-flyout-open .app-nav-group-items{
  display:block; position:fixed; z-index:90; min-width:220px; max-width:280px;
  max-height:calc(100vh - 16px); overflow-y:auto; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:6px;
}
/* Inside the flyout, re-show and re-tone the children rail mode otherwise
   hides/darkens — the flyout is a light popup, not the dark sidebar. */
html.nav-rail .app-nav-group.is-flyout-open .app-nav-rail-flyout-title{
  display:block; font:700 11px var(--font-display); color:var(--ink-500);
}
html.nav-rail .app-nav-group.is-flyout-open .app-nav-link{
  display:flex; padding:7px 10px; padding-inline-start:10px; color:var(--ink-700);
  border-radius:var(--radius-sm);
}
html.nav-rail .app-nav-group.is-flyout-open .app-nav-link:hover{ background:var(--ink-100); color:var(--ink-900) }
html.nav-rail .app-nav-group.is-flyout-open .app-nav-link.active{
  background:var(--brand-primary-soft); color:var(--brand-primary-text); font-weight:600;
}
html.nav-rail .app-nav-group.is-flyout-open .app-nav-link.active::before{ display:none }
html.nav-rail .app-nav-group.is-flyout-open .app-nav-subhead{ display:block; color:var(--ink-500) }
html.nav-rail .app-nav-group.is-flyout-open .app-nav-sep{ background:var(--border) }

/* nowrap: theme (right) / version (middle, shrinks+truncates) / lang (left)
   must stay one row — wrapping was scrambling that order (a long unreleased
   build string with the date pushed the row onto 3 separate lines). */
.app-nav-foot{ flex:none; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; padding:8px 10px 10px; border-top:1px solid var(--nav-line) }
.app-nav-ver{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 10.5px var(--font-mono); direction:ltr; text-align:center; color:var(--nav-muted) }
/* כפתור השפה — מוקאפ שורה 191. מחליף את זוג ה-pills שבתפריט המשתמש. */
.app-nav-lang{ flex:none; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:6px; height:28px; padding:0 9px; border-radius:8px; border:1px solid var(--nav-line-strong); background:var(--nav-switch); color:var(--nav-fg); font:600 11px var(--font-body); cursor:pointer }
.app-nav-lang:hover{ background:rgba(255,255,255,.12) }  /* rule-exempt: css-light-literal — faint highlight on the always-dark sidebar footer, not theme-reactive (TAK-984) */
.app-nav-lang .globe{ font-size:13px; opacity:.85 }
html.nav-rail .app-nav-lang span:not(.globe){ display:none }
html.nav-rail .app-nav-lang{ width:28px; padding:0 }
@media (max-width:1100px){
  .app-nav-lang span:not(.globe){ display:none }
  .app-nav-lang{ width:28px; padding:0 }
}
/* כפתור מצב-כהה (מוקאפ שורה 187). */
.app-nav-theme{ flex:none; box-sizing:border-box; width:28px; height:28px; border-radius:8px; border:1px solid var(--nav-line-strong); background:var(--nav-switch); color:var(--nav-fg); cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; }
.app-nav-theme:hover{ background:rgba(255,255,255,.12) }  /* rule-exempt: css-light-literal — faint highlight on the always-dark sidebar footer, not theme-reactive (TAK-984) */

html.nav-rail .app-nav-brand,
html.nav-rail .app-nav-tenant-cap,
html.nav-rail .app-nav-ident,
html.nav-rail .app-nav-noconn-title,
html.nav-rail .app-nav-noconn-body,
html.nav-rail .app-nav-caption,
html.nav-rail .app-nav-link,
html.nav-rail .app-nav-subhead,
html.nav-rail .app-nav-sep,
html.nav-rail .app-nav-ver{ display:none }
html.nav-rail .app-nav-group-icon{ display:flex }
html.nav-rail .app-nav-head{ flex-direction:column; gap:8px; padding:12px 8px 10px }
html.nav-rail .app-nav-logo{ width:34px; height:34px }      /* 40 → 34 in the rail */
html.nav-rail .app-nav-rail-btn{ width:100% }
html.nav-rail .app-nav-foot{ flex-direction:column; padding:8px 8px 10px }
html.nav-rail .app-nav-lang,
html.nav-rail .app-nav-theme{ width:100% }
@media (max-width:1100px){
  .app-nav-brand,.app-nav-tenant-cap,.app-nav-ident,.app-nav-noconn-title,.app-nav-noconn-body,
  .app-nav-caption,.app-nav-subhead,.app-nav-sep,.app-nav-ver{ display:none }
  .app-nav-link{ display:none }
  .app-nav-logo{ width:34px; height:34px }
  .app-nav-rail-btn,.app-nav-lang,.app-nav-theme{ width:100% }
  .app-nav-group-icon{ display:flex }
  .app-nav-head{ flex-direction:column; gap:8px; padding:12px 8px 10px }
  .app-nav-foot{ flex-direction:column }

  /* TAK-102: the auto-rail breakpoint is a second, independent rail mode —
     mirrors every html.nav-rail rail-flyout rule above verbatim, or the
     narrow-viewport auto-rail would have no working flyout. Order matters
     here too: is-open before is-flyout-open (equal specificity). */
  .app-nav-group.is-open .app-nav-group-items{ display:none }
  .app-nav-group.is-flyout-open .app-nav-group-items{
    display:block; position:fixed; z-index:90; min-width:220px; max-width:280px;
    max-height:calc(100vh - 16px); overflow-y:auto; background:var(--surface);
    border:1px solid var(--border-strong); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); padding:6px;
  }
  .app-nav-group.is-flyout-open .app-nav-rail-flyout-title{
    display:block; font:700 11px var(--font-display); color:var(--ink-500);
  }
  .app-nav-group.is-flyout-open .app-nav-link{
    display:flex; padding:7px 10px; padding-inline-start:10px; color:var(--ink-700);
    border-radius:var(--radius-sm);
  }
  .app-nav-group.is-flyout-open .app-nav-link:hover{ background:var(--ink-100); color:var(--ink-900) }
  .app-nav-group.is-flyout-open .app-nav-link.active{
    background:var(--brand-primary-soft); color:var(--brand-primary-text); font-weight:600;
  }
  .app-nav-group.is-flyout-open .app-nav-link.active::before{ display:none }
  .app-nav-group.is-flyout-open .app-nav-subhead{ display:block; color:var(--ink-500) }
  .app-nav-group.is-flyout-open .app-nav-sep{ background:var(--border) }
}

/* ---- topbar ---- */
.app-topbar{
  /* z-index 1500: must beat .empty-tenant-banner's z-index:1000 (_layout.css,
     unmodified) — both are sticky siblings, banner right below the topbar
     (top:var(--topbar-h)), and without this the banner's much higher z-index
     let it paint over the topbar on any overlap. Still well under every
     modal's z-index (2000-9000, macros/modal.html), so a modal still opens
     over both. */
  position:sticky; top:0; z-index:1500;            /* ← static אם בחרתם בלי §4 */
  display:flex; align-items:center; gap:14px; padding:0 16px;
  height:var(--topbar-h);   /* 56px — mockup line 213 */ background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.app-crumbs{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; overflow:hidden }
/* TAK-102 AC-11: button-weight chip, not a bare emoji — every value a token. */
.app-crumb-home{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-inline-end:2px; flex:none;
  border-radius:var(--radius-md); background:var(--brand-primary-soft);
  border:1px solid var(--border); font-size:17px; line-height:1; text-decoration:none;
}
.app-crumb-home:hover{ border-color:var(--brand-accent) }
.app-crumb-home:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px }
.app-topbar .breadcrumb{ display:flex; align-items:center; gap:7px; flex-wrap:nowrap; list-style:none; margin:0; padding:0; overflow:hidden }
.app-topbar .breadcrumb li{ display:flex; align-items:center; min-width:0 }
.app-topbar .breadcrumb a.crumb{ font:400 var(--text-base) var(--font-body); color:var(--brand-primary-text); white-space:nowrap; text-decoration:none }
.app-topbar .breadcrumb a.crumb:hover{ text-decoration:underline }
.app-topbar .breadcrumb .crumb-plain{ font:400 var(--text-base) var(--font-body); color:var(--ink-500); white-space:nowrap }
.app-topbar .breadcrumb .crumb-current{ font:600 var(--text-base) var(--font-body); color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.app-topbar .crumb-sep{ font-size:12px; color:var(--ink-400); line-height:1; user-select:none }
.app-topbar-sep{ flex:none; width:1px; height:20px; background:var(--border) }

/* the user menu moved from a dark gradient header onto white — colour only */
.app-topbar .user-menu-toggle{ background:var(--surface); border:1px solid var(--border); color:var(--ink-700); }
.app-topbar .user-menu-toggle:hover{ background:var(--ink-50); }
.app-topbar .user-menu-avatar{ background:var(--brand-primary); color:#fff; }
/* .user-menu-wrap's own rule (_layout.css) is `position:absolute; left:11.5rem;
   top:0.6rem` — leftover from when it sat inside the old wide .header, pinned
   at a fixed offset from that header's own left edge. .app-topbar is a
   different, narrower container and is itself position:sticky (a positioning
   context), so that stale rule was placing the toggle at a fixed 11.5rem from
   the topbar's left edge, floated out of the flex row entirely, instead of
   flowing as this row's last flex item (which — .app-topbar being RTL — is
   the true left edge). Reset it back into flow; .user-menu-dropdown's own
   `position:absolute` still anchors correctly off this relatively-positioned
   wrap. */
.app-topbar .user-menu-wrap{ position:relative; left:auto; top:auto; }

/* ── §4: sticky-topbar interaction — identical selectors to tables.css /
   _layout.css, later in the cascade, so they win on order alone. ── */
.rpt thead th        { top: var(--topbar-h); }
.empty-tenant-banner { top: var(--topbar-h); }