/* ═══════════════════════════════════════════════════════════════════════
   WizBI Design System — שכבת פלטפורמה  ·  v1.1

   מה שמשתנה בין מכשירים ומערכות הפעלה, ולא בין מוצרים.
   iPhone · Android · Mac · Windows · Linux · מגע מול עכבר.

   נטענת **אחרי** tokens.css ולפני הסגנונות של המוצר:
       tokens.css → platform.css → <המוצר>

   ── עיקרון: לא משנה מראה, מתקנת התנהגות ──
   כל כלל כאן מגיב ליכולת של המכשיר, לא לרוחב המסך. דסקטופ לא זז.
   שני חריגים מכוונים, שניהם תיקוני באג ולא בחירות עיצוב:
     · יעד מגע 44px במכשירי מגע — שורות יתארכו קצת בטלפון.
     · שדה קלט 16px במכשירי מגע — Safari מזום את כל הדף מתחת לזה.
   מוצר שרוצה לוותר: `--ctl-h-touch: auto` / `--ctl-fs-touch: inherit`.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── אזורים בטוחים ─────────────────────────────────────────────────────
     נאץ', פס-בית ומצלמה. אפס בכל מקום שאין בו כאלה, כך שאפשר להשתמש
     בהם תמיד בלי תנאי. שים על סרגלים דביקים, מגירות ו-FAB. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-s: env(safe-area-inset-left, 0px);   /* לוגי — ראה היפוך ב-RTL למטה */
  --safe-e: env(safe-area-inset-right, 0px);

  /* ── יעדי מגע ────────────────────────────────────────────────────────
     iOS HIG: 44pt. Material: 48dp. 44 הוא המכנה המשותף שעובר את שניהם. */
  --ctl-h-touch: 44px;
  --ctl-fs-touch: 16px;   /* מתחת לזה Safari ב-iOS מזום את הדף בפוקוס */
  --tap-slop: 8px;        /* הרחבת אזור הלחיצה סביב אייקון קטן */

  /* ── גלילה ────────────────────────────────────────────────────────── */
  --scrollbar-w: 10px;
}

[dir="rtl"] {
  /* env() הוא פיזי ולא לוגי. ב-RTL "התחלה" היא ימין. */
  --safe-s: env(safe-area-inset-right, 0px);
  --safe-e: env(safe-area-inset-left, 0px);
}

/* ═══ גובה מסך ══════════════════════════════════════════════════════════
   100vh בנייד כולל את סרגל הכתובת שנעלם בגלילה, אז הדף "קופץ".
   dvh מודד את מה שבאמת נראה. הנפילה חזרה ל-vh היא לדפדפנים ישנים. */
.h-screen, [data-h-screen] { height: 100vh; height: 100dvh; }
.min-h-screen, [data-min-h-screen] { min-height: 100vh; min-height: 100dvh; }

/* ═══ מגע מול עכבר ══════════════════════════════════════════════════════
   `hover: hover` = יש עכבר/טראקפד אמיתי. במגע, :hover "נתקע" אחרי לחיצה,
   ולכן אפקטים של ריחוף חייבים להיות מגודרים. */
@media (hover: none) {
  /* הבזק כחול/אפור של המערכת בלחיצה — מוחלף במצב :active של המוצר */
  a, button, [role="button"], label, summary, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (pointer: coarse) {
  /* אצבע, לא סמן. הכללים היחידים שכן משנים פריסה — ובכוונה. */
  button, [role="button"], a[class*="btn"], .wz-btn,
  select, summary, [role="tab"], [role="menuitem"] {
    min-height: var(--ctl-h-touch);
  }
  /* אייקון קטן בתוך שורת טבלה — מרחיבים את אזור הלחיצה בלי להזיז פיקסל */
  .tap-slop { position: relative; }
  .tap-slop::after {
    content: ""; position: absolute;
    inset: calc(var(--tap-slop) * -1);
  }
  /* Safari מזום את הדף כשמתמקדים בשדה מתחת ל-16px. זה לא ניתן לכיבוי
     דרך viewport בלי לשבור זום נגישותי, אז מגדילים את השדה. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: var(--ctl-fs-touch);
  }
}

/* ═══ פקדים נייטיביים ═══════════════════════════════════════════════════
   iOS ו-Android מציירים select, date ו-search אחרת לגמרי, ומתעלמים מרוב
   ה-CSS. מנטרלים את הציור הנייטיבי כדי שהפקד ייראה זהה בכל מקום. */
input, select, textarea, button { font-family: inherit; }

input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* iOS מעגל שדות ו-textarea בכוח */
input, textarea { border-radius: var(--ctl-r, 6px); -webkit-appearance: none; appearance: none; }

/* חצי המספר של כרום/פיירפוקס — נסתרים, המקלדת הנייטיבית עדיין מספרית */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* iOS מבהיר שדה מושבת עד לאי-קריאות */
input:disabled, textarea:disabled, select:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }

/* צבע הסמן ובורר התאריך עוקבים אחרי המותג */
input, textarea, select { caret-color: var(--brand); accent-color: var(--brand); }

/* ═══ גלילה ═════════════════════════════════════════════════════════════
   Mac מצייר scrollbar צף שנעלם; Windows ולינוקס מצייר פס קבוע ורחב
   שגונב רוחב מהפריסה. מיישרים אותו לרזה ובצבעי המערכת. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: var(--r-full, 999px);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mut); background-clip: content-box; }

/* גלילה בתוך מיכל לא אמורה לגרור את הדף מאחוריו, ולא להפעיל
   pull-to-refresh באנדרואיד. */
[data-scroll], .overflow-auto, .overflow-y-auto, .overflow-x-auto {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ═══ העדפות מערכת ══════════════════════════════════════════════════════ */

/* מצב ניגודיות גבוהה — הגבולות שלנו דקים מדי עבורו */
@media (prefers-contrast: more) {
  :root { --line: var(--text-mut); --card-line: var(--text-mut); }
  :focus-visible { box-shadow: 0 0 0 3px var(--text) !important; }
}

/* Windows High Contrast / forced-colors מכבה צבעי רקע. בלי הכלל הזה
   טבעת הפוקוס פשוט נעלמת שם. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .wz-btn, button { border: 1px solid ButtonBorder; }
}

/* יש מי שמכבה שקיפות ברמת המערכת (iOS/macOS Reduce Transparency) */
@media (prefers-reduced-transparency: reduce) {
  [class*="glass"], [data-glass] { backdrop-filter: none !important; }
}

/* ═══ רינדור טקסט ═══════════════════════════════════════════════════════
   macOS מרנדר כבד יותר מ-Windows. antialiasing מיישר את המשקל הנתפס,
   אבל רק על מסכים צפופים — על מסך רגיל הוא מדלל את הטקסט לרעה. */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* ═══ הדפסה ═════════════════════════════════════════════════════════════
   דוח שיוצא למדפסת או ל-PDF — תמיד על רקע בהיר, בלי ניווט. */
@media print {
  :root { --bg: #fff; --bg-card: #fff; --text: #000; --line: #999; }
  .wz-nav, .app-nav, .sidebar, .topbar, [data-no-print] { display: none !important; }
  * { box-shadow: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; color: #555; }
}