/* =====================================================================
   BCF College of Nursing — Admission Application
   Local project overrides, layered on the Nova One v6 theme.

   RULE: style.css is the theme and is NEVER edited. Everything specific
   to this project lives here, and everything here is built from the
   theme's own CSS variables — no hard-coded colours. To rebrand the
   whole prototype, change --accent in one place below.

   Sections
     1. Brand tokens
     2. Public (applicant) shell — the second layout
     3. Step indicator
     4. Marks calculator
     5. Gate status — the strict policy, made visible
     6. Rank list
     7. Upload tiles
     8. Small helpers
   ===================================================================== */

/* ---------- 1. Brand tokens ----------
   Teal, as chosen. The exact value needed working out rather than
   copying, and the reasoning is worth keeping:

   The theme's own --mint (#16b8a6) and --emerald (#1eaa6d) both look
   right but FAIL WCAG AA as a button background — white text on them
   measures 2.49:1 and 2.99:1 against the 4.5:1 minimum. They are used
   in the theme for chart fills and badge text, never as a button
   background, which is why the theme gets away with them.

   --emerald has a second problem: it IS the theme's --success colour.
   Using it as the accent would make a primary button and a success
   badge the same colour, so "Save" and "Verified" would read alike.

   #0c766b keeps the teal family, measures 5.50:1 for white text in
   both light and dark mode, and stays clearly distinct from success
   and warning. Change it here and the whole prototype follows.        */
:root {
  --accent: #0c766b;          /* white text on this: 5.50:1 — AA pass */
  --accent-2: #14a294;        /* lighter partner, gradients only */
  --accent-soft: #e2f5f2;     /* accent-ink on this: 7.05:1 — AA pass */
  --accent-ink: #0a5b53;
  --violet: #14a294;          /* keeps the theme's gradients in the teal family */
}
[data-theme="dark"] {
  --accent-soft: #0c2b28;
}

/* ---------- 2. Public (applicant) shell ----------
   Applicants are NOT admin users. They have no login, they are usually
   on a phone, and they must never see a sidebar containing "Audit Logs".
   So the public pages use a clean, single-column shell built from the
   same tokens — the look is identical, the furniture is not.          */
.pub {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pub-top {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-brd);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.pub-top .brand-lg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15.5px;
}
.pub-top .brand-lg .mark {
  height: 34px;
  width: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.pub-wrap {
  width: min(94vw, 860px);
  margin: 0 auto;
  padding: 26px 0 90px;
  flex: 1;
}
.pub-wrap.narrow { width: min(94vw, 560px); }
.pub-foot {
  border-top: 1px solid var(--line);
  padding: 18px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- 3. Step indicator ---------- */
.steps {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.steps li {
  flex: 1 1 90px;
  font-size: 11.5px;
  color: var(--muted);
  padding-top: 9px;
  border-top: 3px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.steps li.done { color: var(--text-2); border-top-color: var(--accent-2); }
.steps li.now  { color: var(--accent-ink); font-weight: 600; border-top-color: var(--accent); }
[data-theme="dark"] .steps li.now { color: var(--accent-2); }

/* ---------- 4. Marks calculator ----------
   Shows the applicant their percentage BEFORE they submit, so they can
   check it against their marksheet. The number is display-only; the
   server always recalculates (BR-05.3).                               */
.calc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.calc .lbl { font-size: 12.5px; color: var(--text-2); }
.calc .pct {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc .pct.dim { color: var(--muted); }
.calc .sum { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 5. Gate status — the strict policy, made visible ----------
   Requirements 11 and 12 hinge on an admin never mistaking "held" for
   "released". These two states are given deliberately different colour,
   weight and iconography so they cannot be skim-read as the same thing. */
.gate {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.gate .ico { flex: 0 0 auto; margin-top: 1px; }

.gate.held     { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 34%, transparent); color: var(--warning); }
.gate.released { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.gate.refused  { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 30%, transparent);  color: var(--danger); }
/* Structural, not class-based: a later bulk rename of "body" classes
   silently broke the class-based version of this rule. Targeting the
   element structure means it cannot happen again. */
.gate > div:last-child { color: var(--text); }

/* A held row in a list needs to be obvious at a glance, not on inspection. */
tr.is-held td { background: color-mix(in srgb, var(--warning) 7%, transparent); }
tr.is-held td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

/* ---------- 6. Rank list ---------- */
.rank-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.rank-moved { color: var(--warning); }
tr.seat-line td {
  border-bottom: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
.seat-note {
  font-size: 11.5px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
[data-theme="dark"] .seat-note { color: var(--accent-2); }
.tie-flag { color: var(--warning); font-size: 11.5px; font-weight: 600; }

/* ---------- 7. Upload tiles ---------- */
.up-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.up-tile {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.up-tile:hover, .up-tile:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.up-tile .t { font-size: 13px; font-weight: 550; }
.up-tile .h { font-size: 11.5px; color: var(--muted); }
.up-tile.filled { border-style: solid; border-color: var(--success); background: var(--success-soft); }
.up-thumb {
  width: 62px; height: 62px; border-radius: 10px;
  background: var(--surface-2); object-fit: cover;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}

/* ---------- 8. Small helpers ---------- */
.stack > * + * { margin-top: 14px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.req-note { font-size: 12.5px; color: var(--text-2); }
.req-note .req { color: var(--danger); }
.nowrap { white-space: nowrap; }
.tabnum { font-variant-numeric: tabular-nums; }

/* Touch targets stay >= 44px on small screens (accessibility). */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .iconbtn { min-height: 44px; min-width: 44px; }
  .field input, .field select, .field textarea { min-height: 44px; }
  .calc .pct { font-size: 26px; }
}

/* ---------- 9. Table action columns ----------
   Three actions in a row overflowed the table on a 1440px screen during
   render testing. Actions stay on one line and the table scrolls instead
   of the buttons being clipped. */
.row-actions { white-space: nowrap; }
.row-actions .btn { flex: 0 0 auto; }
/* Give the table a floor width so a narrow viewport SCROLLS it (the theme's
   .table-wrap already handles overflow) instead of crushing the last column
   until the action buttons overlap the cell beside them. */
.table-wrap table { min-width: 860px; }

/* ---------- 10. Fixes found by rendering, not by reading ----------
   Both of these were invisible in the markup and obvious on screen. */

/* (a) Only the FIRST strong in a gate box is a headline. Applying
   display:block to every strong broke inline emphasis mid-sentence,
   stacking "84.17%" and "at or above" onto their own lines. */
.gate > div:last-child > strong { display: inline; margin-bottom: 0; }
.gate > div:last-child > strong:first-child { display: block; margin-bottom: 2px; }

/* (b) Modal internals. The theme's modal is h3 + content + .modal-foot;
   it has no header/footer elements, so those were removed rather than
   styled around. */
.modal-body { margin-top: 4px; }
.modal-body .field:last-child { margin-bottom: 0; }

/* ---------- 11. Badges never wrap ----------
   "Released by officer" broke onto three lines in a narrow table column
   and tripled the row height. Badges are labels, not paragraphs. */
.badge { white-space: nowrap; }

/* System rank folded into the same cell as the final rank: two columns of
   numbers side by side were hard to read and cost the width the row
   actions needed. An override now reads "3 ↑ / was 5" in one place. */
.rank-num .was { font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }

/* Only a row carrying its own recorded reason is an override (amber).
   A row that merely shifted because someone above it was moved shows
   "was 5" in muted grey — it did not have a decision made about it. */

/* ---------- 12. Table toolbar ----------
   Three faults, all mine, all visible only once rendered:

   (a) .filterbar is a GRID of repeat(auto-fit, minmax(160px, 1fr)) built
       for form fields. Putting chips in it made each chip a 160px grid
       cell, so four filters stacked into a vertical column.
       Chip groups now use .chips (flex + wrap), which is what it is for.

   (b) The theme wraps toolbar contents in .left. Without that wrapper,
       justify-content:space-between pushed the search hard left and the
       filters hard right, leaving a dead gap across the middle.

   (c) The theme has no .chip.active style at all, so the selected filter
       looked identical to the unselected ones. Added below.            */

.table-toolbar .left { flex: 1 1 auto; }
.table-toolbar .chips { margin-top: 0; }

/* Chips are filter toggles here, so they need a real pressed state. */
.chips .chip {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chips .chip:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.chips .chip[aria-pressed="true"],
.chips .chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
[data-theme="dark"] .chips .chip[aria-pressed="true"],
[data-theme="dark"] .chips .chip.active { color: #fff; }

/* The search field is the primary control in the toolbar; give it room
   to breathe on a wide screen instead of sitting at the theme's 220px. */
@media (min-width: 900px) {
  .table-toolbar .table-search input { width: 320px; }
}

/* Select-based filters sit inline beside the search rather than in a grid. */
.table-toolbar .filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------- 13. Alerts ----------
   The theme's .alert is display:flex and expects exactly two children:
   an icon and ONE <span>. Raw text and multiple <strong> elements each
   became their own flex column, so a sentence broke into three columns
   with "7 days" stranded in the middle. Every alert now wraps its body
   in a single span. This rule is the belt to that braces. */
.alert > span { flex: 1 1 auto; line-height: 1.55; }
.alert strong { font-weight: 650; }

/* ---------- 14. Segmented control ----------
   The theme's active segment is a white pill on a grey track — fine for
   a "7d / 30d / 90d" chart filter, too quiet for this. Quota decides
   which cut-off the applicant is judged against and which fee they pay,
   so the selected option is given the accent and must be unmistakable. */
.segmented button { min-height: 40px; }
.segmented button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.segmented button:not(.active):hover { color: var(--text); background: var(--surface); }
.segmented button:focus-visible { box-shadow: var(--ring); }