/* =====================================================================
   fix32 — لایه‌ی «صیقل UI/UX»  (آخرین لایه‌ی استایل؛ بعد از theme-lux.css)
   فقط ظاهر: هیچ منطق و HTMLای تغییر نمی‌کند. با حذف همین فایل از index.html
   همه‌چیز دقیقاً به حالت قبل برمی‌گردد.
   ===================================================================== */

/* ---------- ۱) فونت یکسان و قابل‌اتکا ---------------------------------
   Vazirmatn از /fonts/Vazirmatn.woff2 (روی خود سرور) لود می‌شود؛ دیگر به
   Google Fonts وابسته نیست (در ایران کند/مسدود است و صفحه را معطل می‌کرد).
   اگر فایل فونت هنوز نصب نشده باشد، فونت‌های فارسیِ خوب سیستم جایگزین می‌شوند. */
@font-face {
  font-family: 'Vazirmatn';
  src: local('Vazirmatn'), url('fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-ui: 'Vazirmatn', 'Vazir', 'IRANSansX', 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
  --fs-xs: 11.5px;   /* کمترین اندازه‌ی مجاز متن (برچسب‌ها، نشان‌ها) */
  --fs-sm: 12.5px;   /* دکمه‌ی کوچک، چیپ، متن کمکی */
  --fs-md: 13.5px;   /* دکمه‌ی معمولی، متن جدول */
  --tap: 44px;       /* حداقل ناحیه‌ی لمس روی موبایل */
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, button, input, select, textarea { font-family: var(--font-ui); }
body {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent;
}
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }

/* ---------- ۲) حداقل اندازه‌ی متن — هیچ متنی زیر ۱۱.۵px نباشد ------------- */
.kpi .label { font-size: clamp(12px, .3vw + 10.5px, 12.5px) !important; }
.kpi .sub { font-size: var(--fs-xs) !important; }
.badge-s { font-size: var(--fs-xs) !important; }
th, #pages thead th, .panel thead th, .table-wrap thead th { font-size: clamp(11.5px, .2vw + 10.5px, 12.5px) !important; }
.text-xs, .lbl, .form-label, label { font-size: max(var(--fs-xs), 1em); }
.text-xs { font-size: var(--fs-xs) !important; }
.lbl { font-size: 12px !important; }

/* ---------- ۳) اندازه و وزن یکسان دکمه‌ها (دسکتاپ = موبایل) -------------- */
.btn { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; }
.btn.btn-sm { font-size: var(--fs-sm); }
.chip { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }
.dd-btn { font-size: 14px; font-weight: 600; }
.btn-today.date-pick-btn { min-height: 34px; padding: 6px 12px; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; }
.stepper-btn { min-width: 34px; min-height: 34px; }

/* ---------- ۴) لمس نرم: بازخورد فشردن دکمه، فوکوس واضح ------------------ */
.btn, .chip, .act, .icon-btn, .stepper-btn, .nav-item, .dd-btn {
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, opacity .16s ease;
}
.btn:active, .chip:active, .act:active, .icon-btn:active, .stepper-btn:active { transform: scale(.97); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .input:focus-visible { outline-offset: 0; }

/* ---------- ۵) فوتر پنجره‌های گفتگو: «ثبت» و «انصراف» کنار هم ------------- */
.modal .flex.gap-3.mt-4 { flex-wrap: nowrap; align-items: stretch; }
.modal .flex.gap-3.mt-4 > .btn-block { flex: 1 1 0; width: auto; min-width: 0; }
.modal .flex.gap-3.mt-4 > .btn:not(.btn-block) { flex: 0 0 auto; }

/* ---------- ۶) جدول‌ها و اسکرول روان ---------------------------------- */
.table-wrap, .tbl-wrap, [class*="table"][style*="overflow"] { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* =====================================================================
   موبایل و تبلت
   ===================================================================== */
@media (max-width: 768px), (pointer: coarse) {
  /* قاعده‌ی قبلی «font-size:16px» برای جلوگیری از زوم iOS فقط برای فیلدها لازم
     است؛ روی دکمه‌ها باعث می‌شد چیپ/منوی‌کشویی دو برابرِ دکمه‌ها بزرگ دیده شود. */
  button { font-size: var(--fs-md) !important; }
  .btn { font-size: var(--fs-md) !important; min-height: var(--tap); }
  .btn.btn-sm { font-size: var(--fs-sm) !important; min-height: 40px; }
  .chip { font-size: var(--fs-sm) !important; min-height: 38px; padding: 8px 13px; }
  .dd-btn { font-size: 14px !important; min-height: var(--tap); }
  .icon-btn { font-size: 14px !important; }
  .stepper-btn { min-width: 38px; min-height: 38px; font-size: 16px !important; }
  .btn-today.date-pick-btn { min-height: 38px; font-size: var(--fs-sm) !important; }
  .segment button, .seg button, button.on { min-height: 38px; font-size: var(--fs-sm) !important; }
}

@media (max-width: 768px) {
  /* --- نوار بالا: عنوان صفحه دیگر با «…» بریده نمی‌شود --- */
  .topbar { gap: 6px; }
  .topbar > div:not([class]) { min-width: 0; flex: 1 1 auto; }
  .topbar h2 {
    font-size: 14.5px; line-height: 1.35; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .topbar .icon-btn { width: 40px; height: 40px; }

  /* --- اعلان (toast) پایین صفحه، نه روی عنوان --- */
  .toast-wrap {
    top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: min(92vw, 420px); right: 50%;
  }
}

@media (max-width: 560px) {
  /* --- کارت‌های آمار: دو ستون، چیدمان یکدست (قبلاً عدد به چپ می‌افتاد) --- */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .kpi {
    display: flex !important; flex-direction: column; align-items: flex-start;
    gap: 2px; padding: 12px !important; min-width: 0;
  }
  .kpi .ic { width: 34px !important; height: 34px !important; margin-bottom: 6px !important; }
  .kpi .ic svg { width: 18px; height: 18px; }
  .kpi .label { line-height: 1.5; }
  .kpi .val { font-size: 21px !important; margin: 0 !important; line-height: 1.3; }
  .kpi .sub { margin-top: 3px !important; line-height: 1.5; }

  /* --- ردیف بازه‌ی تاریخ (از/تا + اعمال): دو جفتِ هم‌عرض، دکمه‌ی اعمال تمام‌عرض.
         قبلاً فیلدها ~۴۸px می‌شدند و متن «از تاریخ» شکسته می‌شد. --- */
  .date-row:not(.compact) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 8px !important; align-items: center;
  }
  .date-row:not(.compact) .input { width: 100% !important; min-width: 0; text-align: center; }
  .date-row:not(.compact) > .btn { grid-column: 1 / -1; }
  .hidden-date { position: absolute !important; pointer-events: none; opacity: 0; width: 1px; height: 1px; }

  /* --- پنل‌ها فشرده‌تر؛ فاصله‌ی بین بخش‌ها یکنواخت --- */
  .panel { padding: 14px; }
  .chart-box.sm.has-rings { height: 170px; }
}

/* --- جستجوها: متن راهنما و نقطه‌ها درست RTL (فیلدهای mono چپ‌به‌راست بودند و «...» اول می‌افتاد) --- */
.search-box input, .search-box input.mono { direction: rtl; text-align: right; }

/* --- تبلت: دکمه‌های بالای صفحه و کادرهای جستجو دو‌ستونه (قبلاً هرکدام تمام‌عرض) --- */
@media (min-width: 481px) and (max-width: 1024px) {
  /* theme-minimal.css دکمه‌ها را فقط تا ۷۶۰px دوتایی می‌کرد؛ تبلت ۷۶۸ (آیپد) جا می‌ماند و چهار دکمه‌ی تمام‌عرض می‌دید */
  #pages .head-actions, .page-head .head-actions { flex-direction: row !important; }
  #pages .head-actions .btn, .page-head .head-actions .btn { width: auto !important; flex: 1 1 calc(50% - 4px) !important; }
  #pages .head-actions .btn:only-child { flex-basis: 100% !important; }
  .flex.gap-3.mb-3.wrap:has(> .search-box ~ .search-box) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .flex.gap-3.mb-3.wrap > .search-box { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active, .act:active, .icon-btn:active, .stepper-btn:active { transform: none; }
}