/* بازطراحی چیدمان صفحه محاسبه دستمزد کارشناسی رسمی — تک‌ستون، بخش‌های شماره‌دار
   و پیوسته (بدون فضای پرت بین فیلدها)، به‌جای فرم/نتیجه دوستونی قبلی. رنگ‌ها همان
   توکن‌های calculator.css هستند؛ اینجا فقط چیدمان تغییر می‌کند. */

.ef-page { max-width: 760px; margin: 0 auto; padding: 20px clamp(14px, 3vw, 28px) 64px; }

.ef-section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px clamp(16px, 3vw, 26px); margin-bottom: 14px;
}
.ef-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ef-section-head .ef-num {
  flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800;
}
.ef-section-head h3 { margin: 0; font-size: 15px; color: var(--ink); }

/* فیلدهای کوچک کنار هم، بدون شکاف بزرگ — جایگزین فیلدهای تمام‌عرض پشت‌سرهم قبلی. */
.ef-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; align-items: end; width: 100%; }
.ef-field-grid .field { margin: 0; }
.ef-field-grid .switch-line { align-self: end; margin: 0 0 10px; }
/* select در کروم مقدار line-height نویسنده را می‌پذیرد ولی در رندر نادیده می‌گیرد و
   normal می‌ماند؛ نتیجه‌اش ۲ پیکسل کوتاه‌تر شدن select از input بود و چون گرید
   align-items:end دارد، هر ردیفی که هم select داشت هم input ناهم‌تراز می‌شد.
   پس ارتفاع را صریح یکی می‌کنیم: line-height متن + padding بالا و پایین + دو border. */
.ef-field-grid .field input,
.ef-field-grid .field select { min-height: calc(1.75em + 18px); }

.ef-section .check-group { margin: 10px 0 0; }

.ef-actions { display: flex; justify-content: flex-end; margin: 4px 0 14px; }
.ef-actions .button { min-width: 160px; }

/* نتیجه، مسیر محاسبه و مبنای قانونی حالا زیرِ هم در یک بخش‌اند، نه سه جعبه‌ی جدا. */
.ef-result-section .ef-subhead {
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 800; color: var(--brand-2);
}
.ef-result-section #ef-trace-panel .ef-subhead { border-top: 0; padding-top: 0; }

/* نسخه تعرفه دیگر یک منوی بزرگ بالای صفحه نیست — چون فعلاً فقط یک نسخه هست، یک
   پاورقی کوچک ته فرم کافی است؛ اگر روزی نسخه‌ی دومی اضافه شد همین select کار می‌کند. */
.ef-footnote {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 12px; color: var(--muted);
}
.ef-footnote .field { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.ef-footnote .field > span:first-child { margin: 0; font-size: 12px; white-space: nowrap; }
.ef-footnote select { min-height: 30px; padding: 3px 8px; font-size: 12px; width: auto; max-width: 100%; }
.ef-footnote .af-repealed { flex-basis: 100%; margin-top: 6px; }

.ef-span-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .ef-field-grid { grid-template-columns: 1fr; }
  /* انتخاب نسخه‌ی تعرفه: گزینه‌ی بلند («جدول شماره ۱۶ قانون بودجه…») select را تا ۵۸۰ پیکسل پهن می‌کرد و کل
     صفحه افقی اسکرول می‌شد (B02). روی موبایل برچسب بالای فیلد و فیلد تمام‌عرض با هدف لمس ۴۴. */
  .ef-footnote .field { flex-direction: column; align-items: stretch; flex: 1 1 100%; min-width: 0; }
  .ef-footnote .field > span:first-child { white-space: normal; }
  .ef-footnote select { width: 100%; min-height: 44px; font-size: 14px; }
}

/* ——— منوی کرکره‌ای جست‌وجوپذیر — برای فیلدهایی با گزینه‌های زیاد (۱۵+ آیتم) که
   اسکرول‌کردن یک select معمولی در آن‌ها دردسرساز است. */
.ss-wrap { position: relative; }
.ss-input {
  /* ۴۴ پیکسل تا با input و select بومی دقیقاً هم‌قد باشد؛ با ۴۲ یک پیکسل پایین‌تر
     می‌نشست و در ردیف فیلدها ناهم‌تراز دیده می‌شد. */
  width: 100%; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
}
.ss-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.ss-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; left: 0;
  max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 4px;
}
.ss-option {
  padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 13.5px; line-height: 1.6;
}
.ss-option:hover, .ss-option.ss-active { background: var(--surface-soft); color: var(--brand); }
.ss-option .ss-meta { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ss-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
mark.ss-hit { background: var(--accent-soft); color: inherit; border-radius: 3px; }

/* دکمه‌ی «دریافت گزارش PDF» داخل سربرگ پنل نتیجه */
.ef-section-head { display: flex; align-items: center; }
.rp-open-btn { margin-inline-start: auto; white-space: nowrap; }
.rp-new-btn { white-space: nowrap; }

/* فرم پس از نتیجه قفل است (report-print.js)؛ این یادداشت دلیلش را می‌گوید تا کاربر خیال نکند
   صفحه از کار افتاده. */
.rp-locked-note {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--accent-soft, #FDF6E3); color: var(--warning, #8A6520);
  font-size: 13px; line-height: 1.9;
}
@media (max-width: 560px) {
  .ef-section-head:has(.rp-open-btn) { flex-wrap: wrap; }
  .ef-section-head .rp-open-btn { margin-inline-start: 0; }
}

/* ——— قدرالسهم چندواحدی ——— */
.ls-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ls-mode { display: flex; gap: 9px; align-items: flex-start; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; background: var(--surface); }
.ls-mode:hover { border-color: var(--brand); }
.ls-mode input { margin-top: 3px; }
.ls-mode strong { display: block; font-size: 14px; }
.ls-mode small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 2px; }
.ls-mode:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.ls-table-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.ls-unit { margin: 8px 0; padding: 12px; }
.ls-unit-actions { margin-top: 8px; }
.ls-owner { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }

.ls-scroll { overflow-x: auto; }
.ls-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ls-table th, .ls-table td { padding: 8px 10px; border: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ls-table thead th { background: var(--brand); color: #fff; }
.ls-table tfoot td, .ls-table .ls-total-row td { background: var(--surface-soft); font-weight: 850; }
.ls-table .ls-owner-row td { background: #fafcfb; color: var(--muted); font-size: 12px; }

/* شبکه‌های بخش «ساخت جدول» از بالا هم‌تراز می‌شوند: بعضی فیلدها راهنمای زیرشان دارند
   و با هم‌ترازی از پایین (پیش‌فرض .ef-field-grid) کادرهای هم‌ردیف جابه‌جا می‌شدند.
   min-height روی برچسب هم باعث می‌شود برچسب یک‌خطی و دوخطی کادرها را از خط نیندازد. */
#ls-build-wrap .ef-field-grid { align-items: start; }
#ls-build-wrap .ef-field-grid > .field > span:first-child { min-height: 36px; display: flex; align-items: flex-end; }

/* دکمه‌ی «ساخت جدول» به فیلدهای بالا چسبیده بود. */
#ls-autofill .ef-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
#ls-autofill > .ef-subhead { margin-top: 20px; }
#ls-autofill > .field-hint { display: block; margin-bottom: 14px; }