/* ============================================================
   Tizon — שפת העיצוב
   ------------------------------------------------------------
   למה הקובץ הזה קיים:
     סריקה של הקוד מצאה 178 גוונים שונים מול 8 משתנים בלבד,
     48 גדלי גופן, 12 ערכי פינות, ו-64 ערכי z-index שונים —
     שבעה מהם על 2147483647, המקסימום של 32 ביט. כל מודול שנוסף
     העלה את המספר כדי לנצח את הקודם.

     התוצאה: כל שינוי עיצובי דורש לגעת בעשרות מקומות, ודברים
     נראים כמעט-אותו-דבר אבל לא בדיוק.

   איך משתמשים:
     חדש נכתב רק מול הטוקנים כאן. קיים מומר בהדרגה — אין צורך
     לגעת ב-1,128 ההגדרות ה-inline בבת אחת.

   הצבעים לא הומצאו: הם נלקחו מהערכים שכבר היו בשימוש הרב
   ביותר בקוד, כדי שההמרה לא תשנה את המראה אלא רק תסדר אותו.
   ============================================================ */

:root {
  /* ---------- מותג ---------- */
  --tz-green:        #2F5233;   /* ירוק המותג, כבר היה --dr-green */
  --tz-green-dark:   #24401F;
  --tz-green-soft:   #F0FDF4;
  --tz-gold:         #B89742;   /* זהב המותג, כבר היה --dr-gold */
  --tz-gold-dark:    #8A6F2C;
  --tz-gold-soft:    #FDFAF0;
  --tz-teal:         #0F7B6C;   /* 28 הופעות בקוד */

  /* ---------- ניטרלי ---------- */
  --tz-ink:          #1E293B;   /* טקסט ראשי */
  --tz-ink-2:        #475569;   /* טקסט משני, 48 הופעות */
  --tz-ink-3:        #64748B;   /* טקסט מרוסן */
  --tz-ink-4:        #94A3B8;   /* רמז, 53 הופעות */
  --tz-line:         #E2E8F0;   /* קו מפריד, 56 הופעות — הנפוץ ביותר */
  --tz-line-soft:    #F1F5F9;
  --tz-surface:      #FFFFFF;
  --tz-surface-2:    #F8FAFC;
  --tz-surface-3:    #FDFBF5;   /* קרם, רקע כרטיסי מותג */

  /* ---------- מצבים ---------- */
  --tz-ok:           #166534;
  --tz-ok-soft:      #DCFCE7;
  --tz-warn:         #B45309;
  --tz-warn-soft:    #FEF3C7;
  --tz-danger:       #B91C1C;
  --tz-danger-soft:  #FEE2E2;
  --tz-info:         #1E40AF;
  --tz-info-soft:    #DBEAFE;

  /* ---------- מרווחים ---------- */
  /* סולם של פי 1.5 במקום מספרים אקראיים */
  --tz-1:  4px;
  --tz-2:  8px;
  --tz-3:  12px;
  --tz-4:  16px;
  --tz-5:  24px;
  --tz-6:  32px;
  --tz-7:  48px;
  --tz-8:  64px;

  /* ---------- טיפוגרפיה ---------- */
  /* שישה גדלים במקום 48. הערכים נבחרו סביב הנפוצים בקוד:
     0.75 · 0.8 · 0.85 · 0.9 · 0.95 · 1 · 1.1 · 1.4 */
  --tz-text-xs:  0.75rem;
  --tz-text-sm:  0.85rem;
  --tz-text-md:  0.95rem;
  --tz-text-lg:  1.1rem;
  --tz-text-xl:  1.4rem;
  --tz-text-2xl: 1.8rem;

  --tz-weight-normal: 400;
  --tz-weight-medium: 600;
  --tz-weight-bold:   800;

  --tz-leading-tight: 1.35;
  --tz-leading:       1.6;
  --tz-leading-loose: 1.75;

  --tz-font: 'Heebo', 'Segoe UI', Arial, sans-serif;

  /* ---------- פינות ---------- */
  /* ארבעה ערכים במקום 12 */
  --tz-r-sm:   8px;
  --tz-r-md:  12px;
  --tz-r-lg:  16px;
  --tz-r-full: 999px;

  /* ---------- צללים ---------- */
  --tz-shadow-sm: 0 1px 3px rgba(16, 24, 16, .08);
  --tz-shadow-md: 0 4px 14px rgba(16, 24, 16, .10);
  --tz-shadow-lg: 0 12px 34px rgba(16, 24, 16, .16);

  /* ---------- מגע ---------- */
  --tz-touch: 44px;   /* המינימום המקובל ליעד מגע */

  /* ============================================================
     סולם השכבות
     ------------------------------------------------------------
     שש שכבות. כל דבר חדש בוחר אחת מהן ולא ממציא מספר.
     הערכים נמוכים בכוונה — אין שום סיבה להתקרב ל-2147483647,
     והמרחק ביניהן מאפשר להכניס שכבת ביניים בלי לשבור כלום.
     ============================================================ */
  --tz-z-base:     1;      /* תוכן רגיל שצריך להתרומם מעט */
  --tz-z-sticky:   100;    /* כותרות וסרגלים נדבקים */
  --tz-z-dock:     200;    /* הדוק הצף */
  --tz-z-dropdown: 300;    /* תפריטים נפתחים */
  --tz-z-overlay:  400;    /* רקע מוחשך */
  --tz-z-modal:    500;    /* חלונות */
  --tz-z-toast:    600;    /* הודעות רגעיות */
  --tz-z-critical: 700;    /* התראות שחייבות להופיע מעל הכל */
}

/* ============================================================
   מחלקות עזר — כדי שקוד חדש לא יצטרך inline styles
   ============================================================ */

.tz-card {
  background: var(--tz-surface);
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-r-lg);
  padding: var(--tz-4);
  box-shadow: var(--tz-shadow-sm);
}

.tz-btn {
  font-family: var(--tz-font);
  font-size: var(--tz-text-md);
  font-weight: var(--tz-weight-medium);
  border: none;
  border-radius: var(--tz-r-md);
  padding: var(--tz-3) var(--tz-5);
  min-height: var(--tz-touch);
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.tz-btn:hover  { filter: brightness(1.06); }
.tz-btn:active { transform: translateY(1px); }
.tz-btn:focus-visible {
  outline: 2px solid var(--tz-gold);
  outline-offset: 2px;
}

.tz-btn--primary { background: var(--tz-green); color: #fff; }
.tz-btn--gold    { background: var(--tz-gold);  color: #fff; }
.tz-btn--quiet   {
  background: transparent;
  color: var(--tz-green);
  border: 1.5px solid var(--tz-line);
}
.tz-btn--danger  { background: var(--tz-danger); color: #fff; }

/* יעדי מגע: המדידה מצאה 18 כפתורים מתחת ל-44px במובייל */
@media (pointer: coarse) {
  button, a.tz-btn, [role="button"] {
    min-height: var(--tz-touch);
  }
}

/* מכבדים העדפת מערכת להפחתת תנועה */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   תפריט הצד
   ------------------------------------------------------------
   היו 15 פריטים ברשימה שטוחה אחת, בלי קיבוץ — תיק רפואי ליד
   הטבות ושיתופים ליד מחירים. והאייקונים היו אמוג'י: נראים שונה
   בכל מערכת הפעלה, בגדלים אופטיים לא אחידים, וכל אחד בצבע
   משלו שמתחרה בממשק.

   עכשיו: שלוש קבוצות, ואייקוני SVG בקו אחיד שיורשים את צבע
   הטקסט — כך שהם משתנים יחד עם מצב הפריט ולא בנפרד ממנו.
   ============================================================ */

.tz-nav-head {
  font-size: var(--tz-text-xs);
  font-weight: var(--tz-weight-bold);
  letter-spacing: .04em;
  color: var(--tz-ink-4);
  padding: var(--tz-4) var(--tz-3) var(--tz-2);
  margin-top: var(--tz-2);
  border-top: 1px solid var(--tz-line);
}
.tz-nav-head:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: var(--tz-2);
}

.tz-nav-gap { flex-grow: 1; }

.tz-nav-ic {
  width: 19px;
  height: 19px;
  flex: none;
  opacity: .85;
}
.tab-btn.active .tz-nav-ic { opacity: 1; }

/* הפריט עצמו: אייקון וטקסט על קו בסיס אחד, במקום טקסט שמתחיל
   אחרי אמוג'י ברוחב משתנה */
.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--tz-3);
  text-align: start;
}
.tz-nav-tx { flex: 1; }

/* ============================================================
   מסך הכניסה
   ------------------------------------------------------------
   במדידה בדסקטופ היה פער ריק של כ-130 פיקסל בין הלוגו לטופס,
   כי ל-.auth-card היו margin אוטומטיים שדחפו אותו למרכז השארית.
   התוצאה: קומפוזיציה כבדה למעלה וריקה באמצע.

   כאן המרווח קבוע והעמודה כולה ממורכזת. השמירה על
   justify-content:flex-start נשארת בכוונה — היא מה שמאפשר
   לגלול לכפתור כשהמקלדת פתוחה במובייל.
   ============================================================ */

#loginScreen .auth-card {
  margin-top: var(--tz-6) !important;
  margin-bottom: var(--tz-6) !important;
}

@media (min-height: 700px) {
  #loginScreen {
    justify-content: center !important;
    padding-top: var(--tz-6) !important;
  }
  #loginScreen .auth-card {
    margin-top: var(--tz-5) !important;
  }
}

/* ============================================================
   v234 — מסך ראשי במובייל
   ------------------------------------------------------------
   צילום מסך מטלפון (412px) הראה שלוש בעיות:
   1. כותרות "תיק חדש" / "התיקים שלי" חתוכות: האימוג'י באריח
      נכתב ב-font-size:2.5rem עם line-height רגיל (~56px) ודחף
      את הכותרת אל מחוץ לאריח של 92px.
   2. "היום שלי" ו"דיוור" — גלולות צבעוניות ברוחב 123px שכיסו
      את התוכן. עכשיו: כפתורים לבנים אחידים עם אייקון קו,
      ובמובייל אייקון בלבד (42px), כמו כפתור התפריט.
   3. תווית הגרסה תפחה לעיגול 44px בגלל כלל יעדי המגע.
   ============================================================ */
#dashboardShortcuts .action-card div[style*="font-size:2.5rem"],
#dashboardShortcuts .action-card div[style*="font-size: 2.5rem"] {
  font-size: 1.8rem !important;
  line-height: 1 !important;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dashboardShortcuts .action-card > div[onclick] { gap: 6px !important; }

#tzRemindBtn, #tzMailBtn {
  align-items: center;
  gap: 8px;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px 0 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--tz-ink) !important;
  border: 1.5px solid #e0cfae !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .13) !important;
  font: 700 .88rem/1 var(--tz-font) !important;
  white-space: nowrap;
}
#tzRemindBtn:hover, #tzMailBtn:hover { border-color: var(--tz-gold) !important; }
#tzRemindBtn:focus-visible, #tzMailBtn:focus-visible { outline: 2px solid var(--tz-gold); outline-offset: 2px; }
#tzRemindBtn svg, #tzMailBtn svg { flex: none; vertical-align: middle; }
#tzRemindBtn svg { color: var(--tz-green); }
#tzMailBtn svg   { color: var(--tz-gold-dark); }

#tzVerBadge { min-height: 0 !important; }

@media (max-width: 768px) {
  #tzRemindBtn, #tzMailBtn {
    width: 42px !important;
    padding: 0 !important;
    justify-content: center;
  }
  #tzRemindBtn .tz-dock-lbl, #tzMailBtn .tz-dock-lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  #tzVerBadge { font-size: .6rem !important; padding: 1px 6px !important; opacity: .55 !important; }
  /* מקום לגלול את השורה האחרונה אל מעל העמודה הצפה */
  #mainApp { padding-bottom: 72px; }
}