/* ═══════════════════════════════════════════════════════════════
Entity 910 Pages — Extracted inline styles
Source files listed in section headers
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
BSFA BRAND REBRAND — design tokens + component system
───────────────────────────────────────────────────────────────
This file is loaded globally (every tenant, every page — see
api/views/layouts.php's shared block), so every rule below
is nested under .bsfa-theme. That class is added ONLY to entity
910's own page wrappers (one class per page file) — it never
appears on another tenant's markup, so none of this can leak into
NuVida/Active Pharm/Sage & Atlas Law/etc. The shared shell (sidebar
accent, header gradient) is themed separately via the existing
per-entity --sa-primary-color/--sa-secondary-color system already
built into this codebase (Entities.colorDark/colorLight) — see
atlascm-brand-colors-update.sql. Do not add bare/unscoped selectors
here (.card, .btn, button, etc.) — always nest under .bsfa-theme.
Colors/type/spacing pulled from bigskyfootandankle.com's live site
(computed styles, checked 2026-08-07) — see project memory for the
full extraction. Rounded rebrand pass 1: tokens + Home + Employee
Hub. Remaining AtlasCM pages follow in subsequent passes.
═══════════════════════════════════════════════════════════════ */
.bsfa-theme {
/* .sa-cc-kpi-card (entity-admin.css, shared with AtlasCD) reads the
platform's generic --sa-primary-color/--sa-secondary-color for its
navy gradient -- pointing those at BSFA's own navy/blue here means
reusing that shared component still renders in-brand instead of the
platform's default muddy brown (#282320). */
--sa-primary-color: var(--bsfa-navy);
--sa-secondary-color: var(--bsfa-blue);
--bsfa-navy: #0C3560; /* BSFA hero/header navy */
--bsfa-navy-text: #0F1E35; /* BSFA body text */
--bsfa-blue: #1565C0; /* BSFA primary action blue */
--bsfa-blue-dark: #0F4FA0;
--bsfa-blue-soft: rgba(21, 101, 192, 0.08);
--bsfa-blue-soft-2: rgba(21, 101, 192, 0.14);
--bsfa-slate: #3A5470; /* muted icon/secondary color */
--bsfa-text-muted: #5B6B7F;
--bsfa-text-faint: #8896A6;
--bsfa-bg-soft: #F4F8FC; /* alternating soft section bg */
--bsfa-bg-page: #FAFBFD;
--bsfa-border: #E4EAF2;
--bsfa-border-soft: #EDF1F7;
--bsfa-success: #1B8A5A;
--bsfa-success-soft: #E7F6EF;
--bsfa-warning: #B7791E;
--bsfa-warning-soft: #FDF3E2;
--bsfa-danger: #C0392B;
--bsfa-danger-soft: #FBEAE8;
--bsfa-info-soft: #E9F2FC;
--bsfa-loc-1: #14b8a6; /* Calendar location-differentiator accent (Bozeman) — categorical, not semantic */
--bsfa-loc-2: #a855f7; /* Calendar location-differentiator accent (Butte) */
--bsfa-radius-sm: 8px;
--bsfa-radius-md: 14px;
--bsfa-radius-lg: 20px;
--bsfa-radius-pill: 999px;
--bsfa-shadow-xs: 0 1px 2px rgba(15, 30, 53, 0.04);
--bsfa-shadow-sm: 0 2px 8px rgba(15, 30, 53, 0.05);
--bsfa-shadow-md: 0 8px 24px rgba(15, 30, 53, 0.07);
--bsfa-font: 'Inter', system-ui, -apple-system, sans-serif;
font-family: var(--bsfa-font);
color: var(--bsfa-navy-text);
background: var(--bsfa-bg-page);
}
/* Bootstrap's outer .modal element is a full-viewport, normally-transparent
positioning wrapper around .modal-dialog/.modal-content -- it is NOT the
visible card. Bootstrap moves the modal to a direct child of when
it opens, outside the page's own .bsfa-theme-scoped wrapper, so every
BSFA modal re-applies .bsfa-theme directly on .modal to keep the
--bsfa-navy/--bsfa-blue/etc. tokens resolving inside it. That
unintentionally pulled in this file's base .bsfa-theme background rule
too, painting an opaque page-colored layer over the ENTIRE viewport at a
z-index above the dimmed .modal-backdrop -- every BSFA modal looked like
a full separate page instead of a card floating over a dimmed page
(2026-09-25 design feedback). CSS custom properties still cascade into
.modal-content fine without a background here -- inheritance doesn't
depend on this property being set on an ancestor. */
.modal.bsfa-theme { background: transparent; }
/* ── Typography ─────────────────────────────────────────────────── */
.bsfa-theme h1, .bsfa-theme h2, .bsfa-theme h3, .bsfa-theme h4, .bsfa-theme h5, .bsfa-theme h6 {
font-family: var(--bsfa-font);
color: var(--bsfa-navy-text);
letter-spacing: -0.01em;
}
.bsfa-theme .text-muted, .bsfa-theme small.text-muted { color: var(--bsfa-text-muted) !important; }
.bsfa-theme a { color: var(--bsfa-blue); }
.bsfa-theme a:hover { color: var(--bsfa-blue-dark); }
/* ── Page header ────────────────────────────────────────────────── */
/* 2026-10-05: previously a single flex-wrap row containing the title
column, a width:100% stats block, and the actions buttons. Flex-wrap
packs items line-by-line, and a width:100% item can never share a line
with anything else -- so stats always forced a wrap onto their own row,
which then pushed actions (coming after stats in DOM order) onto a
THIRD row, floating alone with nothing to its right ("Add Contact"
reported as sitting in "a weird space" below the KPI cards on
/entities/910/contacts/, with a cramped-feeling table below it since
that extra row ate vertical space before reaching real content). Title
and actions are now a single row via .bsfa-page-header__top below, with
stats as their own full-width row underneath -- two rows of chrome
instead of three, and the button sits beside the title where a primary
action is expected. */
.bsfa-page-header {
display: flex; flex-direction: column; margin-bottom: 5px;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
background: #f0f0f0;
/* padding-inline-start is intentionally NOT set here -- the platform's
base .page-header-breadcrumb rule already supplies the correct,
sidebar-width-aware value (16.4rem expanded / 6rem collapsed, see
styles.css:3800-3816 and :11433-11435), which is real clearance for
the fixed, higher-z-index .app-sidebar, not dead space. A flat
`1.45rem !important` was tried here 2026-09-28 -- but applied
unconditionally, it beat the real sidebar's clearance, hiding the
eyebrow/title text and the header avatar behind the sidebar in both
its expanded and collapsed states (reported same day on
/entities/910/home/). */
}
.bsfa-page-header__top {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; width: 100%;
}
.bsfa-page-header__eyebrow {
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--bsfa-blue); margin-bottom: 0.35rem; display: block;
}
.bsfa-page-header__title {
font-size: 1.6rem; font-weight: 300; color: var(--bsfa-navy-text); margin: 0;
letter-spacing: -0.02em; line-height: 1.15;
}
/* styles.css:8601 forces .page-header-breadcrumb h4 to white !important,
assuming a dark header background — our light BSFA header needs to beat
that with equal !important + higher specificity (3 classes vs their
attribute+class+element). */
.bsfa-page-header.bsfa-theme .bsfa-page-header__title,
.bsfa-page-header.bsfa-theme h4 {
color: var(--bsfa-navy-text) !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.bsfa-page-header__desc {
font-size: 0.85rem; color: var(--bsfa-text-muted); margin-top: 0.35rem; max-width: 56ch;
}
.bsfa-page-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bsfa-page-header__meta { font-size: 0.7rem; color: var(--bsfa-text-faint); }
/* 2026-10-05: standardized, global rule -- a page's primary/secondary
actions always live in the header's actions slot, right-aligned (the
flex layout above already does that), and always render at this size.
Several pages had wired a real action button (Add Staff Profile, Give
Kudos, etc.) with .btn-sm to match the header's otherwise-small type
scale, which understated what's usually the single most important
control on the page -- and a few pages (Staff Directory) hadn't put
their primary action in this slot at all, burying it down in the KPI
row instead. This rule forces every button here to the same confident
size regardless of what size class a given page's markup happens to
add, so a page can't quietly opt back into "small" -- consistency is
enforced centrally, not left to each page to remember. */
.bsfa-page-header__actions .btn,
.bsfa-page-header__actions .btn-sm {
font-size: 0.95rem;
padding: 0.55rem 1.15rem;
font-weight: 600;
}
/* 2026-09-25: the header previously had a lot of dead blank space below the
title on every page while a separate .sa-stat-card row duplicated that
space between the toolbar/search bar and the table, pushing the table
further from its own controls. This slot lets a page's KPIs live in the
header instead, via bsfaRenderPageHeader()'s `statsHtml` +
bsfaHeaderStatHtml() (api/includes/incl-bsfa-page-header.php), reusing
the exact same .sa-stat-card/.sa-stats-row markup every other KPI row on
the site already uses (Employee Hub, Performance Dashboard) so it's
visually identical everywhere, not a parallel component.
Tried living beside the title on wide screens first (2026-09-25, same
day) -- that squeezed the description column narrower, which sometimes
pushed it to wrap an extra line the header's height wasn't sized for,
overlapping the content below. Always full-width below the title
avoids that entirely and gives full-height .sa-stat-card's room to
render properly instead of a cramped inline chip. */
.bsfa-page-header__stats { width: 100%; margin-top: 0.85rem; }
.bsfa-page-header__stats .sa-stats-row { margin-bottom: 0; }
/* 2026-10-05: companion to the above for bsfaRenderPageHeader()'s
'statsInline' opt-in (bsfaRenderPageHeaderStats()) -- same cards, placed
inside .main-content.app-content instead of the header, specifically so
they scroll away with the rest of the page content. .bsfa-page-header is
a sibling of .main-content.app-content, not a descendant, so nothing
inside it can ever be part of that scroll region; moving the KPI row's
actual DOM location is the only way to make it scroll, not a CSS
position change. margin-bottom (not -top, unlike the in-header variant
above) since this sits ABOVE the toolbar/table it now precedes, not
below a title it used to follow. */
.bsfa-page-header-inline-stats { margin-bottom: 1rem; }
.bsfa-page-header-inline-stats .sa-stats-row { margin-bottom: 0; }
/* Below 991px the base theme's fixed .app-header stops being offset by
the shared page-header-breadcrumb rule's `top: 4rem` (that value gets
overridden to 0 in this app's mobile nav-toggled state), so our lighter
header sits underneath the fixed topbar. Force real clearance instead
of relying on the shared rule. */
@media (max-width: 991px) {
.bsfa-page-header.bsfa-theme {
padding-block-start: 4.5rem !important;
}
}
/* The header's eyebrow/title/description column and its actions slot are
plain flex children with no stacking rule — on a phone with 2-3 export
buttons in the actions slot, the title column gets squeezed into a
narrow strip alongside them instead of cleanly stacking underneath. */
@media (max-width: 576px) {
.bsfa-theme .bsfa-page-header__top {
flex-direction: column;
align-items: stretch;
}
.bsfa-theme .bsfa-page-header__actions {
justify-content: flex-start;
width: 100%;
}
}
/* Tables with 4+ columns and width:100% squeeze every column into an
unreadable sliver on phones (names wrapping letter-by-letter). Let them
size naturally and scroll horizontally inside their existing
.table-responsive wrapper instead. Extended to 991px (tablet portrait) —
the same DataTables-forced pixel widths squeeze there too, just less
severely than on a true phone. */
@media (max-width: 991px) {
.bsfa-theme .table-responsive > table.w-100 { width: auto !important; }
/* white-space:normal lets the browser "solve" the narrow viewport by
wrapping cell text instead of growing the table — which is exactly
the letter-by-letter wrapping we're trying to avoid. Force nowrap so
the table takes its natural width and overflows into the scroller. */
.bsfa-theme .table-responsive > table.w-100 td,
.bsfa-theme .table-responsive > table.w-100 th {
white-space: nowrap !important;
word-break: normal !important;
}
}
/* Header/export .btn-sm buttons and modal-footer buttons compute to ~30px
tall — under the ~40-44px touch-target floor — on phones. */
@media (max-width: 576px) {
.bsfa-theme .bsfa-page-header__actions .btn-sm,
.bsfa-theme .modal-footer .btn-sm {
min-height: 40px;
padding: 0.5rem 0.9rem;
}
}
/* KPI stat-card rows rely on flex-wrap + a 220px min-width with no
breakpoint of their own between phone (which the platform's own 768px
rule already stacks to 1-column) and desktop (992px, where the sidebar
collapses to a hamburger) — so a 4-card row on a tablet-portrait width
wraps into an awkward "3 cards then 1 lonely full-width card" instead of
a clean grid. Force 2-up in that gap. */
@media (min-width: 769px) and (max-width: 991px) {
.bsfa-theme .sa-stat-card {
flex: 1 1 calc(50% - 0.5rem);
min-width: calc(50% - 0.5rem);
}
}
/* ── Cards ──────────────────────────────────────────────────────── */
.bsfa-theme .card.custom-card,
.bsfa-theme .card {
background: #fff;
border: 1px solid var(--bsfa-border);
border-radius: var(--bsfa-radius-md);
box-shadow: var(--bsfa-shadow-xs);
}
.bsfa-theme .card .card-body { padding: 1.5rem; }
.bsfa-theme .card-title, .bsfa-theme .card-header { color: var(--bsfa-navy-text); font-weight: 600; }
/* ── Stat cards (sa-stat-card, used across AtlasCM KPI rows) ──────── */
/* 2026-09-25 (site owner, three passes): (1) an all-navy-gradient treatment
read as too heavy/uniform across an 8-card row; (2) a white card with a
3px top edge + 38px solid icon badge was closer but still read as loose/
soft, not "modern"; (3) explicitly asked for square corners. Landed here:
sharp corners throughout (card, icon), a tighter 2px top edge, a smaller
soft-tint icon square (mirrors --stat-accent instead of a bold solid
fill -- less "sticker," more like a spec-sheet swatch), an uppercase
micro-label (the platform default treatment this file used to override
to sentence-case -- reverted, since a small caps label plus a bold
number is the tighter, denser "dashboard metric" convention this needed)
and a bold value instead of the previous thin/oversized one. --stat-
accent still drives both the top edge and the icon tint from one place. */
.bsfa-theme .sa-stat-card {
--stat-accent: var(--bsfa-slate);
position: relative;
background: #fff;
border: 1px solid var(--bsfa-border);
border-top: 2px solid var(--stat-accent);
border-radius: 0;
box-shadow: var(--bsfa-shadow-xs);
padding: 0.85rem 1rem 0.95rem;
}
.bsfa-theme .sa-stat-card--highlight,
.bsfa-theme .sa-stat-card--warning { --stat-accent: var(--bsfa-warning); } /* --warning is Contacts' "Follow-Ups Due" tile (atlasmps-custom.css); same accent as --highlight since both mean "needs attention" */
.bsfa-theme .sa-stat-card--success { --stat-accent: var(--bsfa-success); }
.bsfa-theme .sa-stat-card--danger { --stat-accent: var(--bsfa-danger); }
.bsfa-theme .sa-stat-card--info { --stat-accent: var(--bsfa-blue); }
.bsfa-theme .sa-stat-card__header { margin-bottom: 0.45rem; }
.bsfa-theme .sa-stat-card__title {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--bsfa-text-faint); margin: 0;
}
.bsfa-theme .sa-stat-card__icon {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
color: var(--stat-accent) !important; background: color-mix(in srgb, var(--stat-accent) 14%, #fff) !important;
border-radius: 0 !important; font-size: 0.85rem; opacity: 1;
}
.bsfa-theme .sa-stat-card__value {
font-size: 1.6rem; font-weight: 700; color: var(--bsfa-navy-text); line-height: 1.05; margin-top: 0.15rem;
}
.bsfa-theme .sa-stat-card__subtitle { font-size: 0.72rem; color: var(--bsfa-text-muted); margin-top: 0.1rem; }
/* Response-to-interaction lift (the Elevation system's "Response, Not
Decoration" rule) — a resting card stays at shadow-xs; hover is the
only place it earns shadow-sm + a 1px rise. */
.bsfa-theme .sa-stat-card {
transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.bsfa-theme .sa-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--bsfa-shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
.bsfa-theme .sa-stat-card { transition: none; }
.bsfa-theme .sa-stat-card:hover { transform: none; }
}
/* Value row: big number + delta badge side by side, sparkline underneath.
Cards that don't use these (most existing analytics pages) are unaffected
— these are additive classes, not changes to the base .sa-stat-card__value. */
.bsfa-theme .sa-stat-card__value-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.bsfa-theme .atlascm-sparkline-wrap { height: 30px; margin-top: 0.4rem; opacity: 0.9; }
.bsfa-theme .atlascm-delta { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: var(--bsfa-radius-pill); }
.bsfa-theme .atlascm-delta--up { background: var(--bsfa-success-soft); color: var(--bsfa-success); }
.bsfa-theme .atlascm-delta--down { background: var(--bsfa-danger-soft); color: var(--bsfa-danger); }
.bsfa-theme .atlascm-delta--flat { background: var(--bsfa-bg-soft); color: var(--bsfa-text-muted); }
.bsfa-theme .atlascm-delta i { font-size: 0.62rem; }
/* Skeleton loading state — a resting shimmer, never a spinner. Applied to
any block via `.bsfa-skeleton`; sizing comes from the element itself. */
.bsfa-theme .bsfa-skeleton {
position: relative; overflow: hidden; background: var(--bsfa-bg-soft);
border-radius: var(--bsfa-radius-sm); color: transparent !important;
}
.bsfa-theme .bsfa-skeleton::after {
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(21,101,192,0.09), transparent);
animation: bsfaShimmer 1.4s ease-in-out infinite;
}
@keyframes bsfaShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.bsfa-theme .bsfa-skeleton::after { animation: none; display: none; }
}
/* Staggered entrance for first-paint lists (schedule rows, activity feed,
staff-on-shift chips) — each item fades/slides in slightly after the
previous one via inline --i custom property set per-row. */
.bsfa-theme .bsfa-enter {
animation: bsfaEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes bsfaEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.bsfa-theme .bsfa-enter { animation: bsfaEnterReduced 0.01s both; animation-delay: 0ms; }
@keyframes bsfaEnterReduced { from { opacity: 0; } to { opacity: 1; } }
}
/* ── Buttons ────────────────────────────────────────────────────── */
.bsfa-theme .btn-primary {
background: var(--bsfa-blue); border-color: var(--bsfa-blue); color: #fff;
border-radius: var(--bsfa-radius-pill); font-weight: 600; padding: 0.5rem 1.15rem;
box-shadow: 0 2px 10px rgba(21, 101, 192, 0.25);
}
.bsfa-theme .btn-primary:hover, .bsfa-theme .btn-primary:focus {
background: var(--bsfa-blue-dark); border-color: var(--bsfa-blue-dark);
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.32);
}
.bsfa-theme .btn-outline-primary, .bsfa-theme .btn-outline-secondary, .bsfa-theme .btn-light {
background: #fff; border: 1px solid var(--bsfa-border); color: var(--bsfa-navy-text);
border-radius: var(--bsfa-radius-pill); font-weight: 600; padding: 0.5rem 1.15rem;
}
.bsfa-theme .btn-outline-primary { color: var(--bsfa-blue); border-color: rgba(21, 101, 192, 0.35); }
.bsfa-theme .btn-outline-primary:hover { background: var(--bsfa-blue-soft); }
.bsfa-theme .btn-outline-secondary:hover, .bsfa-theme .btn-light:hover { background: var(--bsfa-bg-soft); }
.bsfa-theme .btn-outline-danger {
border-radius: var(--bsfa-radius-pill); font-weight: 600; padding: 0.5rem 1.15rem;
color: var(--bsfa-danger); border-color: rgba(192, 57, 43, 0.25); background: #fff;
}
.bsfa-theme .btn-outline-danger:hover { background: var(--bsfa-danger-soft); }
/* Raw Bootstrap btn-success/btn-warning predate the rebrand and clash with
the calm palette — mute them to the brand's semantic success/warning
tokens rather than converting every call site to a different class. */
.bsfa-theme .btn-success {
background: var(--bsfa-success); border-color: var(--bsfa-success); color: #fff;
border-radius: var(--bsfa-radius-pill); font-weight: 600; padding: 0.5rem 1.15rem;
}
.bsfa-theme .btn-success:hover, .bsfa-theme .btn-success:focus {
background: #156e48; border-color: #156e48;
}
.bsfa-theme .btn-warning {
background: var(--bsfa-warning); border-color: var(--bsfa-warning); color: #fff;
border-radius: var(--bsfa-radius-pill); font-weight: 600; padding: 0.5rem 1.15rem;
}
.bsfa-theme .btn-warning:hover, .bsfa-theme .btn-warning:focus {
background: #96611a; border-color: #96611a;
}
.bsfa-theme .btn-sm { padding: 0.3rem 0.85rem; font-size: 0.78rem; }
.bsfa-theme .btn { transition: all 0.15s ease; }
/* ── Tables ─────────────────────────────────────────────────────── */
.bsfa-theme .table thead th {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--bsfa-text-faint); border-bottom: 1px solid var(--bsfa-border); background: transparent;
padding: 0.65rem 0.85rem;
}
.bsfa-theme .table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--bsfa-border-soft); color: var(--bsfa-navy-text); vertical-align: middle; }
.bsfa-theme .table tbody tr:hover { background: var(--bsfa-bg-soft); }
.bsfa-theme .table tbody tr:last-child td { border-bottom: none; }
/* ── Badges / status pills ─────────────────────────────────────── */
.bsfa-theme .badge {
font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em; border-radius: var(--bsfa-radius-pill);
padding: 0.3rem 0.65rem;
}
.bsfa-theme .badge.bg-success-transparent { background: var(--bsfa-success-soft) !important; color: var(--bsfa-success) !important; }
.bsfa-theme .badge.bg-warning-transparent { background: var(--bsfa-warning-soft) !important; color: var(--bsfa-warning) !important; }
.bsfa-theme .badge.bg-danger-transparent { background: var(--bsfa-danger-soft) !important; color: var(--bsfa-danger) !important; }
.bsfa-theme .badge.bg-primary-transparent { background: var(--bsfa-blue-soft) !important; color: var(--bsfa-blue) !important; }
.bsfa-theme .badge.bg-secondary-transparent, .bsfa-theme .badge.bg-info-transparent { background: var(--bsfa-info-soft) !important; color: var(--bsfa-slate) !important; }
/* ── Forms ──────────────────────────────────────────────────────── */
.bsfa-theme .form-control, .bsfa-theme .form-select {
border: 1px solid var(--bsfa-border); border-radius: var(--bsfa-radius-sm);
padding: 0.55rem 0.85rem; font-size: 0.85rem; color: var(--bsfa-navy-text);
}
.bsfa-theme .form-control:focus, .bsfa-theme .form-select:focus {
border-color: var(--bsfa-blue); box-shadow: 0 0 0 3px var(--bsfa-blue-soft);
}
.bsfa-theme .form-label { font-size: 0.78rem; font-weight: 600; color: var(--bsfa-navy-text); margin-bottom: 0.35rem; }
.bsfa-theme .form-check-input:checked { background-color: var(--bsfa-blue); border-color: var(--bsfa-blue); }
/* ── File upload drag & drop (global rule, 2026-09-25) ──────────────
Built by initFileDropZones() in samg-common.js -- every input[type=file]
across AtlasCM gets wrapped in a .bsfa-dropzone box automatically, no
page markup changes needed. The native stays inside the box
unchanged (still a plain .form-control), so this only adds a dashed
affordance + dragover highlight around it. .bsfa-dropzone-inline is the
variant used when the underlying input is display:none (Chat's
paperclip-triggered upload) -- there the highlight is applied to the
input's own parent bar instead of a dedicated box, since a full dashed
box doesn't fit that compact layout. */
.bsfa-theme .bsfa-dropzone {
border: 2px dashed var(--bsfa-border);
border-radius: var(--bsfa-radius-sm);
background: var(--bsfa-bg-soft);
padding: 0.6rem;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bsfa-theme .bsfa-dropzone .form-control[type="file"] {
border: none; background: transparent; padding: 0.15rem 0; cursor: pointer;
}
.bsfa-theme .bsfa-dropzone.bsfa-dropzone--over {
border-color: var(--bsfa-blue);
border-style: solid;
background: var(--bsfa-blue-soft-2);
}
.bsfa-theme .bsfa-dropzone-inline {
border-radius: var(--bsfa-radius-sm);
transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.bsfa-theme .bsfa-dropzone-inline.bsfa-dropzone--over {
box-shadow: 0 0 0 2px var(--bsfa-blue) inset;
background: var(--bsfa-blue-soft);
}
.bsfa-theme .bsfa-dropzone__msg {
font-size: 0.72rem; color: var(--bsfa-danger); margin-top: 0.35rem;
}
/* ── Modals ─────────────────────────────────────────────────────── */
/* Platform-wide fix (2026-09-24): only 9 of this Hub's 37 modal-dialog
instances used Bootstrap's .modal-dialog-centered class, so most modals
opened top-aligned instead of floating centered -- inconsistent and,
per the site owner, didn't read as "floating above the page." Centering
is applied here, globally, to every .bsfa-theme modal at once (mirrors
Bootstrap's own .modal-dialog-centered implementation) rather than
editing all 37 modal-dialog divs by hand -- new modals get this for
free too. Also: assets/css/atlasmps-custom.css has a platform-wide
`.modal-content { border-radius: 0 !important; }` rule that was
silently beating this file's own (non-!important) rounded-corner rule
-- !important added below so AtlasCM's modals actually get their
intended rounded, elevated "floating card" look instead of flat/square
corners. */
.bsfa-theme .modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 3.5rem);
}
.bsfa-theme .modal-content { border-radius: var(--bsfa-radius-md) !important; border: none; box-shadow: 0 1rem 3rem rgba(0,0,0,0.18); }
.bsfa-theme .modal-header { border-bottom: 1px solid var(--bsfa-border); padding: 1.1rem 1.5rem; }
.bsfa-theme .modal-title { font-weight: 600; font-size: 1.05rem; color: var(--bsfa-navy-text); }
.bsfa-theme .modal-body { padding: 1.5rem; }
.bsfa-theme .modal-footer { border-top: 1px solid var(--bsfa-border); padding: 1rem 1.5rem; }
/* Marked by samg-common.js's shown.bs.modal handler (see that file for why
this can't be done in pure CSS) -- overrides Bootstrap's own CSS custom
properties rather than fighting its background/opacity rules directly,
so the .show fade transition still works exactly as Bootstrap intends. */
.modal-backdrop.sa-bsfa-backdrop { --bs-backdrop-bg: #0a1628; --bs-backdrop-opacity: 0.65; }
/* ── Tabs / pills ───────────────────────────────────────────────── */
.bsfa-theme .nav-tabs { border-bottom: 1px solid var(--bsfa-border); }
.bsfa-theme .nav-tabs .nav-link {
border: none; color: var(--bsfa-text-muted); font-weight: 600; font-size: 0.85rem;
padding: 0.6rem 0.25rem; margin-right: 1.5rem; border-radius: 0;
}
.bsfa-theme .nav-tabs .nav-link.active {
color: var(--bsfa-blue); border-bottom: 2px solid var(--bsfa-blue); background: transparent;
}
/* ── Empty states ───────────────────────────────────────────────── */
/* 2026-09-25: this component existed but nothing on the site actually used
it yet — every "No X yet" empty state across AtlasCM was a bare
.text-muted one-liner with no visual treatment (flagged in the UI-polish
pass). Extended with an optional icon square (sharp corners, matching
.sa-stat-card__icon's language, not the older 50%-circle
.so-cart-empty-icon) + title/text slots, and rolled out to the plainest
empty states on the least-recently-touched pages (Locations, Onboarding,
Recognition, Forms Center, PTO, Facilities) plus Home/Referrals/Tasks.
Markup: