:root {
    /* Brand palette — from color7.png */
    --ink: #0E1114;          /* Black */
    --smoke: #F4F4F7;        /* White Smoke */
    --tomato: #ED503B;       /* Tomato */
    --tomato-hover: #D63E2A; /* darkened Tomato for :hover */
    --slate: #7C97A0;        /* Light Slate Gray */
    --sky: #BAD6DF;          /* Light Blue */

    /* Semantic roles (mapped onto the brand palette) */
    --primary: var(--ink);
    --primary-light: #2B3338;
    --accent: var(--tomato);
    --accent-hover: var(--tomato-hover);
    --success: #2F855A;
    --warning: #B7791F;
    --danger: #C0392B;       /* deeper brick red — distinct from Tomato accent */
    --bg: var(--smoke);
    --page-bg: var(--slate);  /* #7C97A0 — page canvas behind the cards */
    --card-bg: #ffffff;
    --text: var(--ink);
    --text-muted: #56666C;   /* darkened slate, WCAG AA on white */
    --border: #DDE3E6;
    --border-strong: #C2CDD2;
    --selected-bg: #E4EEF2;  /* light-blue tint for selected/info surfaces */
    --glow: var(--tomato);   /* #ED503B — hover glow on buttons, app-wide */
    --glow-shadow: 0 0 0 1px rgba(237, 80, 59, 0.45), 0 0 12px 3px rgba(237, 80, 59, 0.5);
    --radius: 8px;
}

/* Accessibility: visible keyboard focus on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--slate);
    outline-offset: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    position: relative;   /* anchors the logo out in the left gutter */
    background: var(--primary);
    color: white;
    padding: 16px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* The header keeps the same centred 1200px band as the rest of the app: the
   title on the left, the account controls on the right, the menu on row 2.
   Only the logo escapes it (see `.header-logo` below). */
.header .container {
    min-height: 98px;   /* the absolutely-placed mark can't grow the bar itself */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
}

/* Credence Genomics mark with the company tagline under it, imprinted in every
   page header. The pair is lifted out of the grid and parked in the left
   gutter, so it sits hard left while the title, menu and page content stay on
   the 1200px centre line. */
.header-mark {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 190px;
}

.header-logo {
    height: 76px;
    width: auto;
}

.header-tagline {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}

.header h1 {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.4rem;
    font-weight: 600;
}

.header-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Second header row: the page menu, as evenly sized boxes across the full
   width of the band; the auto-fill grid spreads a long menu over two rows
   instead of one crowded line. */
.header-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.header-nav .btn {
    justify-content: center;
    text-align: center;
    padding: 7px 10px;
    font-size: 0.85rem;
}

/* Once the window is too narrow for the gutter to hold the mark and its
   tagline, they rejoin the row as an ordinary first column so they can never
   overlap the title. */
@media (max-width: 1620px) {
    .header .container { grid-template-columns: auto minmax(0, 1fr) auto; }
    .header-mark {
        position: static;
        transform: none;
        grid-column: 1;
        grid-row: 1;
    }
    .header h1 { grid-column: 2; }
    .header-actions { grid-column: 3; }
    .header-nav { grid-column: 2 / -1; }
}

/* Narrow screens: drop the account controls and the menu onto their own rows
   rather than squeezing three columns. */
@media (max-width: 760px) {
    .header .container { grid-template-columns: auto minmax(0, 1fr); }
    .header-logo { height: 44px; }
    .header-tagline { font-size: 0.66rem; }
    .header h1 { grid-column: 2; }
    .header-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
    .header-nav { grid-column: 1 / -1; grid-row: 3; }
}

/* Header buttons sit on the dark bar, so on top of the app-wide glow (see
   `.btn:hover` below) they also take a tomato tint. The inline colours on them
   are `style="..."`, so these need !important to be overridden. */
.header-actions .btn:hover,
.header-nav .btn:hover {
    color: #fff !important;
    background: rgba(237, 80, 59, 0.18);
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 24px;
    margin-bottom: 20px;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary);
}

/* Flow Cell Selector */
.flow-cell-selector {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.flow-cell-option {
    flex: 1;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.flow-cell-option:hover {
    border-color: var(--accent);
}

.flow-cell-option.selected {
    border-color: var(--accent);
    background: var(--selected-bg);
}

.flow-cell-option h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.flow-cell-option .capacity {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.flow-cell-option .cost {
    font-weight: 600;
    color: var(--accent);
    font-size: 1.1rem;
    margin-top: 4px;
}

/* Capacity bar */
.capacity-bar-wrapper {
    margin-top: 12px;
}

.capacity-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.capacity-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s;
}

.capacity-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Sample controls */
.sample-controls {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.form-group select,
.form-group input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    min-width: 160px;
}

.urgency-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.urgency-toggle button {
    padding: 8px 16px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.urgency-toggle button.active {
    background: var(--primary);
    color: white;
}

/* Buttons */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: var(--accent);
    color: white;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-success {
    background: var(--success);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-outline:hover { background: var(--bg); }

.btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}
.btn-danger:hover { background: #fff5f5; }

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* Tomato glow on hover — every button, every page. The bare `button` selector
   covers the small page-local buttons (toolbar controls, chip ×, stage
   Accept/Bypass/Reject, pass/fail toggles) with no per-template CSS;
   `.glow-hover` opts in anything that is neither. */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
.glow-hover:hover {
    box-shadow: var(--glow-shadow);
}

/* Only `.btn` also takes the tomato border, so page-local buttons keep the
   colour that carries their meaning (green accept, red reject). `!important`
   beats the inline `style="border-color:…"` the header buttons carry. */
.btn:hover:not(:disabled) {
    border-color: var(--glow) !important;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.metric-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
}

.metric-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.metric-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Cost Allocation Table */
.allocation-table {
    width: 100%;
    border-collapse: collapse;
}

.allocation-table th {
    background: var(--primary);
    color: white;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.allocation-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.allocation-table tbody tr:hover {
    background: #f4f4f7;
}

.status-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-within {
    background: #c6f6d5;
    color: #22543d;
}

.status-near {
    background: #fefcbf;
    color: #744210;
}

.status-over {
    background: #fed7d7;
    color: #822727;
}

.urgency-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.urgency-urgent {
    background: #fed7d7;
    color: #822727;
}

.urgency-routine {
    background: #dde3e6;
    color: #4a5a60;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-size: 1.2rem;
    color: var(--primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

/* Admin table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.admin-table th,
.admin-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin-table th {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.admin-table input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 100%;
    font-size: 0.9rem;
}

/* Run name input */
.run-name-section {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.run-name-section .form-group {
    flex: 1;
}

/* History */
.history-list {
    list-style: none;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.history-item:last-child {
    border-bottom: none;
}

.history-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: var(--radius);
    color: white;
    font-size: 0.9rem;
    z-index: 200;
    animation: slideIn 0.3s ease;
}

.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
/* The middle level: a recommendation rather than a failure. Green would read as
   "all clear" and red as "this run is broken"; neither is what a possible
   finding says. */
.toast-warn { background: var(--warning); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-cell-selector { flex-direction: column; }
    .sample-controls { flex-direction: column; }
    .allocation-table { font-size: 0.8rem; }
}