/*
 * New dashboard shell design, ported from the SPA prototype
 * (output/workscout-dashboard-revamp/index.html) onto the real
 * multi-page dashboard template (template-dashboard.php).
 *
 * Scope: sidebar/nav/card/table/topbar chrome only - this template still
 * renders each real WP page's own the_content() inside .jf-dash-content,
 * so no page-specific SPA styles (.page/.is-active panel switching,
 * accordion, stage-meter, readiness-card, etc.) are needed here.
 */

/*
 * 2026-09-03 popover audit: this file's shared components (.jfmd-action-menu,
 * .jfmd-action-menu-panel, .jfmd-menu-action, etc.) are used by BOTH
 * template-dashboard.php's shell (.jf-dash-shell, below) and the live Member
 * Dashboard page (template-dashboard-revamp-preview.php, which wraps its
 * markup in body.jfmd-dashboard-shell + a plain .shell/.sidebar - not
 * .jf-dash-shell). Those shared components read --dash-* custom properties
 * that were previously only ever defined inside .jf-dash-shell, so on the
 * revamp page every var(--dash-surface)/var(--dash-line)/etc. resolved to
 * nothing and the popover panel rendered with no background/border - on top
 * of position:absolute never applying either, since this whole stylesheet
 * wasn't even enqueued there until this same audit (see functions.php).
 * Redefining just the tokens (not the .jf-dash-shell grid/layout rules -
 * those are specific to the older template's own markup) on
 * body.jfmd-dashboard-shell fixes every .jfmd-* component on the live page
 * without touching the older template's layout.
 */
body.jfmd-dashboard-shell {
	--dash-ink: #030a1c;
	--dash-text: #151515;
	--dash-navy: #0b2668;
	--dash-navy-2: #123278;
	--dash-brand: #26368d;
	--dash-blue: #07b1e5;
	--dash-blue-dark: #0369a1;
	--dash-canvas: #f5f6fa;
	--dash-surface: #fff;
	--dash-raised: #fbfcff;
	--dash-line: #e2e7f0;
	--dash-line-strong: #d4dce9;
	--dash-muted: #60708a;
	--dash-faint: #8a96aa;
	--dash-green: #157a4a;
	--dash-amber: #a86400;
	--dash-red: #b42318;
	--dash-purple: #6d5bd0;
	--dash-green-ink: #12623e;
	--dash-green-wash: #e8f6ee;
	--dash-amber-ink: #875100;
	--dash-amber-wash: #fff5db;
	--dash-red-ink: #a52a20;
	--dash-red-wash: #fdebea;
	--dash-blue-ink: #075985;
	--dash-blue-wash: #e5f6fd;
	--dash-purple-ink: #4338ca;
	--dash-purple-wash: #efedff;
	--dash-slate: #59657b;
	--dash-slate-deep: #475569;
	--dash-track: #e5eaf3;
	--dash-wash: #eef1f5;
	--dash-logout: #ff6a3d;
	--dash-logout-hot: #ff3d3d;
	--dash-green-edge: #a9dcc0;
	--dash-amber-edge: #f0d999;
	--dash-red-edge: #f3b8b2;
	--dash-blue-edge: #a6e1f4;
	--dash-form-error: #c9342f;
	--dash-form-warn: #b7791f;
	--dash-form-ok: #27835d;
	--dash-danger-hot: #d92d20;
	--dash-danger-wash: #fff1f0;
	--dash-unread: #eaf2ff;
	--dash-msg-active: #eef6ff;
	--dash-bubble: #eef2f7;
	--dash-notice: #f4f6fa;
	--dash-notice-unread: #dceafe;
	--dash-well: #eef3f9;
	--dash-panel: #eef8fd;
	--dash-input: #f9fbfe;
	--dash-badge-ink: #bfeeff;
	--shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
	--shadow-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
	--radius-sm: 9px;
	--radius-md: 12px;
	--radius-lg: 18px;
}

.jf-dash-shell {
	--dash-ink: #030a1c;
	--dash-text: #151515;
	--dash-navy: #0b2668;
	--dash-navy-2: #123278;
	--dash-brand: #26368d;
	--dash-blue: #07b1e5;
	--dash-blue-dark: #0369a1;
	--dash-canvas: #f5f6fa;
	--dash-surface: #fff;
	--dash-raised: #fbfcff;
	--dash-line: #e2e7f0;
	--dash-line-strong: #d4dce9;
	--dash-muted: #60708a;
	--dash-faint: #8a96aa;
	--dash-green: #157a4a;
	--dash-amber: #a86400;
	--dash-red: #b42318;
	--dash-purple: #6d5bd0;
	--dash-green-ink: #12623e;
	--dash-green-wash: #e8f6ee;
	--dash-amber-ink: #875100;
	--dash-amber-wash: #fff5db;
	--dash-red-ink: #a52a20;
	--dash-red-wash: #fdebea;
	--dash-blue-ink: #075985;
	--dash-blue-wash: #e5f6fd;
	--dash-purple-ink: #4338ca;
	--dash-purple-wash: #efedff;
	--dash-slate: #59657b;
	--dash-slate-deep: #475569;
	--dash-track: #e5eaf3;
	--dash-wash: #eef1f5;
	--dash-logout: #ff6a3d;
	--dash-logout-hot: #ff3d3d;
	--dash-green-edge: #a9dcc0;
	--dash-amber-edge: #f0d999;
	--dash-red-edge: #f3b8b2;
	--dash-blue-edge: #a6e1f4;
	--dash-form-error: #c9342f;
	--dash-form-warn: #b7791f;
	--dash-form-ok: #27835d;
	--dash-danger-hot: #d92d20;
	--dash-danger-wash: #fff1f0;
	--dash-unread: #eaf2ff;
	--dash-msg-active: #eef6ff;
	--dash-bubble: #eef2f7;
	--dash-notice: #f4f6fa;
	--dash-notice-unread: #dceafe;
	--dash-well: #eef3f9;
	--dash-panel: #eef8fd;
	--dash-input: #f9fbfe;
	--dash-badge-ink: #bfeeff;
	--shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
	--shadow-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
	--radius-sm: 9px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--sidebar-w: 288px;
	--mobile-header-offset: 82px;
	--mobile-toggle-gap: 16px;
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	min-height: 70vh;
	background: var(--dash-canvas);
	color: var(--dash-text);
	font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.jf-dash-shell * { box-sizing: border-box; }
.jf-dash-shell a { text-decoration: none; }

.jf-dash-sidebar {
	position: sticky;
	top: 0;
	align-self: start;
	max-height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	background: var(--dash-navy);
	color: rgba(255, 255, 255, .76);
	padding: 22px 14px;
	box-shadow: 8px 0 28px rgba(3, 10, 28, .12);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .32) transparent;
}
.jf-dash-sidebar::-webkit-scrollbar { width: 6px; }
.jf-dash-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .32); border-radius: 999px; }

.jf-dash-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 10px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: var(--dash-surface);
}
.jf-dash-brand-mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(7, 177, 229, .18);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
	font-size: 18px;
}
.jf-dash-brand strong { display: block; line-height: 1.2; font-size: 15px; color: var(--dash-surface); }
.jf-dash-brand span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .58); font-size: 12px; }

.jf-nav-group { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.jf-nav-group:first-of-type { margin-top: 20px; border-top: 0; }
.jf-nav-label {
	margin: 0 10px 8px;
	color: rgba(255, 255, 255, .56);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nav-button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	margin: 2px 0;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: rgba(255, 255, 255, .76);
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	transition: background-color 160ms ease, color 160ms ease;
}
.nav-button:hover { background: rgba(255, 255, 255, .09); color: var(--dash-surface); }
.nav-button.is-active {
	background: rgba(7, 177, 229, .2);
	box-shadow: inset 3px 0 0 var(--dash-blue);
	color: var(--dash-surface);
}
.nav-button i[class^="icon-"] { font-size: 17px; width: 18px; color: rgba(255, 255, 255, .62); flex: none; }
.nav-button.is-active i[class^="icon-"], .nav-button:hover i[class^="icon-"] { color: var(--dash-blue); }
#jfmd-logout-nav { margin-top: 6px; color: var(--dash-logout); }
#jfmd-logout-nav i[class^="icon-"] { color: var(--dash-logout); }
#jfmd-logout-nav:hover { background: rgba(255, 61, 61, .16); color: var(--dash-logout-hot); }
#jfmd-logout-nav:hover i[class^="icon-"] { color: var(--dash-logout-hot); }
.nav-count {
	margin-left: auto;
	min-width: 22px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: var(--dash-surface);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.jf-dash-workspace { min-width: 0; padding: 34px clamp(22px, 4vw, 58px) 48px; }
.jf-dash-topbar { margin-bottom: 24px; }
.jf-dash-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(7, 177, 229, .1);
	color: var(--dash-brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.jf-dash-workspace h1 {
	margin: 10px 0 0;
	color: var(--dash-text);
	font-size: 28px;
	line-height: 1.1;
	text-wrap: balance;
}
.jf-dash-subtitle { max-width: 760px; margin: 9px 0 0; color: var(--dash-muted); font-size: 14px; line-height: 1.55; }

.jf-dash-content {
	background: var(--dash-surface);
	border: 1px solid var(--dash-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 24px;
}
.jf-dash-content:has(> table) { overflow-x: auto; }

.jf-dash-workspace table { width: 100%; border-collapse: separate; border-spacing: 0; }
.jf-dash-workspace th {
	padding: 12px 14px;
	color: var(--dash-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
	border-bottom: 1px solid var(--dash-line);
}
.jf-dash-workspace td { padding: 14px; vertical-align: middle; border-bottom: 1px solid var(--dash-line); }

/* Dashboard audit 2026-09-02: explicit, compact listing operations grid. */
/* 2026-09-04: this was briefly `overflow-x: auto` (an attempt to let the
   real-column table scroll inside its own card at >=1361px rather than
   blow out the page) - since fixed at the actual source instead (the
   table's min-width now really applies, and the Actions column's real
   28% share/1361px breakpoint means the table fits its card without ever
   needing to scroll), so that's no longer needed. Left it here anyway
   until it surfaced a second bug: overflow-x on anything but 'visible'
   forces overflow-y to compute as 'auto' too (CSS overflow spec) even
   though it was never set - turning this card into its own scrolling
   container, which made the sticky .jfmd-jobs-toolbar inside it stick
   relative to the CARD's small scrollport instead of the page. On a
   short card (a genuine empty state - confirmed live on a real day-0
   employer test account with zero listings) that visually shoved the
   toolbar ~100px down, overlapping the "No listings" message right
   below it instead of sitting above it. overflow:visible (the default,
   simply omitted here) removes the scroll container and fixes both. */
.jfmd-jobs-table { table-layout: fixed; }
.jfmd-jobs-col-listing { width: 30%; }
.jfmd-jobs-col-health { width: 14%; }
.jfmd-jobs-col-applications { width: 12%; }
/* 2026-09-04: Updated gives up 4% to Actions below - the real fix for
   View+Edit+More spilling past the table's own right edge. See that
   rule's comment for the actual numbers. */
.jfmd-jobs-col-updated { width: 16%; }
/* 24% of even this table's own 900px min-width leaves only 216px for the
   Actions cell, minus its 2x16px padding = 184px of real content room -
   but View+Edit+More at their natural sizes plus 2x8px gaps measure
   ~194px (confirmed live via getBoundingClientRect: 61+54+63+16=194px).
   That 10px shortfall is exactly why the button group visibly spilled
   past the table/card's right edge even after the min-width fix above -
   table-layout:fixed never lets a column grow to fit overflowing content,
   so it just renders past the cell with nothing to clip it. 28% gives
   900px x 0.28 - 32 = 220px of real room, 26px of margin instead of being
   10px short. */
.jfmd-jobs-col-actions { width: 28%; }
.jfmd-jobs-table th,
.jfmd-jobs-table td { padding: 14px 16px; }
.jfmd-jobs-table .jm-dashboard-job { height: auto; }
.jfmd-tabular-number { font-variant-numeric: tabular-nums; }
.jfmd-job-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
.jfmd-job-actions .btn { flex: none; white-space: nowrap; }
/* Long labels must never break inside a button or squeeze the row:
   the table gets a real min-width (same pattern as .jfmd-resumes-table
   below) and the card's own overflow-x:auto provides the scroll instead. */
.jfmd-jobs-table .btn { white-space: nowrap; }
.jfmd-jobs-table td { overflow-wrap: anywhere; }
/* 2026-09-04 jobs-tab audit ("line broke issue if the job text is long"):
   long titles wrap the listing cell taller, and under
   border-collapse:separate every td paints its own bottom border - any
   height difference leaves a visibly gapped divider before the Actions
   cell. Collapsed borders merge into one continuous row line that cannot
   split per-cell. Applied to every dashboard data table, not just jobs. */
.jfmd-jobs-table, .jfmd-actions-card table, .jfmd-resumes-table { border-collapse: collapse; }
/* 2026-09-04 follow-up: the divider is now owned by the ROW, not the
   cells - a single tr-level line cannot split per-cell no matter how tall
   any one cell grows. thead keeps its own header rule below. */
.jfmd-jobs-table tbody tr, .jfmd-actions-card tbody tr, .jfmd-resumes-table tbody tr { border-bottom: 1px solid var(--dash-line); }
.jfmd-jobs-table tbody td, .jfmd-actions-card tbody td, .jfmd-resumes-table tbody td { border-bottom: 0; }
/* Long listing titles are links, not the single-line-clamped <strong>,
   so they wrap freely - cap at two lines to keep rows scannable. */
.jfmd-jobs-table .name-stack .job-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.jfmd-job-actions form { margin: 0; }
.jfmd-action-menu { position: relative; }
.jfmd-action-menu > summary { list-style: none; cursor: pointer; gap: 7px; }
.jfmd-action-menu > summary i { width: 14px; height: 14px; transition: transform .16s ease; }
.jfmd-action-menu[open] > summary i { transform: rotate(180deg); }
.jfmd-action-menu > summary::-webkit-details-marker { display: none; }
/* 2026-09-04 responsiveness audit: giving .jfmd-action-menu-panel below
   position:absolute (needed so the dropdown floats over sibling rows)
   silently disables the browser's native "hide non-summary content while
   <details> is closed" behavior - a positioned child is taken out of flow
   and no longer covered by that mechanism. With no [open]-gated display
   rule to replace it, every CLOSED menu on the page (Jobs, Applications,
   Candidates, Interviews, referral tables, Resumes, Bookmarks, Recently
   Removed - anywhere this component appears) stayed fully laid out and
   painted at a fixed offset, invisibly inflating document.body.scrollWidth
   and adding phantom horizontal scroll on every breakpoint. Confirmed live
   via getComputedStyle before this fix: display:block, visibility:visible,
   opacity:1 on a panel whose <details> had no [open] attribute.  */
.jfmd-action-menu:not([open]) > .jfmd-action-menu-panel { display: none; }
.jfmd-action-menu-panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	right: 0;
	min-width: 210px;
	padding: 6px;
	background: var(--dash-surface);
	border: 1px solid var(--dash-line);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(3, 10, 28, .12);
}
/* Last-row popover flips upward: with 5 items the panel (~220px) runs past
   the card/viewport bottom when opened downward from the final table row
   (reported live: Reject action clipped). Pure-CSS :last-child covers every
   table using this shared component; no per-tab JS needed. */
table tbody tr:last-child .jfmd-action-menu-panel { top: auto; bottom: calc(100% + 6px); }
.jfmd-menu-action {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--dash-text);
	font: inherit;
	font-size: 13px;
	text-align: left;
	line-height: 1.3;
	cursor: pointer;
}
/* 2026-09-03 popover audit ("some are bold some are not") - jobsfor-public-
   ui.css's `body:not(.wp-admin) button { font-weight: 750 }` (specificity
   0-1-2) bolds every plain <button> on the site and outranks a bare
   `.jfmd-menu-action { font-weight: 400 }` (0-1-0) - these menu items mix
   <a> (links, unaffected by that rule) and <button> (form actions: Reject
   application/Message candidate/etc.), which is exactly why some read bold
   and others did not. Qualified with the panel ancestor (0-2-0) instead of
   reaching for !important, same pattern already used elsewhere in this file
   (see .jf-recycle-bin .jf-member-button.jf-member-button--danger). */
.jfmd-action-menu-panel .jfmd-menu-action { font-weight: 400; }
/* 2026-09-03 popover audit ("on hover the text is white and light bg text
   is unreadable") - the parent theme's base style.css has a generic
   `button:hover { color: var(--dash-surface) }` rule. This rule's own :hover background
   already beat it on specificity, but never declared `color` itself, so
   that vendor white stayed in effect on <button> menu items (Reject
   application/Message candidate/etc.) - readable on <a> items only, since
   `button:hover` cannot match a link. Explicit color closes that gap
   regardless of which tag the item happens to be. */
.jfmd-menu-action:hover,
.jfmd-menu-action:focus-visible { background: var(--dash-canvas); color: var(--dash-text); outline: 2px solid var(--dash-blue); outline-offset: -2px; }
.jfmd-menu-action-danger { color: var(--dash-red); }
.jfmd-menu-action-danger:hover,
.jfmd-menu-action-danger:focus-visible { background: var(--dash-danger-wash); outline-color: var(--dash-danger-hot); color: var(--dash-red); }
/* Success counterpart to the danger rule above: positive stage moves
   (Move to offer, Mark hired) read green, mirroring red Reject. */
.jfmd-action-menu-panel .jfmd-menu-action--success { color: var(--dash-green); }
.jfmd-menu-action--success:hover,
.jfmd-menu-action--success:focus-visible { background: var(--dash-green-wash); outline-color: var(--dash-green); color: var(--dash-green-ink); }
.jfmd-row-actions { width: 1%; white-space: nowrap; text-align: right; }
.jfmd-row-actions .jfmd-action-menu,
.jfmd-card-actions .jfmd-action-menu { display: inline-block; text-align: left; }
.jfmd-card-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
/* Long Context/Resume text in the Applications table must wrap instead of
   pushing the page wide (this card keeps overflow:visible for popovers,
   so there is no scroll container to absorb it). */
.jfmd-actions-card table td { overflow-wrap: anywhere; }
/* The prototype shell sizes every input 44px-tall full-width - correct
   for text inputs, wrong for checkboxes/radios (e.g. the my-referrals
   approval checkbox rendered 44px tall full-width). Scoped to the card
   lists only, so the custom Preferences checkbox styling is untouched. */
.jfmd-card-list input[type="checkbox"],
.jfmd-card-list input[type="radio"],
.jfmd-actions-card input[type="checkbox"],
.jfmd-actions-card input[type="radio"] { width: auto; min-height: auto; }
/* Long referral emails inside chips wrap instead of overflowing 320px. */
.jfmd-referred-chip { overflow-wrap: anywhere; min-width: 0; }
/* Referral-suite popovers carry 240-260px inline min-widths - cap them
   to the viewport so they never overflow small screens. */
.jfrs-app .jfmd-action-menu-panel { max-width: calc(100vw - 48px); overflow-wrap: anywhere; }

.jfmd-resumes-card,
.jfmd-actions-card { overflow: visible; }
/* 2026-09-03 popover audit: this page's HTML shell is the prototype's own
 * static source.html, loaded verbatim via file_get_contents() in
 * template-dashboard-revamp-preview.php - its embedded <style> block (not
 * this file) is what actually defines `.card:has(> table) { overflow-x:
 * auto; }`. Setting overflow-x to anything but visible forces overflow-y to
 * compute as auto too (CSS overflow spec), which silently re-clips the
 * .jfmd-resumes-card/.jfmd-actions-card rule right above regardless of
 * source order - confirmed live: the action-menu-panel popover was being
 * cut off mid-row by its own card's bottom edge instead of floating over
 * it. !important + :has() targets every card that actually holds a popover,
 * without having to keep this list of card classes in sync with that
 * unrelated file by hand. */
.card:has(.jfmd-action-menu-panel) { overflow: visible !important; }
.jfmd-resumes-table { table-layout: fixed; }
.jfmd-resumes-table th, .jfmd-resumes-table td { padding: 16px 14px; }
.jfmd-resume-title { display: grid; gap: 9px; align-content: center; }
.jfmd-resume-title strong { line-height: 1.3; overflow-wrap: anywhere; }
.jfmd-resume-meta { color: var(--dash-muted); font-size: 12px; }
.jfmd-resume-primary { justify-self: start; }
.jfmd-resume-visibility { color: var(--dash-text); line-height: 1.45; }
.jfmd-resume-actions-inner {
	display: flex;
	justify-content: flex-end;
	min-width: 110px;
}
.jfmd-resume-actions-inner form { margin: 0; }

/* DUMB-USER RULE (2026-09-05): no horizontal-scroll tables on touch
   layouts - every decision table becomes labeled cards instead. The
   employer-hub listings table only stacked at <=860px, so at 861-1100px
   (tablet + sidebar) it stayed 5-across with View scrolled out of sight.
   Two densities: compact 3-up meta grid on tablet (room to spare),
   roomy label/value rows on phones. */
@media (max-width: 1100px) {
	/* 2026-09-04 responsiveness audit: dashboard-revamp/source.html's own
	   unconditional `.card > table { min-width: 760px }` (>=861px, no
	   media query) is MORE specific than it looks and was still winning
	   here despite the width:100% below - it targets the <table> itself,
	   which this block doesn't touch. That forced the table (and every
	   width:100% row inside it) to 760px regardless of the card's real
	   width, clipping the Referral column clean off at 900px (card only
	   ~523px). This table never needs a min-width - it stacks/grids at
	   every width <=1100px - so it's zeroed out unconditionally here. */
	.card > table.jfmd-hub-table { min-width: 0; }
	.card > table.jfmd-hub-table,
	.card > table.jfmd-hub-table tbody,
	.card > table.jfmd-hub-table tr,
	.card > table.jfmd-hub-table td { display: block; width: 100%; }
	.card > table.jfmd-hub-table thead { display: none; }
	.card > table.jfmd-hub-table tr { padding: 12px 16px; border-bottom: 1px solid var(--dash-line); }
	.card > table.jfmd-hub-table tr:last-child { border-bottom: 0; }
	.card > table.jfmd-hub-table td { padding: 7px 0; border: 0; overflow-wrap: anywhere; }
	.card > table.jfmd-hub-table td::before { content: attr(data-label); color: var(--dash-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
	.card > table.jfmd-hub-table td .btn { width: 100%; }
}
@media (min-width: 861px) and (max-width: 1100px) {
	/* Tablet: title full-width, Health/Applications/Referral side by
	   side, action full-width - one tight card per listing instead of
	   five full-width rows. */
	/* 2026-09-04 responsiveness audit: this rule switches the row from the
	   block above's `display:block; width:100%` to `display:grid` without
	   re-declaring `width:100%` for the grid box - confirmed live at 900px
	   the row's 3 grid tracks resolved to 696px total inside a card only
	   ~523px wide, clipping the Referral column (header and pill) clean
	   off instead of overflowing the page (no horizontal scroll to reveal
	   it either). Explicit width:100% keeps the grid inside its card. */
	.card > table.jfmd-hub-table tr { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; }
	.card > table.jfmd-hub-table td:first-child,
	.card > table.jfmd-hub-table td:last-child { grid-column: 1 / -1; }
	.card > table.jfmd-hub-table td { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
	.card > table.jfmd-hub-table td:first-child .name-stack strong { white-space: normal; }
}
@media (min-width: 861px) and (max-width: 1024px) {
	/* 2026-09-04 responsiveness audit ("Tablet Portrait" 769-1024px): every
	   OTHER bare `.card > table` (Applications - both roles' tables via
	   .jfmd-actions-card, Referrer Roster, Referral Applications, Jobs
	   available to refer) falls into a real gap between the <=860px stack
	   above and the >=861px intentional-scroll treatment .jfmd-jobs-table/
	   .jfmd-resumes-table/.jfmd-hub-table already have (excluded here so
	   this doesn't fight their own rules). With no protection at all,
	   native table auto-layout squeezed text columns to unreadable slivers
	   (confirmed live: "Warehouse Inventory Clerk" wrapped one syllable per
	   line) and pushed the Actions column up to 185px off-screen with no
	   visible scroll cue. Same data-label stack pattern as the <=860px
	   block below and dashboard-revamp/source.html's own generic
	   `.card > table` mobile rule, just widened to cover this range too. */
	/* min-width:0 is needed as its own declaration - dashboard-revamp/
	   source.html's unconditional `.card > table { min-width: 760px }`
	   (>=861px, no media query) doesn't compete with `display`/`width`
	   above (this selector already outranks it there), but this rule never
	   touched `min-width` at all, so with nothing to contest it that 760px
	   floor won by default and kept forcing the same overflow this block
	   exists to fix - confirmed live via getComputedStyle. */
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) { min-width: 0; }
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table),
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) tbody,
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) tr,
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) td { display: block; width: 100%; }
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) thead { display: none; }
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) tr { padding: 12px 16px; border-bottom: 1px solid var(--dash-line); }
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) td { padding: 7px 0; border: 0; overflow-wrap: anywhere; }
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) td::before { content: attr(data-label); color: var(--dash-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
	.card > table:not(.jfmd-jobs-table):not(.jfmd-hub-table):not(.jfmd-resumes-table) td .btn { width: 100%; }
	.jfmd-row-actions { display: flex !important; flex-wrap: wrap; width: 100% !important; white-space: normal !important; text-align: left !important; justify-content: flex-start; padding-top: 8px !important; }
	.jfmd-row-actions::before { display: none; }
	/* Same 640px min-width fallback as the <=860px block: nothing left to
	   horizontally scroll once the table stacks. */
	.jfmd-table-scroll { overflow-x: visible !important; }
	.jfmd-table-scroll table { min-width: 0 !important; }
	/* The Referral Suite pages (Referrer Roster, Referral Applications,
	   Payouts, etc. - #ref-referrers/#ref-applications/#ref-payouts/...)
	   are a completely separate module (jobsfor-core's referral-suite.css
	   PLUS its own PHP-embedded inline <style>) implementing this exact
	   same ">860px stack, else min-width for horizontal scroll" pattern
	   independently of this theme file - and it has the identical gap:
	   `.jfrs-app .card > table { min-width: 720px }` / the inline style's
	   `.card > table { min-width: 760px }` both only reset to 0 at
	   <=860px, confirmed live via document.styleSheets. Neutralised here
	   (!important, since both are unconditional/all-widths rules with
	   equal-or-lower specificity than the reset already needed) rather
	   than editing the plugin's own CSS/PHP. */
	.jfrs-app .card > table { min-width: 0 !important; }
}
@media (min-width: 861px) and (max-width: 1360px) {
	/* Jobs and Resumes: min-width:900px/940px (set below, >=861px, no
	   upper bound) makes both deliberately wide tables from 861px up. A
	   first pass tried scrolling each inside its own card (overflow-x:
	   auto), which does avoid a page-wide blowout, but a live check
	   showed why that still reads as broken: with the card's default
	   scroll position at 0, the Actions column's last button ("More")
	   sits right at the visible edge, half cut off, with no scrollbar
	   obvious enough to signal "there's more here" (confirmed via a real
	   screenshot at 946px - View and Edit fully visible, More sliced in
	   half at the boundary). That also fights this dashboard's own stated
	   design rule two dozen lines up ("DUMB-USER RULE: no horizontal-
	   scroll tables on touch layouts - every decision table becomes
	   labeled cards instead"), which every OTHER table already follows.
	   Stacking these two the same way instead - identical to their own
	   <=860px rules further down - is consistent with that rule and
	   removes the half-cut-button look entirely.
	   Upper bound 1360px: the card these tables sit in doesn't actually
	   reach the table's real 900px/940px min-width until the viewport is
	   roughly 400-410px wider than that (sidebar + workspace padding
	   eating the rest), so the card is only ~800px wide at a 1201px
	   viewport and doesn't clear 900px until somewhere around 1310px -
	   confirmed live via getBoundingClientRect on the card and the
	   Actions column's own last button: still spilling past both the card
	   AND the page at 1201px/1220px/1300px, clean by 1310px. That offset
	   also isn't perfectly fixed - it moves a little with things outside
	   this CSS's control (admin-bar/Query-Monitor-bar presence). 1360px
	   covers it with real margin instead of landing exactly on the
	   measured crossover. */
	.jfmd-jobs-table,
	.jfmd-jobs-table tbody,
	.jfmd-jobs-table tr,
	.jfmd-jobs-table td { display: block !important; width: 100% !important; min-width: 0 !important; }
	.jfmd-jobs-table colgroup,
	.jfmd-jobs-table thead { display: none; }
	.jfmd-jobs-table tr { padding: 14px 16px; border-bottom: 1px solid var(--dash-line); }
	/* Label left, value right on the same line (rather than the 2-column
	   grid used at <=860px) - per direct design direction ("this design
	   makes most sense"), pointing at this exact treatment. !important:
	   the rule right above also sets td's OWN display to block !important
	   (needed for the min-width fight further up this file), which would
	   otherwise beat a non-important override the same way it broke the
	   original grid attempt here. */
	.jfmd-jobs-table td { display: flex !important; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border: 0; text-align: right; }
	.jfmd-jobs-table td::before { content: attr(data-label); flex: 0 0 auto; padding-top: 2px; color: var(--dash-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
	/* Actions: buttons stay horizontal (row, wrapping) at this tablet/
	   small-desktop width - vertical/full-width stacking is reserved for
	   the real <=860px tablet-and-below breakpoint further down, per
	   direct design direction ("aligned horizontally then on tablet
	   mobile vertically"). The `td` type selector on the first selector
	   matches the label/value rule above's specificity (Actions is both
	   `.jfmd-jobs-table td` and `.jfmd-job-actions`) so this wins as the
	   later declaration instead of silently losing to it. */
	.jfmd-jobs-table td.jfmd-job-actions,
	.jfmd-job-actions { display: flex !important; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; padding-top: 10px !important; text-align: left; }
	.jfmd-job-actions::before { display: block; flex: 1 0 100%; padding-top: 0; text-align: left; }
	.jfmd-resumes-table,
	.jfmd-resumes-table tbody,
	.jfmd-resumes-table tr,
	.jfmd-resumes-table td { display: block !important; width: 100% !important; min-width: 0 !important; }
	.jfmd-resumes-table { table-layout: auto; }
	.jfmd-resumes-table colgroup,
	.jfmd-resumes-table thead { display: none !important; }
	.jfmd-resumes-table tr { padding: 14px 0; }
	.jfmd-resumes-table td { padding: 9px 16px; text-align: left !important; }
	.jfmd-resumes-table td[data-label]::before { margin-bottom: 5px; }
	/* This stacking block and the bare >=861px block further down both
	   declare `.jfmd-jobs-table`/`.jfmd-resumes-table` min-width with
	   !important, at equal specificity - and the bare block comes LATER
	   in this file, so its 900px/940px !important was winning the tie and
	   re-widening the table even while every other property here had it
	   correctly stacked (confirmed live: table display:block but width
	   still 900px at 1201px). #jobs/#resumes-scoped selectors (ID beats
	   class regardless of source order) settle it in this range's favor. */
	#jobs .jfmd-jobs-table { min-width: 0 !important; }
	#resumes .jfmd-resumes-table { min-width: 0 !important; }
}
@media (max-width: 860px) {
	/* Phones: 2-col label/value rows - except the title cell, which
	   spans full-width so long job titles wrap instead of truncating
	   to "Registered Nur…". */
	.card > table.jfmd-hub-table td { display: grid; grid-template-columns: minmax(80px, 132px) minmax(0, 1fr); gap: 10px; }
	.card > table.jfmd-hub-table td:first-child { display: flex; flex-direction: column; gap: 3px; }
	.card > table.jfmd-hub-table td:first-child .name-stack strong { white-space: normal; overflow: visible; }
	.jf-employer-list table td:first-child { display: flex; flex-direction: column; gap: 3px; }
	.jf-employer-list table td:first-child .name-stack strong { white-space: normal; overflow: visible; }
}

@media (min-width: 861px) {
	/* Actions column needs ~270px for View + Edit + More on one line;
	   without this the fixed 24% share squeezes buttons until their
	   labels wrap and row dividers look broken. */
	/* 2026-09-04: this 900px floor was never actually winning - dashboard-
	   revamp/source.html's own unconditional `.card > table { min-width:
	   760px }` (0,1,1 specificity) always beat this plain `.jfmd-jobs-table`
	   rule (0,1,0), so the table only ever got 760px, 140px short of the
	   900px this column math assumes. Confirmed live at 1220px: table
	   rendered at 817px (matching its card, not 900), Actions column only
	   196px, and the View/Edit/More group spilled 14px past its own td/
	   table/card right edge - real, visible, independent of whether it
	   also blows out the page (it didn't, at that width, which is why the
	   page-level scrollWidth checks alone missed it). !important corrects
	   the actual specificity fight instead of chasing which viewport width
	   happens to expose it. */
	.jfmd-jobs-table { min-width: 900px !important; }
	/* Dashboard-wide: button labels never break mid-label on desktop.
	   Scoped to min-width:861px so the stacked mobile layout (full-width
	   buttons) keeps its wrapping behavior. */
	.card table .btn { white-space: nowrap; }
	/* Same specificity fight as .jfmd-jobs-table above - source.html's
	   760px floor was winning over this 940px one too. */
	.jfmd-resumes-table { min-width: 940px !important; }
	.jfmd-resumes-table col:nth-child(1) { width: 46%; }
	.jfmd-resumes-table col:nth-child(2) { width: 12%; }
	.jfmd-resumes-table col:nth-child(3) { width: 22%; }
	.jfmd-resumes-table col:nth-child(4) { width: 20%; }
	.jf-dash-content .jfmd-resumes-table td.jfmd-resume-actions { white-space: normal; }
}

.jf-dash-mobile-toggle {
	display: none;
	position: fixed;
	right: var(--mobile-toggle-gap);
	bottom: calc(var(--mobile-toggle-gap) + env(safe-area-inset-bottom, 0px));
	z-index: 1102;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--dash-navy);
	color: var(--dash-surface);
	box-shadow: 0 10px 28px rgba(3, 10, 28, .24);
	font-size: 18px;
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease-out;
}
.jf-dash-mobile-toggle.is-open {
	background: var(--dash-red);
	box-shadow: 0 10px 28px rgba(180, 35, 24, .32);
}
.jf-dash-mobile-toggle:active { transform: scale(.96); }
.jf-dash-mobile-toggle .jf-dash-toggle-close { display: none; }
.jf-dash-mobile-toggle.is-open .jf-dash-toggle-menu { display: none; }
.jf-dash-mobile-toggle.is-open .jf-dash-toggle-close { display: inline-block; }
.jf-dash-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(3, 10, 28, .54);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
}
.jf-dash-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 860px) {
	.jf-dash-shell { grid-template-columns: 1fr; }
	.jf-dash-sidebar {
		position: fixed;
		inset: var(--mobile-header-offset) auto 0 0;
		width: min(86vw, 320px);
		z-index: 1101;
		transform: translateX(-100%);
		transition: transform 200ms ease;
	}
	.jf-dash-sidebar.is-open { transform: translateX(0); }
	.jf-dash-workspace { padding: 24px 16px calc(112px + env(safe-area-inset-bottom, 0px)); }
	.jf-dash-workspace h1 { font-size: 23px; }
	/* Mobile is a work queue, not a stack of desktop showcase cards. */
	.jf-dash-workspace .grid.grid-3,
	.jf-dash-workspace .grid.grid-4 { gap: 10px; }
	.jf-dash-workspace .metric { min-height: 0; padding: 14px 16px; }
	.jf-dash-workspace .metric-value { margin-top: 8px; font-size: 24px; }
	.jf-dash-workspace .metric-sub { margin-top: 3px; }
	.jf-dash-mobile-toggle { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
	.jf-dash-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.jfmd-resumes-card { padding: 0; }
	.jfmd-jobs-card { overflow: hidden; }
	.jfmd-jobs-table,
	.jfmd-jobs-table tbody,
	.jfmd-jobs-table tr,
	.jfmd-jobs-table td { display: block; width: 100%; }
	.jfmd-jobs-table colgroup,
	.jfmd-jobs-table thead { display: none; }
	.jfmd-jobs-table tr { padding: 14px 16px; border-bottom: 1px solid var(--dash-line); }
	/* Same label-left/value-right row treatment as the 861-1360px tablet
	   block above (see that block's comment) - kept in sync so the two
	   ranges only differ in button orientation, per direct design
	   direction. */
	.jfmd-jobs-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border: 0; text-align: right; }
	.jfmd-jobs-table td::before { content: attr(data-label); flex: 0 0 auto; padding-top: 2px; color: var(--dash-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
	/* 2026-09-04 responsiveness audit: flex-wrap was missing here, so with
	   2-3 buttons (View/Edit/More, or View/Continue editing/More) the flex
	   row refused to wrap and forced itself onto one unbroken line -
	   confirmed live dragging the whole page ~400-700px wider than a
	   375-700px viewport. Vertical/full-width (View and Edit stacked,
	   easiest to tap; More compact underneath) rather than the tablet
	   block's horizontal wrap, per direct design direction ("aligned
	   horizontally then on tablet mobile vertically"). */
	.jfmd-job-actions { display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding-top: 10px !important; text-align: left; }
	.jfmd-job-actions::before { display: block; padding-top: 0; text-align: left; }
	.jfmd-job-actions > a.btn,
	.jfmd-job-actions > button.btn,
	.jfmd-job-actions > details.jfmd-action-menu,
	.jfmd-job-actions > details.jfmd-action-menu > summary.btn { width: 100%; }
	.jfmd-job-actions > details.jfmd-action-menu > summary.btn { justify-content: center; }
	/* .jfmd-row-actions (Applications, both roles' tables; referral suite
	   tables via the .card > table generic stack below) never had a mobile
	   override at all - its only rule (unconditional, this file) is
	   `width:1%; white-space:nowrap; text-align:right`, meant for the
	   desktop table layout. On a stacked mobile row that forces its
	   Message/Actions buttons onto one unbroken line, overflowing the page
	   exactly like .jfmd-job-actions did above. */
	.jfmd-row-actions { display: flex !important; flex-wrap: wrap; width: 100% !important; white-space: normal !important; text-align: left !important; justify-content: flex-start; padding-top: 10px !important; }
	.jfmd-row-actions::before { display: none; }
	.jfmd-action-menu-panel { right: auto; left: 0; }
	.jfmd-resumes-table,
	.jfmd-resumes-table tbody,
	.jfmd-resumes-table tr,
	.jfmd-resumes-table td {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
	}
	.jfmd-resumes-table { table-layout: auto; }
	.jfmd-resumes-table colgroup,
	.jfmd-resumes-table thead { display: none !important; }
	.jfmd-resumes-table tr { padding: 14px 0; }
	.jfmd-resumes-table td { padding: 9px 16px; text-align: left !important; }
	.jfmd-resumes-table td[data-label]::before { margin-bottom: 5px; }
	.jfmd-resume-actions-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
	/* Candidates/Interviews (functions.php jobsfor_employer_application_rows():
	   table nested in div.jf-member-list inside .card, so the generic
	   .card > table rules never match it - same 2-col label/value stack
	   as the jobs table above, driven by the data-labels on each td. */
	.jf-employer-list table,
	.jf-employer-list table tbody,
	.jf-employer-list table tr,
	.jf-employer-list table td { display: block; width: 100%; }
	.jf-employer-list table thead { display: none; }
	.jf-employer-list table tr { padding: 12px 16px; border-bottom: 1px solid var(--dash-line); }
	.jf-employer-list table td { display: grid; grid-template-columns: minmax(80px, 132px) minmax(0, 1fr); gap: 10px; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
	.jf-employer-list table td::before { content: attr(data-label); color: var(--dash-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
	.jf-employer-list table td.jfmd-row-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-start; padding-top: 10px !important; }
	.jf-employer-list table td.jfmd-row-actions::before { display: none; }
	/* Recently Removed (functions.php jobsfor_member_recycle_bin_shortcode():
	   same nesting problem - table inside div.jf-member-list inside .card.
	   Stacks the same way; search row wraps so input + Search + Clear
	   never crowd at 320px. Higher specificity (.card prefix) to beat the
	   compat layer's own 42px search sizing. */
	.jf-recycle-bin table,
	.jf-recycle-bin table tbody,
	.jf-recycle-bin table tr,
	.jf-recycle-bin table td { display: block; width: 100%; }
	.jf-recycle-bin table thead { display: none; }
	.jf-recycle-bin table tr { padding: 12px 16px; border-bottom: 1px solid var(--dash-line); }
	.jf-recycle-bin table td { display: grid; grid-template-columns: minmax(80px, 132px) minmax(0, 1fr); gap: 10px; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
	.jf-recycle-bin table td::before { content: attr(data-label); color: var(--dash-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
	.card .jf-recycle-bin__search { display: flex; flex-wrap: wrap; }
	.card .jf-recycle-bin__search input,
	.card .jf-recycle-bin__search button,
	.card .jf-recycle-bin__search .jf-member-button { min-height: 44px; }
	.card .jf-recycle-bin__search input { flex: 1 1 200px; min-width: 0; }

	/* Applications table (#applications .jfmd-actions-card.jfmd-table-scroll,
	   the employer view) - 2026-09-05 audit ("data table responsive
	   issues"): the generic .card > table mobile stack rule (this file's
	   own inline <style>, sourced from dashboard-revamp/source.html,
	   ~line 752: ".card > table tbody/tr/td { display:block }") already
	   handles every other bare `.card > table` on this page - including
	   the Applications table itself - and does not need duplicating here.
	   The one thing actually broken: .jfmd-table-scroll (jobsfor-public-ui.css)
	   pins the table to a 640px min-width inside an overflow-x:auto
	   wrapper as an intentional horizontal-scroll fallback, which fights
	   that stack and drags the whole page ~267px wider than a 390px
	   viewport (confirmed live via getComputedStyle: table width 640px,
	   document.body.scrollWidth 657 vs window.innerWidth 390, at the
	   generic stack rule's own 860px breakpoint). Once the table is
	   stacking into labeled rows there is nothing left to scroll
	   horizontally for. !important because jobsfor-public-ui.css's
	   .jfmd-table-scroll rule is (for unrelated reasons) re-printed a
	   second time after this stylesheet on this template - confirmed live
	   via document.styleSheets (two <link> tags for jobsfor-public-ui.css
	   with this file sandwiched between them) - so equal-specificity
	   source order alone would let that later copy win back. */
	.jfmd-table-scroll { overflow-x: visible !important; }
	.jfmd-table-scroll table { min-width: 0 !important; }
}

@media (max-width: 480px) {
	.jfmd-resume-actions-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.jf-dash-shell *, .jf-dash-shell *::before, .jf-dash-shell *::after { transition: none !important; }
}

/* "Back to homepage" arrow: same hover-turns-accent-blue convention already
   used by .nav-button's own icons (source.html only sets a background tint
   on .brand:hover .brand-mark, never touches the icon's own color). */
.brand:hover .brand-mark svg { color: var(--dash-blue); }