/* ══════════════════════════════════════════════════════════════════════════════
   hub-desktop.css — פריסת דסקטופ למרכז החשבוניות (21.9.26)

   אותה החלטה שהוחלה על kg24 באותו יום, באותם breakpoints, עם ערכת הצבעים הכהה
   הקיימת של ההאב. 🛑 אין כאן אף צבע חדש — רק ה-tokens שכבר מוגדרים ב-:root של
   כל עמוד (--bg/--card/--card2/--line/--fg/--mut/--accent). ערכת הנושא לא משתנה.

   מתחת ל-900px הקובץ כולו לא פעיל: כל כלל יושב בתוך @media (min-width:900px)
   או (min-width:1280px). ההאב נבנה mobile-first והוא נשאר כך.

   שני העמודים (index, trainings) מייבאים אותו — index מקבל גם רייל ניווט
   מ-#mainTabs, ל-trainings אין ניווט ראשי ולכן הוא מקבל רק את עמודת התוכן.

   ⚠️ `.wrap` הוא גם class של תא בטבלה (`table.dense td.wrap`), ולכן כל כלל
   רוחב כאן ממוקד ל-`#app > .wrap` / `body > .wrap` ולעולם לא ל-`.wrap` גורף.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  :root { --hub-col: 1100px; --hub-rail: 220px; }

  /* ── א. רוחב התוכן ── */
  #app > .wrap,
  body > .wrap,
  #mainScreen > .wrap { max-width: var(--hub-col); padding-inline: 24px; }

  /* ── ב. רייל ניווט (index בלבד — הטאבים הראשיים) ──
     אותם ארבעה כפתורים, אותו handler, אותו data-tab. רק CSS. */
  /* ⚠️ #mainTabs is in the DOM while #app is still .hidden (the login screen), and :has()
     does not care that an ancestor is display:none. Unscoped, the login form was shifted
     220px by a rail that was not on screen. Every rail rule is gated on the app being up. */
  body:has(#app:not(.hidden) #mainTabs) { padding-inline-start: var(--hub-rail); }
  #app:not(.hidden) #mainTabs {
    position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto;
    width: var(--hub-rail); margin: 0; z-index: 45;
    display: flex; flex-direction: column; gap: 4px;
    padding: calc(12px + env(safe-area-inset-top)) 10px 16px;
    background: var(--card); border-inline-end: 1px solid var(--line);
    overflow-y: auto;
  }
  #app:not(.hidden) #mainTabs::before {
    content: "🗂️ מרכז"; display: block; height: 40px; line-height: 40px;
    margin: 0 8px 12px; font-size: 17px; font-weight: 800; color: var(--fg);
  }
  #app:not(.hidden) #mainTabs button {
    justify-content: flex-start; gap: 10px; padding: 0 14px;
    min-height: 48px; font-size: 14.5px; text-align: start; flex: 0 0 auto;
  }

  /* הפס העליון של משיכה-לרענון והבאנר יושבים אחרי הרייל */
  body:has(#app:not(.hidden) #mainTabs) #ptr { inset-inline-start: var(--hub-rail); }

  /* ── ג. רשת כרטיסים ── התור והארכיון הם כרטיסי מסמך שלמים */
  #list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px; align-content: start;
  }
  #list > .doc { margin-bottom: 0; break-inside: avoid; min-width: 0; }
  /* טבלה, הודעת ריק או כל דבר שאינו כרטיס — שורה מלאה */
  #list > :not(.doc) { grid-column: 1 / -1; }
  /* מצב "ארכיון" מרנדר טבלה לתוך #list; טבלה לא הופכת לעמודה */
  #list:has(> .tblwrap), #list:has(> table) { display: block; }

  /* trainings: אותה רשת, המיכל שלו */
  #docsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px; align-content: start;
  }
  #docsList > * { margin-bottom: 0; break-inside: avoid; min-width: 0; }

  .docs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px; align-content: start;
  }
  .docs-list > * { margin-bottom: 0; break-inside: avoid; min-width: 0; }

  /* ── ד. טבלאות ── גלילה בתוך המיכל בלבד, כותרת דביקה */
  .tblwrap {
    overflow: auto;
    max-height: calc(100dvh - 220px);
  }
  .tblwrap thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--card2);
  }
  table.dense { min-width: 0; }

  /* ── ה. פסים צפים ── סרגל הבחירה נשאר דביק אך בתוך אזור התוכן */
  #selbar {
    inset-inline-start: var(--hub-rail);
    padding-inline: max(24px, calc((100% - var(--hub-col)) / 2));
  }
  /* הפס התחתון של trainings — אותו טיפול, בלי רייל */
  .bottom-bar { padding-inline: max(24px, calc((100% - var(--hub-col)) / 2)); }
}

@media (min-width: 1280px) {
  :root { --hub-col: 1360px; }
}

/* הרייל הוא ניווט, לא תוכן. @media print של העמודים כבר מסתיר #mainTabs,
   וזה כאן כדי שהכלל לא יישען על סדר הקבצים. */
@media print {
  #mainTabs, #selbar { display: none !important; }
  body { padding-inline-start: 0 !important; }
  #app > .wrap, body > .wrap, #mainScreen > .wrap { max-width: none; padding-inline: 0; }
}