/* =====================================================================
   BCF Physiotherapy — 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; }

/* ---------------------------------------------------------------------
   11. Course chooser  (public: /apply)

   Added when the college began running two programmes. The chooser is the
   first page an applicant sees and its whole job is a comparison, so the
   cards are equal-width and the same height whatever their content — the
   eye should be able to run down "fee", "seats", "closes" across both
   without the rows drifting out of line.

   auto-fit rather than a fixed column count, so a third course wraps to a
   second row on its own instead of squeezing three cards into the width of
   two. minmax's floor is 280px, below which the key/value rows start to
   wrap and the comparison stops working.
   --------------------------------------------------------------------- */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Cards stretch to the tallest, and the primary action sits on the bottom
   edge of every one of them rather than wherever its own text happens to
   end — two Apply buttons at different heights read as two different kinds
   of button. */
.course-card { display: flex; }
.course-card .pad { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.course-card .kv { margin-top: auto; }
.course-card dl.kv + a,
.course-card dl.kv + button { margin-top: 4px; }

/* A closed course is dimmed but NOT hidden: an applicant who was told the
   intake was open needs to see that it has closed. Absence would leave them
   wondering whether they are on the right site. Kept above the contrast
   floor so the text is still readable rather than decorative. */
.course-card.is-closed { opacity: .72; }
.course-card.is-closed .badge { background: var(--surface-2); color: var(--muted); }

@media (max-width: 560px) {
    .course-grid { grid-template-columns: 1fr; }
    .course-card .pad { padding: 16px; }
}

/* ---------------------------------------------------------------------
   12. Course tabs  (admin: Registrations, Applications, Rank List)

   The office runs two admission processes out of one set of screens, so
   every list needs to say which one is in view. Tabs rather than a
   dropdown: the current course is readable without opening anything, the
   others are one click away, and each carries its own count so "is there
   anything in MPT today" is answered without navigating.

   Deliberately quiet — a bottom-edge marker on the active tab and nothing
   else. These sit directly above the KPI tiles, and two loud rows of
   controls stacked on each other leave nowhere for the eye to land.
   --------------------------------------------------------------------- */
.course-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.course-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    /* Pull the tab's own border down onto the container's, so the active
       marker replaces the hairline rather than sitting above it. */
    margin-bottom: -1px;
    white-space: nowrap;
}

.course-tab:hover { color: var(--text-2); }

.course-tab.active {
    color: var(--accent);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

/* The count. Rendered as a chip so it reads as a quantity attached to the
   tab rather than as part of the course name. */
.course-tab .n {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.course-tab.active .n { background: var(--accent); color: #fff; }

@media (max-width: 640px) {
    .course-tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .course-tab { padding: 9px 11px; font-size: 13px; }
}

/* One course open, one card. Capped and centred instead of stretched across
   the full width: at ~840px the key and its value sit at opposite ends of the
   row, and "Application fee ......... ₹1,000" is measurably harder to read
   than the same pair at the width a card has when it has a sibling. 520px is
   that width on a 1280px viewport, so the single-card page and the two-card
   page present a card of the same size. */
.course-grid--single {
    grid-template-columns: minmax(280px, 520px);
    justify-content: center;
}

/* ---------------------------------------------------------------------
   13. kv-pair — a label/value list that hugs its value

   dl.kv defaults to a fixed 190px label column, which is right inside a wide
   admin panel and wrong inside a narrow card: the value ends up floating a
   hand-span from its label. kv-pair lets the label take what it needs and
   pushes the value to the right edge instead.

   THIS IS A CLASS, NOT AN INLINE STYLE, and that is the whole point. It was
   written inline first, and an inline grid-template-columns beats a
   stylesheet — including the mobile rule below, which stacks these lists into
   label-above-value. The result was a card that looked correct on a desktop
   and, on a phone, squeezed "10 September 2026, 5:00 pm" into a column too
   narrow for it while its label drifted out of line. A rule that cannot be
   overridden by the responsive rule that follows it is a rule that will be
   wrong on half the devices that see it.
   --------------------------------------------------------------------- */
dl.kv.kv-pair { grid-template-columns: 1fr auto; }
dl.kv.kv-pair dd { text-align: right; }

@media (max-width: 640px) {
    /* Stack, like every other kv list does at this width. The right-alignment
       goes with the second column — a value aligned right under its own label
       reads as belonging to the row beneath it. */
    dl.kv.kv-pair { grid-template-columns: 1fr; }
    dl.kv.kv-pair dd { text-align: left; }
}