/* Baron Forms - Baron-branded lively styling */
:root {
/* 2026 Baron brand-guide canonical palette — every brand-tier color the
app uses comes from this list (#0072bc / #002f7a / #6fcbdc / #da1a32 /
#0a8c74 / #8dc63f / #fff200 / #eaf0f4 / #231f20). Status-pill semantics
(amber pending, etc.) keep conventional accessible tints so users can
still parse "yellow=pending / green=approved / red=denied" at a glance. */
--baron-red: #da1a32; /* brand red */
--baron-red-dark: #a01024;
--baron-red-light: #e54250;
--baron-blue: #0072bc; /* brand primary blue */
--baron-blue-light: #2a9bd9;
--baron-blue-accent: #6fcbdc; /* brand cyan */
--baron-navy: #002f7a; /* brand navy */
--baron-green: #0a8c74; /* brand green (success) */
--baron-green-light: #8dc63f; /* brand light green (accent) */
--baron-slate: #4a5568;
--baron-gold: #fff200; /* brand yellow (warning) */
--bg-page: #eaf0f4; /* brand light bg */
--bg-card: #ffffff;
--border: #e5e7eb;
--text: #231f20; /* brand dark text */
--text-muted: #374151; /* near-black secondary; legible on cards */
}
* { box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: var(--bg-page);
color: var(--text);
font-size: 14px;
line-height: 1.4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header - Baron red with layered polish:
· Multi-stop gradient with a lighter mid-tone for dimension (vs. a flat diagonal)
· Soft radial highlight in the upper-left to simulate a light source
· 1px top inner-glow line for a glossy edge
· Darker hairline bottom border so the header separates crisply from the content
· Outer drop shadow kept, but softened */
.bf-header {
background:
radial-gradient(ellipse at 15% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
linear-gradient(180deg, var(--baron-blue) 0%, var(--baron-blue) 45%, var(--baron-navy) 100%);
color: white;
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22), /* top glossy edge */
inset 0 -1px 0 rgba(0, 0, 0, 0.28), /* bottom hairline separator */
0 3px 10px rgba(0, 47, 122, 0.28); /* soft drop shadow (brand navy) */
position: relative;
}
/* Ultra-subtle diagonal texture so the gradient doesn't read as a flat plastic block.
The SVG is embedded inline (≈120 bytes) — no extra HTTP request. Very low opacity so
it's felt more than seen. */
.bf-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml;utf8,");
background-size: 4px 4px;
}
/* Nav + brand sit above the texture layer. */
.bf-header > * { position: relative; z-index: 1; }
.bf-brand a { color: white; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.bf-nav { display: flex; align-items: center; gap: 4px; }
.bf-nav a { color: rgba(255,255,255,0.95); text-decoration: none; padding: 6px 12px; font-size: 14px; border-radius: 4px; transition: background 0.15s; }
.bf-nav a:hover { background: rgba(255,255,255,0.18); }
/* Admin dropdown: inline with the rest of the nav. Summary styled like other nav links;
body floats below on open, pinned to the right so it doesn't clip the viewport edge. */
.bf-nav-dropdown { position: relative; }
.bf-nav-dropdown > summary { list-style: none; cursor: pointer; color: rgba(255,255,255,0.95); padding: 6px 12px; font-size: 14px; border-radius: 4px; user-select: none; transition: background 0.15s; }
.bf-nav-dropdown > summary::-webkit-details-marker { display: none; }
.bf-nav-dropdown > summary:hover { background: rgba(255,255,255,0.18); }
.bf-nav-dropdown[open] > summary { background: rgba(255,255,255,0.25); }
.bf-nav-dropdown-body { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.35); z-index: 100; display: flex; flex-direction: column; }
.bf-nav-dropdown-body a { color: var(--text); padding: 8px 14px; font-size: 13px; border-radius: 0; }
.bf-nav-dropdown-body a:hover { background: var(--border); }
.bf-user { opacity: 0.85; font-size: 13px; margin-left: 12px; padding: 4px 10px; background: rgba(0,0,0,0.15); border-radius: 12px; }
.bf-logout { background: rgba(0,0,0,0.2) !important; font-size: 12px !important; padding: 5px 12px !important; }
.bf-logout:hover { background: rgba(0,0,0,0.35) !important; }
.bf-main {
flex: 1;
width: 100%;
margin: 24px auto;
padding: 0 24px;
}
.bf-footer {
background: var(--baron-navy);
color: #a0aec0;
text-align: center;
padding: 8px 14px;
font-size: 11px;
line-height: 1.4;
}
/* Headings */
h1 { color: var(--baron-navy); margin: 0 0 16px; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
h2 { color: var(--baron-blue); margin: 22px 0 12px; font-size: 19px; font-weight: 700; }
h3 { color: var(--baron-blue); margin: 16px 0 8px; font-size: 15px; font-weight: 700; }
h4 { color: var(--baron-slate); margin: 12px 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
/* Default section: neutral card. Red top border is reserved for urgent states (see .bf-section-urgent + .bf-section-has-items). */
.bf-section { background: var(--bg-card); padding: 22px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03); border-top: 1px solid var(--border); }
/* Notification badge on the Admin nav dropdown summary.
Two pieces: a yellow "!" bang that strobes, and a red count bubble.
Designed to demand attention without being childish. */
.bf-admin-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin: 0 6px 0 0;
vertical-align: middle;
}
.bf-admin-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #fbbf24; /* amber */
color: #78350f; /* deep brown — high contrast */
border: 2px solid #78350f;
border-radius: 50%;
font-weight: 900;
font-size: 14px;
line-height: 1;
animation: bf-alert-strobe 0.9s ease-in-out infinite;
box-shadow: 0 0 8px rgba(251, 191, 36, 0.75);
}
.bf-admin-badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--baron-red);
color: white;
border-radius: 10px;
font-size: 12px;
font-weight: 800;
box-shadow: 0 0 0 2px var(--baron-navy), 0 0 6px rgba(192, 30, 56, 0.75);
animation: bf-count-nudge 2.2s ease-in-out infinite;
}
@keyframes bf-alert-strobe {
0%, 100% { background: #fbbf24; transform: scale(1); }
35% { background: #f87171; color: white; transform: scale(1.15); }
55% { background: #fbbf24; color: #78350f; transform: scale(1.05); }
75% { background: #dc2626; color: white; transform: scale(1.15); }
}
@keyframes bf-count-nudge {
0%, 80%, 100% { transform: translateX(0); }
85% { transform: translateX(2px); }
92% { transform: translateX(-2px); }
}
/* Gentle glow around the whole Admin ▾ text when alerts are present. */
.bf-nav-has-alerts > summary {
position: relative;
padding: 2px 6px;
border-radius: 4px;
animation: bf-summary-halo 2.5s ease-in-out infinite;
}
@keyframes bf-summary-halo {
0%, 100% { box-shadow: inset 0 0 0 0 rgba(251, 191, 36, 0); }
50% { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.55); }
}
/* Respect users who opt out of motion. Static but still visible. */
@media (prefers-reduced-motion: reduce) {
.bf-admin-badge-icon, .bf-admin-badge-count, .bf-nav-has-alerts > summary { animation: none; }
.bf-admin-badge-icon { background: #dc2626; color: white; }
}
/* Actions dropdown on dashboard submission rows. -based, no JS. */
.bf-actions-menu > summary { list-style: none; }
.bf-actions-menu > summary::-webkit-details-marker { display: none; }
.bf-actions-menu .bf-action-item { font-size: 13px; white-space: nowrap; }
.bf-actions-menu .bf-action-item:hover { background: var(--bg-app); }
.bf-actions-menu[open] > summary { background: var(--baron-blue); color: white; border-color: var(--baron-blue); }
html.dark-mode .bf-actions-menu .bf-action-item:hover { background: rgba(100,181,246,0.08); }
.bf-section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bf-section-header h2 { margin: 0; }
.bf-count { color: var(--text-muted); font-size: 14px; font-weight: 400; }
.bf-filters { display: flex; gap: 8px; }
.bf-filters select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 13px; background: white; }
/* "Create a Request" — single unified tile grid with live filter (Baron + OPS together) */
.bf-create-section { padding: 14px 20px; }
.bf-create-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.bf-create-header h2 { margin: 0; }
.bf-create-filter {
flex: 1; min-width: 240px; max-width: 420px;
padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; font-family: inherit; background: var(--bg-card); color: var(--text);
}
.bf-create-filter:focus { outline: 2px solid var(--baron-blue-light); outline-offset: 1px; }
.bf-form-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
.bf-form-tiles-compact .bf-form-tile { padding: 14px 10px; position: relative; }
.bf-form-tiles-compact .bf-tile-icon { font-size: 26px; margin-bottom: 4px; }
.bf-form-tiles-compact .bf-tile-name { font-size: 13px; }
.bf-form-tiles-compact .bf-tile-desc { font-size: 11px; margin-top: 4px; }
.bf-tile-badge {
position: absolute; top: 6px; right: 6px;
background: rgba(0,0,0,0.18); color: white;
font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
padding: 2px 6px; border-radius: 10px;
}
/* Locked tile: grayscale + dimmed. Click opens the access-request modal instead of navigating. */
.bf-form-tile.bf-tile-locked { filter: grayscale(0.8); opacity: 0.72; cursor: pointer; }
.bf-form-tile.bf-tile-locked:hover { opacity: 0.92; filter: grayscale(0.6); }
.bf-tile-badge-locked { background: #fffbeb; color: #78350f; border: 1px solid #f59e0b; }
/* Access-request modal — plain centered dialog on a dimmed backdrop. */
.bf-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 60px 12px; overflow: auto; }
.bf-modal-backdrop[hidden] { display: none; }
.bf-modal { background: var(--bg-card); color: var(--text); max-width: 560px; width: 100%; border-radius: 8px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); position: relative; }
.bf-modal-close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.bf-modal-close:hover { color: var(--text); }
/* "OPS" pill next to the ID on unified dashboard rows pulled from ops-forms/submissions */
.bf-ops-row-badge {
display: inline-block; margin-left: 6px;
background: #fff7ed; color: #9a3412; border: 1px solid #fdba74;
font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
padding: 1px 6px; border-radius: 10px; vertical-align: middle;
}
html.dark-mode .bf-ops-row-badge { background: #3a2d1a; color: #fbbf24; border-color: #78350f; }
.bf-stat-paused { background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%); color: #4c1d95; border: 1px solid #8b5cf6; }
/* Top-level collapsible sections (dashboard "OPS Change Control Forms", "IT Forms", "Other Requests").
The element itself uses .bf-section styling so it looks identical to a static section,
with a caret indicator on the summary line. */
.bf-section-collapsible > summary { list-style: none; cursor: pointer; user-select: none; }
.bf-section-collapsible > summary::-webkit-details-marker { display: none; }
.bf-section-collapsible > summary::before { content: "▸"; display: inline-block; width: 14px; margin-right: 6px; color: var(--text-muted); transition: transform 0.15s; }
.bf-section-collapsible[open] > summary::before { transform: rotate(90deg); }
.bf-section-collapsible > summary h2 { display: inline-block; margin: 0; }
/* Override .bf-section-header's space-between on collapsible summaries so the caret + heading
stay left-aligned (the hint text is absent here). */
.bf-section-collapsible > summary.bf-section-header { justify-content: flex-start; }
.bf-section-body { padding-top: 8px; }
/* Older inline sub-group look kept for the nested detail blocks inside my-approvals (each group wrapping its table). */
.bf-group-section { border: 1px solid var(--border); border-radius: 6px; margin: 8px 0; background: var(--bg-card); }
.bf-group-section > summary { list-style: none; cursor: pointer; padding: 10px 14px; user-select: none; display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.bf-group-section > summary::-webkit-details-marker { display: none; }
.bf-group-section > summary .bf-group-title { flex: 1; }
.bf-group-link { color: var(--baron-blue); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.bf-group-link:hover { text-decoration: underline; }
.bf-group-section > summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--text-muted); transition: transform 0.15s; }
.bf-group-section[open] > summary::before { transform: rotate(90deg); }
.bf-group-section .bf-group-title { font-size: 15px; font-weight: 600; color: var(--text); }
.bf-group-section .bf-group-title .bf-count { color: var(--text-muted); font-weight: 400; font-size: 13px; }
.bf-group-section .bf-group-body { padding: 4px 14px 14px; }
.bf-create-empty { margin: 12px 0 0; text-align: center; }
.bf-create-back { color: var(--baron-blue); text-decoration: none; font-weight: 600; font-size: 14px; }
.bf-create-back:hover { text-decoration: underline; }
.bf-group-entry { cursor: pointer; }
.bf-group-entry .bf-tile-desc { font-style: italic; }
/* Form tiles - colorful & vibrant */
.bf-form-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.bf-form-tile {
background: white;
border-radius: 8px;
padding: 22px 16px;
text-align: center;
text-decoration: none;
color: var(--text);
transition: all 0.2s ease;
border-top: 3px solid var(--baron-slate);
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 210px;
/* Consistent heights regardless of description length. Bumped from 180 → 210 to
accommodate the 52px icon circle + 3-line description without clipping. */
height: 100%;
}
.bf-form-tile::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.bf-form-tile:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
transform: translateY(-3px);
}
.bf-form-tile:hover::before { opacity: 1; }
.bf-tile-icon { font-size: 26px; margin-bottom: 8px; }
.bf-tile-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--baron-navy); }
.bf-tile-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
/* Wrap freely — no line-clamp / overflow:hidden. Longer descriptions just
make those tiles taller. The grid auto-sizes rows so neighbors don't get
cropped, and reading the full description matters more than perfectly
aligned tile heights. */
min-height: calc(1.4em * 2);
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Dashboard form tiles: keep ONE uniform accent across the row regardless of per-form color.
Color classes (.bf-color-*) still drive form-header gradients + visual editor chips elsewhere;
we only neutralize them on the compact tile grid so the row reads as a cohesive unit. */
.bf-form-tile.bf-color-default,
.bf-form-tile.bf-color-primary,
.bf-form-tile.bf-color-success,
.bf-form-tile.bf-color-warning,
.bf-form-tile.bf-color-danger,
.bf-form-tile.bf-color-info { border-top-color: var(--baron-blue); }
html.dark-mode .bf-form-tile.bf-color-default,
html.dark-mode .bf-form-tile.bf-color-primary,
html.dark-mode .bf-form-tile.bf-color-success,
html.dark-mode .bf-form-tile.bf-color-warning,
html.dark-mode .bf-form-tile.bf-color-danger,
html.dark-mode .bf-form-tile.bf-color-info { border-top-color: var(--baron-blue-light); }
/* Other places that still benefit from per-color accents (form-header gradients, chips). */
.bf-color-default:not(.bf-form-tile) { border-top-color: var(--baron-slate); }
.bf-color-primary:not(.bf-form-tile) { border-top-color: var(--baron-blue); }
.bf-color-success:not(.bf-form-tile) { border-top-color: var(--baron-green); }
.bf-color-warning:not(.bf-form-tile) { border-top-color: var(--baron-blue-accent); }
.bf-color-danger:not(.bf-form-tile) { border-top-color: var(--baron-red); }
.bf-color-info:not(.bf-form-tile) { border-top-color: var(--baron-blue-light); }
/* Form page header - gradient */
.bf-form-header {
background: linear-gradient(135deg, var(--baron-slate) 0%, #2d3748 100%);
color: white;
padding: 18px 24px;
margin: -22px -22px 0;
border-radius: 8px 8px 0 0;
}
.bf-form-header.bf-color-primary { background: linear-gradient(135deg, var(--baron-blue) 0%, var(--baron-navy) 100%); }
.bf-form-header.bf-color-success { background: linear-gradient(135deg, var(--baron-green) 0%, #066053 100%); }
.bf-form-header.bf-color-warning { background: linear-gradient(135deg, var(--baron-blue-accent) 0%, var(--baron-blue) 100%); }
.bf-form-header.bf-color-danger { background: linear-gradient(135deg, var(--baron-red) 0%, var(--baron-red-dark) 100%); }
.bf-form-header.bf-color-info { background: linear-gradient(135deg, var(--baron-blue-light) 0%, var(--baron-blue) 100%); }
.bf-form-header h1 { color: white; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.bf-form-desc { margin: 6px 0 0; color: rgba(255,255,255,0.92); font-size: 13px; line-height: 1.5; }
.bf-form-desc a { color: var(--baron-gold); font-weight: 600; text-decoration: underline; }
.bf-form-desc a:hover { color: #ffd166; }
/* Form */
.bf-form { background: white; padding: 22px; border-radius: 0 0 8px 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.bf-form-section { border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px 20px; margin-bottom: 16px; background: #fafbfc; position: relative; }
.bf-form-section legend { font-weight: 700; color: var(--baron-blue); padding: 0 10px; background: white; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 3px; }
.bf-field { margin-bottom: 14px; }
.bf-field > label { display: block; font-weight: 600; color: var(--text); margin-bottom: 5px; font-size: 13px; }
.bf-field input[type=text], .bf-field input[type=email], .bf-field input[type=number], .bf-field input[type=date], .bf-field textarea, .bf-field select {
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 13px; background: white; transition: border-color 0.15s, box-shadow 0.15s;
}
.bf-field input:focus, .bf-field textarea:focus, .bf-field select:focus {
outline: none; border-color: var(--baron-blue); box-shadow: 0 0 0 3px rgba(26, 77, 124, 0.15);
}
.bf-field textarea { resize: vertical; min-height: 60px; }
.bf-field-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.bf-field-row .bf-field { flex: 1; margin-bottom: 0; }
.bf-required { color: var(--baron-red); font-weight: 700; }
.bf-field-help { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: 1.55; }
.bf-field-help a { color: var(--baron-blue); font-weight: 600; }
.bf-field-help a:hover { text-decoration: underline; color: var(--baron-blue-light); }
.bf-radio-group { display: flex; flex-direction: column; gap: 7px; }
.bf-radio, .bf-checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; color: var(--text); font-size: 13px; padding: 5px 8px; border-radius: 4px; transition: background 0.15s; flex-wrap: wrap; }
.bf-radio:hover, .bf-checkbox:hover { background: rgba(26, 77, 124, 0.05); }
.bf-radio input, .bf-checkbox input { margin-top: 3px; accent-color: var(--baron-red); }
.bf-radio-desc { flex-basis: 100%; margin-left: 21px; margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.45; font-weight: normal; }
.bf-radio-desc strong { color: var(--text); font-weight: 600; }
.bf-form-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Buttons - vibrant */
.bf-btn {
display: inline-block;
padding: 8px 18px;
border-radius: 5px;
text-decoration: none;
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.bf-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.15); }
.bf-btn-primary { background: linear-gradient(180deg, var(--baron-blue-light) 0%, var(--baron-blue) 100%); color: white; border-color: var(--baron-blue); }
.bf-btn-primary:hover { background: linear-gradient(180deg, var(--baron-blue) 0%, #13375a 100%); }
.bf-btn-secondary { background: white; color: var(--baron-slate); border-color: var(--border); }
.bf-btn-secondary:hover { background: #f7fafc; border-color: #cbd5e0; }
.bf-btn-success { background: linear-gradient(180deg, var(--baron-green) 0%, #066053 100%); color: white; border-color: #066053; }
.bf-btn-success:hover { background: linear-gradient(180deg, #066053 0%, #047857 100%); }
.bf-btn-danger { background: linear-gradient(180deg, var(--baron-red-light) 0%, var(--baron-red) 100%); color: white; border-color: var(--baron-red); }
.bf-btn-danger:hover { background: linear-gradient(180deg, var(--baron-red) 0%, var(--baron-red-dark) 100%); }
.bf-btn-small { padding: 4px 11px; font-size: 12px; }
.bf-btn[disabled], .bf-btn:disabled { opacity: 0.7; cursor: progress; transform: none !important; }
.bf-btn-spinner { display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -2px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: bf-spin 0.7s linear infinite; }
.bf-btn-spinner[hidden] { display: none !important; }
/* Per-user hidden-submission rows — dimmed when revealed via the "Show hidden" toggle. */
.bf-row-hidden { opacity: 0.55; }
.bf-row-hidden:hover { opacity: 0.9; }
.bf-show-hidden-toggle input { vertical-align: middle; margin-right: 3px; }
/* Button-shaped disclosure triangles — hide the browser-default marker so our inline
▾ sits right next to the label on one line. Applies to Actions menus + Export menus (+ any
future button-summary dropdowns that need the same treatment). */
.bf-actions-menu > summary,
.bf-export-menu > summary {
display: inline-block;
list-style: none;
white-space: nowrap;
}
.bf-actions-menu > summary::-webkit-details-marker,
.bf-export-menu > summary::-webkit-details-marker { display: none; }
.bf-actions-menu > summary::marker,
.bf-export-menu > summary::marker { content: ''; }
/* Wave 6: Workflow & Notifications summary panel (rendered by bfRenderWorkflowSummary) */
.bf-workflow-summary { margin: 18px 0; border: 1px solid var(--border, #dfe3e8); border-radius: 6px; background: #fafbfc; }
.bf-workflow-summary > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--baron-slate, #2c3e50); user-select: none; list-style: none; }
.bf-workflow-summary > summary::-webkit-details-marker { display: none; }
.bf-workflow-summary > summary::before { content: '▸ '; color: #888; font-size: 12px; }
.bf-workflow-summary[open] > summary::before { content: '▾ '; }
.bf-workflow-summary[open] > summary { border-bottom: 1px solid var(--border, #dfe3e8); background: #f3f5f7; }
.bf-wf-body { padding: 12px 16px; font-size: 13px; line-height: 1.5; }
.bf-wf-block { margin: 10px 0 18px; }
.bf-wf-block h4 { margin: 0 0 6px; font-size: 13px; color: var(--baron-blue, #1a4d7c); text-transform: uppercase; letter-spacing: 0.5px; }
.bf-wf-list { margin: 6px 0 6px 20px; padding: 0; }
.bf-wf-list li { margin: 3px 0; }
.bf-wf-phases { list-style: none; margin: 6px 0; padding: 0; }
.bf-wf-phases li { padding: 4px 8px; margin: 2px 0; border-left: 3px solid #28a745; background: #fff; border-radius: 2px; }
.bf-wf-phases li.bf-wf-off { border-left-color: #bbb; color: #888; background: #f8f8f8; }
.bf-wf-hint { margin: 4px 0 0; color: #667; font-size: 12px; font-style: italic; }
.bf-wf-muted { color: #888; font-size: 12px; }
.bf-wf-badge { display: inline-block; padding: 1px 6px; margin-left: 6px; background: #fff3cd; color: #856404; border-radius: 3px; font-size: 11px; }
html.dark-mode .bf-workflow-summary { background: #1f262e; border-color: #354553; }
html.dark-mode .bf-workflow-summary[open] > summary { background: #273040; border-color: #354553; }
html.dark-mode .bf-wf-phases li { background: #1a2129; color: #dbe3ec; }
html.dark-mode .bf-wf-phases li.bf-wf-off { background: #151b22; color: #6a7684; }
/* Admin form-edit: collapsed advanced section (approval workflow + permissions + routing).
Collapsed by default so the basic-metadata form feels like the simpler edit views (policies, groups). */
.bf-admin-advanced { margin: 10px 0 24px; border: 1px solid var(--border, #dfe3e8); border-radius: 6px; background: #fafbfc; }
.bf-admin-advanced > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--baron-slate, #2c3e50); list-style: none; user-select: none; font-size: 14px; }
.bf-admin-advanced > summary::-webkit-details-marker { display: none; }
.bf-admin-advanced > summary::before { content: '▸ '; color: #888; font-size: 12px; margin-right: 4px; }
.bf-admin-advanced[open] > summary::before { content: '▾ '; }
.bf-admin-advanced[open] > summary { border-bottom: 1px solid var(--border, #dfe3e8); background: #f3f5f7; }
.bf-admin-advanced-body { padding: 14px 16px; }
html.dark-mode .bf-admin-advanced { background: #1f262e; border-color: #354553; }
html.dark-mode .bf-admin-advanced[open] > summary { background: #273040; border-color: #354553; }
/* Admin shell: vertical sidebar nav + main content (2026-04-25 round 2).
Old horizontal tab bar felt cramped with 15 tabs in 4 groups. Sidebar gives each tab room to
breathe, group headers become obvious, and the content area stays uncluttered. */
.bf-admin-shell { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.bf-admin-shell-drilled { grid-template-columns: 1fr; } /* breadcrumb mode: no sidebar */
/* Sticky sidebar, no internal scroll. Previous version capped max-height at viewport-minus-100
and added overflow-y:auto, which trapped the mouse wheel — scrolling inside the sidebar
didn't chain to the main page once it hit bottom. Letting the sidebar be as tall as its
content + sticky-pinning the top means the browser's page scroll is the only scrollbar. */
/* Sidebar: sticky-pinned + capped to viewport height with its OWN vertical scrollbar so a long
right-pane (e.g. Security log with 200k+ chars) doesn't force users to scroll the entire page
to reach the bottom nav links. Wheel-trap noted in the comment above is solved by overscroll-
behavior: contain — chain past sidebar bottom to the main page scroll. */
.bf-admin-sidebar { background: #fafbfc; border: 1px solid var(--border, #dfe3e8); border-radius: 6px; padding: 14px 12px; position: sticky; top: 78px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.bf-admin-content { min-width: 0; } /* prevents content overflow in flex/grid cells */
/* Grouped tab nav reads as a vertical stack: group label, then each tab on its own line. */
.bf-admin-tabs-grouped { display: flex; flex-direction: column; gap: 12px; padding: 0; border: none; }
.bf-admin-tab-group { display: flex; flex-direction: column; gap: 2px; padding: 0; border: none; }
.bf-admin-tab-group-label { font-size: 15px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--baron-navy, #1a4d7c); font-weight: 800; padding: 8px 8px 6px; border-bottom: 2px solid var(--baron-navy, #1a4d7c); margin-bottom: 6px; }
.bf-admin-tab-group-body { display: flex; flex-direction: column; gap: 1px; }
.bf-admin-tab-group-body a { text-decoration: none; padding: 7px 10px; border-radius: 4px; color: var(--baron-slate, #2c3e50); font-size: 13.5px; display: block; transition: background 0.08s; }
.bf-admin-tab-group-body a:hover { background: #eef1f5; }
.bf-admin-tab-group-body a.active { background: var(--baron-blue, #1a4d7c); color: white; font-weight: 500; }
.bf-admin-tab-group-body a.active:hover { background: var(--baron-blue, #1a4d7c); }
html.dark-mode .bf-admin-sidebar { background: #1f262e; border-color: #354553; }
html.dark-mode .bf-admin-tab-group-label { color: #9dc3ea; border-bottom-color: #5b9bd5; }
html.dark-mode .bf-admin-tab-group-body a { color: #dbe3ec; }
html.dark-mode .bf-admin-tab-group-body a:hover { background: #2a3340; }
html.dark-mode .bf-admin-tab-group-body a.active { background: #4b86be; color: white; }
/* Narrow viewports: stack nav above content, full-width. */
@media (max-width: 900px) {
.bf-admin-shell { grid-template-columns: 1fr; gap: 16px; }
.bf-admin-sidebar { position: static; max-height: none; }
}
@keyframes bf-spin { to { transform: rotate(360deg); } }
/* Alerts */
.bf-alert { padding: 12px 16px; border-radius: 6px; margin: 14px 0; font-size: 13px; border-left: 4px solid; }
.bf-alert-success { background: #ecfdf5; border-left-color: var(--baron-green); color: #065f46; }
.bf-alert-error { background: #fef2f2; border-left-color: var(--baron-red); color: #991b1b; }
.bf-alert-info { background: #eff6ff; border-left-color: var(--baron-blue); color: #1e40af; }
/* Tables */
.bf-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: white; border-radius: 6px; overflow: hidden; }
.bf-table th {
text-align: left;
padding: 10px 12px;
background: linear-gradient(180deg, var(--baron-navy) 0%, #0a1e33 100%);
color: white;
border-bottom: none;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.6px;
}
.bf-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.bf-table tr:hover td { background: #f9fafb; }
/* Status badges - vibrant colors */
.bf-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.bf-status-pending { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); color: #78350f; border: 1px solid #f59e0b; }
.bf-status-approved { background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%); color: #064e3b; border: 1px solid var(--baron-green); }
.bf-status-denied { background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%); color: #7f1d1d; border: 1px solid var(--baron-red); }
.bf-status-cancelled { background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%); color: #374151; border: 1px solid #9ca3af; }
.bf-status-completed { background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%); color: #1e3a8a; border: 1px solid var(--baron-blue-light); }
.bf-status-paused { background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%); color: #4c1d95; border: 1px solid #8b5cf6; }
.bf-status-changes_requested { background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%); color: #7c2d12; border: 1px solid #f97316; }
.bf-expiry { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.bf-expiry-ok { background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%); color: #075985; border: 1px solid #38bdf8; }
.bf-expiry-soon { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); color: #78350f; border: 1px solid #f59e0b; }
.bf-expiry-expired { background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%); color: #7f1d1d; border: 1px solid var(--baron-red); text-transform: uppercase; }
.bf-empty { color: var(--text-muted); font-style: italic; padding: 12px 0; font-size: 13px; }
/* Summary stats — pill row. Zero-value stats are visually muted so the eye lands on real counts. */
.bf-summary-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 20px; align-items: stretch; }
.bf-summary-stat {
background: var(--bg-card);
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: transform 0.15s, box-shadow 0.15s;
display: inline-flex;
align-items: baseline;
gap: 8px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.bf-summary-stat:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.08); text-decoration: none; }
.bf-summary-stat.is-active { outline: 2px solid var(--baron-blue, #1a4d7c); outline-offset: 1px; background: #eff6ff; }
.bf-summary-stat.is-active strong { color: var(--baron-blue, #1a4d7c); }
.bf-filter-active { font-size: 12px; font-weight: 500; color: #1a4d7c; margin-left: 8px; }
.bf-summary-stat strong { font-size: 20px; font-weight: 700; color: var(--baron-navy); min-width: 22px; text-align: right; }
.bf-stat-pending strong { color: #d97706; }
.bf-stat-changes_requested strong { color: #c2410c; }
.bf-stat-approved strong { color: #066053; }
.bf-stat-completed strong { color: #1976d2; }
.bf-stat-denied strong { color: var(--baron-red); }
.bf-stat-cancelled strong { color: #6b7280; }
.bf-stat-paused strong { color: #7c3aed; }
.bf-stat-total { background: transparent; border-style: dashed; }
.bf-stat-total strong { color: var(--baron-navy); }
/* Waiting pill: only loud when there's something waiting. */
.bf-stat-waiting { background: #fff7ed; border-color: #f59e0b; box-shadow: 0 2px 6px rgba(245,158,11,0.2); }
.bf-stat-waiting strong { color: #b45309; font-size: 22px; }
/* Zero-value stat: subdued so 0s don't scream for attention. */
.bf-summary-stat.is-zero { opacity: 0.55; box-shadow: none; background: transparent; border-style: dashed; }
.bf-summary-stat.is-zero strong { color: var(--text-muted) !important; }
.bf-summary-stat.is-zero:hover { transform: none; opacity: 0.75; }
/* Drop the old Paused gradient pill — we use the flat color rules above now. */
.bf-stat-paused { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }
/* Urgent "Waiting on My Approval" section — amber accent to draw attention */
.bf-section-urgent { border-top-color: #f59e0b !important; background: #fffbeb; }
.bf-section-urgent h2 { color: #b45309; }
.bf-section-hint { color: var(--text-muted); font-size: 12px; font-style: italic; margin-left: 12px; }
/* Form-admin UI: group lists + per-group badges */
.bf-form-admin-list { list-style: none; padding: 0; margin: 8px 0 12px; }
.bf-form-admin-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin: 4px 0; background: #eef6ff; border: 1px solid #b8d9f8; border-radius: 6px; }
.bf-form-admin-group { color: var(--baron-navy); }
.bf-form-admin-badge { display: inline-block; font-size: 10px; padding: 1px 8px; margin-left: 8px; background: #eef6ff; color: #1a4d7c; border: 1px solid #b8d9f8; border-radius: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
html.dark-mode .bf-form-admin-list li { background: #13375a; border-color: #1a4d7c; }
html.dark-mode .bf-form-admin-group { color: #90caf9; }
html.dark-mode .bf-form-admin-badge { background: #13375a; color: #90caf9; border-color: #1a4d7c; }
/* Detail tables */
.bf-detail { width: 100%; background: white; }
.bf-detail td { padding: 6px 12px; border: none; font-size: 13px; }
.bf-detail td:first-child { width: 170px; color: var(--text-muted); font-weight: 600; }
.bf-detail td:last-child { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
/* Approvals */
.bf-approval { border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin-bottom: 10px; background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.bf-approval-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.bf-approval-meta { color: var(--text-muted); font-size: 12px; margin-top: 5px; }
.bf-approval-comment { margin-top: 6px; padding: 8px 12px; background: #f8fafc; border-left: 3px solid #94a3b8; border-radius: 3px; font-size: 13px; color: #1f2937; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.bf-approval-comment-label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.bf-approval-comment-text { display: block; }
.bf-approval-pending { border-left: 4px solid var(--baron-blue-accent); }
.bf-approval-approved { border-left: 4px solid var(--baron-green); }
.bf-approval-denied { border-left: 4px solid var(--baron-red); }
.bf-approve-form { display: flex; gap: 8px; flex-direction: column; margin-top: 10px; }
.bf-approve-form textarea { padding: 7px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 13px; resize: vertical; }
.bf-approve-form > div { display: flex; gap: 6px; }
/* Tasks */
.bf-phase { margin-bottom: 14px; padding: 14px 18px; background: #fafbfc; border-radius: 6px; border: 1px solid var(--border); }
.bf-phase h3 { margin-top: 0; color: var(--baron-blue); }
.bf-phase-locked { opacity: 0.55; }
.bf-lock { font-size: 12px; font-weight: normal; color: var(--text-muted); margin-left: 10px; }
.bf-task { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf-task:last-child { border-bottom: none; }
.bf-task-label { flex: 1; font-size: 13px; }
.bf-task-assigned { color: var(--text-muted); font-size: 11px; margin-left: 8px; }
.bf-task-meta { color: var(--text-muted); font-size: 11px; }
.bf-task-notes { margin-top: 4px; padding: 5px 10px; background: #f8fafc; border-left: 3px solid #94a3b8; border-radius: 3px; font-size: 12px; color: #1f2937; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; flex-basis: 100%; }
.bf-task-form { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.bf-task-form input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.bf-task-failed { background: #fff5f5; }
.bf-task-failed .bf-task-label { color: #7f1d1d; }
.bf-task-skipped { background: #f9fafb; opacity: 0.85; }
.bf-task-skipped .bf-task-label { color: #4b5563; }
/* Dark-mode overrides for task styles — the light backgrounds (#f8fafc/#fff5f5/#f9fafb)
are jarring in dark mode and were missed when dark-mode CSS was first added. Scope each
rule with html.dark-mode so light-mode is untouched. */
html.dark-mode .bf-task-notes { background: #1f262e; color: #dbe3ec; border-left-color: #4a5663; }
html.dark-mode .bf-task-failed { background: #3a1f23; }
html.dark-mode .bf-task-failed .bf-task-label { color: #fca5a5; }
html.dark-mode .bf-task-skipped { background: #1a2129; opacity: 0.85; }
html.dark-mode .bf-task-skipped .bf-task-label { color: #9ca3af; }
/* Admin panel */
.bf-admin-tabs { display: flex; gap: 2px; background: white; padding: 0; margin: 0 0 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.06); overflow-x: auto; border-radius: 8px 8px 0 0; border-bottom: 3px solid var(--baron-red); }
.bf-admin-tabs a { padding: 12px 18px; color: var(--text-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -3px; font-weight: 600; font-size: 13px; white-space: nowrap; transition: all 0.15s; }
.bf-admin-tabs a.active { color: var(--baron-red); border-bottom-color: var(--baron-red); background: linear-gradient(180deg, rgba(200,16,46,0.06) 0%, rgba(200,16,46,0) 100%); }
.bf-admin-tabs a:hover { color: var(--baron-red); background: rgba(200,16,46,0.04); }
.bf-admin-content { background: white; padding: 24px; border-radius: 0 0 8px 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.bf-admin-form { padding: 14px 0; border-bottom: 1px solid var(--border); }
.bf-admin-form:last-child { border-bottom: none; }
.bf-admin-form .bf-field { max-width: 100%; }
.bf-form-inline, .bf-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.bf-form-inline input, .bf-inline-form input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; }
.bf-code { font-family: 'Courier New', monospace; font-size: 12px; }
.bf-matrix { font-size: 12px; }
.bf-matrix th, .bf-matrix td { padding: 6px 8px; border: 1px solid var(--border); text-align: center; }
.bf-matrix th:first-child, .bf-matrix td:first-child { text-align: left; }
.bf-matrix-cell { width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border); background: #f5f5f5; cursor: pointer; font-weight: 700; transition: all 0.15s; }
.bf-matrix-cell.on { background: linear-gradient(180deg, var(--baron-green) 0%, #066053 100%); color: white; border-color: #066053; }
.bf-user-groups-panel { background: #fafbfc; padding: 12px; border-radius: 5px; margin-top: 6px; border: 1px solid var(--border); }
/* Welcome page */
.bf-welcome {
max-width: 900px;
margin: 50px auto;
text-align: center;
padding: 40px;
background: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border-top: 5px solid var(--baron-red);
}
html.dark-mode .bf-welcome { background: #16213e; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.bf-welcome h1 { color: var(--baron-red); margin-bottom: 12px; font-size: 28px; }
.bf-welcome-sub { color: var(--text-muted); margin-bottom: 24px; font-size: 15px; }
.bf-user-card { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 16px 20px; border-radius: 6px; text-align: left; margin: 16px 0 24px; border: 1px solid var(--border); }
.bf-user-card div { margin: 4px 0; font-size: 13px; }
.bf-request-form { text-align: left; margin: 18px 0; }
.bf-request-form label { display: block; font-weight: 600; margin: 10px 0 5px; font-size: 13px; }
.bf-request-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; margin-bottom: 15px; }
.bf-contact { color: var(--text-muted); font-size: 12px; margin-top: 24px; }
.bf-contact a { color: var(--baron-red); font-weight: 600; }
/* App descriptions on the onboarding / access-request page */
.bf-app-descriptions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 24px; text-align: left; }
.bf-app-card { background: #f8fafc; border: 1px solid var(--border); border-left: 4px solid var(--baron-blue); border-radius: 6px; padding: 16px 18px; }
.bf-app-card h3 { margin: 0 0 4px; color: var(--baron-navy); font-size: 16px; }
.bf-app-tagline { margin: 0 0 10px; color: var(--text-muted); font-size: 12px; }
.bf-app-card p { margin: 8px 0; font-size: 13px; }
.bf-app-card ul { margin: 8px 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.bf-app-card ul li { margin: 3px 0; }
.bf-app-card ul strong { color: var(--baron-blue); }
.bf-app-hint { color: var(--text-muted); font-size: 12px; font-style: italic; margin-top: 10px; }
.bf-access-fieldset { border: 1px solid var(--border); padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; }
.bf-access-fieldset legend { font-weight: 600; padding: 0 6px; }
.bf-access-check { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: 13px; }
.bf-access-row { margin: 10px 0; padding-bottom: 10px; border-bottom: 1px dashed #e5e7eb; }
.bf-access-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.bf-access-type-wrap { margin: 8px 0 4px 28px; padding: 8px 12px; background: #f8fafc; border-radius: 4px; border-left: 3px solid var(--baron-blue); }
html.dark-mode .bf-access-row { border-bottom-color: #0f3460; }
html.dark-mode .bf-access-type-wrap { background: #0f2942; border-left-color: #64b5f6; }
.bf-access-label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.bf-access-select { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 14px; }
.bf-required { color: var(--baron-red); }
@media (max-width: 700px) {
.bf-app-descriptions { grid-template-columns: 1fr; }
}
/* Dashboard-specific responsive polish */
@media (max-width: 640px) {
.bf-section { padding: 14px; }
.bf-create-section { padding: 12px 14px; }
.bf-summary-stats { gap: 8px; }
.bf-summary-stat { padding: 8px 12px; font-size: 12px; }
.bf-summary-stat strong { font-size: 18px; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
/* Filter rows stack vertically so buttons don't wrap mid-word */
.bf-filters { flex-direction: column; align-items: stretch; }
.bf-filters select, .bf-filters .bf-btn { width: 100%; }
}
/* Section header layout: section-level navigation links live on the right, not in the filter row. */
.bf-section-nav { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.bf-section-nav a { font-size: 13px; color: var(--baron-blue); text-decoration: none; font-weight: 500; white-space: nowrap; }
.bf-section-nav a:hover { text-decoration: underline; }
.bf-section-nav a + a::before { content: "·"; color: var(--text-muted); margin-right: 8px; display: inline-block; }
/* Empty-state block — friendlier than just a gray sentence. Used when a section has no rows. */
.bf-empty-state {
text-align: center;
padding: 28px 20px;
color: var(--text-muted);
background: var(--bg-app);
border-radius: 6px;
border: 1px dashed var(--border);
}
.bf-empty-state-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.bf-empty-state-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.bf-empty-state-text { font-size: 13px; line-height: 1.4; }
html.dark-mode .bf-app-card { background: #0f2942; border-color: #0f3460; border-left-color: #64b5f6; }
html.dark-mode .bf-app-card h3 { color: #90caf9; }
html.dark-mode .bf-app-card ul strong { color: #64b5f6; }
/* Callouts/helper boxes */
.bf-callout { padding: 12px 16px; border-radius: 6px; margin: 12px 0; font-size: 13px; }
.bf-callout-warn { background: #fef3c7; border-left: 4px solid var(--baron-blue-accent); color: #78350f; }
.bf-callout-info { background: #eff6ff; border-left: 4px solid var(--baron-blue); color: #1e40af; }
/* File attachments */
.bf-field-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.bf-attachment { padding: 6px 0; }
.bf-attachment a { color: var(--baron-blue); font-weight: 600; text-decoration: none; }
.bf-attachment a:hover { text-decoration: underline; }
.bf-attachment-meta { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
/* Line-items repeater (form) */
.bf-line-items { margin: 8px 0 4px; }
.bf-line-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.bf-line-table th { text-align: left; padding: 6px 8px; background: #f4f6f8; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.bf-line-table td { padding: 6px 4px; vertical-align: top; }
.bf-line-table input, .bf-line-table select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 13px; box-sizing: border-box; }
.bf-remove-row { background: #e2e8f0; border: 1px solid #cbd5e1; color: #64748b; padding: 4px 10px; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 4px; }
.bf-remove-row:hover { background: var(--baron-red); color: white; border-color: var(--baron-red); }
.bf-add-row { margin-top: 4px; }
/* Line-items rendering on view page */
.bf-line-header { font-weight: 600; padding-top: 10px !important; color: var(--baron-blue); }
.bf-detail-lines { width: 100%; border-collapse: collapse; margin: 5px 0 15px; font-size: 13px; }
.bf-detail-lines th { text-align: left; padding: 6px 10px; background: #f4f6f8; border-bottom: 2px solid var(--border); font-weight: 600; }
.bf-detail-lines td { padding: 6px 10px; border-bottom: 1px solid #eee; }
/* Collapsible form sections */
.bf-collapsible .bf-section-toggle { cursor: pointer; user-select: none; }
.bf-collapsible .bf-section-toggle:hover { color: var(--baron-red); }
.bf-collapsible .bf-caret { display: inline-block; width: 14px; text-align: center; color: var(--text-muted); font-size: 11px; margin-right: 4px; }
.bf-collapsible.bf-collapsed .bf-section-body { display: none; }
.bf-collapsible.bf-collapsed { padding-bottom: 6px; }
/* Dashboard: per-form groupings */
.bf-form-group { margin: 20px 0 30px; }
.bf-form-group h3 { font-size: 16px; color: var(--baron-blue); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
.bf-form-group h3 .bf-count { color: var(--text-muted); font-weight: normal; font-size: 13px; }
/* Edit mode: existing files block */
.bf-existing-files { margin-bottom: 8px; padding: 8px 10px; background: #f4f6f8; border-radius: 5px; border-left: 3px solid var(--baron-blue); }
/* Form-tile admin gear */
.bf-form-tile-wrap { position: relative; display: flex; }
.bf-form-tile-wrap[hidden] { display: none !important; }
.bf-form-tile-wrap > .bf-form-tile { flex: 1; }
/* Admin gear moved to bottom-right so it doesn't collide with top-right GROUP/Locked badges.
Low opacity by default — emerges on hover of the surrounding tile wrap. */
.bf-tile-gear {
position: absolute;
bottom: 6px;
right: 6px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.85);
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
line-height: 1;
border: 1px solid var(--border);
transition: all 0.2s ease;
z-index: 2;
opacity: 0.35;
}
.bf-form-tile-wrap:hover .bf-tile-gear { opacity: 1; }
.bf-tile-gear:hover {
background: var(--baron-red);
color: white;
border-color: var(--baron-red);
transform: rotate(30deg);
}
/* Approval workflow visual editor */
.bf-workflow-section {
background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
border-radius: 8px;
padding: 22px;
margin-top: 24px;
border-left: 4px solid var(--baron-blue);
}
.bf-workflow-section h3 {
margin: 0 0 6px;
font-size: 18px;
color: var(--baron-blue);
text-transform: none;
letter-spacing: 0;
}
.bf-workflow-flow {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0 18px;
}
.bf-workflow-step {
background: white;
border: 2px solid var(--border);
border-radius: 8px;
padding: 14px 16px;
min-width: 200px;
max-width: 280px;
flex: 0 1 auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
}
.bf-workflow-step.bf-step-start { border-color: var(--baron-slate); }
.bf-workflow-step.bf-step-approver { border-color: var(--baron-blue); }
.bf-workflow-step.bf-step-final { border-color: var(--baron-green); background: #ecfdf5; }
.bf-workflow-step.bf-step-warning { border-color: #f59e0b; background: #fef3c7; }
.bf-step-icon { font-size: 20px; text-align: center; margin-bottom: 4px; }
.bf-step-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; font-weight: 600; }
.bf-step-group-name { font-weight: 700; font-size: 14px; color: var(--baron-navy); text-align: center; margin: 4px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.bf-step-note { font-size: 11px; color: #78350f; margin-top: 6px; text-align: center; }
.bf-step-members { font-size: 12px; margin: 4px 0; }
.bf-step-member { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.bf-step-member-email { color: var(--text); word-break: break-all; }
.bf-step-member-empty { color: #b45309; font-size: 11px; font-style: italic; padding: 4px 0; }
.bf-step-x { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 4px; font-size: 12px; }
.bf-step-x:hover { color: var(--baron-red); }
.bf-step-add { display: flex; gap: 4px; margin-top: 8px; }
.bf-step-add input[type=email] { flex: 1; padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; min-width: 0; }
.bf-step-add .bf-btn-small { padding: 4px 8px; font-size: 11px; }
.bf-step-footer { margin-top: 10px; text-align: center; padding-top: 8px; border-top: 1px dashed var(--border); }
.bf-step-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; }
.bf-step-remove:hover { color: var(--baron-red); text-decoration: underline; }
.bf-workflow-arrow { align-self: center; font-size: 22px; color: var(--baron-slate); font-weight: 700; }
.bf-workflow-add-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: white; border-radius: 6px; border: 1px dashed var(--border); }
.bf-workflow-add-group label { font-weight: 600; font-size: 13px; }
.bf-workflow-add-group select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
@media (max-width: 700px) {
.bf-workflow-step { max-width: 100%; }
.bf-workflow-arrow { transform: rotate(90deg); }
}
/* Workflow mode toggle + reorder */
.bf-workflow-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.bf-workflow-mode { display: flex; gap: 14px; align-items: center; background: white; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); }
.bf-mode-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.bf-mode-choice { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.bf-step-order { background: var(--baron-blue); color: white; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-align: center; margin-bottom: 4px; align-self: center; }
.bf-step-arrow { background: #e2e8f0; border: 1px solid #cbd5e1; color: #475569; padding: 2px 7px; font-size: 11px; cursor: pointer; border-radius: 4px; margin: 0 2px; }
.bf-step-arrow:hover:not(:disabled) { background: var(--baron-blue); color: white; border-color: var(--baron-blue); }
.bf-step-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
/* Focused edit-view breadcrumb (replaces tab nav while editing a form) */
.bf-admin-breadcrumb { padding: 10px 14px; background: white; border-radius: 6px; margin-bottom: 16px; border-left: 4px solid var(--baron-blue); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.bf-admin-breadcrumb a { color: var(--baron-blue); text-decoration: none; font-weight: 600; }
.bf-admin-breadcrumb a:hover { text-decoration: underline; }
.bf-breadcrumb-sep { color: var(--text-muted); }
.bf-breadcrumb-current { color: var(--baron-navy); font-weight: 600; }
/* Conditional routing table */
.bf-routing-section { margin-top: 18px; border-left-color: var(--baron-blue-accent); }
.bf-routes-table code { background: #eef2f7; padding: 1px 5px; border-radius: 3px; }
.bf-route-mode { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.bf-route-mode-parallel { background: #eef2f7; color: var(--baron-blue); }
.bf-route-mode-sequential { background: #fef3c7; color: #78350f; }
.bf-route-add-row td { background: #f8fafc; }
.bf-route-add-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.bf-route-add-form input[type=text] { flex: 1 1 200px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
.bf-route-add-form select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; }
/* Route preview — one mini-lane per router-field value */
.bf-route-preview { margin: 14px 0; padding: 12px 14px; background: #fafbfc; border: 1px solid var(--border); border-left: 4px solid var(--baron-blue-accent); border-radius: 6px; }
.bf-route-preview-label { font-weight: 700; color: var(--baron-navy); font-size: 14px; margin-bottom: 8px; }
.bf-route-preview-mode { font-weight: 400; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.bf-workflow-flow-mini { gap: 6px; flex-wrap: wrap; }
.bf-workflow-flow-mini .bf-workflow-step { min-height: auto; padding: 10px 14px; }
.bf-step-approver-mini { min-width: 140px; max-width: 200px; }
.bf-step-member-count { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.bf-route-parallel { display: flex; flex-direction: column; gap: 4px; align-items: stretch; padding: 6px 8px; border: 1px dashed var(--baron-blue-light); border-radius: 6px; background: rgba(46,120,181,0.04); }
.bf-route-parallel-label { font-size: 11px; color: var(--baron-blue); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; text-align: center; }
.bf-route-parallel-row { display: flex; gap: 6px; align-items: stretch; }
html.dark-mode .bf-route-preview { background: #0f2942; border-color: #0f3460; }
html.dark-mode .bf-route-preview-label { color: #e0e0e0; }
html.dark-mode .bf-route-parallel { background: rgba(100,181,246,0.08); border-color: #1a4d7c; }
html.dark-mode .bf-route-parallel-label { color: #90caf9; }
html.dark-mode .bf-step-member-count { color: #b0bec5; }
/* ============================================================
Dark Mode — toggled via html.dark-mode; localStorage key "darkMode"
Shared localStorage with OPS Forms so toggle state is consistent.
============================================================ */
html.dark-mode {
--bg-page: #1a1a2e;
--bg-card: #16213e;
--border: #0f3460;
--text: #f1f5f9; /* brighter body text — was #e0e0e0 */
--text-muted: #cbd5e0; /* significantly brighter than #90a4ae for legibility */
--baron-navy: #0a1929;
--baron-blue: #64b5f6;
--baron-blue-light: #90caf9;
--baron-blue-accent: #90caf9;
--baron-slate: #b0bec5;
color-scheme: dark;
}
html.dark-mode body { background: var(--bg-page); color: var(--text); }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4 {
color: #64b5f6;
}
html.dark-mode .bf-section {
background: var(--bg-card);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
border-top-color: #2d4a6e;
}
html.dark-mode .bf-section strong,
html.dark-mode .bf-section span,
html.dark-mode .bf-section p,
html.dark-mode .bf-section label,
html.dark-mode .bf-section li,
html.dark-mode .bf-section td,
html.dark-mode .bf-section th {
color: var(--text);
}
/* Form container + sections: in light mode these have hardcoded white/#fafbfc
backgrounds and a white-bg