/* ============================================================
   سربرگ - گرید سه‌ستونه
============================================================ */
.invoice-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px; align-items:center;
  padding:18px 20px; margin-bottom:16px;
  background:linear-gradient(135deg,#f8faff 0%,#ffffff 55%,#fbfcff 100%);
  border:1px solid var(--line);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.invoice-head::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--brand));
  opacity:.85;
}
.invoice-head::after{
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,59,107,.15),transparent);
}

/* ستون وسط: عنوان */
.head-title{min-width:0;text-align:center}
.title-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.title-ribbon{
  display:inline-block; width:4px; height:22px; border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--brand));
}
.invoice-head h1{
  margin:0; font-size:20px; font-weight:800;
  color:var(--brand); letter-spacing:-.3px;
}

/* متادیتا به‌صورت چیپ */
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.meta-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 4px;
  background:#fff; border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(20,30,60,.03);
}
.meta-lbl{color:var(--ink-faint);font-size:11.5px;font-weight:600}
.w-date{width:110px;text-align:left}
.w-serial{width:140px;text-align:left}
.meta-chip .field{
  padding:2px 6px; font-size:12.5px; font-weight:600;
  color:var(--brand);
}
.meta-chip .field:hover{background:var(--soft)}

/* لوگو */
.logo-box{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:12px; transition:all .2s ease;
  padding:6px; min-width:110px;
}
.logo-box:not(.empty){min-width:130px}
.logo-box:hover{background:rgba(47,59,107,.04)}
.logo-box img,.logo-box svg{max-width:150px; max-height:80px; height:auto; display:block}

.logo-box.empty{
  border:2px dashed #c8d0e6;
  background:linear-gradient(180deg,#fafbff,#f4f6fd);
  min-width:110px; min-height:80px;
}
.logo-box.empty:hover{
  border-color:var(--brand);
  background:#f0f3fb;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(47,59,107,.08);
}
.logo-placeholder{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-faint); font-size:11px; font-weight:700;
  user-select:none; pointer-events:none;
}
.logo-placeholder svg{
  width:26px; height:26px;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* QR */
.qr-box{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 1px 3px rgba(20,30,60,.04);
}
.qr-target{width:78px;height:78px;display:flex;align-items:center;justify-content:center}
.qr-target img,.qr-target svg{width:100%;height:100%;image-rendering:pixelated;display:block}
.qr-lbl{font-size:9.5px;color:var(--ink-faint);font-weight:600;letter-spacing:.3px}

/* ============================================================
   فروشنده و خریدار - دو کارت کنار هم
============================================================ */
.parties-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px; margin-bottom:16px;
}

.party{
  border:1px solid var(--line); border-radius:14px;
  padding:12px 16px 12px 14px; margin:0;
  background:linear-gradient(180deg,#fcfdff,#f8faff);
  position:relative; overflow:hidden;
}
.party::before{
  content:''; position:absolute; top:12px; bottom:12px; right:0;
  width:4px; background:linear-gradient(180deg,var(--brand),var(--accent));
  border-radius:4px 0 0 4px;
}
.party h2{
  margin:0 0 8px; font-size:13px; font-weight:700;
  color:var(--brand); letter-spacing:.2px;
  display:flex; align-items:center; gap:6px;
}
.party h2::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.fld{display:flex;align-items:center;gap:6px;min-width:0}
.fld>span{
  white-space:nowrap; color:var(--ink-faint); font-size:11.5px;
  font-weight:600; min-width:52px; flex-shrink:0;
}
.fld.full{grid-column:1 / -1}
.fld .field{font-size:12.5px}

/* ============================================================
   جدول اقلام - مدرن
============================================================ */
.items-wrap{margin-bottom:16px}
.items{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:14px;
  overflow:hidden; font-size:12.5px;
  box-shadow:0 2px 8px rgba(20,30,60,.03);
}
.items thead th{
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#fff; font-weight:700; padding:11px 6px;
  font-size:11.5px; letter-spacing:.3px; text-align:center;
  white-space:nowrap;
}
.items thead th + th{border-inline-start:1px solid rgba(255,255,255,.08)}
.items tbody td{
  padding:3px 5px; text-align:center;
  background:#fff; border-top:1px solid var(--line-soft);
  transition:background .12s;
}
.items tbody tr:first-child td{border-top:none}
.items tbody tr:nth-child(even) td{background:#fbfcff}
.items tbody tr:hover td{background:#f4f7fd}
.items tbody tr:focus-within td{background:#eef2fb}
.items tbody tr:focus-within td:first-child{box-shadow:inset 3px 0 0 var(--brand)}

.items .desc{text-align:right; font-weight:500}
.items .num{direction:ltr; text-align:center}
.items .sku{font-size:11.5px; color:var(--ink-soft)}
.c-num{width:44px} .c-sku{width:80px}
.c-qty{width:72px} .c-price{width:150px} .c-del{width:34px}
.row-num{color:var(--ink-faint);font-weight:700;font-size:11.5px}

.del{
  border:none; background:transparent; color:#c0392b;
  width:24px; height:24px; border-radius:6px; cursor:pointer;
  font-size:16px; line-height:1; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .12s; opacity:.55;
}
.del:hover{background:#fdecea;opacity:1}

/* راهنمای کیبورد */
.row-hint{
  display:flex; flex-wrap:wrap; gap:12px;
  padding:8px 12px; margin-top:6px;
  font-size:11px; color:var(--ink-faint);
}
.kbd-hint{display:inline-flex;align-items:center;gap:5px}
kbd{
  display:inline-block; padding:1px 6px; min-width:18px;
  background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px;
  font-family:inherit; font-size:10.5px; font-weight:700;
  color:var(--brand); text-align:center;
}

/* انیمیشن ردیف جدید */
@keyframes rowFlash{
  0%   { background:#fef3c7; }
  100% { background:transparent; }
}
.items tbody tr.flash td{
  animation:rowFlash .9s ease-out;
}

/* ============================================================
   جمع‌بندی - کارت برجسته
============================================================ */
.summary{display:flex;justify-content:flex-end;margin-bottom:16px}
.sum-box{
  width:65%; min-width:320px;
  border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:#fff;
  box-shadow:0 4px 20px rgba(20,30,60,.06);
}
.sum-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 16px;
  border-bottom:1px dashed var(--line-soft);
  font-size:12.5px;
}
.sum-row>span{color:var(--ink-soft);font-weight:600;white-space:nowrap}
.num-amt{direction:ltr;text-align:left;width:150px;font-weight:700;font-size:13px}
.sum-row.grand{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#fff; border-bottom:none; padding:13px 16px;
}
.sum-row.grand>span{color:#fff;font-weight:700;font-size:13.5px}
.sum-row.grand .num-amt{color:#fff;font-weight:800;font-size:15px}
.sum-row.grand .field:hover{background:rgba(255,255,255,.10)}

.disc-wrap,.tax-wrap{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.disc-wrap .num-amt{width:130px}
.tax-wrap .num-amt{width:80px}
.tax-toggle{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-soft);cursor:pointer;user-select:none}

.words{
  padding:10px 16px; background:linear-gradient(180deg,#f8faff,#f4f6fd);
  font-size:11.5px; line-height:1.9; color:var(--ink);
  border-top:1px solid var(--line);
}
.words-lbl{color:var(--ink-faint);font-weight:600;margin-inline-end:4px}
.words b{color:var(--brand);font-weight:700}

/* ============================================================
   توضیحات
============================================================ */
.note{
  margin-bottom:16px; font-size:11.5px; line-height:2;
  color:var(--ink-soft);
  padding:10px 14px;
  background:linear-gradient(180deg,#fcfdff,#f8faff);
  border:1px dashed var(--line);
  border-radius:12px;
}
.note p{margin:0 0 4px; padding:2px 4px; border-radius:6px; outline:none;transition:background .12s}
.note p:last-child{margin-bottom:0}
.note p:hover,.note p:focus{background:#fff}
.ltr-txt{direction:ltr;display:inline-block;unicode-bidi:embed;font-weight:600;color:var(--brand)}

/* ============================================================
   امضاها
============================================================ */
.signs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:16px;
}
.sign{
  border:1.5px dashed var(--line); border-radius:14px;
  background:linear-gradient(180deg,#fcfdff,#f8faff);
  padding:12px; min-height:135px;
  display:flex; flex-direction:column;
  transition:all .15s;
}
.sign:hover{border-color:#b6bfd4;background:#f6f9ff}
.sign-title{
  text-align:center; font-size:11.5px; color:var(--ink-soft);
  font-weight:700; margin-bottom:8px; letter-spacing:.3px;
}
.stamp-box{
  flex:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:10px; transition:background .15s;
  min-height:85px;
}
.stamp-box:hover{background:rgba(47,59,107,.04)}
.stamp-box img{max-width:100%;max-height:110px}
.hint{font-size:11px;color:var(--ink-faint);text-align:center;font-weight:600}
/* ============================================================
   انواع سند و وضعیت تسویه
============================================================ */

/* انتخاب نوع سند */
.doc-type-select{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:20px;
  font-weight:800;
  color:var(--brand);
  cursor:pointer;
  padding:2px 22px 2px 6px;
  border-radius:8px;
  letter-spacing:-.3px;
  text-align:center;
  transition:background .15s;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--brand) 50%),
    linear-gradient(135deg,var(--brand) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.doc-type-select:hover{background-color:rgba(47,59,107,.05)}
.doc-type-select:focus{outline:none;background-color:#fff;box-shadow:0 0 0 3px rgba(47,59,107,.10)}
@media print{
  .doc-type-select{
    background-image:none !important;
    padding:0 !important;
    font-size:14pt !important;
    text-align:center !important;
    width:100% !important;
    pointer-events:none !important;
  }
}

/* پیل وضعیت تسویه */
.pay-status-pill{
  display:inline-flex;
  align-items:center;
  position:relative;
  padding:3px 26px 3px 12px;
  border-radius:30px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
  border:1px solid;
  transition:all .15s;
  background-image:
    linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.pay-status-pill select{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:11.5px;
  font-weight:700;
  color:inherit;
  cursor:pointer;
  outline:none;
  padding:0;
}
.pay-status-pill select option{color:#1e2745;background:#fff}

/* رنگ‌بندی بر اساس وضعیت */
.pay-status-pill[data-status="paid"]{
  color:#1e7f4b;
  border-color:#9bd3b5;
  background-color:#e7f6ee;
}
.pay-status-pill[data-status="unpaid"]{
  color:#b3261e;
  border-color:#f0c4bf;
  background-color:#fdecea;
}
.pay-status-pill[data-status="pending"]{
  color:#8a5a00;
  border-color:#f0d99b;
  background-color:#fff6e0;
}
.pay-status-pill[data-status="partial"]{
  color:#1d4ba0;
  border-color:#a9c1e8;
  background-color:#e8eefe;
}
@media print{
  .pay-status-pill{
    background-image:none !important;
    padding:2px 10px !important;
    font-size:8.5pt !important;
    pointer-events:none;
  }
  .pay-status-pill select{
    pointer-events:none;
    -webkit-appearance:none;
    appearance:none;
  }
}

/* ============================================================
   هزینه ارسال / مانده / بیانیه
============================================================ */
.prev-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
}
.prev-wrap .num-amt{width:130px}

.net-row > span{font-weight:700}
.net-row.debit > span{color:#b3261e}
.net-row.debit .num-amt{color:#b3261e}
.net-row.credit > span{color:#1e7f4b}
.net-row.credit .num-amt{color:#1e7f4b}
.net-row.none > span{color:var(--ink-soft)}

.statement-row{
  background:linear-gradient(90deg,#f5f7fc,#f0f3fb);
  border-top:1px solid var(--line);
}
.statement-row > span{color:var(--brand);font-weight:700}
.statement-row .num-amt{color:var(--brand)}

@media print{
  .prev-wrap .mini-sel{display:none !important}
  .prev-wrap .num-amt{width:110px !important}
}