/* ==========================================================================
   components.css — הרכיבים של המערכת.
   כל רכיב אינטראקטיבי הוא לפחות 56px, עם טקסט גלוי ולא רק אייקון.
   כל המרווחים לוגיים (inline/block) כדי שה-RTL יעבוד בלי חריגים.
   ========================================================================== */

/* ---------------------------------------------------------------- אייקונים */
.icon {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1.1em; height: 1.1em; }
.icon--lg { width: 1.8em; height: 1.8em; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- כפתורים */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding-inline: var(--s5);
  padding-block: var(--s2);
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur) var(--ease), background var(--dur), border-color var(--dur),
              box-shadow var(--dur), filter var(--dur);
}
.btn:active:not(:disabled) { transform: scale(0.975); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--pos    { background: var(--pos-soft); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.btn--danger { background: var(--neg-soft); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); }
.btn--pos:hover:not(:disabled)    { border-color: var(--pos); }
.btn--danger:hover:not(:disabled) { border-color: var(--neg); }
.btn--soft   { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-1); }
.btn--soft:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.btn--ghost  { background: transparent; color: var(--text-2); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--outline:hover:not(:disabled) { background: var(--surface-2); }

.btn--lg { min-height: var(--tap-lg); font-size: var(--fs-md); font-weight: 700; padding-inline: var(--s6); }
.btn--block { display: flex; width: 100%; }
.btn--stack { flex-direction: column; gap: var(--s1); font-size: var(--fs-sm); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tap);
}
.btn-row > .btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- פוקוס */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-w) solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------- כרטיסים */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s5);
}
@media (min-width: 64rem) {
  .card { padding: var(--s6); }
  .card--flush { padding: 0; }
}
.card + .card { margin-block-start: var(--s4); }
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-color: var(--accent-line); }
.card--danger {
  border-color: color-mix(in srgb, var(--neg) 50%, transparent);
  background: var(--neg-soft);
}
.card--danger .card__title { color: var(--neg); }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-block-end: var(--s4);
}
.card__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.card__title .icon {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0.4rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.card--flush > .card__head {
  margin: 0;
  padding: var(--s4) var(--s5);
  border-block-end: 1px solid var(--line);
}
.card__head .btn { margin-inline-start: auto; }
.card__note {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-block: var(--s2) 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin: var(--s8) 0 var(--s3);
}

/* ---------------------------------------------------------------- שדות */
.field { display: block; margin-block-end: var(--s4); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-block-end: var(--s2);
}
.field__req { color: var(--neg); font-weight: 700; }
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-block-start: var(--s2);
  line-height: var(--lh);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--neg);
  margin-block-start: var(--s2);
}

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  color: var(--text);
  font: inherit;
  transition: border-color var(--dur), box-shadow var(--dur);
  /*
   * לעולם לא מתחת ל-16px: ספארי ב-iOS מזנקת בזום אוטומטי ברגע שנוגעים
   * בשדה עם גופן קטן יותר, והמשתמש נשאר תקוע במסך מוגדל. max() שומר
   * על 16px גם בהגדרת טקסט "קטן", ומאפשר לגדול בהגדרות הגדולות.
   */
  font-size: max(1rem, var(--fs-md));
}
.textarea { min-height: 6rem; resize: vertical; line-height: var(--lh); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(var(--s4)) calc(50% - 2px), calc(var(--s4) + 5px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: var(--s8);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--neg);
  background: var(--neg-soft);
}
.input[readonly] { color: var(--text-2); }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s4);
}

/* שדה כסף — נלחץ ופותח מקלדת מספרים */
.moneyfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap-lg);
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: start;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.moneyfield:hover { border-color: var(--accent); }
.moneyfield__value {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.moneyfield__value--zero { color: var(--text-3); font-weight: 600; }
.moneyfield__hint { color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.moneyfield--pos { border-color: var(--pos); }
.moneyfield--pos .moneyfield__value { color: var(--pos); }
.moneyfield--neg { border-color: var(--neg); }
.moneyfield--neg .moneyfield__value { color: var(--neg); }

/* ---------------------------------------------------------------- מתג */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  transition: border-color var(--dur), background var(--dur);
}
.switch:hover { border-color: var(--line-strong); }
.switch__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.switch[aria-checked='true'] { border-color: color-mix(in srgb, var(--pos) 50%, transparent); background: var(--pos-soft); }
.switch[aria-checked='true'] .switch__state { color: var(--pos); }

/* ---------------------------------------------------------------- בקרה מקטעית */
.seg {
  display: flex;
  gap: var(--s2);
  padding: var(--s1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg + .card, .seg + .stack, .seg + .cols { margin-block-start: var(--s4); }
.seg__btn {
  flex: 1 0 auto;
  min-height: calc(var(--tap) - var(--s2));
  padding-inline: var(--s4);
  border: 0;
  border-radius: calc(var(--r) - var(--s1));
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.seg__btn[aria-pressed='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font-weight: 700;
}

/* ---------------------------------------------------------------- צ'יפים */
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-tap); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding-inline: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip__amount { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------------------------------------------------------------- תגיות מצב */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0.15rem var(--s3);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge--pos  { background: var(--pos-soft);  color: var(--pos);  border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.badge--neg  { background: var(--neg-soft);  color: var(--neg);  border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge--info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.badge--mute { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }

/* ---------------------------------------------------------------- אריחי נתונים */
.stats {
  display: grid;
  /*
   * רוחב המינימום גדל יחד עם גודל הטקסט. בגודל רגיל נכנסות שתי עמודות
   * גם בתוך כרטיס בטלפון צר; בגודל "ענק" האריחים עוברים אוטומטית
   * לעמודה אחת, במקום להידחס ולשבור את סימן השקל לשורה נפרדת.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(9rem * var(--text-scale))), 1fr));
  gap: var(--s3);
}
.stat {
  --stat-tone: var(--line-strong);
  position: relative;
  display: block;
  width: 100%;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  text-align: start;
  font: inherit;
  color: var(--text);
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease);
}
.stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--stat-tone);
  opacity: 0.9;
}
button.stat { cursor: pointer; }
button.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.stat__label .icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.35rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.stat__label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}
.stat__value {
  display: block;
  /* מתחיל קטן יותר בטלפון, כדי שסכום בן שבע ספרות לא יחרוג מהאריח
     גם כשגודל הטקסט מוגדר "ענק". */
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin-block-start: var(--s3);
  overflow-wrap: anywhere;
}
@media (min-width: 30rem) {
  .stat__value { font-size: var(--fs-2xl); }
}
.stat__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-block-start: var(--s1);
  line-height: var(--lh);
}
.stat--pos  { --stat-tone: var(--pos); }
.stat--pos  .stat__value { color: var(--pos); }
.stat--pos  .stat__label .icon { background: var(--pos-soft); color: var(--pos); }
.stat--neg  { --stat-tone: var(--neg); }
.stat--neg  .stat__value { color: var(--neg); }
.stat--neg  .stat__label .icon { background: var(--neg-soft); color: var(--neg); }
.stat--warn { --stat-tone: var(--warn); }
.stat--warn .stat__value { color: var(--warn); }
.stat--warn .stat__label .icon { background: var(--warn-soft); color: var(--warn); }
.stat--info { --stat-tone: var(--info); }
.stat--info .stat__label .icon { background: var(--info-soft); color: var(--info); }
.stat--accent { --stat-tone: var(--accent); }
.stat--accent .stat__value { color: var(--accent); }
.stat--accent .stat__label .icon { background: var(--accent-soft); color: var(--accent); }

/* ---------------------------------------------------------------- שורות רשימה */
.list { display: flex; flex-direction: column; }
.list > * + * { border-block-start: 1px solid var(--line); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap-lg);
  padding: var(--s3) var(--s4);
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: start;
}
button.row, a.row { cursor: pointer; transition: background var(--dur); }
button.row:hover, a.row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
button.row:active { background: var(--surface-2); }
.row__main { flex: 1 1 auto; min-width: 0; }
.row__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: var(--fs-md);
}
.row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-block-start: var(--s1);
}
.row__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s1);
  flex: 0 0 auto;
}
.row__amount {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row__actions {
  display: flex;
  gap: var(--gap-tap);
  padding: var(--s3) var(--s4);
  flex-wrap: wrap;
}
.row--pos .row__amount { color: var(--pos); }
.row--neg .row__amount { color: var(--neg); }

/* ---------------------------------------------------------------- טבלאות */
.tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.table th, .table td {
  padding: var(--s3) var(--s4);
  text-align: start;
  white-space: nowrap;
  border-block-end: 1px solid var(--line);
}
.table thead th {
  position: sticky;
  inset-block-start: 0;
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  z-index: 1;
}
.table tbody tr { transition: background var(--dur); }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table tbody tr:last-child td { border-block-end: 0 }
.table .num { text-align: end; }
.table .pos { color: var(--pos); font-weight: 700; }
.table .neg { color: var(--neg); font-weight: 700; }

/* ---------------------------------------------------------------- מקלדת סכומים */
/*
 * המקלדת חייבת להיכנס במלואה לגיליון בלי גלילה — אחרת שורת ה-0 יורדת
 * מתחת לקו הקיפול והמשתמש בטוח שאין ספרת אפס. לכן הכל כאן קומפקטי,
 * ושורת הקיצורים גוללת לצדדים במקום להישבר לשתי שורות.
 */
.keypad { display: grid; gap: var(--s2); }
.keypad__display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3.25rem;
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.keypad__display[data-sign='neg'] { color: var(--neg); border-color: var(--neg); }
.keypad__display[data-sign='pos'] { color: var(--pos); border-color: var(--pos); }
.keypad__cur { font-size: var(--fs-lg); color: var(--text-2); font-weight: 700; }
.keypad__quick {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 2px;
}
.keypad__quick::-webkit-scrollbar { display: none; }
.keypad__quick .btn {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding-inline: var(--s4);
  font-size: var(--fs-sm);
}
.keypad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  /* ספרות נקראות תמיד משמאל לימין, גם בממשק בעברית. */
  direction: ltr;
}
.keypad__key {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur);
}
.keypad__key:hover { background: var(--surface-2); }
.keypad__key:active { transform: scale(0.95); background: var(--surface-3); }
.keypad__key--wide { grid-column: span 2; }
.keypad__key--fn { font-size: var(--fs-md); color: var(--text-2); }

/* ---------------------------------------------------------------- גיליון תחתון */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  border: 0;
  animation: fade var(--dur) var(--ease);
}
.sheet__panel {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  max-height: min(92dvh, 60rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-block-end: 0;
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: sheet-up var(--dur-slow) var(--ease);
  overscroll-behavior: contain;
}
.sheet--closing .sheet__panel { animation: sheet-down var(--dur) var(--ease) forwards; }
.sheet--closing .sheet__scrim { animation: fade var(--dur) var(--ease) reverse forwards; }

.sheet__grab {
  flex: 0 0 auto;
  padding: var(--s3) 0 var(--s1);
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.sheet__grab::before {
  content: '';
  width: 3rem;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--line-strong);
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s5) var(--s4);
  border-block-end: 1px solid var(--line);
}
.sheet__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0; flex: 1 1 auto; }
.sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--s5);
}
.sheet__foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--gap-tap);
  padding: var(--s4) var(--s5);
  padding-block-end: calc(var(--s4) + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
  background: var(--surface);
}
.sheet__foot > .btn { flex: 1 1 auto; }

@media (min-width: 64rem) {
  .sheet { align-items: center; padding: var(--s8); padding-inline-start: calc(var(--nav-w) + var(--s8)); }
  .sheet__panel {
    max-width: 40rem;
    max-height: min(88dvh, 56rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    animation: sheet-pop var(--dur-slow) var(--ease);
  }
  .sheet--closing .sheet__panel { animation: fade var(--dur) var(--ease) reverse forwards; }
  .sheet__grab { display: none; }
  .sheet__head { padding-block-start: var(--s5); }
  .sheet__foot { padding-block-end: var(--s4); border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl); }
}
@keyframes sheet-pop  { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-up   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes fade       { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- טוסטים */
.toasts {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--tabbar-h) + var(--s3) + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding-inline: var(--s4);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  max-width: 32rem;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  background: var(--nav-bg-2);
  border: 1px solid var(--nav-line);
  border-inline-start: 4px solid var(--nav-text-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  color: var(--nav-text);
  font-weight: 500;
  pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease);
}
.toast__text { flex: 1 1 auto; font-size: var(--fs-sm); }
.toast__btn {
  min-height: var(--tap);
  padding-inline: var(--s4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--nav-text);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  flex: 0 0 auto;
}
.toast--pos  { border-inline-start-color: #32d583; }
.toast--neg  { border-inline-start-color: #f97066; }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- מצב ריק / טעינה */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s10) var(--s5);
  text-align: center;
  color: var(--text-2);
}
.empty .icon { width: 2.6em; height: 2.6em; color: var(--text-3); }
.empty__title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.empty__text { font-size: var(--fs-sm); max-width: 28rem; line-height: var(--lh); }

.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 300% 100%;
  border-radius: var(--r-sm);
  animation: skel 1.4s ease-in-out infinite;
}
.skel--tile { height: 6.5rem; border-radius: var(--r); }
.skel--row  { height: 4rem; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------------------------------------------------------- מד גיול */
.meter {
  display: flex;
  height: 1.1rem;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.meter__part { min-width: 2px; }
.meter__part--a30  { background: var(--pos); }
.meter__part--a60  { background: var(--warn); }
.meter__part--a60p { background: var(--neg); }
.meter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-start: var(--s3);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.meter-legend > span { display: inline-flex; align-items: center; gap: var(--s2); }
.dot { width: 0.75rem; height: 0.75rem; border-radius: var(--r-full); flex: 0 0 auto; }
.dot--a30 { background: var(--pos); }
.dot--a60 { background: var(--warn); }
.dot--a60p { background: var(--neg); }

/* ---------------------------------------------------------------- גרף */
.chart { width: 100%; overflow-x: auto; }
/* ל-SVG יש viewBox, ולכן הוא מתכווץ בלי לאבד קריאות — 16rem כדי שגם
   מסך של 320px לא ייאלץ לגלול לצדדים. */
.chart svg { display: block; width: 100%; height: auto; min-width: 16rem; max-height: 20rem; }
.chart__bar-a { fill: var(--accent); }
.chart__bar-b { fill: var(--line-strong); }
.chart__axis  { stroke: var(--line); stroke-width: 1; }
.chart__label { fill: var(--text-2); font-size: 11px; font-weight: 600; }
.chart__value { fill: var(--text); font-size: 11px; font-weight: 700; }
.chart-legend {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-block-start: var(--s3);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.chart-legend .dot--a { background: var(--accent); }
.chart-legend .dot--b { background: var(--line-strong); }

/* ---------------------------------------------------------------- פס איזון דביק */
/*
 * פס האיזון.
 * חייב להישאר רזה: הוא דביק מעל הטאב-בר, ואם הוא תופס חצי מסך בטלפון
 * אי אפשר לעבוד מתחתיו. לכן שורה אחת של שלושה מספרים, והפירוט נפתח
 * רק כשלוחצים.
 */
.bar {
  position: sticky;
  inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s2));
  z-index: 20;
  margin-block-start: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.bar--ok   { border-color: var(--pos); }
.bar--gap  { border-color: var(--warn); }

.bar__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.bar--ok  .bar__row { background: var(--pos-soft); }
.bar--gap .bar__row { background: var(--warn-soft); }

.bar__cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: var(--s2) var(--s3);
  border-inline-start: 1px solid var(--line);
}
.bar__cell:first-child { border-inline-start: 0; }
.bar__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar__value {
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar--ok  .bar__value--state { color: var(--pos); }
.bar--gap .bar__value--state { color: var(--warn); }
.bar__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-inline: var(--s3);
  color: var(--text-2);
}
.bar__toggle .icon { transition: transform var(--dur) var(--ease); }
.bar[data-open='1'] .bar__toggle .icon { transform: rotate(180deg); }

.bar__details {
  padding: var(--s3) var(--s4) var(--s4);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh);
}
.bar__details .btn { margin-block-start: var(--s3); }

/* ---------------------------------------------------------------- שונות */
.hr { height: 1px; background: var(--line); border: 0; margin-block: var(--s5); }
.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s2);
  font-size: var(--fs-md);
}
.kv + .kv { border-block-start: 1px solid var(--line); }
.kv__k { color: var(--text-2); }
.kv__v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv--total { font-size: var(--fs-lg); font-weight: 800; padding-block: var(--s3); }
.kv--total .kv__k { color: var(--text); font-weight: 800; }
.kv--pos .kv__v { color: var(--pos); }
.kv--neg .kv__v { color: var(--neg); }

.mono { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--text-2); }
.tiny { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack--sm { gap: var(--s2); }
.inline { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- מחשב עם עכבר */
/* יעדי הלחיצה הגדולים נשמרים למסכי מגע. עם עכבר מדויק הממשק מתהדק. */
@media (min-width: 64rem) and (pointer: fine) {
  :root { --tap: 2.75rem; --tap-lg: 3.25rem; --gap-tap: 0.5rem; }
  .row { min-height: 3.5rem; }
  .keypad__key { min-height: 3.25rem; }
}
@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(13rem * var(--text-scale))), 1fr)); }
}
@media (min-width: 64rem) {
  .toasts { padding-inline-start: calc(var(--nav-w) + var(--s4)); }
}

/* ---------- עדכון מצב מהיר (לוח בקרה) ---------- */
.quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(8rem * var(--text-scale))), 1fr));
  gap: var(--s3);
}
.quick__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: calc(var(--tap-lg) * 1.5);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.quick__btn:hover { border-color: var(--line-strong); }
.quick__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.quick__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.quick__btn--pos .quick__icon    { background: var(--pos-soft);    color: var(--pos); }
.quick__btn--warn .quick__icon   { background: var(--warn-soft);   color: var(--warn); }
.quick__btn--info .quick__icon   { background: var(--info-soft);   color: var(--info); }
.quick__btn--accent .quick__icon { background: var(--accent-soft); color: var(--accent); }