/* =====================================================================
   responsive.css — لایه ریسپانسیو و اصلاح grid های ناقص
   پالت «آبی مدرن» — کاملاً آفلاین
   جایگاه بارگذاری: بعد از components.css در header.php
   ===================================================================== */

/* ---- تکمیل grid-cols ناقص (استفاده‌شده در ویوها) ---- */
.grid-cols-1{ grid-template-columns: repeat(1,minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-cols-4{ grid-template-columns: repeat(4,minmax(0,1fr)); }
.grid-cols-12{ grid-template-columns: repeat(12,minmax(0,1fr)); }

/* ---- col-span های ناقص (lg:) ---- */
@media (min-width: 1024px){
  .lg\:col-span-1{ grid-column: span 1 / span 1; }
  .lg\:col-span-2{ grid-column: span 2 / span 2; }
  .lg\:col-span-3{ grid-column: span 3 / span 3; }
  .lg\:col-span-4{ grid-column: span 4 / span 4; }
  .lg\:col-span-5{ grid-column: span 5 / span 5; }
  .lg\:col-span-6{ grid-column: span 6 / span 6; }
  .lg\:col-span-7{ grid-column: span 7 / span 7; }
  .lg\:col-span-8{ grid-column: span 8 / span 8; }
  .lg\:col-span-9{ grid-column: span 9 / span 9; }
  .lg\:col-span-10{ grid-column: span 10 / span 10; }
  .lg\:col-span-12{ grid-column: span 12 / span 12; }
}
/* ---- col-span های ناقص (md:) ---- */
@media (min-width: 768px){
  .md\:col-span-1{ grid-column: span 1 / span 1; }
  .md\:col-span-2{ grid-column: span 2 / span 2; }
  .md\:col-span-3{ grid-column: span 3 / span 3; }
  .md\:col-span-4{ grid-column: span 4 / span 4; }
  .md\:col-span-5{ grid-column: span 5 / span 5; }
  .md\:col-span-6{ grid-column: span 6 / span 6; }
  .md\:col-span-7{ grid-column: span 7 / span 7; }
  .md\:col-span-12{ grid-column: span 12 / span 12; }
}

/* =====================================================================
   ریسپانسیو کلی — موبایل اول
   ===================================================================== */

/* تبلت: ۶۴۰ تا ۱۰۲۴ */
@media (max-width: 1024px){
  .app-main{ padding: var(--sp-4); }
  .lg\:col-span-5,
  .lg\:col-span-7{ grid-column: span 12 / span 12; }
  .grid-cols-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-cols-12{ grid-template-columns: repeat(6,minmax(0,1fr)); }
  .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table{ font-size: 13px; min-width: 640px; }
}

/* موبایل: زیر ۶۴۰ */
@media (max-width: 640px){
  body{ font-size: 14px; }
  .app-main{ padding: var(--sp-3); padding-top: var(--sp-14); }
  .page-head{ margin-bottom: var(--sp-4); }
  .page-title{ font-size: 18px; }

  /* همه گریدها تک‌ستونه در موبایل */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-12{ grid-template-columns: 1fr; }
  .lg\:col-span-1,.lg\:col-span-2,.lg\:col-span-3,.lg\:col-span-4,
  .lg\:col-span-5,.lg\:col-span-6,.lg\:col-span-7,.lg\:col-span-8,
  .lg\:col-span-9,.lg\:col-span-10,.lg\:col-span-12,
  .md\:col-span-1,.md\:col-span-2,.md\:col-span-3,.md\:col-span-4,
  .md\:col-span-5,.md\:col-span-6,.md\:col-span-7,.md\:col-span-12{
    grid-column: span 1 / span 1;
  }

  /* فرم‌ها */
  .input, .select, select.input, input.input, textarea.input{ font-size: 16px; }
  .card-pad{ padding: var(--sp-4); }

  /* جداول: اسکرول افقی + فونت کوچک */
  .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--sp-3)); }
  .table{ font-size: 12px; min-width: 560px; }
  .table th, .table td{ padding: 8px 10px; }

  /* دکمه‌ها تمام‌عرض در موبایل */
  .btn{ width: 100%; justify-content: center; }
  .flex.gap-3 .btn{ width: auto; }

  /* منوی کارشناسی/ادمین */
  .expert-nav-link{ padding: 12px 14px; font-size: 14px; }

  /* تقویم */
  .cal-wrapper{ padding: 10px; }
  .cal-day{ min-height: 36px; font-size: 13px; }
}

/* موبایل خیلی کوچک: زیر ۳۸۰ */
@media (max-width: 380px){
  .app-main{ padding: var(--sp-2); }
  .text-2xl{ font-size: 20px; }
  .card-pad{ padding: var(--sp-3); }
}

/* بهبود لمسی: حداقل ارتفاع لمس ۴۴px */
@media (hover: none) and (pointer: coarse){
  .btn, .link-action, .sidebar-link, .page-btn, .hr-search-result-item{
    min-height: var(--tap-min);
    display: flex; align-items: center;
  }
  .hr-search-result-item{ min-height: 44px; }
}