/* app.css — העיצוב הגלובלי של המערכת — נטען מ-/static עם hash של התוכן ב-URL (ראה app/static_assets.py).
   עד 19/08 זה נשלח inline בגוף כל עמוד; מאז שמיון הוא ניווט, זה היה נשלח מחדש
   בכל לחיצה על כותרת. */
:root{--green:#5aa832;--green-dark:#4a8f27;--dark:#1f2a1a;--bg:#f7f8f5;--line:#e3e6df;--ink:#1d221a;--muted:#8a9083;}
  *{box-sizing:border-box}
  body{font-family:-apple-system,'Segoe UI',Arial,sans-serif;margin:0;background:var(--bg);color:var(--ink);font-size:14px}
  /* ‏27/08 (חבילה 21): `body>header` ולא `header`. הכלל הזה תפס כל <header>
     בדף — גם כותרות הכרטיסים ב-/systems (`.prov > header`) — והפך אותן
     ל-sticky עם z-index:20, בדיוק כמו סרגל המערכת. כרטיס מאוחר יותר ב-DOM
     צויר מעל התפריט הפתוח (הבאג שגיל צילם). סרגל המערכת הוא הילד הישיר
     היחיד של body מסוג header. */
  body>header{background:#fff;border-bottom:1px solid var(--line);padding:0 20px;display:flex;align-items:center;gap:18px;height:54px;position:sticky;top:0;z-index:20;box-shadow:0 1px 3px rgba(31,42,26,.04)}
  body>header .logo{font-weight:800;font-size:18px;letter-spacing:-.3px;color:inherit;text-decoration:none}.logo b{color:var(--green)}
  body>header a.nav{color:#555;text-decoration:none;font-size:14px;padding:6px 10px;border-radius:6px}
  body>header a.nav:hover{background:#f2f4ee;color:#111}
  /* module bar — appears only inside a module (e.g. /rankings) */
  .modsep{color:#d5d9cf;font-size:18px}
  a.modname{color:var(--green-dark);font-weight:700;font-size:15px;text-decoration:none;padding:6px 8px;border-radius:6px}
  a.modname:hover{background:#f2f4ee}
  main{max-width:1200px;margin:22px auto;padding:0 16px}
  /* ---- טבלאות (19/08, סגנון 4 מהסקיצה) ---------------------------------
     קווי אורך עדינים + פסים + מסגרת. הפסים מובילים את העין לרוחב, הקווים
     מגדירים לגובה, והמסגרת של ה-.card סוגרת את הטבלה ככרטיס — כך תא בעריכה
     נראה כמו תא, ולא כמו שדה שצף על רקע לבן. הסגנון יושב כאן ולא בתבניות,
     כדי שמסך המילים, הלקוחות, השחזור והמשתמשים ייראו כמו מערכת אחת.
     ‏tabular-nums: ספרות ברוחב קבוע, כדי ששינוי ערך לא יזיז את השכנים. */
  table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;
        font-variant-numeric:tabular-nums}
  th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;
        border-inline-start:1px solid #eef0ea}
  th:first-child,td:first-child{border-inline-start:0}
  /* sticky column headers: stick to the viewport, right below the 54px app header.
     .card must NOT create a scroll container (see overflow:clip there) or the
     header floats mid-table — the bug Gil caught on 12/08. That is also why the
     frame is the card's and not `overflow:hidden` on the table itself. */
  th{background:#f2f4ee;font-weight:600;color:#4a5142;font-size:13px;position:sticky;top:54px;z-index:5;
     border-bottom:2px solid #d6dbcf}
  tr:last-child td{border-bottom:0}
  tbody tr:nth-child(even) td{background:#fafbf8}
  /* אחרי הזברה בכוונה: אותה ספציפיות, ולכן המאוחר מנצח והריחוף נראה תמיד */
  tbody tr:hover td{background:#f3f7ee}
  /* תא מספרי: ממורכז ומבודד ל-ltr, אחרת "100+" מתהפך ל-"+100" ו-"-23" ל-"23-"
     בזרימה העברית — בדיוק הבאג שתבנית ה-PDF כבר מתקנת אצלה. */
  th.num{text-align:center}
  td.num{text-align:center;direction:ltr;unicode-bidi:isolate}
  /* ---- רוחב עמודות: אוצר מילים אחד לכל הטבלאות במערכת (גיל, 19/08) --------
     "תוודא שגודל השדות מתכתב עם המספרים שהם אמורים להכיל בכל הדפים — לא רק
     בעמודות לעריכה אלא גם ב'לקוחות' או מקומות נוספים."
     ברירת המחדל של הדפדפן מחלקת את הרוחב לפי התוכן הרחב ביותר, ולכן עמודה
     שמכילה "1" יצאה רחבה כמו עמודת שם לקוח. כאן הרוחב נגזר מהמקסימום שהעמודה
     *יכולה* להציג, ועמודות הטקסט לוקחות את כל מה שנשאר. המידות יושבות פה ולא
     בתבניות, כדי שעמודת תאריך תהיה באותו רוחב בכל מסך במערכת. */
  table.fixed{table-layout:fixed}
  /* ברוחב קבוע כותרת בת שתי מילים רחבה מהעמודה שלה: היא נשברת לשתי שורות
     במקום להיחתך — גבוה יותר פעם אחת, ולעולם לא חסר. */
  table.fixed th{white-space:normal}
  /* מספר, תאריך או שעה הם יחידה אחת ואינם נשברים באמצע. הרוחב למטה מחושב
     כך שהערך הארוך ביותר נכנס, ולכן nowrap כאן הוא הוכחה ולא סיכון. */
  table.fixed td.num,table.fixed td.when,table.fixed td.date{white-space:nowrap}
  /* עמודות מספר — הרוחב לפי מספר הספרות המקסימלי שהעמודה מציגה בפועל */
  col.w-n2{width:64px}      /* עד 2 ספרות: מונה אתרים, דירוג */
  col.w-n4{width:80px}      /* עד 4 ספרות: מונה מילים */
  col.w-n7{width:96px}      /* עד 6 ספרות עם מפריד אלפים: 128,540 */
  col.w-id{width:118px}     /* מזהה חיצוני מ-PRT, עד 9 ספרות */
  col.w-date{width:112px}   /* dd/mm/yyyy */
  col.w-dt{width:150px}     /* dd/mm/yyyy HH:MM */
  col.w-size{width:90px}    /* "1.7 MB" */
  col.w-badge{width:116px}  /* תג הטקסט הארוך ביותר + ריפוד: "דו-שבועי" */
  col.w-state{width:104px}  /* תג מצב: "לא פעיל" · "הושלם" */
  col.w-tick{width:34px}    /* תיבת סימון */
  col.w-act{width:132px}    /* קישור פעולה בסוף שורה */
  .pos{color:#1a7f37;font-weight:600}.neg{color:#c1341b;font-weight:600}.muted{color:var(--muted)}
  .btn{background:var(--green);color:#fff;border:0;border-radius:7px;padding:7px 14px;cursor:pointer;font-size:14px;font-family:inherit;text-decoration:none;display:inline-block;transition:background .12s}
  .btn:hover{background:var(--green-dark)}
  .btn.ghost{background:#fff;color:#333;border:1px solid var(--line)}
  .btn.ghost:hover{background:#f2f4ee;border-color:#cfd4c8}
  /* מצב לא-פעיל, אחיד לכל כפתור במערכת (גיל, 13/08 — עיקרון לכל הפרויקטים):
     כשפעולה לא רלוונטית הכפתור נשאר במקומו ומאבד רק את היכולת ללחוץ עליו.
     כפתור שבא ונעלם משנה את המפה שהמשתמש בנה בראש, ומכריח אותו לחפש מה קרה.
     `.off` הוא לתגיות שאין להן disabled (a/span); הסלקטור הכפול מנטרל את ה-hover. */
  .btn:disabled,.btn.off{background:#eef0ea;color:#a8afa0;border:1px solid var(--line);
    cursor:not-allowed;box-shadow:none;pointer-events:auto}
  .btn:disabled:hover,.btn.off:hover{background:#eef0ea;color:#a8afa0;border-color:var(--line)}
  .btn.ghost:disabled,.btn.ghost.off{background:#fff;color:#b9bfb1;border-color:#eef0ea}
  .btn.ghost:disabled:hover,.btn.ghost.off:hover{background:#fff;color:#b9bfb1;border-color:#eef0ea}
  input,select{padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:14px;font-family:inherit;background:#fff}
  input:focus,select:focus{outline:2px solid #bcd9a8;outline-offset:0;border-color:var(--green)}
  /* overflow:clip (not hidden!) — clips to the rounded corners WITHOUT creating a
     scroll container, so position:sticky inside still sticks to the viewport */
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(31,42,26,.04);overflow:clip}
  .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .badge{font-size:12px;border-radius:99px;padding:2px 10px;background:#eef3e8;color:#3c6323}
  .badge.gray{background:#eee;color:#666}
  h1{font-size:22px;margin:0 0 14px;letter-spacing:-.3px}h2{font-size:16px;margin:18px 0 8px}
  a.client{color:#2456a4;text-decoration:none}a.client:hover{text-decoration:underline}
  /* hamburger menu */
  .menu-wrap{position:relative;margin-inline-start:auto;display:flex;align-items:center;gap:14px}
  .hamburger{background:#fff;border:1px solid var(--line);border-radius:7px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
  .hamburger:hover{background:#f2f4ee}
  .menu{position:absolute;top:44px;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(31,42,26,.12);min-width:220px;padding:6px;display:none;z-index:30}
  .menu.open{display:block}
  .menu .who{padding:9px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
  .menu-item{display:block;width:100%;text-align:right;background:none;border:0;padding:9px 12px;border-radius:7px;font-size:14px;font-family:inherit;color:var(--ink);cursor:pointer;text-decoration:none}
  .menu-item:hover{background:#f2f4ee}
  /* כותרת קטגוריה — לא קישור, ולכן בלי hover; אבל **לא אפורה**: היא כותרת
     של משהו שקיים, ואפור בממשק הזה אומר "מנוטרל" (גיל, 16/08). */
  .menu-item.group{cursor:default}
  .menu-item.group:hover{background:none}
  /* פריט משנה — ההיררכיה מסומנת בהזחה ובחץ, בלי אייקונים */
  .menu-item.sub{font-size:13px;color:#5a6152;padding-inline-start:26px}
  .menu-item.danger{color:#c1341b}
  /* קישור שיוצא מהמערכת — החץ מסמן את זה לפני הלחיצה, לא אחריה */
  .menu-item.ext .extmark{color:#9aa291;font-size:11px;direction:ltr;unicode-bidi:isolate;display:inline-block}
  /* התראה צפה — אירוע סנכרון שאי אפשר לחכות שמישהו ייכנס למסך כדי לגלות.
     צף מעל התפריט (z=30) ולכן 40. בפינה התחתונה־שמאלית: לא חוסם את הכותרת,
     ולא את הטבלאות שנקראות מימין. */
  .toast{position:fixed;bottom:20px;left:20px;z-index:40;max-width:min(420px,calc(100vw - 40px));
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 10px 30px rgba(31,42,26,.16);overflow:clip;
    animation:toastin .22s ease-out}
  @keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .toast .strip{height:4px;background:#c1341b}
  .toast .body{padding:14px 16px 13px}
  .toast .head{display:flex;align-items:flex-start;gap:10px}
  .toast .ttl{font-size:14.5px;font-weight:700;color:#a3291a;line-height:1.35;flex:1}
  .toast .x{background:none;border:0;font-size:18px;line-height:1;color:var(--muted);
    cursor:pointer;padding:0 2px;font-family:inherit}
  .toast .x:hover{color:#5a6152}
  .toast ul{margin:9px 0 0;padding:0;list-style:none;font-size:13px;color:#5a6152;line-height:1.65}
  .toast li b{color:var(--ink);font-weight:600}
  .toast .more{font-size:12.5px;color:var(--muted);margin-top:4px}
  .toast .acts{display:flex;align-items:center;gap:8px;margin-top:12px}
  .toast form{margin:0}
  /* מצב "עובד" — גלובלי (גיל, 14/08: "אין שום תקשורת מול המשתמש").
     כל לחיצה חייבת להשיב משהו **מיד**, גם כשהפעולה נמשכת שנייה אחת: אחרת
     המשתמש לא יודע אם הקליק נקלט, ולוחץ שוב.
     ספינר ולא אחוזים — פס התקדמות דורש התקדמות אמיתית לדווח עליה, ומספר
     מומצא הוא בדיוק מה שהמערכת הזאת לא עושה. מה שמדווח במספרים אמיתיים
     היא התוצאה, אחרי. */
  .spin{width:13px;height:13px;border-radius:99px;border:2px solid #ffffff66;
    border-top-color:#fff;display:inline-block;animation:sp .7s linear infinite;
    vertical-align:-2px;margin-inline-end:7px;flex:none}
  .btn.ghost .spin,.btn.off .spin,.btn:disabled .spin{border-color:#c7ccc0;border-top-color:#7d8475}
  @keyframes sp{to{transform:rotate(360deg)}}