/* admin-responsive.css — fluid-width + viewport-fit pass (owned by this agent only; do not add JS/markup here).
   Loaded after admin.css, so every rule here only tightens/extends the existing responsive behaviour already in
   admin.css (grid auto-fit, .tbl-wrap overflow-x, the <=1180px icon-rail sidebar, the <=640/820/900px stacks).
   Goals: use large-monitor width instead of wasting it, make tables self-contained with a sticky header and
   bounded internal scroll, keep laptop widths (1366/1536) comfortable, and tighten mobile touch targets. */

/* ---------------------------------------------------------------------------------------------------------------
   1) Large / ultra-wide monitors: stop the fixed 1500px content cap from leaving a dead band of empty page.
      The KPI/season/report grids already use `repeat(N,1fr)` or `auto-fit`, so letting the container grow simply
      makes the existing cards/tables wider and more readable — not a manual re-size of any single element. */
@media (min-width:1700px){
  .content{max-width:1760px}
}
@media (min-width:2100px){
  .content{max-width:2200px}
}
@media (min-width:2500px){
  .content{max-width:2600px}
  /* at 2560px+ five fixed KPI columns start looking sparse; let the dashboard/report KPI rows add columns instead
     of just stretching each card unnecessarily wide */
  .kpis.g5{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* ---------------------------------------------------------------------------------------------------------------
   2) Tables: sticky header + bounded height so a long list (orders, customers, payments, activity…) scrolls
      inside its own card instead of forcing the whole page to scroll past a fixed filter bar / KPI row.
      Desktop & laptop only — on narrow/touch widths a single page scroll remains the simplest, safest behaviour. */
@media (min-width:900px){
  .tbl-wrap{max-height:min(640px,70vh);overflow-y:auto}
  .tbl-wrap table thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line)}
}

/* ---------------------------------------------------------------------------------------------------------------
   3) Laptop (1366/1536) comfort pass: wide tables with many columns + full-text action buttons (e.g. the
      "الموديلات" / products table) were the one case that still needed an internal horizontal scrollbar at
      1366px. Tightening padding/buttons here shrinks that overflow a lot without hiding any column or data. */
@media (max-width:1480px) and (min-width:901px){
  .tbl-wrap th,.tbl-wrap td{padding:9px 10px;font-size:13px}
  .tbl-wrap .btn.sm{height:27px;padding:0 8px;font-size:11.5px;gap:4px}
  .tbl-wrap .thumb{width:36px;height:46px}
}

/* ---------------------------------------------------------------------------------------------------------------
   4) Mobile (<=480px): the icon-only sidebar rail from admin.css's 1180px breakpoint is still a fixed 76px —
      shrink it further on true phone widths so it wastes less of a 390px screen, and make sure every tap target
      (buttons, icon buttons, nav icons) clears the 40px minimum. A real slide-in drawer would need a hamburger
      button + JS toggle (see report — out of scope for a CSS-only pass), so this is the best fit within CSS. */
@media (max-width:480px){
  .side{width:60px}
  #nav a{padding:10px 6px}
  .btn{min-height:40px}
  .btn.sm{min-height:36px}
  .icon-btn{width:40px;height:40px}
  .av{width:36px;height:36px}
}

/* ---------------------------------------------------------------------------------------------------------------
   5) Small polish: KPI / seasons / report grids already use responsive grids, but at the exact laptop widths
      (1280-1480) a 5-up KPI row can get visually tight next to the 256px sidebar; drop to 3-up a little earlier
      than admin.css's existing 1180px step so cards keep comfortable padding instead of wrapping their numbers. */
@media (max-width:1320px) and (min-width:1181px){
  .kpis.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}