/* ============================================================
   پوسته‌ی سامانه — کارتابل، نوار بالا و چیدمان اصلی
   ============================================================ */

html, body { margin:0; padding:0; height:100%; }
* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  font-size: var(--fs-base);
  /* وزن پایه عمداً ۵۰۰ است نه ۴۰۰ — کل متن سامانه یک پله سنگین‌تر دیده شود */
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  min-height: 100vh;          /* پشتیبان برای مرورگرهای قدیمی */
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
/* ورودی‌ها و دکمه‌ها وزن بدنه را ارث نمی‌برند */
input, select, textarea, button { font-weight: inherit; }

/* ===== چیدمان اصلی: کارتابل سمت راست + محتوا ===== */
#main-app { display:none; }
#main-app.on { display:block; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  /* روی موبایل واقعی، 100vh ارتفاع نوار آدرس مرورگر را هم حساب می‌کند و از
     ارتفاع واقعی صفحه بلندتر است — همین باعث می‌شد پایین کارتابل (و گاهی حتی
     دکمه‌ی همبرگر بسته به چیدمان) بیرون از دید برود. 100dvh ارتفاع واقعیِ
     در دسترس را می‌دهد؛ خط اول برای مرورگرهای قدیمی که dvh را نمی‌شناسند. */
  height: 100vh;
  height: 100dvh;
  /* عمداً بدون transition: انیمیشن روی grid-template-columns در کرومیوم روی
     مقدار نهایی نمی‌نشیند و ستون در عرض قبلی گیر می‌کند. جمع‌شدن آنی است. */
}
body.sb-collapsed .app-shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ============================================================
   کارتابل (منوی کناری)
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  /* کارتابل عمداً پس‌زمینه‌ی متمایز از محتوا دارد تا به‌عنوان یک ناحیه‌ی
     مستقل خوانده شود، نه ادامه‌ی صفحه. مرز آن هم ۲px است. */
  background: var(--sidebar-bg);
  border-inline-start: 2px solid var(--border);
  overflow: hidden;
  z-index: 60;
}

/* --- سربرگ برند --- */
.sb-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
  background: var(--sidebar-head-bg);
}
.sb-brand img { width:38px; height:38px; object-fit:contain; flex-shrink:0; border-radius: var(--r-md); }
.sb-brand-text { display:flex; flex-direction:column; min-width:0; }
.sb-brand-name {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;
}
.sb-brand-sub { font-size: var(--fs-sm); color:var(--text-secondary); white-space:nowrap; font-weight: var(--fw-medium); }

/* --- جست‌وجو --- */
.sb-search { padding: var(--sp-4) var(--sp-4) var(--sp-3); position:relative; }
.sb-search input {
  width:100%; padding: 10px var(--sp-4) 10px 34px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text); font-family:inherit;
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  outline:none; transition: border-color var(--transition), box-shadow var(--transition);
}
.sb-search input::placeholder { color: var(--text-muted); font-weight: var(--fw-normal); }
.sb-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.sb-search-icon {
  position:absolute; left: calc(var(--sp-4) + 10px); top:50%; transform:translateY(-50%);
  color: var(--text-muted); pointer-events:none;
  display:flex; align-items:center;
}

/* --- بدنه‌ی منو --- */
.sb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.sb-nav::-webkit-scrollbar { width:10px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
.sb-nav::-webkit-scrollbar-track { background:transparent; }

.sb-group { margin-bottom: var(--sp-1); }

.sb-group-head {
  width:100%; display:flex; align-items:center; gap: var(--sp-3);
  padding: 12px var(--sp-3);
  background:none; border:none; border-radius: var(--r-md);
  font-family:inherit; font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--text); cursor:pointer; text-align:right;
  transition: background var(--transition), color var(--transition);
}
.sb-group-head:hover { background: var(--surface-3); }
.sb-group-icon {
  width:20px; height:20px; flex-shrink:0; color: var(--text-secondary);
  display:inline-flex; align-items:center; justify-content:center;
}
.sb-group-head:hover .sb-group-icon { color: var(--text); }
.sb-group.open .sb-group-icon { color: var(--accent); }
.sb-group.open .sb-group-head { color: var(--accent); }
.sb-group-icon svg, .icon-btn svg, .sb-logout svg, .quick-icon svg { display:block; }
.sb-group-title { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-group-count {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-secondary);
  background: var(--surface-3); border:1px solid var(--border);
  border-radius: var(--r-full);
  min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 6px;
}
.sb-group-chevron {
  color: var(--text-secondary); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  transition: transform var(--transition); transform: rotate(-90deg);
}
.sb-group.open .sb-group-chevron { transform: rotate(90deg); color: var(--accent); }

/* خط عمودی کنار آیتم‌های یک گروه — سلسله‌مراتب را واضح می‌کند */
.sb-group-body {
  display:none; padding: var(--sp-1) 0 var(--sp-2);
  margin-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--border);
}
.sb-group.open .sb-group-body { display:block; }

.sb-item {
  width:100%; display:flex; align-items:center; gap: var(--sp-3);
  padding: 10px var(--sp-3);
  background:none; border:none; border-radius: var(--r-md);
  font-family:inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--text-secondary); cursor:pointer; text-align:right;
  transition: background var(--transition), color var(--transition);
}
.sb-item:hover { background: var(--surface-3); color: var(--text); }
.sb-item-dot {
  width:6px; height:6px; border-radius:50%; background: var(--border-strong);
  flex-shrink:0; transition: background var(--transition), transform var(--transition);
}
.sb-item-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* حالت فعال: پس‌زمینه‌ی تُپُر با متن سفید — از دور هم پیداست */
.sb-item.active {
  background: var(--accent); color: var(--text-on-accent);
  font-weight: var(--fw-bold);
}
.sb-item.active:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.sb-item.active .sb-item-dot { background: var(--text-on-accent); transform: scale(1.5); }

.sb-empty, #sb-no-result {
  padding: var(--sp-6) var(--sp-4); text-align:center;
  color: var(--text-muted); font-size: var(--fs-sm);
}

/* در حالت جست‌وجو همه‌ی گروه‌ها باز نمایش داده می‌شوند */
.sb-nav.searching .sb-group-body { display:block; }

/* --- پاورقی کارتابل --- */
.sb-foot {
  border-top: 1px solid var(--border);
  background: var(--sidebar-head-bg);
  padding: var(--sp-4);
  display:flex; align-items:center; gap: var(--sp-3);
}
.sb-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: var(--accent); color: var(--text-on-accent);
  display:flex; align-items:center; justify-content:center;
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
}
.sb-user { flex:1; min-width:0; }
.sb-user-name {
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-user-role { font-size: var(--fs-sm); color: var(--text-secondary); white-space:nowrap; font-weight: var(--fw-medium); }
.sb-logout {
  background:none; border:1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-muted); cursor:pointer; padding:6px;
  font-family:inherit; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition: all var(--transition);
}
.sb-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-subtle); }

/* ===== حالت جمع‌شده (فقط آیکون) ===== */
body.sb-collapsed .sb-brand-text,
body.sb-collapsed .sb-search,
body.sb-collapsed .sb-group-title,
body.sb-collapsed .sb-group-count,
body.sb-collapsed .sb-group-chevron,
body.sb-collapsed .sb-item-label,
body.sb-collapsed .sb-user,
body.sb-collapsed .sb-logout { display:none; }

body.sb-collapsed .sb-brand { justify-content:center; padding-inline: var(--sp-2); }
body.sb-collapsed .sb-group-head { justify-content:center; padding-inline: var(--sp-2); }
body.sb-collapsed .sb-group-body { display:block; }
body.sb-collapsed .sb-item { justify-content:center; margin-inline-start:0; width:100%; padding-inline: var(--sp-2); }
body.sb-collapsed .sb-item-dot { width:7px; height:7px; }
body.sb-collapsed .sb-foot { justify-content:center; padding-inline: var(--sp-2); }

/* ============================================================
   ناحیه‌ی محتوا
   ============================================================ */
.main-wrap {
  display:flex; flex-direction:column;
  height:100vh; height:100dvh; min-width:0; overflow:hidden;
}

/* --- نوار بالا --- */
.topbar {
  height: var(--topbar-h); flex-shrink:0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap: var(--sp-3);
  padding: 0 var(--sp-5);
  z-index: 50;
}
.topbar-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-spacer { flex:1; }

.icon-btn {
  width:32px; height:32px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-secondary); cursor:pointer;
  font-family:inherit; font-size: var(--fs-md);
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

.topbar-time {
  font-size: var(--fs-sm); color: var(--text-muted);
  display:flex; align-items:center; gap: var(--sp-2); white-space:nowrap;
}
.live-dot { width:6px; height:6px; background: var(--success); border-radius:50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

#api-status {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding:3px 9px; border-radius: var(--r-full);
  white-space:nowrap;
}

.back-btn { display:none; }

/* --- ناحیه‌ی اسکرول --- */
.content {
  flex:1; overflow-y:auto; overflow-x:hidden; min-width:0;
  padding: var(--sp-6);
  scroll-behavior:smooth; outline:none;
}

.page { display:none !important; }
.page.active { display:block !important; }

/* سربرگ لوگوی داخل صفحات دیگر لازم نیست — نوار بالا همان نقش را دارد */
.page-logo-header { display:none !important; }

/* --- دکمه‌ی همبرگری و پوشش کشو (فقط موبایل) --- */
.sb-hamburger { display:none; }
.sb-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:55; backdrop-filter: blur(1px);
}

/* ============================================================
   ریسپانسیو
   ============================================================ */
/* ============================================================
   تبلت — تا ۱۰۲۴px
   ============================================================ */
@media (max-width: 1024px) and (min-width: 901px) {
  :root { --sidebar-w: 250px; }
  .content { padding: var(--sp-4); }
}

/* ============================================================
   موبایل و تبلت کوچک — تا ۹۰۰px
   ============================================================ */
@media (max-width: 900px) {
  .app-shell, body.sb-collapsed .app-shell { grid-template-columns: 1fr; }

  /* کشوی کارتابل.
     نکته‌ی RTL: در راست‌به‌چپ «inset-inline-start» همان لبه‌ی راست است.
     قبلاً از inset-inline-end استفاده شده بود که کارتابل را به لبه‌ی چپ
     می‌چسباند و translateX(100%) هم آن را به وسط صفحه می‌برد نه بیرون. */
  .sidebar {
    position: fixed; inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(86vw, 320px);
    max-width: 320px;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-xl);
    border-inline-start: none;
  }
  body.sb-drawer-open .sidebar { transform: translateX(0); }
  body.sb-drawer-open .sb-overlay { display:block; }
  /* وقتی کشو باز است، صفحه پشتش نباید اسکرول شود */
  body.sb-drawer-open { overflow: hidden; }

  /* در موبایل کارتابل همیشه کامل است، نه جمع‌شده */
  body.sb-collapsed .sb-brand-text,
  body.sb-collapsed .sb-search,
  body.sb-collapsed .sb-group-title,
  body.sb-collapsed .sb-group-count,
  body.sb-collapsed .sb-group-chevron,
  body.sb-collapsed .sb-item-label,
  body.sb-collapsed .sb-user,
  body.sb-collapsed .sb-logout { display:revert; }
  body.sb-collapsed .sb-item { justify-content:flex-start; }

  .sb-hamburger { display:inline-flex; }
  .sb-collapse-btn { display:none; }
  .content { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-3); }
  .topbar-time { display:none; }

  /* ---------- هدف‌های لمسی ----------
     استاندارد دسترس‌پذیری: هر چیز قابل لمس دست‌کم ۴۴px ارتفاع داشته باشد. */
  .btn, .icon-btn, .sb-item, .sb-group-head { min-height: 44px; }
  .btn { padding: 11px var(--sp-4); }
  .btn-sm { min-height: 38px; padding: 8px var(--sp-3); }

  /* ---------- فرم‌ها ----------
     ۱۶px عمدی است: اگر کوچک‌تر باشد iOS موقع فوکوس روی فیلد کل صفحه را
     زوم می‌کند و کاربر باید دستی برگردد — برای ثبت سریع با گوشی فاجعه است. */
  input, select, textarea, .sinput, .ef-inp {
    font-size: 16px !important;
    min-height: 44px;
    padding: 11px var(--sp-3);
  }
  textarea { min-height: 88px; }

  .form-grid-3, .form-grid-2, .info-grid, .form-row, .edit-row,
  .pf-grid, .pf-grid-3, .charts-grid, .chart-row { grid-template-columns: 1fr !important; }

  /* دکمه‌های پایین فرم: تمام‌عرض و چسبیده به پایین صفحه */
  .form-actions {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin: var(--sp-5) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
    padding: var(--sp-3) var(--sp-5);
    display: flex; gap: var(--sp-2);
  }
  .form-actions .btn { flex: 1; }

  /* ---------- شاخص‌ها و کارت‌ها ---------- */
  .home-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .home-quick { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sec-hd { gap: var(--sp-2); }
  .sec-title { font-size: var(--fs-lg); }
  .panel, .card { padding: var(--sp-4); }
  .panel-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .panel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .panel-actions > * { flex: 1 1 140px; }

  /* ============================================================
     جدول‌ها روی موبایل: هر ردیف یک کارت
     ------------------------------------------------------------
     اسکرول افقی روی گوشی عملاً غیرقابل استفاده است. اینجا هر ردیف به یک
     کارت تبدیل می‌شود و نام ستون از data-label (که table-cards.js از سربرگ
     جدول کپی می‌کند) کنار مقدار نشان داده می‌شود.
     ============================================================ */
  table.as-cards { border: none; background: transparent; }
  table.as-cards thead { display: none; }
  table.as-cards tbody,
  table.as-cards tr,
  table.as-cards td { display: block; width: 100%; }

  table.as-cards tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    box-shadow: var(--shadow-sm);
  }
  table.as-cards tbody tr:nth-child(even) td { background: transparent; }
  table.as-cards tbody tr:hover td { background: transparent; }

  table.as-cards td {
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 9px 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); text-align: start;
  }
  table.as-cards tr td:last-child { border-bottom: none; }

  table.as-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    white-space: nowrap;
  }
  /* سلول‌های بدون عنوان (مثل ستون عملیات) عنوان خالی نگیرند */
  table.as-cards td[data-label=""]::before,
  table.as-cards td:not([data-label])::before { content: none; }

  /* ستون عملیات: دکمه‌ها تمام‌عرض زیر هم */
  table.as-cards td.cell-actions {
    justify-content: stretch; flex-wrap: wrap; padding-top: var(--sp-3);
  }
  table.as-cards td.cell-actions .btn { flex: 1 1 auto; margin: 0 !important; }

  /* ردیف «چیزی پیدا نشد» نباید کارت شود */
  table.as-cards td[colspan] { justify-content: center; }
  table.as-cards td[colspan]::before { content: none; }

  /* ---------- مودال‌ها تمام‌صفحه ---------- */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    display: flex; flex-direction: column;
  }
}

/* ============================================================
   گوشی‌های کوچک — تا ۶۰۰px
   ============================================================ */
@media (max-width: 600px) {
  .topbar-title { font-size: var(--fs-md); }
  .content { padding: var(--sp-3); }
  .home-stats { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .home-greet { font-size: var(--fs-xl); }
  .panel-actions > * { flex: 1 1 100%; }
}


@media print {
  .sidebar, .topbar, .sb-overlay { display:none !important; }
  .app-shell { grid-template-columns: 1fr !important; height:auto !important; }
  .main-wrap, .content { height:auto !important; overflow:visible !important; padding:0 !important; }
}