/* =====================================================================
   BCF Nursing — the small amount of CSS Nova One does not ship.

   Nova One is an ERP admin template: it has no public-facing page shell
   and no multi-step form. Everything below is layout only, built from
   Nova One's own variables so nothing drifts from the template palette.
   NO colours are hardcoded and no template rule is overridden.

   Load order: style.css (Nova One, untouched) then this file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. [hidden] must actually hide

   A class-level `display` (.btn is inline-flex, .calc is flex) outranks the
   browser's built-in [hidden] rule, so anything the wizard hides needs this.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   1. Public shell — header + centred content + footer, no sidebar
   --------------------------------------------------------------------- */
.public { display: flex; flex-direction: column; min-height: 100vh; }

.public .topbar { justify-content: space-between; }
.public .brand-row { display: flex; align-items: center; gap: 11px; font-weight: 600; }
.public .brand-row .mark {
    height: 36px; width: 36px; border-radius: 11px;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; flex: none;
}
.public .brand-row .name { font-size: 15px; line-height: 1.25; }
.public .brand-row .sub { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.public .topbar .contact { font-size: 12.5px; color: var(--text-2); text-align: right; }

.public-wrap { width: 100%; max-width: 880px; margin: 0 auto; }
.public-wrap.narrow { max-width: 560px; }

/* ---------------------------------------------------------------------
   2. Multi-step wizard
   --------------------------------------------------------------------- */
.stepper { margin-bottom: 18px; position: sticky; top: 76px; z-index: 20; }
.stepper .pad { padding: 14px 18px; }

.stepper-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.stepper-head .now { font-size: 13.5px; font-weight: 600; color: var(--text); }
.stepper-head .count { font-size: 12px; color: var(--muted); }

.progress-track {
    height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden;
}
.progress-fill {
    height: 100%; width: 0; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent), var(--violet));
    transition: width .35s var(--ease);
}

.step-dots { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.step-dot {
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: 12px; font-weight: 500;
    padding: 5px 12px 5px 6px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface);
    color: var(--text-2); cursor: pointer;
}
.step-dot:hover { border-color: var(--accent); color: var(--text); }
.step-dot .n {
    height: 20px; width: 20px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    background: var(--surface-2); color: var(--text-2);
}
.step-dot[aria-current="step"] {
    border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
}
.step-dot[aria-current="step"] .n { background: var(--accent); color: #fff; }
.step-dot.done .n { background: var(--success-soft); color: var(--success); }
.step-dot.done .n span { display: none; }
.step-dot.done .n::after { content: '\2713'; }
.step-dot.invalid { border-color: var(--danger); color: var(--danger); }
.step-dot.invalid .n { background: var(--danger); color: #fff; }

.wizard-nav {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 16px 20px; border-top: 1px solid var(--line);
}
.wizard-nav .spacer { margin-left: auto; }

/* Section heading inside the form card */
.step-sec { padding: 22px 20px; }
.step-sec + .step-sec { border-top: 1px solid var(--line); }
.step-sec > h3 { font-size: 16px; margin-bottom: 4px; }
.step-sec > .sec-note { font-size: 13px; color: var(--text-2); margin: 0 0 18px; }

/* ---------------------------------------------------------------------
   3. Pre-flight panel
   --------------------------------------------------------------------- */
.prep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.prep .pad { padding: 14px 16px; }
.prep strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.prep span { font-size: 12.5px; color: var(--text-2); }

/* ---------------------------------------------------------------------
   4. Live cutoff calculation
   --------------------------------------------------------------------- */
.calc {
    display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
    margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff;
}
.calc > div { display: flex; flex-direction: column; }
.calc span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 600; }
.calc strong { font-size: 17px; font-weight: 600; }
.calc .calc-main { margin-left: auto; text-align: right; }
.calc .calc-main strong { font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }

.marks-box {
    margin-top: 18px; padding: 18px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.marks-note { margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.marks-note strong { color: var(--text); }

/* ---------------------------------------------------------------------
   5. Certificate rows
   --------------------------------------------------------------------- */
.doc-row {
    display: grid; grid-template-columns: 250px 1fr auto; gap: 12px;
    align-items: start; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); margin-bottom: 10px;
}
.doc-row .field { margin: 0; }

/* ---------------------------------------------------------------------
   6. Result pages
   --------------------------------------------------------------------- */
.result { text-align: center; padding: 44px 32px; }
.result-icon {
    height: 64px; width: 64px; margin: 0 auto 20px;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 27px; background: var(--success-soft); color: var(--success);
}
.result-icon.warn { background: var(--warning-soft); color: var(--warning); }
.result-icon.bad  { background: var(--danger-soft);  color: var(--danger); }
.result h1 { font-size: 23px; margin-bottom: 8px; }

.app-no {
    display: inline-block; margin: 18px 0;
    padding: 12px 26px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent-ink);
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
    font-size: 19px; font-weight: 700; letter-spacing: .04em;
}

.timeline { counter-reset: tl; padding: 0; text-align: left; max-width: 440px; margin: 24px auto 0; }
.timeline li { position: relative; padding: 0 0 20px 38px; list-style: none; font-size: 13.5px; color: var(--text-2); }
.timeline li::before {
    content: counter(tl); counter-increment: tl;
    position: absolute; left: 0; top: 0; height: 26px; width: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
    background: var(--accent-soft); color: var(--accent-ink);
}
.timeline li::after { content: ''; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline strong { display: block; color: var(--text); }

/* ---------------------------------------------------------------------
   7. Detail view
   --------------------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }

dl.kv { margin: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px 16px; font-size: 13.5px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }

.rule-box { padding: 16px 18px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 18px; border: 1px solid; }
.rule-box.auto   { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--text); }
.rule-box.manual { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 25%, transparent); color: var(--text); }
/* Two more tones, added rather than folded into the two above so the existing
   pair keep behaving exactly as they did. The box now reports where an
   application IS, and "in motion" and "finished badly" are not the same thing
   as "waiting for you" — amber on a finished record trains the office to
   ignore amber. Both colours come from tokens that already have a dark-mode
   value, so nothing new is needed for the dark theme. */
.rule-box.wait   { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text); }
.rule-box.stop   { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--text); }
.rule-box strong.head { display: block; margin-bottom: 4px; font-size: 15px; }

.pay-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 14px; }
.pay-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* ---------------------------------------------------------------------
   8. Utilities the template lacks
   --------------------------------------------------------------------- */
.skip-link {
    position: absolute; left: 12px; top: -100px; z-index: 100;
    background: var(--surface); color: var(--text);
    padding: 12px 20px; border-radius: var(--radius-xs);
    box-shadow: var(--shadow-lift); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* .sr-only and .divider are already defined by Nova One — not repeated here. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nowrap { white-space: nowrap; }
.mirrored { opacity: .62; }

/* ---------------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .prep { grid-template-columns: 1fr; gap: 8px; }
    .doc-row { grid-template-columns: 1fr; }
    .calc { gap: 14px; }
    .calc .calc-main { margin-left: 0; width: 100%; text-align: left; border-top: 1px solid rgba(255,255,255,.22); padding-top: 12px; }
    dl.kv { grid-template-columns: 1fr; gap: 0; }
    dl.kv dt { margin-top: 12px; }
    dl.kv dd { margin-bottom: 2px; }
    .stepper { top: 68px; }
    .step-dots { display: none; }
    .wizard-nav .btn { flex: 1 1 auto; }
    .result { padding: 32px 18px; }
    .public .topbar .contact { display: none; }
    .step-sec { padding: 18px 16px; }
}

@media print {
    .topbar, .sidebar, .footer, .wizard-nav, .stepper, .filterbar, .table-toolbar, .btn { display: none !important; }
    .card { box-shadow: none; }

    /* Anything the office needs on screen but must not appear on paper.
       Added rather than folded into the list above, so the next thing that
       must be kept off a printout is one word in the markup and not another
       edit to a shared selector.

       The first user of it is the qualification box on the application page.
       It quotes the category threshold, and that figure is administrative:
       the printed application form leaves it out on purpose, and a sheet run
       off from the browser was the one route by which it still reached
       paper that an applicant might be handed. */
    .no-print { display: none !important; }
}

/* ---------------------------------------------------------------------
   10. KPI row

   Nova One's .bento is a fixed 4-column grid, so six equal tiles wrap to
   4 + 2 and leave a gap. This is a 6-up variant using the same .card /
   .kpi components — no visual change to the tiles themselves.
   --------------------------------------------------------------------- */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi-row .pad { padding: 14px 16px; }
.kpi-row .kpi .value { font-size: 24px; margin-top: 4px; }
.kpi-row .kpi .label { font-size: 12px; }
@media (max-width: 1200px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* Status badges must not wrap a table row into three lines */
table .badge { white-space: nowrap; }

/* ---------------------------------------------------------------------
   15. "Never emailed"

   A crossed-out envelope beside the address in Registrations and
   Applications. Muted rather than alarming: it is a deliberate setting,
   not a fault — but it has to be visible, because somebody who does not
   see it will spend a morning waiting for a reply to an email that was
   never sent.
   --------------------------------------------------------------------- */
.no-mail {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: 4px;
    color: var(--warning);
}
.no-mail svg { display: block; }