/* SAM design system — shared tokens + base components for the web UI.
*
* Lifted from the original lineup-page dark theme so every tool inherits
* the same look. Pages link this file and may add tool-specific styles
* after it. Type sizes are relative; never hard-coded in component CSS.
*
* Dark UI here is intentional — interactive screens. Generated HTML
* reports (sheets/list/inspect/locators) use a separate light theme in
* sam/render/html.py because they're forward-able / printable artifacts.
*/
:root {
/* Tells the browser this UI is built for a dark color scheme. Reinforces
the per-page so form controls,
scrollbars, and the macOS Safari fullscreen title bar honor the dark
intent — meta-tag-only is ignored by Safari in fullscreen, leaving the
toolbar/title chrome light when system appearance is Light.
When the light theme ships (project_light_theme_reference), swap this
to `light dark` and bind --sam-* tokens to a light palette under a
theme-class on body. The browser then picks per-context. */
color-scheme: dark;
/* Colors — dark interactive theme */
--sam-bg: #1a1a1a;
--sam-surface: #232323;
--sam-surface-2: #2a2a2a;
--sam-border: #3a3a3a;
--sam-border-soft: #292929;
--sam-text: #e8e8e8;
--sam-text-2: #b0b0b0;
--sam-text-dim: #888;
--sam-amber: #F5A623; /* branding primary (matches DSBX_AMBER) */
--sam-amber-2: #fbbf24; /* lighter accent (existing tagline color) */
--sam-amber-on: #1a1a1a; /* foreground on amber surfaces */
--sam-banner-from: #1a1a1a;
--sam-banner-to: #383838;
--sam-ok: #2eb872;
--sam-warn: #d4a017;
--sam-bad: #c44;
--sam-info: #5a9eb8; /* cyan — informational state (banners, hints) */
--sam-pending: #777;
/* Status pill / banner backgrounds (subtle tints).
* One canonical shade per state — pills use these directly; banners
* (full-width) use the same shade for visual consistency across tools.
*/
--sam-ok-bg: #1d4a30;
--sam-warn-bg: #3d3215;
--sam-bad-bg: #4a1d1d;
--sam-info-bg: #1e3a5f;
--sam-pending-bg: #2a2a2a;
/* Status pill text colors — softer than --sam-ok / --sam-bad,
* tuned for legibility on the matching -bg tint. Used by .sam-pill
* variants and any "success indicator" / "warning text" in pages.
* Keep these aligned with sam.css's pill set; pages should NOT
* use ad-hoc greens/reds.
*/
--sam-ok-text: #5fd28d;
--sam-bad-text: #d47171;
/* Fonts */
--sam-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--sam-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Type scale (relative; --sam-fs-base is the body size) */
--sam-fs-xs: 9px; /* uppercase section labels */
--sam-fs-sm: 11px; /* small caption / metadata */
--sam-fs-base: 13px; /* body */
--sam-fs-md: 15px; /* tagline */
--sam-fs-lg: 18px; /* section heading (h3) */
--sam-fs-xl: 32px; /* page heading (h1) */
/* Spacing */
--sam-radius: 6px;
--sam-radius-sm: 3px;
}
/* ------------------------------------------------------------------ */
/* Canonical "light report" theme — the look used by sam lineup */
/* rendered HTML, sam review playlist, and any embedded list/report */
/* that shows DATA inside a SAM tool page. */
/* */
/* SAM uses dark page chrome (banner, controls, panels) with light */
/* report content (lists, tables, generated HTML) embedded inside. */
/* The contrast separates "tool surface" from "deliverable content." */
/* */
/* The .sam-report scope rebinds color tokens to canonical light */
/* values within its subtree only — page chrome above stays dark. */
/* This is the same palette as the playlist export (the reference). */
/* Used by .list-module (also auto-applied below) and any other */
/* "report-like" surface inside a dark SAM page. */
/* */
/* Future: a global light-theme toggle for the page chrome (planned */
/* per task #27) re-uses this same variable contract — same layout, */
/* different binding scope. */
/* ------------------------------------------------------------------ */
.sam-report,
.list-module {
/* Page-style surfaces */
--sam-bg: #e8eaed;
--sam-surface: #ffffff;
--sam-surface-2: #dadde2;
--sam-border: #cdd0d8;
--sam-border-soft: #e5e8ed;
/* Text */
--sam-text: #1a1d24;
--sam-text-2: #4a5060;
--sam-text-dim: #6a7080;
--sam-amber-on: #ffffff; /* white reads against amber on light */
/* State colors — saturated darker variants legible on light bg */
--sam-ok: #1a6b2a;
--sam-warn: #7a3d00;
--sam-bad: #8a1a1a;
--sam-info: #0a4d6e;
--sam-pending: #6a7080;
/* Background tints — pastel, paper-friendly (matches playlist) */
--sam-ok-bg: #d4edda;
--sam-warn-bg: #fde8cc;
--sam-bad-bg: #fde8e8;
--sam-info-bg: #cce5f0;
--sam-pending-bg: #e8eaed;
/* Pill text — saturated state colors read directly on light tint */
--sam-ok-text: #1a6b2a;
--sam-bad-text: #8a1a1a;
/* The wrapper itself uses the WHITE surface so title + table form
one continuous light card on the dark page (matching the
playlist canonical — no gray "frame" band around the content).
Per-list color tones can still override --module-bg for the
title bar specifically (TRIMS uses gray, etc). */
background: var(--sam-surface);
color: var(--sam-text);
border: 1px solid var(--sam-border);
border-radius: var(--sam-radius);
overflow: hidden;
}
/* ------------------------------------------------------------------ */
/* Reset + base */
/* ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
background: var(--sam-bg);
color: var(--sam-text);
font: var(--sam-fs-base)/1.45 var(--sam-font-ui);
}
/* ------------------------------------------------------------------ */
/* Banner — dark gradient, centered logo + amber tagline + tool name. */
/* Mirrors the pattern in sam/web/static/lineup.html (the logo IS the */
/* wordmark; no separate "SAM" text). Tools add their own tool-name */
/* sub-line below the product tagline. */
/* ------------------------------------------------------------------ */
.sam-banner {
background: linear-gradient(to bottom, var(--sam-banner-from) 0%, var(--sam-banner-to) 100%);
color: var(--sam-text);
padding: 14px 0 10px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
border-bottom: 1px solid var(--sam-border);
}
.sam-banner-logo {
display: flex; align-items: flex-start; justify-content: center;
}
.sam-banner-logo img {
max-height: 90px; width: auto;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
/* When the logo is wrapped in an (any tool page returning to the
* /tools landing), give it a subtle hover hint. */
.sam-banner-logo a {
display: inline-flex;
cursor: pointer;
transition: filter 0.12s, opacity 0.12s;
}
.sam-banner-logo a:hover { opacity: 0.85; }
.sam-banner-logo a:hover img { filter: drop-shadow(0 2px 6px rgba(245, 166, 35, 0.4)); }
.sam-tagline {
color: var(--sam-amber-2);
font-size: var(--sam-fs-base);
font-weight: 500;
line-height: 1;
/* Blank line under the tagline so SANDBOX ASSET MANAGEMENT and the
tool name beneath it don't crowd each other in the banner. */
margin: 0 0 0.6em;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sam-tool-name {
color: var(--sam-text-2);
font-size: var(--sam-fs-sm);
font-weight: 500;
line-height: 1;
margin: 4px 0 0 0;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ------------------------------------------------------------------ */
/* Common bits */
/* ------------------------------------------------------------------ */
.sam-mono { font-family: var(--sam-font-mono); }
/* "DETAILS", "STATUS", "NOTES" small caps section labels */
.sam-section-label {
font-size: var(--sam-fs-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sam-text-dim);
font-weight: 600;
}
.sam-button {
background: var(--sam-surface-2);
color: var(--sam-text);
border: 1px solid var(--sam-border);
padding: 6px 12px;
font-size: var(--sam-fs-sm);
font-family: inherit;
cursor: pointer;
border-radius: var(--sam-radius-sm);
}
.sam-button:hover { background: #333; }
.sam-button.primary {
background: var(--sam-amber);
border-color: var(--sam-amber);
color: var(--sam-amber-on);
font-weight: 600;
}
.sam-button.primary:hover { background: var(--sam-amber-2); }
.sam-button:disabled { opacity: 0.4; cursor: not-allowed; }
.sam-input {
background: var(--sam-surface-2);
color: var(--sam-text);
border: 1px solid var(--sam-border);
padding: 5px 10px;
font-size: var(--sam-fs-sm);
border-radius: var(--sam-radius-sm);
font-family: var(--sam-font-mono);
}
/* For path / value fields: use type="search" to get the native × clear
* button, but suppress the magnifying-glass affordance and Safari's
* default search-field chrome so the input still reads as a path field. */
.sam-input[type="search"] {
-webkit-appearance: textfield;
appearance: textfield;
}
.sam-input[type="search"]::-webkit-search-decoration,
.sam-input[type="search"]::-webkit-search-results-button,
.sam-input[type="search"]::-webkit-search-results-decoration {
display: none;
}
.sam-pill {
display: inline-block;
padding: 1px 8px;
border-radius: 9px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sam-pill.ok { background: var(--sam-ok-bg); color: var(--sam-ok-text); }
.sam-pill.warn { background: var(--sam-warn-bg); color: var(--sam-amber-2); }
.sam-pill.pending { background: var(--sam-pending-bg); color: var(--sam-text-dim); }
.sam-pill.bad { background: var(--sam-bad-bg); color: var(--sam-bad-text); }
/* Submit / process button — full-width gray "do the thing" button.
Used by /lineup PROCESS and /vfx-idgen PROCESS. Distinct shape
from the regular .sam-button (chunkier, full-width, gray accent). */
.submit-btn {
width: 100%;
padding: 10px;
background: var(--sam-text-dim); /* #888 — neutral gray */
color: #fff;
border: none;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}
.submit-btn:hover:not(:disabled) { background: var(--sam-text-2); }
.submit-btn:disabled {
background: var(--sam-border);
cursor: not-allowed;
opacity: 0.6;
}
/* ------------------------------------------------------------------ */
/* SAM footer — fixed-bottom zone present on every page. Holds the */
/* build-stamp widget today; could carry other persistent chrome */
/* (deploy info, status) later. Tools that need content clear of it */
/* pad the same way (28px is enough headroom). */
/* ------------------------------------------------------------------ */
.sam-footer {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--sam-bg);
border-top: 1px solid var(--sam-border);
padding: 3px 20px;
height: 28px;
text-align: center;
z-index: 1000;
}
/* SAM build stamp — widget displaying the running deployment's build
* time. Lives inside .sam-footer today but can drop in anywhere; the
* font/colour rules apply wherever the widget is placed.
*
* Type voice matches the banner (.sam-tagline / .sam-tool-name): UI
* sans, uppercase, tracked. Build info is data, but it's frame chrome
* — keeping it in the banner's voice keeps the page frame consistent.
* Mono is reserved for shot data (timecodes, filenames, IDs).
*
* Wire JS via wireBuildFooter(el) from /static/sam-utils.js — fetches
* /api/health once at load and writes the result into the element. */
.sam-build {
font-family: var(--sam-font-ui);
font-size: var(--sam-fs-sm);
font-weight: 500;
color: var(--sam-text-2);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 22px;
}
/* ------------------------------------------------------------------ */
/* Upload / drop-zone — dashed-amber surface that swallows clicks and */
/* drag-drop into a hidden . Used by /vfx-idgen, */
/* /lineup, and any future SAM tool that takes a file. Wire JS via */
/* `wireDropZone(area, input, onFile)` from /static/sam-utils.js. */
/* */
/* The .secondary variant is smaller / dimmer for "optional" zones */
/* (e.g. the QT reference uploader on /vfx-idgen). */
/* ------------------------------------------------------------------ */
.upload-area {
border: 2px dashed var(--sam-amber);
border-radius: var(--sam-radius);
padding: 26px 18px;
text-align: center;
cursor: pointer;
background: var(--sam-surface-2);
transition: border-color 0.15s, background 0.15s;
}
.upload-area:hover,
.upload-area.dragover {
border-color: var(--sam-amber-2);
background: var(--sam-bg);
}
.upload-area strong {
display: block;
color: var(--sam-amber-2);
font-size: var(--sam-fs-base);
margin-bottom: 6px;
}
.upload-area p {
color: var(--sam-text-dim);
font-size: var(--sam-fs-sm);
margin: 0;
}
.upload-area input[type=file] { display: none; }
.upload-area .filename {
color: var(--sam-ok-text);
font-size: var(--sam-fs-sm);
margin-top: 10px;
font-family: var(--sam-font-mono);
word-break: break-all;
}
.upload-area.secondary {
padding: 14px;
border-color: var(--sam-border);
}
.upload-area.secondary strong { color: var(--sam-text-2); }
.upload-area.secondary p { font-size: var(--sam-fs-xs); }
.upload-area.secondary:hover { border-color: var(--sam-amber-2); }
/* ------------------------------------------------------------------ */
/* Filter widgets — color buttons & track toggles. */
/* Used by /lineup, /changes, /vfx-idgen and any future tool that */
/* runs the lineup pipeline. Single source of truth so widget look */
/* never drifts across tools (per consistency-first discipline). */
/* ------------------------------------------------------------------ */
/* Locator color picker — multi-select; OR-logic on apply. */
.color-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.color-btn {
width: 24px;
height: 24px;
border: 2px solid var(--sam-amber-2);
border-radius: var(--sam-radius-sm);
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
position: relative;
opacity: 0.5;
}
.color-btn:hover:not(:disabled) {
border-color: var(--sam-amber-2);
box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
transform: scale(1.1);
opacity: 1;
}
.color-btn.active {
border-color: var(--sam-text-dim);
box-shadow: 0 0 0 2px var(--sam-text-dim);
opacity: 1;
}
.color-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
border-color: var(--sam-border);
}
.color-btn-label {
font-size: 10px;
font-weight: 600;
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
display: none;
}
.color-btn:hover .color-btn-label:not(:disabled) { display: block; }
/* Track toggles — OMIT / MASTER track selectors. */
.track-toggles {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-start;
}
.track-toggle {
padding: 6px 12px;
background: var(--sam-surface-2);
color: var(--sam-text);
border: 2px solid var(--sam-border);
border-radius: var(--sam-radius-sm);
cursor: pointer;
transition: all 0.2s;
font-size: 12px;
font-weight: 500;
}
.track-toggle:hover {
border-color: var(--sam-amber-2);
background: var(--sam-border);
}
.track-toggle.active {
background: var(--sam-text-dim);
border-color: var(--sam-amber-2);
color: #fff;
}
/* ------------------------------------------------------------------ */
/* List module — repeatable, parameterized list-view component. */
/* Every list (ACTIVE, TRIMS, future bins, /vfx-idgen, etc.) renders */
/* as one of these. View styling is window dressing; the data shape */
/* is invariant. Per-list color comes through CSS custom properties */
/* on the wrapping element: */
/* --module-bg, --module-fg, --module-border */
/* The .alt-on-light modifier (set by JS when bg luminance > ~aaa) */
/* tints sort-action buttons for legibility on light module bgs. */
/* ------------------------------------------------------------------ */
.list-module {
/* Default banner is gray (--sam-surface-2 = #dadde2 in the light
island), giving the title row a subtle separation from the white
table area. Per-list bins (e.g. TRIMS) still set --module-bg
directly to override (heavier gray, custom tones, etc.). */
--module-bg: var(--sam-surface-2);
--module-fg: var(--sam-text-2);
--module-border: var(--sam-border);
margin-bottom: 14px;
}
.list-module:last-child { margin-bottom: 0; }
.list-module-title {
padding: 8px 12px;
background: var(--module-bg);
color: var(--module-fg);
border-top: 2px solid var(--module-border);
border-bottom: 2px solid var(--module-border);
font-family: var(--sam-font-ui);
font-size: var(--sam-fs-base);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: baseline;
gap: 12px;
}
.list-module-title .count {
color: var(--module-fg);
opacity: 0.85;
font-family: var(--sam-font-mono);
font-size: var(--sam-fs-sm);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
margin-right: auto;
}
.list-module-title .sort-actions {
display: flex;
gap: 4px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.list-module.alt-on-light .sort-actions .sam-button {
background: rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.3);
color: #000;
}
.list-module.alt-on-light .sort-actions .sam-button:hover {
background: rgba(0, 0, 0, 0.22);
}
/* Canonical table styling — matches sam review playlist (the reference
* light-report look): amber header bar with white text, white rows
* with subtle borders. Same look across every list-module instance —
* lineup output, playlist, list-editor, vfx-idgen, future tools. */
table.list-module-table {
width: 100%;
border-collapse: collapse;
font-family: var(--sam-font-mono);
font-size: var(--sam-fs-sm);
table-layout: fixed;
background: var(--sam-surface);
}
table.list-module-table th {
background: var(--sam-amber);
text-align: left;
padding: 11px 12px;
font-weight: 600;
color: var(--sam-amber-on);
border-bottom: 1px solid var(--sam-border);
font-size: var(--sam-fs-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: var(--sam-font-ui);
white-space: nowrap;
}
table.list-module-table th.num { text-align: right; }
table.list-module-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--sam-border);
vertical-align: top;
background: var(--sam-surface);
color: var(--sam-text-2);
}
table.list-module-table td.num { text-align: right; }
table.list-module-table td.namecell,
table.list-module-table td.notescell {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.list-module-table td.namecell { color: var(--sam-text); font-weight: 600; }
table.list-module-table tr:last-child td { border-bottom: none; }
table.list-module-table tr:hover td { background: var(--sam-surface-2); }
table.list-module-table tr { cursor: grab; }
/* tr.selected — single-select / "primary" highlight (e.g. the row
whose detail is showing in the stage-right widget).
tr.bulk-selected — multi-select highlight; can coexist with .selected
(the primary row inside a bulk selection has BOTH classes). Same
visual today; kept as separate classes so future themes can
distinguish them. */
table.list-module-table tr.selected td,
table.list-module-table tr.bulk-selected td {
background: var(--sam-warn-bg);
color: var(--sam-text); /* explicit so the row stays readable
regardless of theme cascade quirks */
}
table.list-module-table tr.selected td.namecell,
table.list-module-table tr.bulk-selected td.namecell { color: var(--sam-text); }
table.list-module-table tr.dragging { opacity: 0.35; }
table.list-module-table tr.drop-target td { box-shadow: inset 0 2px 0 var(--sam-amber); }
/* Empty-list placeholder row — keeps the tbody drop-targetable when no
items have been added yet (an empty tbody collapses to zero height,
which kills the first drop). Hint text dims; cursor stays default
since this row isn't draggable. */
table.list-module-table tr.list-module-empty-row { cursor: default; }
table.list-module-table tr.list-module-empty-row td {
/* Match regular row geometry — same padding/font as data rows so the
empty state reads as a peer "this is where rows would go", not as
a separate banner. Italic + dim tint signals "not real content". */
text-align: center;
color: var(--sam-text-dim);
font-style: italic;
padding: 8px 12px;
background: var(--sam-surface);
}
table.list-module-table tr.list-module-empty-row:hover td { background: var(--sam-surface); }
table.list-module-table tr.list-module-empty-row.drop-target td {
box-shadow: inset 0 0 0 2px var(--sam-amber);
color: var(--sam-text);
}
/* Whole-section drop highlight — applied when a drag is over the
section's chrome (title bar / column header / padding) rather than
over a specific row. Communicates "drop here = append to list". */
.list-module.drop-target-section {
outline: 2px solid var(--sam-amber);
outline-offset: -2px;
}
/* Column widths.
* Numeric columns hold 6-7 digit frame numbers — narrow + fixed.
* Name and notes are flexible by default — share the remaining
* width so VFX names (often 30-50+ chars) aren't clipped.
* A list-module config can override col-name to a fixed pixel width
* if a particular view needs predictable layout. */
.col-idx { width: 44px; }
.col-name { /* flexible — distributes with col-notes */ }
.col-frame { width: 80px; }
.col-frames { width: 70px; }
.col-notes { /* flexible — distributes with col-name */ }
.col-status { width: 84px; }
.notescell {
color: var(--sam-text-2);
font-style: italic;
font-family: var(--sam-font-ui);
}
/* Pull / Grab action button overlays the row's # cell on hover.
* Default state: # number visible, button hidden.
* Hover state: button overlays the #, button is the click target. */
table.list-module-table td.idx-cell {
position: relative;
cursor: default;
}
.idx-num { display: inline-block; transition: opacity 0.1s; }
.row-action {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 12px;
font-family: var(--sam-font-ui);
font-size: 14px;
font-weight: 600;
color: var(--sam-text-dim);
cursor: pointer;
opacity: 0;
transition: opacity 0.1s, color 0.1s;
user-select: none;
}
table.list-module-table tr:hover .row-action { opacity: 1; }
table.list-module-table tr:hover .idx-num { opacity: 0; }
.row-action:hover { color: var(--sam-amber); }
/* ------------------------------------------------------------------ */
/* Print stylesheet — Cmd+P should yield just the list, not the */
/* whole interactive UI. Applies to every SAM page that loads sam.css */
/* (vfx-idgen, list-editor, lineup) since the chrome class names are */
/* shared. */
/* */
/* Strategy: */
/* 1. Hide page chrome (banner, controls, action bars, detail pane, */
/* build footer) — none of it is meaningful on paper. */
/* 2. Flatten the side-by-side grid (.main / .split) into a single */
/* column so the list fills the page width. */
/* 3. Force a white-paper background; the .list-module subtree */
/* already binds light-scope tokens so the inside is print-ready. */
/* 4. Avoid splitting a row across pages (page-break-inside: avoid). */
/* */
/* If a page needs to keep a specific element visible on print (e.g. a */
/* future "print header" with project name + date), it can opt in by */
/* tagging the element with .sam-print-only — defined as display:none */
/* in the screen scope and unset here. */
/* ------------------------------------------------------------------ */
.sam-print-only { display: none; }
@media print {
@page { margin: 0.4in; }
body {
background: #fff !important;
color: #000;
}
/* Hide all interactive chrome. */
.sam-banner,
.sam-footer,
.assign-bar,
.export-bar,
.bulk-bar,
.detail-pane,
.results-stats,
.results-empty,
.pane-empty,
.upload-area,
.status-message,
.sam-section-label,
/* Whole controls panel — vfx-idgen has it as the FIRST .panel inside */
/* .main; list-editor uses a similar shape. The list panel is the */
/* SECOND child, so we keep that one and hide the first. */
.main > .panel:first-child,
.split > aside,
.split > .controls,
/* Common form controls inside any remaining panels become noise. */
input[type="file"],
button.sam-button,
.sam-input {
display: none !important;
}
/* Flatten the grid so the surviving list panel takes the full width. */
.main,
.split,
.results-split {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
}
/* The container card loses its dark surface — it's printing on white. */
.panel,
#resultsPanel {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
}
/* Lists themselves: keep light theme + ensure they print whole. */
.list-module {
border: 1px solid #999 !important;
box-shadow: none !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
page-break-inside: auto;
}
.list-module .lm-row,
.list-module tbody tr {
page-break-inside: avoid;
break-inside: avoid;
}
/* Sticky / fixed bits stop being sticky on paper. */
.list-module thead,
.list-module .lm-header,
.list-module .sticky {
position: static !important;
}
/* Hover-only affordances (drag handles, row actions) stay invisible. */
.row-action,
.lm-drag-handle {
display: none !important;
}
/* Pills + state colors keep their light-scope tones; ensure backgrounds
actually print. Most browsers omit backgrounds in print by default;
-webkit-print-color-adjust forces the color tints to render. */
.sam-pill,
.list-module {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Print-header opt-in (any element a page tags with .sam-print-only). */
.sam-print-only { display: block !important; }
}
/* Print-only page header — pages that opt in via