/* ============================================================================= responsive.css — enterprise responsive layer for the Phantasm card-based UI ----------------------------------------------------------------------------- Loaded AFTER styles.css + gradient.css so it refines the existing system (it reuses the same --tokens; it never redefines colours/themes). Design goals • One UI that never breaks: mobile → tablet → laptop → desktop → ultra-wide → smart-TV. • Cards auto-resize, wrap, and stay equally spaced — dynamic data never distorts the grid. • Wide content (tables, code) SCROLLS inside its card instead of pushing the whole page wider (which is what made grids mis-compute columns and text shatter letter-by-letter). • Long words/URLs/codes wrap gracefully; headings never break per-letter. Breakpoints (mobile-first; min-width scales UP) base ≤640 phones · md ≥769 tablets · lg ≥1025 laptops xl ≥1440 desktops · 2xl ≥1920 ultra-wide · tv ≥2560 4K / smart-TV ========================================================================== */ /* ---- 1. Cross-browser foundation ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } /* Graceful word wrapping. `break-word` (NOT `anywhere`) is deliberate: it breaks an over-long word only as a last resort and KEEPS the longest word as the min-content size, so flex/grid cards never collapse to a sliver and shatter text into one-letter-per-line. Normal text still breaks at spaces. */ body, p, span, div, td, th, li, a, label, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: normal; } /* ---- 2. No-overflow structural guards ------------------------------------ */ /* Let the content column shrink instead of forcing a page-wide scrollbar. */ .app-shell > * { min-width: 0; } .app-content { min-width: 0; max-width: 100%; } /* Responsive media — never overflow their container, keep aspect ratio. */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; height: auto; } img, video { display: block; } /* ---- 3. Tables: scroll inside their card, never widen the page ----------- */ /* The #1 layout-breaker on mobile was a wide multi-column table with no horizontal scroll: it stretched the page, so every grid mis-computed its columns. Make table containers scroll and keep headers on one line. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap > table { min-width: max-content; } /* Standalone tables that aren't in a .table-wrap (e.g. the Testing dashboard) get a scrollable shell via .scroll-x (added in markup) — and as a safety net any bare .data / .tdash-table keeps its header cells on one line so they scroll rather than shatter. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .scroll-x > table { min-width: max-content; } .data thead th, .tdash-table thead th { white-space: nowrap; } /* Many tables sit directly in a .panel with no scroll wrapper, so a wide table (e.g. Teams) pushed its last column out of the card. On smaller screens let any panel that directly contains a table scroll horizontally. :has() is scoped so panels without tables are unaffected (no clipping). */ @media (max-width: 1024px) { .panel:has(> table), .panel:has(> .data), .panel:has(> .table-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .panel > table.data { min-width: max-content; } } /* ---- 4. Card grids: auto-fit, equal spacing, dynamic-data safe ----------- */ /* Any card grid fluidly fits as many equal columns as the width allows and wraps the rest — no fixed column counts to break. (.kpi-grid / .pt-grid already do this; this reinforces it and adds graceful phone fallback.) */ .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ---- 5. Top bar: title truncates, never wraps per-letter ----------------- */ .topbar { min-width: 0; flex-wrap: nowrap; } .topbar .crumbs { min-width: 0; flex: 1 1 auto; overflow: hidden; } .topbar .crumbs strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Actions stay on ONE row (never wrap the avatar below). The title truncates instead, so the bar height is always consistent. */ .topbar .topbar-actions { min-width: 0; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; } /* ---- 6. Touch-friendly inputs (coarse pointers: phones, tablets, TV) ------ */ @media (pointer: coarse) { .btn, button, [role="button"], .sb-link, .mt-pg, .tab, .mt-tabs a { min-height: 44px; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; } input, select, textarea { font-size: 16px; } /* stop iOS focus-zoom */ } /* ---- 7. Fluid typography (display headings only — body stays in px) ------- */ .page-title { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.15; } /* ---- 8. Phones (≤ 640px) ------------------------------------------------- */ @media (max-width: 640px) { .app-content { padding: 16px 14px; } /* Multi-column content grids collapse to a single clean column. */ .pt-grid, .kpi-grid, .tc-page-grid, .bu-grid, .tc-stats-grid, .tc-row-2, .ot-hero { grid-template-columns: 1fr !important; } /* Kanban "live" hero: stack title + metric tiles into a 2-up grid so the "Phantasm" title and counts never get crushed into a sliver. */ .ot-hero { gap: 10px; } .ot-hero .ot-kpi { padding: 8px 10px; } /* Page header stacks; primary action goes full width and easy to tap. */ .page-head { flex-direction: column; align-items: stretch; gap: 12px; } .page-actions { display: flex; } .page-actions .btn { flex: 1; justify-content: center; } /* Modals become near-full-screen sheets so nothing is clipped. */ .modal, .modal-card, .tc-modal { width: 100% !important; max-width: 100% !important; } } /* ---- 8b. Filter toolbars — the big fix ---------------------------------- Every page has its OWN filter-bar class and most use Select2 (which writes an inline pixel width that beat earlier rules). Below ~860px we stack every filter bar into one clean full-width column so search / dropdowns / dates / buttons all line up edge-to-edge instead of floating as tiny centred pills. The container list intentionally enumerates each page's class. */ @media (max-width: 860px) { .toolbar, .mt-toolbar, .lvq-filter, .exq-filter, .dept-toolbar, .al-toolbar, .att-filter-bar, .sh-toolbar, .au-toolbar, .ml-filters, .rt-toolbar, .rx-toolbar, .rh-filters, .tb-filters, .wf-toolbar, .ma-filters, .lr-filter, .lr-toolbar, .ts-toolbar { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 10px !important; } /* Direct children each take a full row. */ .toolbar > *, .mt-toolbar > *, .lvq-filter > *, .exq-filter > *, .dept-toolbar > *, .al-toolbar > *, .att-filter-bar > *, .sh-toolbar > *, .au-toolbar > *, .ml-filters > *, .rt-toolbar > *, .rx-toolbar > *, .rh-filters > *, .tb-filters > *, .wf-toolbar > *, .ma-filters > *, .lr-filter > *, .lr-toolbar > *, .ts-toolbar > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; flex: 0 0 auto !important; } /* Native controls fill the row. */ .toolbar input, .toolbar select, .toolbar textarea, .mt-toolbar input, .mt-toolbar select, .mt-toolbar textarea, .lvq-filter input, .lvq-filter select, .lvq-filter textarea, .exq-filter input, .exq-filter select, .exq-filter textarea, .dept-toolbar input, .dept-toolbar select, .dept-toolbar textarea, .al-toolbar input, .al-toolbar select, .al-toolbar textarea, .att-filter-bar input, .att-filter-bar select, .att-filter-bar textarea, .sh-toolbar input, .sh-toolbar select, .sh-toolbar textarea, .au-toolbar input, .au-toolbar select, .au-toolbar textarea, .f-search, .f-select, .f-date { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Select2 widgets carry an inline pixel width, and some pages re-declare `.x .select2-container { width:auto !important }` in a