/* ===== Base / Layout ===== */
:root{
  --bg:#f7f8fa;
  --ink:#111827;
  --muted:#6b7280;
  --ring:#e5e7eb;
  --card:#ffffff;
}
html, body { height: 100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  font-family: "Vazirmatn","IRANSans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* کانتینر پهنِ دسکتاپ */
.container-xl { max-width: 1200px; }

/* ===== Navbar tweaks ===== */
.navbar .nav-link{ opacity:.85; }
.navbar .nav-link.active,
.navbar .nav-link:hover{ opacity:1; }

/* ===== Cards & links ===== */
.card{ border-radius:14px; border-color:#eef0f2; }
.card-link{ text-decoration:none; border:1px solid rgba(0,0,0,.08); transition:transform .08s ease; }
.card-link:hover{ transform:translateY(-2px); box-shadow:0 .5rem 1rem rgba(0,0,0,.08); }

/* ===== Tables (mobile-first) ===== */
/* اگر کل صفحه RTL است و فقط جدول‌ها باید LTR باشند، این را نگه‌دار */
table { direction:ltr; }

/* رَپِر برای اسکرول افقی در موبایل */
.table-scroll{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:10px;
}
@media (max-width: 576px){
  .table-scroll table{ min-width: 720px; } /* برای اسکرول افقی روی موبایل */
}

.table{ --bs-table-bg:transparent; }
.table th{ font-weight:600; color:var(--ink); }
.table-sm td, .table-sm th{ padding:.5rem .6rem; }
.table-hover tbody tr:hover{ background:#fafafa; }

/* سربرگِ چسبان هنگام اسکرول */
.sticky-header thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  box-shadow: 0 1px 0 #eee;
}

/* Utility‌ های سلول */
.cell-nw{ white-space:nowrap; }                  /* بدون سطرشکنی */
.cell-vin{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.cell-plate{ letter-spacing:.5px; font-weight:600; }
.cell-trunc{ max-width: 220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* فرم‌های داخل جدول جمع‌وجور */
.table .form-control,
.table .form-select{
  height:2.1rem;
  padding:.25rem .5rem;
  font-size:.875rem;
}

/* ===== Your custom table box (اگر استفاده می‌کنی) ===== */
.custom-table{
  width:100%;
  max-width:1000px;
  margin:auto;
  border:1px solid #dee2e6;
  border-radius:10px;
}
.text-monospace{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* ===== Footer stays at bottom ===== */
footer{ margin-top:auto; background:#fff; border-top:1px solid var(--ring); }
@media (min-width: 1400px) {
  .container-xxl { max-width: 2000px; } /* میشه 1600، 1700، 1800 … */
}
/* فوتر چسبیده به پایین و تمام عرض */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* خود فوتر */
.site-footer{
  margin-top: auto;                 /* چسبیدن به انتهای صفحه */
  background: #fff;                 /* رنگ پس‌زمینه */
  border-top: 1px solid #e5e7eb;    /* خط بالای فوتر */
  width: 100%;                      /* تمام عرض */
}

/* اگر می‌خواهی محتوای داخل فوتر هم تمام عرض باشد، همین کافیست.
   اگر می‌خواهی محتوای داخل محدود شود (مثلاً 1400px)، این را فعال کن: */
/*
.site-footer .container-fluid { max-width: 1400px; margin-inline: auto; }
*/
/* اسکرول عمودی برای جدول‌ها + هدر چسبان */
.table-wrap{
  /* ارتفاع تقریبی هدر و هر ردیف (با bootstrap) */
  --head-h: 48px;
  --row-h: 48px;
  /* ۵ ردیف + هدر */
  max-height: calc(var(--head-h) + 5 * var(--row-h));
  overflow-y: auto;   /* اسکرول عمودی */
  overflow-x: auto;   /* اسکرول افقی (از bootstrap) */
}

/* اگر خواستی تعداد ردیف‌ها را تغییر بدهی */
.table-wrap.rows-4 { max-height: calc(var(--head-h) + 4 * var(--row-h)); }
.table-wrap.rows-6 { max-height: calc(var(--head-h) + 6 * var(--row-h)); }
.table-wrap.rows-8 { max-height: calc(var(--head-h) + 8 * var(--row-h)); }

/* هدر چسبان */
.table-wrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg); /* پس‌زمینه تا روی ردیف‌ها نیاید */
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* اگر روی موبایل ردیف‌ها بلندتر شد، کمی ارتفاع‌ها را تنظیم کن */
@media (max-width: 576px){
  .table-wrap{ --head-h: 44px; --row-h: 52px; }
}


