/* Responsive table reflow. Replaces the old server-side "mobile card" template (table_cards.html, viewport_layout cookie, ?layout= query param) — the backend now always renders exactly one table markup (table_rows.html, table_row.html, table_rows_scoped.html, table_fragment_vanilla.html), and this media query alone restacks it below the breakpoint. No cookie, no resize listener, no server-side guess to go stale. .cell-primary/.cell-subtitle/.cell-badge and each 's data-label come from the row-hierarchy hints computed in server/utils/field_config_loader.py's get_row_hierarchy_config() (title/ subtitle/badge field picks, either explicit via a model's mobile: YAML block or auto-derived). .hide-mobile is applied when that same YAML block also narrows the field list (e.g. cpm5's PlantDetail mobile: profile shows only 3 of its 10 default columns) — everything else stays visible. 768px matches the remaining live matchMedia() checks elsewhere in the app (table_action_bar.html's popup-vs-fullpage-form decision, child-data-tabs.js's tab-count limit) so all "is this mobile" logic agrees on one breakpoint. Deliberately kept in its OWN small file rather than folded into app-consolidated.css: that file is a 900+ line stylesheet built for a different template family (unified_base.html/docs portal) with several broad, !important-heavy rules (blanket .hidden, .inline-table-container borders/backgrounds, .table-row.selected overrides) that were never designed to apply to list.html/report_base.html/dashboard.html/etc. This file must be linked in every base template that can host a table via HTMX swap (menu navigation only swaps #content-area, never ), same reasoning as row-click-handler.js/TableManager.js/theme-picker.js. */ @media (max-width: 768px) { /* Mobile: a compact, touch-friendly TABLE (not the old stacked cards). Show the action cell (menu + view) plus the first three columns; hide the rest. The table's own container scrolls horizontally if those still overflow. */ /* Keep the action cell (1st) + the first three data columns; drop the ID column (2nd cell) and hide the 6th cell onward, in header and body. So the visible cells are: action, field 1 (3rd), field 2 (4th), field 3 (5th). */ .responsive-table thead th:nth-child(2), .responsive-table tbody td:nth-child(2), .responsive-table thead th:nth-child(n+6), .responsive-table tbody td:nth-child(n+6) { display: none; } /* A model's mobile: YAML profile can still hide specific columns. */ .responsive-table td.hide-mobile, .responsive-table th.hide-mobile { display: none; } /* Touch-friendly vertical padding on the visible rows (overrides the inline 2px td padding baked in at render time). Horizontal padding is tightened from the desktop px-6 (1.5rem) down to px-2 (0.5rem) so the few visible columns fit the narrow viewport without horizontal scrolling. */ .responsive-table tbody td { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .responsive-table thead th { padding-top: 0.55rem; padding-bottom: 0.55rem; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* Row-focus mode: TableManager.updateMobileCardVisibility() (TableManager.js) toggles .has-row-selected on the table when a row is selected by a mobile tap; tapping the selected row again clears the selection (existing toggle in TableManager.selectRow), which removes the class and brings the rest back. Hide every non-selected row so the selection stands alone above whatever it expands (child tabs / inline view). */ .responsive-table.has-row-selected tbody tr:not(.selected-row-main):not(.selected-row-scoped):not(.vanilla-selected-row) { display: none; } /* In row-focus mode, hide the mobile Load More button — you're focused on one row, not paging through the list. The button lives in the pagination band, outside the table, so match on a container that holds the selected table. */ #main-table-container:has(table.has-row-selected) .load-more-btn, #table-and-pagination:has(table.has-row-selected) .load-more-btn { display: none; } } /* ===== DARK-MODE ROW SELECTION ===== Row selection is a light tint of --c-highlight (the same token the menu-active highlight uses at full strength — "same colour, different intensity"). At ~25% over the dark row it stays subtle enough that the normal cell text (--c-heading) reads fine, so no forced text colour is needed. Overrides list.html's `.selected-row-main { #dbeafe !important }` on the dark themes; higher specificity than that single-class !important rule. */ html:is(.dark, .ocean, .charcoal, .emerald) :is( tr.selected-row-main, tr.selected-row-child, tr.selected-row-scoped, tr.selected-row, tr.vanilla-selected-row ) { /* 0.25 was too faint to tell selected from unselected on the dark themes (charcoal's zinc-600 highlight worst). Stronger tint + a left accent bar on the first cell make the selection unambiguous while text stays readable. */ background-color: rgb(var(--c-highlight) / 0.4) !important; } html:is(.dark, .ocean, .charcoal, .emerald) :is( tr.selected-row-main, tr.selected-row-child, tr.selected-row-scoped, tr.selected-row, tr.vanilla-selected-row ) > td:first-child { box-shadow: inset 4px 0 0 0 rgb(var(--c-highlight)) !important; } /* Touch devices keep :hover "stuck" on the last-tapped element, so an UNSELECTED row can keep its hover:bg-surface-alt and read as a stray highlight (the "an unselected row seems highlighted" report on mobile). Where the device has no real hover, drop the hover bg on non-selected rows. */ @media (hover: none) { .responsive-table tbody tr:hover:not(.selected-row-main):not(.selected-row-scoped):not(.vanilla-selected-row):not(.soft-deleted) { background-color: transparent !important; } } /* ===== SOFT-DELETED ROWS + DANGER COMPONENTS — token-driven, ALL themes ===== Single source of truth for soft-delete / danger styling, keyed on --c-danger so it re-hues per theme (red-600 on light/taupe, red-400 on the dark schemes) — legible on every surface. This REPLACES two older mechanisms now removed: 1. the dark-only red-900 !important override that used to live here, and 2. the raw `bg-red-50/100/200 opacity-* border-red-400` + inline `#fecaca` the row and badge templates/JS hardcoded (now stripped to just `.soft-deleted` / `.deleted-badge` / `.btn-danger`). `!important` + the widened selectors keep the deleted wash winning over the base row bg and the selection highlight, so a selected deleted row still reads as deleted. See docs/implementation/semantic_color_token_migration.md (Stage 1). */ /* Soft-deleted row wash. Every deleted row (main / scoped / vanilla) carries `.soft-deleted`; no theme scope needed — the token adapts. The leading `html` lifts specificity to (0,1,2) so it beats the base row bg on every theme. */ html tr.soft-deleted { background-color: rgb(var(--c-danger) / 0.15) !important; border-left: 4px solid rgb(var(--c-danger) / 0.45); } /* Selected + deleted → stronger, and must re-win over the selection highlight `html:is(.dark…) :is(tr.selected-row-*)` which is (0,2,2). `html tr.soft-deleted:is(…)` is (0,2,3) so the deleted-red wins and a selected deleted row still reads as deleted (verified live: a selected+deleted row shows red, not the selection blue). */ html tr.soft-deleted:is(.selected-row-main, .selected-row-child, .selected-row-scoped, .selected-row, .vanilla-selected-row) { background-color: rgb(var(--c-danger) / 0.30) !important; } /* DELETED badge — a self-contained pill so it renders identically from the server template AND the JS-built badge (`_abPerformSoftDelete`) with just `class="deleted-badge"`, no colour/shape utilities and no Tailwind safelist. */ .deleted-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.25; /* Solid danger pill with SURFACE-coloured text. --c-surface is always the opposite lightness of --c-danger (dark surface + light red-400 on dark themes; light surface + dark red-600 on light themes), so the label stays high-contrast on every theme AND the solid pill stands out from the red-washed row it sits on — where a faint danger/0.14 wash was low-contrast red-on-red. (Subtler alt if ever wanted: a surface chip — background:--c-surface-strong; color:--c-danger; border:1px solid rgb(var(--c-danger)/0.5).) */ background-color: rgb(var(--c-danger)); color: rgb(var(--c-surface)); } /* Danger button + menu item (delete). */ .btn-danger { color: rgb(var(--c-danger)); background-color: rgb(var(--c-danger) / 0.12); border: 1px solid rgb(var(--c-danger) / 0.35); } .btn-danger:hover { background-color: rgb(var(--c-danger) / 0.20); } .menu-item-danger { color: rgb(var(--c-danger)); } .menu-item-danger:hover { background-color: rgb(var(--c-danger) / 0.12); } /* Floating dropdown/menu panels. They used `bg-surface` — identical to the table/row behind them — with a `ring-black/5%` or `border-rule-dim` edge that's invisible on the dark themes (on every dark scheme --c-rule-dim actually EQUALS --c-surface), so the panel blended into its calling parent. Give them an ELEVATED surface (surface-strong, a lighter step on dark / a distinct panel on light) plus a subtle --c-body edge (light-on-dark, dark-on-light) so they read as floating panels on every theme. `.dropdown-panel` is the shared hook; add it to any menu with this pattern. */ .actions-dd, .dropdown-panel { background-color: rgb(var(--c-surface-strong)) !important; border: 1px solid rgb(var(--c-body) / 0.14) !important; } /* The elevated panel bg is lighter than the base surface, so the most-muted text (`text-faint` — e.g. dropdown item descriptions) loses contrast on it. Lift it one step to `muted` inside dropdown panels (higher specificity than the utility, so no !important). */ .dropdown-panel .text-faint { color: rgb(var(--c-muted)); }