/* ==================================================================
   responsive.css — تنها منبع نقاط شکست پنل گلارین
   ------------------------------------------------------------------
   قاعده: هیچ صفحه‌ای media query تازه تعریف نمی‌کند مگر برای چیزی که
   واقعاً مخصوص خودش است. تا امروز هر صفحهٔ تازه عدد تازه‌ای اختراع
   می‌کرد (۵۶۰، ۵۸۰، ۶۴۰، ۷۶۰، ۱۱۰۰) و نتیجه‌اش این بود که رفتار موبایل
   هیچ‌جا قابل پیش‌بینی نبود.

   سه پله:
     ≤ ۴۸۰px   موبایل — تک‌ستونه، فشرده
     ≤ ۷۶۸px   موبایل بزرگ و تبلت عمودی — جدول‌ها کارت می‌شوند
     ≥ ۱۱۰۰px  منو ثابت می‌شود (همان عددی که nav.js از قبل دارد)

   این فایل بعد از shared.css بارگذاری می‌شود. اما <style> داخل صفحه‌ها
   بعد از هر دو می‌آید، پس هرجا لازم شد قواعد را با ویژگی (specificity)
   بالاتر می‌نویسیم — نه با !important.

   دسکتاپ نباید هیچ تغییری کند: تقریباً همهٔ قواعد این فایل داخل
   media query هستند.
   ================================================================== */

:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1100px;
  --touch: 44px;   /* حداقل هدف لمسی */
}

/* ---------------------------------------------------------------
   محافظ سرریز افقی
   یک عنصر پهن در هر صفحه‌ای کل بدنه را قابل کشیدن می‌کند و کاربر فکر
   می‌کند صفحه خراب است. این دو قاعده جلوی آن را می‌گیرند بی‌آنکه
   اسکرول عمودی از دست برود.
   --------------------------------------------------------------- */
html { overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

/* بوم نمودار عمداً اینجا نیست.
   Chart.js عرض و ارتفاع بوم را خودش با inline style مدیریت می‌کند؛
   هر قاعدهٔ max-width/height از بیرون، نسبت را به‌هم می‌زند و نمودار
   روی متن اطراف می‌افتد. ظرف .chart-wrap اندازه را تعیین می‌کند. */

/* ---------------------------------------------------------------
   فضای امن دستگاه
   نوار خانهٔ آیفون روی هر چیز چسبیده به پایین می‌افتد. تا امروز
   env(safe-area-inset-*) در کل پروژه صفر بار استفاده شده بود.
   --------------------------------------------------------------- */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

.submit-bar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

/* ==================================================================
   ≤ ۷۶۸px — موبایل بزرگ و تبلت عمودی
   ================================================================== */
@media (max-width: 768px) {

  /* پدینگ بدنه: ۲۰px در هر طرف روی صفحهٔ ۳۲۰ یعنی ۱۲٪ عرض هدر می‌رود */
  body { padding-inline: 14px; }

  /* --- اهداف لمسی -------------------------------------------------
     انگشت حدود ۴۴px عرض دارد. دکمه‌های ۲۴ پیکسلی جدول یعنی کاربر
     ردیف اشتباه را باز می‌کند. --------------------------------- */
  .link-btn {
    min-height: var(--touch); min-width: var(--touch);
    padding: 10px 12px; font-size: 13px;
  }
  .pager button { min-height: var(--touch); padding: 11px 16px; }
  .pager select { min-height: var(--touch); }
  .group-chip .del, .group-chip .edit { width: 40px; height: 40px; }
  .btn { min-height: var(--touch); }

  /* روی iOS، فونت زیر ۱۶px باعث زوم خودکار هنگام فوکوس می‌شود و بعد
     صفحه دیگر به جای اولش برنمی‌گردد. */
  input, select, textarea {
    font-size: 16px; min-height: var(--touch);
  }
  .hint { font-size: 12.5px; }

  /* --- نوار فیلتر ------------------------------------------------- */
  .toolbar { gap: var(--sp-2); }
  .toolbar > div { min-width: 130px; }

  /* --- سربرگ ------------------------------------------------------ */
  header { margin-bottom: var(--sp-4); }
  header h1 { font-size: 16px; }

  .card { padding: var(--sp-3); border-radius: var(--r-md); }

  /* --- پاپ‌آپ ------------------------------------------------------
     ظرف .modal مشترک درست است، ولی صفحه‌ها عرض خودشان را می‌نویسند
     (۷۲۰ تا ۹۴۰). با ویژگی بالاتر پس می‌گیریم.
     ۸۸vh هم روی موبایل با نوار آدرس متغیر بریدگی می‌دهد → dvh. --- */
  .modal-backdrop { padding: var(--sp-3); align-items: flex-end; }
  .modal-backdrop .modal {
    max-width: 100%; width: 100%;
    max-height: 90dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  }
  .modal-backdrop .modal-actions { flex-wrap: wrap; }
  .modal-backdrop .modal-actions .btn { flex: 1 1 140px; }
}

/* ==================================================================
   ≤ ۴۸۰px — موبایل
   ================================================================== */
@media (max-width: 480px) {
  body { padding-inline: 10px; }

  /* هر گرید چندستونه که با کلاس کمکی علامت خورده، تک‌ستونه می‌شود.
     گریدهای انتخاب تاریخ (سه select کوچک) عمداً مستثنا هستند —
     آن‌ها در موبایل هم سه‌ستونه درست‌اند. */
  .stack-sm { grid-template-columns: 1fr !important; }

  .actions { flex-direction: column-reverse; }
  .actions .btn { width: 100%; }

  header h1 { font-size: 15px; }
  .summary-line { gap: var(--sp-2); font-size: 12px; }

  .pager { gap: var(--sp-2); }
  .pager .spacer { display: none; }
}

/* ==================================================================
   کمکی‌های مشترک — بیرون از media query تعریف می‌شوند تا در هر
   جایی قابل استفاده باشند.
   ================================================================== */

/* اسکرول افقی امن برای چیزی که واقعاً باید پهن بماند */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* هدف لمسی تضمین‌شده، هر جا لازم شد */
.touch { min-height: var(--touch); min-width: var(--touch); }

/* وقتی منوی کشویی باز است، پشت‌زمینه نباید اسکرول شود.
   nav.js این کلاس را روی body می‌گذارد. */
html.gl-nav-open, body.gl-nav-open { overflow: hidden; }

/* ==================================================================
   جدول → کارت (زیر ۷۶۸px)
   ------------------------------------------------------------------
   قاعدهٔ حاکم: هیچ ستونی حذف نمی‌شود. جدول ۱۹ ستونیِ بستانکاران در
   موبایل هم هر ۱۹ مقدار را نشان می‌دهد — فقط به‌جای کشیدن افقی، هر
   ردیف یک کارت می‌شود و هر مقدار برچسب ستون خودش را می‌گیرد.

   برچسب‌ها را glTableCards() در common.js از thead می‌خواند.
   ================================================================== */
@media (max-width: 768px) {

  table.gl-cards { display: block; width: 100%; border-collapse: separate; }
  table.gl-cards thead { display: none; }   /* سرستون‌ها داخل هر سلول تکرار می‌شوند */
  table.gl-cards tbody { display: block; }

  table.gl-cards tbody tr {
    display: block;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  table.gl-cards tbody tr:hover { background: var(--surface-1); }
  table.gl-cards tbody tr.selected {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
  }

  table.gl-cards tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
    white-space: normal;          /* ← nowrap سراسری اینجا برداشته می‌شود */
    text-align: start;
  }
  table.gl-cards tbody td:last-child { border-bottom: none; }

  table.gl-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px; font-weight: 700; color: var(--ink-soft);
  }
  /* سلول بدون برچسب (ستون عملیات) نباید فضای خالی بگیرد */
  table.gl-cards tbody td[data-label=""]::before { display: none; }

  /* اولویت ۱ = تیتر کارت: بدون برچسب، درشت، بالای کارت */
  table.gl-cards tbody td[data-prio="1"] {
    font-size: 14.5px; font-weight: 800;
    border-bottom: 1px solid var(--line);
    padding-bottom: 9px; margin-bottom: 3px;
  }
  table.gl-cards tbody td[data-prio="1"]::before { display: none; }

  /* اولویت ۳ = کم‌اهمیت: کوچک‌تر و کم‌رنگ‌تر، ولی حاضر */
  table.gl-cards tbody td[data-prio="3"] { font-size: 12px; color: var(--ink-soft); }

  /* ردیف «داده‌ای نیست» */
  table.gl-cards tbody tr.gl-card-full td { display: block; text-align: center; }
  table.gl-cards tbody tr.gl-card-full td::before { display: none; }

  /* ظرف اسکرول دیگر لازم نیست کاری کند */
  .table-wrap { overflow-x: visible; }

  /* دکمه‌های عملیات داخل کارت */
  table.gl-cards tbody td .link-btn { padding: 8px 10px; }
}