/* ===================================================================
   מחשבונים 14–16 (22.10.26) — רק מה שאין לו כבר רכיב ב-calculators.css.
   הכל scoped לשלושת הפאנלים, כדי לא להתנגש בשמות קיימים.
   =================================================================== */

/* ---------- 14 · שעות עבודה ---------- */
#panel-hours .hr-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
#panel-hours .hr-presets-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
#panel-hours .hr-preset {
  border: 1.5px solid var(--hairline-2); background: #fff; border-radius: 100px;
  padding: 6px 12px; font: 700 13px/1.2 var(--font-display); color: var(--ink-2);
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
#panel-hours .hr-preset:hover,
#panel-hours .hr-preset:focus-visible { border-color: var(--teal-2); color: var(--teal-2); background: rgba(46,164,160,0.05); }
#panel-hours .hr-mode { margin-top: 18px; }
#panel-hours .hr-net-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); min-height: 0; }
#panel-hours .hr-net-note:empty { display: none; }

#panel-hours .hr-days { display: grid; gap: 7px; }
#panel-hours .hr-row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; }
#panel-hours .hr-row-l { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
#panel-hours .hr-cells { display: grid; grid-template-columns: repeat(22, minmax(0, 24px)); gap: 3px; }
#panel-hours .hr-cells i {
  display: block; aspect-ratio: 1; border-radius: 3px;
  background: linear-gradient(to left, #157F5E calc(var(--p) * 100%), rgba(10,22,40,0.07) 0);
}
#panel-hours .hr-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- 15 · קרן חירום ---------- */
#panel-emergency .em-q { display: block; margin: 20px 0 10px; }
#panel-emergency .em-income .calc-seg-btn { padding: 9px 6px; }
#panel-emergency .em-toggles { gap: 10px; margin-top: 0; }
#panel-emergency .em-toggles .calc-toggle-card { padding: 12px 16px; }
#panel-emergency .em-money { margin-top: 18px; }

#panel-emergency .em-meter { padding: 4px 2px 0; }
#panel-emergency .em-bar {
  position: relative; height: 18px; border-radius: 100px;
  background: rgba(10,22,40,0.07); overflow: visible;
}
#panel-emergency .em-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 100px;
  background: linear-gradient(to left, #0D7A72, #2EA4A0); min-width: 6px;
}
#panel-emergency .em-goal {
  position: absolute; top: -7px; bottom: -7px; inset-inline-start: var(--x);
  width: 4px; margin-inline-start: -2px; border-radius: 2px; background: #D4A537;
}
#panel-emergency .em-goal-dot { background: #D4A537; }
#panel-emergency .em-ticks { position: relative; height: 22px; margin-top: 6px; }
#panel-emergency .em-tick { position: absolute; inset-inline-start: var(--x); transform: translateX(50%); font-size: 11.5px; color: var(--muted); }
#panel-emergency .em-tick b { font-weight: 700; }
#panel-emergency .em-meter-cap { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
#panel-emergency .em-table-head,
#panel-debts .db-table-head { margin-top: 28px; }
#panel-emergency .em-table,
#panel-debts .db-table { min-width: 0; }
#panel-emergency .em-table td,
#panel-debts .db-table td:first-child { direction: rtl; }
#panel-emergency .em-table tr.em-mine td { background: rgba(46,164,160,0.10); font-weight: 800; }
#panel-emergency .em-table td small { font-weight: 600; color: var(--muted); }

/* ---------- 16 · סדר סגירת חובות ---------- */
#panel-debts .db-rows { display: grid; gap: 10px; margin-top: 10px; }
#panel-debts .db-row {
  border: 1.5px solid var(--hairline-2); border-radius: 14px; padding: 10px 12px 12px; background: #fff;
}
#panel-debts .db-row:focus-within { border-color: rgba(46,164,160,0.45); }
#panel-debts .db-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#panel-debts .db-name {
  flex: 1; min-width: 0; border: 0; border-bottom: 1.5px dashed var(--hairline-2); background: transparent;
  font: 800 15px/1.3 var(--font-display); color: var(--navy); padding: 4px 2px;
}
#panel-debts .db-name:focus { outline: none; border-bottom-color: var(--teal-2); }
#panel-debts .db-del {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--hairline-2);
  background: #fff; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1;
}
#panel-debts .db-del:hover { border-color: #c0392b; color: #c0392b; }
#panel-debts .db-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#panel-debts .db-fields label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
#panel-debts .db-fields .calc-num-wrap { width: 100%; padding: 2px 8px 2px 6px; }
#panel-debts .db-fields .calc-num-wrap input[type="number"] { width: 100%; min-width: 0; font-size: 15px; }
#panel-debts .db-add {
  margin-top: 10px; width: 100%; border: 1.5px dashed var(--hairline-2); background: transparent;
  border-radius: 12px; padding: 10px; font: 700 14px var(--font-display); color: var(--teal-2); cursor: pointer;
}
#panel-debts .db-add:hover { border-color: var(--teal-2); background: rgba(46,164,160,0.05); }
#panel-debts .db-mins { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
#panel-debts .db-warn {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: rgba(192,57,43,0.07); border: 1px solid rgba(192,57,43,0.25); color: #8e2a1f;
}
#panel-debts .db-warn[hidden] { display: none; }
#panel-debts .db-q { display: block; margin: 20px 0 10px; }
#panel-debts .db-chart-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
#panel-debts .db-table tr.db-tot td { font-weight: 800; border-top: 2px solid var(--hairline-2); }

@media (max-width: 560px) {
  #panel-hours .hr-row { grid-template-columns: 1fr; gap: 3px; }
  #panel-hours .hr-cells { gap: 2px; }
  #panel-emergency .em-income { grid-template-columns: 1fr; }
  #panel-debts .db-fields { gap: 6px; }
  #panel-debts .db-fields .calc-num-wrap .calc-unit { font-size: 12px; }
  #panel-hours .hr-cells { grid-template-columns: repeat(22, minmax(0, 1fr)); }
  #panel-emergency .em-table th, #panel-emergency .em-table td,
  #panel-debts .db-table th, #panel-debts .db-table td { padding: 8px 4px; font-size: 12px; }
  #panel-debts .db-table td:first-child { white-space: normal; min-width: 92px; text-align: right; }
}