/* Responsive pass (tablet + mobile) for the "ready" widgets: table (rtk-), p-kanban / table-kanban (tkb-), calendar (cal-/cal2-), gantt (gnt-), tasks (tdl-).
   Scoped to the stage attribute so desktop is untouched. Mobile stage = 390px, tablet = 768px. */

/* ---- shared: toolbar wraps instead of pushing controls off the start edge ---- */
.stage[data-dev="mobile"] .rtk-tb { height: auto; }
.stage[data-dev="mobile"] .rtk-tb .toolbar.tb-normal { height: auto; flex-wrap: wrap; row-gap: 8px; }
.stage[data-dev="mobile"] .rtk-tb .rtk-qbox { order: 0; flex: 1 0 100%; width: 100%; min-width: 0; }
.stage[data-dev="mobile"] .rtk-tb .cnt { order: 1; }
.stage[data-dev="mobile"] .rtk-tb .rtk-fb { order: 1; }
.stage[data-dev="mobile"] .rtk-tb .rtk-sp { order: 2; flex: 1 1 0; min-width: 0; }
.stage[data-dev="mobile"] .rtk-tb [data-act="add"] { order: 3; margin-inline: 0 auto; }
.stage[data-dev="mobile"] .rtk-tb .rtk-hprev { order: 3; flex: 0 1 auto; min-width: 0; white-space: normal; height: auto; min-height: 30px; text-align: start; }
.stage[data-dev="mobile"] .rtk-tb [data-act="add"] { flex: 0 0 auto; }
.stage[data-dev="tablet"] .rtk-tb .toolbar.tb-normal { flex-wrap: wrap; height: auto; row-gap: 8px; }
.stage[data-dev="tablet"] .rtk-tb .rtk-qbox { width: min(250px, 100%); }
.stage[data-dev="tablet"] .rtk-tb { height: auto; }

/* dialogs fit the stage width on phones */
.stage[data-dev="mobile"] .rtk .dlg,
.stage[data-dev="mobile"] .tkb-host .dlg,
.stage[data-dev="mobile"] .cal-root .dlg,
.stage[data-dev="mobile"] .gnt .dlg,
.stage[data-dev="mobile"] .tdl .dlg,
.stage[data-dev="mobile"] .tdl-dlg.dlg {
  width: calc(100% - 24px) !important; max-height: calc(100% - 24px); overflow-y: auto;
}
.stage[data-dev="mobile"] .rtk .dlg .foot,
.stage[data-dev="mobile"] .tkb-host .dlg .foot,
.stage[data-dev="mobile"] .cal-root .dlg .foot,
.stage[data-dev="mobile"] .tdl .dlg .foot { flex-wrap: wrap; }

/* ---- table (record-table) ---- */
.stage[data-dev="mobile"] .rtk .w-body { padding: 0 10px 10px; }
.stage[data-dev="mobile"] .rtk-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stage[data-dev="mobile"] .rtk-pg { height: auto; flex-wrap: wrap; row-gap: 6px; padding-block: 4px; }
.stage[data-dev="tablet"] .rtk.has-side .rtk-main { grid-template-columns: minmax(0, 1fr); }

/* ---- table chart side panel (chart-from-table, clubpoints): stacks under the table on phones ---- */
.stage[data-dev="mobile"] .rtk-side { min-width: 0; width: 100%; }
.stage[data-dev="mobile"] .rtk-side .tc-card { min-width: 0; max-width: 100%; }
.stage[data-dev="mobile"] .rtk-side .tc-cb,
.stage[data-dev="mobile"] .rtk-side .tc-plot { min-width: 0; max-width: 100%; }
.stage[data-dev="tablet"] .rtk-side .tc-cb,
.stage[data-dev="tablet"] .rtk-side .tc-plot { min-width: 0; max-width: 100%; }

/* ---- kanban board: columns scroll horizontally inside the card, not the stage ---- */
.stage[data-dev="mobile"] .tkb-host { min-width: 0; }
.stage[data-dev="mobile"] .tkb-host .w-body { overflow: hidden; }

/* ---- calendar ---- */
.stage[data-dev="mobile"] .cal2-h1,
.stage[data-dev="mobile"] .cal2-h2 { gap: 6px; }
.stage[data-dev="mobile"] .cal2-search { flex: 1 1 100%; max-width: none; }
.stage[data-dev="mobile"] .cal2-range { max-width: 100%; }
.stage[data-dev="mobile"] .cal2-tools { justify-content: flex-start; }
.stage[data-dev="tablet"] .cal2-search { flex: 1 1 200px; }
.stage[data-dev="mobile"] .cal-days { min-width: 0; }
.stage[data-dev="mobile"] .cal-dh { min-width: 0; overflow: hidden; }
.stage[data-dev="mobile"] .cal-dh span { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- gantt ---- */
.stage[data-dev="mobile"] .gnt .w-body { overflow-x: hidden; }
.stage[data-dev="mobile"] .gnt-tb1 { flex-wrap: wrap; row-gap: 6px; height: auto; }
.stage[data-dev="mobile"] .gnt-tb2 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.stage[data-dev="mobile"] .gnt-views { justify-self: stretch; max-width: 100%; overflow-x: auto; }
.stage[data-dev="mobile"] .gnt-nav { justify-self: start; }
.stage[data-dev="tablet"] .gnt-tb2 { grid-template-columns: minmax(0, 1fr) auto; }
.stage[data-dev="tablet"] .gnt-views { justify-self: start; }
.stage[data-dev="tablet"] .gnt-nav { justify-self: end; }

/* ---- tasks ---- */
.stage[data-dev="mobile"] .dtl-k { display: flex; align-items: center; gap: 6px; }
.stage[data-dev="mobile"] .dtl-k > svg { flex: none; width: 14px; height: 14px; }
.stage[data-dev="mobile"] .tdl .w-body { flex-direction: column !important; }
.stage[data-dev="mobile"] .tdl .w-body > * { min-width: 0; }
.stage[data-dev="mobile"] .tdl .tdl-dlg.dlg { width: calc(100% - 24px) !important; }