/* فونت‌های محلی — از CDN گوگل مستقل شدیم تا فیلترینگ یا قطعی اینترنت
   ظاهر پنل را خراب نکند. font-display: swap تا متن بلافاصله دیده شود. */
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   تم مشترک گلارین — تنها منبع حقیقت رنگ‌ها
   همهٔ صفحه‌ها این فایل را می‌خوانند؛ هیچ صفحه‌ای نباید :root جدا داشته
   باشد، وگرنه با هر تغییر برند، صفحه‌ها از هم جدا می‌افتند.

   رنگ‌های متنی طوری انتخاب شده‌اند که روی زمینهٔ روشن دست‌کم نسبت ۴.۵
   داشته باشند (استاندارد خوانایی):
     ink-soft روی سفید = ۵.۹۷   |   gold روی سفید = ۵.۲۱
     teal روی teal-soft = ۵.۹۱  |   primary روی سفید = ۹.۸۱
   ------------------------------------------------------------------ */
:root {
  /* --- رنگ برند ------------------------------------------------------ */
  --primary: #7B2338;
  --primary-soft: #F6E9EB;
  --gold: #8A6636;
  --gold-soft: #F3EBDF;
  --teal: #216656;
  --teal-soft: #E6F2EF;
  --plum: #6B4E8E;
  --plum-soft: #F0EBF5;
  --danger: #B3261E;
  --danger-soft: #FBEAE8;

  /* --- نقش‌های معنایی -------------------------------------------------
     هر رنگ یک شغل دارد و فقط همان. اگر جایی رنگ برند مستقیم استفاده شود،
     یعنی هنوز تصمیم گرفته نشده که آن عنصر چه معنایی دارد. */
  --success: var(--teal);          --success-soft: var(--teal-soft);
  --warning: var(--gold);          --warning-soft: var(--gold-soft);
  --info: var(--plum);             --info-soft: var(--plum-soft);
  /* danger از بالا می‌آید */

  /* --- رنگ متن/حاشیه روی زمینهٔ soft --------------------------------
     تا امروز هر صفحه برای «متن روی نوار سبز/زرد/بنفش» یک قهوه‌ای یا
     سبز تیرهٔ تازه اختراع می‌کرد (دیده شد: حداقل ۳ مقدار طلایی نزدیک
     به هم مثل #8A5A0A/#7A5A2E/#6B4C0A برای همان یک نقش). این‌جا فقط
     یک نسخه از هرکدام رسمی می‌شود — بقیه باید همین‌ها را صدا بزنند. */
  --success-text: #1B5A4C;   --success-border: #B5DCD2;   --success-hover: #D9EDE7;
  --warning-text: #7A5410;   --warning-border: #E8D5AC;
  --danger-border: #F3AEAA;  /* متن از --danger استفاده می‌کند */
  --info-text: #4B3768;      --info-border: #D8CBE6;
  --primary-border: #EBD3D8; /* حاشیه روی زمینهٔ primary-soft — قبلاً دو مقدار نزدیک‌به‌هم بود */

  /* --- رنگ‌های نقش‌محور (نه معنایی) ------------------------------------
     این‌ها برای «این سند از کدام نوع است» به‌کار می‌روند، نه برای وضعیت —
     مثلاً نوار بالای فرم خرید که فقط باید از فروش قابل‌تشخیص باشد. */
  --purchase-accent: #B3720F;

  /* --- سطح‌ها ---------------------------------------------------------
     سه پله، برای تودرتویی: کارت روی صفحه، سرستون روی کارت، هاور روی آن.
     طلایی دیگر سطح خنثی نیست — فقط معنی هشدار می‌دهد. */
  --bg: #FAF7F2;
  --surface-1: #FFFFFF;
  --surface-2: #F6F2EC;
  --surface-3: #EFE9E0;
  --card: var(--surface-1);

  --ink: #2B211D;
  --ink-soft: #6F6155;
  --line: #ECE3D8;

  /* --- مقیاس‌ها -------------------------------------------------------
     قبلاً ۱۱ شعاع و ۷ عرض ظرف داشتیم؛ یعنی هیچ قاعده‌ای نبود و هر
     کامپوننت عدد تازه‌ای اختراع می‌کرد. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  --w-form: 820px;    /* فرم‌های تک‌ستونی */
  --w-wide: 1280px;   /* جدول‌ها و داشبورد */

  --font-num: "JetBrains Mono", monospace;
  /* سایه فقط برای چیزهایی که واقعاً «شناور»اند: پاپ‌آپ، منو، نوار چسبان.
     کارت‌ها با یک خط مرزی مشخص می‌شوند — سبک‌تر و مینیمال‌تر. */
  --shadow-sm: none;
  --shadow-md: 0 10px 26px -14px rgba(123,35,56,0.28);
  --shadow-lg: 0 24px 60px -20px rgba(43,33,29,0.5);
}

/* حالت فوکوس — کاربر کیبورد باید همیشه بداند کجاست.
   از focus-visible استفاده می‌کنیم تا کلیک موس حلقه نگیرد. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* احترام به تنظیم «کاهش حرکت» سیستم‌عامل */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(circle at 15% -10%, rgba(123,35,56,0.07), transparent 40%),
                     radial-gradient(circle at 100% 0%, rgba(42,127,108,0.08), transparent 35%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: var(--sp-4) 20px 56px;
  display: flex;
  justify-content: center;
}

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

/* سربرگ تک‌خطی — لوگو حذف شد چون منوی کناری همان برند را نشان می‌دهد،
   و صرف ۱۲۰ پیکسل ارتفاع در هر صفحه برای تکرار اطلاعات، گران است. */
header {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);

  /* سربرگ همیشه بالای صفحه می‌ماند تا در فهرست‌های بلند، «بازگشت به
     داشبورد» و عنوان صفحه بدون اسکرول به بالا در دسترس باشند.
     padding/margin بالا، فاصلهٔ بدنهٔ صفحه را می‌بلعد تا هنگام چسبیدن،
     محتوا از زیر لبهٔ بالایی رد نشود. */
  position: sticky; top: 0; z-index: 40;
  margin-top: calc(-1 * var(--sp-4)); padding-top: var(--sp-4);
  background: var(--bg);
}
@supports (backdrop-filter: blur(6px)) {
  header { background: color-mix(in srgb, var(--bg) 88%, transparent);
           backdrop-filter: blur(8px); }
}
header h1 { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
header .sub { color: var(--ink-soft); font-size: 12px; }
header .spacer { margin-inline-start: auto; }
header .logo { display: none; }

/* ---- میان‌برهای سربرگ ----------------------------------------------
   تا امروز فقط صفحهٔ اصلی این دکمه‌ها را داشت و استایلشان هم داخل خودِ
   همان صفحه بود؛ برای همین دکمهٔ «ثبت مشتری» در بقیهٔ صفحه‌ها بی‌ظاهر
   می‌ماند. حالا استایل این‌جاست تا همهٔ صفحه‌ها یک شکل باشند.
   ------------------------------------------------------------------ */
.new-invoice-btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  transition: transform 150ms ease;
  white-space: nowrap;
}
.new-invoice-btn:hover { transform: translateY(-1px); }
.new-invoice-btn.ret  { background: var(--teal); }
.new-invoice-btn.fin  { background: var(--plum); }
/* ثبت مشتری کار «ساختن» است نه «فروختن»، پس کم‌رنگ‌تر از سه‌تای دیگر
   می‌ماند تا میان‌بر اصلی صفحه را زیر سایه نبرد. */
.new-invoice-btn.cust {
  background: var(--surface-1); color: var(--primary);
  border: 1px solid var(--primary-soft); box-shadow: none;
}
.new-invoice-btn.cust:hover { background: var(--primary-soft); }

/* روی گوشی، میان‌برها یک ردیف تمام‌عرض می‌شوند تا هم جا بگیرند هم
   لمسشان راحت باشد. */
@media (max-width: 768px) {
  header { row-gap: var(--sp-2); }
  header .spacer { flex-basis: 100%; margin: 0; }
  header .new-invoice-btn {
    flex: 1 1 0; min-width: 0; text-align: center;
    padding: 11px 6px; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis;
  }
}

.card {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.card h2 {
  font-size: 13.5px; font-weight: 700; margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}

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

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

input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 13.5px;
  background: #fff; color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input:disabled { background: var(--surface-2); color: var(--ink-soft); }
textarea { resize: vertical; min-height: 72px; }
input.num { font-family: var(--font-num); }
.hint { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }

.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; }
.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, 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); }

.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 #B5DCD2; color: #1B5A4C; display: block; }
.alert.err { background: var(--danger-soft); border: 1px solid #F3AEAA; color: var(--danger); display: block; }

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

/* ---- کارت گروه با دکمه حذف ---- */
.group-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid #E8D5AC;
  border-radius: var(--r-full); padding: 5px 8px 5px 14px;
  margin: 0 0 8px 8px; font-size: 13px;
}
.group-chip .del {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--danger-soft); color: var(--danger);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: opacity 150ms ease;
}
.group-chip .del:hover { opacity: 0.75; }
.group-chip.locked { opacity: 0.6; }
.group-chip .edit {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface-3, #EFE3C4); color: var(--ink-soft);
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: opacity 150ms ease;
}
.group-chip .edit:hover { opacity: 0.75; }

/* ---- پاپ‌آپ تأیید حذف ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(43,33,29,0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 300; padding: var(--sp-4); backdrop-filter: blur(2px);
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 480px;
  box-shadow: 0 24px 60px -20px rgba(43,33,29,0.5); padding: var(--sp-4);
  max-height: 88vh; overflow-y: auto;   /* محتوای بلند داخل خودِ پاپ‌آپ اسکرول شود */
}
.modal h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.modal p { font-size: 13px; line-height: 2; color: var(--ink-soft); margin: 0 0 8px; }
.modal .warn-box {
  background: var(--gold-soft); border: 1px solid #E8D5AC; color: #7A5410;
  border-radius: var(--r-md); padding: 12px 14px; font-size: 12.5px; line-height: 1.9; margin: 12px 0 4px;
}
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }
.btn-danger { background: var(--danger); color: #fff; }

/* ---- جدول گزارش ---- */
.table-wrap { overflow-x: auto; }
table.report { width: 100%; border-collapse: collapse; font-size: 13px; }
table.report thead th {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap; background: var(--surface-2);
}
table.report tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.report tbody tr:last-child td { border-bottom: none; }
table.report tbody tr:hover { background: var(--primary-soft); }
table.report td.num { font-family: var(--font-num); }
table.report .empty { text-align: center; color: var(--ink-soft); padding: 32px 0; }

.pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; }
.pill.ok     { background: var(--teal-soft); color: var(--teal); }
.pill.warn   { background: var(--gold-soft); color: #8A5A0A; }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.muted  { background: var(--line); color: var(--ink-soft); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.toolbar > div { flex: 1; min-width: 150px; }
.summary-line {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 14px;
  font-size: 12.5px; color: var(--ink-soft);
}
.summary-line b { color: var(--ink); font-family: var(--font-num); }
.link-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--primary); padding: 4px 6px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--danger); }

/* ---- صفحه‌بندی ---- */
.pager {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.pager .spacer { margin-inline-start: auto; }
.pager select { width: auto; padding: 7px 10px; font-size: 12.5px; }
.pager button {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: var(--r-sm); padding: 7px 13px; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: background 150ms ease;
}
.pager button:hover:not(:disabled) { background: var(--primary-soft); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .page-info { font-family: var(--font-num); }

table.report tbody tr.selectable { cursor: pointer; }
table.report tbody tr.selected { background: var(--primary-soft); }

/* وقتی پاپ‌آپ باز است، صفحه پشتی نباید اسکرول شود */
body.modal-open { overflow: hidden; }
.modal-backdrop { overscroll-behavior: contain; }
.modal { overscroll-behavior: contain; }