/*
 * RECF Grants — the app's own components, on top of the RECF Aurora theme.
 *
 * Rename this file to match recf-grants in _Layout.cshtml (e.g. wwwroot/css/recf-theme.css) and
 * load it AFTER recf-aurora.css. Aurora brings the palette, dark mode and chrome; this brings the
 * screens.
 *
 * THE ONE RULE: no component rule below names a colour. Everything paints with a semantic token
 * defined once in :root and redefined under [data-bs-theme="dark"]. That is the whole mechanism —
 * a new screen works in both themes for free, and forgetting is visible immediately rather than as
 * one unreadable panel discovered months later.
 *
 * BRAND COLOURS ARE FIXED IN BOTH THEMES. If the app mirrors its palette into PDF or Excel
 * exports, those values must be identical in light and dark: a PDF has no dark mode. Surfaces and
 * ink are the opposite — they exist to move.
 *
 * Everything below the "App components" marker is yours. Everything above it is the contract, and
 * is the same in every RECF app.
 */

:root {
    /* Brand. Measured from recf.org. Identical in both themes — see above. */
    --recf-navy: #1b365d;
    --recf-red: #d9272e;
    --recf-blue: #0075c9;
    --recf-blue-light: #049dd9;
    --recf-green: #42c24c;
    --recf-yellow: #f1b71c;

    --recf-font-body: "Lato", "Segoe UI", system-ui, sans-serif;
    --recf-font-heading: "Montserrat", "Segoe UI", system-ui, sans-serif;

    --recf-container: 1320px;

    /* Semantic surfaces and ink. Redefined for dark below; nothing else hardcodes a grey. */
    --recf-body: #212721;
    --recf-surface: #fff;
    --recf-surface-muted: #f7f7f7;
    --recf-surface-sunk: #ececec;
    --recf-line: #d9d9d8;
    --recf-ink-muted: #7d7c7a;
    --recf-ink-faint: #b2b1af;
    --recf-heading: #1b365d;

    /* A solid ground that always carries white text: table headers, primary buttons.
       DO NOT CONFUSE THIS WITH --recf-heading, which is INK and goes LIGHT in dark mode. Painting
       a table header with the ink token gives white text on near-white. */
    --recf-brand-surface: #1b365d;
    --recf-brand-surface-hover: #14294a;

    /* Accent tint behind a header strip or a selected row. */
    --recf-accent-wash: linear-gradient(180deg, #f3f8ff 0%, #e2ecfa 100%);
    --recf-accent-tint: #eef4fc;

    /* States. Readable on the ground they sit on, which is why they move with the theme even
       though the brand colours do not. */
    --recf-ok: #2f7d36;
    --recf-due: #a8161c;
    --recf-warn-bg: #fdf4e7;
    --recf-warn-bg-strong: #f9eddc;

    /* Bootstrap overrides, so stock components pick the brand up without being restyled. */
    --bs-primary: #1b365d;
    --bs-primary-rgb: 27, 54, 93;
    --bs-body-font-family: var(--recf-font-body);
}

/* Dark. ONLY the semantic tokens move — every component rule below is untouched by this block,
   which is the point of routing them through tokens in the first place. */
[data-bs-theme="dark"] {
    --recf-body: #e6e4e1;
    --recf-surface: #1a1d21;
    --recf-surface-muted: #23272d;
    --recf-surface-sunk: #2b3037;
    --recf-line: #3a4048;
    --recf-ink-muted: #9aa1ab;
    --recf-ink-faint: #6f7783;

    /* Navy headings vanish on a near-black ground, so headings take the violet accent that
       carries the dark theme across every RECF app. */
    --recf-heading: #c4b5fd;

    /* Deep violet rather than navy: navy is barely distinguishable from the dark ground, so a
       table header on it stops reading as a header at all. */
    --recf-brand-surface: #4c1d95;
    --recf-brand-surface-hover: #5b21b6;

    --recf-accent-wash: linear-gradient(180deg, #262232 0%, #1e1b28 100%);
    --recf-accent-tint: #2a2437;

    /* Lifted so they clear AA on the dark ground; the light values are too dim to read there. */
    --recf-ok: #4ade80;
    --recf-due: #f87171;
    --recf-warn-bg: rgba(240, 182, 92, .12);
    --recf-warn-bg-strong: rgba(240, 182, 92, .2);

    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
}

/* ---------- Type ----------
   16px base x 1.25 major-third scale, matching recf.org. recf.org itself sets an 18px body; these
   are dense internal tools, so the base is 16px to fit more rows on screen. */

body {
    font-family: var(--recf-font-body);
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .recf-heading {
    font-family: var(--recf-font-heading);
    font-weight: 600; /* recf.org uses 600, not bold */
    color: var(--recf-heading);
}

h1 { font-size: 3.052rem; }
h2 { font-size: 2.441rem; }
h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.container, .container-fluid.recf-container {
    max-width: var(--recf-container);
}

/* ---------- Header ----------
   The bar follows the theme rather than staying solid navy, which is what makes an app sit
   alongside the others instead of next to them. The brand is carried by the blue rule beneath it,
   the logo and the type — not by a block of colour that has to be fought in dark mode. Solid navy
   also forces white text, and white text on the light violet --recf-heading becomes in dark mode
   is unreadable. */

.recf-navbar {
    background-color: var(--bs-tertiary-bg);
    border-bottom: 3px solid var(--recf-blue);
}

.recf-navbar .navbar-brand {
    font-family: var(--recf-font-heading);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--recf-heading);
}

.recf-navbar .nav-link {
    font-family: var(--recf-font-heading);
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

.recf-navbar .nav-link:hover,
.recf-navbar .nav-link:focus,
.recf-navbar .nav-link.active {
    color: var(--bs-emphasis-color);
}

.recf-navbar .navbar-text {
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

/* No .brand-logo filter here. Aurora inverts the mark under the dark theme only, which is correct
   for a themed bar. A blanket invert is a white shape on a white bar in light mode. */

/* ---------- Buttons ---------- */

.btn {
    font-family: var(--recf-font-body);
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 9px;
    border-width: 1.6px;
    padding: .5rem 1rem;
}

.btn-primary {
    background-color: var(--recf-brand-surface);
    border-color: var(--recf-brand-surface);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--recf-brand-surface-hover);
    border-color: var(--recf-brand-surface-hover);
    color: #fff;
}

.btn-outline-primary {
    color: var(--recf-heading);
    border-color: var(--recf-heading);
}

.btn-outline-primary:hover {
    background-color: var(--recf-brand-surface);
    border-color: var(--recf-brand-surface);
    color: #fff;
}

/* ---------- Page furniture ---------- */

.recf-page-header {
    border-bottom: 1px solid var(--recf-surface-sunk);
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.recf-page-header h1 {
    font-size: 1.953rem;
    margin: 0;
}

.recf-page-header .recf-subtitle {
    color: var(--recf-ink-muted);
    font-size: .9375rem;
}

/* One paragraph saying what a screen is for. Capped at a readable measure. */
.recf-lede {
    max-width: 68ch;
    color: var(--recf-body);
    margin-bottom: 1.25rem;
}

/* A heading quieter than <h2>, so a page of sections does not read as several pages. */
.recf-summary {
    font-family: var(--recf-font-heading);
    font-size: .875rem;
    font-weight: 600;
    color: var(--recf-heading);
    cursor: pointer;
}

.recf-form-narrow { max-width: 34rem; }
.recf-form-wide { max-width: 52rem; }

/* An identifier inside a table row: monospace so columns line up and a 0 is not an O, but at body
   size. Anything meant to be read ALOUD across a room wants its own larger class. */
.recf-ref {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .875rem;
    letter-spacing: .01em;
}

/* ---------- Tables ---------- */

.recf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

/* Wide tables scroll inside this box rather than pushing the page sideways. It scrolls on BOTH
   axes deliberately: `overflow-x: auto` alone computes `overflow-y: auto` anyway, which makes the
   wrapper the scroll container and leaves `position: sticky; top: 0` on the header sticking to
   nothing. The explicit height is what makes the sticky header work. */
.recf-table-scroll {
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--recf-surface-sunk);
    border-radius: 4px;
}

.recf-table thead th {
    background-color: var(--recf-brand-surface);
    color: #fff;
    font-family: var(--recf-font-heading);
    font-size: .8125rem;
    font-weight: 600;
    text-align: left;
    padding: .5rem .625rem;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.recf-table tbody td {
    padding: .4rem .625rem;
    border-bottom: 1px solid var(--recf-surface-sunk);
    vertical-align: top;
}

/* Dates and codes read as one token; wrapping them mid-value costs more width than it saves.
   Names are the columns allowed to wrap. */
.recf-table .nowrap { white-space: nowrap; }

.recf-table tbody tr:nth-child(even) {
    background-color: var(--recf-surface-muted);
}

.recf-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.recf-table-empty {
    padding: 2rem;
    text-align: center;
    color: var(--recf-ink-muted);
}

/* ---------- States ----------
   Put these on a <span> INSIDE a cell, never on the <td>. Bootstrap paints cell colour through
   `.table > :not(caption) > * > *`, which outranks a single class — so a state class on the td
   renders body-coloured and the rule looks like it was never loaded. */

.recf-ok {
    color: var(--recf-ok);
    font-weight: 600;
}

.recf-due {
    color: var(--recf-due);
    font-weight: 600;
}

/* ---------- Filter bar ----------
   Tinted rather than solid navy: it sits directly above a navy table header, and two solid navy
   blocks stacked makes the page top-heavy. */

.recf-filter-bar {
    background: var(--recf-accent-wash);
    border: 1px solid rgba(27, 54, 93, .16);
    border-top: 3px solid var(--recf-navy);
    border-radius: 6px;
    padding: .875rem 1rem;
}

.recf-filter-bar .form-label {
    font-family: var(--recf-font-heading);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--recf-heading);
    margin-bottom: .15rem;
}

/* ---------- Footer ---------- */

footer.recf-footer {
    border-top: 1px solid var(--recf-surface-sunk);
    color: var(--recf-ink-muted);
    font-size: .875rem;
    padding: 1rem 0;
}

/* ====================================================================================
   App components — RECF Grants's own screens go below here.

   Paint with the tokens above and nothing else. If a screen needs a colour that is not
   up there, add a token rather than a hex value, and give it a dark value in the same
   edit — that is the discipline the whole file rests on.
   ==================================================================================== */

/* Attention amber lives alongside Aurora's ok/due pair. Grants has three deadline states, not two:
   settled, approaching and due, and the middle one carries most of the dashboards. */
:root {
    --grants-attention: #8a5a00;
    --grants-attention-bg: #fdf4e7;
    --grants-waiting: #5c6470;
}

[data-bs-theme="dark"] {
    --grants-attention: #f0b65c;
    --grants-attention-bg: rgba(240, 182, 92, .14);
    --grants-waiting: #9aa1ab;
}

/* ---------- Deadline states ----------
   Always rendered on a <span> inside a cell, never on the <td> - Bootstrap repaints cell colour
   through `.table > :not(caption) > * > *` and would silently win. Each carries a word as well as
   a colour, because colour alone is not a signal everybody receives. */

.state-settled { color: var(--recf-ok); font-weight: 600; }
.state-ontrack { color: var(--grants-waiting); }
.state-approaching { color: var(--grants-attention); font-weight: 600; }
.state-due { color: var(--recf-due); font-weight: 700; }

/* ---------- KPI tiles ----------
   A number and what it counts. Deliberately flat - the figure is the thing worth looking at. */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.kpi {
    background: var(--recf-surface-muted);
    border: 1px solid var(--recf-line);
    border-left: 3px solid var(--recf-brand-surface);
    border-radius: 6px;
    padding: .75rem .875rem;
}

.kpi-value {
    font-family: var(--recf-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--recf-heading);
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    font-size: .8125rem;
    color: var(--recf-ink-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.kpi.is-attention { border-left-color: var(--grants-attention); }
.kpi.is-due { border-left-color: var(--recf-due); }

/* ---------- Record cards ----------
   A package or an award: a heading, a value, and the criteria underneath. */

.grant-card {
    background: var(--recf-surface);
    border: 1px solid var(--recf-line);
    border-radius: 6px;
    padding: 1rem;
    height: 100%;
}

.grant-card h3 {
    font-size: 1.125rem;
    margin-bottom: .25rem;
}

.grant-card .grant-card-value {
    font-family: var(--recf-font-heading);
    font-weight: 600;
    color: var(--recf-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* A quiet tag for a criterion or a package type. */
.grant-tag {
    display: inline-block;
    background: var(--recf-accent-tint);
    color: var(--recf-heading);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    margin: 0 .25rem .25rem 0;
}

.grant-tag.is-attention {
    background: var(--grants-attention-bg);
    color: var(--grants-attention);
}

/* ---------- Record view tabs ---------- */

.record-tabs {
    border-bottom: 1px solid var(--recf-line);
    margin-bottom: 1.25rem;
}

.record-tabs .nav-link {
    font-family: var(--recf-font-heading);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--recf-ink-muted);
    border: none;
    border-bottom: 3px solid transparent;
}

.record-tabs .nav-link.active {
    color: var(--recf-heading);
    background: transparent;
    border-bottom-color: var(--recf-brand-surface);
}

/* ---------- Queue clock ----------
   The processing clock the shared vetting dashboard turns yellow then red. */

.queue-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Note thread ---------- */

.note {
    border-left: 2px solid var(--recf-line);
    padding: .25rem 0 .5rem .75rem;
    margin-bottom: .75rem;
}

.note-meta {
    font-size: .8125rem;
    color: var(--recf-ink-muted);
}

.note.is-communication { border-left-color: var(--recf-brand-surface); }

/* ---------- Apply wizard ----------
   A numbered strip rather than a bar: an applicant needs to know how many steps are left and which
   ones they can go back to, and a percentage tells them neither. */

.wizard-progress {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    list-style: none;
    padding: 0 0 .75rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--recf-line);
}

.wizard-step {
    font-family: var(--recf-font-heading);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.wizard-step a { text-decoration: none; }

.wizard-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .4rem;
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    background: var(--recf-surface-sunk);
    color: var(--recf-ink-muted);
}

.wizard-step.is-current { color: var(--recf-heading); }

.wizard-step.is-current .wizard-number {
    background: var(--recf-brand-surface);
    color: #fff;
}

.wizard-step.is-done { color: var(--recf-ink-muted); }

.wizard-step.is-done .wizard-number {
    background: var(--recf-accent-tint);
    color: var(--recf-heading);
}

/* Not reachable yet, and has to look it - otherwise people click and nothing happens. */
.wizard-step.is-ahead { color: var(--recf-ink-faint); }

/* ---------- Navbar at full role count ----------
   Aurora sets `white-space: normal; word-break: break-word` on .navbar-brand, which is right for a
   long app name on a narrow screen. Here it is not: a system administrator sees thirteen nav
   sections, the brand is squeezed as a flex item, and break-word then stacks it one letter per
   line. Pinning it keeps the wordmark on one line and makes the nav give up the space instead. */

.recf-navbar .navbar-brand {
    white-space: nowrap;
    word-break: normal;
    flex-shrink: 0;
}

/* Thirteen sections do not fit one row on a laptop, and the overflow pushed the sign-out link off
   the right edge. Wrapping to a second row keeps every item reachable; below the lg breakpoint
   Bootstrap collapses to the toggler and this does not apply. */
.recf-navbar .navbar-nav {
    flex-wrap: wrap;
    row-gap: .15rem;
}

/* The sign-in corner must not be what gets pushed out when the nav wraps. */
.recf-navbar .navbar-collapse > .navbar-nav:last-child {
    flex-shrink: 0;
}

/* ---------- Dashboard destination cards ----------
   A whole card is the target, not just its heading - a small link inside a large card is a smaller
   target than the card people actually aim at. */

a.section-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, transform .12s ease;
}

a.section-card:hover,
a.section-card:focus-visible {
    border-color: var(--recf-brand-surface);
    transform: translateY(-1px);
}

a.section-card h3 {
    font-size: 1.0625rem;
    margin-bottom: .25rem;
}

/* How many are waiting. Sized to be read at a glance across a row of cards. */
.section-card-count {
    font-family: var(--recf-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--recf-heading);
    font-variant-numeric: tabular-nums;
}

.section-card-count.is-attention { color: var(--grants-attention); }