/* Hyperdrive design system for the biospecimen portal: colors from the Hyperdrive Brand Guidelines (July 2026, light
   theme and brand scales), type as on hyperdrivebio.com (Manrope headings, Inter body), with Bootstrap and Blazorise
   mapped onto them. 1px borders instead of shadows; sentence case; data in IBM Plex Mono. Pulse orange is an accent only.
   The platform's main and navigation colors (admin, /admin/theme) are layered on top by Theming/ThemeCss.cs. */

:root {
    /* Color: Hyperdrive blue and the Electric Blue scale */
    --hd-blue: #0B30BD;
    --hd-blue-hover: #0D2BA9;       /* Royal blue */
    --hd-blue-soft: #EEF4FF;        /* Electric blue 50 */
    --hd-sky: #3771FF;              /* Electric blue 500 */
    --hd-sky-soft: #DCEDFD;         /* Sky blue 100 */
    --hd-night: #07091D;            /* Night blue */
    --hd-orange: #F75A3C;           /* Pulse orange: an accent, never a large fill */
    /* Neutrals: the Cod Gray scale and light-theme grays */
    --hd-bg: #F5F5F6;
    --hd-card: #FFFFFF;
    --hd-border: #CDCED4;
    --hd-border-strong: #7F8191;
    --hd-ink: #1A1A1B;              /* Charcoal */
    --hd-ink-secondary: #4A4B55;    /* Slate gray */
    --hd-on-fill: #FFFFFF;
    /* Status colors: functional, not brand colors */
    --hd-green: #0F8C6E;
    --hd-green-strong: #0B6E57;
    --hd-green-strong-hover: #095C49;
    --hd-green-soft: #E3F3EE;
    --hd-amber: #B26A00;
    --hd-amber-ink: #8A5200;
    --hd-amber-soft: #FBF0DF;
    --hd-red: #B4322F;
    --hd-red-soft: #F8E5E4;

    /* Type */
    --hd-font-display: Manrope, Inter, system-ui, sans-serif;
    --hd-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --hd-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    /* Bootstrap, mapped onto the tokens */
    --bs-body-font-family: var(--hd-font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--hd-ink);
    --bs-body-color-rgb: 26, 26, 27;
    --bs-body-bg: var(--hd-bg);
    --bs-body-bg-rgb: 245, 245, 246;
    --bs-emphasis-color: var(--hd-ink);
    --bs-heading-color: var(--hd-ink);
    --bs-secondary-color: var(--hd-ink-secondary);
    --bs-secondary-color-rgb: 74, 75, 85;
    --bs-tertiary-bg: var(--hd-blue-soft);
    --bs-border-color: var(--hd-border);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 14px;
    --bs-border-radius-pill: 999px;
    --bs-font-monospace: var(--hd-font-mono);
    --bs-success: #0B6E57;
    --bs-success-rgb: 11, 110, 87;
    --bs-danger: #B4322F;
    --bs-danger-rgb: 180, 50, 47;
    --bs-warning: #B26A00;
    --bs-warning-rgb: 178, 106, 0;
    --bs-info: #3771FF;
    --bs-info-rgb: 55, 113, 255;
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}

body { -webkit-font-smoothing: antialiased; }

/* ---- Type ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--hd-font-display); color: var(--hd-ink); }
h1, .h1 { font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.015em; }
h3, .h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
h4, .h4, h5, .h5, h6, .h6 { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; }
.hd-display { font-family: var(--hd-font-display); font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.02em; color: var(--hd-ink); }
.hd-lead { font-size: 18px; line-height: 28px; }
@media (max-width: 575.98px) { .hd-display { font-size: 36px; line-height: 42px; } }
.small, small { font-size: 14px; line-height: 20px; }
.form-label, label.form-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.text-body-secondary { color: var(--hd-ink-secondary) !important; }

/* Sample and request IDs, volumes, temperatures and prices are data. */
.font-monospace, .hd-mono { font-family: var(--hd-font-mono) !important; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---- Surfaces: a 1px border, never a shadow ---- */
.b-layout, .b-layout-content { background-color: var(--hd-bg); }
.card { --bs-card-bg: var(--hd-card); --bs-card-border-color: var(--hd-border); --bs-card-border-radius: 10px; --bs-card-spacer-y: 20px; --bs-card-spacer-x: 20px; box-shadow: none; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.hd-topbar { background: var(--hd-card); border-bottom: 1px solid var(--hd-border); }

/* ---- Tables ---- */
.table { --bs-table-bg: var(--hd-card); --bs-table-color: var(--hd-ink); --bs-table-border-color: var(--hd-border); }
.table > thead th { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--hd-ink-secondary); background-color: var(--hd-bg); }
.table-light { --bs-table-bg: var(--hd-bg); --bs-table-color: var(--hd-ink); }
.table-active, tr.hd-selected > * { --bs-table-bg-state: var(--hd-blue-soft); }

/* ---- Buttons: verbs plus an object, 600 weight, 120ms color transitions ---- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 10px; --bs-btn-box-shadow: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.btn-sm { --bs-btn-border-radius: 10px; --bs-btn-font-size: 14px; }
/* The lab-side action: green-strong fill (specimen-green is too light for a white label). */
.btn-success {
    --bs-btn-bg: var(--hd-green-strong); --bs-btn-border-color: var(--hd-green-strong); --bs-btn-color: var(--hd-on-fill);
    --bs-btn-hover-bg: var(--hd-green-strong-hover); --bs-btn-hover-border-color: var(--hd-green-strong-hover); --bs-btn-hover-color: var(--hd-on-fill);
    --bs-btn-active-bg: var(--hd-green-strong-hover); --bs-btn-active-border-color: var(--hd-green-strong-hover); --bs-btn-active-color: var(--hd-on-fill);
}
/* Secondary: card ground, lab-blue label, border-strong outline (3:1), washes to blue-soft. */
.btn-outline-secondary, .btn-secondary.btn-outline, .btn-light {
    --bs-btn-bg: var(--hd-card); --bs-btn-color: var(--hd-blue); --bs-btn-border-color: var(--hd-border-strong);
    --bs-btn-hover-bg: var(--hd-blue-soft); --bs-btn-hover-color: var(--hd-blue); --bs-btn-hover-border-color: var(--hd-border-strong);
    --bs-btn-active-bg: var(--hd-blue-soft); --bs-btn-active-color: var(--hd-blue); --bs-btn-active-border-color: var(--hd-border-strong);
}
.btn-danger {
    --bs-btn-bg: var(--hd-red); --bs-btn-border-color: var(--hd-red); --bs-btn-color: var(--hd-on-fill);
    --bs-btn-hover-bg: #962926; --bs-btn-hover-border-color: #962926; --bs-btn-hover-color: var(--hd-on-fill);
}
.btn-outline-danger {
    --bs-btn-bg: var(--hd-card); --bs-btn-color: var(--hd-red); --bs-btn-border-color: var(--hd-red);
    --bs-btn-hover-bg: var(--hd-red-soft); --bs-btn-hover-color: var(--hd-red); --bs-btn-hover-border-color: var(--hd-red);
    --bs-btn-active-bg: var(--hd-red-soft); --bs-btn-active-color: var(--hd-red); --bs-btn-active-border-color: var(--hd-red);
}
.btn-dark { --bs-btn-bg: var(--hd-ink); --bs-btn-border-color: var(--hd-ink); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    background-color: var(--hd-bg) !important; color: var(--hd-ink-secondary) !important; border-color: var(--hd-border) !important; opacity: 1;
}

/* ---- Focus: 2px solid outline at a 2px offset on every interactive element ---- */
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: none !important; outline: 2px solid var(--bs-primary); outline-offset: 2px;
}

/* ---- Form controls ---- */
.form-control, .form-select { border-color: var(--hd-border-strong); border-radius: 10px; color: var(--hd-ink); background-color: var(--hd-card); }
.form-control::placeholder { color: var(--hd-ink-secondary); opacity: .8; }
.form-check-input { border-color: var(--hd-border-strong); }
.form-check-input[type=checkbox] { border-radius: 6px; }
.form-control:disabled, .form-select:disabled { background-color: var(--hd-bg); color: var(--hd-ink-secondary); border-color: var(--hd-border); }

/* ---- Badges: status always carries a word ---- */
.badge { font-family: var(--hd-font-body); font-size: 12px; line-height: 16px; font-weight: 600; border-radius: 6px; padding: 4px 8px; }
.text-bg-success { background-color: var(--hd-green-soft) !important; color: var(--hd-green-strong) !important; }
.text-bg-primary, .badge.bg-secondary, .badge.bg-primary { background-color: var(--hd-blue-soft) !important; color: var(--hd-blue) !important; }
.text-bg-info, .badge.bg-info { background-color: var(--hd-sky-soft) !important; color: var(--hd-ink) !important; }
.text-bg-warning, .badge.bg-warning { background-color: var(--hd-amber-soft) !important; color: var(--hd-amber-ink) !important; }
.text-bg-danger, .badge.bg-danger { background-color: var(--hd-red-soft) !important; color: var(--hd-red) !important; }
.text-bg-secondary { background-color: var(--hd-bg) !important; color: var(--hd-ink-secondary) !important; border: 1px solid var(--hd-border); }
.text-bg-light { background-color: var(--hd-card) !important; color: var(--hd-ink-secondary) !important; }
.text-bg-dark { background-color: var(--hd-ink) !important; color: var(--hd-on-fill) !important; }

/* ---- Notices ---- */
.alert { --bs-alert-border-radius: 10px; --bs-alert-border-color: transparent; }
.alert-success { --bs-alert-bg: var(--hd-green-soft); --bs-alert-color: var(--hd-green-strong); }
.alert-danger { --bs-alert-bg: var(--hd-red-soft); --bs-alert-color: var(--hd-red); }
.alert-warning { --bs-alert-bg: var(--hd-amber-soft); --bs-alert-color: var(--hd-amber-ink); }
.alert-info { --bs-alert-bg: var(--hd-sky-soft); --bs-alert-color: var(--hd-ink); }
.alert-primary, .alert-secondary, .alert-light { --bs-alert-bg: var(--hd-blue-soft); --bs-alert-color: var(--hd-blue); }
.alert .alert-link { color: inherit; }
.border-warning { border-color: var(--hd-amber) !important; }
.text-success { color: var(--hd-green-strong) !important; }
.text-danger { color: var(--hd-red) !important; }
.text-warning { color: var(--hd-amber) !important; }

/* ---- Meters: electric blue on sky-soft ---- */
.progress { --bs-progress-bg: var(--hd-sky-soft); --bs-progress-border-radius: 999px; }
.progress .progress-bar { background-color: var(--hd-sky) !important; }

/* ---- Logo ---- */
.hd-logo { display: block; height: 28px; width: auto; }
.hd-brand { display: inline-flex; align-items: center; gap: 14px; }
/* The product name sits apart from the lockup, after a hairline, so it never reads as part of the logo. */
.hd-brand-product { font-family: var(--hd-font-display); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; padding-left: 14px; border-left: 1px solid currentColor; color: inherit; opacity: .9; }
.hd-brand-stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.hd-brand-stacked .hd-brand-product { border-left: 0; padding-left: 0; font-size: 13px; line-height: 16px; letter-spacing: .02em; }
.hd-public .hd-brand { color: var(--hd-ink); }
.hd-endorsement { font-size: 14px; line-height: 20px; color: var(--hd-ink-secondary); }

/* ---- Bootstrap pieces that hard-code its own blue ---- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); --bs-nav-pills-link-active-color: var(--hd-on-fill); --bs-nav-pills-border-radius: 10px; }
.nav { --bs-nav-link-color: var(--bs-primary); --bs-nav-link-hover-color: var(--hd-blue-hover); --bs-nav-link-font-weight: 600; }
.nav-tabs { --bs-nav-tabs-border-color: var(--hd-border); --bs-nav-tabs-link-active-color: var(--hd-ink); --bs-nav-tabs-link-active-border-color: var(--hd-border) var(--hd-border) var(--hd-card); }
.list-group { --bs-list-group-border-color: var(--hd-border); --bs-list-group-active-bg: var(--hd-blue-soft); --bs-list-group-active-color: var(--hd-blue); --bs-list-group-active-border-color: var(--hd-border); }
.dropdown-menu { --bs-dropdown-border-color: var(--hd-border); --bs-dropdown-link-active-bg: var(--hd-blue-soft); --bs-dropdown-link-active-color: var(--hd-blue); --bs-dropdown-box-shadow: none; }
.pagination { --bs-pagination-color: var(--bs-primary); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-border-color: var(--hd-border); }
.form-range { accent-color: var(--bs-primary); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237E93A4'/%3e%3c/svg%3e"); }

/* ---- Message threads (buyer ↔ lab) ---- */
.hd-thread { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding: 4px; }
.hd-msg { max-width: 80%; align-self: flex-start; background: var(--hd-card); border: 1px solid var(--hd-border); border-radius: 10px; padding: 8px 12px; }
.hd-msg-mine { align-self: flex-end; background: var(--hd-blue-soft); border-color: transparent; }
.hd-msg-meta { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--hd-ink-secondary); margin-bottom: 2px; }
.hd-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }