/* =================================================================
   [UI-R2] طبقة الاستجابة — تُحمَّل بعد أنماط base.html والشاشات.
   متغيرات المشروع نفسها، خصائص منطقية فقط، وضع app (لا حركة جديدة).
   المرجع: Porto ERP polish.css (آخر قسمين).
   ================================================================= */

/* عناصر flex/grid لا تتمدد فوق أبيها */
.app > *, .shell > *, main > *, .row > *, .btn-row > *, .tbl-filter > *, .tbl-tools > *,
.sum > *, .picks > *, .pick dl > *, .stat > * { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }

/* الشبكات: لا عمود أعرض من الحاوية حتى على 320px */
main .sum   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
main .picks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* كروت الأرقام: الرقم يتبع عرض الكارت لا الشاشة */
.stat { container-type: inline-size; }
main .stat b { font-size: clamp(14px, 9.5cqi, 21px); overflow-wrap: anywhere; line-height: 1.25; }
@container (max-width: 150px) {
  main .stat > .ic { display: none; }
}

/* الجداول: التمرير الأفقي داخل حاويتها فقط */
.table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
.card { max-width: 100%; }

/* خانات الكتابة على اللمس: 16px حتى لا يكبّر iOS الصفحة */
@media (pointer: coarse), (max-width: 600px) {
  select, input, textarea, .field { font-size: 16px; }
  input[type=checkbox], input[type=radio] { inline-size: 18px; block-size: 18px; }
}

@media (max-width: 600px) {
  main { padding: 12px; }
  .topbar { padding-block: 10px; }
  .topbar h1 { font-size: 15px; }
  .card { padding: 12px; margin-bottom: 12px; border-radius: var(--r); }
  .card h3 { font-size: 15px; }
  .login-card { margin-top: 6vh; padding: 20px; }

  /* الفلاتر عمودين */
  .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
  .row > div { min-width: 0; }
  .row > div > select, .row > div > input, .row .ac-wrap { inline-size: 100%; }
  .row > button, .row > .btn, .row > div:has(> button:only-child) { grid-column: 1 / -1; }
  .row > button { inline-size: 100%; }

  /* شريط الأزرار/الفترات: سطر واحد يُسحب */
  .tbl-filter, .btn-row.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-inline: contain; padding-block-end: 2px; }
  .tbl-filter::-webkit-scrollbar { display: none; }
  .tbl-filter > * { flex: none; }
  .tbl-filter input[type=text] { min-width: 0; inline-size: 62vw; }
  .tbl-count { margin-inline-start: 0; }

  main .sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .picks { gap: 10px; }
  .table-wrap { max-height: 64vh; }
  th, td { padding: 5px 8px; }
}

/* تحت 600px: حقل قيمته طويلة (تاريخ+ساعة) وخانات الأزرار تاخد السطر كله */
@media (max-width: 600px) {
  .row > div:has(> select[name=run]),
  .row > div:has(> .btn, > button):not(:has(input, select)) { grid-column: 1 / -1; }
  .row > div:has(> .btn, > button):not(:has(input, select)) > * { inline-size: 100%; justify-content: center; }
}