/* ==============================
   استایل پیش‌نمایش فاکتور (A4 / A5)
   Mobile-first – 2025/2026
   ============================== */

/* قاب کلی پیش‌نمایش با اسکرول عمودی */
#invoice-preview-wrapper,
.invoice-preview-wrapper {
  position: relative;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  -webkit-overflow-scrolling: touch;
  width: 100%;
  min-height: 320px;
  height: clamp(320px, 70vh, 820px);
  max-height: none;
  min-width: 0;
  display: block;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: contain;
}

.invoice-preview-wrapper.is-panning {
  cursor: grabbing;
  user-select: none;
}

.invoice-preview-wrapper.preview-zooming {
  cursor: zoom-in;
}

.invoice-preview-wrapper.preview-zooming-out {
  cursor: zoom-out;
}

.invoice-preview-wrapper.preview-overflow-x {
  justify-content: flex-start;
}

.invoice-preview-wrapper.preview-overflow-y {
  align-items: flex-start;
}

/* استایل اسکرول برای پیش‌نمایش */
@media (min-width: 1024px) {
  #invoice-preview-wrapper,
  .invoice-preview-wrapper {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
}

@media (min-width: 768px) {
  #invoice-preview-wrapper,
  .invoice-preview-wrapper {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
}

/* ریشه پیش‌نمایش */

.invoice-preview {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  --preview-zoom: 1;
  --preview-offset-x: 0px;
  --preview-offset-y: 0px;
  --invoice-discount-color: #16a34a;
  --invoice-tax-color: #334155;
  flex: 0 0 auto;
}

.invoice-preview__content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.25rem;
  transform-origin: top left;
  transform: translate(var(--preview-offset-x), var(--preview-offset-y))
    scale(var(--preview-zoom));
  width: max-content;
  min-width: 0;
}

/* دیگر از aspect-ratio استفاده نمی‌کنیم؛ ارتفاع صفحه بر اساس محتواست */

/* ==============================
   صفحه فاکتور
   ============================== */

.invoice-page {
  position: relative;
  width: 100%;
  max-width: 780px;
  background: #ffffff;
  color: #111827;
  border-radius: 0.4rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);
  overflow: visible; /* محتوا بریده نشود */
  margin-bottom: 0.75rem;
}

.invoice-page__inner {
  position: relative;
  width: 100%;
  padding: 1.2rem 0.8rem 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-family: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  direction: rtl;
}


/* استایل‌های موبایل - فقط برای نمایش در صفحه */
@media (max-width: 600px) {
  .invoice-page__inner {
    padding: 0.6rem 0.5rem 0.5rem;
    gap: 0.6rem;
  }

  .invoice-page__header {
    gap: 0.4rem;
    padding-bottom: 0.4rem;
  }

  /* فقط در موبایل کوچک header را عمودی می‌کنیم */
  .invoice-header-main {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .invoice-title {
    font-size: 0.9rem;
  }

  .invoice-subtitle {
    font-size: 0.7rem;
  }

  .invoice-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }

  .invoice-meta-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    font-size: 0.7rem;
  }

  .invoice-parties {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .invoice-party {
    padding: 0.35rem 0.5rem;
  }

  .invoice-items-table {
    font-size: 0.7rem;
    min-width: 500px;
  }

  .invoice-items-table th,
  .invoice-items-table td {
    padding: 0.3rem 0.4rem;
  }
}

/* برای PDF و چاپ - همیشه layout دسکتاپ را استفاده می‌کنیم */
@media print {
  .invoice-page {
    max-width: 100%;
    box-shadow: none;
    margin-bottom: 0;
    page-break-after: auto;
  }

  .invoice-page__inner {
    padding: 1.2rem 0.8rem 1rem 1.4rem;
  }

  .invoice-header-main {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .invoice-parties {
    grid-template-columns: 1fr 1fr !important;
  }

  .invoice-totals-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important;
  }

  /* حذف transform scale برای PDF */
  .preview-scale--mobile .invoice-page,
  .preview-scale--tablet .invoice-page,
  .preview-scale--desktop .invoice-page {
    transform: none !important;
  }

  .invoice-logo--placeholder {
    display: none !important;
  }
}

/* باقی استایل‌ها همان قبلی هستند... */

/* ==============================
   عبارت «به نام خدا»
   ============================== */

.invoice-bismillah {
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: #111827;
  direction: rtl;
  unicode-bidi: embed;
  font-family: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  white-space: nowrap;
  word-spacing: normal;
  letter-spacing: normal;
}

/* ==============================
   HEADER فاکتور
   ============================== */

.invoice-page__header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.55);
  padding-bottom: 0.5rem;
}

.invoice-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.invoice-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.invoice-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.invoice-subtitle {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
}

/* لوگو */

.invoice-logo {
  width: 82px;
  height: 82px;
  border-radius: 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.invoice-logo--has-image {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.invoice-logo__placeholder {
  font-size: 0.7rem;
  color: #9ca3af;
}

.invoice-logo__img,
.invoice-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.invoice-logo--wide .invoice-logo__img,
.invoice-logo--wide img {
  max-width: 100%;
  max-height: 60%;
}

.invoice-logo--square .invoice-logo__img,
.invoice-logo--square img {
  max-width: 82%;
  max-height: 82%;
}

.invoice-logo--tall .invoice-logo__img,
.invoice-logo--tall img {
  max-width: 65%;
  max-height: 100%;
}

/* meta info */

.invoice-meta-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.45rem;
  font-size: 0.78rem;
}

.invoice-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.invoice-meta-label {
  color: #6b7280;
  font-weight: 500;
}

.invoice-meta-value {
  color: #111827;
}

/* در دسکتاپ و تبلت، header-main به صورت افقی */
@media (min-width: 641px) {
  .invoice-header-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .invoice-header-main {
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  .invoice-meta-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .invoice-meta-row {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   بخش فروشنده / خریدار
   ============================== */

.invoice-page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.78rem;
  min-width: 0;
}

.invoice-party {
  border-radius: 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 0.4rem 0.6rem;
  background: linear-gradient(
      135deg,
      rgba(248, 250, 252, 0.96),
      rgba(239, 246, 255, 0.96)
    );
  min-width: 0;
}

.invoice-party__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}

.invoice-party__row {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.1rem;
  align-items: flex-start;
}

.invoice-party__label {
  min-width: 72px;
  color: #6b7280;
  font-weight: 500;
  flex: 0 0 72px;
}

.invoice-party__value {
  color: #111827;
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* در موبایل، فروشنده و خریدار زیر هم */
@media (max-width: 767px) {
  .invoice-parties {
    grid-template-columns: 1fr;
  }
}

/* در دسکتاپ و تبلت، فروشنده و خریدار کنار هم */
@media (min-width: 768px) {
  .invoice-parties {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==============================
   جدول آیتم‌ها
   ============================== */

.invoice-items-table-wrapper {
  border-radius: 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.8);
  overflow: hidden;
  background-color: #f9fafb;
}

.invoice-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.invoice-items-table thead {
  background: linear-gradient(90deg, #e5e7eb, #d1d5db);
}

.invoice-items-table th,
.invoice-items-table td {
  padding: 0.3rem 0.35rem;
  border-bottom: 1px solid rgba(156, 163, 175, 0.55);
  text-align: right;
}

.invoice-items-table th {
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.invoice-items-table td {
  color: #111827;
}

.invoice-items-table tr:last-child td {
  border-bottom: none;
}

.invoice-col-index {
  width: 30px;
  text-align: center;
  color: #6b7280;
}

.invoice-col-total {
  white-space: nowrap;
}

/* ==============================
   خلاصه جمع / توضیحات / بانک
   ============================== */

.invoice-totals-block {
  margin-top: 0.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0.5rem;
}

.invoice-totals-list {
  border-radius: 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 0.5rem;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
}

.invoice-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice-preview .invoice-totals-row--discount .invoice-totals-label,
.invoice-preview .invoice-totals-row--discount .invoice-totals-value {
  color: var(--invoice-discount-color);
  font-weight: 600;
}

.invoice-preview .invoice-totals-row--tax .invoice-totals-label,
.invoice-preview .invoice-totals-row--tax .invoice-totals-value {
  color: var(--invoice-tax-color);
  font-weight: 600;
}

.invoice-totals-label {
  color: #4b5563;
}

.invoice-totals-value {
  color: #111827;
}

.invoice-preview .invoice-discount-percent {
  font-size: 0.7em;
  opacity: 0.8;
  margin-inline-end: 0.3rem;
  white-space: nowrap;
}

.invoice-money {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

.invoice-money__currency {
  font-size: 0.85em;
  opacity: 0.85;
}

.invoice-money__sign {
  margin-inline-end: 0.2rem;
}

.invoice-totals-row--grand {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.9);
  font-weight: 700;
  color: #047857;
}

.invoice-notes-block {
  border-radius: 0.6rem;
  border: 1px dashed rgba(148, 163, 184, 0.9);
  padding: 0.4rem 0.5rem;
  background: #f9fafb;
  font-size: 0.75rem;
  color: #374151;
}

.invoice-notes-block__text {
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.invoice-notes-bank {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.invoice-notes-bank__line {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
}

.invoice-notes-bank__label {
  min-width: 70px;
  font-weight: 500;
  color: #4b5563;
  flex: 0 0 70px;
}

.invoice-notes-bank__value {
  color: #111827;
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  .invoice-totals-block {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   مهر و امضا
   ============================== */

.invoice-page__footer {
  margin-top: 0.4rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(148, 163, 184, 0.6);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.invoice-signatures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.invoice-signature-block {
  flex: 1 1 120px;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  min-height: 72px;
  padding: 0.35rem 0.45rem 0.5rem;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.invoice-signature-label {
  font-size: 0.7rem;
  color: #6b7280;
}

.invoice-signature-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #4b5563;
  min-height: 64px;
  max-height: 96px;
  overflow: hidden;
}

.invoice-signature-image {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}

.invoice-signature-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: #111827;
  text-align: center;
}

.invoice-signature-placeholder--filled {
  align-items: center;
  justify-content: center;
}

.invoice-signature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
}

.invoice-signature-content--stacked .invoice-signature-image {
  max-height: 48px;
}

/* ==============================
   فوتر
   ============================== */

.invoice-footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.7rem;
  color: #6b7280;
  margin-top: 0.35rem;
}

.invoice-footer-left {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.invoice-footer-left--hidden {
  display: none;
}

.invoice-footer-right {
  font-weight: 500;
}

.invoice-page-number {
  font-size: 0.72rem;
  color: #4b5563;
}

/* چند صفحه‌ای */

.invoice-preview--multipage .invoice-page {
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.6);
}

.invoice-page--page2 {
  margin-top: 0.6rem;
}

.invoice-page--continued-label {
  font-size: 0.7rem;
  color: #6b7280;
  text-align: left;
}

/* حالت‌های scale - فقط برای پیش‌نمایش روی صفحه، نه برای PDF */

/* حالت‌های scale - فقط برای پیش‌نمایش روی صفحه، نه برای PDF */
.preview-scale--mobile .invoice-page {
  transform: none;
}

.preview-scale--tablet .invoice-page {
  transform: none;
}

.preview-scale--desktop .invoice-page {
  transform: none;
}

@media (max-width: 480px) {
  .preview-scale--mobile .invoice-page {
    transform: none;
  }
}

.preview-scale--mobile,
.preview-scale--tablet,
.preview-scale--desktop {
  display: block;
}

/* برای PDF، transform scale را حذف می‌کنیم و layout را اجباری می‌کنیم */
@media print {
  .preview-scale--mobile .invoice-page,
  .preview-scale--tablet .invoice-page,
  .preview-scale--desktop .invoice-page {
    transform: none !important;
    transform-origin: unset !important;
  }

  .invoice-preview {
    --preview-offset-x: 0px !important;
    --preview-offset-y: 0px !important;
  }

  .invoice-preview__content {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .invoice-preview {
    width: auto !important;
    height: auto !important;
  }

  .invoice-header-main {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .invoice-parties {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* کلاس اضافی برای PDF که از JavaScript اضافه می‌شود */
.invoice-preview--pdf-mode .invoice-page {
  transform: none !important;
  transform-origin: unset !important;
  width: 210mm !important; /* عرض A4 در حالت portrait */
  max-width: 210mm !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.invoice-preview--pdf-mode {
  width: auto !important;
  height: auto !important;
  --preview-zoom: 1 !important;
  --preview-offset-x: 0px !important;
  --preview-offset-y: 0px !important;
}

.invoice-preview--pdf-mode .invoice-preview__content {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.invoice-preview--pdf-mode.invoice-preview--a5 .invoice-page {
  width: 148mm !important; /* عرض A5 در حالت portrait */
  max-width: 148mm !important;
}

.invoice-preview--pdf-mode.invoice-preview--landscape .invoice-page {
  width: 297mm !important; /* عرض A4 در حالت landscape */
  max-width: 297mm !important;
}

.invoice-preview--pdf-mode.invoice-preview--a5.invoice-preview--landscape .invoice-page {
  width: 210mm !important; /* عرض A5 در حالت landscape */
  max-width: 210mm !important;
}

.invoice-preview--pdf-mode .invoice-header-main {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.invoice-preview--pdf-mode .invoice-parties {
  grid-template-columns: 1fr 1fr !important;
}

.invoice-preview--pdf-mode .invoice-totals-block {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important;
}

body.pdf-exporting .invoice-logo--placeholder {
  display: none !important;
}

/* image export mode: trim page height to content */
.invoice-preview--image-mode .invoice-page {
  min-height: 0 !important;
  height: auto !important;
}

.invoice-preview--pdf-mode.invoice-preview--theme-technology .invoice-title,
.invoice-preview--image-mode.invoice-preview--theme-technology .invoice-title {
  letter-spacing: 0;
  word-spacing: normal;
}

.invoice-preview--pdf-mode.invoice-preview--theme-technology .invoice-page,
.invoice-preview--image-mode.invoice-preview--theme-technology .invoice-page {
  box-shadow: none !important;
  background: #0b1120;
}

.invoice-preview--pdf-mode.invoice-preview--theme-technology .invoice-page__inner,
.invoice-preview--image-mode.invoice-preview--theme-technology .invoice-page__inner {
  background: linear-gradient(
      145deg,
      rgba(15, 23, 42, 0.95),
      rgba(30, 41, 59, 0.92)
    );
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* placeholder */

.invoice-preview--empty .invoice-page {
  display: none;
}

.invoice-preview__placeholder {
  display: block;
}

.invoice-preview--has-content .invoice-preview__placeholder {
  display: none;
}
/* ============================================================
 * تم‌های فاکتور (پوسته‌های قابل انتخاب توسط کاربر)
 * کلاس‌های مربوطه از طریق JS به ریشه‌ی پیش‌نمایش و صفحات اضافه می‌شوند:
 *  - invoice-preview--theme-default
 *  - invoice-preview--theme-modern
 *  - invoice-preview--theme-minimal
 *  - invoice-preview--theme-bordered
 *  - invoice-preview--theme-compact

 *  - invoice-preview--theme-technology
 *  - invoice-preview--theme-artistic
 *  - invoice-preview--theme-influencer
 *  - invoice-preview--theme-freelancer
 *
 * و برای هر صفحه:
 *  - invoice-page--theme-...
 * ============================================================ */

/* --- تم پیش‌فرض (کلاسیک) ---
   نکته: برای تم default عمداً استایل خاصی نمی‌گذاریم تا همان استایل فعلی پروژه
   بدون تغییر باقی بماند. اگر خواستی بعداً برای default هم چیزی اضافه کنی، این‌جا بنویس.
*/
.invoice-preview--theme-default .invoice-page {
  /* عمداً خالی گذاشته شده تا استایل فعلی پروژه حفظ شود */
}

/* ============================================================
 * تم ۱: مدرن (modern)
 * - هدر با نوار رنگی
 * - کارت سفید با سایه ملایم
 * - تأکید روی عنوان و جمع کل
 * ============================================================ */

.invoice-preview--theme-modern .invoice-page {
  background-color: #f3f4f6;
}

.invoice-preview--theme-modern .invoice-page__inner {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  padding: 18mm 16mm;
}

.invoice-preview--theme-modern .invoice-page__header {
  border-bottom: 0;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.invoice-preview--theme-modern .invoice-header-main {
  border-bottom: 3px solid #2563eb;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.invoice-preview--theme-modern .invoice-title {
  color: #111827;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.invoice-preview--theme-modern .invoice-subtitle {
  color: #6b7280;
}

.invoice-preview--theme-modern .invoice-meta-label {
  color: #6b7280;
}

.invoice-preview--theme-modern .invoice-meta-value,
.invoice-preview--theme-modern .invoice-date {
  color: #111827;
}

/* جدول اقلام در تم مدرن */
.invoice-preview--theme-modern .invoice-items-table-wrapper {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.invoice-preview--theme-modern .invoice-items-table thead {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  color: #ffffff;
}

.invoice-preview--theme-modern .invoice-items-table th {
  border-bottom: none;
  font-weight: 600;
}

.invoice-preview--theme-modern .invoice-items-table tbody tr:nth-child(odd) {
  background-color: #f9fafb;
}

.invoice-preview--theme-modern .invoice-items-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* بخش جمع‌ها در تم مدرن */
.invoice-preview--theme-modern {
  --invoice-discount-color: #16a34a;
  --invoice-tax-color: #1e293b;
}

.invoice-preview--theme-modern .invoice-totals-block {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.invoice-preview--theme-modern .invoice-totals-row--grand {
  border-top: 2px solid #1d4ed8;
}

.invoice-preview--theme-modern .invoice-totals-label {
  color: #374151;
}

.invoice-preview--theme-modern .invoice-totals-row--grand .invoice-totals-value {
  color: #1d4ed8;
  font-weight: 700;
  font-size: 1.1rem;
}

/* امضاها در تم مدرن */
.invoice-preview--theme-modern .invoice-signature-block {
  border-radius: 8px;
  border: 1px dashed #cbd5f5;
  background-color: #f3f4ff;
}

/* ============================================================
 * تم ۲: مینیمال (minimal)
 * - بدون باکس و سایه
 * - خطوط بسیار ظریف
 * - تمرکز روی فضای سفید و سادگی
 * ============================================================ */

.invoice-preview--theme-minimal .invoice-page {
  background-color: #ffffff;
}

.invoice-preview--theme-minimal .invoice-page__inner {
  background-color: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 12mm 10mm;
}

.invoice-preview--theme-minimal .invoice-page__header {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.invoice-preview--theme-minimal .invoice-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
}

.invoice-preview--theme-minimal .invoice-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
}

.invoice-preview--theme-minimal .invoice-meta-row {
  margin-bottom: 0;
}

.invoice-preview--theme-minimal .invoice-meta-label {
  color: #9ca3af;
  font-weight: 400;
}

.invoice-preview--theme-minimal .invoice-meta-value {
  color: #111827;
}

/* جدول در تم مینیمال: خطوط خیلی ظریف */
.invoice-preview--theme-minimal .invoice-items-table-wrapper {
  border: none;
}

.invoice-preview--theme-minimal .invoice-items-table {
  border-collapse: collapse;
}

.invoice-preview--theme-minimal .invoice-items-table th,
.invoice-preview--theme-minimal .invoice-items-table td {
  border-bottom: 1px solid #e5e7eb;
}

.invoice-preview--theme-minimal .invoice-items-table thead {
  background-color: #f9fafb;
}

.invoice-preview--theme-minimal .invoice-items-table tbody tr:nth-child(odd),
.invoice-preview--theme-minimal .invoice-items-table tbody tr:nth-child(even) {
  background-color: transparent;
}

/* جمع‌ها در تم مینیمال: فقط چینش، بدون باکس */
.invoice-preview--theme-minimal {
  --invoice-discount-color: #15803d;
  --invoice-tax-color: #475569;
}

.invoice-preview--theme-minimal .invoice-totals-block {
  border: none;
  background: transparent;
  padding: 0;
}

.invoice-preview--theme-minimal .invoice-totals-row {
  border-bottom: none;
}

.invoice-preview--theme-minimal .invoice-totals-row--grand .invoice-totals-value {
  font-weight: 700;
}

/* ============================================================
 * تم ۳: کادر دار (bordered)
 * - فاکتور کلاسیک با قاب مشخص
 * - خطوط قوی دور صفحه و جدول
 * ============================================================ */

.invoice-preview--theme-bordered .invoice-page {
  background-color: #f9fafb;
}

.invoice-preview--theme-bordered .invoice-page__inner {
  background-color: #ffffff;
  border-radius: 0;
  border: 2px solid #111827;
  box-shadow: none;
  padding: 16mm 14mm;
  position: relative;
}

.invoice-preview--theme-bordered .invoice-page__inner::before {
  content: "";
  position: absolute;
  inset: 2mm;
  border: 1px solid #9ca3af;
  pointer-events: none;
  z-index: 0;
}

.invoice-preview--theme-bordered .invoice-page__inner > * {
  position: relative;
  z-index: 1;
}

.invoice-preview--theme-bordered .invoice-bismillah {
  font-weight: 600;
  letter-spacing: 0.08em;
}

.invoice-preview--pdf-mode.invoice-preview--theme-bordered .invoice-bismillah,
.invoice-preview--image-mode.invoice-preview--theme-bordered .invoice-bismillah {
  letter-spacing: 0;
  word-spacing: normal;
}

.invoice-preview--theme-bordered .invoice-page__header {
  border-bottom: 2px solid #111827;
  margin-bottom: 10px;
  padding-bottom: 6px;
}

.invoice-preview--theme-bordered .invoice-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none;
}

/* جدول در تم کادر دار */
.invoice-preview--theme-bordered .invoice-items-table-wrapper {
  border: 1px solid #111827;
}

.invoice-preview--theme-bordered .invoice-items-table {
  border-collapse: collapse;
}

.invoice-preview--theme-bordered .invoice-items-table th,
.invoice-preview--theme-bordered .invoice-items-table td {
  border-left: 1px solid #9ca3af;
  border-bottom: 1px solid #9ca3af;
}

.invoice-preview--theme-bordered .invoice-items-table th:last-child,
.invoice-preview--theme-bordered .invoice-items-table td:last-child {
  border-left: none;
}

.invoice-preview--theme-bordered .invoice-items-table thead {
  background-color: #111827;
  color: #ffffff;
}

.invoice-preview--theme-bordered .invoice-items-table tbody tr:nth-child(odd),
.invoice-preview--theme-bordered .invoice-items-table tbody tr:nth-child(even) {
  background-color: transparent;
}

/* جمع‌ها در تم کادر دار */
.invoice-preview--theme-bordered {
  --invoice-discount-color: #15803d;
  --invoice-tax-color: #111827;
}

.invoice-preview--theme-bordered .invoice-totals-block {
  border-top: 2px solid #111827;
  margin-top: 8px;
  padding-top: 6px;
}

/* امضاها در تم کادر دار */
.invoice-preview--theme-bordered .invoice-signature-block {
  border: 1px solid #111827;
  background-color: transparent;
}

/* ============================================================
 * تم ۴: جمع‌وجور (compact)
 * - فاصله‌ها و padding کمتر
 * - فونت کمی کوچک‌تر
 * - مناسب فاکتورهای شلوغ
 * ============================================================ */

.invoice-preview--theme-compact .invoice-page {
  background-color: #ffffff;
}

.invoice-preview--theme-compact .invoice-page__inner {
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  padding: 8mm 7mm;
}

.invoice-preview--theme-compact .invoice-page,
.invoice-preview--theme-compact .invoice-page * {
  font-size: 0.92em;
}

.invoice-preview--theme-compact .invoice-page__header {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
}

.invoice-preview--theme-compact .invoice-meta-row {
  margin-bottom: 2px;
}

.invoice-preview--theme-compact .invoice-parties {
  margin-top: 4px;
  margin-bottom: 4px;
}

.invoice-preview--theme-compact .invoice-parties .invoice-party__row {
  margin-bottom: 2px;
}

/* جدول در تم جمع‌وجور */
.invoice-preview--theme-compact .invoice-items-table th,
.invoice-preview--theme-compact .invoice-items-table td {
  padding-top: 2px;
  padding-bottom: 2px;
}

.invoice-preview--theme-compact .invoice-items-table thead {
  background-color: #f3f4f6;
}

/* جمع‌ها در تم جمع‌وجور */
.invoice-preview--theme-compact {
  --invoice-discount-color: #16a34a;
  --invoice-tax-color: #4b5563;
}

.invoice-preview--theme-compact .invoice-totals-block {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

/* امضاها در تم جمع‌وجور */
.invoice-preview--theme-compact .invoice-signature-block {
  margin-top: 4px;
}

/* ============================================================
 * تم ۵: تکنولوژی (technology)
 * - پس‌زمینه تیره با گرادینت و حس شیشه‌ای
 * - مناسب فاکتور خدمات فناوری
 * ============================================================ */

.invoice-preview--theme-technology .invoice-page {
  background: radial-gradient(
      circle at top,
      rgba(56, 189, 248, 0.15),
      rgba(2, 6, 23, 0.85) 55%
    ),
    linear-gradient(135deg, #0b1120, #020617 60%);
  color: #e2e8f0;
  border: 1px solid rgba(30, 41, 59, 0.6);
  box-shadow: 0 20px 45px rgba(2, 6, 23, 0.8);
}

.invoice-preview--theme-technology .invoice-page__inner {
  background: linear-gradient(
    145deg,
    rgba(15, 23, 42, 0.92),
    rgba(30, 41, 59, 0.88)
  );
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.invoice-preview--theme-technology .invoice-page__header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.invoice-preview--theme-technology .invoice-title {
  color: #e2e8f0;
  letter-spacing: 0.04em;
}

.invoice-preview--theme-technology .invoice-subtitle {
  color: #94a3b8;
}

.invoice-preview--theme-technology .invoice-meta-item {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

.invoice-preview--theme-technology .invoice-meta-label {
  color: #94a3b8;
}

.invoice-preview--theme-technology .invoice-meta-value {
  color: #e2e8f0;
}

.invoice-preview--theme-technology .invoice-party {
  background: linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.7),
      rgba(30, 41, 59, 0.6)
    );
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.invoice-preview--theme-technology .invoice-party__title,
.invoice-preview--theme-technology .invoice-party__value {
  color: #e2e8f0;
}

.invoice-preview--theme-technology .invoice-party__label {
  color: #94a3b8;
}

.invoice-preview--theme-technology .invoice-items-table-wrapper {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(2, 6, 23, 0.45);
}

.invoice-preview--theme-technology .invoice-items-table thead {
  background: linear-gradient(90deg, #38bdf8, #22c55e);
}

.invoice-preview--theme-technology .invoice-items-table th {
  color: #0b1120;
}

.invoice-preview--theme-technology .invoice-items-table td {
  color: #e2e8f0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.invoice-preview--theme-technology .invoice-totals-list,
.invoice-preview--theme-technology .invoice-notes-block {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.invoice-preview--theme-technology {
  --invoice-discount-color: #22c55e;
  --invoice-tax-color: #b45309;
}

.invoice-preview--theme-technology .invoice-totals-label {
  color: #cbd5f5;
}

.invoice-preview--theme-technology .invoice-totals-value,
.invoice-preview--theme-technology .invoice-notes-block {
  color: #e2e8f0;
}

.invoice-preview--theme-technology .invoice-totals-row--grand {
  border-top: 1px dashed rgba(56, 189, 248, 0.6);
  color: #38bdf8;
}

.invoice-preview--theme-technology .invoice-signature-block {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.invoice-preview--theme-technology .invoice-signature-text {
  color: #e2e8f0;
}

.invoice-preview--theme-technology .invoice-signature-label,
.invoice-preview--theme-technology .invoice-footer-meta,
.invoice-preview--theme-technology .invoice-page-number {
  color: #94a3b8;
}

/* ============================================================
 * تم ۶: هنری (artistic)
 * - رنگ‌بندی گرم و خلاقانه
 * - مناسب خدمات هنری و آثار
 * ============================================================ */

.invoice-preview--theme-artistic .invoice-page {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  box-shadow: 0 20px 40px rgba(124, 45, 18, 0.25);
}

.invoice-preview--theme-artistic .invoice-page__inner {
  background: #fffdf6;
  border-radius: 18px;
  border: 2px dashed rgba(249, 115, 22, 0.6);
  box-shadow: 0 16px 30px rgba(124, 45, 18, 0.08);
}

.invoice-preview--theme-artistic .invoice-page__header {
  border-bottom: 2px solid rgba(249, 115, 22, 0.6);
}

.invoice-preview--theme-artistic .invoice-title {
  color: #9a3412;
  font-size: 1.3rem;
}

.invoice-preview--theme-artistic .invoice-subtitle {
  color: #b45309;
}

.invoice-preview--theme-artistic .invoice-meta-item {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(251, 146, 60, 0.5);
  border-radius: 10px;
  padding: 0.35rem 0.5rem;
}

.invoice-preview--theme-artistic .invoice-party {
  background: linear-gradient(135deg, #fff7ed, #fef9c3);
  border: 1px solid rgba(251, 146, 60, 0.5);
}

.invoice-preview--theme-artistic .invoice-items-table-wrapper {
  border: 1px solid rgba(249, 115, 22, 0.45);
  background: #fff7ed;
}

.invoice-preview--theme-artistic .invoice-items-table thead {
  background: linear-gradient(90deg, #f97316, #f59e0b);
  color: #ffffff;
}

.invoice-preview--theme-artistic .invoice-items-table tbody tr:nth-child(odd) {
  background-color: rgba(254, 215, 170, 0.35);
}

.invoice-preview--theme-artistic .invoice-totals-list {
  border: 1px dashed rgba(249, 115, 22, 0.6);
  background: rgba(255, 255, 255, 0.75);
}

.invoice-preview--theme-artistic {
  --invoice-discount-color: #16a34a;
  --invoice-tax-color: #9a3412;
}

.invoice-preview--theme-artistic .invoice-notes-block {
  border: 1px dashed rgba(249, 115, 22, 0.6);
  background: rgba(255, 255, 255, 0.85);
}

.invoice-preview--theme-artistic .invoice-totals-row--grand {
  border-top: 2px dashed rgba(249, 115, 22, 0.7);
  color: #b45309;
}

.invoice-preview--theme-artistic .invoice-signature-block {
  background: #fff7ed;
  border: 2px dashed rgba(244, 63, 94, 0.45);
}

/* ============================================================
 * تم ۷: اینفلوئنسر (influencer)
 * - لایوت متمایز با حس شبکه‌های اجتماعی
 * ============================================================ */

.invoice-preview--theme-influencer .invoice-page {
  background: linear-gradient(135deg, #fdf2f8, #ecfeff);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
}

.invoice-preview--theme-influencer .invoice-page__inner {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  border: 1px solid rgba(244, 114, 182, 0.4);
  box-shadow: 0 14px 30px rgba(244, 114, 182, 0.15);
}

.invoice-preview--theme-influencer .invoice-header-main {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.invoice-preview--theme-influencer .invoice-title {
  font-size: 1.4rem;
  color: #be185d;
}

.invoice-preview--theme-influencer .invoice-subtitle {
  color: #0f766e;
}

.invoice-preview--theme-influencer .invoice-logo {
  border-radius: 999px;
  border: 2px solid rgba(236, 72, 153, 0.4);
}

.invoice-preview--theme-influencer .invoice-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.invoice-preview--theme-influencer .invoice-meta-item {
  background: #ffffff;
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  min-width: 140px;
  align-items: center;
  text-align: center;
}

.invoice-preview--theme-influencer .invoice-parties {
  grid-template-columns: 1fr;
}

.invoice-preview--theme-influencer .invoice-party {
  background: linear-gradient(135deg, #fff1f2, #ecfeff);
  border: 1px solid rgba(236, 72, 153, 0.25);
}

.invoice-preview--theme-influencer .invoice-items-table thead {
  background: linear-gradient(90deg, #f43f5e, #38bdf8);
  color: #ffffff;
}

.invoice-preview--theme-influencer .invoice-items-table tbody tr:nth-child(odd) {
  background-color: rgba(219, 234, 254, 0.4);
}

.invoice-preview--theme-influencer .invoice-totals-block {
  grid-template-columns: 1fr;
}

.invoice-preview--theme-influencer {
  --invoice-discount-color: #10b981;
  --invoice-tax-color: #475569;
}

.invoice-preview--theme-influencer .invoice-totals-list {
  border: 1px solid rgba(14, 116, 144, 0.25);
  background: rgba(236, 254, 255, 0.7);
}

.invoice-preview--theme-influencer .invoice-signature-block {
  border: 1px solid rgba(236, 72, 153, 0.3);
  background: rgba(255, 241, 242, 0.7);
}

/* ============================================================
 * تم ۸: فریلنسر (freelancer)
 * - مدرن، تمیز و حرفه‌ای
 * ============================================================ */

.invoice-preview--theme-freelancer .invoice-page {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.invoice-preview--theme-freelancer .invoice-page__inner {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  position: relative;
  padding-right: 2rem;
}

.invoice-preview--theme-freelancer .invoice-page__inner::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: -8px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #14b8a6, #0ea5e9);
}

.invoice-preview--theme-freelancer .invoice-page__header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.5);
}

.invoice-preview--theme-freelancer .invoice-title {
  color: #0f172a;
  font-size: 1.25rem;
}

.invoice-preview--theme-freelancer .invoice-meta-item {
  border-right: 3px solid #0ea5e9;
  padding-right: 0.5rem;
}

.invoice-preview--theme-freelancer .invoice-parties {
  grid-template-columns: 1.2fr 0.8fr;
}

.invoice-preview--theme-freelancer .invoice-party {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.invoice-preview--theme-freelancer .invoice-items-table thead {
  background: #0ea5e9;
  color: #ffffff;
}

.invoice-preview--theme-freelancer .invoice-items-table tbody tr:nth-child(odd) {
  background-color: rgba(226, 232, 240, 0.45);
}

.invoice-preview--theme-freelancer {
  --invoice-discount-color: #16a34a;
  --invoice-tax-color: #334155;
}

.invoice-preview--theme-freelancer .invoice-totals-list {
  border: 1px solid rgba(14, 116, 144, 0.25);
  background: rgba(236, 254, 255, 0.6);
}

.invoice-preview--theme-freelancer .invoice-signature-block {
  border: 1px solid rgba(14, 116, 144, 0.35);
  background: #f0fdfa;
}

/* ==============================
   اندازه و جهت کاغذ
   ============================== */

.invoice-preview--a4.invoice-preview--portrait .invoice-page {
  width: 210mm;
  min-height: 297mm;
  max-width: none;
}

.invoice-preview--a4.invoice-preview--landscape .invoice-page {
  width: 297mm;
  min-height: 210mm;
  max-width: none;
}

.invoice-preview--a5.invoice-preview--portrait .invoice-page {
  width: 148mm;
  min-height: 210mm;
  max-width: none;
}

.invoice-preview--a5.invoice-preview--landscape .invoice-page {
  width: 210mm;
  min-height: 148mm;
  max-width: none;
}

.invoice-preview--a5 .invoice-page__inner {
  padding: 0.9rem 0.6rem 0.8rem 1rem;
  gap: 0.6rem;
}

.invoice-preview--landscape .invoice-page__inner {
  padding: 1rem 0.7rem 0.9rem 1.1rem;
  gap: 0.65rem;
}

.invoice-preview--a5 .invoice-title {
  font-size: 0.92rem;
}

.invoice-preview--a5 .invoice-subtitle {
  font-size: 0.68rem;
}

.invoice-preview--a5 .invoice-meta-row {
  font-size: 0.7rem;
  gap: 0.35rem;
}

.invoice-preview--a5 .invoice-logo {
  width: 68px;
  height: 68px;
}

.invoice-preview--a5 .invoice-items-table th,
.invoice-preview--a5 .invoice-items-table td {
  padding: 0.32rem 0.3rem;
  font-size: 0.7rem;
}

.invoice-preview--landscape .invoice-page__header {
  gap: 0.45rem;
  padding-bottom: 0.4rem;
}

.invoice-preview--landscape .invoice-page__body {
  gap: 0.5rem;
}

.invoice-preview--landscape .invoice-items-table th,
.invoice-preview--landscape .invoice-items-table td {
  padding: 0.35rem 0.35rem;
}

.invoice-preview--landscape .invoice-totals-block,
.invoice-preview--landscape .invoice-notes-block {
  padding: 0.55rem 0.6rem;
}

/* ==============================
   Desktop-only preview (disable responsive tweaks)
   ============================== */

.invoice-preview--desktop-fixed .invoice-page__inner {
  padding: 1.2rem 0.8rem 1rem 1.4rem !important;
  gap: 0.8rem !important;
}

.invoice-preview--desktop-fixed .invoice-page__header {
  gap: 0.6rem !important;
  padding-bottom: 0.5rem !important;
}

.invoice-preview--desktop-fixed:not(.invoice-preview--theme-influencer) .invoice-header-main {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.invoice-preview--desktop-fixed .invoice-title {
  font-size: 1rem !important;
}

.invoice-preview--desktop-fixed .invoice-subtitle {
  font-size: 0.75rem !important;
}

.invoice-preview--desktop-fixed .invoice-logo {
  width: 82px !important;
  height: 82px !important;
}

.invoice-preview--desktop-fixed:not(.invoice-preview--theme-influencer) .invoice-meta-row {
  grid-template-columns: 1.3fr 1fr 1fr !important;
  gap: 0.45rem !important;
  font-size: 0.78rem !important;
}

.invoice-preview--desktop-fixed:not(.invoice-preview--theme-influencer) .invoice-parties {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}

.invoice-preview--desktop-fixed .invoice-party {
  padding: 0.4rem 0.6rem !important;
}

.invoice-preview--desktop-fixed .invoice-items-table {
  font-size: 0.75rem !important;
  min-width: 0 !important;
}

.invoice-preview--desktop-fixed .invoice-items-table th,
.invoice-preview--desktop-fixed .invoice-items-table td {
  padding: 0.3rem 0.35rem !important;
}