/* invoice-form.css — اجزای مشترک فرم‌های فاکتور (فروش/خرید/برگشتی‌ها)
   قبلاً این ~۸۰ قاعده در ۴ فایل (invoice.html, purchase.html,
   sales-return.html, purchase-return.html) عیناً کپی شده بود؛ الان
   یک‌جا این‌جاست و هر ۴ صفحه همین را می‌خوانند. اگر چیزی این‌جا عوض
   شود، خودکار در هر ۴ صفحه اعمال می‌شود. */

.page { max-width: var(--w-wide); width: 100%; }

header a.back {
    display: inline-block; margin-top: 8px; font-size: 12.5px;
    color: var(--primary); text-decoration: none; font-weight: 600;
  }

header a.back:hover { text-decoration: underline; }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }

input[type="number"] { font-family: var(--font-num); }

.dual-search { display: grid; grid-template-columns: 1fr 78px; gap: 8px; }

.dual-search input.code-input {
    font-family: var(--font-num); font-size: 12px; text-align: center;
    padding: 8px 6px;
    background: var(--surface-2); border-color: var(--warning-border);
  }

.dual-search input.code-input::placeholder { color: var(--warning-text); font-family: "Vazirmatn", sans-serif; font-size: 12px; }

.date-compact {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; font-size: 13.5px;
  }

.date-compact #date-label { flex: 1; font-family: var(--font-num); }

.date-compact button {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 700; color: var(--primary); padding: 0;
  }

.date-compact button:hover { text-decoration: underline; }

.submit-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -18px rgba(43,33,29,0.5);
    padding: 12px 20px;
  }

.submit-bar .recent { flex: 1; font-size: 12.5px; color: var(--ink-soft); }

.submit-bar .recent a { color: var(--primary); font-weight: 700; text-decoration: none; margin-inline-start: 10px; }

#submit-amount { font-family: var(--font-num); margin-inline-start: 8px; }

/* ۱۱۰px فقط تا وقتی است که جاوااسکریپت ارتفاع واقعی نوار را اندازه
   بگیرد (common.js). با اضافه شدن مبلغ، نوار دو سطری می‌شود و عدد
   ثابت کم می‌آورد — و آخرین عنصر صفحه، کادر تخفیف، زیرش گم می‌شد.
   ۱۶px هم فاصلهٔ نفس‌کشیدن، تا محتوا دقیقاً به نوار نچسبد. */
body {
  padding-bottom: calc(var(--submit-h, 110px) + 16px + env(safe-area-inset-bottom));
}

.qty-cell { display: flex; align-items: center; gap: 4px; }

.qty-btn {
    width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line);
    background: #fff; border-radius: var(--r-sm); cursor: pointer; font-size: 17px;
    line-height: 1; color: var(--primary); font-family: inherit;
    display: flex; align-items: center; justify-content: center;
  }

.qty-btn:hover { background: var(--primary-soft); }

.qty-cell input { text-align: center; min-width: 48px; }

.pay-discount { margin-bottom: 14px; }

.pay-discount label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.pay-discount input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
    font-family: var(--font-num); font-size: 13.5px; }

.pay-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }

.pay-quick button {
    flex: 1; min-width: 120px; padding: 11px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: #fff; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
  }

.pay-quick button:hover { background: var(--primary-soft); border-color: var(--primary); }

.suggestion.loading { color: var(--ink-soft); justify-content: center; }

.search-wrap { position: relative; }

.suggestions {
    position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 20;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: 0 12px 28px -14px rgba(43,33,29,0.35);
    max-height: 260px; overflow-y: auto; display: none;
  }

.suggestions.open { display: block; }

.suggestion {
    padding: 10px 14px; cursor: pointer; font-size: 13px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--line);
  }

.suggestion:last-child { border-bottom: none; }

.suggestion:hover, .suggestion.active { background: var(--primary-soft); }

.suggestion .meta { font-family: var(--font-num); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

.suggestion .meta .out { color: var(--danger); }

/* فهرست پیشنهاد کالا: هر ردیف = یک کالا، و ستون‌ها در همهٔ ردیف‌ها
   زیر هم می‌افتند (grid با عرض ثابت برای ستون‌های عددی). */
.suggestion.item-row {
    display: grid;
    grid-template-columns: 1fr 92px 62px 104px;
    column-gap: 10px; align-items: center;
  }

.suggestion.item-row .c-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

.suggestion.item-row .c-code,
.suggestion.item-row .c-qty,
.suggestion.item-row .c-rate {
    font-family: var(--font-num); font-size: 12px; color: var(--ink-soft);
    white-space: nowrap;
  }

.suggestion.item-row .c-qty { text-align: center; font-weight: 700; color: var(--ink); }

.suggestion.item-row .c-qty.out { color: var(--danger); }

.suggestion.item-row .c-rate { text-align: left; }

/* سرستون: کلیک‌ناپذیر و کم‌رنگ‌تر، فقط برای خواناتر شدن ستون‌ها */
.suggestion.item-row.head {
    cursor: default; background: var(--surface-2);
    font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
    position: sticky; top: 0; z-index: 1;
  }

.suggestion.item-row.head:hover { background: var(--surface-2); }

.suggestion.item-row.head span { font-family: inherit; color: var(--ink-soft); }

table { width: 100%; border-collapse: collapse; }

thead th {
    font-size: 12px; font-weight: 700; color: var(--ink-soft);
    text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }

tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }

tbody tr:last-child td { border-bottom: none; }

tbody td.num { font-family: var(--font-num); }

/* نام کالا در فهرست اقلام سند پررنگ است.
   بقیهٔ ستون‌ها عدد و کنترل‌اند؛ چیزی که کاربر با چشم دنبالش می‌گردد تا
   مطمئن شود کالای درست را زده، همین نام است. در هر چهار نوع سند
   (فروش، برگشت از فروش، خرید، برگشت از خرید) یکسان است. */
tbody td.l-name { font-weight: 700; color: var(--ink); }

tbody input { padding: 7px 9px; font-size: 12.5px; }

.empty-row td { text-align: center; color: var(--ink-soft); padding: var(--sp-4) 0; font-size: 13px; }

.btn-remove {
    background: var(--danger-soft); color: var(--danger); border: none;
    border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; font-size: 12px;
    font-family: inherit; transition: opacity 150ms ease;
  }

.btn-remove:hover { opacity: 0.8; }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); align-items: end; }

.total-box {
    background: var(--surface-2); border: 1px solid var(--warning-border); border-radius: var(--r-md); padding: 14px;
  }

.total-box .label { font-size: 12px; color: var(--warning-text); font-weight: 600; margin-bottom: 4px; }

.total-box .value { font-family: var(--font-num); font-size: 19px; font-weight: 700; color: var(--warning-text); }

.total-box.grand { background: var(--primary-soft); border-color: var(--primary-border); }

.total-box.grand .label { color: var(--primary); }

.total-box.grand .value { color: var(--primary); font-size: 22px; }

.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; }

.btn {
    padding: 12px 26px; border-radius: var(--r-md); border: none; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700;
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-md); }

.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }

.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost { background: var(--line); color: var(--ink); }

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(43,33,29,0.45);
    display: none; align-items: center; justify-content: center;
    z-index: 100; padding: var(--sp-4); backdrop-filter: blur(2px);
  }

.modal-backdrop.open { display: flex; }

.modal {
    background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 560px;
    box-shadow: 0 24px 60px -20px rgba(43,33,29,0.5);
    max-height: 90vh; overflow-y: auto; padding: var(--sp-4);
    animation: pop 180ms ease;
  }

@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.modal h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }

.modal .modal-sub { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 18px; }

.amount-banner {
    background: var(--primary-soft); border: 1px solid var(--primary-border);
    border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px;
    display: flex; justify-content: space-between; align-items: center;
  }

.amount-banner .label { font-size: 12.5px; font-weight: 600; color: var(--primary); }

.amount-banner .value { font-family: var(--font-num); font-size: 20px; font-weight: 800; color: var(--primary); }

.pay-row {
    display: grid; grid-template-columns: 1.1fr 1.1fr 1fr auto;
    gap: 8px; align-items: center; margin-bottom: 10px;
  }

.pay-row select, .pay-row input { padding: 9px 10px; font-size: 12.5px; }

.pay-row .btn-remove { padding: 8px 10px; }

.btn-add-pay {
    background: var(--teal-soft); color: var(--teal); border: 1px dashed var(--teal);
    border-radius: var(--r-sm); padding: 9px 14px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; width: 100%; margin-top: 4px;
    transition: background 150ms ease;
  }

.btn-add-pay:hover { background: var(--success-hover); }

.remaining-box {
    margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 600;
  }

.remaining-box.paid { background: var(--teal-soft); color: var(--teal); }

.remaining-box.credit { background: var(--gold-soft); color: var(--warning-text); }

.remaining-box.over { background: var(--danger-soft); color: var(--danger); }

.remaining-box .num { font-family: var(--font-num); font-weight: 800; }

.modal-actions { display: flex; gap: 10px; margin-top: 22px; }

.modal-actions .btn { flex: 1; }

.alert { border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; margin-bottom: 16px; display: none; }

.alert.ok { background: var(--teal-soft); border: 1px solid var(--success-border); color: var(--success-text); display: block; }

.alert.err { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); display: block; }

/* تخفیف — روی خودِ صفحه‌ی فاکتور (قبلاً در سه صفحه داخل پاپ‌آپ پرداخت بود) */
.discount-box { margin-top: var(--sp-3); }

.discount-box label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.discount-box input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-family: var(--font-num); font-size: 13.5px;
  }

/* دو کادر تخفیف کنار هم: مبلغ و درصد، هر دو قابل ویرایش */
.discount-pair { display: flex; gap: 10px; flex-wrap: wrap; }

.discount-pair > div {
    position: relative; flex: 0 0 auto; width: 170px;
  }

.discount-pair > div:last-child { width: 120px; }

.discount-pair .unit {
    position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%);
    font-size: 11.5px; color: var(--ink-soft); pointer-events: none;
  }

.discount-pair input { padding-inline-start: 46px; }

/* فیلد تعداد: اسپینر بومی مرورگر حذف می‌شود — دکمه‌های −/+ بیرون کادر
   همان کار را شفاف‌تر انجام می‌دهند و اسپینر داخلی فقط جا می‌گیرد و
   موقع تایپ عدد دورقمی مزاحم است. */
.qty-cell input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.qty-cell input[type="number"]::-webkit-outer-spin-button,
.qty-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

/* ==================================================================
   موبایل — فرم سند
   ------------------------------------------------------------------
   این بخش زیر ۷۶۸px اعمال می‌شود و روی دسکتاپ هیچ اثری ندارد.
   ================================================================== */
@media (max-width: 768px) {

  /* --- فهرست پیشنهاد کالا -------------------------------------------
     چیدمان دسکتاپ چهار ستون است: نام | کد | موجودی | قیمت
     سه ستون آخر ثابت‌اند (۹۲+۶۲+۱۰۴) و با فاصله‌ها حدود ۲۸۸px می‌شوند.
     روی گوشی ۳۲۰ تا ۳۹۰ پیکسلی، بعد از پدینگ بدنه و کارت، همین‌قدر
     فضا هست — پس ستون نام (که 1fr است) به صفر می‌رسید و کاربر
     نمی‌دید چه کالایی را انتخاب می‌کند.

     راه‌حل: نام یک سطر کامل برای خودش، و سه مقدار دیگر سطر دوم به
     شکل اطلاعات فرعی. هیچ داده‌ای حذف نمی‌شود. */
  .suggestions .suggestion.item-row {
    display: block;
    padding: 11px 14px;
  }
  .suggestions .suggestion.item-row .c-name {
    display: block; white-space: normal;   /* نام بلند بشکند، نه اینکه بریده شود */
    font-size: 14px; font-weight: 700; color: var(--ink);
    margin-bottom: 5px; line-height: 1.6;
  }
  .suggestions .suggestion.item-row .c-code,
  .suggestions .suggestion.item-row .c-qty,
  .suggestions .suggestion.item-row .c-rate {
    display: inline-block; text-align: start; font-size: 12px;
  }
  .suggestions .suggestion.item-row .c-code::before { content: "کد "; font-family: "Vazirmatn", sans-serif; }
  .suggestions .suggestion.item-row .c-qty::before  { content: " · موجودی "; font-family: "Vazirmatn", sans-serif; color: var(--ink-soft); font-weight: 400; }
  .suggestions .suggestion.item-row .c-rate::before { content: " · "; color: var(--ink-soft); }

  /* سرستون فهرست معنایش را از دست می‌دهد چون ستون‌ها دیگر زیر هم نیستند */
  .suggestions .suggestion.item-row.head { display: none; }

  /* فهرست بلند روی گوشی باید بیشتر جا داشته باشد */
  .suggestions { max-height: 60dvh; }

  /* --- پاپ‌آپ پرداخت -------------------------------------------------
     submit-bar روی z-index 150 است و این پاپ‌آپ روی ۱۰۰ بود؛ یعنی نوار
     ثابتِ پایین روی پاپ‌آپ می‌افتاد. روی دسکتاپ چون پاپ‌آپ وسط صفحه
     است کمتر دیده می‌شد، ولی روی گوشی که از پایین بالا می‌آید، دقیقاً
     روی دکمه‌های پرداخت می‌نشست. */
  .modal .pay-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 11px; margin-bottom: 12px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-2);
  }
  .modal .pay-row .btn-remove { width: 100%; padding: 10px; }

  .modal .modal-actions { flex-wrap: wrap; }
  .modal .modal-actions .btn { flex: 1 1 140px; }

  /* --- تخفیف --------------------------------------------------------
     دو کادر ۱۷۰ پیکسلی کنار هم روی صفحهٔ ۳۲۰ جا نمی‌شوند. */
  .discount-box .discount-pair > div { flex: 1 1 140px; width: auto; }

  /* --- جدول اقلام سند ------------------------------------------------
     این جدول عمداً کارت نمی‌شود: ورودی تعداد و قیمت داخلش است و
     تبدیل به کارت، ویرایش را سخت‌تر می‌کند نه آسان‌تر. فقط اجازهٔ
     اسکرول افقی امن می‌گیرد. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- نوار ثابت پایین -----------------------------------------------
     تلاش برای جا دادن هر سه عنصر در یک سطر روی گوشی جواب نمی‌دهد:
     «پرداخت و ثبت» به‌علاوهٔ مبلغ به‌تنهایی بیشتر از نصف عرض را
     می‌گیرد. پس به‌جای اینکه بگذاریم مرورگر خودش هرجا خواست بشکند،
     چیدمان را عمدی می‌کنیم:

       سطر ۱ — لینک آخرین سند (اگر خالی باشد اصلاً سطری نمی‌گیرد)
       سطر ۲ — «پاک کردن» به اندازهٔ خودش، «پرداخت و ثبت» بقیهٔ عرض

     ارتفاع نهایی هرچه باشد، common.js اندازه‌اش می‌گیرد و فضای پایین
     صفحه با آن هماهنگ می‌شود. */
  .submit-bar { padding: 10px 14px; }
  .submit-bar .inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  .submit-bar .recent {
    flex: 1 1 100%; min-width: 0; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .submit-bar .recent:empty { display: none; }   /* سطر خالی نسازد */

  .submit-bar #btn-reset {
    flex: 0 0 auto; padding: 12px 16px; font-size: 13px;
  }
  .submit-bar #btn-submit {
    flex: 1 1 auto; min-width: 0; padding: 12px 14px; font-size: 13.5px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .submit-bar #submit-amount { margin-inline-start: 0; }
}

/* z-index پاپ‌آپ در هر عرضی باید بالاتر از نوار ثابت (۱۵۰) باشد.
   عمداً بیرون از media query است چون یک باگ است، نه یک تنظیم موبایل. */
body .modal-backdrop { z-index: 300; }