/* Responsive pass for the 8 widgets: docs, chart, board, workflow, tree, timetable, biztemplates, capacity.
   Stage attribute data-dev = desktop | tablet | mobile (set by Player.setDevice). */

/* ── shared: header toolbars wrap instead of overflowing; counts never wrap ── */
[data-dev] .dx-tb, [data-dev] .ch-tb, [data-dev] .bd-tb, [data-dev] .wf-tb,
[data-dev] .tr-tb, [data-dev] .tt-tb, [data-dev] .bt-tb { flex-wrap: wrap; row-gap: 6px; }
[data-dev] .dx-tb .cnt, [data-dev] .ch-tb .cnt, [data-dev] .bd-tb .cnt, [data-dev] .wf-tb .cnt,
[data-dev] .tr-tb .cnt, [data-dev] .tt-tb .cnt, [data-dev] .bt-tb .cnt, [data-dev] .cap-tb .cnt { white-space: nowrap; font-size: 12.5px; }
[data-dev] .dx-q, [data-dev] .tr-q, [data-dev] .bt-sbox { min-width: 0; }

/* ── docs: sidebar drawer / title sizes live in docs2.css ── */
[data-dev="mobile"] .dtitle { font-size: 24px !important; }
[data-dev="mobile"] .dscroll { padding: 14px 16px !important; }

/* ── chart ── */
[data-dev="mobile"] .ch-split { flex-direction: column; }
[data-dev="mobile"] .ch-split .drawer { width: 100% !important; }
[data-dev="mobile"] .ch-main { min-height: 260px; }
[data-dev="mobile"] .ch-tb .btn { height: 32px; }

/* ── board ── */
[data-dev="mobile"] .bd-tb .pres, [data-dev="mobile"] .bd-tb .pcount { display: none; }
[data-dev="mobile"] .wb { overflow-x: auto; overflow-y: hidden; }
[data-dev="mobile"] .wb > .frames, [data-dev="mobile"] .wb > .stkl, [data-dev="mobile"] .wb > .curs { min-width: 1000px; }
[data-dev="mobile"] .wbtools { bottom: 8px; }

/* presence cursors: the wrapper is as wide as its name tag so the tag is not overflowing */
.pcur { width: 150px; height: 40px; }

/* ── workflow ── */
[data-dev="mobile"] .wf { overflow: auto; }
[data-dev="mobile"] .wf .nlayer, [data-dev="mobile"] .wf .lanes, [data-dev="mobile"] .wf svg.edges { min-width: 984px; }
[data-dev="mobile"] .wf .inspector { width: 100% !important; max-width: 100%; }
[data-dev="mobile"] .wf .palette { flex-wrap: wrap; max-width: calc(100% - 16px); }

/* ── tree ── */
[data-dev="mobile"] .t-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(220px, 1fr) auto; }
[data-dev="mobile"] .t-detail { min-height: 260px; }
[data-dev="mobile"] .t-detail h3 { font-size: 22px; }
[data-dev="mobile"] .t-acts .btn { flex: 1 1 auto; }
[data-dev="mobile"] .t-acts .b-del { margin-inline-start: 0 !important; }
[data-dev="mobile"] .t-tree { min-height: 240px; }
[data-dev="tablet"] .t-split { grid-template-columns: 300px minmax(0, 1fr); }
[data-dev="mobile"] .tr-q { width: 100% !important; flex: 1 1 100%; }

/* ── timetable ── */
[data-dev="mobile"] .tt-split { flex-direction: column; }
[data-dev="mobile"] .tt-split > .card { width: 100% !important; }
[data-dev="mobile"] .tt-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
[data-dev="mobile"] .tt-row .row { flex-wrap: wrap; }
[data-dev="mobile"] .tt-tz { display: none; }

/* ── biztemplates ── */
[data-dev="mobile"] .bt-cols { flex-direction: column; }
[data-dev="mobile"] .bt-side { width: 100% !important; max-height: 200px; border-inline-end: 0; border-bottom: 1px solid var(--border); }
[data-dev="mobile"] .bt-sbox { width: 100%; flex: 1 1 100%; }
[data-dev="mobile"] .bt-main { min-height: 420px; }
[data-dev="mobile"] .bt-title { font-size: 19px; white-space: normal; }
[data-dev="mobile"] .bt-head { padding: 8px 12px; }
[data-dev="mobile"] .bt-body { padding: 10px 12px; overflow: auto; }
[data-dev] .bt-frame .bt-tb { padding: 8px 10px; }
[data-dev="mobile"] .bt-cv { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; height: auto !important; }
[data-dev="mobile"] .bt-blk { grid-column: auto !important; grid-row: auto !important; min-height: 110px; }
[data-dev="tablet"] .bt-cv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
[data-dev="mobile"] .bt-tw { overflow-x: auto; }
[data-dev="mobile"] .bt-fin, [data-dev="mobile"] .bt-calcw { overflow-x: auto; }
[data-dev="mobile"] .bt-calcw { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .bt-out { min-width: 0; }

/* ── capacity ── */
[data-dev="mobile"] .cap-tb { gap: 6px; }
[data-dev="mobile"] .cap-gr { display: flex; flex-wrap: wrap; gap: 4px; }
[data-dev="mobile"] .cap-leg { display: none; }
[data-dev="mobile"] .cap-wrap { overflow: auto; }
[data-dev="mobile"] .cap-rh { width: 130px; }
[data-dev="mobile"] .cap-who small { display: none; }
[data-dev="mobile"] .cap-sum { font-size: 12px; }

/* overflow pass: toolbars, rows and chips wrap or scroll inside their card on phones */
[data-dev="mobile"] .dhead { flex-wrap: wrap; padding: 8px 14px !important; row-gap: 6px; }
[data-dev="mobile"] .dtool { overflow-x: auto; }
[data-dev="mobile"] .dscroll { min-width: 0; }
[data-dev="mobile"] .bd-tb > *, [data-dev="mobile"] .wf-tb > *, [data-dev="mobile"] .tr-tb > * { max-width: 100%; }
[data-dev="mobile"] .bd-tb .seg, [data-dev="mobile"] .wf-tb .seg { max-width: 100%; overflow-x: auto; }
[data-dev="mobile"] .wf-tb .btn, [data-dev="mobile"] .tr-tb .btn { white-space: nowrap; }
[data-dev="mobile"] .tt-row > * { min-width: 0; max-width: 100%; }
[data-dev="mobile"] .tt-row .slot { max-width: 100%; }
[data-dev="mobile"] .tt-row .row { min-width: 0; }
[data-dev="mobile"] .trows { overflow-x: auto; }
[data-dev="mobile"] .tr-tb .res { white-space: nowrap; }
[data-dev="mobile"] .crumbs { min-width: 0; overflow-wrap: anywhere; }
[data-dev="mobile"] .bt-head, [data-dev="mobile"] .bt-crumb, [data-dev="mobile"] .bt-trow { min-width: 0; max-width: 100%; flex-wrap: wrap; }
[data-dev="mobile"] .bt-crumb > * { min-width: 0; }
[data-dev="mobile"] .bt-main { min-width: 0; max-width: 100%; overflow: hidden; }
/* gateway labels are kept inside the diamond (full name in the tooltip) */
.wf .nd.gw > span { display: block; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; }

/* dialogs and popovers fit the stage width on phones */
[data-dev="mobile"] .dlg { width: calc(100% - 24px); }
[data-dev="mobile"] .pop { max-width: calc(100% - 16px); }