/* Responsive rules for the BRIEF3 widgets: timer, timemgmt, finance, automation, pdfexport, social, customers.
   The stage carries data-dev="tablet" (768px) or data-dev="mobile" (390px); desktop (1040px) keeps the base styles. */

/* ── timer ── */
.ti-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ti-hd .cnt { font-size: 12.5px; color: var(--muted-foreground); }
.ti-sp { flex: 1; }
.ti-k { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-dev="tablet"] .ti-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-dev="mobile"] .ti-grid { display: flex; flex-direction: column; gap: 10px; }
[data-dev="mobile"] .ti-grid > * { flex: none; }
.ti-card > * { flex-shrink: 0; }
[data-dev="mobile"] .ti-card { min-height: 0; }
[data-dev="mobile"] .ti-face { width: 132px; height: 132px; }
[data-dev="mobile"] .ti-ctl { flex-wrap: wrap; justify-content: center; }

/* ── timemgmt ── */
.tm-top { flex-wrap: wrap; }
.tm-goal { max-width: 100%; }
.tm-dh { flex-wrap: wrap; gap: 4px 8px; }
.tm-date { font-size: 11.5px; }
.tm-sb { overflow-x: auto; }
[data-dev="tablet"] .tm-cols { grid-template-columns: minmax(0, 1fr) 320px; }
[data-dev="tablet"] .tm-goal { width: 200px; }
[data-dev="mobile"] .tm-top { flex-direction: column; align-items: stretch; }
[data-dev="mobile"] .tm-goal { width: 100%; }
[data-dev="mobile"] .tm-cols { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .tm-side { min-height: 280px; }
[data-dev="mobile"] .tm-lanes { width: calc(100% - 96px); }
[data-dev="mobile"] .tm-ts { font-size: 11px; }
[data-dev="mobile"] .tm-ts th:first-child { max-width: 92px; }
[data-dev="mobile"] .tm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-dev="mobile"] .tm-sf { flex-wrap: wrap; gap: 6px; }

/* ── finance ── */
.fn-th { flex-wrap: wrap; gap: 6px; }
.fn-cnt { font-size: 12px; }
.fn-q { width: 180px; height: 32px; min-height: 32px; }
.fn-q input { all: unset; flex: 1; min-width: 0; font: inherit; }
.fn-ff { display: flex; align-items: center; gap: 6px; padding-top: 6px; }
[data-dev="tablet"] .fn-top { grid-template-columns: minmax(0, 1fr); }
[data-dev="tablet"] .fn-cols { grid-template-columns: minmax(0, 1fr) 280px; }
[data-dev="mobile"] .fn-top { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .fn-accs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
[data-dev="mobile"] .fn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-dev="mobile"] .fn-kpis div { min-width: 0; }
[data-dev="mobile"] .fn-cols { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .fn-q { width: 100%; order: 9; flex: 1 1 100%; }
[data-dev="mobile"] .fn-fr { flex-wrap: wrap; }
[data-dev="mobile"] .fn-fl { flex: 1 1 42%; min-width: 0; }
[data-dev="mobile"] .fn-fl .input { width: 100%; }
[data-dev="mobile"] .fn-rt b, [data-dev="mobile"] .fn-rt small { overflow-wrap: anywhere; }

/* ── automation ── */
[data-dev="tablet"] .au-side { width: 200px; }
[data-dev="mobile"] .au .w-body { flex-direction: column !important; }
[data-dev="mobile"] .au-side { width: 100%; border-inline-end: 0; border-bottom: 1px solid var(--border); }
[data-dev="mobile"] .au-list { max-height: 210px; overflow-y: auto; }
[data-dev="mobile"] .au-main { min-height: 0; }
[data-dev="mobile"] .au-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
[data-dev="mobile"] .au-step::after { display: none; }
[data-dev="mobile"] .au-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
[data-dev="mobile"] .au-hd { flex-wrap: wrap; }
[data-dev="mobile"] .au-runs { overflow-x: auto; }
.au-sh { display: flex; align-items: center; gap: 8px; padding: 10px; flex-wrap: wrap; }
.au-sh .cnt { font-size: 12px; }
.au-sp { flex: 1; }

/* ── pdfexport ── */
[data-dev="tablet"] .pdf-set { width: 200px; }
[data-dev="mobile"] .pdf .w-body { flex-direction: column !important; }
.pdf-view { overflow: auto; }
.pdf-tb { flex-wrap: wrap; gap: 6px; }
.pg-hd > div { min-width: 0; }
.pg-hd b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-dev="mobile"] .pdf-set { width: 100%; max-height: 240px; border-inline-end: 0; border-bottom: 1px solid var(--border); }
[data-dev="mobile"] .pdf-main { min-height: 0; }
[data-dev="mobile"] .pdf-tb { flex-wrap: wrap; gap: 6px; }
[data-dev="mobile"] .pdf-view { min-height: 380px; }
[data-dev="mobile"] .pdf-doc { width: 100%; order: 9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── social (channels, inbox, composer, queue) ── */
[data-dev="tablet"] .sx-rail { width: 170px; }
[data-dev="mobile"] .sx-body { flex-direction: column !important; }
[data-dev="mobile"] .sx-rail { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 6px; }
[data-dev="mobile"] .sx-rail .sx-con { flex: none; min-width: 150px; }
[data-dev="mobile"] .sx-rail .sx-rh, [data-dev="mobile"] .sx-rail .sx-addc { flex: none; }
[data-dev="mobile"] .sx-main { min-width: 0; }
[data-dev="mobile"] .sx-tabs { overflow-x: auto; flex-wrap: nowrap; }
[data-dev="mobile"] .sx-ib { flex-direction: column; }
[data-dev="mobile"] .sx-qbar { flex-wrap: wrap; gap: 6px; }
[data-dev="mobile"] .sx-ft { flex-wrap: wrap; gap: 6px; }

/* ── customers (club overview, members, RFM, retention, feedback) ── */
.cx-tabsrow { overflow-x: auto; }
.cx-tabsrow .seg { max-width: 100%; }
[data-dev="tablet"] .cx-r2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-dev="mobile"] .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-dev="mobile"] .cx-r2, [data-dev="mobile"] .cx-r3 { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .cx-tbl { overflow-x: auto; }
[data-dev="mobile"] .cx-rows, [data-dev="mobile"] .cx-thd { min-width: 720px; }
[data-dev="mobile"] .cx-rfm { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .cx-dr { width: 100% !important; }
[data-dev="mobile"] .cx-ret { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .cx-ct { display: block; overflow-x: auto; }

/* social overview cards: text ellipsis instead of spilling out of the card */
.sx-cn, .sx-cdt { min-width: 0; overflow: hidden; }
.sx-cn b, .sx-cn small, .sx-cdt b, .sx-cdt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-dev="mobile"] .sx-cards { grid-template-columns: minmax(0, 1fr); }
[data-dev="mobile"] .sx-card { min-width: 0; }
.sx-kp > div { min-width: 0; }
[data-dev="mobile"] .sx-kp { grid-template-columns: repeat(2, minmax(0, 1fr)); }