/* ============================================================= report_actions_v4.css — Toolbar styling for ReportActions Conventions: - Uses --jt-* CSS tokens from jt_theme_v4.css for theme support - Toolbar is a flex row; reports decide where to mount it - Buttons match the visual weight of existing JT modal header controls (Salary Report, Parsed Contracts, etc.) — neither overstating their importance nor disappearing on dark surfaces - Tier-locked buttons get a dimmed, muted treatment with a 🔒 icon prefix; click still fires (routes to upgrade modal) This file is theme-independent: --jt-* tokens flip values when [data-theme="light"] is set on . No explicit light/dark blocks required. ============================================================= */ /* ── Toolbar shell ──────────────────────────────────────────── */ .ra-toolbar { display: inline-flex; align-items: center; gap: 6px; /* No padding/margin — host element controls placement. The toolbar sits inline alongside other header controls (e.g. Salary Report's year selectors and minimize/close buttons). */ } /* ── Button ────────────────────────────────────────────────── Modeled on the existing .sr-* / .pcr-btn-ghost buttons so the toolbar reads as "part of the report header" rather than a separate UI surface. */ .ra-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--jt-on-dark-bg, rgba(255, 255, 255, 0.08)); color: var(--jt-on-dark-text-bright, rgba(255, 255, 255, 0.9)); border: 1px solid var(--jt-on-dark-border, rgba(255, 255, 255, 0.15)); border-radius: 6px; font-size: 0.78rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.05s, opacity 0.12s; line-height: 1.2; white-space: nowrap; /* Buttons live in the gradient header bar of most report modals, so we use the on-dark token family for guaranteed contrast. Falls back to translucent white for any report without a dark header (those modals can override via a wrapping class if needed). */ } .ra-btn:hover { background: var(--jt-on-dark-bg-hover, rgba(255, 255, 255, 0.15)); border-color: var(--jt-on-dark-border-hover, rgba(255, 255, 255, 0.3)); } .ra-btn:active { transform: translateY(1px); } .ra-btn:focus-visible { outline: 2px solid var(--jt-accent-blue, #0ea5e9); outline-offset: 1px; } /* Icon + label sizing — icon slightly larger so it reads as the primary affordance, label gives the action name for users who need words */ .ra-btn-icon { font-size: 0.95rem; line-height: 1; } .ra-btn-label { font-size: 0.78rem; } /* ── Tier-locked state (Downloads for non-Elite users) ───────── Dimmed but NOT disabled — click still fires (routes to upgrade modal). Cursor stays as pointer to telegraph "this does something". */ .ra-btn-locked { opacity: 0.6; /* Slight color shift to muted tier — telegraphs "different state" without screaming. The 🔒 icon (in the JS) does the heavy lifting. */ color: var(--jt-on-dark-text-muted, rgba(255, 255, 255, 0.55)); } .ra-btn-locked:hover { opacity: 0.85; /* On hover, brighten slightly so the upgrade affordance feels alive */ background: var(--jt-on-dark-bg-hover, rgba(255, 255, 255, 0.15)); } /* ── Downloads dropdown ───────────────────────────────────────── Trigger is a regular .ra-btn that opens a sub-menu of formats (CSV / Excel / future PDF). Sub-menu is absolutely positioned under the trigger, right-aligned so it doesn't overflow when the trigger sits at the right edge of the modal header. Elite-gate is at the TRIGGER: non-Elite gets .ra-btn-locked + 🔒 prefix; click bypasses the menu and goes to the upgrade modal. When Elite, the submenu items render without locks. */ .ra-dl-dropdown { position: relative; display: inline-flex; } /* Trigger reuses .ra-btn for visual parity with Print/Email siblings. Override-free except for the inline SVG icon spacing below. */ .ra-dl-trigger { gap: 5px; } .ra-dl-icon { display: inline-flex; align-items: center; /* SVG color uses stroke=currentColor, so it inherits .ra-btn's color */ } .ra-dl-icon svg { display: block; } .ra-dl-caret { font-size: 0.7rem; line-height: 1; margin-left: 1px; opacity: 0.85; } /* ── Sub-menu ─────────────────────────────────────────────────── Right-aligned (right:0) under the trigger so it doesn't overflow the modal edge. z-index sits above the table content inside the modal but well below the email send modal (z-index: 99999). */ .ra-dl-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 130px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 4px; z-index: 1500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 2px; /* Sub-menu uses a fixed dark surface (not on-dark tokens) so it always reads on top of any underlying content, regardless of which modal it's mounted over. Matches the existing .trade-reports-menu pattern. */ } /* Menu items — flat, left-aligned for scan readability */ .ra-dl-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; background: transparent; color: rgba(255, 255, 255, 0.85); border: none; border-radius: 4px; font-size: 0.8rem; font-family: inherit; cursor: pointer; text-align: left; line-height: 1.2; } .ra-dl-item:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; } .ra-dl-item:focus-visible { outline: 2px solid var(--jt-accent-blue, #0ea5e9); outline-offset: -2px; } .ra-dl-item-icon { font-size: 0.95rem; line-height: 1; } .ra-dl-item-label { font-size: 0.8rem; } /* ── Mobile / narrow viewports ─────────────────────────────── Below 640px, hide the labels on toolbar buttons and show icons only. Saves toolbar width for the report's other header controls. Submenu items KEEP their labels so users can still tell CSV from Excel after tapping the trigger. Tooltips still surface what each button does on long-press. */ @media (max-width: 640px) { .ra-btn-label { display: none; } .ra-btn { padding: 5px 8px; } /* Tighter menu for narrow screens */ .ra-dl-menu { min-width: 110px; } } /* ── Narrow-host icon collapse (container-query opt-in) ─────────── When a report's header (or other ancestor) is narrow but the viewport is wide — e.g. a 660px-wide slide-in panel on a 1920px desktop — the viewport-based @media rule above doesn't fire, but the toolbar's labels still won't fit alongside the report's other header controls. Container queries solve this exact case. Reports opt in by naming their container `ra-host`: .dc-header { container-type: inline-size; container-name: ra-host; } Any ancestor with that name and width < 700px will cause its descendant toolbar buttons to drop their labels. */ @container ra-host (max-width: 700px) { .ra-btn-label { display: none; } .ra-btn { padding: 5px 8px; } .ra-dl-caret { margin-left: 0; opacity: 0.7; } } /* ── Universal print hide rule ──────────────────────────────────── When the user prints, hide everything except the modal/panel for the currently-open report. This is the SINGLE SOURCE OF TRUTH for which elements are "report containers" — every CSS file used to declare its own `body > *:not(...)` rule, but that caused cross- file conflicts (each file's rule hid the OTHER reports' modals). To add a new report: just add its modal ID to the :not() list. Each report's CSS still handles its own modal styling (positioning, table layout, color overrides) inside its own @media print block — but the universal hide rule lives here so the list stays consistent. */ @media print { body > *:not(#dcPanel, #salaryReportModal, #parsedContractsReportModal, #draftAnalysisReportModal, #workingPlayerListWindow, #lsStandalonePanel, #playerNotesModal, #franchiseAnalysisGridModal) { display: none !important; } /* ── Light-theme color tokens for print ────────────────────────── The app's default theme is dark, so --jt-text-primary etc. resolve to LIGHT colors that look washed-out (near-invisible) when rendered on a white printed page. Override the tokens at root + both theme scopes so any element using them gets readable dark-on-white text without each report's CSS having to re-declare colors. !important is necessary because [data-theme="dark"] sets these tokens with higher specificity than :root alone. */ :root, [data-theme="dark"], [data-theme="light"] { --jt-text-primary: #111827 !important; /* near-black headings/labels */ --jt-text-secondary: #374151 !important; /* secondary body text */ --jt-text-muted: #6b7280 !important; /* meta info */ --jt-text-disabled: #9ca3af !important; /* placeholder/disabled */ --jt-bg-primary: #ffffff !important; --jt-bg-secondary: #fafafa !important; --jt-bg-deep: #f3f4f6 !important; /* table-header bg */ --jt-bg-hover: #fafafa !important; --jt-border-primary: #d1d5db !important; --jt-border-muted: #e5e7eb !important; /* Position-accent colors — keep them darker than screen versions so they read on white. The on-dark- family stays untouched: those tokens are only used in headers we already hide in print. */ } }