/* =========================================================================
   سامانهٔ حقوق و دستمزد — شیوه‌نامهٔ اصلی
   ساختار: ۱) پایه  ۲) توکن‌های رنگ  ۳) چیدمان  ۴) اجزا  ۵) نماها  ۶) چاپ
   ========================================================================= */

/* ---------------------------------------------------------------- ۰) فونت */
/* B Titr فایل واقعی‌اش همراه نرم‌افزار می‌آید (assets/fonts/B-Titr.ttf)،
   پس دیگر به نصب‌بودنش روی سیستم کاربر وابسته نیست. فقط برش Bold در
   دسترس بود؛ با بازهٔ وزنِ ۱۰۰ تا ۹۰۰، همان یک فایل برای هر درخواستِ
   وزنی (چه متن معمولی، چه بولد) به کار می‌رود — وگرنه متن معمولی
   (وزن ۴۰۰) از این فونت استفاده نمی‌کرد و به Vazirmatn برمی‌گشت. */
@font-face {
  font-family: "B Titr";
  src: url("../assets/fonts/B-Titr.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* در صورت تمایل فایل Vazirmatn را هم در پوشهٔ assets/fonts قرار دهید؛
   در نبود آن، فونت‌های سیستمی ویندوز به‌خوبی جایگزین می‌شوند. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ----------------------------------------------------------------- ۱) پایه */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  /* B Titr همراه خودِ نرم‌افزار می‌آید (بالا)؛ Vazirmatn و فونت‌های
     سیستمی فقط برای نویسه‌هایی که در برش B Titr نبودند (اگر باشد). */
  font-family: "B Titr", "Vazirmatn", "Segoe UI", Tahoma, "Iranian Sans", "Noto Naskh Arabic", sans-serif;
  font-size: 17.5px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------- ۲) توکن‌های رنگ */
:root {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar-width: 252px;
  --topbar-height: 64px;
  --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* پوستهٔ تیره: مشکی گرم با طلایی — متناسب با فضای کافه‌رستوران لوکس */
[data-theme="dark"] {
  --bg: #0e1114;
  --bg-deep: #090b0d;
  --surface: #161b20;
  --surface-2: #1d242b;
  --surface-3: #252d35;
  --border: #262e36;
  --border-strong: #35404a;
  --text: #e9edf1;
  --text-strong: #ffffff;
  --muted: #93a1ae;
  --faint: #6c7a88;

  --accent: #e0b64a;
  --accent-strong: #f0cb6a;
  --accent-ink: #23180a;
  --accent-soft: rgba(224, 182, 74, .14);

  --teal: #35b3a4;
  --teal-soft: rgba(53, 179, 164, .14);
  --green: #43c17a;
  --green-soft: rgba(67, 193, 122, .14);
  --red: #f2646f;
  --red-soft: rgba(242, 100, 111, .14);
  --blue: #5aa2f5;
  --blue-soft: rgba(90, 162, 245, .14);
  --violet: #a882f0;
  --violet-soft: rgba(168, 130, 240, .14);
  --amber: #e0a23c;
  --amber-soft: rgba(224, 162, 60, .16);
  /* اختصاصیِ رنگ‌بندیِ افزایش/کاهشِ حقوق نسبت به ماه قبل — عمداً
     پررنگ‌تر و از هم متمایزتر از توکن‌های نرمِ بالا (که برای نشان و
     برچسب طراحی شده‌اند، نه زمینهٔ یک سلولِ کاملِ جدول). */
  --cell-increase: rgba(52, 199, 89, .34);
  --cell-decrease: rgba(255, 199, 0, .32);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow: 0 8px 28px rgba(0, 0, 0, .38);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --glow: 0 0 0 1px rgba(224, 182, 74, .2);
}

/* پوستهٔ روشن: کرم گرم — راحت برای کار طولانی با اعداد */
[data-theme="light"] {
  --bg: #f4f2ee;
  --bg-deep: #eae7e0;
  --surface: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #f1ede6;
  --border: #e3ded4;
  --border-strong: #cec7ba;
  --text: #1e2328;
  --text-strong: #0d1114;
  --muted: #6a7480;
  --faint: #98a1ab;

  --accent: #b3872b;
  --accent-strong: #96700f;
  --accent-ink: #ffffff;
  --accent-soft: rgba(179, 135, 43, .12);

  --teal: #1d8478;
  --teal-soft: rgba(29, 132, 120, .12);
  --green: #1f9254;
  --green-soft: rgba(31, 146, 84, .12);
  --red: #cf3b48;
  --red-soft: rgba(207, 59, 72, .12);
  --blue: #2b6fc4;
  --blue-soft: rgba(43, 111, 196, .12);
  --violet: #7048c4;
  --violet-soft: rgba(112, 72, 196, .12);
  --amber: #a56c14;
  --amber-soft: rgba(165, 108, 20, .14);
  /* اختصاصیِ رنگ‌بندیِ افزایش/کاهشِ حقوق نسبت به ماه قبل — عمداً
     پررنگ‌تر و از هم متمایزتر از توکن‌های نرمِ بالا. */
  --cell-increase: rgba(22, 163, 74, .28);
  --cell-decrease: rgba(202, 138, 4, .26);

  --shadow-sm: 0 2px 6px rgba(35, 30, 20, .07);
  --shadow: 0 8px 24px rgba(35, 30, 20, .1);
  --shadow-lg: 0 20px 50px rgba(35, 30, 20, .16);
  --glow: 0 0 0 1px rgba(179, 135, 43, .25);
}

/* ------------------------------------------------------------ صفحهٔ راه‌اندازی */
.app-boot { display: grid; place-items: center; min-height: 100vh; }
.boot-screen { text-align: center; color: var(--muted); }
.boot-mark {
  width: 68px; height: 68px; margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: var(--accent-ink); font-size: 22px; font-weight: 700;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.95); } }

/* -------------------------------------------------------------- ۳) چیدمان */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ---- نوار کناری */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  border-inline-start: 1px solid var(--border);
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-height);
}
.brand-mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: var(--accent-ink);
  font-weight: 700; font-size: 16.5px;
}
/* لوگوی واقعیِ مجموعه به‌جای حروفِ «ج‌پ» — همان جعبهٔ رنگی، فقط عکس
   به‌جای متن، با کمی فاصلهٔ داخلی تا لبه‌های آیکن به رنگ زمینه نچسبد */
.brand-mark-logo { padding: 7px; object-fit: contain; }
.brand-text { min-width: 0; }
.brand-title { font-size: 15.5px; font-weight: 700; color: var(--text-strong); }
.brand-sub { font-size: 14px; color: var(--faint); }

.nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.nav-group-title {
  padding: 14px 10px 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--faint);
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 3px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  text-align: start;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 9px;
}
.nav-item .icon { flex: none; width: 18px; height: 18px; opacity: .9; }
.nav-badge {
  margin-inline-start: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition);
}
.user-chip:hover { border-color: var(--border-strong); }
.user-chip-name { font-size: 14.5px; font-weight: 700; }
.user-chip-role { font-size: 14px; color: var(--faint); }

/* ---- محتوای اصلی */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topbar-height);
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.page-heading { min-width: 0; }
.page-title { font-size: 18.5px; color: var(--text-strong); }
.page-subtitle { font-size: 14.5px; color: var(--faint); }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.content { flex: 1; padding: 22px 24px 48px; }
.content-narrow { max-width: 940px; margin-inline: auto; }

/* جست‌وجوی سراسری */
.global-search { position: relative; flex: 1; max-width: 420px; }
.global-search input {
  width: 100%;
  padding: 9px 38px 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14.5px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.global-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.global-search .search-icon {
  position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none;
}
.global-search kbd {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 5px;
  background: var(--surface-2); color: var(--faint); font-size: 12.5px; font-family: inherit;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  width: min(480px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.search-result {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); text-align: start;
}
.search-result:hover, .search-result.is-active { background: var(--surface-2); }
.search-result-meta { font-size: 14.5px; color: var(--faint); }
.search-empty { padding: 22px; text-align: center; color: var(--faint); font-size: 14.5px; }

/* -------------------------------------------------------------- ۴) اجزا */

/* ---- دکمه‌ها */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { filter: brightness(1.07); background: linear-gradient(135deg, var(--accent-strong), var(--accent)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: var(--red-soft); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 22%, transparent); }
.btn-success { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: var(--green-soft); }
.btn-success:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
.btn-sm { padding: 5px 10px; font-size: 14px; border-radius: 7px; }
.btn-lg { padding: 12px 22px; font-size: 16px; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
/* شمارندهٔ کوچک کنار متن دکمه — مثلاً تعداد فیش انتخاب‌شده برای خروجی */
.btn-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.btn-block { width: 100%; }

/* ---- کارت‌ها */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 16.5px; color: var(--text-strong); }
.card-subtitle { font-size: 14.5px; color: var(--faint); font-weight: 400; }
.card-header-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 20px; }
.card-body-flush { padding: 0; }

/* ---- شبکه‌ها */
.grid { display: grid; gap: 16px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-end { margin-inline-start: auto; }
.spacer { flex: 1; }

/* ---- کارت شاخص */
.kpi {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi::after {
  content: "";
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -50px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: var(--kpi-tint, var(--accent-soft));
  filter: blur(6px);
}
.kpi > * { position: relative; z-index: 1; }
.kpi-label { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.kpi-value { font-size: 25px; font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; }
.kpi-unit { font-size: 14px; font-weight: 400; color: var(--faint); margin-inline-start: 6px; }
.kpi-foot { margin-top: 9px; font-size: 13.5px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.kpi-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--kpi-tint, var(--accent-soft));
  color: var(--kpi-color, var(--accent));
  margin-bottom: 12px;
}
.kpi.accent { --kpi-tint: var(--accent-soft); --kpi-color: var(--accent); }
.kpi.green  { --kpi-tint: var(--green-soft);  --kpi-color: var(--green); }
.kpi.red    { --kpi-tint: var(--red-soft);    --kpi-color: var(--red); }
.kpi.blue   { --kpi-tint: var(--blue-soft);   --kpi-color: var(--blue); }
.kpi.teal   { --kpi-tint: var(--teal-soft);   --kpi-color: var(--teal); }
.kpi.violet { --kpi-tint: var(--violet-soft); --kpi-color: var(--violet); }

/* ---- فرم‌ها */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}

/*
 * تراز فیلدها در یک سطر.
 *
 * `justify-content: flex-end` کادرِ ورودی را به کف خانهٔ جدول می‌چسباند،
 * پس عنوان‌ها هرچقدر هم بلند یا کوتاه باشند — یا اصلاً نباشند، مثل
 * چک‌باکس که عنوانش را خودش درون خودش دارد — همهٔ کادرها روی یک خط
 * می‌نشینند.
 *
 * این تنها راهی است که تراز را از طول متن‌ها مستقل می‌کند؛ وگرنه هر
 * فیلدی با عنوان دوخطی، بقیهٔ سطر را بالا و پایین می‌کند. بخش «بدهی و
 * مصرف داخلی» که عنوان‌های بلندی دارد، دقیقاً از همین می‌شکست.
 */
.field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: 14.5px; color: var(--muted); font-weight: 600; }
.field-label .req { color: var(--red); margin-inline-start: 3px; }
/*
 * راهنمای ثابتِ صفحه‌ها (تنظیمات، کاربران، ورود اطلاعات). راهنمای
 * پویای `field_defs` دیگر زیر کادر چاپ نمی‌شود و روی `title` نشسته است.
 */
.field-hint { font-size: 14px; color: var(--faint); }
.field-error { font-size: 14.5px; color: var(--red); }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow);
  background: var(--surface);
}
.input:disabled, .input[readonly], .textarea[readonly] {
  background: var(--surface-3);
  color: var(--muted);
  cursor: not-allowed;
}
.input.has-error { border-color: var(--red); }
.textarea { min-height: 84px; resize: vertical; line-height: 1.7; }
.select {
  appearance: none;
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e99a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 11px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}

/* در نوارهای افقی، کنترل‌ها نباید تمام عرض را بگیرند */
.row > .select, .row > .input, .period-picker > .select {
  width: auto;
  min-width: 148px;
  flex: 0 0 auto;
}
.period-picker > .select { min-width: 108px; }
.input-number { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.input-computed { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-suffix {
  display: grid; place-items: center;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-inline-start: 0;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--faint);
  font-size: 13.5px;
  white-space: nowrap;
}

.checkbox, .switch-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.checkbox input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background var(--transition);
}
/* حالت خاموش: دستهٔ کلید در ابتدای ریل (سمت راست در چیدمان راست‌به‌چپ) */
.switch-track::before {
  content: ""; position: absolute;
  width: 16px; height: 16px; top: 3px; inset-inline-start: 3px;
  border-radius: 50%; background: #fff;
  transition: transform var(--transition);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(-18px); }

/* ---- جدول‌ها */
.table-wrap { width: 100%; overflow-x: auto; }

/* لیست حقوق: به‌جای چسباندنِ سربرگ به بالای کل صفحه (که وابسته به
   ارتفاعِ دقیقِ نوار بالا بود و باعثِ همان باگِ «ردیف پنهان‌شده» در
   زیرِ سربرگ می‌شد)، خودِ جدول یک جعبهٔ اسکرولِ مستقل می‌شود؛ سربرگ در
   بالای همین جعبه می‌چسبد (`top: 0`، نسبت به همین جعبه، نه کل صفحه) —
   دیگر به هیچ ارتفاعِ بیرونی وابسته نیست، پس این دسته از باگ‌ها اصلاً
   رخ نمی‌دهند. */
.table-wrap-scroll {
  max-height: calc(100vh - var(--topbar-height) - 260px);
  overflow-y: auto;
}

/* «separate» به‌جای «collapse»: با سربرگِ چسبان (sticky) ترکیب می‌شود؛
   حالتِ collapse در برخی مرورگرها (مخصوصاً کرومیومی‌ها) باعث می‌شود
   ردیفِ زیرِ سربرگِ چسبان، هنگام اسکرول، لحظه‌ای زیرِ خودِ سربرگ برود
   و انگار آن ردیف اصلاً وجود ندارد — چیزی که حسِ «حذف‌شدن» می‌دهد. */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 18px; }

.table th, .table td {
  padding: 14px 16px;
  text-align: start;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { font-weight: 500; color: var(--text-strong); }
.table thead th {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* سربرگِ چسبان پیش‌فرضِ همهٔ جدول‌ها نیست — فقط داخلِ جعبهٔ اسکرولِ
   مستقلِ خودش (`.table-wrap-scroll`) فعال می‌شود. تجربهٔ واقعی نشان
   داد که «چسباندن به بالای کل صفحه با فاصلهٔ ثابت» در جاهای دیگر
   (مثلاً جدولِ کوچکِ دفترچهٔ پرداخت داخلِ یک پنجره) اصلاً بی‌معنا و
   حتی خرابکار است — آن‌جا هیچ نوار بالای صفحه‌ای در کار نیست که
   فاصله از رویش حساب شود، و سربرگ روی همان ردیف اول می‌نشست. */
.table-wrap-scroll .table thead th { position: sticky; top: 0; z-index: 2; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-2); }
/* سرتیترِ گروهِ چارت سازمانی — مثلاً «آشپزخانه ایرانی»، درست جلوی
   نخستین نفرِ آن واحد، وقتی مرتب‌سازی روی «چارت سازمانی» است. */
.org-group-row td {
  background: var(--surface-3);
  color: var(--text-strong);
  font-weight: 700;
  font-size: 14.5px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.org-group-row:hover td { background: var(--surface-3); }
.org-group-row .icon { vertical-align: middle; margin-inline-end: 6px; }
/* لیست حقوق: ردیف کسی که تاریخ ترک کارش در همین ماه است — کل زمینهٔ
   ردیف قرمزرنگ می‌شود تا در نگاه اول از بقیه جدا شود، نه فقط نامش. */
.table tbody tr.is-terminated-row { background: var(--red-soft); }
.table tbody tr.is-terminated-row:hover {
  background: color-mix(in srgb, var(--red-soft) 70%, var(--surface-2));
}
.is-terminated-name { color: var(--red); font-weight: 700; }
/* لیست حقوق: مقایسهٔ حقوق ناخالص/خالص پرداختی با ماه قبل — فقط
   زمینهٔ همان یک ستون رنگ می‌گیرد (نه کل ردیف)، تا افزایش/کاهش هر
   نفر در همان لحظه بدون بازکردن Tooltip هم دیده شود. */
.table tbody tr td.cell-increased { background: var(--cell-increase); }
.table tbody tr td.cell-decreased { background: var(--cell-decrease); }
.table tbody tr:hover td.cell-increased { background: color-mix(in srgb, var(--cell-increase) 85%, var(--surface-2)); }
.table tbody tr:hover td.cell-decreased { background: color-mix(in srgb, var(--cell-decrease) 85%, var(--surface-2)); }
/* لیست حقوق: پست سازمانی درشت‌تر — مسیر کامل سازمانی دیگر همیشه‌نمایان
   نیست، فقط با نگه‌داشتنِ موس روی نام در پیش‌نمایشِ بزرگ می‌آید. */
.person-position { font-size: 15.5px; font-weight: 600; color: var(--text); margin-top: 1px; }
/* نامِ قابل‌کلیک در جدولِ لیست حقوق — با کلیک، فیشِ همان فرد باز می‌شود */
.person-name-link { cursor: pointer; }
.person-name-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ستون «وضعیت» عمداً باریک‌تر از بقیه — این یکی مبلغ نیست، فقط یک برچسبِ کوتاه */
.col-status { width: 92px; }
.table tbody tr.is-clickable { cursor: pointer; }
.table tfoot td { background: var(--surface-3); font-weight: 700; color: var(--text-strong); }
.table .num { font-variant-numeric: tabular-nums; text-align: start; }
/* لیست حقوق: عددها با وزن تیتر، تا در نگاه اول دیده شوند — رنگ‌های
   معنادار (سبز/قرمز/خاکستری) دست‌نخورده می‌مانند، فقط وزن اضافه می‌شود */
.table-editable .num { font-weight: 700; }
.table .col-shrink { width: 1%; }
.table-compact th, .table-compact td { padding: 9px 11px; }
.table-editable th, .table-editable td { padding: 8px 9px; }
.table-editable .input { padding: 8px 9px; font-size: 16.5px; font-weight: 700; }
.table-editable .input-number { width: 76px; }
/* واحد اندازه‌گیری زیر عنوان ستون تا جدول باریک‌تر شود */
.table th .unit { display: block; font-weight: 400; font-size: 14.5px; opacity: .8; }

/* ---- برچسب‌ها و نشان‌ها */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-draft { background: var(--surface-3); color: var(--muted); }
.badge-approved { background: var(--blue-soft); color: var(--blue); }
.badge-bank_sent { background: var(--violet-soft); color: var(--violet); }
.badge-paid { background: var(--green-soft); color: var(--green); }
.badge-paid_with_balance { background: var(--amber-soft); color: var(--amber); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-muted { background: var(--surface-3); color: var(--muted); }
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  transition: background var(--transition), opacity var(--transition);
}
/* لیست حقوق: ستون «وضعیت» عمداً کوچک‌تر از بقیهٔ برچسب‌های وضعیت در برنامه */
.col-status .badge { padding: 2px 7px; font-size: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
}
.chip.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-strong); font-weight: 700; }

/* ---- پالایهٔ درختی فهرست همکاران: شعبه / وضعیت / بیمه */
.filter-tree {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 14px;
}
.filter-branch {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* خط راهنمای سمت آغازِ هر شاخه — در RTL سمت راست می‌نشیند */
  padding-inline-start: 11px;
  border-inline-start: 2px solid var(--border);
}
.filter-branch-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: .2px;
}
.filter-branch-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- آواتار */
.avatar {
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 700;
  overflow: hidden;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 42px; height: 42px; font-size: 14px; }
.avatar-lg { width: 76px; height: 76px; font-size: 24px; }
.avatar-xl { width: 180px; height: 180px; font-size: 52px; border-radius: var(--radius-lg); }

/* ---- زبانه‌ها */
.tabs {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tab {
  padding: 9px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }

/* ---- پیام‌ها */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14.5px;
}
.alert-info { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 26%, transparent); color: var(--blue); }
.alert-warn { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-strong); }
.alert-error { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.alert-success { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }

.empty-state { padding: 52px 22px; text-align: center; color: var(--faint); }
.empty-state-icon { font-size: 40px; opacity: .35; margin-bottom: 10px; }
.empty-state-title { font-size: 16px; color: var(--muted); font-weight: 700; margin-bottom: 5px; }

/* ---- اعلان شناور */
.toast-host {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; max-width: 400px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 14.5px;
  animation: toast-in 220ms cubic-bezier(.2, .9, .3, 1.2);
}
.toast.success { border-inline-start: 3px solid var(--green); }
.toast.error { border-inline-start: 3px solid var(--red); }
.toast.info { border-inline-start: 3px solid var(--blue); }
.toast.leaving { animation: toast-out 180ms ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---- پنجرهٔ گفت‌وگو */
.modal-host {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(3px);
  animation: fade-in 140ms ease;
  overflow-y: auto;
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  width: min(680px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modal-in 200ms cubic-bezier(.2, .9, .3, 1.05);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modal-wide { width: min(1020px, 100%); }
.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16.5px; color: var(--text-strong); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-footer {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

/* ---- Tooltip واقعی (ریز اقلام هنگام نگه‌داشتن ماوس) */
.has-tip {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.hover-tip {
  position: fixed;
  z-index: 210;
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 14.5px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.hover-tip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hover-tip-title {
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.hover-tip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
}
.hover-tip-label { color: var(--muted); }
.hover-tip-amount { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.hover-tip-row.hover-tip-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-strong);
  font-weight: 700;
}
.hover-tip-row.hover-tip-total .hover-tip-label,
.hover-tip-row.hover-tip-total .hover-tip-amount { color: var(--text-strong); }
.hover-tip-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 13px;
  line-height: 1.6;
}
.hover-tip-empty { color: var(--faint); padding: 3px 0; }

/* ---- پیش‌نمایش بزرگ‌تر همکار (روی هاور نام در جدول) */
.hover-tip-person-panel { min-width: 0; max-width: 460px; padding: 20px; }
.hover-person { display: flex; align-items: center; gap: 20px; }
.hover-person-avatar { width: 320px; height: 320px; font-size: 100px; }
.hover-person-info { min-width: 0; }
.hover-person-name { font-size: 26px; font-weight: 700; color: var(--text-strong); }
.hover-person-position { margin-top: 6px; font-size: 18px; color: var(--muted); }
.hover-person-meta { margin-top: 4px; font-size: 16px; color: var(--faint); }
.hover-tip-diff {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.hover-tip-diff-label { color: var(--muted); }
.hover-tip-diff-amount {
  font-size: 17.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
}
.hover-tip-reason {
  color: var(--faint);
  font-size: 13px;
  line-height: 1.7;
  padding-inline-start: 2px;
}

/* ---- نمودار میله‌ای (بدون کتابخانه) */
/* ستون‌ها باید تمام ارتفاع نمودار را بگیرند تا ارتفاع درصدی میله معنا پیدا کند */
.chart {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 190px;
  padding-top: 12px;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
/* مسیر میله موقعیت نسبی دارد تا ارتفاع درصدی میله همیشه درست محاسبه شود */
.chart-bar-track { position: relative; flex: 1; width: 100%; min-height: 0; }
.chart-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  min-height: 3px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--accent-strong), color-mix(in srgb, var(--accent) 45%, transparent));
  transition: height 500ms cubic-bezier(.3, 1, .4, 1), filter var(--transition);
  cursor: default;
}
.chart-col:hover .chart-bar { filter: brightness(1.2); }
.chart-col.is-current .chart-bar { background: linear-gradient(180deg, var(--teal), color-mix(in srgb, var(--teal) 40%, transparent)); }
.chart-label { font-size: 13.5px; color: var(--faint); white-space: nowrap; }

/* ---- نوار پیشرفت */
.meter { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 400ms ease; }

/* ---- ابزار متنی */
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-teal { color: var(--teal); }

/* ---- ورق‌زدن پروفایل‌ها در یک بخش */
.profile-pager { display: flex; align-items: center; gap: 8px; }
.profile-pager .pager-name {
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-pager-meta {
  display: flex; flex-direction: column; align-items: center; line-height: 1.35;
  padding-inline: 6px;
}
.profile-pager-count { font-size: 14px; color: var(--text-strong); font-weight: 700; }
/* گامی که دور بررسی را می‌بندد و به آغاز برمی‌گردد */
.profile-pager .btn.is-wrap {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.profile-pager-scope {
  font-size: 13px; color: var(--faint);
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
  .profile-pager .pager-name, .profile-pager-scope { display: none; }
}

/* ---- خط هویت زیر نام: سمت و زنجیرهٔ سازمانی، از نزدیک‌ترین واحد تا ریشه */
.profile-org {
  margin-block: 4px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--muted);
}
.profile-org-position { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.text-strong { color: var(--text-strong); font-weight: 700; }
.text-sm { font-size: 14.5px; }
.text-xs { font-size: 14px; }
.text-lg { font-size: 17.5px; }
.num { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }

/* -------------------------------------------------------------- ۵) نماها */

/* ---- ورود */
/*
 * پس‌زمینهٔ صفحهٔ ورود کاملاً با CSS ساخته می‌شود — هیچ فایل تصویری‌ای
 * در کار نیست. مزیتش فقط سبکی نیست: با توکن‌های رنگ برنامه ساخته شده،
 * پس با تغییر پوسته یا رنگ شاخص، خودش هم‌رنگ می‌شود.
 *
 * سه لایه روی هم:
 *   ۱) `.login-backdrop`          شفق‌های رنگی متحرک روی بستر تیره/روشن
 *   ۲) `.login-backdrop::before`  توری ظریف با ماسک شعاعی
 *   ۳) `.login-scrim`             نورافکن پشت کارت + سایه‌روشن لبه‌ها
 */
.login-page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  isolation: isolate;
  overflow: hidden;
  background: var(--login-base);
}

/*
 * حلقه‌های هم‌مرکز پشت ستون معرفی. با `box-shadow` ساخته شده‌اند تا سه
 * دایره فقط یک المان بگیرند — لنگر هندسی طرح که نمی‌گذارد صفحه صرفاً
 * «چند لکهٔ محو» به‌نظر برسد.
 */
.login-page::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset-block-start: -12%;
  inset-inline-start: -10%;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow:
    0 0 0 clamp(40px, 7vw, 96px) transparent,
    0 0 0 calc(clamp(40px, 7vw, 96px) + 1px) color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 0 clamp(90px, 15vw, 210px) transparent,
    0 0 0 calc(clamp(90px, 15vw, 210px) + 1px) color-mix(in srgb, var(--teal) 12%, transparent);
  mask-image: radial-gradient(circle at 50% 50%, transparent 38%, #000 52%, #000 88%, transparent 96%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 38%, #000 52%, #000 88%, transparent 96%);
  pointer-events: none;
}

/* ۱) شفق‌ها: چند لکهٔ نوری بزرگ که آرام جابه‌جا می‌شوند */
.login-backdrop {
  position: absolute;
  inset: -18%;
  z-index: -3;
  background:
    radial-gradient(38% 46% at 78% 18%,
      color-mix(in srgb, var(--accent) var(--login-glow-a), transparent), transparent 70%),
    radial-gradient(34% 42% at 16% 76%,
      color-mix(in srgb, var(--teal) var(--login-glow-b), transparent), transparent 70%),
    radial-gradient(30% 38% at 52% 44%,
      color-mix(in srgb, var(--violet) var(--login-glow-c), transparent), transparent 72%);
  filter: blur(18px);
  animation: login-aurora 34s ease-in-out infinite alternate;
}

@keyframes login-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2.5%, 0) scale(1.14); }
}

/* ۲) توری هندسی — لبه‌ها با ماسک شعاعی محو می‌شوند تا خام به‌نظر نرسد.
 *
 * روی `.login-scrim` سوار است، نه `.login-backdrop`: آن یکی `filter:
 * blur()` دارد و blur روی فرزندها هم اثر می‌گذارد، پس خطوط توری آنجا
 * کاملاً محو می‌شدند.
 */
.login-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--login-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-grid) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 42%, #000 8%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 42%, #000 8%, transparent 78%);
  pointer-events: none;
}

/* ۳) نورافکن پشت کارت ورود + تیرگی لبه‌ها برای عمق */
.login-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(46% 60% at 26% 50%,
      color-mix(in srgb, var(--login-lift) 70%, transparent), transparent 72%),
    radial-gradient(120% 100% at 50% 50%,
      transparent 42%, color-mix(in srgb, var(--login-base) 78%, transparent) 100%);
}

/* رگهٔ نوری باریک و مورب — همان جزئیات کوچکی که طرح را «تمام‌شده» می‌کند */
.login-scrim::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 34%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, color-mix(in srgb, var(--accent) 34%, transparent) 46%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .login-backdrop { animation: none; }
}

/* شدت هر لایه به پوسته وابسته است */
[data-theme="dark"] {
  --login-base: #080b0e;
  --login-glow-a: 26%;
  --login-glow-b: 20%;
  --login-glow-c: 14%;
  --login-grid: rgba(255, 255, 255, .06);
  --login-lift: #12181e;
}
[data-theme="light"] {
  --login-base: #f2efe9;
  --login-glow-a: 30%;
  --login-glow-b: 18%;
  --login-glow-c: 12%;
  --login-grid: rgba(30, 35, 40, .075);
  --login-lift: #ffffff;
}

/*
 * رنگ متن ستون معرفی جدا از توکن‌های عمومی است، چون زیرش شفق‌های رنگی
 * با روشنایی متغیر می‌گذرند و خاکستریِ معمولِ پنل رویشان گم می‌شود.
 * `--login-veil` هم برای هالهٔ پشت متن به کار می‌رود، نه پوشاندن پس‌زمینه.
 */
[data-theme="dark"] {
  --login-veil: #05070a;
  --login-ink: #ffffff;
  --login-ink-soft: rgba(255, 255, 255, .84);
  /* لوگو روی زمینهٔ تیره باید سفید باشد؛ فایل اصلی سیاه است */
  --login-logo-filter: invert(1);
}
[data-theme="light"] {
  --login-veil: #fbf9f5;
  --login-ink: #14181c;
  --login-ink-soft: rgba(20, 24, 28, .8);
  --login-logo-filter: none;
}

/* ---- ستون معرفی */
.login-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(32px, 5vw, 72px);
  color: var(--text);
}
/* لوگوی مجموعه، بزرگ و کم‌رنگ، پشتِ متنِ ستون معرفی — یک لایهٔ برندینگِ
   آرام، نه یک تصویر که چشم را از فرم ورود بگیرد. روی تم تیره سفید
   می‌شود (فایل اصلی سیاه است)، تا از دلِ پس‌زمینهٔ تیره دیده شود. */
.login-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-end: clamp(-14%, -6vw, -4%);
  inset-block-end: clamp(-10%, -6vh, -2%);
  width: min(50vw, 620px);
  aspect-ratio: 1;
  background-image: url("/assets/brand/jan-logo-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .08;
  filter: var(--login-logo-filter, none);
  pointer-events: none;
}
.login-art > * { position: relative; z-index: 1; }
.login-art h1 {
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.45;
  margin-bottom: 16px;
  color: var(--login-ink);
  text-shadow: 0 2px 24px color-mix(in srgb, var(--login-veil) 75%, transparent);
}
.login-art p {
  font-size: 16px;
  line-height: 2;
  color: var(--login-ink-soft);
  max-width: 46ch;
  text-shadow: 0 1px 16px color-mix(in srgb, var(--login-veil) 60%, transparent);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(28px, 5vh, 48px); }
.login-brand .brand-title,
.login-brand .brand-sub {
  text-shadow: 0 1px 16px var(--login-veil);
}
.login-brand .brand-title { color: var(--login-ink); }
.login-brand .brand-sub { color: var(--login-ink-soft); }

.login-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-bottom: 18px; padding: 5px 14px;
  font-size: 13.5px; letter-spacing: .04em;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--login-veil) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.login-features { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(24px, 4vh, 40px); }
.login-feature {
  display: flex; align-items: center; gap: 11px;
  font-size: 15px; color: var(--login-ink-soft);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--login-veil) 55%, transparent);
}
.login-feature-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--login-veil) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  backdrop-filter: blur(10px);
}

/* ---- کارت فرم */
.login-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px clamp(20px, 4vw, 44px);
}
/* امضا پایین می‌نشیند ولی فرم را از مرکز جابه‌جا نمی‌کند */
.login-panel .login-form { margin-block: auto; }

.login-form {
  width: min(392px, 100%);
  padding: clamp(26px, 3.4vw, 38px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 28px 70px -24px color-mix(in srgb, var(--bg-deep) 88%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.login-form h2 { font-size: 22px; margin-bottom: 6px; color: var(--text-strong); }
.login-form .lead { color: var(--muted); font-size: 15px; margin-bottom: 24px; line-height: 1.9; }
.login-hint {
  margin-top: 20px; padding: 13px 15px;
  font-size: 14px; line-height: 2; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 12px;
}

/* ---- پروفایل همکار */
.profile-header {
  display: flex;
  gap: 22px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(620px 260px at 88% -30%, var(--accent-soft), transparent 68%),
    var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.photo-slot { flex: none; }
/* لنگرِ موقعیت‌یابیِ خودِ روکشِ آپلود (`.photo-dropzone`) — فقط خودِ
   عکس را می‌پوشاند، نه دکمه‌های زیرش («بارگذاری»/«حذف عکس») را؛
   قبلاً این روکش روی کل `.photo-slot` کشیده می‌شد (که شاملِ دکمه‌ها
   هم بود) و به همین خاطر، همان روکشِ نامرئی کلیک‌های رویِ «حذف عکس»
   را می‌قاپید. */
.photo-frame { position: relative; flex: none; }
.photo-slot .avatar-xl { border: 2px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.photo-actions {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 9px;
}
.photo-dropzone {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity var(--transition);
  cursor: pointer;
}
.photo-frame:hover .photo-dropzone, .photo-dropzone.is-dragging { opacity: 1; }
.photo-dropzone.is-disabled { cursor: not-allowed; }
.photo-frame:hover .photo-dropzone.is-disabled { opacity: .85; }
.photo-slot .avatar-lg { border: 2px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.profile-identity { min-width: 0; flex: 1; }
/* نام نیرو سربرگ اصلی این صفحه است و باید از فاصله هم خوانده شود */
.profile-name { font-size: 30px; line-height: 1.25; color: var(--text-strong); margin-bottom: 7px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14.5px; color: var(--muted); margin-top: 10px; }
.profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.profile-stats { display: flex; gap: 26px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.profile-stat-label { font-size: 14.5px; color: var(--faint); }
.profile-stat-value { font-size: 17.5px; font-weight: 700; color: var(--text-strong); }

.section-card { margin-bottom: 16px; }
.section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.section-head h3 { font-size: 15px; color: var(--text-strong); }
.section-head .line { flex: 1; height: 1px; background: var(--border); }

.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---- لیست حقوق */
.period-picker { display: flex; align-items: center; gap: 7px; }
.period-picker .select { min-width: 118px; }
.payroll-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.payroll-summary-item { padding: 13px 16px; background: var(--surface); }
.payroll-summary-label { font-size: 14.5px; color: var(--faint); }
/* توضیح کوچک زیر کارت — مثلاً «فیش با خالص منفی در این جمع نیامده است» */
.payroll-summary-foot { font-size: 13.5px; color: var(--faint); margin-top: 3px; line-height: 1.7; }
.payroll-summary-value { font-size: 18px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
/* «خالص پرداختی» عددی است که همه دنبالش می‌گردند — از بقیهٔ کارت‌ها جدا باشد */
.payroll-summary-value.text-accent { font-size: 21px; font-weight: 800; letter-spacing: -.2px; }
/*
 * خالص پرداختی در فیش: سبزِ خودِ تم (`--green`) که در پوستهٔ روشن هم
 * تیره‌تر می‌شود و کنتراست را نگه می‌دارد. رنگ ثابت نمی‌نویسیم تا با
 * تعویض پوسته ناخوانا نشود.
 */
.payroll-summary-value.is-net-payable {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--green);
}
.table td.num.is-net { font-size: 16.5px; font-weight: 800; color: var(--text-strong); }

/* ---- سربرگ و ورق‌زدن فیش حقوقی */
.payslip-person {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border);
}
/* عکس هم‌اندازهٔ پروفایل است تا هنگام ورق‌زدن پیاپی، چهره قابل تشخیص بماند */
.payslip-person .avatar-xl { flex: 0 0 auto; }
.payslip-person-info { flex: 1; min-width: 180px; padding-top: 4px; }
.payslip-person-name { font-size: 24px; font-weight: 800; color: var(--accent-strong); letter-spacing: -.2px; }
.payslip-person-position { margin-top: 5px; font-size: 17px; font-weight: 700; color: var(--text-strong); }

.payslip-pager { display: flex; align-items: center; gap: 8px; align-self: center; }
.payslip-pager-count { font-size: 14px; color: var(--faint); white-space: nowrap; }

.section-hint { display: inline-flex; align-items: center; }

/* ---- کارت «پرداخت مرحلهٔ اول» در پنجرهٔ ثبت پرداخت */
.payment-previous {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ---- اطلاعات پرونده (اسناد همکار) */
.dossier-btn-label { font-size: 14.5px; }
.dossier-identity {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.dossier-name { font-size: 20px; font-weight: 800; color: var(--text-strong); }
.dossier-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px 18px;
  margin-top: 12px;
}
.dossier-fact { display: flex; gap: 7px; font-size: 14.5px; min-width: 0; }
.dossier-fact-label { color: var(--faint); flex: none; }
.dossier-fact-value { color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }

.dossier-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.dossier-dropzone:hover, .dossier-dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dossier-dropzone.is-busy { opacity: .6; pointer-events: none; }

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.dossier-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin: 0;
}
.dossier-thumb {
  display: grid;
  place-items: center;
  height: 132px;
  background: var(--bg-deep);
  overflow: hidden;
}
.dossier-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dossier-thumb-file {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--faint); font-size: 13.5px; font-weight: 700;
}
.dossier-card figcaption { padding: 9px 10px 10px; }
.dossier-card-title { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }

/* ---- چارت سازمانی در تنظیمات */
.org-tree { padding: 6px 0; }
.org-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.org-node:hover { background: var(--accent-soft); }
.org-tree > div:last-child > .org-node:last-child { border-bottom: none; }
.pager-hop { display: inline-flex; opacity: .65; margin-inline-start: 3px; }

@media (max-width: 640px) {
  .payslip-person .avatar-xl { width: 116px; height: 116px; font-size: 34px; }
}

/* ---- جادوگر ورود اطلاعات */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stepper-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 150px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--faint);
  font-size: 14.5px;
}
.stepper-item + .stepper-item { border-inline-start: 1px solid var(--border); }
.stepper-item.is-active { color: var(--accent-strong); font-weight: 700; }
.stepper-item.is-done { color: var(--green); }
.stepper-badge {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: inherit;
  font-size: 14px; font-weight: 700;
}
.stepper-item.is-active .stepper-badge { background: var(--accent); color: var(--accent-ink); }
.stepper-item.is-done .stepper-badge { background: var(--green-soft); color: var(--green); }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 40px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover, .dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone.is-busy { cursor: progress; opacity: .75; }
.dropzone-icon { color: var(--accent); margin-bottom: 6px; }
.dropzone-title { font-size: 16.5px; font-weight: 700; color: var(--text-strong); }

.header-picker tr.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.header-picker td { max-width: 150px; }

/* ---- سازندهٔ فیلد */
.field-list { display: flex; flex-direction: column; gap: 7px; }
.field-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: border-color var(--transition), opacity var(--transition);
}
.field-row:hover { border-color: var(--border-strong); }
.field-row.is-hidden { opacity: .5; }
.field-row.is-dragging { opacity: .4; border-style: dashed; }
.field-row.drop-target { border-color: var(--accent); box-shadow: var(--glow); }
.field-drag {
  cursor: grab; color: var(--faint); padding: 2px;
  touch-action: none;
}
.field-drag:active { cursor: grabbing; }
.field-row-name { font-size: 14.5px; font-weight: 600; }
.field-row-key { font-size: 14px; color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; }
.field-row-actions { margin-inline-start: auto; display: flex; gap: 5px; align-items: center; }

/* ---- فیش چاپی — قالبِ آ۵ (تنها یک صفحه، هرچه‌قدر هم آیتم‌ها بیشتر
   باشند)؛ اندازه‌ها نسبت به قبل کوچک‌تر شده‌اند تا در این صفحهٔ
   کوچک‌تر جا شوند. */
.payslip-doc {
  background: #fff;
  color: #111;
  padding: 12px 14px;
  border-radius: var(--radius);
  /* عرضِ قابلِ‌چاپِ آ۵ (۱۴۸ میلی‌متر منهای ۸ میلی‌متر حاشیه از هر طرف،
     در ۹۶ نقطه در اینچ) — پیش‌نمایشِ رویِ صفحه دقیقاً همان عرضی را
     دارد که موقعِ چاپ خواهد داشت، تا اندازه‌گیریِ ارتفاع برای «جاشدن
     در یک صفحه» درست باشد، نه تخمینی. */
  max-width: 499px;
  margin-inline: auto;
  box-shadow: 0 0 0 1px #ddd;
}
.payslip-print-stack { display: flex; flex-direction: column; gap: 22px; }
.payslip-doc h1, .payslip-doc h2, .payslip-doc h3 { color: #111; }
.payslip-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 7px; margin-bottom: 8px;
  border-bottom: 1.5px solid #111;
}
.payslip-print-photo {
  width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
  border: 1px solid #999; flex: none;
}
.payslip-title { font-size: 14.5px; }
.payslip-sub { font-size: 11px; color: #555; }
.payslip-print-name { font-size: 16px; font-weight: 800; line-height: 1.3; }
.payslip-print-position { margin-top: 1px; font-size: 12px; font-weight: 700; color: #333; }
.payslip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px 14px;
  font-size: 11px;
  margin-bottom: 8px;
}
.payslip-grid div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #ccc; padding: 2px 0; }
.payslip-grid dt, .payslip-grid .k { color: #666; }
.payslip-grid .v { font-weight: 700; }
.payslip-insurance-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}
.payslip-insurance-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #777;
  border-radius: 5px;
  font-size: 11px;
}
.payslip-insurance-box .k { color: #444; }
.payslip-insurance-box .v { font-weight: 800; white-space: nowrap; }
.payslip-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 7px; }
.payslip-table th, .payslip-table td { border: 1px solid #ccc; padding: 3px 6px; text-align: start; }
.payslip-table th { background: #f0f0f0; font-weight: 700; }
.payslip-total { background: #111; color: #fff; padding: 6px 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; }
.payslip-payment-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 7px;
  padding: 5px 8px;
  border: 1px solid #aaa;
  border-radius: 5px;
  font-size: 10.5px;
}
.payslip-payment-details > div { display: flex; flex-direction: column; gap: 1px; }
.payslip-payment-details .k { color: #666; }
.payslip-payment-details .v { font-weight: 700; overflow-wrap: anywhere; }
.payslip-signs { display: flex; justify-content: space-between; margin-top: 14px; font-size: 10.5px; color: #555; }

/* --------------------------------------------------------------- ۶) چاپ */
@page { size: A5; margin: 8mm; }

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .no-print, .toast-host { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .content { padding: 0; }
  .payslip-doc { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
  .modal-host { position: static; background: none; padding: 0; display: block; }
  .modal { border: 0; box-shadow: none; max-height: none; width: 100%; }
  .modal-header, .modal-footer { display: none !important; }
  .modal-body { padding: 0; overflow: visible; }

  /* در حالت چاپ فیش، تمام برنامه و هر محتوای پشت پنجره حذف می‌شود؛ فقط
     سند/سندهای داخل پیش‌نمایش به موتور چاپ می‌رسند. */
  body.payslip-print-mode { overflow: visible; }
  body.payslip-print-mode > * { display: none !important; }
  body.payslip-print-mode > #modal-host {
    display: block !important;
    position: static;
    inset: auto;
    padding: 0;
    background: none;
    overflow: visible;
  }
  body.payslip-print-mode #modal-host .modal,
  body.payslip-print-mode #modal-host .modal-body,
  body.payslip-print-mode .payslip-print-stack {
    display: block !important;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
  }
  body.payslip-print-mode .payslip-doc {
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
    color: #111;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  body.payslip-print-mode .payslip-doc:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .payslip-head, .payslip-grid, .payslip-insurance-boxes,
  .payslip-table, .payslip-total, .payslip-payment-details, .payslip-signs {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ---------------------------------------------------------- ۷) واکنش‌گرا */
@media (max-width: 1080px) {
  /* روی نمایشگر باریک، ستون معرفی می‌رود ولی عکس می‌ماند: کارت ورود
     وسط عکس می‌نشیند و پرده هم عمودی می‌شود تا خوانا بماند. */
  .login-page { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-scrim {
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--bg-deep) 92%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 42%, transparent) 100%);
  }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;           /* راست‌به‌چپ: کشو سمتِ راست است و برای پنهان‌شدن به بیرونِ راست می‌رود */
    width: min(86vw, 320px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition), visibility 0s linear 220ms;
    box-shadow: var(--shadow-lg);
    z-index: 60;
    overscroll-behavior: contain;
  }
  .sidebar.is-open { visibility: visible; transition: transform var(--transition), visibility 0s; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); }
  .content { padding: 16px 14px 40px; }
  .topbar { padding: 10px 14px; }
  .global-search kbd { display: none; }
  .profile-header { flex-direction: column; align-items: center; text-align: center; }
  .profile-stats { justify-content: center; flex-wrap: wrap; }
}

@media (min-width: 901px) {
  .menu-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* سربرگِ برندِ صفحهٔ ورود: فقط جایی که ستونِ معرفی پنهان است */
.login-mobile-brand { display: none; }

/* ============================================================== ۸) موبایل و تبلت */
/* پایه‌های لمسی: بدون تأخیرِ دوبار‌لمس، بدون بزرگ‌شدنِ خودکارِ متن، بدون بالا‌پایین‌پریدنِ ارتفاع */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, a, .btn, .nav-item, select, input, label, summary { touch-action: manipulation; }
body.no-scroll { overflow: hidden; }
body:has(#modal-host:not([hidden])) { overflow: hidden; }       /* وقتی پنجره باز است، صفحهٔ زیرش اسکرول نشود */
.shell { min-height: 100vh; min-height: 100dvh; }

@media (max-width: 900px) {
  /* ---- نوار بالا: دکمهٔ منو + عنوان (کوتاه‌شونده) + جست‌وجوی جمع‌شونده */
  .topbar { gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); min-height: 56px; }
  .menu-toggle { width: 44px; height: 44px; flex: none; }
  .page-heading { flex: 1; min-width: 0; }
  .page-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-subtitle { display: none; }
  .topbar-actions { margin-inline-start: 0; flex: none; }

  .global-search { flex: none; width: 44px; max-width: none; }
  .global-search input {
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    color: transparent; caret-color: transparent; cursor: pointer;
  }
  .global-search input::placeholder { color: transparent; }
  .global-search .search-icon { inset-inline-start: 0; width: 44px; height: 44px; display: grid; place-items: center; top: 0; transform: none; }
  .global-search:focus-within {                 /* با لمس، جست‌وجو تمام‌عرض باز می‌شود */
    position: fixed; z-index: 70; top: calc(6px + env(safe-area-inset-top)); inset-inline: 8px; width: auto;
  }
  .global-search:focus-within input {
    width: 100%; height: 48px; padding: 0 46px 0 14px; border-radius: 14px;
    color: var(--text); caret-color: auto; cursor: text; font-size: 16px;
    box-shadow: var(--shadow-lg);
  }
  .global-search:focus-within input::placeholder { color: var(--faint); }
  .global-search:focus-within .search-icon { inset-inline-start: 2px; }
  .search-results { width: 100%; max-height: 70dvh; }

  /* ---- محتوا */
  .content { padding: 12px 10px calc(28px + env(safe-area-inset-bottom)); }
  .stack { gap: 12px; }
  .card-header { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; }
  .card-body { padding: 14px; }
  .card-header-actions { flex-wrap: wrap; }
  .modal-wide { width: 100%; }
}

@media (max-width: 720px) {
  /* ---- کادرها و دکمه‌ها: اندازهٔ لمسی، و فونت ۱۶ تا iOS هنگام تایپ بزرگ‌نمایی نکند */
  .input, .select, .textarea { font-size: 16px; padding: 11px 12px; min-height: 46px; }
  .textarea { min-height: 96px; }
  .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
  .btn-sm { min-height: 40px; padding: 8px 12px; font-size: 14.5px; }
  .btn-icon { min-width: 44px; }
  .checkbox, label.checkbox { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .checkbox input[type="checkbox"], input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: none; }
  input[type="file"] { max-width: 100%; font-size: 15px; }

  /* ---- فرم‌ها: یک ستون؛ سطرِ فیلدها دوتادو و فیلدِ بلند تمام‌عرض */
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .content .row > .field[style], .modal .row > .field[style] { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; max-width: none !important; }
  .content .row > .field[style*="flex: 2"], .modal .row > .field[style*="flex: 2"],
  .content .row > .field[style*="flex: 1"][style*="min-width: 2"], .modal .row > .field[style*="flex: 1"][style*="min-width: 2"] { flex-basis: 100% !important; }
  .row > .field[style*="max-width"] { max-width: none !important; }
  .row > input.input[style*="max-width"], .row .field > input.input[style*="max-width"] { max-width: none !important; }

  /* ---- جدول‌ها: هر ردیف یک کارت با برچسبِ ستون (برچسب‌ها را core/mobile.js می‌گذارد) */
  .table-wrap, .table-wrap-scroll { overflow: visible; max-height: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tbody tr {
    margin: 0 0 10px; padding: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  }
  .table tbody tr.is-clickable:active { background: var(--surface-2); }
  .table td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 14px; border: 0; border-bottom: 1px dashed var(--border);
    white-space: normal; text-align: end; font-size: 15px; overflow-wrap: anywhere;
  }
  .table td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label); flex: none; max-width: 42%;
    color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: start; white-space: normal;
  }
  .table td[data-label=""]::before, .table td:not([data-label])::before { content: none; }
  .table td:first-child { background: var(--surface-3); font-weight: 800; border-bottom: 1px solid var(--border); }
  .table td:first-child { justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; }
  .table td:first-child::before { content: none; }       /* مقدارِ ستونِ اول خودش عنوانِ کارت است */
  .table td[colspan], .table td.col-shrink { justify-content: center; text-align: center; }
  .table td.col-shrink { justify-content: flex-start; width: 100%; }   /* قاعدهٔ دسکتاپ width:1% دارد؛ اینجا باید تمام‌عرض شود */
  .table td:has(input, select, textarea) { flex-direction: column; align-items: stretch; gap: 6px; }
  .table td:has(input, select, textarea)::before { max-width: none; }
  .table td .btn { min-height: 40px; }
  .table .num { text-align: end; }

  /* ---- پنجره‌ها: برگهٔ تمام‌عرضِ پایین‌صفحه */
  .modal-host { padding: 0; place-items: end stretch; align-items: end; }
  .modal, .modal-wide {
    width: 100%; max-height: 94vh; max-height: 94dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
  }
  .modal-header { padding: 12px 14px; }
  .modal-body { padding: 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .modal-footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    flex-wrap: wrap; justify-content: stretch; gap: 8px;
    border-radius: 0;
  }
  .modal-footer .btn { flex: 1 1 calc(50% - 8px); }

  /* ---- اعلان‌ها: تمام‌عرض، بالای لبهٔ امن پایین */
  .toast-host { inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; width: 100%; }

  /* ---- نمودارها و بقیه */
  .export-toolbar { flex-wrap: wrap; }
  .card-title { font-size: 15.5px; }
  .alert { font-size: 14.5px; }
  .badge { font-size: 13px; }
}

/* گوشی‌های خیلی باریک */
@media (max-width: 380px) {
  .modal-footer .btn { flex-basis: 100%; }
  .content .row > .field[style], .modal .row > .field[style] { flex-basis: 100% !important; }
}

@media (max-width: 1080px) {
  .login-mobile-brand { display: flex; align-items: center; gap: 12px; width: min(392px, 100%); color: var(--text-strong); }
  .login-mobile-brand img { width: 46px; height: 46px; border-radius: 12px; flex: none; }
  .login-mobile-title { font-size: 19px; font-weight: 800; }
  .login-mobile-sub { font-size: 13.5px; color: var(--muted); }
  .login-panel { padding: calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); gap: 16px; }
}
@media (max-width: 720px) {
  /* اطلاعاتِ فقط‌نمایشی (برچسب+مقدار) دوستونه تا جزئیاتِ سند چند صفحه طول نکشد؛ فرم‌ها تک‌ستونه می‌مانند */
  .form-grid:not(:has(input, select, textarea)) { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .form-grid:not(:has(input, select, textarea)) > * { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  /* چارت سازمانی تودرتو روی گوشی داخل خودش افقی اسکرول می‌خورد، نه کل صفحه */
  .org-tree { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}