/* Panel widgets (ids p-record-table, p-metric-chart, p-calendar, p-search-box, p-related-record,
   p-file-attachment, p-persian-text, p-combobox): responsive layout at the three stage sizes.
   Stage attribute: data-dev="desktop" | "tablet" | "mobile" (set by Player.setDevice).
   Desktop keeps the original side-by-side layout; tablet narrows side panels; mobile stacks everything,
   keeps tables scrolling inside their card and lets the widget body scroll instead of clipping. */

/* ── shared: no text overflow in table cells ── */
.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-ell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tbl { overflow: auto; min-width: 0; max-width: 100%; }
.pv-main, .pv-side, .pm-main, .pm-side, .pv-cal { min-width: 0; }
.pm-cx { min-width: 0; }

/* ── record table (p-record-table): toolbar uses the shared rtk-* look ── */
.rtk-tb .toolbar > .btn { flex: none; }
.rtk-tb .cnt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── dialogs (all panel widgets): fit the widget width, footer wraps before it overflows ── */
.w .dlg .foot { flex-wrap: wrap; }
.w .dlg .foot > .btn { flex: none; }

/* ─────────── tablet (768 × 900) ─────────── */
[data-dev="tablet"] .pm-side { width: 220px !important; }
[data-dev="tablet"] .pv-side { width: 260px !important; }
[data-dev="tablet"] .pv-cal { width: 340px !important; }
[data-dev="tablet"] .pm-cx { min-height: 300px; }
/* table bulk bar: حذف · پیش‌نمایش و خروجی · خروجی · ارسال · تغییر وضعیت must stay on one row at 768px */
[data-dev="tablet"] .tb-bulk { gap: 4px; }
[data-dev="tablet"] .tb-bulk .btn.sm { padding-inline: 8px; gap: 4px; }
[data-dev="tablet"] .rtk-tb .tb-bulk { height: auto !important; flex-wrap: wrap; row-gap: 6px; padding-block: 4px; }

/* ─────────── mobile (390 × 780) ─────────── */
[data-dev="mobile"] .pv-split,
[data-dev="mobile"] .pm-split { flex-direction: column !important; flex: none !important; align-items: stretch !important; }
[data-dev="mobile"] .pv-main,
[data-dev="mobile"] .pv-side,
[data-dev="mobile"] .pm-main,
[data-dev="mobile"] .pm-side { width: 100% !important; flex: none !important; }
[data-dev="mobile"] .pv-cal { width: 100% !important; max-width: 384px; margin: 0 auto; flex: none !important; }
[data-dev="mobile"] .pm-cx { height: 260px !important; flex: none !important; }
[data-dev="mobile"] .pm-side pre.codebox { font-size: 10.5px !important; }
[data-dev="mobile"] .w-body:has(.pv-split),
[data-dev="mobile"] .w-body:has(.pm-split) { overflow-y: auto; }
[data-dev="mobile"] [data-res] { min-height: 240px; flex: none !important; }

/* record table toolbar: search full width, then count · spacer · «افزودن» on the left */
[data-dev="mobile"] .rtk-tb,
[data-dev="mobile"] .rtk-tb .toolbar { height: auto !important; }
[data-dev="mobile"] .rtk-tb .toolbar { flex-wrap: wrap; row-gap: 8px; }
[data-dev="mobile"] .rtk-q { width: 100% !important; flex: 1 1 100%; }
[data-dev="mobile"] .rtk-pg { height: auto; min-height: 28px; flex-wrap: wrap; gap: 4px; }

/* dialogs and popovers fit the 390px stage */
[data-dev="mobile"] .w .dlg { width: calc(100% - 24px) !important; max-height: calc(100% - 24px); overflow-y: auto; }
[data-dev="mobile"] .w .pop { max-width: calc(100% - 24px); }

/* tables scroll inside their card, never the page */
[data-dev="mobile"] .pv-tbl table { min-width: 460px; }
[data-dev="mobile"] .pt-ell { max-width: 150px; }