/* ================================================================
FORGE Operator Redesign — additive layer
Load AFTER /assets/css/styles.css and /assets/css/forge-motion.css.
Every class here is new; nothing here overrides an existing token.
================================================================ */
/* —— Density token (controlled via [data-density] on ) ——— */
:root { --density-row: 18px; }
[data-density="comfortable"] { --density-row: 22px; }
[data-density="compact"] { --density-row: 12px; }
.tbl td { padding-top: var(--density-row); padding-bottom: var(--density-row); }
/* —— Section spine ——————————————————————————————————————————— */
.fg-section { padding: clamp(40px, 5vw, 72px) 0; }
.fg-section--tight { padding: clamp(28px, 3vw, 48px) 0; }
.fg-sec-head { margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
.fg-sec-eyebrow {
font-family: var(--mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent);
}
.fg-sec-title { font-weight: 700; font-size: 22px; letter-spacing: -0.018em; color: var(--text); }
.fg-sec-sub { color: var(--text-2); font-size: 14px; max-width: 60ch; }
/* —— Cards ———————————————————————————————————————————————————— */
.fg-card {
border: 1px solid var(--hairline);
background: var(--off-black);
position: relative;
}
.fg-card--accent { border-color: var(--accent-edge); background: rgba(139,186,60,0.04); }
.fg-card--danger { border-color: rgba(224,82,82,0.25); background: rgba(224,82,82,0.04); }
.fg-card__corner {
position: absolute; width: 10px; height: 10px;
border-color: var(--accent); border-style: solid; border-width: 0;
}
.fg-card__corner--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.fg-card__corner--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.fg-card__corner--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.fg-card__corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
/* —— KPI tiles —————————————————————————————————————————————— */
.kpi { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.kpi__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.kpi__value { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.kpi__sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; }
.kpi__delta--up { color: var(--accent); }
.kpi__delta--down { color: var(--urgent); }
/* —— Progress bar ——————————————————————————————————————————— */
.bar { width: 100%; height: 4px; background: var(--surface-2); position: relative; overflow: hidden; }
.bar__fill { height: 100%; background: var(--accent); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.bar--thin { height: 2px; }
.bar--thick { height: 6px; }
/* —— Hover row (editorial list) ——————————————————————————————— */
.hover-row {
display: grid; align-items: center;
text-decoration: none; color: inherit;
position: relative; cursor: pointer;
transition: background 0.15s ease;
}
.hover-row::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: 2px; background: var(--accent);
transform: scaleY(0); transform-origin: center;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-row:hover { background: rgba(255,255,255,0.02); }
.hover-row:hover::after { transform: scaleY(1); }
/* —— Pills (filter chips with counts) ————————————————————————— */
.pill {
font-family: var(--mono); font-size: 10px;
padding: 5px 10px;
letter-spacing: 0.1em;
background: var(--off-black);
color: var(--text-2);
border: 1px solid var(--hairline);
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none;
}
.pill:hover { color: var(--text); border-color: var(--hairline-bright); }
.pill--on { background: var(--accent); color: var(--black); border-color: var(--accent); }
.pill__count {
font-size: 9px; padding: 1px 5px;
background: rgba(0,0,0,0.18); border-radius: 1px;
}
.pill--on .pill__count { background: rgba(0,0,0,0.25); color: var(--black); }
/* —— Timeline (status progress) ——————————————————————————————— */
.timeline { display: flex; gap: 0; align-items: stretch; }
.timeline__step {
flex: 1;
display: flex; flex-direction: column; gap: 6px;
padding: 14px 14px 14px 18px;
border-left: 2px solid var(--hairline);
position: relative;
min-width: 0;
}
.timeline__step::before {
content: "";
position: absolute;
left: -5px; top: 18px;
width: 8px; height: 8px;
background: var(--surface-3);
border: 2px solid var(--off-black);
}
.timeline__step--done { border-left-color: var(--accent); }
.timeline__step--done::before { background: var(--accent); }
.timeline__step--current { border-left-color: var(--accent); }
.timeline__step--current::before {
background: var(--accent);
animation: pulse 2s infinite;
}
.timeline__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.timeline__step--done .timeline__label,
.timeline__step--current .timeline__label { color: var(--accent); }
.timeline__title { font-size: 13px; font-weight: 600; color: var(--text); }
.timeline__step:not(.timeline__step--done):not(.timeline__step--current) .timeline__title { color: var(--text-3); }
.timeline__meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.06em; }
/* —— Match-score ring (used with the SVG in snippets/match-ring.php) */
.match {
display: inline-grid; place-items: center;
font-family: var(--mono); font-weight: 600;
color: var(--accent);
position: relative;
}
.match svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.match circle { fill: none; stroke-width: 3; }
.match .bg { stroke: var(--surface-2); }
.match .fg { stroke: var(--accent); stroke-linecap: square; transition: stroke-dashoffset 0.6s cubic-bezier(0.16,1,0.3,1); }
/* —— Sparkline ————————————————————————————————————————————— */
.sparkline { width: 100%; display: block; }
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.sparkline .sl-fill { fill: var(--accent-dim); stroke: none; }
/* —— Tabs (job-detail body) ——————————————————————————————————— */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hairline); }
.tab {
padding: 12px 18px;
font-family: var(--mono); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-3);
cursor: pointer;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease;
display: inline-flex; align-items: center; gap: 8px;
background: none; border-top: 0; border-left: 0; border-right: 0;
}
.tab:hover { color: var(--text-2); }
.tab--active { color: var(--text); border-bottom-color: var(--accent); }
.tab__count {
font-family: var(--mono); font-size: 9px;
color: var(--text-3);
padding: 2px 5px; background: var(--surface-2);
}
.tab--active .tab__count { color: var(--accent); background: var(--accent-dim); }
/* CSS-only tab panel pattern. Pair each tab with:
...
*/
.tab-panel { display: none; }
input[name="jdt"]#jdt-spec:checked ~ .tab-panel[data-tab="spec"] { display: block; }
input[name="jdt"]#jdt-files:checked ~ .tab-panel[data-tab="files"] { display: block; }
input[name="jdt"]#jdt-msgs:checked ~ .tab-panel[data-tab="messages"] { display: block; }
input[name="jdt"]#jdt-risk:checked ~ .tab-panel[data-tab="risk"] { display: block; }
input[name="jdt"]#jdt-spec:checked ~ .tabs label[for="jdt-spec"],
input[name="jdt"]#jdt-files:checked ~ .tabs label[for="jdt-files"],
input[name="jdt"]#jdt-msgs:checked ~ .tabs label[for="jdt-msgs"],
input[name="jdt"]#jdt-risk:checked ~ .tabs label[for="jdt-risk"] {
color: var(--text);
border-bottom-color: var(--accent);
}
/* —— Map (INDOPACOM coverage) ————————————————————————————————— */
.fg-map {
position: relative;
background:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px,
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px,
radial-gradient(circle at 35% 60%, rgba(139,186,60,0.07), transparent 50%),
var(--off-black);
overflow: hidden;
border: 1px solid var(--hairline);
}
.fg-map__crosshair {
position: absolute;
width: 1px; background: var(--hairline-bright);
pointer-events: none;
}
.fg-map__pin {
position: absolute;
transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: none; border: 0; padding: 0; cursor: pointer;
}
.fg-map__pin .pin-dot {
width: 8px; height: 8px;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(139,186,60,0.18);
}
.fg-map__pin .pin-dot--secondary {
background: var(--text-3);
box-shadow: 0 0 0 3px rgba(106,106,106,0.18);
}
.fg-map__pin .pin-dot--self {
background: var(--accent-bright);
box-shadow:
0 0 0 6px rgba(139,186,60,0.22),
0 0 14px rgba(139,186,60,0.55);
animation: pulse 2s infinite;
}
.fg-map__pin .pin-label {
font-family: var(--mono); font-size: 9px;
letter-spacing: 0.1em;
color: var(--text-2);
background: rgba(0,0,0,0.55);
border: 1px solid var(--hairline);
padding: 2px 5px;
white-space: nowrap;
}
/* —— Equipment row (dashboard floor + profile manager) ———————— */
.equip-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--hairline-dim);
}
.equip-row:last-child { border-bottom: none; }
.equip-icon {
width: 36px; height: 36px;
background: var(--surface);
border: 1px solid var(--hairline);
display: grid; place-items: center;
color: var(--text-2);
}
/* —— Alerts ———————————————————————————————————————————————— */
.alert {
padding: 14px 18px;
border: 1px solid;
font-size: 13px;
display: flex; align-items: center; gap: 12px;
}
.alert--success { border-color: var(--accent-edge); background: var(--accent-dim); color: var(--text); }
.alert--error { border-color: rgba(224,82,82,0.35); background: rgba(224,82,82,0.08); color: var(--text); }
.alert--info { border-color: var(--hairline-bright); background: var(--off-black); color: var(--text); }
/* —— Toast ———————————————————————————————————————————————— */
.toast-stack {
position: fixed; bottom: 24px; right: 24px;
display: flex; flex-direction: column; gap: 10px;
z-index: 9999; pointer-events: none;
}
.toast {
background: var(--off-black);
border: 1px solid var(--accent-edge);
border-left: 2px solid var(--accent);
padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
min-width: 280px; max-width: 380px;
font-size: 13px;
color: var(--text);
animation: toast-in 0.35s cubic-bezier(0.16,1,0.3,1);
pointer-events: auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.toast__title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.toast__msg { color: var(--text-2); font-size: 12px; margin-top: 2px; }
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* —— Modal ————————————————————————————————————————————————— */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.78);
backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
z-index: 9000;
}
input.nav-toggle:checked + .modal-backdrop { display: flex; animation: fadeIn 0.2s ease both; }
.modal {
background: var(--off-black);
border: 1px solid var(--hairline-bright);
padding: 32px;
max-width: 480px;
width: 90%;
animation: fadeIn 0.22s ease both;
}
/* —— Profile completeness ————————————————————————————————————— */
.profile-completeness ul { list-style: none; }
.profile-completeness li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.profile-completeness li[data-ok="1"] { color: var(--text-2); }
.profile-completeness li[data-ok="0"] { color: var(--text-3); }
.profile-completeness li[data-ok="1"] .ok-mark { color: var(--accent); }
.profile-completeness li[data-ok="0"] .ok-mark { color: var(--text-3); }
/* —— Toggle row (profile track enrollment) ———————————————————— */
.toggle-row {
width: 100%; text-align: left;
display: grid; grid-template-columns: 1fr 56px;
gap: 12px; align-items: center;
padding: 14px 10px;
border-bottom: 1px solid var(--hairline-dim);
background: none; border-top: 0; border-left: 0; border-right: 0;
cursor: pointer;
transition: background 0.15s;
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row:hover { background: rgba(255,255,255,0.025); }
.toggle-row__title { font-size: 13px; font-weight: 600; color: var(--text); }
.toggle-row__sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-3); margin-top: 4px; }
/* —— Switch: solid rectangle track + centered square knob ——————————
OFF: grey track + light-grey knob on the LEFT
ON: green track + black knob on the RIGHT
Knob is vertically centered with equal padding on both ends. */
.toggle-row__sw {
display: inline-block; /* is inline by default; force block so width/height apply */
width: 48px; height: 22px;
background: #4a4a4a; /* grey track when OFF */
border: none;
position: relative;
transition: background 0.2s ease;
border-radius: 2px;
flex-shrink: 0;
box-sizing: border-box;
vertical-align: middle;
}
.toggle-row__sw::after {
content: "";
position: absolute;
top: 4px; /* (22 - 14) / 2 = 4px vertical centering */
left: 4px; /* OFF position: 4px from left edge */
width: 14px; height: 14px;
background: #b8b8b8; /* light grey square when OFF */
transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
border-radius: 1px;
}
.toggle-row:hover .toggle-row__sw { background: #5a5a5a; }
.toggle-row[data-on="1"] .toggle-row__sw {
background: var(--accent); /* green track when ON */
}
.toggle-row[data-on="1"] .toggle-row__sw::after {
left: 30px; /* 48 - 14 - 4 = 30px from left when ON */
background: #000000; /* black square when ON */
}
.toggle-row[data-on="0"] .toggle-row__title { color: var(--text-3); }
/* —— Capacity slider (custom thumb) ————————————————————————— */
.cap-slider { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; background: var(--surface-2); }
.cap-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px;
background: var(--accent);
border: 2px solid var(--off-black);
cursor: pointer; border-radius: 1px;
}
.cap-slider::-moz-range-thumb {
width: 14px; height: 14px;
background: var(--accent);
border: 2px solid var(--off-black);
cursor: pointer; border-radius: 1px;
}
/* —— Build preview placeholder (job hero right column) ————————— */
.build-preview {
position: relative; min-height: 200px;
background:
linear-gradient(135deg, transparent 49%, rgba(139,186,60,0.06) 49%, rgba(139,186,60,0.06) 51%, transparent 51%) 0 0 / 12px 12px,
radial-gradient(circle at 30% 40%, rgba(139,186,60,0.08), transparent 60%),
var(--surface);
border: 1px solid var(--hairline);
display: grid; place-items: center;
}
.build-preview::before,
.build-preview::after,
.build-preview > .corner-tl,
.build-preview > .corner-br {
content: ""; position: absolute;
width: 14px; height: 14px;
border: 0 solid var(--accent);
}
.build-preview::before { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.build-preview::after { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.build-preview .corner-bl { position: absolute; bottom: 8px; left: 8px; width:14px; height:14px; border-bottom: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.build-preview .corner-br { position: absolute; bottom: 8px; right: 8px; width:14px; height:14px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
/* ================================================================
HORIZONTAL OVERFLOW PROTECTION
Prevents any inner element from blowing out the viewport on mobile.
================================================================ */
.dashboard-page,
.jobs-page,
.job-detail-page,
.pipeline-page,
.profile-page {
max-width: 100vw;
overflow-x: hidden;
}
/* All grid children should be allowed to shrink */
.dashboard-page > * > * > .wide > *,
.jobs-page > * > * > .wide > *,
.job-detail-page > * > * > .wide > *,
.pipeline-page > * > * > .wide > *,
.profile-page > * > * > .wide > * {
min-width: 0;
}
/* Images never push their container wider than itself */
.dashboard-page img,
.jobs-page img,
.job-detail-page img,
.pipeline-page img,
.profile-page img {
max-width: 100%;
height: auto;
}
/* Long monospace strings (hashes, IPs, codes) shouldn't push layout */
.dashboard-page .mono,
.jobs-page .mono,
.job-detail-page .mono,
.pipeline-page .mono,
.profile-page .mono {
word-break: break-word;
overflow-wrap: anywhere;
}
/* SVGs auto-shrink to fit their grid cell */
.dashboard-page svg.sparkline,
.profile-page svg.sparkline {
width: 100% !important;
height: auto !important;
}
/* ================================================================
RESPONSIVE — operator-side pages
Tiers:
- 1100px large tablet: stack 2-col layouts
- 960px tablet: more aggressive stacking, smaller hero
- 640px mobile: 1-col everywhere, padding reduced
================================================================ */
@media (max-width: 1100px) {
.layout-cols-aside { grid-template-columns: 1fr !important; gap: 40px !important; }
.layout-jobs-aside { grid-template-columns: 1fr !important; gap: 32px !important; }
.ops-grid { grid-template-columns: 1fr !important; }
}
/* —— Tablet (≤960px) ————————————————————————————————————————— */
@media (max-width: 960px) {
/* KPI strip: 3 across max */
.kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
.kpi-row > div:nth-child(n+4) { display: none; }
.kpi__value { font-size: 24px !important; }
.kpi { padding: 18px !important; }
/* Lead-job card: stack the two columns */
.fg-card.fg-card--accent > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* Pipeline kanban: 2x2 instead of 4 across */
.pipeline-page section > .wide[style*="repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
/* Profile + dashboard hero: stack the stats group */
.profile-page section[style*="border-bottom"] > .wide > div[style*="justify-content:space-between"] {
flex-direction: column;
align-items: flex-start !important;
gap: 24px;
}
.profile-page .h-1 { font-size: 32px !important; }
/* Profile form rows: stack to single column */
.profile-page .fg-card > div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Profile equipment rows: stack inputs vertically */
.profile-page #equipment-rows > div[style*="grid-template-columns:1fr 1fr 80px"] {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.profile-page #equipment-rows button[onclick*="remove"] {
align-self: stretch !important;
width: 100% !important;
height: 36px !important;
margin-bottom: 0 !important;
}
/* Profile two-card rows (clearance/tracks, payout/security) */
.profile-page section .fg-sec-head + div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Job-detail: stack body + sidebar */
.job-detail-page section > .wide[style*="380px"] {
grid-template-columns: 1fr !important;
}
/* Job-detail header: title + payout stack */
.job-detail-page section > .wide > div[style*="justify-content:space-between"] {
flex-direction: column;
align-items: flex-start !important;
}
.job-detail-page .h-1 { font-size: 28px !important; }
/* Jobs page header controls: stack search + view toggle below sort */
.jobs-page section > .wide > form[method="GET"] {
flex-direction: column;
align-items: stretch !important;
}
.jobs-page section > .wide > form input[name="q"] {
width: 100% !important;
}
/* Audit log: drop the entity column on small screens */
.dashboard-page section .fg-card > div[style*="grid-template-columns:80px"] {
grid-template-columns: 70px 1fr 110px !important;
}
.dashboard-page section .fg-card > div[style*="grid-template-columns:80px"] > span:nth-child(3) {
display: none !important;
}
}
/* —— Phone (≤640px) ——————————————————————————————————————————— */
@media (max-width: 640px) {
/* KPI strip: 2 across, drop tiles 4+5 */
.kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
.kpi-row > div:nth-child(n+3) { display: none; }
.kpi__value { font-size: 22px !important; }
/* Timeline: horizontal scroll with snap */
.timeline { overflow-x: auto; scroll-snap-type: x mandatory; }
.timeline__step { min-width: 130px; scroll-snap-align: start; }
/* Tabs: horizontal scroll */
.tabs { overflow-x: auto; flex-wrap: nowrap; }
.tab { white-space: nowrap; flex-shrink: 0; }
/* Pipeline kanban: single column, full width */
.pipeline-page section > .wide[style*="repeat(2"] {
grid-template-columns: 1fr !important;
}
/* Profile hero: avatar + text stack, stats wrap to 1 col */
.profile-page section[style*="border-bottom"] > .wide > div[style*="justify-content:space-between"] > div:first-child {
flex-direction: column;
align-items: flex-start !important;
gap: 16px !important;
}
.profile-page section[style*="border-bottom"] > .wide > div[style*="justify-content:space-between"] > div:last-child {
flex-wrap: wrap !important;
gap: 16px !important;
}
.profile-page .h-1 { font-size: 26px !important; line-height: 1.05 !important; }
/* Dashboard welcome band: avatar + heading stack */
.dashboard-page section[style*="border-bottom"] > .wide > div[style*="grid-template-columns:1fr 360px"] > div:first-child {
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
}
.dashboard-page .h-1 { font-size: 24px !important; line-height: 1.1 !important; }
/* Dashboard pipeline table: horizontal scroll */
.dashboard-page section .fg-card .tbl { display: block; overflow-x: auto; white-space: nowrap; }
/* Spec rows on job-detail: stack to 1 col */
.job-detail-page .tab-panel div[style*="grid-template-columns:220px"] {
grid-template-columns: 1fr !important;
gap: 4px !important;
padding: 10px 0 !important;
}
/* File listing rows: hide hash, narrower */
.job-detail-page .tab-panel div[style*="grid-template-columns:30px 1fr"] {
grid-template-columns: 24px 1fr 60px 90px !important;
gap: 8px !important;
font-size: 11px !important;
}
.job-detail-page .tab-panel div[style*="grid-template-columns:30px 1fr"] > span:nth-child(4) { display: none !important; }
/* Risk/match panels: stack the two cards */
.job-detail-page .tab-panel[data-tab="risk"] > div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Match analysis row: tighter */
.job-detail-page .fg-card div[style*="grid-template-columns:42px 110px"] {
grid-template-columns: 38px 90px 1fr 18px !important;
gap: 8px !important;
padding: 10px 12px !important;
}
/* Audit log on dashboard: vertical stack */
.dashboard-page section .fg-card > div[style*="grid-template-columns:70px 1fr 110px"] {
grid-template-columns: 1fr !important;
gap: 4px !important;
padding: 10px 14px !important;
}
.dashboard-page section .fg-card > div[style*="grid-template-columns:70px 1fr 110px"] > span {
text-align: left !important;
}
/* Profile completeness sidebar — visible above content on mobile */
.profile-page aside { order: -1; }
.profile-page aside > div { position: static !important; }
/* Reduce section padding */
.fg-section { padding: 32px 0 !important; }
/* Buttons: less aggressive font */
.btn--lg { font-size: 12px !important; padding: 11px 16px !important; }
}
/* —— Very narrow (≤420px) — anti-overflow safety net —————————— */
@media (max-width: 420px) {
.kpi__value { font-size: 18px !important; }
.kpi__label, .kpi__sub { font-size: 9px !important; }
.h-1 { font-size: 22px !important; }
.chip { font-size: 9px !important; padding: 2px 6px !important; }
/* Tighter side gutters */
.dashboard-page .wide,
.jobs-page .wide,
.job-detail-page .wide,
.pipeline-page .wide,
.profile-page .wide,
.agency-dashboard-page .wide,
.agency-orders-page .wide,
.agency-post-job-page .wide,
.agency-order-detail-page .wide,
.agency-templates-page .wide { padding: 0 16px !important; }
}
/* ================================================================
FORGE Agency Redesign — additive layer (Phase 1+)
================================================================ */
/* —— Placeholder image (QC photos, CAD previews, template thumbs) ——— */
.placeholder-img {
display: grid;
place-items: center;
background: var(--off-black);
border: 1px solid var(--hairline-dim);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
text-align: center;
padding: 12px;
}
/* —— Avatar tile reused on operator-mini-card / nav / dashboard ——— */
.av {
display: grid; place-items: center;
background: var(--accent-dim);
border: 1px solid var(--accent-edge);
color: var(--accent);
font-family: var(--mono);
font-weight: 700;
}
/* —— Filter rail tab hover ——————————————————————————————————— */
.filter-rail__tab { transition: background 0.15s, color 0.15s, border-color 0.15s; }
.filter-rail__tab:hover:not(.is-active) {
background: rgba(255,255,255,0.03);
color: var(--text);
border-color: var(--hairline-dim);
}
/* —— Lead card / mini cards / qc grid: page-wide overflow guards ——— */
.agency-dashboard-page,
.agency-orders-page,
.agency-post-job-page,
.agency-order-detail-page,
.agency-templates-page {
max-width: 100vw;
overflow-x: hidden;
}
.agency-dashboard-page.app-main,
.agency-orders-page.app-main,
.agency-post-job-page.app-main,
.agency-order-detail-page.app-main,
.agency-templates-page.app-main { max-width: none; }
/* —— Wizard stepper bar (Post Job) ——————————————————————————————— */
.fg-stepper {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--hairline);
background: var(--off-black);
position: sticky; top: 0; z-index: 5;
}
/* Reset native