/* /Components/CourseDefaultsModal.razor.rz.scp.css */
/* Short popup whose "+ New" provider panel must overflow the box (no internal scroll
   needed) — same rule as the create-course popup. */
.modal-ov[b-3fl2vyhe36] { overflow: visible; max-height: none; }
/* /Components/DateRangeFilter.razor.rz.scp.css */
/* Expenses' DateRangeFilter.razor.css, verbatim bar the title (ported 2026-09-08): a strip
   above a list — pill bar, caption, Custom row with From / To / Apply. The colours are the
   control's own (expenses'), not the page tokens, so it looks identical in both apps. */

.drf-shell[b-urdvw8b9v4] {
    border: 1px solid #d8e1ef; border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 10px 14px; margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    flex-shrink: 0;
}
.drf-bar[b-urdvw8b9v4] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.drf-title[b-urdvw8b9v4] { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #334155; white-space: nowrap; }
.drf-icon[b-urdvw8b9v4] { width: 15px; height: 15px; color: #2563eb; }
.drf-pills[b-urdvw8b9v4] { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #dbe4f2; border-radius: 11px; background: #eef2f9; }
.drf-pill[b-urdvw8b9v4] {
    border: none; border-radius: 8px; padding: 7px 15px; font: inherit; font-size: 13px; font-weight: 600;
    color: #475569; background: transparent; cursor: pointer; white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.drf-pill:hover[b-urdvw8b9v4] { color: #1d4ed8; background: rgba(255, 255, 255, 0.75); }
.drf-pill.active[b-urdvw8b9v4] {
    color: #fff; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.drf-pill:focus-visible[b-urdvw8b9v4] { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
.drf-divider[b-urdvw8b9v4] { width: 1px; height: 18px; margin: 0 3px; background: #cfdaeb; }
.drf-caption[b-urdvw8b9v4] { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }

.drf-custom[b-urdvw8b9v4] {
    display: flex; align-items: end; gap: 12px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 12px; border-top: 1px dashed #dbe4f2;
    animation: drf-open-b-urdvw8b9v4 0.18s ease-out;
}
@keyframes drf-open-b-urdvw8b9v4 { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.drf-field[b-urdvw8b9v4] { display: flex; flex-direction: column; gap: 4px; }
.drf-field span[b-urdvw8b9v4] { font-size: 12px; font-weight: 600; color: #334155; }
.drf-field input[b-urdvw8b9v4] { border: 1px solid #c4d1e5; border-radius: 9px; padding: 8px 11px; min-width: 138px; font: inherit; font-size: 13.5px; color: #0f172a; background: #fff; }
.drf-field input:focus[b-urdvw8b9v4] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.drf-apply[b-urdvw8b9v4] {
    border: none; border-radius: 9px; padding: 9px 18px; font: inherit; font-size: 13.5px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); cursor: pointer; white-space: nowrap;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.drf-apply:hover[b-urdvw8b9v4] { filter: brightness(1.06); box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3); }
.drf-hint[b-urdvw8b9v4] { font-size: 12px; color: #94a3b8; padding-bottom: 10px; }
.drf-error[b-urdvw8b9v4] { font-size: 12px; font-weight: 600; color: #b91c1c; padding-bottom: 10px; }

@media (max-width: 900px) {
    .drf-caption[b-urdvw8b9v4] { margin-left: 0; flex-basis: 100%; }
    .drf-custom[b-urdvw8b9v4] { align-items: stretch; }
    .drf-field[b-urdvw8b9v4], .drf-field input[b-urdvw8b9v4], .drf-apply[b-urdvw8b9v4] { width: 100%; }
}
/* /Components/DocumentViewer.razor.rz.scp.css */
.dv-overlay[b-w7cbcc334p] {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(17, 24, 39, 0.72);
    display: flex; padding: 22px;
}
.dv-panel[b-w7cbcc334p] {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    background: var(--mtl-surface); border-radius: var(--mtl-radius-lg); overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.35);
}
.dv-bar[b-w7cbcc334p] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--mtl-border-soft);
}
.dv-name[b-w7cbcc334p] { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-bar .btn[b-w7cbcc334p] { flex: none; white-space: nowrap; }
.dv-frame[b-w7cbcc334p] { flex: 1; width: 100%; border: none; background: #525659; }
/* /Components/NewCourseModal.razor.rz.scp.css */
/* "Create a new course" popup: back button, similar-name warnings, validity row, info
   band. Shared vocabulary (modal, forms, quick-add panels) is app.css. overflow: visible
   because the floating "+ New" panels must overflow the box — it's short, needing no
   internal scroll. */
.nc-box[b-f3lypyw3ov] { max-width: 900px; overflow: visible; max-height: none; }
.nc-head[b-f3lypyw3ov] { display: flex; align-items: flex-start; gap: 14px; }
.nc-back[b-f3lypyw3ov] { white-space: nowrap; }

.val-row[b-f3lypyw3ov] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.val-num[b-f3lypyw3ov] { width: 90px; flex: none; }
.val-unit[b-f3lypyw3ov] { color: var(--mtl-text-muted); font-size: 0.9rem; }
.val-hint[b-f3lypyw3ov] { margin-left: auto; color: var(--mtl-text-muted); font-size: 0.88rem; }

.nc-info[b-f3lypyw3ov] {
    background: var(--mtl-accent-soft); border: 1px solid #d5e4fb; color: #1e3a8a;
    border-radius: var(--mtl-radius); padding: 10px 14px; font-size: 0.88rem; margin: 2px 0 4px;
}

/* similar-name warning */
.sim-warn[b-f3lypyw3ov] {
    background: var(--amber-soft); border: 1px solid #f3d9a4; color: #92400e;
    border-radius: 8px; padding: 10px 12px; font-size: 0.82rem; margin: -4px 0 14px;
}
.sim-warn ul[b-f3lypyw3ov] { margin: 6px 0 0; padding-left: 18px; }
.sim-warn li[b-f3lypyw3ov] { margin: 3px 0; }
.sim-warn.sim-dup[b-f3lypyw3ov] { background: var(--red-soft); border-color: #f5c8c8; color: var(--red); }
/* /Components/Toasts.razor.rz.scp.css */
/* The POC's toast look 1:1 — dark pill, bottom-right, coloured status icon. ::deep
   because the icon is the Icon component's svg, which this scope can't reach directly. */
.toast-stack[b-wqbv2zgegx] {
    position: fixed;
    bottom: 18px; right: 18px;
    z-index: 200;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 380px;
}
.toast-item[b-wqbv2zgegx] {
    display: flex; align-items: center; gap: 9px;
    background: #111827;
    color: #f9fafb;
    border-radius: var(--mtl-radius);
    padding: 11px 15px;
    font-size: 0.87rem;
    box-shadow: var(--mtl-shadow-hover);
}
.toast-item.t-success[b-wqbv2zgegx]  .icon { color: #4ade80; }
.toast-item.t-info[b-wqbv2zgegx]  .icon { color: #93c5fd; }
.toast-item.t-error[b-wqbv2zgegx]  .icon { color: #f87171; }

/* the follow-up link on a success toast (View certificate) */
.toast-link[b-wqbv2zgegx] { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 8px; white-space: nowrap; }
/* /Layout/ImpersonationPicker.razor.rz.scp.css */
/* Ported from expenses' ImpersonationPicker.razor.css, with its MainLayout ::deep
   sidebar-berth overrides folded in — certs has only the one home (the rail's foot), so
   the stacked column and the fly-right panel live here directly. The toggle is
   deliberately prominent — a filled button in the nav's blue family, so it reads as a
   primary action at a glance — while the Exit chip and acting-as pill stay quiet chrome. */
.impersonation[b-u1js7e524q] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    font-weight: 500;
}

.acting-as[b-u1js7e524q] {
    padding: 0.25rem 0.6rem;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background-color: #eff6ff;
    color: #1e3a8a;
    font-size: 0.8rem;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impersonate-toggle[b-u1js7e524q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid #2563eb;
    border-radius: 9999px;
    background-color: #2563eb;
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.impersonate-toggle:hover[b-u1js7e524q] {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.impersonate-icon[b-u1js7e524q] {
    display: inline-flex;
    width: 1em;
    height: 1em;
}

.impersonate-icon[b-u1js7e524q]  svg {
    width: 100%;
    height: 100%;
}

.exit-button[b-u1js7e524q] {
    padding: 0.25rem 0.6rem;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #1e3a8a;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.exit-button:hover[b-u1js7e524q] {
    background-color: #eff6ff;
    color: #1e3a8a;
}

/* The candidate panel can't drop below the toggle — it sits at the bottom of the
   viewport — so it flies out to the right of the sidebar, bottom-aligned with the
   control. Width is viewport-guarded so it can never spill past the screen edge. */
.picker-panel[b-u1js7e524q] {
    position: absolute;
    bottom: 0;
    left: calc(100% + 0.75rem);
    z-index: 20;
    width: min(24rem, calc(100vw - 2rem));
    padding: 0.5rem;
    border: 1px solid #dbe3ee;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    text-align: left;
}

.picker-search[b-u1js7e524q] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font: inherit;
    font-size: 0.9rem;
}

.picker-list[b-u1js7e524q] {
    max-height: min(60vh, 30rem);
    margin: 0.4rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.picker-candidate[b-u1js7e524q] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0.375rem;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.picker-candidate:hover[b-u1js7e524q] {
    background-color: #e9f1ff;
}

.picker-name[b-u1js7e524q] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

.picker-email[b-u1js7e524q] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
}

.picker-loading[b-u1js7e524q],
.picker-error[b-u1js7e524q] {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #64748b;
}

.picker-error[b-u1js7e524q] {
    color: #b91c1c;
}
/* /Layout/LoginDisplay.razor.rz.scp.css */
/* Ported from expenses' LoginDisplay.razor.css verbatim. */
.login-display[b-sqypfhk7rb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.avatar[b-sqypfhk7rb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mtl-accent-soft);
    color: var(--mtl-accent-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.user-label[b-sqypfhk7rb] {
    font-size: 0.95rem;
    color: #4b5563;
    font-weight: 600;
    white-space: nowrap;
}

.sign-out[b-sqypfhk7rb] {
    border: 1px solid #d1d5db;
    background: var(--mtl-surface);
    color: var(--mtl-text);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.sign-out:hover[b-sqypfhk7rb] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.sign-in[b-sqypfhk7rb] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--mtl-accent);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.sign-in:hover[b-sqypfhk7rb] {
    text-decoration: underline;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Ported from mtl-expenses' MainLayout.razor.css + NavMenu.razor.css (our nav is inline
   in this layout, so the tab styles live here behind the same ::deep). */

/* Exactly the viewport, not "at least" it: .content below is the one scroll container,
   so the scrollbar sits on the content area and the sidebar + header stay put. Below
   640px of viewport height the media query at the bottom lets the shell grow and the
   whole document scroll instead. */
.app-shell[b-5vtpio4nil] {
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow: hidden;
    background-color: var(--mtl-bg);
}

/* The sidebar column: brand on top, the vertical nav filling the rest. Fixed-basis,
   never shrinking — the content column owns all the flexible width. */
.side-nav[b-5vtpio4nil] {
    flex: 0 0 15rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--mtl-surface);
    border-right: 1px solid var(--mtl-border);
}

/* Mark beside the wordmark, on one 4rem row — the same height as .top-menu, so the
   sidebar's border lines up with the header's. */
.brand[b-5vtpio4nil] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 4rem;
    flex: none;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--mtl-border-soft);
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

/* The lockup rides the 4rem brand row at 44px tall — clear of the ~32px floor the mark is
   drawn for, below which the tails and the pixel squares turn to mush. It brings its own
   teal disc, so unlike the accent tile it replaced it needs nothing behind it. */
.brand-lockup[b-5vtpio4nil] {
    flex: none;
    width: 28px; height: 44px;
    display: block;
}

/* The rail's stand-in, hidden until the sidebar folds (see the 900px query below). */
.brand-disc[b-5vtpio4nil] {
    flex: none;
    width: 34px; height: 34px;
    display: none;
}

.brand-text[b-5vtpio4nil] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The vertical link list; .nav-scroll is the (rarely needed) scroll container, so a
   viewport shorter than the tab list scrolls the links, never the sidebar chrome. */
.side-tabs[b-5vtpio4nil] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.75rem;
}

.nav-scroll[b-5vtpio4nil] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.side-tabs[b-5vtpio4nil]  .tab-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #334155;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.6rem 0.7rem;
    border-radius: 0.55rem;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.side-tabs[b-5vtpio4nil]  .tab-link + .tab-link {
    margin-top: 0.2rem;
}

/* Split nav while impersonating (expenses' NavMenu capsule): the effective user's tabs
   sit in a visibly distinct "Acting as ⟨name⟩" capsule; the actor's admin tabs below
   stand apart, unchanged. Idle, the zone wrapper styles nothing. */
.side-tabs[b-5vtpio4nil]  .nav-zone {
    display: flex;
    flex-direction: column;
}

.side-tabs[b-5vtpio4nil]  .acting-as-zone {
    padding: 0.45rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    background-color: #eff6ff;
}

.side-tabs[b-5vtpio4nil]  .zone-label {
    color: #1e3a8a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.3rem 0.4rem;
    white-space: nowrap;
    /* A long impersonation name must not widen the sidebar — the cap plus the title
       attribute (full name on hover) keeps the capsule honest at any name. */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section label over the admin tabs (the POC's sidebar heading, restyled onto this shell). */
.side-tabs[b-5vtpio4nil]  .nav-section {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9aa1ac;
    padding: 1rem 0.7rem 0.3rem;
    white-space: nowrap;
}

.side-tabs[b-5vtpio4nil]  .tab-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--mtl-text-muted);
    transition: color 120ms ease;
}

.side-tabs[b-5vtpio4nil]  .tab-icon svg {
    display: block;
}

/* The label must never widen the sidebar — it gives way and ellipsizes instead. */
.side-tabs[b-5vtpio4nil]  .tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-tabs[b-5vtpio4nil]  .tab-link:hover {
    background-color: #e9f1ff;
    color: var(--mtl-text);
}

.side-tabs[b-5vtpio4nil]  .tab-link:hover .tab-icon {
    color: var(--mtl-accent);
}

.side-tabs[b-5vtpio4nil]  .tab-link.active {
    background-color: #dbeafe;
    color: #1e3a8a;
}

.side-tabs[b-5vtpio4nil]  .tab-link.active .tab-icon {
    color: var(--mtl-accent-strong);
}

/* The impersonation picker's sidebar berth, pinned under the nav. Its stacked layout and
   fly-right panel live in the picker's own scoped CSS — it has only this one home. */
.side-actions[b-5vtpio4nil] {
    flex: none;
    padding: 0.75rem;
    border-top: 1px solid var(--mtl-border-soft);
}

/* Everything right of the sidebar: slim identity header over the routed page. */
.app-main[b-5vtpio4nil] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.top-menu[b-5vtpio4nil] {
    height: 4rem;
    flex: none;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--mtl-border);
    background-color: var(--mtl-surface);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 10;
}

/* The shell passes its leftover height straight down to the page; min-height: 0 at every
   link in the chain is what lets the content box be a real number. */
.main-content[b-5vtpio4nil] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The one scroll container in the app. */
.content[b-5vtpio4nil] {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.page[b-5vtpio4nil] {
    width: 100%;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 0 1.5rem 1rem;
}

/* Below 900px the sidebar folds to an icon-only rail: the labels go, the brand text
   goes, and the mark plus the icon column carry the nav. */
@media (max-width: 900px) {
    .side-nav[b-5vtpio4nil] {
        flex-basis: 4.25rem;
    }

    .brand[b-5vtpio4nil] {
        justify-content: center;
        padding: 0;
    }

    .brand-text[b-5vtpio4nil] {
        display: none;
    }

    /* Too narrow here for the tails, so the roundel takes the row on its own. */
    .brand-lockup[b-5vtpio4nil] {
        display: none;
    }

    .brand-disc[b-5vtpio4nil] {
        display: block;
    }

    .side-tabs[b-5vtpio4nil] {
        padding: 0.85rem 0.5rem;
    }

    .side-tabs[b-5vtpio4nil]  .tab-link {
        justify-content: center;
        padding: 0.6rem 0;
    }

    .side-tabs[b-5vtpio4nil]  .tab-label {
        display: none;
    }

    /* The rail keeps the icons; the section label goes with the other text. */
    .side-tabs[b-5vtpio4nil]  .nav-section {
        display: none;
    }

    /* The capsule keeps its tinted border/background in the rail, so "this session
       wears another hat" still reads without its caption. */
    .side-tabs[b-5vtpio4nil]  .zone-label {
        display: none;
    }

    .side-tabs[b-5vtpio4nil]  .acting-as-zone {
        padding: 0.3rem;
    }

    /* Rail form of the picker: the toggle folds to its icon (title carries the label)
       and the acting-as chip goes — the Exit chip still says "another hat". */
    .side-actions[b-5vtpio4nil] {
        padding: 0.6rem 0.5rem;
    }

    .side-actions[b-5vtpio4nil]  .impersonate-label {
        display: none;
    }

    .side-actions[b-5vtpio4nil]  .impersonate-toggle {
        padding: 0.55rem 0;
    }

    .side-actions[b-5vtpio4nil]  .acting-as {
        display: none;
    }
}

/* Short viewports: an exact-height shell would leave the pages almost nothing, so the
   shell stops owning the height — the document grows and scrolls as one, chrome and all. */
@media (max-height: 640px) {
    .app-shell[b-5vtpio4nil] {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .content[b-5vtpio4nil] {
        overflow: visible;
    }
}
/* /Pages/Administration.razor.rz.scp.css */
/* Administration — expenses' Administration.razor.css (its Roles section) ported onto the
   client tokens. One section so far, so no pill-tab strip; the section-card vocabulary is
   kept as-is so the next section drops straight in. The search box reuses the house
   .lib-search (app.css); everything else is this page's own. */

/* ── section card ────────────────────────────────────────────────────────── */

.section-card[b-w8brf94ad8] {
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    background: var(--mtl-surface);
    box-shadow: var(--mtl-shadow-card);
    display: flex;
    flex-direction: column;
}

.section-head[b-w8brf94ad8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--mtl-border);
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.02) 100%);
    border-radius: var(--mtl-radius-lg) var(--mtl-radius-lg) 0 0;
}

.section-head h2[b-w8brf94ad8] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mtl-text);
}

.section-head p[b-w8brf94ad8] {
    margin: 4px 0 0;
    color: var(--mtl-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.badge[b-w8brf94ad8] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #d1d5db;
    min-width: 36px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* The roster scrolls under a pinned search bar — the same treatment as the library tables
   (.lib-scroll), sized for this page's taller chrome. */
.section-body[b-w8brf94ad8] {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 380px);
    min-height: 240px;
    overflow-y: auto;
}

/* ── search (Roles) ──────────────────────────────────────────────────────── */

.search-bar[b-w8brf94ad8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mtl-border-soft);
}

.search-clear[b-w8brf94ad8] {
    border: none;
    background: var(--mtl-border-soft);
    color: var(--mtl-text-secondary);
    border-radius: 999px;
    width: 24px;
    height: 24px;
    flex: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

/* .archived-toggle (Show archived — archived people are hidden by default, revoke-only)
   moved to app.css when Certificates by person took the same control. */

/* ── Roles rows ──────────────────────────────────────────────────────────── */

.user-row[b-w8brf94ad8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 1px solid #e2e8f0;
    background: var(--mtl-surface);
    border-radius: var(--mtl-radius);
    padding: 10px 14px;
}

.user-row.archived[b-w8brf94ad8] {
    background: var(--mtl-bg);
}

.user-row.archived .user-name[b-w8brf94ad8] {
    color: #94a3b8;
}

.user-ident[b-w8brf94ad8] {
    min-width: 0;
}

.user-name[b-w8brf94ad8] {
    font-weight: 600;
    color: var(--mtl-text);
    font-size: 14px;
}

.user-email[b-w8brf94ad8] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-chips[b-w8brf94ad8] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Held = filled; not held = outline. One click grants or revokes. */
.role-chip[b-w8brf94ad8] {
    border: 1px solid var(--mtl-border-strong);
    background: var(--mtl-surface);
    color: var(--mtl-text-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}

.role-chip:hover:not(:disabled)[b-w8brf94ad8] {
    border-color: #93c5fd;
    color: var(--mtl-accent-strong);
}

.role-chip.on[b-w8brf94ad8] {
    background: var(--mtl-accent-soft);
    border-color: #93c5fd;
    color: var(--mtl-accent-strong);
}

.role-chip:disabled[b-w8brf94ad8] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── flag chips ──────────────────────────────────────────────────────────── */

.flag-chip[b-w8brf94ad8] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: 1px;
}

.archived-chip[b-w8brf94ad8]  { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.superuser-chip[b-w8brf94ad8] { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }

.empty-message[b-w8brf94ad8] {
    margin: 24px 4px;
    color: var(--mtl-text-faint);
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

@media (max-width: 900px) {
    .user-row[b-w8brf94ad8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .role-chips[b-w8brf94ad8] {
        justify-content: flex-start;
    }

    .section-body[b-w8brf94ad8] {
        max-height: none;
    }
}
/* /Pages/CertificateDetail.razor.rz.scp.css */
/* Certificate detail — Jamie's 2026-09-01 mock: record, Booking card + clickable history
   on the left, document + about-this-course on the right. Shared vocabulary (cards, chips,
   back-link, buttons) is app.css. */

.detail-head[b-ubzo6aa9ij] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.detail-head .who[b-ubzo6aa9ij] { color: var(--mtl-text-muted); font-size: 0.9rem; margin-top: 4px; }
/* the admin's Upload renewal button sits beside the state chip */
.head-actions[b-ubzo6aa9ij] { display: flex; align-items: center; gap: 12px; }

/* the Booking card (2026-09-08): kicker + sub on the left, its buttons hugging the right */
.mb-card-head[b-ubzo6aa9ij] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mb-card-actions[b-ubzo6aa9ij] { display: flex; gap: 6px; flex: none; }

.detail-grid[b-ubzo6aa9ij] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .detail-grid[b-ubzo6aa9ij] { grid-template-columns: 1fr; } }

/* .card-kicker moved to app.css (2026-09-09) — the person page's Vantage card shares it */
.kicker-sub[b-ubzo6aa9ij] { color: var(--mtl-text-muted); font-size: 0.85rem; margin-top: 3px; }

/* record: label | bold value rows with hairlines between */
.rec-rows[b-ubzo6aa9ij] { display: grid; grid-template-columns: 190px 1fr; margin: 14px 0 0; }
.rec-rows dt[b-ubzo6aa9ij], .rec-rows dd[b-ubzo6aa9ij] { padding: 10px 0; border-top: 1px solid var(--mtl-border-soft); font-size: 0.9rem; }
.rec-rows dt[b-ubzo6aa9ij] { color: var(--mtl-text-muted); }
.rec-rows dd[b-ubzo6aa9ij] { margin: 0; font-weight: 600; min-width: 0; }
.dd-muted[b-ubzo6aa9ij] { color: var(--mtl-text-muted); font-weight: 400; }

/* history: whole rows navigate; the viewed record carries the accent */
.hist-head[b-ubzo6aa9ij] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.hist-meta[b-ubzo6aa9ij] { color: var(--mtl-text-muted); font-size: 0.85rem; white-space: nowrap; }
.hist[b-ubzo6aa9ij] { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.hist th[b-ubzo6aa9ij] {
    text-align: left; color: var(--mtl-text-muted); font-weight: 600; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 8px 10px 8px 0; border-bottom: 1px solid var(--mtl-border-soft);
}
.hist td[b-ubzo6aa9ij] { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--mtl-border-soft); }
.hist tr:last-child td[b-ubzo6aa9ij] { border-bottom: none; }
.hist-row[b-ubzo6aa9ij] { cursor: pointer; }
.hist-row:hover td[b-ubzo6aa9ij] { background: var(--mtl-accent-soft); }
.hist-row.on td[b-ubzo6aa9ij] { background: var(--mtl-accent-soft); }
.hist-row.on td:first-child[b-ubzo6aa9ij] { box-shadow: inset 3px 0 0 var(--mtl-accent); }
.dot-cell[b-ubzo6aa9ij] { width: 30px; padding-left: 10px; }
.dot[b-ubzo6aa9ij] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d6dbe3; }
.dot.on[b-ubzo6aa9ij] { background: var(--mtl-accent); }
.h-issued[b-ubzo6aa9ij] { font-weight: 600; }
.h-issued.d-cur[b-ubzo6aa9ij] { color: var(--mtl-accent); }

/* document card */
.doc-file[b-ubzo6aa9ij] {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--mtl-border-soft); border-radius: var(--mtl-radius);
    padding: 10px 12px; margin-top: 12px;
}
.pdf-badge[b-ubzo6aa9ij] {
    flex: none; width: 36px; height: 36px; border-radius: 9px;
    background: var(--red-soft); color: var(--red);
    font-size: 0.66rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.doc-file-text[b-ubzo6aa9ij] { min-width: 0; }
.doc-name[b-ubzo6aa9ij] { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta[b-ubzo6aa9ij] { color: var(--mtl-text-muted); font-size: 0.78rem; margin-top: 1px; }
.doc-hint[b-ubzo6aa9ij] { margin-top: 10px; }
.doc-preview[b-ubzo6aa9ij] {
    width: 100%; height: 420px; margin-top: 10px;
    border: 1px solid var(--mtl-border-soft); border-radius: var(--mtl-radius);
    background: #fff;
}
.doc-actions[b-ubzo6aa9ij] { display: flex; gap: 8px; margin-top: 10px; }
.doc-actions .btn[b-ubzo6aa9ij] { justify-content: center; flex: 1; }
.doc-actions .doc-main[b-ubzo6aa9ij] { flex: 2; }

/* about this course */
.about-rows[b-ubzo6aa9ij] { margin-top: 10px; }
.about-row[b-ubzo6aa9ij] { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.88rem; }
.about-row .al[b-ubzo6aa9ij] { color: var(--mtl-text-muted); flex: none; }
.about-row .av[b-ubzo6aa9ij] { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.about-desc[b-ubzo6aa9ij] { margin-top: 10px; }

.desc[b-ubzo6aa9ij] { font-size: 0.92rem; color: #374151; }
.desc-muted[b-ubzo6aa9ij] { color: var(--mtl-text-muted); }
/* /Pages/CourseLibrary.razor.rz.scp.css */
/* Course library — ported 1:1 from the signed-off POC mock (2026-09-01 v3), tokens
   mapped to the client vocabulary. Shared pieces (cards, chips, buttons incl. the
   danger pair, modals, forms) live in app.css; everything here is this page's own.
   The list toolbar / pills / table / scroll container, the .nc-info and .mg-warn bands,
   .mini-note, .label-soft and textarea.input moved to app.css when Bookings and Training
   to be renewed took the same vocabulary. */

/* pill tab-group with count badges (white active tab) */
.lib-tabs[b-o887j1z3z2] { display: inline-flex; background: #eceef2; border-radius: 12px; padding: 4px; gap: 2px; margin-bottom: 16px; }
.lib-tab[b-o887j1z3z2] {
    display: inline-flex; align-items: center; gap: 8px;
    border: none; border-radius: 9px; background: none; color: var(--mtl-text-muted);
    font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 18px; cursor: pointer;
}
.lib-tab.on[b-o887j1z3z2] { background: #fff; color: var(--mtl-text); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }
.lib-count[b-o887j1z3z2] { background: #dde1e7; color: var(--mtl-text-muted); border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; font-weight: 700; }
.lib-tab.on .lib-count[b-o887j1z3z2] { background: var(--mtl-accent-soft); color: var(--mtl-accent); }

/* the duplicate nudge under a row's name (retired rows dimmed = tr.mg-off, moved to app.css) */
.mg-sim[b-o887j1z3z2] { color: var(--amber); font-size: 0.76rem; font-weight: 500; }
.mg-sim-row[b-o887j1z3z2] { margin-top: 2px; }

/* the merge's point of no return — loud on purpose */
.merge-warning[b-o887j1z3z2] {
    background: var(--red-soft); border: 1px solid #f5c8c8; color: var(--red);
    border-radius: var(--mtl-radius); padding: 12px 14px; margin: 10px 0 2px;
    font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em;
    text-align: center;
}

/* detail views */
.detail-head[b-o887j1z3z2] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.detail-head .who[b-o887j1z3z2] { color: var(--mtl-text-muted); font-size: 0.9rem; margin-top: 4px; }
.head-actions[b-o887j1z3z2] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.detail-grid[b-o887j1z3z2] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .detail-grid[b-o887j1z3z2] { grid-template-columns: 1fr; } }
.field-rows[b-o887j1z3z2] { display: grid; grid-template-columns: 170px 1fr; row-gap: 9px; font-size: 0.9rem; margin: 0; }
.field-rows dt[b-o887j1z3z2] { color: var(--mtl-text-muted); }
.field-rows dd[b-o887j1z3z2] { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* the edit-course popup's validity and warning-period rows (the same number + unit + hint shape) */
.val-row[b-o887j1z3z2] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.val-num[b-o887j1z3z2] { width: 90px; flex: none; }
.val-unit[b-o887j1z3z2] { color: var(--mtl-text-muted); font-size: 0.9rem; }
.val-hint[b-o887j1z3z2] { margin-left: auto; color: var(--mtl-text-muted); font-size: 0.85rem; }
/* /Pages/MyBookings.razor.rz.scp.css */
/* My Bookings — the holder's view of the booking queue (2026-09-08). The rows are My
   Certificates' .inv-* vocabulary (app.css); these only add what that page lacks. */

/* .imp-pill / .pill-note (the amber impersonation pill) live in app.css, shared with My Certificates. */

.inv-head.mb-head[b-ii06has9la] { position: static; }              /* no spy bar on this page — nothing to stick under */
.mb-main[b-ii06has9la] { min-width: 0; }
.mb-sub[b-ii06has9la] { color: var(--mtl-text-muted); font-size: 0.8rem; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row.mb-static[b-ii06has9la] { cursor: default; }               /* a first course has no certificate to open yet */
.inv-row.mb-static:hover .in-title[b-ii06has9la] { color: inherit; }
/* /Pages/MyCertificates.razor.rz.scp.css */
/* My Certificates: summary cards + sticky scrollspy pills over four sections (the v4
   layout signed off 2026-08-27). Shared vocabulary (cards, chips, inputs) is app.css. */

/* .imp-pill / .pill-note (the amber impersonation pill) moved to app.css — My Bookings shares it. */

/* .sum-cards / .stat / .st-* moved to app.css — the Team hub's headline tiles share them. */

/* Sticky offsets are relative to .content — the app's one scroll container — so the
   pill bar sticks to its very top (the header sits outside it and never overlaps). */
.spy-bar[b-psgklat23g] {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    position: sticky; top: 0; z-index: 15;
    background: var(--mtl-bg); padding: 10px 0 12px; margin-bottom: 6px;
}
.spy-section[b-psgklat23g] { scroll-margin-top: 66px; }

/* .fchip moved to app.css — the course chooser's sort chips share it now. */
.fsearch[b-psgklat23g] { max-width: 16rem; margin-left: auto; padding: 6px 12px; font-size: 0.86rem; border-radius: 999px; }

/* pills are the travel-size summary cards: hidden until the cards scroll away */
.spy-bar [data-spy-pill][b-psgklat23g] { display: none; }
.spy-bar.scrolled [data-spy-pill][b-psgklat23g] { display: inline-flex; animation: pill-in-b-psgklat23g 0.15s ease-out; }
@keyframes pill-in-b-psgklat23g { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spy-bar.scrolled [data-spy-pill][b-psgklat23g] { animation: none; } }

/* The four sections' row vocabulary (.inv-*, .ih-*, .exp-date, .nx-div, .never-row,
   .lapsed-row) moved to app.css on 2026-09-08 — My Bookings and a person's page share it. */
/* /Pages/People.razor.rz.scp.css */
/* Certificates by person — ported 1:1 from the POC (2026-09-08), tokens mapped to the
   client vocabulary. The people list is the management-table look (lib-*); one person is
   My Certificates' sections (inv-*, app.css) with a fourth column of row-side buttons — no
   kebab, ever. */

.pv-head[b-8z22jja4yy] { align-items: center; }
.pv-ident[b-8z22jja4yy] { display: flex; align-items: center; gap: 14px; }
.pv-avatar[b-8z22jja4yy] { width: 46px; height: 46px; font-size: 1.05rem; }
.pv-actions[b-8z22jja4yy] { display: flex; gap: 10px; flex-shrink: 0; }
.pv-flag[b-8z22jja4yy] { margin-left: 8px; vertical-align: middle; }
.pv-cell-ident[b-8z22jja4yy] { display: flex; align-items: center; gap: 10px; }
.pv-cell-ident .avatar[b-8z22jja4yy] { flex-shrink: 0; }
/* the POC's table sat on its .hist base (0.88rem); app.css's .lib-table says 0.9rem */
.pv-table[b-8z22jja4yy] { font-size: 0.88rem; }

/* one person's rows: date · name · status · actions — the buttons hug the right edge */
.inv-row.pv-row[b-8z22jja4yy] { grid-template-columns: 108px minmax(0, 1fr) auto auto; }
.pv-row-act[b-8z22jja4yy] { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.pv-row-act .btn[b-8z22jja4yy] { margin: 0; }
@media (max-width: 860px) { .inv-row.pv-row[b-8z22jja4yy] { grid-template-columns: 96px 1fr auto auto; } }

/* no scrollspy bar on this page — section heads sit in the flow, the tiles jump to them */
.pv-section .inv-head[b-8z22jja4yy] { position: static; padding: 5px 2px 6px; }
.pv-section[b-8z22jja4yy] { scroll-margin-top: 16px; }

/* The Show leavers toggle is app.css's .archived-toggle — the same control as Administration's Show archived. */

/* ---------- Vantage card (2026-09-09) ----------
   The offshore passport number from certs.PersonProfile, in its own card between the header
   and the state tiles so it reads before the certificate sections. Read-only. "Not recorded"
   is a fact, not a fault — grey, never red: an office-based person is not meant to have one. */
.vn-card[b-8z22jja4yy] { margin-bottom: 14px; padding: 14px 20px; }
.vn-card .card-kicker[b-8z22jja4yy] { margin-bottom: 8px; }
.vn-row[b-8z22jja4yy] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vn-no[b-8z22jja4yy] { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; color: var(--mtl-text); }
.vn-label[b-8z22jja4yy] { font-size: 0.85rem; color: var(--mtl-text-muted); }
.vn-none[b-8z22jja4yy] { flex: 1 1 260px; }
/* /Pages/Renewals.razor.rz.scp.css */
/* Training to be renewed — ported 1:1 from the POC (2026-09-02, the one-window / one-
   lifecycle round 2026-09-08). The date filter, toolbar, colour-coded pills, table, chips,
   muted lapsed rows and popups are the shared vocabulary in app.css; this page only widens
   the action cell for its two buttons per row. */

.act-cell.act-wide[b-7h68yjg9oh] { width: 218px; }
/* /Pages/Team.razor.rz.scp.css */
/* Team hub — ported 1:1 from the POC (2026-09-02; tiles became buttons 2026-09-08),
   tokens mapped to the client vocabulary. The headline tiles (.sum-cards / .stat / .st-*,
   the button reset included) are the shared vocabulary in app.css; the view cards below
   them are this page's own. */

.hub-cards[b-87mwwp6m7z] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px) { .hub-cards[b-87mwwp6m7z] { grid-template-columns: 1fr; } }
.hub-card[b-87mwwp6m7z] { padding: 16px 18px 14px; cursor: pointer; }
.hub-card:hover[b-87mwwp6m7z] { box-shadow: var(--mtl-shadow-hover); }
.hub-top[b-87mwwp6m7z] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.hub-eyebrow[b-87mwwp6m7z] { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mtl-text-muted); }
.hub-title[b-87mwwp6m7z] { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.hub-desc[b-87mwwp6m7z] { color: var(--mtl-text-muted); font-size: 0.86rem; margin: 0 0 12px; }
/* /Pages/UploadCertificate.razor.rz.scp.css */
/* Upload Certificate: numbered steps over a two-column grid (steps 1-3 left, document +
   summary right), the course-chooser popup with its renew table and catalogue grid, and
   the dropzone. Ported from the signed-off POC 1:1 (final effective values, POC tokens
   mapped to --mtl-*). Shared vocabulary (cards, chips, buttons, forms, modals, quick-add
   panels) is app.css. */

/* ---------- Layout: steps left, document + summary right ---------- */
.up-grid[b-soamszsytu] { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .up-grid[b-soamszsytu] { grid-template-columns: 1fr; } }
.up-side[b-soamszsytu] { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.up-card[b-soamszsytu] { padding: 20px 22px; }
.up-divider[b-soamszsytu] { border: none; border-top: 1px solid var(--mtl-border-soft); margin: 20px 0 4px; }

/* ---------- Step headings ---------- */
.step-h[b-soamszsytu] { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem; margin: 20px 0 10px; }
.up-card .step-h:first-child[b-soamszsytu] { margin-top: 0; }
.step-sub[b-soamszsytu] { font-weight: 500; font-size: 0.92rem; color: var(--mtl-text-muted); }
.step-num[b-soamszsytu] {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.sn-blue[b-soamszsytu] { background: #2563eb; }
.sn-violet[b-soamszsytu] { background: #7c3aed; }
.sn-teal[b-soamszsytu] { background: #0d9488; }
.sn-amber[b-soamszsytu] { background: #d97706; }

/* ---------- Step 2: picked-course card + placeholder tiles ---------- */
.picked-course[b-soamszsytu] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1.5px solid var(--mtl-accent); background: var(--mtl-accent-soft);
    border-radius: var(--mtl-radius); padding: 12px 14px;
}
.pc-main[b-soamszsytu] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-name[b-soamszsytu] { font-weight: 700; font-size: 0.95rem; }
.pc-meta[b-soamszsytu] { color: var(--mtl-text-muted); font-size: 0.8rem; }
/* the "Previous one: …" and "Booked · …" lines under a renewal (2026-09-08); amber when the
   previous certificate was marked Not renewing — candidate for app.css (the POC keeps these
   three in its app.css) */
.pc-prev[b-soamszsytu] { font-size: 0.8rem; color: var(--mtl-text-muted); margin-top: 5px; }
.pc-prev .chip[b-soamszsytu] { margin-right: 4px; }
.pc-warn[b-soamszsytu] { color: var(--amber); }

.pick-tile[b-soamszsytu] {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: 1.5px dashed #cfd5dd; border-radius: var(--mtl-radius);
    background: none; padding: 16px 18px; cursor: pointer; font: inherit;
}
.pick-tile:hover[b-soamszsytu] { background: var(--mtl-accent-soft); border-color: var(--mtl-accent); }
.pt-plus[b-soamszsytu] {
    width: 30px; height: 30px; border-radius: 8px; background: var(--mtl-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pt-label[b-soamszsytu] { color: var(--mtl-accent); font-weight: 700; font-size: 0.98rem; }
.pt-meta[b-soamszsytu] { margin-left: auto; color: var(--mtl-text-muted); font-size: 0.9rem; }

.wait-tile[b-soamszsytu] {
    border: 1.5px dashed #cfd5dd; border-radius: var(--mtl-radius);
    padding: 30px 18px; text-align: center; background: #fafbfc;
}
.wt-title[b-soamszsytu] { font-weight: 700; color: #4b5563; }
.wt-sub[b-soamszsytu] { color: var(--mtl-text-muted); font-size: 0.9rem; margin-top: 4px; }

/* ---------- Step 3: "COURSE DEFAULTS" band — label, value chips, edit on the right ---------- */
.dflt-note[b-soamszsytu] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    background: var(--mtl-accent-soft);
    border-radius: var(--mtl-radius); padding: 10px 14px;
    margin-bottom: 16px;
}
.dflt-label[b-soamszsytu] { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mtl-accent-strong); }
.dflt-chip[b-soamszsytu] {
    background: var(--mtl-surface); border: 1px solid #c9dcf8; color: #1e3a8a;
    border-radius: 8px; padding: 5px 11px; font-size: 0.84rem; white-space: nowrap;
}
.dflt-note .btn[b-soamszsytu] { flex: none; white-space: nowrap; margin-left: auto; }

/* ---------- Step 4: dropzone (::deep — InputFile renders the input itself) ---------- */
.dropzone[b-soamszsytu] {
    border: 1.5px dashed #cfd5dd;
    border-radius: var(--mtl-radius);
    background: #fafbfc;
}
.dz[b-soamszsytu] { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; cursor: pointer; }
.dz:hover[b-soamszsytu] { border-color: var(--mtl-accent); background: var(--mtl-accent-soft); }
.dz-text[b-soamszsytu] { font-size: 0.9rem; }
.dz-text span[b-soamszsytu] { color: var(--mtl-text-muted); font-size: 0.8rem; }
.dz[b-soamszsytu]  .dz-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.replace-wrap[b-soamszsytu]  .dz-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz.dz-done[b-soamszsytu] { border-style: solid; border-color: var(--green); background: var(--green-soft); }
/* the done state is a real button: click opens the preview (Replace file re-picks) */
.dz-click[b-soamszsytu] { width: 100%; font: inherit; text-align: left; color: inherit; }
.replace-wrap[b-soamszsytu] { position: relative; margin-top: 10px; }

/* ---------- Summary card ---------- */
.sum-title[b-soamszsytu] { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9aa1ac; margin-bottom: 8px; }
.sum-row[b-soamszsytu] { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding: 5px 0; }
.sum-row .sl[b-soamszsytu] { color: var(--mtl-text-muted); flex: none; }
.sum-row .sv[b-soamszsytu] { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sum-row .sv.type-renewal[b-soamszsytu] { color: var(--blue); }
.sum-row .sv.type-new[b-soamszsytu] { color: var(--green); }
.sum-save[b-soamszsytu] { width: 100%; justify-content: center; margin-top: 12px; }
.sum-note[b-soamszsytu] { text-align: center; color: var(--mtl-text-muted); font-size: 0.8rem; margin-top: 10px; }

/* ---------- "Choose a course" popup: tabs, search, create-new pinned right ---------- */
.chooser-box[b-soamszsytu] { max-width: 1080px; }
.chooser-scroll[b-soamszsytu] { max-height: 62vh; overflow-y: auto; margin-top: 6px; }

.course-row[b-soamszsytu] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.course-row-search[b-soamszsytu] { flex: 1 1 220px; border-radius: 999px; padding: 7px 16px; font-size: 0.86rem; }
.ch-new[b-soamszsytu] { color: var(--mtl-accent); white-space: nowrap; }

.seg[b-soamszsytu] { display: inline-flex; border: 1px solid var(--mtl-border); border-radius: 999px; padding: 3px; background: var(--mtl-surface); }
.seg-btn[b-soamszsytu] {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; border-radius: 999px; background: none; color: var(--mtl-text-muted);
    font: inherit; font-size: 0.86rem; font-weight: 600; padding: 6px 14px; cursor: pointer;
}
.seg-btn.on[b-soamszsytu] { background: var(--mtl-accent); color: #fff; }
.seg-count[b-soamszsytu] { background: rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 0 7px; font-size: 0.75rem; }
.seg-btn:not(.on) .seg-count[b-soamszsytu] { background: #eceff2; color: var(--mtl-text-muted); }

.cp-filters[b-soamszsytu] { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.cp-filters .fchip[b-soamszsytu] { font-size: 0.76rem; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.fsel[b-soamszsytu] { width: auto; padding: 5px 10px; font-size: 0.84rem; border-radius: 999px; }

/* renew table */
.chooser-table[b-soamszsytu] { width: 100%; border-collapse: collapse; }
.chooser-table th[b-soamszsytu] {
    text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #9aa1ac; padding: 8px 10px;
    border-bottom: 1px solid var(--mtl-border-soft);
    position: sticky; top: 0; background: var(--mtl-surface); z-index: 2;
}
.chooser-table td[b-soamszsytu] { padding: 7px 10px; border-bottom: 1px solid var(--mtl-border-soft); font-size: 0.87rem; vertical-align: middle; }
.chooser-table tr:hover td[b-soamszsytu] { background: var(--mtl-accent-soft); }
.chooser-table .ch-date[b-soamszsytu] { white-space: nowrap; font-weight: 600; width: 118px; }
.ch-date.exp-red[b-soamszsytu] { color: var(--red); }
.ch-date.exp-amber[b-soamszsytu] { color: var(--amber); }
.ch-date.exp-muted[b-soamszsytu] { color: var(--mtl-text-muted); font-weight: 500; }
.chooser-table .ch-name[b-soamszsytu] { font-weight: 700; margin-right: 8px; }
.chooser-table .ch-act[b-soamszsytu] { text-align: right; width: 90px; }
/* the "Lapsed — kept for the record" divider row folding lapsed rows to the bottom (2026-09-08);
   after the td rule above so it wins the padding/border — candidate for app.css */
.ch-div td[b-soamszsytu] { color: var(--mtl-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 0 4px; border-bottom: none; }
/* .row-click and .inv-empty moved to app.css — every admin list table shares them now. */

/* catalogue: BIG multi-column list, capped to the space under the course step */
.course-pick[b-soamszsytu] {
    border: 1px solid var(--mtl-border); border-radius: var(--mtl-radius);
    margin-top: 8px; overflow-y: auto; background: var(--mtl-surface);
}
.course-pick.cp-grid[b-soamszsytu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 14px;
    align-content: start;
    max-height: clamp(240px, calc(100vh - 520px), 560px);
    padding: 4px 8px;
}
.cp-row[b-soamszsytu] {
    display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    width: 100%; text-align: left; font: inherit; font-size: 0.84rem;
    background: none; border: none; border-bottom: 1px solid var(--mtl-border-soft); border-radius: 6px;
    padding: 6px 6px; cursor: pointer; color: var(--mtl-text);
}
.cp-row:hover[b-soamszsytu] { background: var(--mtl-accent-soft); }
.cp-row .tchip[b-soamszsytu] { text-align: center; }
.cp-name[b-soamszsytu] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-meta[b-soamszsytu] { color: var(--mtl-text-muted); font-size: 0.75rem; white-space: nowrap; }
.cp-empty[b-soamszsytu] { padding: 16px; color: var(--mtl-text-muted); font-size: 0.87rem; }
.cp-grid .cp-empty[b-soamszsytu] { grid-column: 1 / -1; }