/* ProPivotal brand palette.
   navy #081F2C  lime #C4D600 (#5E6B00 where text must stay legible)
   deep purple #280071  purple #685BC7  light lavender #CBD3EB
   Typography is Work Sans. Coral/orange is not part of the palette. */

:root {
    --ground: #F8F8FB;
    --surface: #FFFFFF;
    --ink: #081F2C;
    --ink-muted: #5C6675;
    --ink-faint: #8A93A1;
    --border: #E4E4EF;
    --border-strong: #CBD3EB;
    --accent: #685BC7;
    --accent-deep: #280071;
    --accent-wash: #F0EEFA;
    --lime: #5E6B00;
    --lime-rule: #C4D600;
    --danger: #8A1F1F;
    --font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---- header ----
   Co-brand lockup: ProPivotal first, a hairline rule, then the client mark.
   Vendor left of client is the usual order for a portal one company runs for
   another, and the rule keeps the two marks from reading as one logo.
   Heights are fixed and widths left auto so neither artwork is distorted when
   the client supplies a file of a different aspect ratio. */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.lockup { display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; text-decoration: none; }
.brand-mark { height: 24px; width: auto; display: block; }
.lockup-rule {
    width: 1px;
    height: 26px;
    background: var(--border-strong);
}
.client-mark { height: 30px; width: auto; display: block; }
.client-wordmark {
    color: var(--ink-muted);
    font-weight: 600;
    letter-spacing: .01em;
    max-width: 22ch;
    line-height: 1.25;
}
.brand-app {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.nav { display: flex; gap: 18px; margin-left: 8px; }
.nav a { color: var(--ink-muted); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--accent); text-decoration: underline; }
.signout { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.signout .who { color: var(--ink-faint); }

/* Narrow screens: drop the app label and the rule rather than wrapping the
   header into three ragged lines. The two marks stay. */
@media (max-width: 640px) {
    .topbar { gap: 12px; }
    .brand-app { display: none; }
    .lockup-rule { display: none; }
    .brand-mark { height: 20px; }
    .client-mark { height: 24px; }
}

/* ---- layout ---- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 32px 24px 80px; }
.foot {
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    font-size: 12.5px;
    color: var(--ink-faint);
}

h1 {
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -.018em;
    margin: 0 0 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--lime-rule);
    display: inline-block;
}
h2 { font-size: 20px; font-weight: 650; margin: 32px 0 12px; }
p { max-width: 68ch; margin: 0 0 14px; }
.lede { color: var(--ink-muted); }
.scaffold-note {
    background: var(--accent-wash);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    font-size: 14.5px;
}
a { color: var(--accent); text-underline-offset: 2px; }
code {
    font-family: Consolas, "Courier New", monospace;
    font-size: .9em;
    background: var(--ground);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
}

/* ---- forms ---- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], select, textarea {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.required::after { content: " *"; color: var(--accent-deep); }
.hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.validation { font-size: 13px; color: var(--danger); margin-top: 4px; font-weight: 600; }

/* A field the submit check rejected. The banner names it; this is so you can
   find it without reading a forty-field form twice. */
.field.is-missing > label { color: var(--danger); }
.field.is-missing input,
.field.is-missing select,
.field.is-missing textarea {
    border-color: var(--danger);
    background: #FDF6F6;
}
.field.is-missing > label::before {
    content: "\25B8 ";
    color: var(--danger);
}

/* A warning, not a refusal. Deliberately the brand's own lime-derived olive
   rather than a red: the user can still save, and an error colour would say
   otherwise. Coral is not in the palette. */
.field.is-warned > label { color: var(--lime); }
.field.is-warned input,
.field.is-warned select {
    border-color: var(--lime);
    background: #FCFCF3;
}
.live-warn { color: var(--lime); font-weight: 600; }

.notice.warn {
    border: 1px solid var(--lime-rule);
    border-left: 4px solid var(--lime-rule);
    background: #FCFCF3;
    padding: 12px 16px;
    border-radius: 3px;
    margin-bottom: 18px;
    font-size: 14px;
}
.notice.warn strong { color: var(--lime); }
.notice.warn ul { margin: 6px 0 0; padding-left: 20px; }
.notice.warn li { margin: 2px 0; }

/* Text in a type-ahead that was never resolved to a choice. */
.typeahead.unresolved input[type="text"] {
    border-color: var(--danger);
    background: #FDF6F6;
}

button, .button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 3px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #FFFFFF;
    cursor: pointer;
}
button.secondary, .button.secondary {
    background: var(--surface);
    color: var(--accent);
}
button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---- tables ---- */
.grid-scroll { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
th, td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--border); }
thead th {
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--ground);
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* ---- status pills ---- */
.pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    color: var(--ink-muted);
    background: var(--ground);
    white-space: nowrap;
}
.pill.draft { color: var(--ink-faint); }
.pill.pending { color: var(--accent-deep); background: var(--accent-wash); border-color: var(--accent); }
.pill.approved { color: var(--lime); border-color: var(--lime-rule); background: #FBFCEA; }
.pill.declined { color: #FFFFFF; background: var(--accent-deep); border-color: var(--accent-deep); }
.pill.cancelled { text-decoration: line-through; }

@media (max-width: 620px) {
    .nav { margin-left: 0; }
    .wrap { padding: 20px 16px 60px; }
}

/* ---------------------------------------------------------------------------
   Requisition list, form and detail. Added with the requisition build pass.
   --------------------------------------------------------------------------- */

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.head-actions { display: flex; gap: .5rem; }

.button {
    display: inline-block; padding: .5rem .9rem; border-radius: 4px;
    background: #12395c; color: #fff; text-decoration: none; font-size: .95rem;
    border: 1px solid #12395c; cursor: pointer;
}
.button.quiet, button.quiet { background: #fff; color: #12395c; }
button.danger { background: var(--danger); border-color: var(--danger); }

.tabs { display: flex; gap: .25rem; margin: 1rem 0 .5rem; border-bottom: 1px solid #d5dbe1; }
.tabs a {
    padding: .5rem .85rem; text-decoration: none; color: #37474f;
    border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0;
}
.tabs a.on { background: #fff; border-color: #d5dbe1; color: #12395c; font-weight: 600; }
.tabs .count {
    display: inline-block; margin-left: .35rem; padding: 0 .4rem;
    border-radius: 10px; background: #8a1f1f; color: #fff; font-size: .8rem;
}

.filter { display: flex; gap: .5rem; margin: .75rem 0 1rem; }
.filter input[type="search"] { flex: 1 1 22rem; max-width: 30rem; }

table.grid { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.grid th, table.grid td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #e3e8ec; vertical-align: top; }
table.grid th { background: #f4f6f8; font-weight: 600; white-space: nowrap; }
table.grid tr.needs-me { background: #fffaf0; }
table.grid.compact td, table.grid.compact th { padding: .35rem .5rem; font-size: .9rem; }

.pill.status-1 { background: #e6e9ec; color: #37474f; }   /* Draft */
.pill.status-2 { background: #fdf0d5; color: #7a5200; }   /* Pending */
.pill.status-3 { background: #dff0e2; color: #1d5b2c; }   /* Approved */
.pill.status-4 { background: #f8dede; color: #8a1f1f; }   /* Declined */
.pill.status-5 { background: #e6e9ec; color: #6b7a83; }   /* Cancelled */

.empty { color: #6b7a83; font-style: italic; margin: 2rem 0; }

.req-form fieldset { border: 1px solid #d5dbe1; border-radius: 6px; padding: 1rem 1.1rem; margin: 0 0 1.25rem; }
.req-form legend { padding: 0 .4rem; font-weight: 600; color: #12395c; }
.req-form .actions { display: flex; gap: .6rem; margin-bottom: 2rem; }

.typeahead { position: relative; }
.typeahead .suggestions {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
    margin: 0; padding: 0; list-style: none; max-height: 16rem; overflow-y: auto;
    background: #fff; border: 1px solid #b9c3cb; border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 14px rgba(0,0,0,.09);
}
.typeahead .suggestions li { padding: .4rem .6rem; cursor: pointer; display: flex; gap: .5rem; align-items: baseline; }
.typeahead .suggestions li:hover, .typeahead .suggestions li.on { background: #eef4f9; }
.sug-main { font-weight: 600; }
.sug-detail { color: #6b7a83; font-size: .88rem; }

.notice { border-radius: 6px; padding: .75rem 1rem; margin: 1rem 0; border: 1px solid; }
.notice.ok { background: #f1f8f2; border-color: #bcd9c2; }
.notice.declined { background: #fdf3f3; border-color: #e3b9b9; }
.notice p { margin: .4rem 0 0; }

dl.detail {
    display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem;
    margin: 1.25rem 0; align-items: baseline;
}
dl.detail dt { color: #6b7a83; font-size: .9rem; }
dl.detail dd { margin: 0; }

.longtext { white-space: pre-wrap; max-width: 60rem; }

.decide { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.decide form { flex: 1 1 22rem; border: 1px solid #d5dbe1; border-radius: 6px; padding: .9rem 1rem; }

/* ---- administration ----
   The admin screens reuse .grid, .tabs, .filter and .pill from the requisition
   pages. What is added here is the card row on the landing page, the inline
   set-and-save controls in the cost-code grid, and the mail queue. */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px 18px;
}
.card h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.card .button { margin-top: 12px; }

table.mini { border-collapse: collapse; font-size: 14px; margin: 0 0 10px; }
table.mini th {
    text-align: left;
    font-weight: 500;
    color: var(--ink-muted);
    padding: 3px 14px 3px 0;
    white-space: nowrap;
}
table.mini td { padding: 3px 0; }

ul.flags { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-muted); }
ul.flags li { margin: 2px 0; }

.warn { color: var(--accent-deep); font-weight: 600; }
.muted { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
tr.dim td { opacity: .55; }

.pill.ok   { background: var(--accent-wash); color: var(--accent-deep); }
.pill.warn { background: #FBEFEF; color: var(--accent-deep); }

/* Set-and-save inside a grid cell. Kept on one line so the row height does not
   jump between the read and edit states. */
.inline-set { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline-set select { max-width: 260px; }

label.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
label.check input { width: auto; }

.button.ghost, button.ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-strong);
}
.button.ghost:hover, button.ghost:hover { background: var(--accent-wash); }

.mailrow {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 8px;
}
.mailrow summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mailrow[open] { border-color: var(--border-strong); }
.mailbody {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--ground);
    border: 1px solid var(--border);
    padding: 10px 12px;
    max-height: 320px;
    overflow: auto;
}

/* ---- test mode ----
   Deliberately loud and deliberately not in the brand palette's quiet register.
   The failure this guards against is somebody not noticing the portal is
   swallowing client email, so subtlety would be the bug. */
.testbar {
    background: var(--accent-deep);
    color: #FFFFFF;
    padding: 9px 24px;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
}
.testbar strong { letter-spacing: .08em; text-transform: uppercase; }
.testbar a { color: #FFFFFF; margin-left: 10px; text-underline-offset: 3px; }

.state-on, .state-off {
    border-radius: 6px;
    padding: 14px 18px;
    margin: 20px 0;
}
.state-on {
    background: var(--accent-wash);
    border: 2px solid var(--accent-deep);
}
.state-off {
    background: var(--surface);
    border: 1px solid var(--border);
}
.state-on h2, .state-off h2 {
    margin: 0 0 6px;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.state-on h2 { color: var(--accent-deep); }
.state-off h2 { color: var(--ink-muted); }
.state-on p, .state-off p { margin: 0 0 6px; max-width: none; }