/* ui.css — מערכת העיצוב האחת של המסכים (index / client / hub / mail / מחשבון).
   נטען לפני ה-<style> המקומי של כל מסך; המסך רשאי לדרוס ערכי משתנים,
   אבל טיפוגרפיה, מגע וכללי המובייל מוגדרים כאן פעם אחת.
   ‏docs/ui/מערכת_עיצוב.md — המשתנים, המחלקות וכלל המובייל. */

/* ===== משתנים ===== */
:root{
  /* משפחה ראשונה חייבת לשאת עברית (Heebo/Rubik מוגשים מקומית עם תת-קבוצת עברית).
     משפחה ראשונה בלי עברית מפצלת את המסך לשתי צורות אות. */
  --ui-font:"Heebo","Rubik","Segoe UI",Arial,sans-serif;
  --bg:#f6f7fb;--surface:#fff;--line:#e6e9ef;--text:#323338;--muted:#676879;
  --accent:#0073ea;--accent-soft:#eef4ff;--ok:#00c875;--warn:#fdab3d;--bad:#e2445c;
  /* דיו כהה לתגיות על --ok/--warn: לבן על ירוק הוא 2.21:1 ועל כתום 1.90:1.
     המדוד כאן: ‎#0b4a2f‎ על ‎--ok‎ = 4.68:1, ‎#6b4200‎ על ‎--warn‎ = 4.60:1 (AA). */
  --ok-ink:#0b4a2f;--warn-ink:#6b4200;
  --shadow:0 8px 30px rgba(0,0,0,.14);--shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --r-sm:6px;--r-md:10px;--r-lg:14px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;
  --tap:44px;
}

/* ===== בסיס ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ui-font);color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg,video{max-width:100%}
h1,h2,h3,h4{line-height:1.25;overflow-wrap:anywhere}
/* מיקוד מקלדת נראה בכל המערכת. הבורר עטוף ב-:is כדי שהספציפיות (0,2,0) תגבר
   על חוקי outline:none מקומיים מסוג ‎.searchbox input‎ — אחרת ניווט Tab עיוור.
   :focus-visible אינו מופיע בלחיצת עכבר על כפתור, ולכן אינו משנה את המראה. */
:is(a,button,input,select,textarea,summary,[tabindex],[role=button]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* ===== רכיבים (מחלקות ui-*; המסכים מאמצים בהדרגה) ===== */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-weight:600;font-size:var(--fs-md);white-space:nowrap;text-decoration:none}
.ui-btn:hover{border-color:var(--accent);color:var(--accent)}
.ui-btn:disabled{opacity:.55;cursor:default}
.ui-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ui-btn-primary:hover{background:#0060c4;color:#fff}
.ui-btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.ui-btn-ghost{background:transparent}
.ui-input{width:100%;min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-md)}
.ui-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,115,234,.15)}
/* מצב כשל — נבדל ממצב ריק. "לא נטען" אינו "אין נתונים". */
.ui-err{color:#8a1c2e;background:#fdecef;border:1px solid #f5c2cb;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md)}
.ui-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.ui-stack{display:grid;gap:var(--sp-4)}
.ui-cols{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* טבלה רחבה גוללת בתוך מיכל משלה — לעולם לא הגוף */
.ui-table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.ui-table-wrap>table{min-width:100%}
/* רצועה אופקית (ניווט/לשוניות/כפתורים) — נגללת בלי לשבור שורה, בלי פס גלילה גלוי */
.ui-scroll-x{display:flex;gap:var(--sp-2);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ui-scroll-x::-webkit-scrollbar{display:none}
.ui-scroll-x>*{flex:none}
.ui-hide-mobile{}
.ui-only-mobile{display:none!important}

/* ===== מובייל — עמודה אחת, יעדי מגע 44px, בלי גלילה אופקית של הגוף ===== */
@media (max-width:768px){
  :root{--fs-md:15px}
  .ui-btn{min-height:var(--tap)}
  .ui-input{min-height:var(--tap);font-size:16px}
  .ui-cols{grid-template-columns:1fr}
  .ui-hide-mobile{display:none!important}
  .ui-only-mobile{display:initial!important}
  /* יעד מגע לכל כפתור; :where — אפס ספציפיות, כך שכלל מקומי גובר כשצריך */
  :where(button:not(.ib):not(.small)){min-height:var(--tap)}
  :where(select){min-height:var(--tap)}
  /* 16px בשדות קלט מונע זום אוטומטי ב-iOS בפוקוס */
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px}
  :where(input[type=checkbox],input[type=radio]){width:22px;height:22px}
}