/* Transport module design layer.
   Shipped as an RCL static asset (Microsoft.NET.Sdk.Razor picks wwwroot/** up
   automatically — no .csproj entry needed), linked from BlazorSchool/wwwroot/index.html as
   _content/BlazorSchool.Modules.Transport/css/transport.css, exactly like accounting.css.

   SCOPING — this differs from accounting.css on purpose.
   accounting.css can require every rule to start with .module-accounting because MainLayout
   adds that class for /accounting/* routes. There is no equivalent .module-transport class,
   and adding one would mean editing BlazorSchool/Layout/MainLayout.razor, which is out of
   scope here. So this file is scoped the other way: every selector either uses one of the
   module's own unique prefixes (.th- .tf- .tr- .trb-) or is nested under one of the four
   page-root classes below. Never add an unscoped element or Bootstrap-class selector.

   COLOUR — mapped by ROLE, not by hue (see brand-tokens.css header).
   The module previously used a Tailwind-slate palette that exists nowhere else in the
   product, and zero design tokens. Slate greys collapse onto the --n-* ramp; the
   capacity meter's green/red pair is SEMANTIC (it mirrors the bg-success/bg-danger badge
   rendered from the same RiderCount > Capacity test) and keeps its green; the one green
   BUTTON fill is chrome and becomes brand indigo. */

/* ── Page roots ─────────────────────────────────────────────────
   Arabic RTL is the product default; each page carried its own identical rule. */
.th-page,
.tf-page,
.tr-page,
.trb-page {
    direction: rtl;
}

/* ── Stat cards (TransportHome) ─────────────────────────────────
   The module's one surface treatment: route count, rider totals, moved-subscription count. */
.th-card {
    background: var(--n-000);
    border: 1px solid var(--n-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    text-align: center;
    block-size: 100%;
}

.th-card .th-label {
    color: var(--n-500);
    font-size: 0.85rem;
    margin-block-end: 0.35rem;
}

.th-card .th-value {
    color: var(--n-900);
    font-size: 1.75rem;
    font-weight: 700;
    /* Counts stack cleanly when several tiles sit side by side. */
    font-variant-numeric: tabular-nums;
}

/* "Subscriptions moved, needs review" is an attention state, not a failure — warning,
   not danger. Was #b45309, an orange belonging to no scale the product defines. */
.th-card.th-warn .th-value {
    color: var(--warning-700);
}

/* ── Route capacity meter (TransportRoutes) ─────────────────────
   SEMANTIC, not chrome. The fill answers "is this route within capacity?", the same
   question the bg-success / bg-danger badge on TransportRouteBoard answers from the
   identical RiderCount > Capacity test. Recolouring the green to indigo here would
   desynchronise the two views of one fact, so the green stays green.
   The inline width:%, set on .tr-cap-fill from markup, fills from the inline start —
   the right-hand edge under RTL — which is correct and unchanged. */
.tr-cap-wrap {
    background: var(--n-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    block-size: 14px;
    min-inline-size: 90px;
    position: relative;
}

.tr-cap-fill {
    background: var(--success-500);
    block-size: 100%;
}

.tr-cap-fill.tr-over {
    background: var(--danger-500);
}

.tr-cap-text {
    font-size: 11px;
    color: var(--n-900);
    margin-block-start: 2px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Unassigned-rider rows (TransportRouteBoard) ────────────────
   Only the divider is lifted; .trb-list / .trb-name / .trb-amount are that one page's
   flex geometry and stay with it. */
.trb-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-block: 6px;
    padding-inline: 4px;
    border-block-end: 1px solid var(--n-100);
}

/* ── Chrome: primary action buttons ─────────────────────────────
   CHROME, not semantic. The "add this student to the route" button is a primary action
   that happens to be marked up as .btn-success; nothing about it reports a success state.
   Same call, and the same treatment, as accounting.css makes for its own .btn-success.
   Bootstrap's own rules are single-class (0,1,0); these are (0,2,0) and win without
   !important. Deliberately NOT applied to .badge.bg-success — that one IS semantic.
   .btn-primary / .btn-outline-primary are left alone: they are overridden app-wide in
   BlazorSchool/wwwroot/css/app.css and are not this module's to decide. */
.th-page .btn-success,
.tf-page .btn-success,
.tr-page .btn-success,
.trb-page .btn-success {
    background: var(--brand-grad-accent);
    border: 0;
    color: var(--n-000);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.th-page .btn-success:hover,
.tf-page .btn-success:hover,
.tr-page .btn-success:hover,
.trb-page .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--n-000);
}

.th-page .btn:focus-visible,
.tf-page .btn:focus-visible,
.tr-page .btn:focus-visible,
.trb-page .btn:focus-visible {
    outline: 2px solid var(--brand-bright);
    outline-offset: 2px;
    box-shadow: none;
}