/* ============================================================= 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; } }