/* ============================================================
   Prizm Planner — "steel & circuit" design system (design/ds/)
   Tokens first; Bootstrap re-skinned through them. Semantic
   colours mean money states, never decoration; the accent is
   for interaction only (links, focus, selection, active nav).
   ============================================================ */
:root {
    --pz-ink: #16232B;
    --pz-muted: #5B707C;
    --pz-faint: #8FA0AA;
    --pz-bg: #F4F6F7;
    --pz-card: #FFFFFF;
    --pz-line: #DDE4E8;
    --pz-hair: #ECF1F3;
    --pz-brand-900: #0F1E26;
    --pz-brand-800: #16303C;
    --pz-brand-700: #1B3A4B;   /* primary — same as the quote PDF */
    --pz-brand-600: #27506A;
    --pz-accent: #3E92B8;
    --pz-accent-soft: #E3F0F6;
    --pz-silver: #C9D4DA;
    --pz-ok: #2E7D46;      --pz-ok-soft: #E2F2E7;
    --pz-warn: #B97E12;    --pz-warn-soft: #FCF3DC;
    --pz-danger: #B3372B;  --pz-danger-soft: #F9E5E2;
    --pz-info: #2C6E91;    --pz-info-soft: #E1EEF5;
    --pz-paid: #1E6B5A;    --pz-paid-soft: #DFF0EC;
    --pz-goodfaith: #7A5EA6; --pz-goodfaith-soft: #EFE9F7;
    /* Quoted and waiting on the client: further along than unassigned, not
       yet an order. Teal-green keeps it clear of the amber PORD chase, the
       red nothing-behind-it and the blue invoiced. */
    --pz-quoted: #0F766E;  --pz-quoted-soft: #DCF0EE;
    --pz-radius: 10px;
    --pz-shadow: 0 1px 2px rgba(15, 30, 38, 0.05);
}

html, body {
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--pz-bg);
    color: var(--pz-ink);
}

h1 { font-size: 1.45rem; font-weight: 650; color: var(--pz-brand-700); letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 600; color: var(--pz-brand-700); }
h3, h4, h5 { color: var(--pz-brand-700); font-weight: 600; }
h1:focus { outline: none; }

a, .btn-link {
    color: var(--pz-accent);
    text-decoration: none;
}
a:hover, .btn-link:hover { color: var(--pz-brand-600); text-decoration: underline; }

.text-muted { color: var(--pz-muted) !important; }

/* PORD numbers & codes render as mono chips everywhere */
code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.86em;
    font-weight: 650;
    color: var(--pz-brand-700);
    background: #EFF3F5;
    border-radius: 5px;
    padding: 1px 6px;
}

/* ---------- buttons ---------- */
.btn { --bs-btn-border-radius: 8px; font-weight: 600; }
.btn-sm { --bs-btn-border-radius: 7px; }
.btn-primary {
    --bs-btn-bg: var(--pz-brand-700);
    --bs-btn-border-color: var(--pz-brand-700);
    --bs-btn-hover-bg: var(--pz-brand-600);
    --bs-btn-hover-border-color: var(--pz-brand-600);
    --bs-btn-active-bg: var(--pz-brand-800);
    --bs-btn-active-border-color: var(--pz-brand-800);
    --bs-btn-disabled-bg: var(--pz-brand-700);
    --bs-btn-disabled-border-color: var(--pz-brand-700);
}
.btn-success {
    --bs-btn-bg: var(--pz-ok);
    --bs-btn-border-color: var(--pz-ok);
    --bs-btn-hover-bg: #256A3B;
    --bs-btn-hover-border-color: #256A3B;
    --bs-btn-active-bg: #1F5B33;
    --bs-btn-active-border-color: #1F5B33;
    --bs-btn-disabled-bg: var(--pz-ok);
    --bs-btn-disabled-border-color: var(--pz-ok);
}
.btn-outline-primary {
    --bs-btn-color: var(--pz-brand-700);
    --bs-btn-border-color: var(--pz-line);
    --bs-btn-hover-color: var(--pz-accent);
    --bs-btn-hover-bg: var(--pz-card);
    --bs-btn-hover-border-color: var(--pz-accent);
    --bs-btn-active-bg: var(--pz-accent-soft);
    --bs-btn-active-color: var(--pz-brand-700);
    --bs-btn-active-border-color: var(--pz-accent);
}
.btn-outline-secondary {
    --bs-btn-color: var(--pz-muted);
    --bs-btn-border-color: var(--pz-line);
    --bs-btn-hover-color: var(--pz-brand-700);
    --bs-btn-hover-bg: var(--pz-hair);
    --bs-btn-hover-border-color: var(--pz-line);
    --bs-btn-active-bg: var(--pz-hair);
    --bs-btn-active-color: var(--pz-brand-700);
    --bs-btn-active-border-color: var(--pz-line);
}
.btn-outline-danger {
    --bs-btn-color: var(--pz-danger);
    --bs-btn-border-color: #E8C7C3;
    --bs-btn-hover-color: var(--pz-danger);
    --bs-btn-hover-bg: var(--pz-danger-soft);
    --bs-btn-hover-border-color: #E8C7C3;
    --bs-btn-active-bg: var(--pz-danger-soft);
    --bs-btn-active-color: var(--pz-danger);
    --bs-btn-active-border-color: var(--pz-danger);
}
.btn-danger {
    --bs-btn-bg: var(--pz-danger);
    --bs-btn-border-color: var(--pz-danger);
    --bs-btn-hover-bg: #9C2F25;
    --bs-btn-hover-border-color: #9C2F25;
    --bs-btn-active-bg: #872A21;
    --bs-btn-active-border-color: #872A21;
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(62, 146, 184, 0.35);
    border-color: var(--pz-accent);
}

/* ---------- cards, alerts ---------- */
.card {
    --bs-card-border-color: var(--pz-line);
    --bs-card-border-radius: var(--pz-radius);
    box-shadow: var(--pz-shadow);
}
.alert { --bs-alert-border-radius: var(--pz-radius); }
.alert-success { --bs-alert-bg: var(--pz-ok-soft); --bs-alert-color: var(--pz-ok); --bs-alert-border-color: #CBE6D3; }
.alert-warning { --bs-alert-bg: var(--pz-warn-soft); --bs-alert-color: #8A5E0D; --bs-alert-border-color: #EFDCB0; }
.alert-danger { --bs-alert-bg: var(--pz-danger-soft); --bs-alert-color: var(--pz-danger); --bs-alert-border-color: #ECC8C3; }
.alert-info { --bs-alert-bg: var(--pz-info-soft); --bs-alert-color: var(--pz-info); --bs-alert-border-color: #C4DCEA; }

/* ---------- tables ---------- */
.table {
    --bs-table-hover-bg: #F6FAFC;
    font-variant-numeric: tabular-nums;
}
.table thead th {
    background: #F8FAFB;
    color: var(--pz-muted);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid var(--pz-line);
    white-space: nowrap;
}
.table tbody td { border-color: var(--pz-hair); }
.table-danger { --bs-table-bg: var(--pz-danger-soft); }
.table-warning { --bs-table-bg: var(--pz-warn-soft); }

/* ---------- badges: the status vocabulary (soft pill look) ---------- */
.badge {
    --bs-badge-border-radius: 99px;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 0.6em;
    --bs-badge-padding-y: 0.32em;
}
.text-bg-success { background-color: var(--pz-ok-soft) !important; color: var(--pz-ok) !important; }
.text-bg-warning { background-color: var(--pz-warn-soft) !important; color: var(--pz-warn) !important; }
.text-bg-danger  { background-color: var(--pz-danger) !important; color: #fff !important; }
.text-bg-info    { background-color: var(--pz-info-soft) !important; color: var(--pz-info) !important; }
.text-bg-secondary { background-color: #EDF1F3 !important; color: var(--pz-muted) !important; }
.text-bg-light   { background-color: var(--pz-card) !important; color: var(--pz-muted) !important; border: 1px solid var(--pz-line); }

/* ---------- forms ---------- */
.form-control, .form-select {
    border-color: var(--pz-line);
    border-radius: 8px;
    color: var(--pz-ink);
}
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--pz-muted); }

.content { padding-top: 1.1rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--pz-ok); }
.invalid { outline: 1px solid var(--pz-danger); }
.validation-message { color: var(--pz-danger); }

.blazor-error-boundary {
    background: var(--pz-danger);
    padding: 1rem;
    color: white;
    border-radius: var(--pz-radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: var(--pz-faint); }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}