/* מכללת תרפיית מימדים — 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:#9a93b0;
  --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:20px;font-weight:800;display:flex;align-items:center;gap:9px}
.tm-header .tm-sub{font-size:12.5px;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:14px;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:12px;border-radius:10px}
/* ---------- צ'יפים ---------- */
.tm-chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-chip);padding:3px 10px;font-size:10.5px;font-weight:700}
.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:12px}
/* ---------- התקדמות / אווטאר / מתג ---------- */
.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:14px;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:12px;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:13.5px;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(20px);-webkit-backdrop-filter:blur(20px);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;gap:3px;font-size:10.5px;font-weight:600;color:var(--faint);padding-top:5px;position:relative;min-width:52px}
.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:9px;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;position:sticky;top:0}
.tm-sidebar .item{width:44px;height:44px;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:11.5px;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:14px;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:15px;gap:6px}.tm-crumbs a{padding:5px 8px;margin:-5px -8px}}
.tm-kicker{font-size:12px;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:13px}
.tm-offline .d{font-size:11.5px;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:15px;margin-top:12px}
.tm-empty .d{font-size:12.5px;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}
/* ---------- דסקטופ ---------- */
@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}}
/* סקייל דסקטופ אמיתי: כל הממשק גדל פרופורציונלית לפי גודל המסך —
   טקסט, אייקונים, מרווחים — לא רק רוחב הקנבס */
@media(min-width:1280px){body{zoom:1.08}}
@media(min-width:1500px){body{zoom:1.16}}
@media(min-width:1800px){body{zoom:1.25}}

/* ---------- רספונסיביות ----------
   תלמיד: 480px ממורכז תמיד (PWA מובייל); בדסקטופ מקבל מסגרת עדינה.
   הנהלה: סיידבר קבוע בדסקטופ; במובייל (<900px) הסיידבר מוסתר והמסך עובר לגרסת מובייל עם tm-nav. */
@media(min-width:560px){
  .app{box-shadow:0 0 60px rgba(30,15,80,.12);min-height:100vh;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:9.5px;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:13px;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:11px;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}
}