/* RCRAData Dashboard — styles.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* Fixed brand colour for the "Data" half of the wordmark — matches the website.
NOT a theme token: no [data-theme] rule may override it. Unreadable on white
(~1.7:1), so never use it on light letterheads, PDFs or emails. */
--brand-lime: #B9D142;
--navy: #1a2744;
--epa-blue:#1a3a5c;
--blue: #2563eb;
--blue-lt:#eff6ff;
--green: #16a34a;
--amber: #d97706;
--red: #dc2626;
--gray-50:#f8fafc;
--gray-100:#f1f5f9;
--gray-200:#e2e8f0;
--gray-400:#94a3b8;
--gray-600:#475569;
--gray-900:#0f172a;
--shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
--radius: 6px;
/* Extended tokens — resolve undefined references in EM partials */
--color-text-primary: var(--epa-blue);
--color-text-secondary: var(--gray-600);
--color-text-tertiary: var(--gray-400);
--color-background-primary: #ffffff;
--color-background-secondary: var(--gray-50);
--color-border-secondary: var(--gray-200);
--color-border-tertiary: var(--gray-100);
--border-radius-lg: 8px;
--gray-300: #cbd5e1;
--gray-500: #64748b;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
color: var(--gray-900);
background: var(--gray-50);
line-height: 1.5;
}
/* ---- Nav ---- */
nav {
background: var(--navy);
padding: 0 24px;
display: flex;
align-items: center;
gap: 0;
height: 64px;
position: sticky;
top: 0;
z-index: 1100;
box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
flex: 1;
margin-left: 32px;
}
/* Tighter spacing for the secondary right-side nav group (Quick Lookup,
Portfolio, My Views, Admin, Audit, API, user/sign-out). #qhl-nav-btn keeps
its inline margin-left:auto to push the group to the far right; each item
after it cancels 22px of the .nav-links 32px gap → 10px between them. */
#qhl-nav-btn ~ * { margin-left: -22px; }
.nav-api-docs { margin-left: auto; }
.nav-dd-api-link {
display: block;
padding: 8px 20px;
font-size: 13px;
color: #1a3a5c !important;
text-decoration: none;
font-family: sans-serif;
font-weight: 600;
}
.nav-dd-api-link:hover {
background: rgb(195, 217, 239);
color: #1a3a5c !important;
}
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
margin-left: auto;
}
nav .brand {
color: #fff;
font-weight: 700;
font-size: 16px;
text-decoration: none;
letter-spacing: .3px;
}
nav .brand span { color: #60a5fa; }
.brand,
.brand:hover,
.brand:focus,
.brand:active {
opacity: 1 !important;
background: none !important;
filter: none !important;
text-decoration: none !important;
transition: none !important;
}
.brand img {
opacity: 1 !important;
filter: none !important;
transition: none !important;
}
.brand img:hover {
opacity: 1 !important;
filter: none !important;
}
/* Brand lockup (2026-10-16): Ron's four-element artwork + live "RCRAData" text.
The old LogoWhite.png had the wordmark baked in; the new artwork has none.
Scoped above `nav .brand span` (blue accent) so the wordmark stays white. */
.brand .brand-mark { display: block; flex: none; }
nav .brand .brand-wordmark {
color: #fff;
font-family: 'Nunito Wordmark', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: .2px;
line-height: 1;
margin-left: 10px;
white-space: nowrap;
}
/* Two-tone wordmark: "RCRA" white, "Data" brand lime (same on every theme). */
nav .brand .brand-wordmark .brand-wordmark-data,
.landing-hero-wordmark .brand-wordmark-data,
.auth-brand .brand-wordmark-data { color: var(--brand-lime); }
nav a {
color: rgba(255,255,255,0.9);
text-decoration: none;
font-size: 13px;
padding: 4px 8px;
border-radius: 4px;
transition: color .15s, background .15s, opacity .15s;
}
nav a:hover { color: #fff; opacity: 1; background: rgba(255,255,255,.1); }
nav a.active { color: #fff !important; opacity: 1; font-weight: 600; border-bottom: 2px solid rgba(255,255,255,0.7); }
/* ---- Nav dropdown ---- */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
background: #dbe8f4;
border-radius: 6px;
min-width: 210px;
box-shadow: 0 6px 20px rgba(0,0,0,.15);
z-index: 1200;
padding: 4px 0;
border: 1px solid rgba(26,58,92,.15);
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
display: block;
padding: 8px 20px;
color: #1f2937 !important;
font-size: 13px;
text-decoration: none;
border-radius: 0;
background: none;
white-space: nowrap;
}
.nav-dropdown-menu a:hover { color: #1a3a5c !important; background: #c3d9ef; }
.nav-dropdown-menu a.dd-link-featured { color: var(--color-primary, #1e3a5f) !important; font-weight: 700; }
.nav-dropdown-menu a.dd-link-featured:hover { background: var(--color-bg-subtle, #eff6ff); }
.nav-dropdown > a.dd-open { color: #fff; }
.nav-dropdown-menu .dd-section-label {
display: block;
padding: 8px 20px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #4b6a8a;
cursor: default;
}
.nav-dropdown-menu .dd-section-label:first-child { padding-top: 6px; }
.nav-dropdown-menu .dd-divider {
border: none;
border-top: 1px solid rgba(26,58,92,.2);
margin: 4px 0;
}
.nav-dropdown-menu .dd-placeholder {
display: block;
padding: 8px 20px;
font-size: 12px;
color: #475569;
font-style: italic;
cursor: default;
}
/* ---- Layout ---- */
.page { max-width: 1200px; margin: 0 auto; padding: 28px 24px; }
h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--gray-600); }
.subtitle { color: var(--gray-600); margin-bottom: 24px; font-size: 13px; }
/* ---- Stat cards ---- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.stat-card {
background: #fff;
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
border-top: 3px solid var(--blue);
}
.stat-card.green { border-color: var(--green); }
.stat-card.amber { border-color: var(--amber); }
.stat-card.navy { border-color: var(--navy); }
.stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-400); margin-bottom: 6px; }
.stat-card .label.preserve-case { text-transform: none; letter-spacing: .2px; font-size: 12px; font-weight: 600; }
.stat-card .value { font-size: 26px; font-weight: 700; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-card .sub { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
/* ---- Cards ---- */
.card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px 24px;
margin-bottom: 20px;
}
.card-title {
/* 12 px matches the per-tab inline overrides every EM (and most BR)
partial was setting. The platform's actual stat-card label size
is 12 px — making it the default lets us drop those overrides. */
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
gap: 8px;
}
/* ---- "Top N of M" display-cap disclosure chip (macros/cap_note.html) ----
The ONE shared caption style for a capped table's true total. Amber
disclosure token (#92400e on #fef3c7) — noticeable at a glance, NOT the
muted slate-400/500 one-off captions it replaces, and NOT alarming red. */
.cap-note {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
color: #92400e;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 10px;
padding: 1px 9px;
white-space: nowrap;
vertical-align: middle;
}
/* ---- Forms ---- */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-end;
margin-bottom: 12px;
background: #fff;
border-radius: var(--radius);
padding: 8px 12px;
box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-600); font-weight: 600; }
.field input, .field select {
border: 1px solid var(--gray-200);
border-radius: 4px;
padding: 4px 8px;
font-size: 13px;
height: 30px;
background: #fff;
color: var(--gray-900);
outline: none;
transition: border-color .15s;
min-width: 130px;
}
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.field input[type="checkbox"] { height: auto; width: 16px; min-width: unset; margin-top: 6px; cursor: pointer; }
.filter-group-label {
width: 100%; margin-top: 2px; margin-bottom: 0;
font-size: 11px; font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; color: #6b7280;
border-bottom: 1px solid var(--gray-200); padding-bottom: 2px;
display: flex; align-items: center;
}
/* Status pill toggle buttons */
.status-pill {
display: inline-flex; align-items: center;
padding: 4px 12px; border-radius: 20px;
border: 1px solid var(--gray-300); background: var(--gray-50);
font-size: 12px; font-weight: 500; color: var(--gray-600);
cursor: pointer; user-select: none;
transition: border-color .15s, background .15s, color .15s;
}
.status-pill input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.status-pill:has(input:checked) { border-color:#1a3a5c; background:#dbe8f4; color:#1a3a5c; font-weight:600; }
.status-pill-active:has(input:checked) { border-color:#065f46; background:#d1fae5; color:#065f46; }
.status-pill-inactive:has(input:checked) { border-color:#991b1b; background:#fee2e2; color:#991b1b; }
/* Field hint (partial match / format note under inputs) */
.field-hint { font-size:11px; color:#6b7280; margin-top:3px; display:flex; align-items:center; gap:3px; }
.field-hint::before { content:"ⓘ"; font-size:10px; }
/* Filter panel footer row */
.filter-footer {
width: 100%; display: flex; align-items: center; justify-content: space-between;
margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--gray-200);
}
.clear-filters-link { font-size:12px; color:var(--gray-400); text-decoration:none; }
.clear-filters-link:hover { color:var(--gray-600); text-decoration:underline; }
/* Color-coded search section header variants */
.fgl-core { background:#eff6ff; border-left:3px solid #1a3a5c; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#1a3a5c; margin-bottom:2px; }
.fgl-location { background:#f0fdf4; border-left:3px solid #065f46; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#065f46; margin-bottom:2px; }
.fgl-role { background:#f5f3ff; border-left:3px solid #5b21b6; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#5b21b6; margin-bottom:2px; }
.fgl-activity { background:#fffbeb; border-left:3px solid #92400e; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#92400e; margin-bottom:2px; }
.fgl-status { background:#f8fafc; border-left:3px solid #475569; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#475569; margin-bottom:2px; }
.fgl-mmc { background:#f0fdfa; border-left:3px solid #0f766e; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#0f766e; margin-bottom:2px; }
.fgl-data { background:#f5f3ff; border-left:3px solid #4f46e5; border-bottom:none; padding:4px 8px; border-radius:0 4px 4px 0; color:#3730a3; margin-bottom:2px; }
/* Search text input with brand-blue focus ring */
.search-input { height:30px; border:1px solid #d1d5db; border-radius:6px; padding:0 10px; font-size:13px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.search-input:focus { outline:none; border-color:#1a3a5c; box-shadow:0 0 0 3px rgba(26,58,92,.1); }
/* ── Typeahead inline dropdown (Facility Name, EPA ID, Owner, NAICS) ── */
.ta-dropdown {
position:absolute; left:0; top:100%;
background:#fff; border:1px solid #d1d5db; border-radius:6px;
box-shadow:0 6px 20px rgba(0,0,0,.10);
z-index:1000; max-height:280px; overflow-y:auto; overflow-x:hidden;
margin-top:2px; font-size:12px;
/* min-width matches input; max-width grows for long names but capped */
min-width:100%; width:max-content; max-width:520px;
}
.ta-row {
padding:6px 10px; cursor:pointer; border-bottom:1px solid #f1f5f9;
transition:background-color .1s;
display:flex; align-items:center; gap:10px;
white-space:nowrap; overflow:hidden;
}
.ta-row:last-child { border-bottom:none; }
.ta-row:hover, .ta-row.ta-row-sel { background:#eff6ff; }
.ta-row-name {
font-weight:600; color:#111827; line-height:1.3;
flex:1; min-width:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ta-row-meta {
font-size:11px; color:#6b7280; font-family:monospace;
flex-shrink:0;
white-space:nowrap;
}
.ta-alt {
display:inline-block; margin-left:6px; padding:1px 5px;
background:#f5f3ff; color:#7c3aed;
border-radius:3px; font-size:10px; font-weight:600;
}
.ta-empty { padding:10px 12px; color:#9ca3af; font-style:italic; text-align:center; }
/* Green border flash when typeahead populates linked fields */
.ta-flash {
border-color: #10b981 !important;
box-shadow: 0 0 0 3px rgba(16,185,129,.18) !important;
transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
/* Inline alias-match note shown below the Name+ID row */
.ta-alias-note {
font-size:11px; color:#6b21a8; background:#f5f3ff;
border:1px solid #ddd6fe; border-radius:4px;
padding:3px 9px; margin-top:4px;
display:inline-flex; align-items:center; gap:4px;
}
/* Role filter checkbox labels — highlight whole label when checked */
.role-checkbox-label { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:6px; cursor:pointer; border:1px solid transparent; font-size:13px; font-weight:500; color:var(--gray-600); transition:all .15s; }
.role-checkbox-label:has(input:checked) { background:#f0f4f8; border-color:#1a3a5c; }
/* Activity & Compliance pill toggles — also base for Role, Generator Status, Facility Status */
.activity-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid #d1d5db; background:#f9fafb; color:#374151; transition:all .15s; user-select:none; }
.activity-pill input[type="checkbox"],
.activity-pill input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.activity-pill:has(input:checked) { background:#fffbeb; border-color:#92400e; color:#92400e; font-weight:600; }
/* Role pill — neutral slate highlight when checked (the role icon inside
the pill carries the role color; the pill itself stays neutral so the
five role colors aren't drowned out by a sixth tint). */
.activity-pill.role-pill:has(input:checked) { background:#f1f5f9; border-color:#475569; color:#0f172a; font-weight:600; }
.activity-pill.mmc-pill:has(input:checked) { background:#1a3a5c; border-color:#1a3a5c; color:#fff; font-weight:600; }
/* Facility Status variants — higher specificity overrides amber default */
.activity-pill.status-pill-all:has(input:checked) { background:#dbe8f4; border-color:#1a3a5c; color:#1a3a5c; font-weight:600; }
.activity-pill.status-pill-active:has(input:checked) { background:#d1fae5; border-color:#065f46; color:#065f46; font-weight:600; }
.activity-pill.status-pill-inactive:has(input:checked) { background:#fee2e2; border-color:#991b1b; color:#991b1b; font-weight:600; }
/* Data Availability pill — indigo highlight */
.activity-pill.data-pill:has(input:checked) { background:#ede9fe; border-color:#4f46e5; color:#3730a3; font-weight:600; }
/* Section divider between search filter groups */
.search-section-divider { height:1px; width:100%; background:linear-gradient(to right,#e5e7eb,transparent); margin:1px 0; }
.col-selector-wrap {
width: 100%; margin-top: 8px; margin-bottom: 0;
background: var(--gray-100); border: 1px solid var(--gray-200);
border-radius: 6px; padding: 8px 10px 6px;
}
.col-selector-label {
font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--gray-500);
margin-bottom: 6px;
}
.col-selector-row {
display: flex; flex-wrap: wrap; gap: 6px;
}
.col-toggle {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px 3px 6px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: #fff;
font-size: 12px; font-weight: 500; color: var(--gray-500);
cursor: pointer; user-select: none;
transition: background .1s, border-color .1s, color .1s;
}
.col-toggle input[type="checkbox"] {
width: 13px; height: 13px; min-width: unset;
margin: 0; cursor: pointer; accent-color: var(--blue);
}
.col-toggle.active {
background: #eff6ff; border-color: #93c5fd; color: #1e40af;
}
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
height: 34px;
text-decoration: none;
transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-secondary { background: var(--gray-100); color: var(--gray-900); border: 1px solid var(--gray-200); }
.btn-danger { background: var(--red); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-sm { height: 28px; padding: 4px 10px; font-size: 12px; }
/* Apply-button polish — used on every BR filter form's submit button.
Sky-blue pill matching the EM Nearby Search button silhouette but
in a distinct hue so BR / EM controls read as separate modules at
a glance. Hover darkens for tactile feedback. Note: leaves no
leading glyph; the "Apply" label is enough now that the pill shape
reads unambiguously as an action button. */
.btn-apply {
background: #0284c7;
color: #fff;
border: none;
border-radius: 20px;
padding: 4px 16px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background .15s;
}
.btn-apply:hover { background: #0369a1; opacity: 1; }
/* Reset-years link — paired with .btn-apply on BR sub-tab filter
bars. Styled as a muted link (not a button) so it never competes
visually with Apply. ↺ glyph cues the rewind action. */
.btn-reset-years {
font-size: 12px;
color: #6b7280;
text-decoration: none;
cursor: pointer;
border-bottom: 1px dashed #9ca3af;
padding: 0 1px;
transition: color .15s, border-color .15s;
}
.btn-reset-years::before {
content: "↺";
margin-right: 3px;
font-size: 13px;
opacity: .8;
}
.btn-reset-years:hover {
color: #374151;
border-bottom-color: #6b7280;
}
/* ============================================================
* BR Data Quality — confidence meter, grade card, magbox boxes
* ============================================================ */
/* Letter-grade card at the top of BR DQ. Letter fills 60px square
on the left; explanation runs alongside. Border + bg are set
inline per-grade so the grade colors come straight from the
handler dict and stay in sync with the F/D/C/B/A palette. */
.dq-grade-card {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 20px;
margin-bottom: 1.25rem;
border: 1px solid;
border-left-width: 5px;
border-radius: 6px;
}
.dq-grade-letter {
font-size: 60px;
font-weight: 800;
line-height: 1;
min-width: 60px;
text-align: center;
font-family: ui-serif, Georgia, "Times New Roman", serif;
}
.dq-grade-body { flex: 1; }
.dq-grade-label {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.dq-grade-explain {
font-size: 13px;
color: #374151;
line-height: 1.5;
}
/* Confidence meter — replaces the plain HTML range. The bar is a
green→amber→red gradient sitting underneath an invisible range
input so the native thumb still handles drag. A thumb label
floats above the track and snaps to the slider value. */
.dq-meter-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 1.25rem;
}
.dq-meter-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.dq-meter-title {
font-size: 13px;
font-weight: 600;
color: #1f2937;
display: inline-flex;
align-items: center;
gap: 4px;
}
.dq-meter-live {
font-size: 12px;
color: #6b7280;
}
.dq-meter-live strong {
color: #1a3a5c;
font-size: 15px;
font-weight: 700;
margin-right: 2px;
}
.dq-presets {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.dq-preset {
flex: 1;
min-width: 130px;
background: #f3f4f6;
border: 1px solid var(--gray-200);
color: #374151;
font-size: 12px;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: background .15s, border-color .15s, color .15s;
}
.dq-preset span {
font-weight: 400;
font-size: 11px;
color: #9ca3af;
margin-left: 8px;
}
.dq-preset:hover { background: #e5e7eb; }
.dq-preset.active {
background: #1a3a5c;
color: #fff;
border-color: #1a3a5c;
}
.dq-preset.active span { color: rgba(255,255,255,0.75); }
.dq-meter-bar-wrap {
position: relative;
height: 36px;
margin: 0 0 4px;
}
.dq-meter-bar {
position: absolute;
left: 0; right: 0; top: 14px;
height: 8px;
border-radius: 4px;
/* Red (aggressive, k=3) → amber (recommended, k=20) → green
(conservative, k=100). Inverted because more flags is less
calm — the green end is where the user has a clean facility. */
background: linear-gradient(to right, #c0392b 0%, #c0392b 8%, #EF9F27 18%, #16a34a 50%, #16a34a 100%);
}
.dq-meter-slider {
position: absolute;
left: 0; right: 0; top: 8px;
width: 100%;
height: 20px;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
.dq-meter-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #1a3a5c;
cursor: grab;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.dq-meter-slider::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #1a3a5c;
cursor: grab;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.dq-meter-thumb-label {
position: absolute;
top: -2px;
font-size: 11px;
font-weight: 700;
color: #1a3a5c;
background: #fff;
border: 1px solid #1a3a5c;
padding: 1px 6px;
border-radius: 4px;
pointer-events: none;
white-space: nowrap;
transition: left .08s ease-out;
}
.dq-meter-thumb-label.dq-recommended {
background: #EAF3DE;
color: #27500A;
border-color: #27500A;
}
/* Solid indicator dot pinned to the gradient bar — JS sets `left`
on every slider drag tick. Color shifts with position
(red→amber→green→teal) via dotColorForK(), so users on clean
facilities still see motion + a color change as they explore. */
.dq-meter-indicator-dot {
position: absolute;
top: 11px;
left: calc(17.5% - 7px); /* ~k=20 default; JS overrides on init */
width: 14px; height: 14px;
border-radius: 50%;
background: #16a34a;
border: 2px solid #16a34a;
box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,0.35);
pointer-events: none;
transition: left .08s ease-out, background .15s, border-color .15s;
z-index: 1;
}
.dq-meter-scale {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #9ca3af;
margin-top: 6px;
}
/* Live breakdown summary — appears under the preset chips. Single
row of "High: N · Medium: N · Low: N" with colored dots cuing
each level. Counts update via JS on every slider drag. */
.dq-meter-breakdown {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: #6b7280;
margin: 8px 0 12px;
padding: 4px 0;
}
.dq-bd-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.dq-bd-item strong {
color: #1f2937;
font-weight: 700;
font-size: 13px;
}
.dq-bd-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 1px;
}
.dq-bd-high .dq-bd-dot { background: #c0392b; }
.dq-bd-medium .dq-bd-dot { background: #EF9F27; }
.dq-bd-low .dq-bd-dot { background: #9ca3af; }
.dq-bd-sep { color: #d1d5db; }
/* Inline mini-bar chart — three rows of label + horizontal bar +
count. Bar fills animate width via CSS transition as JS sets
`style.width = "N%"` on each slider tick. Always above the fold
so users see flag-count motion without scrolling. */
.dq-meter-minibars {
margin-top: 4px;
padding: 10px 12px;
background: #f9fafb;
border: 1px solid #f3f4f6;
border-radius: 6px;
}
.dq-mb-row {
display: grid;
grid-template-columns: 60px 1fr 36px 50px;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.dq-mb-row:last-child { margin-bottom: 0; }
.dq-mb-label {
font-size: 11px;
font-weight: 600;
color: #4b5563;
text-align: right;
}
.dq-mb-track {
height: 12px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.dq-mb-fill {
height: 100%;
border-radius: 3px;
transition: width .15s ease-out;
min-width: 0;
}
.dq-mb-num {
font-size: 13px;
font-weight: 700;
color: #1f2937;
text-align: right;
font-variant-numeric: tabular-nums;
}
.dq-mb-of {
font-size: 10px;
color: #9ca3af;
font-variant-numeric: tabular-nums;
}
/* Clean-data note shown below the meter when no IQR outliers exist
at any sensitivity AND no magnitude/duplicate/blank flags exist —
so the user understands why dragging the slider has no visible
effect on count cards or detail rows. */
.dq-meter-cleanote {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 8px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 3px solid #16a34a;
border-radius: 4px;
color: #166534;
font-size: 12px;
line-height: 1.45;
}
/* Bold live count below the slider — replaces the prior H/M/L
mini-bar chart and breakdown text. Color flips red when anything
is flagged, green when zero, so the "is anything wrong?" question
reads at a glance. JS (applyKToCounts) keeps it in sync. */
.dq-bigcount {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 14px;
padding: 8px 12px;
border-radius: 6px;
font-variant-numeric: tabular-nums;
transition: background .2s, color .2s;
}
.dq-bigcount-dot {
width: 12px; height: 12px;
border-radius: 50%;
display: inline-block;
align-self: center;
transition: background .2s, box-shadow .2s;
}
.dq-bigcount strong {
font-size: 22px;
font-weight: 800;
line-height: 1;
}
.dq-bigcount-label {
font-size: 13px;
font-weight: 600;
}
.dq-bigcount[data-flagged="true"] {
background: #fef2f2;
color: #991b1b;
}
.dq-bigcount[data-flagged="true"] .dq-bigcount-dot {
background: #dc2626;
box-shadow: 0 0 0 3px rgba(220,38,38,0.2);
}
.dq-bigcount[data-flagged="false"] {
background: #f0fdf4;
color: #166534;
}
.dq-bigcount[data-flagged="false"] .dq-bigcount-dot {
background: #16a34a;
box-shadow: 0 0 0 3px rgba(22,163,74,0.2);
}
/* Caption above the scatter chart title — one short paragraph in
subdued italic so users reading the page top-to-bottom hit the
"what am I looking at" answer before the title. */
.dq-scatter-caption {
font-size: 12.5px;
color: #6b7280;
font-style: italic;
line-height: 1.5;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--gray-200);
}
/* "Toggle Nearby (25 mi)" button — pinned top-right of every map
so it never collides with Leaflet's bottom-left basemap toggle
or our bottom-right compliance legend. Active state flips to
the navy palette so users can see the layer is on at a glance.
Each toggle JS function adds .active to the button on layer-on
and removes it on layer-off; the .map-nearby-legend overlay
below appears in concert. */
.map-nearby-toggle {
position: absolute;
top: 8px;
right: 8px;
z-index: 1000;
font-size: 11px;
background: rgba(255, 255, 255, 0.95);
color: #1a3a5c;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.map-nearby-toggle:hover {
background: #f8fafc;
border-color: #1a3a5c;
}
.map-nearby-toggle.active {
background: #1a3a5c;
color: #fff;
border-color: #0f1f33;
box-shadow: 0 1px 4px rgba(26, 58, 92, 0.4);
}
.map-nearby-toggle.active:hover {
background: #0f1f33;
}
/* Generator-status legend that appears when a Toggle Nearby layer
is on. Sits directly under the toggle button; same top-right
anchor so users see exactly what each color means without
scrolling. JS shows/hides via display:none/flex. */
.map-nearby-legend {
position: absolute;
top: 40px;
right: 8px;
z-index: 1000;
font-size: 10.5px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 5px 9px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
color: #4b5563;
display: none;
align-items: center;
gap: 8px;
flex-wrap: wrap;
max-width: calc(100% - 16px);
}
.map-nearby-legend.active { display: inline-flex; }
.map-nearby-legend .gs-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 3px;
vertical-align: middle;
}
.map-nearby-legend .gs-lqg { background: #dc2626; }
.map-nearby-legend .gs-sqg { background: #d97706; }
.map-nearby-legend .gs-vsqg { background: #16a34a; }
.map-nearby-legend .gs-other { background: #94a3b8; }
/* Search-within-table filter input. Sits directly above a
data-table; typing in real-time hides non-matching rows via
table_filter.js. Counter span on the right shows "X of Y
matching" when a query is active. */
.dq-table-search {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 6px;
padding: 0 4px;
}
.dq-table-search-input {
flex: 0 1 320px;
font-size: 12px;
padding: 5px 10px 5px 28px;
border: 1px solid var(--gray-200);
border-radius: 5px;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 8px center;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.dq-table-search-input:focus {
border-color: #1a3a5c;
box-shadow: 0 0 0 3px rgba(26,58,92,0.12);
}
.dq-table-search-count {
font-size: 11px;
color: #6b7280;
font-variant-numeric: tabular-nums;
}
/* ================================================================
* Reported-vs-Estimated dumbbell chart
*
* Each row is one flagged outlier. The track spans the chart width;
* a colored "reported" dot and a green "estimated" dot sit at log-
* scale positions computed server-side. The IQR band marks the
* facility's typical range so the user can read "this is where the
* value should fall."
*
* The slider toggles `data-active` on each row; CSS handles the
* collapse animation (height + opacity + translate).
* ================================================================ */
/* Title block above the chart card body — heading + subtitle. */
.dq-chart-header { margin-bottom: 12px; }
.dq-chart-h3 {
font-size: 16px;
font-weight: 700;
color: #1a3a5c;
margin: 0 0 4px;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.dq-chart-h3-meta {
font-size: 12px;
font-weight: 400;
color: #6b7280;
font-style: italic;
}
.dq-chart-subtitle {
font-size: 12.5px;
color: #6b7280;
line-height: 1.5;
margin: 0;
}
/* Dumbbell chart layout */
.dq-db-titlerow {
display: flex;
align-items: baseline;
justify-content: flex-end;
margin: 12px 0 6px;
}
.dq-db-titlemeta {
font-size: 11px;
color: #6b7280;
}
.dq-db-titlemeta strong { color: #1f2937; font-weight: 700; }
/* X-axis decade marks — sit above the rows. Each mark is positioned
absolutely along a horizontal track. */
.dq-db-axis {
position: relative;
height: 18px;
margin: 4px 0 6px;
border-bottom: 1px dashed var(--gray-200);
}
.dq-db-axis-mark {
position: absolute;
top: 0;
font-size: 10px;
color: #9ca3af;
transform: translateX(-50%);
white-space: nowrap;
}
.dq-db-axis-mark sup { font-size: 8px; }
/* List of dumbbell rows */
.dq-db-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.dq-db-row {
padding: 8px 4px;
border-bottom: 1px solid #f3f4f6;
transition: opacity .25s ease, transform .25s ease,
max-height .3s ease, padding .3s ease, margin .3s ease;
opacity: 1;
max-height: 200px;
overflow: hidden;
}
.dq-db-row[data-active="0"] {
opacity: 0;
transform: translateX(40px);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
border-bottom-width: 0;
pointer-events: none;
}
.dq-db-rowhead {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
font-size: 12px;
}
.dq-db-rowtag {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.dq-db-rowtag strong { font-size: 13px; color: #1f2937; }
.dq-db-conf-pill {
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dq-db-conf-high { background: #fee2e2; color: #991b1b; }
.dq-db-conf-medium { background: #fef3c7; color: #92400e; }
.dq-db-conf-low { background: #f3f4f6; color: #374151; }
.dq-db-likely {
font-size: 11px;
color: #6b7280;
font-style: italic;
text-align: right;
flex: 1 1 auto;
min-width: 200px;
}
/* The track itself — relative-positioned rail; dots and ticks are
absolute children. Height is generous enough for the 14px dots
plus the IQR band underneath. */
.dq-db-track {
position: relative;
height: 28px;
margin: 6px 0;
}
.dq-db-iqr-band {
position: absolute;
top: 11px;
height: 6px;
background: rgba(34, 197, 94, 0.18);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 3px;
min-width: 2px;
}
.dq-db-tick {
position: absolute;
top: 6px;
width: 2px;
height: 16px;
}
.dq-db-tick-median {
background: #4b5563;
transform: translateX(-1px);
}
.dq-db-line {
position: absolute;
top: 13px;
height: 2px;
background: repeating-linear-gradient(
to right,
#9ca3af 0 4px,
transparent 4px 8px
);
min-width: 1px;
}
.dq-db-dot {
position: absolute;
top: 7px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #fff;
transform: translateX(-7px);
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
cursor: help;
}
.dq-db-dot-est { background: #16a34a; box-shadow: 0 0 0 1px #166534; }
.dq-db-dot-rep { background: #dc2626; }
.dq-db-dot-high { background: #dc2626; box-shadow: 0 0 0 1px #7f1d1d; }
.dq-db-dot-medium { background: #ea580c; box-shadow: 0 0 0 1px #7c2d12; }
.dq-db-dot-low { background: #fbbf24; box-shadow: 0 0 0 1px #78350f; }
.dq-db-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-size: 11.5px;
color: #6b7280;
font-variant-numeric: tabular-nums;
}
.dq-db-meta strong { color: #1f2937; font-weight: 700; }
.dq-db-rep-val { color: #dc2626 !important; }
.dq-db-est-val { color: #16a34a !important; }
.dq-db-est-note { font-weight: 400; color: #9ca3af; font-size: 10.5px; }
.dq-db-mediannote { color: #9ca3af; font-style: italic; }
.dq-db-sep { color: #d1d5db; }
.dq-db-factor { padding: 1px 6px; border-radius: 8px; font-size: 11px; }
.dq-db-factor.sev-mild { background: #fef3c7; color: #92400e; }
.dq-db-factor.sev-severe { background: #fee2e2; color: #991b1b; }
.dq-db-factor.sev-extreme { background: #7f1d1d; color: #fff; }
/* "All clear at current k" panel inside the dumbbell view — shown
by JS when no rows are active at the chosen sensitivity. */
.dq-db-empty-msg {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
padding: 12px 16px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid #16a34a;
border-radius: 6px;
font-size: 13px;
color: #166534;
line-height: 1.45;
}
.dq-db-empty-check { font-size: 22px; color: #16a34a; }
/* Top-of-card "all values within range" banner for facilities
with zero baseline outliers (PAD case). */
.dq-clean-banner {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0 14px;
padding: 10px 14px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid #16a34a;
border-radius: 6px;
font-size: 13px;
color: #166534;
line-height: 1.45;
}
.dq-clean-check { font-size: 22px; color: #16a34a; }
/* Dumbbell-mode legend swatches */
.dq-ocl-est { background: #16a34a; }
.dq-ocl-rep { background: #dc2626; }
.dq-ocl-iqrband {
display: inline-block;
width: 18px; height: 6px;
background: rgba(34, 197, 94, 0.25);
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 2px;
vertical-align: middle;
}
/* Sensitivity Scatter chart card — title meta line, in-chart
legend overlay (top-left of the canvas), log-scale annotation,
and footer scale labels (relocated from above the slider). */
.dq-scatter-title-meta {
font-size: 11px;
font-weight: 400;
color: #6b7280;
}
.dq-scatter-title-meta strong { color: #1f2937; font-weight: 700; }
/* DQ scatter / dumbbell legend — rendered BELOW the chart in normal
document flow. Previously absolute-positioned over the canvas; that
crowded the plot area on small heights and rendered unpredictably
when the same class was reused on the dumbbell card (whose nearest
positioned ancestor wasn't the canvas wrapper). Static flex row
centered below the chart is immune to all of that. */
.dq-scatter-onchart-legend {
position: static;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 8px;
font-size: 11px;
line-height: 1.5;
color: #374151;
}
.dq-scatter-onchart-legend > div {
display: flex;
align-items: center;
gap: 6px;
}
.dq-ocl-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.15);
}
.dq-ocl-gray { background: rgba(156,163,175,0.55); }
.dq-ocl-color {
background: linear-gradient(135deg, #fbbf24 0 33%, #ea580c 33% 66%, #dc2626 66% 100%);
}
/* Log-scale annotation directly under the canvas. */
.dq-scatter-lognote {
margin: 8px 0 0;
font-size: 11px;
color: #9ca3af;
text-align: center;
}
/* Sensitivity-scale labels relocated from above the slider to here
so the slider can sit visually closer to the chart it controls.
Subtle, with directional arrows pointing back up to the slider. */
.dq-scatter-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed var(--gray-200);
font-size: 11px;
color: #9ca3af;
}
.dq-scatter-footer-l { text-align: left; }
.dq-scatter-footer-r { text-align: right; }
/* Magnitude / mass-balance / duplicate / blank-description boxes.
Each lives inside the Magnitude & Integrity Checks card and is
color-keyed by severity via inline border-left. */
.dq-magbox {
background: #fff;
border-radius: 4px;
padding: 10px 12px;
margin-top: 12px;
border: 1px solid var(--gray-200);
}
.dq-magbox-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: #1f2937;
}
.dq-magbox-icon {
font-size: 18px;
line-height: 1;
}
.dq-magbox-count {
color: #6b7280;
font-size: 12px;
font-weight: 400;
}
/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
/* Grid/flex items default to `min-width: auto`, which means a track can NEVER shrink
below its content's min-content width. So a single wide child (a data table, a long
unbreakable code) silently drags the whole grid past its container — the container
doesn't clip it, it just gets pushed. Measured live on the facility eManifest → PCB
sub-tab: a `1fr 2fr` grid blew out to 1212px inside a 1152px column at EVERY viewport
(1024/1280/1440), because the 8-column PCB table forced its track to 1005px instead
of the 759px 2fr should give. `min-width: 0` restores the ability to shrink, so the
table scrolls inside its own .table-wrap instead of shoving the layout.
Apply to any grid whose cells can contain a table or other wide content. */
.grid-fit > * { min-width: 0; }
/* Numeric-cell utilities — extracted from per-cell inline styles in
the EM Summary results partial. The partial has ~2,000 quantity
cells per page; collapsing the inline `text-align:right;
font-variant-numeric:tabular-nums` (50 bytes × 2k = ~100 KB) and
the empty-cell `color:var(--gray-300)` (32 bytes × 1.5k = ~30 KB)
into single classes drops the partial from ~492 KB → ~360 KB on
a typical 50-row, 2019–2026 quarterly+yearly query. */
.ems-qty { text-align: right; font-variant-numeric: tabular-nums; }
.ems-empty { color: var(--gray-300); }
/* Receiver / Generator name cells: long facility names wrap inside a
bounded width instead of stretching the table. Repeated on every
row of EM Summary results — class extraction saves ~85 chars × 50
rows = ~4 KB per response. */
.ems-name-cell { max-width: 260px; min-width: 160px; white-space: normal; word-break: break-word; line-height: 1.3; }
/* ── Reusable frozen-left-column pattern (2026-07-20) ──────────────────────────
The app's FIRST sticky-column mechanism. For any wide table inside a
.table-wrap { overflow-x:auto } scroll box: apply `.stick-col` (+ a position
class) to BOTH the
and the
of each column that should stay pinned on
the left while the remaining columns scroll horizontally. Position classes set
the `left` offset: `.stick-1` = leftmost (left:0), `.stick-2` = second
(left = the first column's width, via --stick-1w). Add `.stick-last` to the
rightmost frozen column for the drop-shadow divider.
RULES this pattern enforces:
- Sticky cells MUST carry a solid background — a transparent sticky cell lets the
scrolling content show through underneath. Provided here: white body cells,
gray-50 header cells (matching the normal
bg).
- z-index layers the frozen header corner (3) above frozen body cells (2) above
the normal scrolling cells (auto). This also makes the pattern forward-compatible
with a VERTICAL sticky header: a table that adds `thead th { position:sticky; top:0 }`
gets a correct frozen corner for free (the thead .stick-col already wins on z-index).
- The per-column `left` offsets require each frozen column to have a FIXED width
(a fully generic auto-measured version would need JS to read rendered widths and
is not worth it for 2-column freezes). Set the widths + --stick-1w per table.
First adopted by BR+EM Search's Facility Reconciliation table (.brem-recon); other
wide tables (e.g. EM National Receivers Report) can adopt the same three classes. */
.table-wrap .stick-col { position: sticky; z-index: 2; background: #fff; }
.table-wrap thead .stick-col { z-index: 3; background: var(--gray-50); }
.table-wrap .stick-1 { left: 0; }
.table-wrap .stick-2 { left: var(--stick-1w, 130px); }
.table-wrap .stick-last { box-shadow: 5px 0 6px -4px rgba(15, 23, 42, .18); }
/* BR+EM Facility Reconciliation — table-specific frozen-column widths + the flagged
row highlight moved off the inline
style so the frozen cells inherit it too.
border-collapse:separate avoids the Chrome bug where scrolling content paints over a
sticky cell's edge under border-collapse:collapse; visually identical here because
the cells only use a bottom border (no merged left/right borders to lose). */
.brem-recon { --stick-1w: 120px; border-collapse: separate; border-spacing: 0; }
.brem-recon .stick-1 { min-width: 120px; max-width: 120px; }
.brem-recon .stick-2 { min-width: 180px; max-width: 180px; }
.brem-recon tr.brem-flagged td { background: #fef2f2; } /* flagged row incl. frozen cells */
/* subtle divider at the Generation / Receipt block boundary */
.brem-recon th.brem-block-start, .brem-recon td.brem-block-start { border-left: 2px solid var(--gray-200); }
/* Compact delta cell (one cell = a BR-vs-EM block): abbreviated labels above a
two-segment proportional bar, gap % below. Full precision on the cell's title hover. */
.recon-delta { min-width: 158px; padding: 6px 12px; vertical-align: middle; }
.rd-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; line-height: 1.15; margin-bottom: 3px; white-space: nowrap; }
.rd-labels .rd-br { color: #1a3a5c; font-weight: 600; }
.rd-labels .rd-em { color: #047857; font-weight: 600; } /* readable emerald matching the #10b981 bar */
.rd-track { position: relative; height: 8px; border-radius: 3px; overflow: hidden; }
.rd-overlay { position: absolute; top: 0; left: 0; height: 100%; }
.rd-gap { font-size: 11px; margin-top: 3px; text-align: right; }
.rd-gap .rd-gap-null { color: #94a3b8; }
/* BR+EM By-Waste-Code table (.brem-wc): every row is a flagged facility, so the pale-orange
#fff7ed goes on EVERY td (incl. the frozen sticky cells). The td.stick-col selector is
needed to out-specify `.table-wrap .stick-col`'s white default on the frozen cells. */
.brem-wc tbody td { background: #fff7ed; }
.brem-wc tbody td.stick-col { background: #fff7ed; }
/* Waste-codes column rendered as pill badges (was a plain 340px comma-string, ~48% truncated).
Pills wrap inside a bounded width so showing more codes grows row HEIGHT, not column WIDTH;
up to 10 shown (covers the median-10 case), then a "+N more" badge; full list on the cell's
title= hover (same disclosure mechanism as the delta cell). */
.wc-cell { max-width: 220px; line-height: 1.6; }
.wc-pill { display: inline-block; font-family: monospace; font-size: 10px; color: #374151;
background: #fff; border: 1px solid #e5e7eb; border-radius: 3px; padding: 0 5px; margin: 1px 3px 1px 0; }
.wc-more { display: inline-block; font-size: 10px; font-weight: 600; color: #92400e;
background: #fde68a; border: 1px solid #f59e0b; border-radius: 3px; padding: 0 6px; margin: 1px 0; cursor: help; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
text-align: left;
padding: 8px 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--gray-600);
border-bottom: 2px solid var(--gray-200);
background: var(--gray-50);
}
td {
padding: 9px 12px;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-900);
}
tr:hover td { background: var(--blue-lt); }
tr.row-selected td { background: #dbeafe !important; outline: 2px solid var(--blue); outline-offset: -2px; }
tr.row-selected-multi td { background: #e0f2fe !important; }
.table-empty { padding: 32px; text-align: center; color: var(--gray-400); }
td a { color: var(--blue); text-decoration: none; }
td a:hover { text-decoration: underline; }
/* ---- Pivot table ---- */
.pivot-table th { white-space: nowrap; font-size: 10px; padding: 6px 8px; }
.pivot-table td { padding: 7px 8px; font-size: 12px; }
.pivot-table thead tr:first-child th[colspan] { text-align: center; color: #fff; border-bottom: 1px solid #2c5f8a; }
.pivot-table thead tr:last-child th { text-align: right; }
.pivot-table thead tr:last-child th:nth-child(-n+7) { text-align: left; }
/* ---- Pagination ---- */
.pagination {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 13px;
color: var(--gray-600);
}
.pagination a {
padding: 4px 10px;
border: 1px solid var(--gray-200);
border-radius: 4px;
color: var(--blue);
text-decoration: none;
}
.pagination a:hover { background: var(--blue-lt); }
/* ---- Badges ---- */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
}
.badge-lqg { background: #fee2e2; color: #991b1b; }
.badge-sqg { background: #fef3c7; color: #92400e; }
.badge-vsqg { background: #dcfce7; color: #166534; }
.badge-n { background: var(--gray-100); color: var(--gray-600); }
.badge-Y { background: #fee2e2; color: #991b1b; }
.badge-N { background: #dcfce7; color: #166534; }
/* ---- BR data-type color classes (used on new Biennial Report sub-tabs) ---- */
.br-inbound { background:#E1F5EE; color:#085041; }
.br-outbound { background:#FAECE7; color:#712B13; }
.br-intl { background:#EEEDFE; color:#3C3489; }
.br-mmc { background:#FAEEDA; color:#633806; }
.br-year { background:#E6F1FB; color:#0C447C; }
.br-onsite { background:#EAF3DE; color:#27500A; }
.br-offsite { background:#FFF3E0; color:#7C3500; }
.br-hw { background:#FEE2E2; color:#991B1B; }
.br-nhw { background:#F3F4F6; color:#374151; }
/* BREM quantity-analysis notable-variance row highlight */
.brem-notable-row { background:#fff7ed; border-left:3px solid #f59e0b; }
/* Current cycle pill highlight — green outline on code/MMC pills */
.current-code { outline:2px solid #16a34a; outline-offset:2px; }
/* Source-distinction pills for waste codes and MMCs */
.pill-generated { background:#EAF3DE; color:#27500A; border:1px solid #C0DD97; }
.pill-received { background:#E1F5EE; color:#085041; border:1px solid #9FE1CB; }
.pill-both { background:#E6F1FB; color:#0C447C; border:1px solid #B5D4F4; }
.pill-current { outline:2px solid #16a34a; outline-offset:2px; }
.pill-match { outline:2px solid #f59e0b !important; outline-offset:2px; }
/* ---- Merlin context chip — facility profile tabs ---- */
.merlin-ctx-chip {
position: sticky;
top: 56px;
float: right;
z-index: 100;
margin: -4px 0 8px 12px;
clear: right;
}
.merlin-ctx-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: #1a2744;
color: #fff;
border: none;
border-radius: 20px;
padding: 5px 12px 5px 8px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: background 0.15s, transform 0.1s;
white-space: nowrap;
}
.merlin-ctx-btn:hover {
background: #243660;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.merlin-ctx-btn:active {
transform: translateY(0);
}
/* ---- Merlin facility insight pill — next to role badges (outlined/subtle) ---- */
.merlin-insight-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
color: #1a2744;
border: 1.5px solid #1a2744;
border-radius: 20px;
padding: 3px 10px 3px 7px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
vertical-align: middle;
margin-left: 8px;
}
.merlin-insight-btn:hover {
background: #1a2744;
color: #fff;
}
.merlin-insight-btn:disabled {
opacity: 0.6;
cursor: default;
}
/* ---- eManifest color classes ---- */
.em-generator { background:#FAECE7; color:#712B13; border:1px solid #F5C4B3; }
.em-receiver { background:#E1F5EE; color:#085041; border:1px solid #9FE1CB; }
.em-transporter{ background:#EEEDFE; color:#3C3489; border:1px solid #CECBF6; }
.em-pcb { background:#FAEEDA; color:#633806; border:1px solid #FAC775; }
.em-export { background:#EAF3DE; color:#27500A; border:1px solid #C0DD97; }
.em-rejection { background:#FCEBEB; color:#791F1F; border:1px solid #F7C1C1; }
.em-pending { background:#E6F1FB; color:#0C447C; border:1px solid #B5D4F4; }
.em-signed { background:#EAF3DE; color:#27500A; border:1px solid #C0DD97; }
.em-corrected { background:#FAEEDA; color:#633806; border:1px solid #FAC775; }
/* MMC chip — toggleable pill used in the national Receivers Report
filter panel. Active state borrows the .em-corrected MMC-amber
palette; inactive state strikes through to make the in/out distinction
immediately legible when the user toggles a few chips off after the
"all selected" default. */
.mmc-chip {
display: inline-block;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
border: 1px solid var(--gray-200);
background: var(--gray-100);
color: var(--gray-400);
cursor: pointer;
user-select: none;
transition: background .12s, color .12s, border-color .12s;
text-decoration: line-through;
}
.mmc-chip-active {
background: #FAEEDA;
color: #633806;
border-color: #FAC775;
text-decoration: none;
}
.mmc-chip:hover {
border-color: var(--gray-400);
}
/* ---- EM Stat Card system ----
Shared 4-column stat-card pattern across every EM sub-tab. All
stat cards now use `.em-stat-card` plus one `.accent-*` modifier
instead of an inline flex+min-height+border-left declaration.
This makes the per-tab min-height inconsistency (80/88/90/100 px
was found in inline overrides) impossible at the partial layer.
Accent palette intentionally aligns with the Flow Map's role
colours (generator green / receiver red) — distinct from the
`.em-generator`/`.em-receiver` BADGE classes above, which keep
their own background/text palette. */
.em-stat-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 88px;
margin-bottom: 0;
border-left: 4px solid transparent;
}
.em-stat-card.accent-generator { border-left-color: #1D9E75; }
.em-stat-card.accent-receiver { border-left-color: #dc2626; }
.em-stat-card.accent-transporter { border-left-color: #3C3489; }
.em-stat-card.accent-pcb { border-left-color: #633806; }
.em-stat-card.accent-rejection { border-left-color: #791F1F; }
.em-stat-card.accent-pending { border-left-color: #0C447C; }
.em-stat-card.accent-onsite { border-left-color: #27500A; }
.em-stat-card.accent-warning { border-left-color: #c2410c; }
.em-stat-card.accent-success { border-left-color: var(--green); }
.em-stat-card.accent-amber { border-left-color: var(--amber); }
.em-stat-card.accent-neutral { border-left-color: #1a3a5c; }
.em-stat-card.accent-muted { border-left-color: #E5E7EB; }
.em-stat-card.accent-gray { border-left-color: var(--gray-600); }
/* Section header label — 11px uppercase tracked text with a 3px
EM-green left accent. Matches the Reports filter-panel section
headers (#filter-panel-body .filter-group-label) but as a
standalone utility so other EM sub-tabs (Data Quality, future)
can group their major sections under a consistent banner. */
.em-section-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #374151;
border-left: 3px solid #065f46;
padding: 2px 8px;
margin: 0 0 8px 0;
}
/* Waste-code health risk badges — replaces dynamic server-supplied
inline `style="background:...;color:..."` with class-based styling.
Letter maps to EPA waste-code prefix: P=acute hazardous, U=toxic,
F=non-specific source, K=specific source, D=characteristic. */
.health-badge {
display: inline-block;
padding: 1px 5px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
margin-right: 2px;
}
.health-p { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.health-u { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.health-f { background: #fefce8; color: #854d0e; border: 1px solid #fef08a; }
.health-k { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.health-d { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.health-unknown { background: var(--gray-100); color: var(--gray-600); }
/* ---- Compliance Risk Badge ---- */
.risk-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.risk-green { background: #dcfce7; color: #166534; }
.risk-yellow { background: #fef3c7; color: #92400e; }
.risk-red { background: #fee2e2; color: #991b1b; }
/* ---- Environmental Liability Score (Tell 16) ---- */
.liability-badge { display:inline-flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:6px; font-weight:600; flex-shrink:0;
margin-left:auto; cursor:pointer; position:relative; }
/* ⚠️ THE z-index HERE IS LOAD-BEARING — do not drop it when touching the hover.
`filter` on any non-`none` value CREATES A STACKING CONTEXT (CSS Filter
Effects). Because this filter is applied on :hover — the same hover that
reveals the ::after tooltip — the tooltip's own `z-index:9999` gets confined
INSIDE the badge's new stacking context and stops competing with the rest of
the page. The badge itself then sits at z-index:auto, so any later-in-DOM
positioned element (the tab bar's buttons are position:relative, and their
info_tip ⓘ glyphs are positioned too) paints straight through the tooltip's
text. Measured in Chromium: the ⓘ buttons and the tab labels rendered on top
of the tooltip mid-sentence, garbling it.
Raising the BADGE's own level fixes it, because the tooltip travels with its
stacking context. 200 clears the page-content band (.merlin-ctx-chip 100,
.sr-params-bar 90, sticky table cells 2-3) while staying far below the nav
(1100) and every modal (9000+), so the tooltip can never cover the chrome.
Applied only while open, so the badge's resting stacking order is unchanged.
This is NOT specific to the Biennial Report tab — it is whatever content
happens to sit under the 280px tooltip. Any hover-filter + absolutely
positioned child is the same trap; see also .risk-badge if it ever gains one. */
.liability-badge:hover,
.liability-badge:focus-within { filter:brightness(1.05); z-index:200; }
.liability-badge::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #1f2937;
color: #f9fafb;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
padding: 8px 12px;
border-radius: 6px;
white-space: normal;
width: 280px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
text-align: left;
}
.liability-badge:hover::after {
opacity: 1;
}
.liability-red { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.liability-orange { background:#ffedd5; color:#c2410c; border:1px solid #fb923c; }
.liability-amber { background:#fef9c3; color:#854d0e; border:1px solid #fde047; }
.liability-green { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.liability-blue { background:#eff6ff; color:#1e40af; border:1px solid #93c5fd; }
.liability-score { font-size:1.4em; font-weight:700; }
.liability-breakdown { margin-top:8px; width:100%; max-width:100%; margin-left:0; align-self:stretch; }
.liability-breakdown > summary { display:none; }
.liability-components { display:flex; flex-direction:column; gap:6px;
width:100%; margin-top:6px; padding:10px; background:#f9fafb; border-radius:6px; }
.liability-component { display:flex; align-items:center; gap:8px; }
.lc-label { font-size:12px; color:#6b7280;
white-space:nowrap; width:auto; min-width:220px; flex-shrink:0; }
.lc-bar { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; flex:1; }
.lc-fill { height:100%; border-radius:4px; transition:width 0.3s; }
.lc-pts { font-size:12px; font-weight:600; text-align:right; flex-shrink:0; min-width:50px; }
/* ---- Red Flag Panel (Tell 16) ---- */
.red-flag-panel { margin:12px 0; padding:12px 16px;
background:#fff7ed; border:1px solid #fed7aa;
border-left:4px solid #ea580c; border-radius:6px; }
.rfp-header { font-weight:600; color:#c2410c; margin-bottom:8px; }
.rfp-toggle {
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
user-select: none;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.rfp-toggle:hover { opacity: 0.85; }
.rfp-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rfp-chevron {
margin-left: auto;
font-size: 11px;
color: #c2410c;
flex-shrink: 0;
transition: transform 0.15s;
}
.rfp-list { margin:0; padding-left:20px; }
.rfp-item { color:#7c2d12; font-size:14px; margin-bottom:4px; }
.rfp-footer { font-size:12px; color:#9a3412; margin-top:8px; }
.rfp-footer a { color:#9a3412; }
/* ---- Active/Inactive Status Badge ---- */
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.status-active { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.status-inactive { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* ---- Handler Role Badges ---- */
.role-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
color: white;
margin-right: 3px;
cursor: default;
flex-shrink: 0;
}
/* Colorblind-safe map-optimized role palette. Used everywhere role
badges render (Facility Search filter, search-result cards, facility
profile, map pin popups). CT shares R's blue because Commercial TSD
is a receiver variant. */
.role-generator { background: #E63946; } /* G vivid red */
.role-receiver { background: #2196F3; } /* R bright blue */
.role-transporter { background: #FF9800; } /* T orange */
.role-transfer { background: #9C27B0; } /* TF purple */
.role-commercial { background: #2196F3; } /* CT same as receiver */
.role-other { background: #00BCD4; } /* Other cyan */
.role-badges-cell { display: flex; align-items: center; flex-wrap: nowrap; gap: 1px; }
/* ---- Facility Header ---- */
.facility-header {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
margin-bottom: 20px;
}
.facility-top-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 16px;
}
.facility-name-group {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.facility-top-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.facility-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.facility-header-right-actions {
display: flex;
align-items: center;
gap: 8px;
}
.facility-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 0 1 auto;
}
/* ---- Detail grid ---- */
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px 24px;
margin-bottom: 8px;
}
.detail-item .dk { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-400); margin-bottom: 2px; }
.detail-item .dv { font-size: 14px; font-weight: 500; }
/* ---- Module Snapshot grid (Summary tab) ---- */
.snap-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 18px;
justify-content: space-between;
}
.snap-legend {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
font-size: 11px;
color: var(--gray-500);
font-weight: 400;
}
.snap-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.snap-legend-item:not(:last-child)::after {
content: "·";
margin-left: 14px;
color: var(--gray-400, #9ca3af);
font-weight: 700;
}
/* Auto-fit responsive grid: 5 cols at full width, reflowing to fewer as the
available width shrinks (laptop widths / sidebar-narrowed content) without
hard breakpoints. minmax(200px,1fr) keeps each card at a readable minimum
(below which "Financial Assurance" / "Corrective Action" labels become
unreadable), so cards never squeeze below 200px or overflow the container.
Replaces the old fixed repeat(5,1fr) + 1280/820/540 media-query steps. */
.snap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.snap-missing {
color: var(--gray-400); font-style: italic;
}
/* Contact freshness badge — Contact Information card title shows
how recently EPA received the registration submission this contact
came from. Colors come from _contact_currency() in router.py
(green/yellow/red palette). */
.contact-currency-badge {
display: inline-block;
margin-left: 10px;
padding: 2px 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: .2px;
border-radius: 999px;
vertical-align: middle;
}
/* Compliance Evaluations table badges — Violation Type severity,
Return-to-Compliance status, and Sampling indicator. */
.ce-vtype-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
}
.ce-vtype-class1 { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.ce-vtype-class2 { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.ce-vtype-minor { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.ce-rtc-resolved { color: #166534; font-weight: 600; }
.ce-rtc-open {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.ce-sampling-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
background: #ccfbf1;
color: #115e59;
border: 1px solid #5eead4;
}
.ce-appeal-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
white-space: nowrap;
}
/* Permitting tab — capacity-type letter badge (M=Maximum, A=Average, etc.) */
.pm-cap-type-badge {
display: inline-block;
margin-left: 4px;
padding: 0 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
background: #f1f5f9;
color: #475569;
border: 1px solid #cbd5e1;
border-radius: 3px;
vertical-align: middle;
cursor: help;
}
/* Permit type — Standardized vs Site-Specific */
.pm-permit-type-badge {
display: inline-block;
padding: 1px 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: .2px;
border-radius: 8px;
white-space: nowrap;
cursor: help;
}
.pm-permit-standardized {
background: #dcfce7; color: #166534; border: 1px solid #86efac;
}
.pm-permit-site-specific {
background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc;
}
/* Permit timeline — slipped badge for events that completed >90 days
past their original schedule. Also re-used by the Corrective Action
Event Timeline for the same purpose. */
.pm-slip-badge {
display: inline-block;
margin-left: 4px;
padding: 1px 7px;
font-size: 10px;
font-weight: 700;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
border-radius: 8px;
white-space: nowrap;
cursor: help;
}
/* Corrective Action — release pathway pills on Areas of Concern table.
Per-medium colors: Air red, Groundwater blue, Soil brown, SW teal. */
.ca-rel-pill {
display: inline-block;
padding: 1px 7px;
margin-right: 3px;
font-size: 10px;
font-weight: 700;
border-radius: 8px;
white-space: nowrap;
cursor: help;
}
.ca-rel-air { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.ca-rel-gw { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.ca-rel-soil { background: #f5e8d3; color: #7c4a1c; border: 1px solid #d6b88a; }
.ca-rel-sw { background: #ccfbf1; color: #115e59; border: 1px solid #5eead4; }
/* Financial Assurance — expired mechanism badge (red), pairs with the
amber .pm-slip-badge for "Expires Nd" within 90 days. */
.fa-expired-badge {
display: inline-block;
margin-left: 4px;
padding: 1px 7px;
font-size: 10px;
font-weight: 700;
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
border-radius: 8px;
white-space: nowrap;
cursor: help;
}
/* Enforcement Actions card-per-row layout — eliminates the
horizontal scroll the wide table forced. Matches the WIETS / BR
sub-tab disclosure pattern. */
.ce-card-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.ce-card {
border: 1px solid var(--gray-200);
border-radius: 6px;
background: #fff;
overflow: hidden;
}
.ce-card[open] {
border-color: #94a3b8;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.ce-card > summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 9px 14px;
cursor: pointer;
list-style: none;
font-size: 13px;
user-select: none;
}
.ce-card > summary::-webkit-details-marker { display: none; }
.ce-card > summary::before {
content: "›";
display: inline-block;
width: 12px;
font-size: 16px;
line-height: 1;
color: #94a3b8;
transition: transform .12s ease;
flex-shrink: 0;
}
.ce-card[open] > summary::before { transform: rotate(90deg); }
.ce-card > summary:hover {
background: #f8fafc;
}
.ce-card-date {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
color: var(--gray-700);
font-weight: 600;
white-space: nowrap;
}
.ce-card-agency {
font-size: 12px;
color: var(--gray-500);
white-space: nowrap;
}
.ce-card-penalty {
font-weight: 600;
color: #1a3a5c;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ce-card-disposition {
font-size: 12px;
color: var(--gray-600);
background: #f1f5f9;
padding: 2px 8px;
border-radius: 10px;
}
.ce-card-muted { color: var(--gray-400); }
.ce-card-body {
padding: 12px 14px 14px;
border-top: 1px solid var(--gray-200);
background: #fafafa;
}
.ce-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px 18px;
}
.ce-card-field {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ce-card-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--gray-400);
font-weight: 600;
white-space: nowrap;
}
.ce-card-value {
font-size: 13px;
color: var(--gray-700);
font-variant-numeric: tabular-nums;
}
/* Expandable regulatory citations on the Violations table — see
ce_citation join in facility_violations(). One /
per violation row; native HTML disclosure widget so no JS required. */
.ce-cite-expand { margin: 0; }
.ce-cite-expand > summary {
list-style: none;
cursor: pointer;
display: inline-block;
padding: 2px 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: .2px;
background: #f1f5f9;
color: #1e293b;
border: 1px solid #cbd5e1;
border-radius: 10px;
white-space: nowrap;
user-select: none;
}
.ce-cite-expand > summary::-webkit-details-marker { display: none; }
.ce-cite-expand[open] > summary {
background: #1a3a5c;
color: #fff;
border-color: #1a3a5c;
}
.ce-cite-expand > summary:hover {
border-color: #1a3a5c;
}
.ce-cite-detail {
margin-top: 6px;
border: 1px solid #e5e7eb;
border-radius: 6px;
overflow: hidden;
background: #fafafa;
}
.ce-cite-table {
width: 100%;
font-size: 11px;
border-collapse: collapse;
}
.ce-cite-table th,
.ce-cite-table td {
padding: 4px 8px;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
.ce-cite-table thead th {
background: #f3f4f6;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .3px;
color: #6b7280;
}
.ce-cite-table tbody tr:last-child td { border-bottom: none; }
.ce-cite-citation {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
white-space: nowrap;
}
.ce-cite-citation a {
color: #1a3a5c;
text-decoration: none;
border-bottom: 1px dotted #94a3b8;
}
.ce-cite-citation a:hover { border-bottom-style: solid; }
.ce-cite-link-icon {
font-size: 9px;
color: #94a3b8;
margin-left: 1px;
}
.ce-cite-owner {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: #6b7280;
}
/* Citation-type colored badges — solid backgrounds, white text. */
.ce-cite-type {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
white-space: nowrap;
cursor: help;
}
.ce-cite-type-fr { background: #0d9488; color: #fff; } /* teal — Federal Regulation */
.ce-cite-type-sr { background: #2563eb; color: #fff; } /* blue — State Regulation */
.ce-cite-type-ss { background: #7c3aed; color: #fff; } /* purple — State Statute */
.ce-cite-type-pc { background: #d97706; color: #fff; } /* amber — Permit Condition */
.ce-cite-type-fs { background: #1e3a8a; color: #fff; } /* navy — Federal Statute */
.ce-cite-type-oc { background: #6b7280; color: #fff; } /* gray — Other Code */
/* Client-side table paginator — used by tables tagged data-paginate.
See dashboard/static/js/table_paginate.js. */
.rcra-paginator {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 6px 0 2px;
font-size: 12px;
color: var(--gray-500);
}
.rcra-paginator-count { margin-right: auto; }
.rcra-paginator-btn {
font-size: 12px;
padding: 3px 10px;
border: 1px solid var(--gray-300);
background: #fff;
color: var(--gray-700);
border-radius: 4px;
cursor: pointer;
}
.rcra-paginator-btn:hover:not([disabled]) {
border-color: #1a3a5c;
color: #1a3a5c;
}
.rcra-paginator-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
/* Rows-per-page selector — opt-in via data-paginate-selector (canonical
Tables/Lists component, 2026-07-09). */
.rcra-paginator-size {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--gray-500);
}
.rcra-paginator-size > span {
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
font-size: 10px;
}
.rcra-paginator-size select {
font-size: 12px;
padding: 2px 6px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: #fff;
color: var(--gray-700);
cursor: pointer;
}
/* eManifest supplement provenance badge — Site Info tab. Indicates
that a value was filled in from the most recent em_manifest row
because the matching HD field was empty. */
.em-supplement-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-size: 10px;
font-weight: 500;
letter-spacing: .2px;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
border-radius: 4px;
white-space: nowrap;
vertical-align: middle;
}
.snap-card {
border: 1px solid var(--gray-200);
border-left: 4px solid var(--gray-300);
border-radius: 6px;
padding: 10px 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 110px;
/* Grid items default to min-width:auto, which lets long content (dollar
amounts, "Financial Assurance" labels) push the track wider than its
share and blow out the grid. min-width:0 lets the card shrink to its
track so the auto-fit minmax governs sizing instead. */
min-width: 0;
transition: box-shadow .12s ease, border-color .12s ease;
}
.snap-card.snap-clickable { cursor: pointer; }
/* No transform on hover — `transform` creates a containing block for
position:fixed descendants, which would re-anchor the info-tip popup
to the card and shoot it off-screen. Use border-color + shadow only. */
.snap-card.snap-clickable:hover {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
border-color: #94a3b8;
}
.snap-card.snap-clickable:focus { outline: 2px solid #1a3a5c; outline-offset: 1px; }
.snap-card.snap-green { border-left-color: #16a34a; }
.snap-card.snap-amber { border-left-color: #d97706; }
.snap-card.snap-red { border-left-color: #dc2626; }
.snap-card.snap-gray { border-left-color: #d1d5db; background: #fafafa; }
.snap-head {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 13px; color: var(--gray-700);
}
.snap-dot {
width: 9px; height: 9px; border-radius: 50%;
display: inline-block; flex: 0 0 9px;
}
.snap-dot-green { background: #16a34a; }
.snap-dot-amber { background: #d97706; }
.snap-dot-red { background: #dc2626; }
.snap-dot-gray { background: #9ca3af; }
.snap-title { line-height: 1.2; }
.snap-stats {
font-size: 12px; color: var(--gray-600); line-height: 1.5;
}
.snap-stats strong { color: #111; font-weight: 600; }
.snap-empty {
font-size: 12px; color: var(--gray-400); font-style: italic;
padding-top: 4px;
}
/* Floating hover popup (2-second delay) */
.snap-hover-popup {
position: absolute;
max-width: 280px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 10px 12px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
font-size: 12px; line-height: 1.5;
color: var(--gray-700);
z-index: 9000;
opacity: 0;
transform: translateY(-2px);
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
}
.snap-hover-popup.visible {
opacity: 1;
transform: translateY(0);
}
.snap-hover-popup.snap-hover-below { transform: translateY(2px); }
.snap-hover-popup.visible.snap-hover-below { transform: translateY(0); }
.snap-hover-title {
font-weight: 600; color: #111; margin-bottom: 4px; font-size: 13px;
}
.snap-hover-desc { color: var(--gray-600); }
.snap-hover-use {
color: #1e40af; font-weight: 500;
margin-top: 6px; padding-top: 6px;
border-top: 1px solid #e5e7eb;
}
/* ---- Section tabs (facility page) ---- */
.tabs {
display: flex;
flex-wrap: nowrap; /* keep all tabs on one row */
gap: 1px;
border-bottom: 2px solid var(--gray-200);
margin-bottom: 20px;
height: 54px; /* tightened so all 13 single-line tabs fit at 1280px */
overflow-x: auto; /* fall back to scroll if viewport is narrower than expected */
overflow-y: hidden; /* horizontal scroll arrows handle x-overflow; vertical scrollbar should never appear */
}
.tab-btn {
padding: 3px 7px;
font-size: 11px;
font-weight: 500;
color: var(--gray-700);
background: transparent;
border: none;
cursor: pointer;
border-radius: 6px 6px 0 0;
transition: background .15s, color .15s, box-shadow .15s;
/* position:relative anchors the active state's downward-pointing
::after notch (border-trick triangle) so it visually connects
the active tab to the sub-tab bar's top-border rail. */
position: relative;
/* Two-line labels use explicit in the markup. Both lines
left-align inside the tab; the flex container vertically centers
the label span. */
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
white-space: nowrap;
min-height: 44px;
line-height: 1.2;
flex: 0 0 auto; /* let each tab take only the width it needs */
}
.tab-btn .tab-label { text-align: left; }
.tab-btn .tab-label .info-tip-btn { vertical-align: baseline; margin-left: 3px; }
/* Shrink the ⓘ on tabs so it adds minimal width (preserves the
CLAUDE.md tooltip convention — present, just less prominent). */
.tab-btn .info-tip-btn { font-size: 9px; opacity: 0.6; margin-left: 2px; }
.tab-btn:hover { background: var(--gray-100); color: var(--gray-900); }
.tab-btn.active {
background: #1a3a5c;
color: #fff;
font-weight: 700;
/* Subtle elevation so the active tab reads as raised over the
sibling tabs and the sub-tab bar below. */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
.tab-btn.active:hover { background: #1a3a5c; color: #fff; }
.tab-btn.active .info-tip-btn { color: #fff; opacity: 0.9; }
/* Downward-pointing notch at the bottom-center of the active tab.
Border-trick triangle (transparent left/right, solid top in the
tab's module color) — visually points to the sub-tab bar's
top-border rail below, so the two levels read as connected.
Default color is the navy fallback; per-module overrides below. */
.tab-btn.active::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1a3a5c;
transform: translateX(-50%);
pointer-events: none;
}
/* Module-aware active backgrounds. Each .tab-btn carries
data-module= matching its CLAUDE.md palette entry; the active
state renders in that module's color so users get visual
continuity between the tab they're in and the data they're
viewing. The plain .tab-btn.active rule above is the navy
fallback; module-specific selectors below override. */
.tab-btn[data-module="overview"].active { background: #1a3a5c; } /* neutral navy — Summary dashboard */
.tab-btn[data-module="hd"].active { background: #475569; } /* slate — Site Info / Handler */
.tab-btn[data-module="compliance"].active { background: #7c3aed; } /* violet — Compliance & Enforcement */
.tab-btn[data-module="pm"].active { background: #0e7490; } /* teal — Permitting */
.tab-btn[data-module="ca"].active { background: #991b1b; } /* red — Corrective Action */
.tab-btn[data-module="fa"].active { background: #6d28d9; } /* deep purple — Financial Assurance */
.tab-btn[data-module="br"].active { background: #1a3a5c; } /* navy — Biennial Report */
.tab-btn[data-module="brem"].active {
/* Two-tone split — navy (BR) on the left half, forest green
(EM) on the right — visually signals this tab bridges both
modules. The hard 50/50 stop avoids a soft blend that would
muddy the identity of either color. */
background: linear-gradient(to right, #1a3a5c 50%, #065f46 50%);
}
.tab-btn[data-module="brem"].active:hover {
background: linear-gradient(to right, #1a3a5c 50%, #065f46 50%);
}
.tab-btn[data-module="em2"].active { background: #065f46; } /* green — eManifest */
.tab-btn[data-module="wiets"].active { background: #92400e; } /* amber — WIETS */
.tab-btn[data-module="history"].active { background: #1f2937; } /* gray-900 — Site History */
/* Notch color matches the tab's module color so the downward
triangle reads as part of the same colored shape. */
/* BR↔EM notch sits at the bottom-center of the split-color tab,
right at the seam between the navy and green halves. Using the
midpoint color #0f4c65 (a desaturated teal blending navy +
green) lets it read as belonging to both halves rather than
pulling toward one. CSS borders can't carry gradients, so the
midpoint is the cleanest available approximation. */
.tab-btn[data-module="brem"].active::after { border-top-color: #0f4c65; }
.tab-btn[data-module="hd"].active::after { border-top-color: #475569; }
.tab-btn[data-module="compliance"].active::after { border-top-color: #7c3aed; }
.tab-btn[data-module="pm"].active::after { border-top-color: #0e7490; }
.tab-btn[data-module="ca"].active::after { border-top-color: #991b1b; }
.tab-btn[data-module="fa"].active::after { border-top-color: #6d28d9; }
.tab-btn[data-module="em2"].active::after { border-top-color: #065f46; }
.tab-btn[data-module="wiets"].active::after { border-top-color: #92400e; }
.tab-btn[data-module="history"].active::after { border-top-color: #1f2937; }
/* :hover override per module so the active background sticks
instead of flashing the default navy on mouseover. */
.tab-btn[data-module="hd"].active:hover { background: #475569; }
.tab-btn[data-module="compliance"].active:hover { background: #7c3aed; }
.tab-btn[data-module="pm"].active:hover { background: #0e7490; }
.tab-btn[data-module="ca"].active:hover { background: #991b1b; }
.tab-btn[data-module="fa"].active:hover { background: #6d28d9; }
.tab-btn[data-module="em2"].active:hover { background: #065f46; }
.tab-btn[data-module="wiets"].active:hover { background: #92400e; }
.tab-btn[data-module="history"].active:hover { background: #1f2937; }
/* Chevron on tabs that have sub-tabs (BR, BR↔EM, eManifest, WIETS).
Subtle visual cue that there's a second level of navigation
nested inside. Only renders on tabs marked data-has-subtabs. */
.tab-btn[data-has-subtabs] .tab-label::after {
content: " ▾";
font-size: 9px;
margin-left: 4px;
opacity: 0.55;
position: relative;
top: -1px;
}
.tab-btn[data-has-subtabs].active .tab-label::after {
opacity: 0.85;
}
/* ---- Map containers ---- */
#map { height: 600px; border-radius: var(--radius); box-shadow: var(--shadow); }
.dual-map-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.map-panel {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.map-panel-header {
padding: 12px 16px;
background: var(--epa-blue);
color: #fff;
font-size: 13px;
font-weight: 600;
}
.map-panel-filters {
padding: 10px 14px;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 12px;
}
.map-panel-filters select, .map-panel-filters input[type="range"] {
font-size: 12px;
height: 28px;
padding: 3px 8px;
border: 1px solid var(--gray-200);
border-radius: 4px;
background: #fff;
}
.map-panel-filters label { color: var(--gray-600); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.map-container { height: 380px; position: relative; }
/* Prevent Leaflet maps from overlapping the sticky nav bar.
nav z-index:1100 beats Leaflet controls (z-index:1000) in the root stacking context.
(.leaflet-container has no position so cannot establish its own stacking context.) */
.map-note { padding: 6px 14px; font-size: 11px; color: var(--gray-400); background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.map-fullscreen-btn {
background: white;
border: 2px solid rgba(0,0,0,0.2);
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
line-height: 1;
}
.map-fullscreen-btn:hover { background: #f4f4f4; }
.map-fullscreen-active {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
/* Sits above the manifest modal overlay (#manifest-modal-overlay
uses z-index:10001) so a fullscreened map clicked from inside the
popup renders on top — overlay disappears behind it as expected. */
z-index: 10002 !important;
/* Neutralise the manifest-detail bleed margins (margin-left:-24px /
margin-right:-24px on the route-map div) and the rounded-bleed
shape, otherwise the fixed-position map renders 24px offscreen
to the left with rounded corners clipping into the viewport. */
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
}
/* Keep map controls panel scrollable and above Leaflet panes when fullscreen */
.map-fullscreen-active .map-controls {
max-height: calc(100vh - 20px);
overflow-y: auto;
z-index: 10003;
}
/* Apply border-radius to leaflet-container for maps that have overlay divs inside them
(overflow:hidden removed from the outer div to allow overlays to render correctly) */
#flow-map .leaflet-container,
#em-flow-map .leaflet-container,
#em-pcb-map .leaflet-container,
#em-rej-map .leaflet-container,
#em-shipping-map .leaflet-container { border-radius: 6px; }
#received-map .leaflet-container { border-radius: 4px; }
/* ---- Module description box ---- */
.module-desc {
background: #f0f4f8;
border-left: 4px solid var(--epa-blue);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 14px 18px;
margin-bottom: 20px;
font-size: 13px;
}
.module-desc-inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.module-desc p { color: var(--gray-600); line-height: 1.6; }
.plain-english-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
color: var(--epa-blue);
border: 1.5px solid var(--epa-blue);
border-radius: 20px;
background: transparent;
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
align-self: flex-start;
}
.plain-english-btn:hover {
background: var(--epa-blue);
color: #fff;
}
/* Manifest detail popup — fullscreen state. The inner card
(#manifest-modal-content) carries its dimensions inline (88vw /
82vh / 920px max-width). When the user clicks the ⛶ toggle next to
the close button, we add .manifest-fullscreen which overrides those
inline styles to fill the viewport. !important is required because
the base values live in a style="" attribute, not a CSS rule. The
overlay (#manifest-modal-overlay) already covers the full viewport,
so only the card needs to grow. */
.manifest-fullscreen {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* ---- Modal ---- */
/* Unified download pill (BR Generation Waste Stream Detail + reusable). */
.download-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #1e3a5f;
color: #fff;
border: none;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease;
}
.download-pill:hover { background: #2c5282; }
.modal-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,.55);
z-index: 11000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
background: #fff;
border-radius: 12px;
padding: 32px 36px 28px;
max-width: 580px;
width: 100%;
position: relative;
box-shadow: 0 24px 64px rgba(0,0,0,.35);
max-height: 90vh;
overflow-y: auto;
}
.modal-close {
position: absolute;
top: 14px; right: 16px;
background: var(--gray-100);
border: none;
font-size: 18px;
cursor: pointer;
color: var(--gray-600);
line-height: 1;
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.modal-close:hover { background: var(--gray-200); color: var(--gray-900); }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; color: var(--epa-blue); padding-right: 32px; }
.modal-body { font-size: 14px; color: var(--gray-600); line-height: 1.75; }
/* ---- HTMX loading indicator ---- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }
/* ---- Premium Report observations: async load spinner ---- */
.obs-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #cbd5e1;
border-top-color: #1a2744;
border-radius: 50%;
animation: obs-spin 0.8s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes obs-spin {
to { transform: rotate(360deg); }
}
.obs-loading {
color: #64748b;
font-size: 13px;
padding: 12px 0;
font-style: italic;
}
.spinner {
display: inline-block;
width: 16px; height: 16px;
border: 2px solid var(--gray-200);
border-top-color: var(--blue);
border-radius: 50%;
animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- Chart container ---- */
.chart-wrap { position: relative; height: 300px; margin-top: 8px; }
/* ---- Alert / flash ---- */
.alert {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 13px;
}
.alert-info { background: var(--blue-lt); color: #1e40af; border-left: 3px solid var(--blue); }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 3px solid var(--amber); }
.alert-error { background: #fef2f2; color: #991b1b; border-left: 3px solid var(--red); }
.alert-success { background: #f0fdf4; color: #166534; border-left: 3px solid var(--green); }
/* ---- Module status grid ---- */
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.module-card {
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 14px 16px;
text-decoration: none;
color: inherit;
display: block;
transition: border-color .15s, box-shadow .15s;
}
.module-card:hover {
border-color: var(--epa-blue);
box-shadow: 0 2px 8px rgba(26,58,92,.12);
}
.module-card .mod-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; color: var(--epa-blue); }
.module-card .mod-desc { font-size: 11px; color: var(--gray-600); margin-bottom: 6px; }
.module-card .mod-rows { font-size: 18px; font-weight: 700; color: var(--blue); }
.module-card .mod-date { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
/* Module card color variants — left border by module type */
.module-card.mod-blue { border-left: 4px solid #2c7be5; }
.module-card.mod-green { border-left: 4px solid #0d9f6e; }
.module-card.mod-orange { border-left: 4px solid #e67e22; }
.module-card.mod-blue .mod-name { color: #1a3a5c; }
.module-card.mod-green .mod-name { color: #065f46; }
.module-card.mod-orange .mod-name { color: #92400e; }
.module-card.mod-blue .mod-rows { color: #2c7be5; }
.module-card.mod-green .mod-rows { color: #0d9f6e; }
.module-card.mod-orange .mod-rows { color: #e67e22; }
.module-card.mod-blue:hover { border-color: #2c7be5; box-shadow: 0 2px 8px rgba(44,123,229,.15); }
.module-card.mod-green:hover { border-color: #0d9f6e; box-shadow: 0 2px 8px rgba(13,159,110,.15); }
.module-card.mod-orange:hover { border-color: #e67e22; box-shadow: 0 2px 8px rgba(230,126,34,.15); }
/* ---- Sub-tabs ---- */
/* Border-bottom tab bar (reports_em_summary's Summary/Rejections tabs + the
audit views) — clear active state: gray inactive → navy bold + navy underline
when active. Moved here from audit.html's inline