/* מכללת תרפיית מימדים — theme.css — שפת עיצוב "מותג עמוק" (חלק 1: טוקנים ובסיס) */
/* Ploni is declared HERE (once) so every screen that loads theme.css — admin, set-password,
   student — renders the brand face. It used to live inline in index.html only, so the
   admin screens and the set-password page silently fell back to Assistant/system. */
/* Jo 15.09 anti-jump (measured, real page): font-display:swap re-flowed EVERY screen
   ~300ms after first paint (tabs 37→40px, KPI row 192→208px, tiles 213→222px — the
   whole page shifted 3-70px on every load/navigation). `optional` = the font is used
   when it's ready BEFORE first paint (it always is on our devices: the woff2 files are
   unversioned + long-cached + preloaded), and NEVER swaps in mid-view — zero reflow.
   Only a truly first-ever visit paints one view in the fallback face. */
@font-face{font-family:'Ploni';src:url('fonts/ploni-light.woff2') format('woff2');font-weight:300;font-display:optional}
@font-face{font-family:'Ploni';src:url('fonts/ploni-regular.woff2') format('woff2');font-weight:400;font-display:optional}
@font-face{font-family:'Ploni';src:url('fonts/ploni-medium.woff2') format('woff2');font-weight:500;font-display:optional}
@font-face{font-family:'Ploni';src:url('fonts/ploni-demibold.woff2') format('woff2');font-weight:600;font-display:optional}
@font-face{font-family:'Ploni';src:url('fonts/ploni-bold.woff2') format('woff2');font-weight:700;font-display:optional}
/* portalNotice() (portal-common.js) renders errors into #portal-notice. Styled here so the
   admin screens (which do not load portal-common.css) show them as a toast, not as plain
   text appended under the page. */
#portal-notice{position:fixed;inset:12px 12px auto;z-index:10000;max-width:700px;margin:auto;padding:14px 16px;border:1px solid #c17b20;border-radius:14px;background:#fff8e8;color:#633900;box-shadow:0 5px 24px #0002;font:500 15px/1.5 'Ploni','Assistant',Arial,sans-serif;display:flex;align-items:center;gap:16px}
#portal-notice button{margin-inline-start:auto;border:0;background:transparent;color:inherit;font:inherit;min-height:44px;cursor:pointer}
:root{
  --brand-deep:#131040; --brand-mid:#2b1670; --brand-purple:#7C10DE;
  --brand-purple2:#9333EA; --brand-violet:#A855F7; --brand-deep-text:#5a1eb8;
  --bg:#F4F2FA; --surface:#FFFFFF; --surface-soft:#F7F4FD; --accent-soft:#F1E8FD;
  --line:#EAE6F5; --line2:#F0EDF8;
  --ink:#1c1633; --ink2:#4a4360; --muted:#6b6480; --faint:#767090;
  --ok:#1f9d4d; --ok-soft:#E7F8EC; --warn:#a06b00; --warn-soft:#FCF3DD;
  --err:#d84a3f; --err-soft:#FDECEC; --info:#1d6fd8; --info-soft:#E6F0FE;
  --grad-header:linear-gradient(160deg,#131040 0%,#2b1670 55%,#5a1eb8 100%);
  --grad-sidebar:linear-gradient(175deg,#131040,#231060);
  --grad-cta:linear-gradient(135deg,#7C10DE,#9333EA);
  --grad-bar:linear-gradient(90deg,#7C10DE,#A855F7);
  --r-card:20px; --r-sub:16px; --r-chip:999px; --r-icon:12px;
  --sh-float:0 10px 30px rgba(30,15,80,.10);
  --sh-card:0 4px 14px rgba(30,15,80,.05);
  --sh-cta:0 10px 30px rgba(124,16,222,.45);
  /* legacy aliases — ישנם מסכים/שכבות שקוראים ל---accent */
  --accent:var(--brand-purple);--accent2:var(--brand-violet);
  --font:'Ploni','Assistant',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--brand-purple);text-decoration:none}
a:hover{color:var(--brand-deep-text)}
input,select,textarea,button{font-family:inherit}
/* מסכי תלמיד: מובייל = אפליקציה 480; דסקטופ = פריסה רחבה (הכללים הרספונסיביים של index גוברים) */
.app{max-width:480px;margin:0 auto}
@media(min-width:900px){.app{max-width:none}}

/* ---------- כותרת מובייל ---------- */
.tm-header{background:var(--grad-header);color:#fff;padding:16px 20px 56px}
.tm-header .tm-title{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:9px}
.tm-header .tm-sub{font-size:0.7812rem;color:#c9b6f5;margin-top:3px}
.tm-content{margin-top:-32px;padding:0 16px 88px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
/* ---------- כרטיסים ---------- */
.tm-card{background:var(--surface);border-radius:var(--r-card);padding:16px;box-shadow:var(--sh-card)}
.tm-card--float{box-shadow:var(--sh-float)}
.tm-subcard{background:var(--surface-soft);border-radius:var(--r-sub);padding:13px 15px}
.tm-soft{background:var(--accent-soft);border-radius:var(--r-sub);padding:13px 15px}
/* ---------- כפתורים ---------- */
.tm-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:var(--r-chip);padding:12px 20px;font-weight:700;font-size:0.875rem;transition:filter .15s,transform .1s}
.tm-btn:active{transform:scale(.98)}
.tm-btn:hover{filter:brightness(1.05)}
.tm-btn--primary{background:var(--grad-cta);color:#fff}
.tm-btn--primary.on-dark{box-shadow:var(--sh-cta)}
.tm-btn--secondary{background:var(--surface);border:1.5px solid #E4DCF6;color:var(--brand-purple)}
.tm-btn--ghost{background:var(--accent-soft);color:var(--brand-purple)}
.tm-btn--danger{background:var(--surface);border:1.5px solid #E4DCF6;color:var(--err)}
.tm-btn--sm{padding:8px 14px;font-size:0.75rem;border-radius:10px}
/* ---------- צ'יפים ---------- */
.tm-chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-chip);padding:3px 10px;font-size:0.75rem;font-weight:700}
/* UX-35: inline-flex above used to override the hidden attribute — empty "ghost" chips showed as gray dots */
.tm-chip[hidden]{display:none!important}
.tm-chip--ok{background:var(--ok-soft);color:var(--ok)}
.tm-chip--warn{background:var(--warn-soft);color:var(--warn)}
.tm-chip--err{background:var(--err-soft);color:var(--err)}
.tm-chip--info{background:var(--info-soft);color:var(--info)}
.tm-chip--brand{background:var(--accent-soft);color:var(--brand-purple)}
.tm-chip--muted{background:#F0F0F4;color:var(--muted)}
/* רשימה לבנה גנרית (דסק פניות ועוד) */
.tm-list{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.tm-list .tm-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.tm-list .tm-row:last-child{border-bottom:0}
.tm-chip--lg{padding:5px 14px;font-size:0.75rem}
/* ---------- התקדמות / אווטאר / מתג ---------- */
.tm-progress{height:6px;background:#EDE7FA;border-radius:99px;overflow:hidden}
.tm-progress>i{display:block;height:100%;background:var(--grad-bar);border-radius:99px}
.tm-progress--ok>i{background:linear-gradient(90deg,#1f9d4d,#34c759)}
.tm-avatar{width:38px;height:38px;border-radius:50%;background:#EDE7FA;color:var(--brand-deep-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.875rem;flex-shrink:0}
.tm-avatar--grad{background:var(--grad-cta);color:#fff}
.tm-toggle{width:40px;height:23px;border-radius:99px;background:#D9D3EA;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.tm-toggle::after{content:'';position:absolute;top:2.5px;inset-inline-start:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tm-toggle.on{background:var(--brand-purple)}
.tm-toggle.on::after{inset-inline-start:19.5px}
/* ---------- שדות ---------- */
.tm-label{font-size:0.75rem;font-weight:600;color:var(--muted);margin:0 4px 6px;display:block}
.tm-input{width:100%;background:var(--bg);border:0;border-radius:12px;padding:12px 14px;font-size:0.8438rem;font-weight:600;color:var(--ink);outline:2px solid transparent;transition:outline-color .15s}
.tm-input:focus{outline-color:var(--brand-violet);background:#fff}
.tm-input::placeholder{color:var(--faint);font-weight:500}
.tm-input--dark{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:14px;padding:14px}
.tm-input--dark::placeholder{color:#8f85b5}
/* ---------- בר ניווט תחתון — חובה אח של .app, לא בתוכה (fixes.md §2) ---------- */
.tm-nav{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid #E8E4F4;display:flex;justify-content:space-around;padding:10px 8px calc(6px + env(safe-area-inset-bottom));transform:translateZ(0)}
.tm-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:0.75rem;font-weight:600;color:var(--faint);padding-top:5px;position:relative;min-width:52px;min-height:44px}
.tm-nav a svg{stroke:var(--faint)}
.tm-nav a.active{color:var(--brand-purple);font-weight:700;padding-top:0}
.tm-nav a.active svg{stroke:var(--brand-purple)}
.tm-nav a.active .ico{background:var(--accent-soft);border-radius:12px;padding:5px 16px}
.tm-nav .badge{position:absolute;top:-3px;inset-inline-end:2px;background:var(--err);color:#fff;border-radius:99px;padding:0 5px;font-size:0.5625rem;font-weight:800}
/* ---------- סיידבר דסקטופ ---------- */
.tm-sidebar{width:68px;background:var(--grad-sidebar);display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:6px;flex-shrink:0;min-height:100vh;min-height:100dvh;position:sticky;top:0;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.tm-sidebar::-webkit-scrollbar{display:none}
.tm-sidebar .item{width:44px;height:44px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tm-sidebar .item svg{stroke:#8f85b5}
.tm-sidebar .item.active{background:rgba(168,85,247,.25)}
.tm-sidebar .item.active svg{stroke:#e5d5ff}
.tm-sidebar .item:hover{background:rgba(255,255,255,.07)}
.tm-sidebar .item--pulse svg{stroke:#12b5a6}
.tm-sidebar .item--pulse:hover{background:rgba(18,181,166,.14)}
/* ---------- טבלאות הנהלה ---------- */
.tm-table{background:var(--surface);border-radius:var(--r-sub);box-shadow:var(--sh-card);overflow:hidden}
.tm-table .thead{display:grid;gap:10px;padding:11px 18px;background:#FBFAFE;border-bottom:1px solid var(--line2);font-size:0.7188rem;font-weight:700;color:var(--muted)}
.tm-table .trow{display:grid;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line2);align-items:center}
.tm-table .trow:last-child{border-bottom:0}
.tm-table .trow:hover{background:#FBF9FE}
/* ---------- פירורי לחם + קיקר ---------- */
.tm-crumbs{font-size:0.875rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.4}
.tm-crumbs b{color:var(--brand-purple);font-weight:700}
.tm-crumbs a{color:var(--muted);font-weight:600;text-decoration:none;border-radius:8px;padding:3px 7px;margin:-3px -7px;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;cursor:pointer}
.tm-crumbs a:hover,.tm-crumbs a:focus-visible{color:var(--brand-purple);background:rgba(124,58,237,.09);text-decoration:none;outline:none}
.tm-crumbs a:active{background:rgba(124,58,237,.16)}
.tm-crumbs .sep{color:var(--faint);font-weight:600;opacity:.7}
@media(max-width:640px){.tm-crumbs{font-size:0.9375rem;gap:6px}.tm-crumbs a{padding:5px 8px;margin:-5px -8px}}
.tm-kicker{font-size:0.75rem;font-weight:700;color:var(--brand-purple)}
/* ---------- באנר אופליין ---------- */
.tm-offline{background:#1c1c1e;border-radius:var(--r-sub);padding:13px 16px;display:flex;align-items:center;gap:11px;color:#fff}
.tm-offline .t{font-weight:700;font-size:0.8125rem}
.tm-offline .d{font-size:0.7188rem;color:#a8a8b0}
/* ---------- מצב ריק ---------- */
.tm-empty{background:var(--surface);border-radius:var(--r-card);padding:34px 20px;text-align:center;box-shadow:var(--sh-card)}
.tm-empty .ico{width:60px;height:60px;border-radius:20px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto}
.tm-empty .t{font-weight:800;font-size:0.9375rem;margin-top:12px}
.tm-empty .d{font-size:0.7812rem;color:var(--muted);margin-top:5px;line-height:1.6}
/* ---------- select — שפת מותג בכל המסכים ---------- */
select{appearance:none;-webkit-appearance:none;font-family:'Ploni','Assistant',system-ui,sans-serif;font-weight:600;color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C10DE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;background-size:14px;padding-inline-start:34px}
select:focus{outline:none;border-color:var(--brand-violet)}
select option{font-family:'Ploni','Assistant',system-ui,sans-serif;font-weight:600;color:#1c1633;background:#fff}
select option:checked{background:#F1E8FD;color:#5a1eb8}
/* ---------- design sweep 15.10.2026: the chevron is non-negotiable ----------
   Local component rules all over the portal set `background:<shorthand>` on
   selects (.tm-input, desk .rt-sel/.dk-filters/.dk-modal, office .in, videos
   .tools...). The shorthand resets background-image -> the brand chevron
   vanished while `appearance:none` above already removed the native arrow =
   dropdowns rendered as plain pills (Jo, incontrol 15.10). The arrow layer is
   therefore locked with !important; background-color still belongs to each
   component. padding-inline-end clears the arrow on the left (RTL). */
select:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C10DE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:left 12px center!important;
  background-size:14px!important;
  padding-inline-end:32px;
}
/* select.tm-input: the borderless filled text-field look has no dropdown
   affordance when it sits straight on the page background (incontrol toolbar)
   and .tm-input's `background`/`border:0` also killed the arrow+frame. Selects
   carrying tm-input get the canonical bordered surface look instead. */
select.tm-input{background-color:var(--surface);border:1px solid var(--line)}
/* ---------- דסקטופ ---------- */
@media(min-width:900px){.tm-nav{display:none}.appnav{display:none}.tm-content{padding-bottom:24px}
  /* דסקטופ אמיתי: המסכים נפרשים לרוחב המלא (עד 1560px) במקום רוחב-טאבלט */
  main{max-width:1560px!important;width:100%;margin:0;padding:28px clamp(28px,3.5vw,64px)!important}
}
@media(min-width:1700px){main{max-width:1780px!important}}
/* F5-C1 (UX-31/A-P0-02): the body-scale rules that lived here moved out.
   Student app (index.html): real rem typography + html font-size steps (user-scalable, Firefox-safe).
   Management screens: manage-scale.css (loaded only by them) keeps the exact previous scale. */

/* ---------- רספונסיביות ----------
   תלמיד: 480px ממורכז תמיד (PWA מובייל); בדסקטופ מקבל מסגרת עדינה.
   הנהלה: סיידבר קבוע בדסקטופ; במובייל (<900px) הסיידבר מוסתר והמסך עובר לגרסת מובייל עם tm-nav. */
@media(min-width:560px){
  .app{box-shadow:0 0 60px rgba(30,15,80,.12);min-height:100vh;min-height:100dvh;background:var(--bg)}
}
@media(max-width:899px){
  .tm-sidebar{display:none}
  /* מסכי הנהלה בטלפון: ניווט תחתון קבוע כמו אפליקציה (appnav = שיבוט הסיידבר) */
  .appnav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;justify-content:space-around;align-items:stretch;
    background:rgba(19,16,64,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(168,85,247,.25);padding:6px 4px calc(6px + env(safe-area-inset-bottom));transform:translateZ(0);overflow-x:auto}
  /* Jo 15.09: mobile Chrome paints its DEFAULT tap-highlight as a grey RECTANGLE that
     ignores border-radius — on the round FAB it flashed as a square box on every tap.
     Kill it on all bottom-nav links; keep a circular :focus-visible ring for keyboards. */
  .appnav a{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:56px;padding:6px 2px;border-radius:12px;color:#b9aede;font-size:0.5938rem;font-weight:600;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;outline:none}
  .appnav a:focus-visible{outline:2px solid rgba(196,183,234,.85);outline-offset:2px}
  .appnav a svg{width:19px;height:19px;stroke:currentColor;fill:none}
  /* Jo 15.09: active flat tab must NOT glare bright-white vs the muted siblings.
     Jo 15.09 (v2): "מזכירות" text read too white — now only a hair brighter than
     the #b9aede siblings so every flat slot looks identical, active or not. */
  .appnav a.on{color:#c4b7ea;background:none}
  body:has(.appnav) main{padding-bottom:88px!important}
  .tm-table .thead,.tm-table .trow{grid-template-columns:1fr auto !important}
  .tm-table .thead span:nth-child(n+2):not(:last-child),.tm-table .trow>*:nth-child(n+2):not(:last-child){display:none}
  main{padding:16px !important;max-width:100% !important}
  [data-slot="kpis"]{grid-template-columns:1fr 1fr !important}
  [data-slot="system-tiles"]{grid-template-columns:1fr 1fr !important}
  /* Jo 15.09: bottom bar = 5 slots max (4 primaries + "עוד"). No scroll. */
  .appnav{justify-content:space-between;overflow-x:visible}
  .appnav a{flex:1 1 0;min-width:0}
  .appnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .appnav a.appmore-btn.on,.appnav a.appmore-btn:active{color:#fff}
  .appnav a.appmore-btn svg circle{fill:currentColor}

  /* Jo 15.09: FAB layout — center floating "לוח" button, "עוד" far-left.
     4 flat slots (2 right, 2 left) with a raised gradient circle in the middle. */
  .appnav--fab{overflow:visible;padding-top:6px}
  .appnav--fab.has-fab{justify-content:space-between}
  .appnav--fab a:not(.appnav-fab){flex:1 1 0;min-width:0}
  /* Jo 15.09: MUST out-specify `.appnav a{border-radius:12px}` (0,1,1) or the FAB
     renders as a rounded SQUARE, not a circle. `.appnav a.appnav-fab` = (0,2,1). */
  .appnav a.appnav-fab{position:relative;flex:0 0 auto;width:58px!important;height:58px!important;margin:-30px 4px 0;padding:0!important;
    border-radius:50%!important;background:linear-gradient(160deg,#b06bff,#6d28d9);
    display:flex;align-items:center;justify-content:center;
    /* Jo 15.09 (v3): purple fade under the button was still too much — pulled the
       colored glow way down (.18→.10, 8px→5px) so the ring reads clean, not hazy. */
    box-shadow:0 2px 5px rgba(168,85,247,.10),0 0 0 4px rgba(19,16,64,.97);
    /* Jo 15.09 (v4): a grey SQUARE flashed for ~0.5s on tap — mobile Chrome's default
       rectangular tap-highlight + focus box painting behind the round FAB. Kill both,
       re-declared HERE at (0,2,1) so the higher-specificity FAB rule can't lose them. */
    -webkit-tap-highlight-color:transparent!important;outline:none!important;
    color:#fff!important;transition:transform .15s ease,box-shadow .15s ease}
  .appnav a.appnav-fab:focus,.appnav a.appnav-fab:focus-visible{outline:none!important;box-shadow:0 2px 5px rgba(168,85,247,.10),0 0 0 4px rgba(19,16,64,.97)}
  .appnav-fab svg{width:26px!important;height:26px!important;stroke:#fff!important;stroke-width:2.1}
  .appnav-fab span{display:none}
  .appnav-fab:active{transform:scale(.94)}
  .appnav-fab.on{box-shadow:0 2px 6px rgba(176,107,255,.13),0 0 0 4px rgba(19,16,64,.97)}
  /* floating "כל המערכות" sheet */
  .appmore-ov{position:fixed;inset:0;z-index:120;background:rgba(19,16,64,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-end;animation:appmoreFade .18s ease}
  @keyframes appmoreFade{from{opacity:0}to{opacity:1}}
  .appmore{width:100%;background:rgba(19,16,64,.99);border-top:1px solid rgba(168,85,247,.3);border-radius:22px 22px 0 0;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -14px 40px rgba(0,0,0,.4);animation:appmoreUp .22s cubic-bezier(.22,1,.36,1)}
  @keyframes appmoreUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .appmore-grip{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.28);margin:2px auto 12px}
  .appmore-t{color:#fff;font-size:0.8125rem;font-weight:800;text-align:center;margin-bottom:12px;opacity:.9}
  .appmore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .appmore-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
    padding:14px 6px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    color:#c6b9ee;font-size:0.6875rem;font-weight:600;text-decoration:none;min-height:74px;line-height:1.25;-webkit-tap-highlight-color:transparent}
  .appmore-grid a svg{width:22px;height:22px;stroke:currentColor;fill:none}
  .appmore-grid a.on{color:#fff;background:rgba(168,85,247,.22);border-color:rgba(168,85,247,.4)}
  .appmore-grid a:active{background:rgba(168,85,247,.16)}
}
@media(max-width:640px){
  [data-slot="kpis"]{grid-template-columns:1fr 1fr !important}
  div[style*="grid-template-columns:1.3fr 1fr"]{grid-template-columns:1fr !important}
}

/* ---------- פתיחה/סגירה של סרגל הניווט בדסקטופ (בקשת Jo 04.10) ----------
   כפתור קבוע בתחתית ה-tm-sidebar בכל מסכי ההנהלה: בסרגל סגור (אייקונים)
   פותח לרוחב מלא עם הטקסטים; בסרגל פתוח סוגר חזרה. המצב נשמר
   (localStorage: tm_sb_state) ועקבי בין כל המסכים. את הכפתור ועטיפת
   התוויות בונה portal-common.js (sbToggle). */
.tm-sidebar{transition:width .22s ease}
.tm-sidebar.sb-notrans,.tm-sidebar.sb-notrans *{transition:none!important}
.tm-sidebar[data-sbstate="closed"] .sb-lbl{display:none}
.tm-sidebar .sb-toggle{margin-top:10px;flex-shrink:0;position:sticky;bottom:8px;z-index:5;width:44px;height:44px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(168,85,247,.4);background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(90,55,184,.34));
  color:#e5d5ff;display:flex;align-items:center;justify-content:center;gap:8px;
  font:600 13px/1 'Ploni','Assistant',system-ui,sans-serif;
  box-shadow:0 4px 14px rgba(20,10,50,.3);transition:background .18s,transform .12s,color .18s;
  -webkit-tap-highlight-color:transparent}
.tm-sidebar .sb-toggle:hover{background:linear-gradient(135deg,rgba(168,85,247,.5),rgba(90,55,184,.55));color:#fff;transform:translateY(-1px)}
.tm-sidebar .sb-toggle:active{transform:scale(.95)}
.tm-sidebar .sb-toggle:focus-visible{outline:2px solid rgba(196,183,234,.85);outline-offset:2px}
.tm-sidebar .sb-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.tm-sidebar .sb-toggle .sb-tlbl{display:none}
.tm-sidebar[data-sbstate="closed"] .sb-ch-close{display:none}
.tm-sidebar[data-sbstate="open"] .sb-ch-open{display:none}
.tm-sidebar[data-sbstate="open"] .sb-toggle{width:auto;align-self:stretch;border-radius:12px;padding:0 14px}
.tm-sidebar[data-sbstate="open"] .sb-toggle .sb-tlbl{display:inline}

/* -- סרגל צר (מסכי משנה) במצב פתוח: רוחב מלא + תוויות, כמו בלוח הראשי -- */
.tm-sidebar[data-sbstate="open"]:not(.wide){width:236px;align-items:stretch;padding:20px 14px}
.tm-sidebar[data-sbstate="open"]:not(.wide) .item{width:auto;height:auto;display:flex;align-items:center;
  justify-content:flex-start;gap:11px;padding:11px 13px;border-radius:12px;color:#b9aede;
  font-size:0.8438rem;font-weight:600;text-decoration:none}
.tm-sidebar[data-sbstate="open"]:not(.wide) .item svg{flex-shrink:0}
.tm-sidebar[data-sbstate="open"]:not(.wide) .item.active{background:rgba(168,85,247,.22);
  border:1px solid rgba(168,85,247,.35);color:#fff}
.tm-sidebar[data-sbstate="open"]:not(.wide) .item.active svg{stroke:#e5d5ff}
.tm-sidebar[data-sbstate="open"]:not(.wide) .sb-lbl{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-sidebar[data-sbstate="open"]:not(.wide) .tm-avatar{align-self:center}
.tm-sidebar[data-sbstate="open"]:not(.wide) div:has(> brain-logo){align-self:center}

/* -- הסרגל הרחב (לוח ראשי) במצב סגור: חוזר לפס אייקונים -- */
.tm-sidebar.wide[data-sbstate="closed"]{width:68px;align-items:center;padding:20px 0 18px}
.tm-sidebar.wide[data-sbstate="closed"] .item{width:44px;height:44px;justify-content:center;
  padding:0;gap:0;border-radius:13px;font-size:0}
.tm-sidebar.wide[data-sbstate="closed"] .item.active{background:rgba(168,85,247,.25);border:0}
.tm-sidebar.wide[data-sbstate="closed"] .sb-lbl{display:none}
.tm-sidebar.wide[data-sbstate="closed"] .sb-brand{margin:0 0 16px;justify-content:center}
.tm-sidebar.wide[data-sbstate="closed"] .sb-brand>div,
.tm-sidebar.wide[data-sbstate="closed"] .sb-user,
.tm-sidebar.wide[data-sbstate="closed"] .sb-logo{display:none}
.tm-sidebar.wide[data-sbstate="closed"] .sb-badge{display:none!important}
.tm-sidebar.wide[data-sbstate="closed"] .sb-toggle{margin-top:auto}

/* ── wide sidebar (W25 §0: מקור-אמת יחיד) ─────────────────────────────────
   עד W25 ה-CSS הזה ישב inline ב-staff.html *וגם* הושכפל ב-recon-shell.js
   (CHROME_CSS). אוחד לכאן מילה-במילה מ-staff.html — staff הוא הקנוני. אין עוד
   אף עותק. כל מסך שמשתמש ב-.tm-sidebar.wide (לוח ההנהלה + כל מסכי /recon/)
   מקבל אותו מהקובץ הזה בלבד. */
.tm-sidebar.wide{width:236px;align-items:stretch;padding:22px 14px 18px}
.tm-sidebar.wide .sb-brand{display:flex;align-items:center;gap:10px;margin:0 6px 18px}
.tm-sidebar.wide .sb-brand .bt{color:#fff;font-weight:800;font-size:15px;line-height:1.2}
.tm-sidebar.wide .sb-brand .bs{color:#8f85b5;font-size:10.5px}
.tm-sidebar.wide .item{width:auto;height:auto;border-radius:12px;display:flex;align-items:center;gap:11px;padding:11px 13px;color:#b9aede;font-size:13.5px;font-weight:600;text-decoration:none;position:relative}
.tm-sidebar.wide .item svg{flex-shrink:0}
.tm-sidebar.wide .item.active{background:rgba(168,85,247,.22);border:1px solid rgba(168,85,247,.35);color:#fff}
.tm-sidebar.wide .item .sb-badge{margin-inline-start:auto;background:var(--brand-violet);color:#fff;border-radius:99px;min-width:19px;height:19px;padding:0 6px;font-size:10.5px;font-weight:800;display:none;align-items:center;justify-content:center}
.tm-sidebar.wide .sb-user{margin-top:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:12px 13px}
.tm-sidebar.wide .sb-user .su-row{display:flex;align-items:center;gap:10px}
.tm-sidebar.wide .sb-user .su-nm{color:#fff;font-size:12.5px;font-weight:800}
.tm-sidebar.wide .sb-user .su-em{color:#8f85b5;font-size:10.5px;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis}
.tm-sidebar.wide .sb-user .su-out{display:block;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09);color:#c9b6f5;font-size:11.5px;font-weight:700;cursor:pointer;text-align:center}
.tm-sidebar.wide .sb-logo{margin-top:14px;text-align:center}
.tm-sidebar.wide .sb-logo img{width:150px;opacity:.92}

/* תיקון למלכודת סקייל-הדסקטופ הישן: הסרגל היה min-height:100vh בזמן שה-body מוגדל
   (1.08/1.16/1.25) — התחתית, כולל כפתור הפתיחה/סגירה, נחתכה מתחת למסך.
   מנרמלים לגובה הנראה בפועל; אם התוכן ארוך — הסרגל גולל פנימית. */
:root{--tmz:1}
@media(min-width:1280px){:root{--tmz:1.08}}
@media(min-width:1500px){:root{--tmz:1.16}}
@media(min-width:1800px){:root{--tmz:1.25}}
@media(min-width:900px){
  .tm-sidebar{min-height:calc(100vh/var(--tmz));max-height:calc(100vh/var(--tmz));
    overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .tm-sidebar::-webkit-scrollbar{display:none}
}
/* הכפתור כפוטר אטום של הסרגל: רקע מלא + דהייה מעל, ושמור לו מקום בתחתית */
.tm-sidebar.sb-hastoggle{padding-bottom:60px}
.tm-sidebar .sb-toggle{background:linear-gradient(135deg,#5d35ab,#45278f);
  box-shadow:0 -14px 22px rgba(19,16,64,.78),0 4px 14px rgba(20,10,50,.35)}

/* Claude 21.10 (sb-toggle-clear): the open/close button is sticky at the bottom
   of the rail, so with the full menu it sat ON TOP of the last items — "מרכז בקרה"
   was unreadable. Reserve room for it at the end of the list and make it opaque,
   so it never covers a menu item. */
.tm-sidebar .sb-toggle{background:var(--grad-sidebar,#1b1340);box-shadow:0 -10px 16px 10px var(--grad-sidebar,#1b1340)}
.tm-sidebar::after{content:"";display:block;flex:0 0 auto;height:56px}
.tm-sidebar .sb-toggle{order:999}

/* ══ Smart hierarchical sidebar (Jo 26.10) — dept → system → screen ══
   Location-driven tree in every .tm-sidebar rail: the exact screen is .active
   (strong violet), every ancestor on the path is .trail (soft violet) and its
   branch is opened. Levels shrink: 13.5px → 12.5px → 11.5px. Collapsed rails
   (icons only) hide the tree entirely. */
.tm-sidebar .sb-sub,.tm-sidebar .sb-sub3{display:none;flex-direction:column;gap:2px;align-self:stretch;flex-shrink:0;
  margin:1px 10px 3px 4px;padding-inline-start:9px;border-inline-start:1.5px solid rgba(168,85,247,.28)}
.tm-sidebar .sb-sub3{margin-inline-end:6px;border-inline-start-color:rgba(168,85,247,.18)}
.tm-sidebar[data-sbstate="open"] .sb-sub.open,.tm-sidebar[data-sbstate="open"] .sb-sub3.open{display:flex}
.tm-sidebar[data-sbstate="open"] .sb-sub .item{width:auto;height:auto;justify-content:flex-start;align-items:center;display:flex;
  gap:9px;padding:7px 10px;border-radius:10px;font-size:12.5px;font-weight:600;color:#a99bd6;border:1px solid transparent;position:relative}
.tm-sidebar[data-sbstate="open"] .sb-sub .item svg{width:15px;height:15px;flex-shrink:0;stroke:#8f85b5}
.tm-sidebar[data-sbstate="open"] .sb-sub3 .item{padding:5px 9px;border-radius:9px;font-size:11.5px;color:#9d90c9}
.tm-sidebar[data-sbstate="open"] .sb-sub3 .item::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.45;flex:0 0 auto}
.tm-sidebar[data-sbstate="open"] .sb-sub .item:hover{background:rgba(255,255,255,.07);color:#ddd2ff}
.tm-sidebar[data-sbstate="open"] .sb-sub .item.active{background:rgba(168,85,247,.25);border-color:rgba(168,85,247,.38);color:#fff}
.tm-sidebar[data-sbstate="open"] .sb-sub .item.active svg{stroke:#e5d5ff}
.tm-sidebar[data-sbstate="open"] .sb-sub3 .item.active::before{opacity:1;box-shadow:0 0 8px rgba(168,85,247,.9)}
/* ancestors on the current path — lit softly, so the whole chain reads at a glance */
.tm-sidebar .item.trail{background:rgba(168,85,247,.10);border:1px solid rgba(168,85,247,.16);color:#efe6ff}
.tm-sidebar .item.trail svg{stroke:#d8c6ff}
.tm-sidebar[data-sbstate="closed"] .item.trail{background:rgba(168,85,247,.14);border:0}
/* chevron on expandable rows — rotates when the branch is open; view-toggle only */
.tm-sidebar .sb-chev{margin-inline-start:auto;width:14px;height:14px;flex:0 0 auto;opacity:.55;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;cursor:pointer;display:none}
.tm-sidebar[data-sbstate="open"] .item .sb-chev{display:block}
.tm-sidebar .item[aria-expanded="true"] .sb-chev{transform:rotate(-90deg);opacity:.95}