/* ========== ریسپانسیو سراسری Etesam Academy ========== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* جداول افقی اسکرول روی موبایل */
.table-responsive,
table.data-table,
#users-table,
.admin-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* تب‌های پنل: اسکرول افقی روی موبایل */
.panel-tabs,
#student-tabs,
#teacher-tabs,
#admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.4rem;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}
.panel-tabs .panel-tab,
#student-tabs .panel-tab,
#teacher-tabs .panel-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.45rem 0.85rem;
}

/* کارت‌ها و بخش‌ها */
@media (max-width: 640px) {
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  main, #main-content, #dash-root {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* فاصله کمتر در موبایل */
  section.bg-white,
  .bg-white.rounded-2xl {
    padding: 1rem !important;
    border-radius: 1rem;
  }

  /* فرم‌ها تمام‌عرض */
  input, select, textarea, button.w-full {
    font-size: 16px; /* جلوگیری از زوم iOS */
  }

  /* گریدهای ۲ و ۳ ستونه → یک ستون */
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.sm\:grid-cols-2,
  .grid.sm\:grid-cols-3,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* استثنا: آمار کوچک می‌تواند ۲ ستون بماند */
  #stats.grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  /* هیرو صفحه اصلی */
  .hero-grid,
  section .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* لوگو هیرو */
  .rotate-image {
    max-width: min(280px, 80vw) !important;
    margin-inline: auto;
  }

  /* دکمه‌های کنار هم */
  .flex.flex-wrap.gap-3,
  .flex.gap-2.flex-wrap {
    justify-content: center;
  }

  /* فوتر */
  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* مودال‌ها */
  .fixed.inset-0 .bg-white,
  [id$="-modal"] > div {
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0.5rem;
  }

  /* لیست فروشگاه / استادان */
  .teachers-grid,
  .store-grid,
  .courses-grid {
    grid-template-columns: 1fr !important;
  }
}

/* تبلت */
@media (min-width: 641px) and (max-width: 1023px) {
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ادمین: بخش‌ها پشت سر هم روی موبایل */
@media (max-width: 768px) {
  #admin-root .grid.lg\:grid-cols-2,
  .admin-layout .grid {
    grid-template-columns: 1fr !important;
  }

  /* جلوگیری از بیرون‌زدگی متن‌های طولانی */
  [dir="ltr"],
  .font-mono,
  code {
    word-break: break-all;
  }

  /* دکمه‌های اکشن کوچک‌تر */
  button.text-xs,
  a.text-xs {
    padding-inline: 0.5rem;
  }
}

/* هدر: فاصله لوگو */
.logo-header {
  height: 2.25rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}
@media (min-width: 768px) {
  .logo-header {
    height: 2.75rem;
    max-width: 11rem;
  }
}

/* اسکرول نرم تب‌ها */
.panel-tabs::-webkit-scrollbar {
  height: 4px;
}
.panel-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* فاصله امن پایین صفحه روی موبایل (نوار مرورگر) */
@supports (padding: max(0px)) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* متن‌های خیلی بلند در کارت‌ها */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}