@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/jetbrains-mono-600.woff2") format("woff2"); }

/* DFS identity: navy / blue / green pixel tiles on a light grid, square corners. */
:root {
  --dfs-navy: #22275e;
  --dfs-blue: #4565b2;
  --dfs-blue-dark: #34508f;
  --dfs-blue-light: #e9eef8;
  --dfs-green: #6cbf66;
  --dfs-green-dark: #2d7d35;
  --dfs-bg: #f7f8fb;
  --dfs-grid: #e8ebf2;
  --dfs-ink: #14172f;
  --dfs-muted: #626984;
  --dfs-border: #dde1ea;
  --font-sans: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sidebar-w: 248px;
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--dfs-ink);
  --bs-body-bg: var(--dfs-bg);
  --bs-primary: var(--dfs-blue);
  --bs-primary-rgb: 69, 101, 178;
  --bs-link-color: var(--dfs-blue);
  --bs-link-color-rgb: 69, 101, 178;
  --bs-link-hover-color: var(--dfs-navy);
  --bs-link-hover-color-rgb: 34, 39, 94;
  --bs-border-color: var(--dfs-border);
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-pill: 0;
  --bs-font-monospace: var(--font-mono);
}
body {
  font-size: .95rem;
  background-color: var(--dfs-bg);
  background-image: linear-gradient(var(--dfs-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dfs-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
h1, h2, h3, h4, h5, h6, .page-title { font-family: var(--font-sans); color: var(--dfs-ink); letter-spacing: -.02em; }
code { color: var(--dfs-navy); font-size: .85em; }

/* Mono "label" voice: eyebrows, table heads, buttons, badges */
.eyebrow, .form-label, .table thead th, .btn, .status, .nav-section, .stat-label, .kv dt, .card-header .sub {
  font-family: var(--font-mono);
}
.eyebrow { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--dfs-blue); font-weight: 600; }
.form-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dfs-muted); }

/* Controls */
.btn { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; padding: .6rem 1.1rem; }
.btn-sm { font-size: .68rem; padding: .35rem .7rem; letter-spacing: .1em; }
.btn-lg { font-size: .85rem; padding: .85rem 1.4rem; }
.btn-primary { --bs-btn-bg: var(--dfs-blue); --bs-btn-border-color: var(--dfs-blue); --bs-btn-hover-bg: var(--dfs-navy);
  --bs-btn-hover-border-color: var(--dfs-navy); --bs-btn-active-bg: var(--dfs-navy); --bs-btn-active-border-color: var(--dfs-navy);
  --bs-btn-disabled-bg: #9fb0d6; --bs-btn-disabled-border-color: #9fb0d6; }
.btn-outline-primary { --bs-btn-color: var(--dfs-blue); --bs-btn-border-color: var(--dfs-blue); --bs-btn-hover-bg: var(--dfs-blue);
  --bs-btn-hover-border-color: var(--dfs-blue); --bs-btn-active-bg: var(--dfs-navy); }
.btn-success { --bs-btn-bg: var(--dfs-green-dark); --bs-btn-border-color: var(--dfs-green-dark); --bs-btn-hover-bg: #23652a; --bs-btn-hover-border-color: #23652a; }
.form-control, .form-select { border-color: var(--dfs-border); background-color: #fbfcfe; padding: .65rem .85rem; }
.form-control::placeholder { font-family: var(--font-mono); font-size: .9em; color: #8a90a6; }
.form-control:focus, .form-select:focus { border-color: var(--dfs-blue); background-color: #fff; box-shadow: 0 0 0 1px var(--dfs-blue); }
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { padding: .35rem .6rem; }
.form-select-sm { padding-right: 2rem; }
.page-link { color: var(--dfs-blue); font-family: var(--font-mono); }
.active > .page-link { background: var(--dfs-blue); border-color: var(--dfs-blue); }
.alert { border-left-width: 4px; }

/* Brand */
.dfs-logo { display: block; width: auto; max-width: 100%; }
.app-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--dfs-blue);
  border-left: 1px solid var(--dfs-border); padding-left: 1rem; }

/* Layout */
.app-header { height: 64px; background: #fff; border-bottom: 1px solid var(--dfs-border); position: sticky; top: 0; z-index: 1030; }
.user-chip { font-family: var(--font-mono); font-size: .72rem; line-height: 1.3; }
.user-chip small { letter-spacing: .14em; text-transform: uppercase; color: var(--dfs-blue); }
.sidebar { width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--dfs-border); min-height: calc(100vh - 64px); align-self: stretch; }
.sidebar > .nav { position: sticky; top: 72px; }
.sidebar .nav-link { color: var(--dfs-ink); padding: .55rem .9rem; display: flex; gap: .7rem; align-items: center;
  border-left: 3px solid transparent; font-weight: 500; position: relative; }
.sidebar .nav-link i { color: var(--dfs-muted); }
.sidebar-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; font-size: 1.15rem;
  color: var(--dfs-navy); background: none; border: 1px solid var(--dfs-border); }
.sidebar-toggle:hover { background: var(--dfs-blue-light); border-color: var(--dfs-blue); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--dfs-blue); outline-offset: 2px; }
/* Desktop: the menu scrolls on its own (long admin menu), and collapses to an icon rail (cookie, base.html). */
@media (min-width: 992px) {
  :root { --sidebar-w-collapsed: 68px; }
  .sidebar { transition: width .2s; }
  .sidebar > .nav { flex-wrap: nowrap; max-height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  .sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  .sidebar-collapsed .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-collapsed .sidebar .nav-link i { font-size: 1.1rem; }
  .sidebar-collapsed .sidebar .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sidebar-collapsed .sidebar .nav-link .badge { position: absolute; top: .35rem; right: .7rem; width: .55rem; height: .55rem; padding: 0; font-size: 0; }
  .sidebar-collapsed .sidebar .nav-section { font-size: 0; padding: 0; margin: .6rem .9rem; border-top: 1px solid var(--dfs-border); }
}
.sidebar .nav-link:hover { background: var(--dfs-bg); }
.sidebar .nav-link.active { background: var(--dfs-blue-light); border-left-color: var(--dfs-blue); color: var(--dfs-navy); font-weight: 700; }
.sidebar .nav-link.active i { color: var(--dfs-blue); }
.sidebar .nav-section { font-size: .64rem; text-transform: uppercase; letter-spacing: .28em; color: var(--dfs-muted); padding: 1.2rem .9rem .4rem; }
.main { min-width: 0; }
/* Bottom navigation (< lg). The side menu becomes a drawer, opened by the admin's "Plus" item. */
:root { --bottom-nav-h: 62px; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #fff;
  border-top: 1px solid var(--dfs-border); padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(20, 23, 47, .06); }
.bottom-nav-item { flex: 1 1 0; min-width: 0; height: var(--bottom-nav-h); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2rem; color: var(--dfs-muted); text-decoration: none;
  background: none; border: 0; border-top: 3px solid transparent; padding: 0 .25rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.bottom-nav-item i { font-size: 1.25rem; line-height: 1; }
.bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav-item:hover { color: var(--dfs-navy); }
.bottom-nav-item.active { color: var(--dfs-navy); border-top-color: var(--dfs-blue); font-weight: 600; background: var(--dfs-blue-light); }
.bottom-nav-item.active i { color: var(--dfs-blue); }
.bottom-nav-item:focus-visible { outline: 2px solid var(--dfs-blue); outline-offset: -4px; }
@media (max-width: 991.98px) {
  .main { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 1.5rem) !important; }
  .sidebar { position: fixed; left: 0; top: 64px; z-index: 1020; transform: translateX(-100%); transition: transform .2s;
    height: calc(100dvh - 64px - var(--bottom-nav-h) - env(safe-area-inset-bottom)); overflow-y: auto; }
  .sidebar > .nav { position: static; }
  /* Huge spread shadow = cheap backdrop; header and bottom bar (z 1030) stay above it. */
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(20, 23, 47, .35); }
}
.bottom-nav-item[aria-expanded="true"] { color: var(--dfs-navy); border-top-color: var(--dfs-blue); background: var(--dfs-blue-light); }
.bottom-nav-item[aria-expanded="true"] i { color: var(--dfs-blue); }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none !important; } }
.page-title { font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; line-height: 1.1; }

/* Cards & tables */
.card { border: 1px solid var(--dfs-border); background: #fff; box-shadow: 0 1px 0 rgba(20, 23, 47, .03); }
.card-header { background: #fff; border-bottom: 1px solid var(--dfs-border); font-weight: 700; padding: .85rem 1.1rem; }
.stat-card { border-top: 3px solid var(--dfs-navy); }
.row > :nth-child(3n+2) > .stat-card { border-top-color: var(--dfs-blue); }
.row > :nth-child(3n) > .stat-card { border-top-color: var(--dfs-green); }
a.stat-card:hover { border-color: var(--dfs-blue); }
.stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--dfs-navy); letter-spacing: -.03em; }
.stat-card .stat-label { color: var(--dfs-muted); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .45rem; }
.stat-card .stat-icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--dfs-blue-light); color: var(--dfs-blue); font-size: 1rem; }
.table { --bs-table-bg: #fff; --bs-table-hover-bg: var(--dfs-blue-light); margin-bottom: 0; }
.table thead th { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: var(--dfs-muted); font-weight: 600;
  background: #fafbfd; white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.table td { vertical-align: middle; white-space: nowrap; }
.table a.sort { color: inherit; text-decoration: none; }
.kv dt { font-weight: 400; color: var(--dfs-muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.kv dd { margin-bottom: .65rem; }

/* Status badges: colour + square marker + text (never colour alone) */
.status { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .5rem; font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.status::before { content: ""; width: .45rem; height: .45rem; background: currentColor; flex: none; }
.status-success { color: #23652a; background: #e8f5e6; border-color: #c4e3c0; }
.status-danger { color: #a3202e; background: #fbe9eb; border-color: #f0c6cb; }
.status-warning { color: #8a5300; background: #fff4de; border-color: #f3d9a6; }
.status-secondary { color: #5a6075; background: #f0f2f6; border-color: #dde1ea; }
.status-info { color: var(--dfs-blue-dark); background: var(--dfs-blue-light); border-color: #c9d4ec; }
.status-primary { color: var(--dfs-navy); background: #e3e6f4; border-color: #c3c8e4; }

/* Chronometer */
.timer { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.02em; color: var(--dfs-navy); }
.timer-xl { font-size: clamp(3.2rem, 10vw, 6rem); line-height: 1; }
.timer.is-paused { color: #8a5300; }
.timer.is-expired { color: #a3202e; }
.timer-expired-label { display: none; font-family: var(--font-mono); letter-spacing: .3em; }
.is-expired-wrap .timer-expired-label { display: block; }

/* Rooms map */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.ws { border: 1px solid var(--dfs-border); padding: .65rem .75rem; background: #fff; }
.ws > div:first-child { flex-wrap: wrap; gap: .25rem; }
.ws strong { font-family: var(--font-mono); white-space: nowrap; }
.ws.free { border-top: 4px solid var(--dfs-green); }
.ws.busy { border-top: 4px solid #c62f3e; background: #fffafa; }
.ws.paused { border-top: 4px solid #e3a008; background: #fffcf3; }
.ws.off { opacity: .5; }
.table td code, .table td .status { white-space: nowrap; }

/* Login */
.login-page { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.login-top { position: relative; z-index: 2; padding: 1.25rem clamp(16px, 16vw, 320px); }
.login-body { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1.2fr minmax(320px, 470px); gap: 3rem;
  align-items: center; padding: 2rem clamp(16px, 16vw, 320px) 4rem; }
.login-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; margin: .9rem 0 1.6rem; }
.login-hero p { color: var(--dfs-muted); font-size: 1.1rem; margin-top: 1.4rem; }
.login-card { background: #fff; border: 1px solid var(--dfs-border); padding: 2.2rem 2.2rem 2.4rem; box-shadow: 0 1px 0 rgba(20, 23, 47, .04); }
.login-card h2 { font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
.login-card .sub { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dfs-muted); }
.pixels i { position: absolute; background: var(--dfs-green); display: block; }
.pixels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.edge-glyphs { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); height: min(62vh, 520px); z-index: 1; }
@media (max-width: 991.98px) {
  .login-top { padding: 1rem 16px; }
  .login-body { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.5rem; padding: 1.5rem 16px 2rem; }
  .login-hero .dfs-logo, .login-hero p { display: none; }
  .login-card { padding: 1.6rem 1.25rem; }
  .pixels, .edge-glyphs { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
/* Keep row actions reachable when wide tables scroll horizontally */
.table-responsive .table td:last-child.text-end { position: sticky; right: 0; background: var(--bs-table-bg); box-shadow: -8px 0 8px -8px rgba(20, 23, 47, .18); }
.table-hover > tbody > tr:hover > td:last-child.text-end { background: var(--dfs-blue-light); }
.login-links:not(:empty) { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--dfs-border); font-size: .85rem; line-height: 1.7; }

/* Matricule QR code: keep dark-on-white in both themes so scanners read it. */
.qr-code svg { display: block; width: 264px; height: auto; max-width: 100%; shape-rendering: crispEdges; }

/* Candidate profile photo */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-zoom { display: inline-block; border-radius: 50%; cursor: zoom-in; }
.photo-zoom { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; cursor: zoom-out; }
.photo-zoom::backdrop { background: rgba(0, 0, 0, .8); }
.photo-zoom img { display: block; max-width: 92vw; max-height: 88vh; border-radius: .5rem; object-fit: contain; }
.photo-zoom .btn-close { position: absolute; top: .5rem; right: .5rem; padding: .5rem; background-color: rgba(0, 0, 0, .5); border-radius: 50%; opacity: 1; }
.avatar-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--dfs-blue-light); color: var(--dfs-muted); }

/* Check-in QR code, projected to the room */
.qr-code.qr-lg svg { width: 360px; }

/* Site register: show only the fields of the chosen reason (no script: CSP). Without :has(), both stay visible. */
.passage-form:has(#kind-visit:checked) .only-activity,
.passage-form:has(#kind-activity:checked) .only-visit { display: none; }

/* Rich text: plain text until the viewer renders it; images never wider than their card */
.md-fallback { white-space: pre-line; }
.toastui-editor-contents img { max-width: 100%; height: auto; }
.toastui-editor-contents { font-size: 1rem; }

/* Defense sheets: signatures, compact print tables */
.signature-img { display: block; max-height: 70px; max-width: 220px; margin: .25rem auto; object-fit: contain; }
.timer-minutes { width: 5.5rem; }
.pre-line { white-space: pre-line; }
/* Same width on screen and on paper (A4 - 16 mm of margins): app.js measures the height to hold on one sheet. */
.sheet-print { font-size: .72rem; line-height: 1.2; background-image: none; }
.sheet-page { width: 194mm; margin: 0 auto; }
.sheet-page + .sheet-page { break-before: page; }
/* General minutes: whole A4 sheets on the letterhead (296 mm so no sheet spills over); margins clear its logo, address and side marks. */
.pv { font-size: 10pt; line-height: 1.3; background-image: none; }
.pv-page { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 210mm; height: 296mm; margin: 0 auto; padding: 32mm 18mm 22mm; overflow: hidden; }
.pv-page + .pv-page { break-before: page; }
.pv-letterhead { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.pv-body { flex: 1; min-height: 0; overflow: hidden; }
.pv-body p { margin-bottom: .35rem; text-align: justify; }
.pv-title { margin: .7rem 0 .6rem; font-size: 13pt; font-weight: 700; text-align: center; }
.pv-article { margin: .6rem 0 .25rem; font-size: 10.5pt; font-weight: 700; }
.pv-table { margin-bottom: .4rem; font-size: 9.5pt; }
.pv-table td { white-space: normal; }
.pv-table > :not(caption) > * > * { padding: .08rem .35rem; }
.pv-closing { margin-top: .7rem; }
.pv-president { flex: 0 0 82mm; text-align: center; }
.pv-signatures { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; }
.pv-signature { width: 30mm; height: 14mm; }
.pv-signature img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pv-president .pv-signature { width: 42mm; height: 18mm; margin: .2rem auto 0; }
.pv-stamp { display: block; width: 38mm; height: 30mm; margin: .2rem auto 0; object-fit: contain; }
.pv-stamp-preview { height: 2.5rem; max-width: 6rem; object-fit: contain; }
.pv-foot { flex: none; margin-top: 2mm; }
.pv-number { position: absolute; right: 20mm; bottom: 9mm; font-size: 9pt; }
.sheet-print td > strong + .small { display: inline; margin-left: .3rem; }
.sheet-print .fs-5 { font-size: .8rem !important; }
.sheet-print .sheet-table { font-size: .68rem; margin-bottom: .3rem; }
.sheet-print .table > :not(caption) > * > * { padding: .06rem .25rem; }
.sheet-print .table td { white-space: normal; }
.sheet-print .table td.pre-line { white-space: pre-line; }
.sheet-print .table thead th { font-size: .6rem; letter-spacing: .02em; white-space: normal; }
.sheet-print .h6 { font-size: .75rem; margin: .3rem 0 .15rem !important; }
.sheet-print p { margin-bottom: .2rem; font-size: .62rem; }
.sheet-print .signatures td { height: 52px; }
.sheet-print .signature-img { max-height: 34px; max-width: 110px; margin: .15rem auto 0; }

/* ---- Shared page components ---- */
.sidebar .nav > .nav-section:first-child { padding-top: .5rem; }

/* Page header: back link, eyebrow, title, actions; metadata as chips rather than " · " lines */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .55rem; color: var(--dfs-muted); text-decoration: none;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.back:hover { color: var(--dfs-blue); }
.page-head .subtitle { color: var(--dfs-muted); margin: .4rem 0 0; max-width: 70ch; }
.page-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.meta-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.meta { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; background: #fff; border: 1px solid var(--dfs-border);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; color: var(--dfs-ink); white-space: nowrap; }
.meta i { color: var(--dfs-blue); }
.meta.is-muted { color: var(--dfs-muted); border-style: dashed; }
.meta.is-muted i { color: var(--dfs-muted); }
.group-label { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; color: var(--dfs-muted);
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.group-label::after { content: ""; flex: 1; border-top: 1px solid var(--dfs-border); }

/* Collapsible cards: chevron instead of the native marker */
summary.card-header { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
summary.card-header::-webkit-details-marker { display: none; }
summary.card-header::after { content: "\f282"; font-family: "bootstrap-icons"; font-weight: 400; margin-left: auto; color: var(--dfs-muted); transition: transform .15s; }
details[open] > summary.card-header::after { transform: rotate(180deg); }
details:not([open]) > summary.card-header { border-bottom: 0; }

/* Cards */
a.card { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card:hover { border-color: var(--dfs-blue); box-shadow: 0 8px 20px -8px rgba(20, 23, 47, .18); transform: translateY(-1px); }
.card-header > .bi:first-child, .card-header > span:first-child > .bi:first-child { color: var(--dfs-blue); }
.card-title-lg { font-size: 1.15rem; font-weight: 700; color: var(--dfs-ink); letter-spacing: -.01em; margin: 0; }
.card-footer { background: #fafbfd; border-top: 1px solid var(--dfs-border); }
@media (prefers-reduced-motion: reduce) { a.card, a.card:hover { transition: none; transform: none; } }

/* Tabs: mono labels, blue underline, optional count */
.nav-tabs { --bs-nav-tabs-border-width: 0; border-bottom: 1px solid var(--dfs-border); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nav-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1rem; margin-bottom: -1px; white-space: nowrap;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--dfs-muted);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nav-tabs .nav-link:hover { color: var(--dfs-navy); border-bottom-color: var(--dfs-border); }
.nav-tabs .nav-link.active { color: var(--dfs-navy); background: none; border-bottom-color: var(--dfs-blue); }
.nav-tabs .count { padding: .1rem .4rem; background: var(--dfs-blue-light); color: var(--dfs-blue-dark); font-size: .62rem; letter-spacing: .04em; }
.nav-tabs .nav-link.active .count { background: var(--dfs-blue); color: #fff; }
.dot { display: inline-block; width: .5rem; height: .5rem; background: currentColor; flex: none; }
.dot-success { color: var(--dfs-green); }
.dot-info { color: var(--dfs-blue); }

/* Progress: square, thin, DFS colours */
.progress { --bs-progress-height: 6px; --bs-progress-bg: var(--dfs-grid); --bs-progress-bar-bg: var(--dfs-blue); }
.progress.is-done { --bs-progress-bar-bg: var(--dfs-green-dark); }
.progress-line { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; color: var(--dfs-muted);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.progress-line strong { color: var(--dfs-navy); letter-spacing: .02em; }
.stat-card .progress { margin-top: .7rem; }

/* Empty state */
.empty-state { text-align: center; padding: 2.25rem 1rem; color: var(--dfs-muted); }
.empty-state > .bi { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: .75rem; font-size: 1.35rem;
  background: var(--dfs-blue-light); color: var(--dfs-blue); }
.empty-state p { margin: 0 auto; max-width: 46ch; }
td > .empty-state { white-space: normal; }

/* Callout: a highlighted action or warning inside a card */
.callout { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: .85rem 1rem;
  border: 1px solid #c9d4ec; border-left: 4px solid var(--dfs-blue); background: var(--dfs-blue-light); }
.callout-warning { border-color: #f3d9a6; border-left-color: #e3a008; background: #fff8e8; }
.callout-success { border-color: #c4e3c0; border-left-color: var(--dfs-green-dark); background: #f1f9f0; }

/* Cote colours (1 red … 4 green), shared by the segmented control and the scale legend */
.cote-none { --seg-c: #8a90a6; }
.cote-1 { --seg-c: #c62f3e; }
.cote-2 { --seg-c: #c77700; }
.cote-3 { --seg-c: var(--dfs-blue); }
.cote-4 { --seg-c: var(--dfs-green-dark); }
.cote-na { --seg-c: #5a6075; }
.dec-admitted { --seg-c: var(--dfs-green-dark); }
.dec-reserved { --seg-c: #c77700; }
.dec-waitlist { --seg-c: var(--dfs-navy); }
.decision-select { min-width: 11rem; }
.decision-note { min-width: 9rem; }
.dec-rejected { --seg-c: #c62f3e; }

/* Segmented control: radios (.btn-check) + labels; same form fields as plain radios */
.seg { display: inline-flex; flex-wrap: nowrap; }
.seg > .btn { min-width: 42px; min-height: 40px; display: inline-grid; place-items: center; padding: .4rem .6rem; margin: 0;
  background: #fff; color: var(--dfs-ink); border: 1px solid var(--dfs-border); font-size: .78rem; letter-spacing: .04em; }
.seg > .btn-check + .btn { margin-left: -1px; }
.seg > .btn-check:first-child + .btn { margin-left: 0; }
.seg > .btn:hover { background: var(--dfs-bg); border-color: var(--seg-c, var(--dfs-blue)); color: var(--dfs-ink); position: relative; z-index: 1; }
.seg > .btn-check:checked + .btn { background: var(--seg-c, var(--dfs-navy)); border-color: var(--seg-c, var(--dfs-navy)); color: #fff; position: relative; z-index: 2; }
.seg > .btn-check:focus-visible + .btn { outline: 2px solid var(--dfs-navy); outline-offset: 1px; position: relative; z-index: 3; box-shadow: none; }
.seg > .btn-check:disabled + .btn { opacity: .45; }
.seg > .btn-check:disabled:checked + .btn { opacity: 1; }
.seg-wide > .btn { padding-left: .9rem; padding-right: .9rem; }
@media (max-width: 575.98px) { .seg { display: flex; } .seg > .btn { flex: 1 1 0; min-width: 0; } }

/* Chip checkboxes (supports, quick observations) */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips > .btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; background: #fff; border: 1px solid var(--dfs-border);
  color: var(--dfs-ink); font-family: var(--font-sans); font-size: .86rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.chips > .btn::before { content: "\f4fe"; font-family: "bootstrap-icons"; color: var(--dfs-muted); }
.chips > .btn:hover { border-color: var(--chip-c, var(--dfs-blue)); background: var(--dfs-bg); color: var(--dfs-ink); }
.chips > .btn-check:checked + .btn { background: var(--chip-bg, var(--dfs-blue-light)); border-color: var(--chip-c, var(--dfs-blue)); color: var(--chip-ink, var(--dfs-navy)); }
.chips > .btn-check:checked + .btn::before { content: "\f633"; color: inherit; }
.chips > .btn-check:focus-visible + .btn { outline: 2px solid var(--dfs-navy); outline-offset: 1px; box-shadow: none; }
.chips > .btn-check:disabled + .btn { opacity: .5; }
.chips > .btn-check:disabled:checked + .btn { opacity: 1; }
.chips-success { --chip-bg: #e8f5e6; --chip-c: var(--dfs-green); --chip-ink: #23652a; }
.chips-danger { --chip-bg: #fbe9eb; --chip-c: #e08a94; --chip-ink: #a3202e; }

/* Sticky save bar at the bottom of long forms (above the bottom navigation on mobile) */
.sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1.1rem; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--dfs-border); box-shadow: 0 -8px 16px -12px rgba(20, 23, 47, .3); }
@media (max-width: 991.98px) { .sticky-actions { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); } }
@media (min-width: 992px) { .sticky-lg { position: sticky; top: 80px; } }

/* SAS members table: inline inputs wide enough to read */
.input-class { min-width: 110px; }
.input-bedroom { min-width: 90px; }
.input-equipment { min-width: 200px; }

/* Defense / jury */
.list-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.slot { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--dfs-navy); }
.signature-box { display: grid; place-items: center; min-height: 110px; padding: .75rem; background: #fff; border: 1px solid var(--dfs-border); }
.signature-box.is-empty { border-style: dashed; color: var(--dfs-muted); background: var(--dfs-bg); font-size: .85rem; }
.signature-box .signature-img { margin: 0; }
.row-todo > td:first-child { box-shadow: inset 3px 0 0 #e3a008; }

/* Defense sheet: candidate header, score tiles, scale legend, criterion rows */
.score-tiles { display: flex; gap: .5rem; flex-wrap: wrap; }
.score-tile { min-width: 128px; padding: .6rem .9rem; background: #fff; border: 1px solid var(--dfs-border); border-top: 3px solid var(--dfs-blue); }
.score-tile.is-final { border-top-color: var(--dfs-green); }
.score-tile .v { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--dfs-navy); letter-spacing: -.03em; }
.score-tile .v small { font-size: .8rem; font-weight: 500; color: var(--dfs-muted); letter-spacing: 0; }
.score-tile .l { margin-top: .35rem; color: var(--dfs-muted); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.scale-legend { display: flex; flex-wrap: wrap; gap: .5rem; }
.scale-legend .item { flex: 1 1 170px; display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .65rem; background: #fff; border: 1px solid var(--dfs-border); }
.scale-legend .key { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 26px; background: var(--seg-c); color: #fff;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; }
.scale-legend .label { font-weight: 700; font-size: .86rem; line-height: 1.2; }
.scale-legend .hint { color: var(--dfs-muted); font-size: .76rem; line-height: 1.3; }
.crit-section { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .65rem 1.1rem;
  background: #fafbfd; border-bottom: 1px solid var(--dfs-border); color: var(--dfs-navy);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.crit-section .subtotal { letter-spacing: .04em; color: var(--dfs-muted); }
.crit-section .subtotal strong { color: var(--dfs-navy); }
.crit { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--dfs-border); }
@media (min-width: 768px) { .crit { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .crit-fact { grid-column: 1 / -1; } }
@media (min-width: 1400px) { .crit { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); } .crit-fact { grid-column: auto; } }
.crit-title { font-weight: 700; }
.crit-ind { color: var(--dfs-muted); font-size: .82rem; }
.crit-weight { display: inline-block; margin-left: .35rem; padding: .05rem .35rem; vertical-align: .1em; background: var(--dfs-blue-light); color: var(--dfs-blue-dark);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .06em; }
.crit-points { margin-top: .35rem; color: var(--dfs-muted); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-align: right; }
.crit-points strong { color: var(--dfs-navy); font-size: .9rem; }
.crit .fact-hint { display: none; margin-top: .25rem; color: #a3202e; font-size: .76rem; }
.crit.needs-fact .fact-hint { display: block; }
.crit.needs-fact textarea { border-color: #e08a94; }
@media screen {
  .card > .table-responsive > .sheet-table { margin-bottom: 0; }
  .card-body > .sheet-table:last-child { margin-bottom: 0; }
}
.min-w-0 { min-width: 0; }
.w-progress { max-width: 380px; }
.input-narrow { width: 7.5rem; }
.stat-value.is-compact { font-size: 1.5rem; padding-top: .35rem; }
@media (min-width: 992px) { .sticky-lg .timer-xl { font-size: clamp(2rem, 4.2vw, 3.6rem); white-space: nowrap; } }
.tab-pane { scroll-margin-top: 80px; }

/* Coaches program calendar */
.lesson-calendar { table-layout: fixed; }
.lesson-calendar td { height: 7rem; vertical-align: top; padding: .3rem; }
.lesson-calendar td.is-today { box-shadow: inset 0 0 0 2px var(--dfs-blue); }
.lesson-chip { display: block; margin-top: .25rem; padding: .15rem .35rem; border: 1px solid; border-radius: .35rem; font-size: .75rem; line-height: 1.2; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
/* Public admission result (no login): search on screen, A4 sheet on letterhead when printed.
   Decision tone: --tone (ink) / --tone-bg (fill); green admitted, orange wait list, red not admitted. */
.result-public { background-color: var(--dfs-bg); }
.result-wrap { width: 100%; max-width: 210mm; margin: 0 auto; padding: 0 16px; }
.result-top { background: #fff; border-bottom: 1px solid var(--dfs-border); padding: .75rem 0; }
.result-eyebrow { color: var(--dfs-blue); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.result-intro { padding-top: 2rem; padding-bottom: 1.5rem; }
.result-h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--dfs-navy); margin: .3rem 0 .5rem; }
.result-search { display: flex; gap: .5rem; max-width: 34rem; }
.result-search .form-control { text-transform: uppercase; letter-spacing: .06em; }
.result-search .btn { flex: none; }
.result-foot { padding-top: 2rem; padding-bottom: 2rem; color: var(--dfs-muted); font-size: .8rem; text-align: center; }
.result-page { --tone: var(--dfs-navy); --tone-bg: var(--dfs-blue-light); background: #fff; box-shadow: 0 6px 30px rgba(20, 23, 47, .12);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.result-admitted { --tone: #1f7a2c; --tone-bg: #e6f4e7; }
.result-waitlist { --tone: #b35900; --tone-bg: #fff0dc; }
.result-rejected { --tone: #b42318; --tone-bg: #fde8e7; }
.result-id { display: flex; gap: 6mm; align-items: flex-start; margin-bottom: 5mm; }
.result-photo { flex: none; width: 34mm; height: 42mm; object-fit: cover; border: 2px solid var(--tone); background: #fff; }
.result-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  color: var(--dfs-muted); background: var(--dfs-bg); border-style: dashed; font-size: 8pt; text-align: center; }
.result-photo-empty .bi { font-size: 26pt; line-height: 1; }
.result-fields { display: grid; grid-template-columns: max-content 1fr; gap: 2mm 5mm; margin: 0; flex: 1; }
.result-fields dt { color: var(--dfs-muted); font-weight: 400; font-size: 8pt; letter-spacing: .08em; text-transform: uppercase; padding-top: .15em; }
.result-fields dd { margin: 0; font-size: 11pt; }
.result-decision { display: flex; align-items: center; gap: 4mm; padding: 4mm 5mm; margin-bottom: 5mm;
  color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone); border-left-width: 6px; }
.result-decision > .bi { font-size: 22pt; line-height: 1; }
.result-decision-label { font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; }
.result-decision-value { font-size: 17pt; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.result-text p { text-align: justify; }
.result-callout { padding: 3mm 4mm; border-left: 4px solid var(--tone); background: var(--tone-bg); }
@media print { .result-public { background: none; } .result-page { box-shadow: none; } }
@media screen and (max-width: 820px) {
  .result-page { width: auto; height: auto; margin: 0 16px; padding: 1.25rem 1rem; font-size: .95rem; }
  .result-page .pv-letterhead { display: none; }
  .result-search .btn-lg { padding-inline: .9rem; }
}
@media screen and (max-width: 480px) {
  .result-id { flex-direction: column; align-items: center; }
  .result-fields { width: 100%; }
}