/* =====================================================================
MLI Vet Lab CRM — Portal design system
Single source of truth for all visual tokens, components, and layout.
Brand blues: #1e3a8a (deep), #3b82f6 (accent).
Radius hierarchy (containers are always rounder than their contents):
--radius-sm 6px inputs, selects, textareas, small controls
--radius 8px buttons, flash, small cards, filter groups
--radius-lg 12px page cards, modals, filter bar, login card
--radius-full 999px pill badges, avatars
===================================================================== */
/* ---- Tokens --------------------------------------------------------- */
:root {
/* Brand */
--blue-900: #1e3a8a;
--blue-700: #1d4ed8;
--blue-500: #3b82f6;
--blue-100: #dbeafe;
--blue-50: #eff6ff;
/* Neutrals */
--ink: #0f172a;
--ink-soft: #475569;
--muted: #64748b;
--line: #e2e8f0;
--bg: #f1f5f9;
--white: #ffffff;
/* Semantic */
--green: #16a34a;
--red: #dc2626;
--amber: #d97706;
/* Radius tiers */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-full: 999px;
/* Elevation */
--shadow: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
--shadow-md: 0 4px 6px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
--shadow-lg: 0 12px 28px rgba(15,23,42,.13), 0 4px 8px rgba(15,23,42,.06);
/* Transitions */
--t: .15s ease;
}
/* ---- Reset / base --------------------------------------------------- */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
font-size: 15px;
}
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
background: var(--blue-50); color: var(--blue-900);
padding: 1px 6px; border-radius: var(--radius-sm); font-size: .85em;
}
/* Utilities */
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.ta-right { text-align: right; }
/* ---- Brand mark ----------------------------------------------------- */
.brand-mark {
background: var(--blue-500); color: #fff; font-weight: 800;
padding: 5px 9px; border-radius: var(--radius); letter-spacing: .5px;
font-size: .9rem;
}
.brand-mark-lg { font-size: 1.4rem; padding: 10px 16px; }
/* ---- Layout --------------------------------------------------------- */
.container { max-width: 1320px; margin: 0 auto; padding: 28px 24px; }
.page-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700; }
.page-head p { margin: 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head--center { align-items: center; }
/* ---- Cards ---------------------------------------------------------- */
.card {
background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius-lg); box-shadow: var(--shadow);
padding: 22px; margin-bottom: 22px;
}
.card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.card-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
/* ---- Stats ---------------------------------------------------------- */
.stat-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 16px; margin-bottom: 22px;
}
.stat-card {
background: var(--white); border: 1px solid var(--line);
border-left: 4px solid var(--blue-500);
border-radius: var(--radius-lg); padding: 18px 20px;
box-shadow: var(--shadow);
display: flex; flex-direction: column; gap: 4px;
transition: box-shadow var(--t), transform var(--t);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--blue-900); line-height: 1; }
.stat-label { color: var(--muted); font-size: .85rem; }
/* Phase 3 stat extensions */
.stat-num { font-size: 2rem; font-weight: 700; color: var(--blue-900); line-height: 1; display: block; }
.stat-sub { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.stat-card-alert { border-left-color: var(--amber); }
.stat-card-alert .stat-num { color: #b45309; }
/* ---- Tables --------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th,
.data-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); }
.data-table thead th {
background: var(--blue-50); color: var(--blue-900);
font-size: .78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .4px; white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f8fafc; }
.empty { color: var(--muted); padding: 20px 0; text-align: center; }
/* ---- Badges --------------------------------------------------------- */
.badge {
display: inline-block; padding: 3px 9px;
border-radius: var(--radius-full);
font-size: .71rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
/* Generic status */
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-in_progress { background: #dbeafe; color: #1e40af; }
.badge-completed { background: #dcfce7; color: #166534; }
/* Courier pickup status */
.badge-scheduled { background: #dbeafe; color: #1e40af; }
.badge-en_route { background: #ede9fe; color: #5b21b6; }
.badge-collected { background: #dcfce7; color: #166534; }
.badge-cancelled { background: #f1f5f9; color: #475569; }
.badge-failed { background: #fee2e2; color: #991b1b; }
/* Pickup type */
.badge-regular { background: #f1f5f9; color: #475569; }
.badge-will_call { background: #fef3c7; color: #92400e; }
.badge-schedule { background: #ede9fe; color: #5b21b6; }
/* Urgency */
.badge-routine { background: #f1f5f9; color: #475569; }
.badge-urgent { background: #fef3c7; color: #92400e; }
.badge-stat { background: #fee2e2; color: #991b1b; }
/* Supply request statuses */
.badge-approved { background: #dcfce7; color: #166534; }
.badge-packed { background: #cffafe; color: #155e75; }
.badge-shipped { background: #ede9fe; color: #5b21b6; }
.badge-delivered { background: #dcfce7; color: #166534; }
/* Billing / invoice statuses */
.badge-draft { background: #f1f5f9; color: #475569; }
.badge-sent { background: #dbeafe; color: #1e40af; }
.badge-paid { background: #dcfce7; color: #166534; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
/* Inventory stock levels */
.badge-stock-low { background: #fee2e2; color: #991b1b; }
.badge-stock-normal { background: #dcfce7; color: #166534; }
.badge-stock-high { background: #fef3c7; color: #92400e; }
/* Lab workflow */
.badge-results_entered { background: #ede9fe; color: #5b21b6; }
.badge-reviewed { background: #cffafe; color: #155e75; }
.badge-published { background: #dcfce7; color: #166534; }
/* Roles */
.badge-role-admin { background: #fee2e2; color: #991b1b; }
.badge-role-lab_admin { background: #ede9fe; color: #5b21b6; }
.badge-role-vet_admin { background: #dbeafe; color: #1e40af; }
.badge-role-courier { background: #fef3c7; color: #92400e; }
.badge-role-viewer { background: #f1f5f9; color: #374151; }
/* Audit actions */
.badge-create, .badge-start { background: #dcfce7; color: #166534; }
.badge-update, .badge-enter_results, .badge-review { background: #dbeafe; color: #1e40af; }
.badge-delete, .badge-deactivate, .badge-unpublish { background: #fee2e2; color: #991b1b; }
.badge-publish { background: #d1fae5; color: #065f46; }
.badge-login, .badge-logout, .badge-reopen { background: #f1f5f9; color: #374151; }
/* ---- Contact message status badges ---------------------------------- */
.badge-cm-new { background: #fee2e2; color: #991b1b; }
.badge-cm-read { background: #dbeafe; color: #1e40af; }
.badge-cm-replied { background: #dcfce7; color: #166534; }
.badge-cm-archived { background: #f1f5f9; color: #475569; }
/* ---- Buttons -------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 16px; border-radius: var(--radius); border: 1px solid transparent;
font: 600 .9rem/1 inherit; cursor: pointer;
transition: background var(--t), border-color var(--t), color var(--t),
box-shadow var(--t), transform var(--t);
white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 11px; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-primary { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.btn-primary:hover { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.btn-primary:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.btn-secondary { background: var(--blue-50); color: var(--blue-900); border-color: #c7d7fb; }
.btn-secondary:hover { background: var(--blue-100); border-color: #a5b9f8; }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); border-color: #cbd5e1; }
.btn-danger { background: #fff; color: var(--red); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }
/* ---- Flash messages ------------------------------------------------- */
.flash {
padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px;
font-size: .9rem; border: 1px solid;
display: flex; align-items: flex-start; gap: 8px;
}
.flash i { margin-top: 1px; flex-shrink: 0; }
.flash-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.flash-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.flash-info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
/* ---- Filter bar ----------------------------------------------------- */
/* Legacy .filters (simple inline — other pages) */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.filters input[type=text], .filters select { min-width: 160px; }
/* Labeled filter bar (courier pickups and future pages) */
.filters-bar {
display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
background: var(--blue-50); border: 1px solid var(--blue-100);
border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-group label {
font-size: .71rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--blue-700); margin: 0;
}
.filter-group select,
.filter-group input[type=date],
.filter-group input[type=text] {
min-width: 150px; width: auto;
border-radius: var(--radius); padding: 9px 13px;
}
.filter-group select { padding-right: 34px; }
.filter-actions { display: flex; flex-direction: column; gap: 4px; }
.filter-actions .spacer { font-size: .71rem; visibility: hidden; }
.filter-actions-row { display: flex; gap: 8px; align-items: center; }
/* ---- Forms ---------------------------------------------------------- */
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 0 0 20px; }
.form legend { font-weight: 700; color: var(--blue-900); padding: 0 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
/* Supply request item rows: prevent the trailing remove button from
stretching to the field's full width (default align-items: stretch). */
.request-item .field { align-items: flex-start; }
label { font-weight: 600; font-size: .82rem; color: #3d4e6b; letter-spacing: .01em; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
select,
textarea {
font: inherit; padding: 10px 14px;
border: 1.5px solid #d0d7e0; border-radius: var(--radius);
background: var(--white); color: var(--ink); width: 100%;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color var(--t), box-shadow var(--t);
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,
select:focus,
textarea:focus {
outline: none; border-color: var(--blue-500);
box-shadow: 0 0 0 3px rgba(59,130,246,.15), 0 1px 2px rgba(15,23,42,.04);
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
border-color: #9eafc2;
box-shadow: 0 1px 3px rgba(15,23,42,.07);
}
textarea { resize: vertical; }
::placeholder { color: #a0aec0; font-weight: 400; }
select {
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center;
background-size: 16px; padding-right: 34px;
}
/* The cdn.tailwindcss.com runtime injects a Preflight stylesheet whose
`select, textarea { padding: 0 }` rule ties the specificity of the base
rule above and can win the cascade. These higher-specificity rules
(scoped to .field/.filters, used by every plain select/textarea) restore
the intended padding. */
.field input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.field select,
.field textarea,
.filters input[type=text],
.filters select {
padding: 10px 14px;
}
.field select,
.filters select {
padding-right: 34px;
}
/* Required-field asterisk marker: * */
.req { color: var(--red); font-weight: 700; margin-left: 1px; }
.err { color: var(--red); font-size: .8rem; font-weight: 600; }
.field-static { margin: 0; padding: 8px 0; font-size: .92rem; }
.form-actions { display: flex; gap: 10px; }
.mt-2 { margin-top: 8px; }
/* ---- Antibiotic grid ----------------------------------------------- */
.antibiotic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ab-item { display: flex; flex-direction: column; gap: 4px; }
.ab-item label { font-size: .8rem; }
/* Phase 3 ab-grid variant */
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ab-item label { font-size: .82rem; color: var(--blue-900); font-weight: 600; }
.ab-item select { padding: 6px 32px 6px 8px; }
/* ---- Test record checklists (Microbiology / Pathology) -------------- */
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.check-item { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; }
.check-item input { width: auto; border-radius: var(--radius-sm); }
.path-services { display: flex; flex-direction: column; gap: 10px; }
.path-service-row {
display: grid; grid-template-columns: 1fr 2fr; gap: 12px; align-items: center;
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.path-service-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; }
.path-service-label input { width: auto; border-radius: var(--radius-sm); }
/* ---- Pagination ----------------------------------------------------- */
.pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.page-link {
padding: 6px 12px; border: 1px solid var(--line);
border-radius: var(--radius-sm); color: var(--ink-soft);
transition: background var(--t), border-color var(--t);
}
.page-link:hover { background: var(--bg); border-color: #cbd5e1; text-decoration: none; }
.page-link.is-active { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
/* ---- Login ---------------------------------------------------------- */
.login-body {
display: flex; align-items: center; justify-content: center; min-height: 100vh;
background: linear-gradient(135deg, var(--blue-900), var(--blue-500));
}
.login-card {
background: var(--white); padding: 36px 32px;
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
width: 100%; max-width: 380px;
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { margin: 14px 0 2px; font-size: 1.4rem; color: var(--blue-900); }
.login-card label { display: block; margin: 14px 0 6px; }
.login-card .btn { margin-top: 22px; }
.login-hint { text-align: center; margin-top: 18px; font-size: .82rem; }
/* ---- Reports -------------------------------------------------------- */
.report-list { list-style: none; margin: 0; padding: 0; }
.report-list li {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.report-body { background: #e2e8f0; padding: 24px 12px; }
.report-toolbar {
max-width: 820px; margin: 0 auto 14px;
display: flex; gap: 10px; justify-content: space-between;
}
.report-sheet {
max-width: 820px; margin: 0 auto; background: var(--white); padding: 40px;
box-shadow: var(--shadow-lg); border-radius: var(--radius);
}
.report-header {
display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 3px solid var(--blue-900); padding-bottom: 16px; margin-bottom: 20px;
}
.report-header h1 { margin: 0 0 4px; color: var(--blue-900); font-size: 1.5rem; }
.report-header p { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.report-meta { text-align: right; font-size: .82rem; color: var(--ink-soft); }
.report-section { margin-bottom: 24px; }
.report-section h2 {
font-size: 1.05rem; color: var(--blue-900); border-bottom: 1px solid var(--line);
padding-bottom: 6px; margin: 0 0 12px;
}
.report-kv { width: 100%; border-collapse: collapse; font-size: .88rem; }
.report-kv th, .report-kv td { text-align: left; padding: 6px 10px; vertical-align: top; border: 1px solid var(--line); }
.report-kv th { background: var(--blue-50); color: var(--blue-900); width: 140px; font-weight: 600; }
.report-result { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.report-result h3 { margin: 0 0 10px; font-size: 1rem; }
.report-result h4 { margin: 14px 0 6px; font-size: .9rem; color: var(--blue-900); }
.report-ab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.report-ab th, .report-ab td { text-align: left; padding: 5px 10px; border: 1px solid var(--line); }
.report-ab thead th { background: var(--blue-50); color: var(--blue-900); }
.sens { font-weight: 700; }
.sens-S { color: var(--green); }
.sens-R { color: var(--red); }
.sens-I { color: var(--amber); }
.sens-MS { color: var(--blue-700); }
.report-footer { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; font-size: .78rem; color: var(--muted); }
/* ---- Footer --------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--white); color: var(--muted); font-size: .82rem; }
.footer .container { padding: 14px 24px; }
/* ---- Alert Banner --------------------------------------------------- */
#alert-banner {
background: #fef2f2;
border-bottom: 2px solid #fca5a5;
padding: 0;
}
.alert-banner-row {
display: flex;
align-items: center;
gap: .75rem;
padding: .6rem 1.25rem;
border-bottom: 1px solid #fecaca;
font-size: .83rem;
color: #991b1b;
}
.alert-banner-row:last-child { border-bottom: none; }
.alert-banner-icon { font-size: .9rem; flex-shrink: 0; }
.alert-banner-msg { flex: 1; }
.alert-banner-link { color: var(--blue-700); text-decoration: underline; font-size: .8rem; margin-left: .5rem; }
.alert-ack-btn {
flex-shrink: 0;
background: var(--red);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: .2rem .75rem;
font-size: .75rem;
font-weight: 600;
cursor: pointer;
transition: background var(--t);
}
.alert-ack-btn:hover { background: #b91c1c; }
.nav-alert-badge {
margin-left: auto;
background: var(--red);
color: #fff;
font-size: .65rem;
font-weight: 700;
padding: .1rem .4rem;
border-radius: var(--radius-full);
min-width: 1.2rem;
text-align: center;
}
/* ---- Dashboard ------------------------------------------------------ */
.dash-period-toggle {
display: flex; gap: .25rem;
background: var(--bg); border-radius: var(--radius); padding: .25rem;
}
.dash-period-btn {
padding: .25rem .75rem; border-radius: var(--radius-sm);
border: none; background: transparent;
font-size: .8rem; font-weight: 600; color: var(--muted);
cursor: pointer; transition: background var(--t), color var(--t), box-shadow var(--t);
}
.dash-period-btn.active {
background: var(--white); color: var(--blue-700);
box-shadow: 0 1px 3px rgba(15,23,42,.1);
}
/* dash-stat-grid inherits repeat(4,1fr) from .stat-grid; responsive rules below */
.dash-card {
position: relative; min-height: 110px;
display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem;
}
.dash-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dash-card-label {
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.dash-card-icon { color: var(--line); font-size: 1rem; }
.dash-card-value { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ink); }
.dash-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.dash-card-delta { font-size: .75rem; font-weight: 600; }
.dash-card-delta.up { color: var(--green); }
.dash-card-delta.down { color: var(--red); }
.dash-card-delta.neutral { color: var(--muted); }
.dash-sparkline { width: 80px; height: 24px; overflow: visible; }
.dash-card--alert { border-color: #fca5a5; background: #fff5f5; }
/* ---- Analytics Reports ---------------------------------------------- */
.ar-tab-btn.active { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
/* ====================================================================
Phase 3 — Admin console & lab workflow
==================================================================== */
/* Admin console two-column layout */
.admin-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; }
.admin-links { list-style: none; margin: 0; padding: 0; }
.admin-links li { border-bottom: 1px solid var(--line); }
.admin-links li:last-child { border-bottom: 0; }
.admin-links a { display: block; padding: 12px 6px; border-radius: var(--radius-sm); transition: background var(--t); }
.admin-links a:hover { background: var(--blue-50); text-decoration: none; }
.admin-links strong { display: block; color: var(--blue-900); }
.admin-links span { color: var(--muted); font-size: .88rem; }
/* Recent activity list */
.activity-list { list-style: none; margin: 0 0 10px; padding: 0; }
.activity-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.activity-text { flex: 1; }
.activity-time { color: var(--muted); font-size: .8rem; white-space: nowrap; }
/* Color swatch */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); }
/* Workflow banner */
.workflow-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.workflow-meta { flex-basis: 100%; font-size: .85rem; }
.workflow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Tabs (review queue) */
.tab-row { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; cursor: pointer; transition: color var(--t); }
.tab.is-active { color: var(--blue-900); border-bottom-color: var(--blue-700); }
.tab:hover { color: var(--blue-700); text-decoration: none; }
/* Audit JSON detail */
.audit-json { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: var(--radius-sm); font-size: .78rem; overflow-x: auto; margin: 6px 0 0; max-width: 480px; }
.link-like { color: var(--blue-700); cursor: pointer; }
/* Report admin controls */
.report-admin-note { color: var(--muted); font-size: .82rem; margin-left: auto; }
.report-result-actions { margin: 6px 0 10px; display: flex; gap: 8px; }
/* ====================================================================
Courier pickups — pickups page, routes admin, detail dialogs
==================================================================== */
/* Inventory transaction scroll area */
.transaction-list { max-height: 280px; overflow-y: auto; }
/* Loading spinner */
.spinner {
display: inline-block; width: 28px; height: 28px;
border: 3px solid var(--blue-50); border-top-color: var(--blue-500);
border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Native