/* ============================================================================
   Certiport Exam Registry — design system
   ----------------------------------------------------------------------------
   Bootstrap 5.3 carries the components; this file only sets the tokens it reads
   and adds the few pieces Bootstrap has no variable for (the rail, stat tiles,
   status pills). Nothing here restyles a Bootstrap component from scratch, so a
   class used in a template behaves the way the Bootstrap documentation says.

   Sections
     1. Tokens
     2. Bootstrap token overrides
     3. Application shell — rail, topbar, canvas
     4. Typography helpers
     5. Cards and panels
     6. Status pills
     7. Tables
     8. Forms
     9. Buttons
    10. Small components — chips, avatars, stat tiles, empty states
    11. Utilities and motion
    12. The dashboard — the tiles a day is counted in
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
    /* Surfaces. The rail is the one dark plane; everything else is light. */
    --s-rail: #101a2b;
    --s-rail-2: #1a2740;
    --s-rail-text: #94a3bd;
    --s-rail-label: #5c6b87;

    --s-ground: #f5f7fa;
    --s-surface: #ffffff;
    --s-surface-2: #fafbfd;
    --s-line: #e6ebf2;
    --s-line-2: #eff3f8;

    --s-ink: #0f1729;
    --s-ink-2: #37425a;
    --s-muted: #67748c;

    /* One accent. It marks actions and never a status. */
    --s-accent: #0f9b8e;
    --s-accent-dark: #0b7c72;
    --s-accent-soft: #e6f6f4;

    /* Semantic. Fixed meanings — see the table in the design audit.
       ok   = finished and finished well
       wait = waiting, or needs a human
       bad  = failed, or cannot proceed
       info = unusual but not wrong
       off  = not applicable, nothing to report */
    --s-ok: #0f7a4a;
    --s-ok-soft: #e6f5ee;
    --s-wait: #a56410;
    --s-wait-soft: #fdf1e0;
    --s-bad: #b3352c;
    --s-bad-soft: #fdeceb;
    --s-info: #2c5fa8;
    --s-info-soft: #eaf1fb;
    --s-off-soft: #eef1f6;

    /* The ground a certification center sits on inside the company that holds it.
       Cooler and a step darker than the page, so a nested block reads as nested
       rather than as one more card that happens to be indented. */
    --s-nest: #e7eef8;
    --s-nest-2: #d7e2f1;
    --s-nest-line: #c2d2e8;

    --s-shadow: 0 1px 2px rgba(15, 23, 41, .05), 0 4px 12px rgba(15, 23, 41, .05);
    --s-shadow-lg: 0 4px 8px rgba(15, 23, 41, .06), 0 16px 32px rgba(15, 23, 41, .09);

    --s-rail-w: 248px;
}

/* --- 2. Bootstrap token overrides --------------------------------------- */

:root {
    --bs-body-bg: var(--s-ground);
    --bs-body-color: var(--s-ink);
    --bs-body-font-size: .9375rem;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-border-color: var(--s-line);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .4375rem;
    --bs-border-radius-lg: 1rem;
    --bs-primary: #0f9b8e;
    --bs-primary-rgb: 15, 155, 142;
    --bs-link-color: var(--s-accent-dark);
    --bs-link-color-rgb: 11, 124, 114;
    --bs-link-hover-color: #085f58;
    --bs-secondary-color: var(--s-muted);
    --bs-emphasis-color: var(--s-ink);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3. Application shell ----------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-rail {
    width: var(--s-rail-w);
    flex: 0 0 var(--s-rail-w);
    background: var(--s-rail);
    color: #fff;
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .app-rail { display: none; }
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 24px;
    color: #fff;
    text-decoration: none;
}

/*
  The company mark. One file, drawn at whatever size the place it sits in asks
  for: 30px in the rail, the drawer and the top bar, 44px on the sign in card.
  It replaces a gradient tile that spelled "ER", which stood in until there was
  a logo to put there — the name is no longer rail-specific because three of
  the four places it now appears are not the rail.

  The artwork is a filled square, so it is drawn as the tile rather than sat
  inside one. The ring is what separates its dark corners from the dark rail
  behind them; on the light top bar and sign in card it is not visible.
*/
.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: none;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.brand-mark-lg { width: 44px; height: 44px; border-radius: 13px; }

.rail-name { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.rail-org { font-size: .6875rem; color: var(--s-rail-text); }

.rail-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--s-rail-label);
    padding: 0 10px;
    margin: 22px 0 8px;
}

.rail-label:first-of-type { margin-top: 0; }

.app-rail .nav-link,
.offcanvas .nav-link {
    color: var(--s-rail-text);
    font-size: .875rem;
    padding: 8px 10px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.app-rail .nav-link:hover,
.offcanvas .nav-link:hover {
    background: var(--s-rail-2);
    color: #fff;
}

.app-rail .nav-link.active,
.offcanvas .nav-link.active {
    background: var(--s-accent);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(15, 155, 142, .35);
}

.rail-count {
    margin-left: auto;
    font-size: .6875rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--s-rail-2);
    color: #cbd6e6;
    font-variant-numeric: tabular-nums;
}

.app-rail .nav-link.active .rail-count,
.offcanvas .nav-link.active .rail-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--s-line);
    padding: 0 28px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-canvas {
    padding: 28px;
    max-width: 1560px;
    width: 100%;
    flex: 1 1 auto;
}

.app-footer {
    padding: 20px 28px 28px;
    color: var(--s-muted);
    font-size: .8125rem;
}

@media (max-width: 575.98px) {
    .app-topbar { padding: 0 16px; }
    .app-canvas { padding: 18px 16px 48px; }
    .app-footer { padding: 16px; }
}

/* The sign-in screens, which carry no navigation. */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(15, 155, 142, .10), transparent 70%),
        var(--s-ground);
}

.auth-card { width: 100%; max-width: 26rem; }

/* --- 4. Typography helpers ---------------------------------------------- */

.page-title {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.022em;
    margin: 0;
}

.page-sub {
    font-size: .875rem;
    color: var(--s-muted);
    margin: 5px 0 0;
}

.sect-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s-muted);
}

.txt-sub { font-size: .8125rem; color: var(--s-muted); }
.txt-mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .8125rem; }
.txt-num { font-variant-numeric: tabular-nums; }

.breadcrumb { font-size: .8125rem; margin-bottom: 0; }
.breadcrumb a { text-decoration: none; }

/* --- 5. Cards and panels ------------------------------------------------ */

.card {
    --bs-card-border-color: var(--s-line);
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: calc(1rem - 1px);
    --bs-card-cap-bg: var(--s-surface);
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--s-shadow);
}

.card-header { border-bottom-color: var(--s-line); }

/* A card that holds only a table: the table supplies its own padding. */
.card > .table-responsive:last-child { border-bottom-left-radius: calc(1rem - 1px); border-bottom-right-radius: calc(1rem - 1px); }

/* --- The three levels of the company screens ------------------------------
   A company, a certification center inside it, and the stations, users and
   video servers inside that. All three used to be drawn in the same white with
   the same hairline and be told apart only by how far in they sat, so a station
   appeared to belong to no particular center. Each level now stands on a ground
   of its own: the company is white under an accent band, a center is a tinted
   block on it, and the lists inside a center are white again.
   ------------------------------------------------------------------------- */

/* Level 1 — the company the screen is about. Nothing else on the page carries
   the accent edge and band, which is what makes it the heading rather than one
   more card. */
.card-lead { border-top: 3px solid var(--s-accent); }

.hero-head {
    background: linear-gradient(180deg, var(--s-accent-soft), var(--s-surface));
    border-bottom: 1px solid var(--s-line);
    padding: 1.25rem;
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}

/* Level 2 — one certification center: a tinted block with an edge of its own,
   so where one center ends and the next begins is visible at a glance. */
.nest {
    background: var(--s-nest);
    /* A heavier left edge, so a block reads as one center rather than as a run of
       panels that happen to sit near each other. */
    border: 1px solid var(--s-nest-line);
    border-left: 3px solid #a9bfdc;
    border-radius: .875rem;
    overflow: hidden;
}

.nest-head {
    background: var(--s-nest-2);
    border-bottom: 1px solid var(--s-nest-line);
    padding: .875rem 1rem;
}

.nest-body { padding: 1rem; }

/* Level 3 — that center's stations, users and video servers. White on the
   tint: inside the block, and plainly inside it. */
.panel {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

/* A card in the companies list is a way in rather than a record, so it answers
   the pointer the way a link does. */
.company-card { transition: box-shadow .15s ease, transform .15s ease; }
.company-card:hover { box-shadow: var(--s-shadow-lg); transform: translateY(-2px); }

.card-name { color: var(--s-ink); text-decoration: none; }
.card-name:hover { color: var(--s-accent-dark); }

/* --- 6. Status pills ----------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.5;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* A pill that labels rather than reports state carries no dot. */
.pill-plain::before { display: none; }

.pill-ok { color: var(--s-ok); background: var(--s-ok-soft); }
.pill-wait { color: var(--s-wait); background: var(--s-wait-soft); }
.pill-bad { color: var(--s-bad); background: var(--s-bad-soft); }
.pill-info { color: var(--s-info); background: var(--s-info-soft); }
.pill-off { color: var(--s-muted); background: var(--s-off-soft); }
.pill-accent { color: var(--s-accent-dark); background: var(--s-accent-soft); }

/* --- 7. Tables ----------------------------------------------------------- */

.table {
    --bs-table-border-color: var(--s-line);
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--s-muted);
    background: var(--s-surface-2);
    border-bottom: 1px solid var(--s-line);
    padding: 11px 16px;
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: 14px 16px;
    vertical-align: middle;
    border-color: var(--s-line);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--s-surface-2); }

/* Numeric and date columns line up when the digits are the same width. */
.table .txt-num, .table td.text-end { font-variant-numeric: tabular-nums; }

/* The header stays while a long page is scrolled. */
.table-sticky > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* --- 8. Forms ------------------------------------------------------------ */

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--s-ink-2);
}

.form-control, .form-select {
    font-size: .875rem;
    border-color: var(--s-line);
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px rgba(15, 155, 142, .14);
}

.form-text { font-size: .78125rem; color: var(--s-muted); }

.form-check-input:checked {
    background-color: var(--s-accent);
    border-color: var(--s-accent);
}

.form-check-input:focus {
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px rgba(15, 155, 142, .14);
}

/* Groups the fields of a long form under a quiet heading. */
.field-group + .field-group { margin-top: 1.75rem; }

.field-group > .eyebrow {
    display: block;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--s-line);
    margin-bottom: 1rem;
}

/* --- 9. Buttons ---------------------------------------------------------- */

.btn {
    font-size: .875rem;
    font-weight: 500;
    border-radius: .5rem;
}

.btn-sm { font-size: .8125rem; border-radius: .4375rem; }

.btn-primary {
    --bs-btn-bg: var(--s-accent);
    --bs-btn-border-color: var(--s-accent);
    --bs-btn-hover-bg: var(--s-accent-dark);
    --bs-btn-hover-border-color: var(--s-accent-dark);
    --bs-btn-active-bg: var(--s-accent-dark);
    --bs-btn-active-border-color: var(--s-accent-dark);
    --bs-btn-disabled-bg: var(--s-accent);
    --bs-btn-disabled-border-color: var(--s-accent);
    box-shadow: 0 1px 2px rgba(15, 155, 142, .28), 0 3px 8px rgba(15, 155, 142, .22);
}

.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; }

.btn-outline-primary {
    --bs-btn-color: var(--s-accent-dark);
    --bs-btn-border-color: var(--s-accent);
    --bs-btn-hover-bg: var(--s-accent);
    --bs-btn-hover-border-color: var(--s-accent);
    --bs-btn-active-bg: var(--s-accent-dark);
    --bs-btn-active-border-color: var(--s-accent-dark);
}

/* The neutral button of this interface: a white surface with a hairline. */
.btn-soft {
    --bs-btn-color: var(--s-ink);
    --bs-btn-bg: var(--s-surface);
    --bs-btn-border-color: var(--s-line);
    --bs-btn-hover-color: var(--s-ink);
    --bs-btn-hover-bg: #f7f9fc;
    --bs-btn-hover-border-color: #d5dde8;
    --bs-btn-active-color: var(--s-ink);
    --bs-btn-active-bg: #f1f4f9;
    --bs-btn-active-border-color: #d5dde8;
    --bs-btn-disabled-color: var(--s-muted);
    --bs-btn-disabled-bg: var(--s-surface);
    --bs-btn-disabled-border-color: var(--s-line);
    box-shadow: 0 1px 2px rgba(15, 23, 41, .04);
}

.btn-soft:disabled, .btn-soft.disabled { box-shadow: none; }

/* --- 10. Small components ------------------------------------------------ */

.ico {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -.125em;
}

.app-rail .nav-link .ico,
.offcanvas .nav-link .ico { width: 17px; height: 17px; opacity: .85; }

.app-rail .nav-link.active .ico,
.offcanvas .nav-link.active .ico { opacity: 1; }

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 600;
    background: var(--s-accent-soft);
    color: var(--s-accent-dark);
    text-transform: uppercase;
}

.avatar-sm { width: 22px; height: 22px; font-size: .625rem; }
.avatar-lg { width: 46px; height: 46px; font-size: 1rem; }
.avatar-off { background: var(--s-off-soft); color: var(--s-muted); }

/* The header's completeness badge: a circle rather than a pill, since what it carries is either
   two letters or a short number and never a label wide enough to need one. */
.status-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.status-badge-ok { background: var(--s-ok-soft); color: var(--s-ok); }
.status-badge-wait { background: var(--s-wait-soft); color: var(--s-wait); }
.status-badge-bad { background: var(--s-bad-soft); color: var(--s-bad); }
.status-badge-off { background: var(--s-off-soft); color: var(--s-muted); }

.stat-val {
    font-size: 1.875rem;
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--s-line);
    overflow: hidden;
    margin-top: 12px;
}

.stat-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--s-accent); }

/* An active filter, stated so it can be removed one at a time. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    font-weight: 500;
    background: var(--s-accent-soft);
    color: var(--s-accent-dark);
    border-radius: 999px;
    padding: 4px 8px 4px 12px;
    text-decoration: none;
}

.chip:hover { color: var(--s-accent-dark); background: #d7ede9; }
.chip .chip-x { opacity: .6; line-height: 1; }
.chip:hover .chip-x { opacity: 1; }

.empty-state { padding: 3rem 1.25rem; text-align: center; }

.empty-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--s-accent-soft);
    color: var(--s-accent-dark);
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
}

.empty-mark .ico { width: 24px; height: 24px; }

.empty-state h2, .empty-state p { max-width: 42ch; margin-left: auto; margin-right: auto; }

/* --- The help mark and its dialog ----------------------------------------
   A question mark beside a heading, and what opens behind it. Drawn quiet on
   purpose: it stands next to a title it must not compete with, and whoever
   presses it went looking for it. It answers the pointer in the accent, which
   is the one colour in this interface that means "this does something".
   ------------------------------------------------------------------------- */

.help-dot {
    width: 18px;
    height: 18px;
    flex: none;
    padding: 0;
    border: 1px solid var(--s-line);
    border-radius: 50%;
    background: var(--s-off-soft);
    color: var(--s-ink-2);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    /* Beside a 1.5rem page title as much as beside a .6875rem eyebrow, so it is
       lifted off the baseline rather than sat on it. */
    vertical-align: middle;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.help-dot:hover {
    background: var(--s-accent-soft);
    border-color: var(--s-accent);
    color: var(--s-accent-dark);
}

.help-dot:focus-visible {
    outline: 0;
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px rgba(15, 155, 142, .14);
}

/* The head of the dialog: the mark of the subject, then its name and one line.
   Bootstrap already pushes the close button right with a margin of auto. */
.help-head { align-items: flex-start; gap: .875rem; }

.help-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--s-accent-soft);
    color: var(--s-accent-dark);
}

.help-mark .ico { width: 20px; height: 20px; }

/* One row per thing worth saying: the icon of it on the left, a sentence or
   two on the right. A hairline between rows rather than around each one — the
   list is one block of prose, not a stack of cards. */
/* The list is the body of the dialog, so it keeps the padding Bootstrap gives
   that — only the bullets and the margin of a ul are taken off. */
.help-list { list-style: none; margin: 0; }

.help-row {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 0;
}

.help-row + .help-row { border-top: 1px solid var(--s-line-2); }
.help-row:last-child { padding-bottom: 0; }

.help-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--s-accent-soft);
    color: var(--s-accent-dark);
}

.help-ico .ico { width: 17px; height: 17px; }

/* The same two meanings the status pills carry, and no others: help reports no
   state, so it stays out of the colours that do. */
.help-ico-wait { background: var(--s-wait-soft); color: var(--s-wait); }
.help-ico-info { background: var(--s-info-soft); color: var(--s-info); }

.help-term { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 2px; }
.help-text { display: block; font-size: .8125rem; color: var(--s-muted); }

/* --- Recordings ----------------------------------------------------------
   One tile per camera on the sitting's page. The stage is black whether or not
   there is anything in it, so a camera that was off leaves a hole of the same
   shape as the ones beside it rather than collapsing the row.
   ------------------------------------------------------------------------- */

.rec-tile {
    border: 1px solid var(--s-line);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--s-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rec-stage { background: #0b1220; }

.rec-player {
    width: 100%;
    height: 100%;
    display: block;
    /* Letterboxed rather than cropped: a camera's own aspect is not this tile's,
       and cutting the edges off would cut the room off. */
    object-fit: contain;
    background: #0b1220;
}

/* Nothing to play. Reads as a switched-off screen, which is what it is. */
.rec-stage-off { color: var(--s-rail-text); }
.rec-stage-off .ico { width: 22px; height: 22px; opacity: .7; }
.rec-stage-off .txt-sub { color: var(--s-rail-text); max-width: 34ch; }

/* Nothing to play *yet*, and not because anything is the matter: the cameras are
   shut to this account until an exam is being sat. The tile keeps the shape and
   the size of the player it stands in for, so the wall still reads as a wall —
   grey rather than the black of a stage that is waiting for a picture, because
   there is no picture coming until the next sitting starts. */
.rec-stage-closed {
    background: #e8ecf2;
    color: var(--s-muted);
}

.rec-stage-closed .ico { width: 34px; height: 34px; opacity: .55; }
.rec-stage-closed .rec-closed-note { font-weight: 600; color: var(--s-ink-2); }

.rec-meta { padding: .875rem 1rem; }

/* --- Photos --------------------------------------------------------------
   The same tile as a recording's, smaller and more of them to a row. A photo
   is cropped to fill its thumbnail — the whole of it is one tap away in the
   larger view — where footage is letterboxed, because there the edges matter.
   ------------------------------------------------------------------------- */

.photo-tile {
    border: 1px solid var(--s-line);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--s-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.photo-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #0b1220;
    cursor: zoom-in;
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-thumb:focus-visible { outline: 3px solid var(--s-accent, #2563eb); outline-offset: -3px; }

.photo-thumb-off { cursor: default; color: var(--s-rail-text); }
.photo-thumb-off .ico { width: 22px; height: 22px; opacity: .7; }
.photo-thumb-off .txt-sub { color: var(--s-rail-text); }

.photo-meta { padding: .625rem .75rem; min-width: 0; }

.photo-full {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: .5rem;
}

/* The pick buttons are labels around a visually hidden input that still takes
   the keyboard focus, so the ring is drawn on the label. */
.photo-pick { cursor: pointer; }
.photo-pick:focus-within { outline: 3px solid var(--s-accent, #2563eb); outline-offset: 2px; }

/* What has been taken or chosen, before it is sent. */
.photo-chosen {
    border: 1px solid var(--s-line);
    border-radius: .5rem;
    overflow: hidden;
    background: #0b1220;
}

.photo-chosen img { width: 100%; height: 100%; object-fit: cover; }

.photo-chosen-name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    text-align: center;
    word-break: break-all;
    color: var(--s-rail-text);
    font-size: .75rem;
}

.photo-chosen-remove {
    position: absolute;
    top: .25rem;
    right: .25rem;
    left: auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: .25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    background-size: .6rem;
    opacity: 1;
}

/* The bar that appears once rows are ticked. */
.bulk-bar {
    background: var(--s-accent-soft);
    border-bottom: 1px solid var(--s-line);
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}

.kv dt { font-size: .75rem; font-weight: 500; color: var(--s-muted); margin-bottom: 3px; }
.kv dd { font-size: .875rem; margin: 0; font-weight: 500; }

.modal-content { border: 0; border-radius: 1rem; box-shadow: var(--s-shadow-lg); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--s-line);
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-link-active-bg: var(--s-accent);
    --bs-dropdown-font-size: .875rem;
    box-shadow: var(--s-shadow-lg);
}

.pagination {
    --bs-pagination-color: var(--s-ink-2);
    --bs-pagination-border-color: var(--s-line);
    --bs-pagination-active-bg: var(--s-accent);
    --bs-pagination-active-border-color: var(--s-accent);
    --bs-pagination-hover-bg: var(--s-surface-2);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(15, 155, 142, .14);
    --bs-pagination-font-size: .8125rem;
}

.alert { --bs-alert-border-color: transparent; border-radius: .75rem; }

.progress { --bs-progress-bg: var(--s-line); border-radius: 999px; }
.progress-bar { background-color: var(--s-accent); }

/* --- 11. Utilities and motion -------------------------------------------- */

.surface { background: var(--s-surface); }
.hairline-top { border-top: 1px solid var(--s-line); }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-responsive { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .app-topbar { backdrop-filter: none; }
}

/* --- 12. The dashboard ---------------------------------------------------
   One tile per number the home screen counts a day in. A tile is a pale wash of
   the colour of the state it counts, with the figure itself in the full-strength
   version of the same — so the six read as six different things from across a
   room, and none of them shouts.

   The tones are the semantic five of section 6 and carry the same meanings, so
   a count and the pills in the table beneath it are never two colours for one
   state: wait is being sat, ok passed, bad failed, off nothing to report. Two
   of them are worth saying out loud:

     info  the day's total. It reports no state at all — it is every sitting,
           whatever became of it — and blue is the one tone here that says
           "a fact, not a verdict".
     done  sittings that have been sat. This is the accent, which everywhere
           else in the interface means "this does something" and never a state.
           It is borrowed here because the tone set has five members and the day
           has six numbers, and of the six this is the one nobody clicks.
   ------------------------------------------------------------------------- */

.metric {
    /* The two the variants set, and their neutral defaults. */
    --m-ink: var(--s-ink);
    --m-ground: var(--s-surface);
    --m-line: var(--s-line);

    background: var(--m-ground);
    border: 1px solid var(--m-line);
    border-radius: 1rem;
    padding: 1.125rem 1.25rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.metric-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* White rather than a second tint, so the symbol stays legible on every one of
   the six grounds without a rule per variant. */
.metric-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .72);
    color: var(--m-ink);
}

.metric-ico .ico { width: 16px; height: 16px; }

.metric-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--s-ink-2);
    line-height: 1.2;
}

/* The figure, which is what somebody crossing the room is reading. It shrinks
   with the viewport rather than at a breakpoint, because the tiles go two to a
   row on a phone and a fixed 2.5rem overflows a narrow column. */
.metric-val {
    font-size: clamp(1.875rem, 5.5vw, 2.5rem);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--m-ink);
    margin: .625rem 0 .25rem;
}

/* One line under the figure saying what it is of. Pushed to the bottom so the
   six tiles line their figures up whether or not they carry a meter. */
.metric-note {
    font-size: .75rem;
    color: var(--s-muted);
    margin: 0;
    margin-top: auto;
}

/* The pass rate, in the tile's own colour rather than the accent. */
.metric .stat-bar { margin-top: 2px; margin-bottom: 8px; background: rgba(255, 255, 255, .7); }
.metric .stat-bar > span { background: var(--m-ink); }

.metric-info { --m-ink: var(--s-info); --m-ground: var(--s-info-soft); --m-line: #cddef5; }
.metric-wait { --m-ink: var(--s-wait); --m-ground: var(--s-wait-soft); --m-line: #f3ddb8; }
.metric-done { --m-ink: var(--s-accent-dark); --m-ground: var(--s-accent-soft); --m-line: #bfe4de; }
.metric-ok { --m-ink: var(--s-ok); --m-ground: var(--s-ok-soft); --m-line: #bfe3d0; }
.metric-bad { --m-ink: var(--s-bad); --m-ground: var(--s-bad-soft); --m-line: #f5cfcb; }
.metric-off { --m-ink: var(--s-ink-2); --m-ground: var(--s-off-soft); --m-line: #dfe4ec; }

/* The day picker. Sized to its own content rather than to the flex row, which
   on a narrow screen stretched it across the width and left the arrows adrift. */
.daypick { width: auto; min-width: 9.5rem; }