.fi-pagination {
    grid-template-columns: auto 1fr auto;
}

.fi-pagination .fi-pagination-overview {
    grid-column: 1;
}

.fi-pagination .fi-pagination-records-per-page-select-ctn {
    grid-column-start: 3;
    justify-self: end;
}

.fi-pagination:has(.fi-pagination-items),
.fi-pagination:has(.fi-pagination-next-btn) {
    grid-template-columns: auto 1fr auto auto;
}

.fi-pagination:has(.fi-pagination-items) .fi-pagination-items,
.fi-pagination:has(.fi-pagination-next-btn) .fi-pagination-next-btn {
    grid-column-start: 4;
}

html,
body,
.fi-body {
    font-family: Inter, "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.fi-main {
    background: rgb(248, 250, 252);
}

.dark .fi-main {
    background: rgb(2, 6, 23);
}

.fi-header-heading {
    color: rgb(15, 23, 42);
    font-size: clamp(1.35rem, 1vw + 1rem, 1.85rem);
    font-weight: 780;
    letter-spacing: 0;
}

.dark .fi-header-heading {
    color: rgb(248, 250, 252);
}

/* Auth screens */
.fi-simple-layout {
    min-height: 100dvh;
    background:
        linear-gradient(180deg, rgba(12, 56, 138, 0.08), rgba(248, 250, 252, 0.98) 22rem),
        rgb(248, 250, 252);
    color: rgb(15, 23, 42);
    overflow: hidden;
    position: relative;
}

.fi-simple-layout::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, transparent, black 28%, black 72%, transparent);
    opacity: 0.42;
}

.fi-simple-layout::after {
    content: "";
    position: fixed;
    right: max(1rem, 7vw);
    top: 8rem;
    width: min(34rem, 42vw);
    height: 28rem;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 18%, rgba(76, 167, 53, 0.65) 19%, rgba(76, 167, 53, 0.65) 22%, transparent 23%),
        linear-gradient(28deg, transparent 46%, rgba(191, 219, 254, 0.86) 47%, rgba(191, 219, 254, 0.86) 50%, transparent 51%),
        linear-gradient(146deg, transparent 58%, rgba(12, 56, 138, 0.4) 59%, rgba(12, 56, 138, 0.4) 62%, transparent 63%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    opacity: 0.6;
    transform: rotate(-2deg);
}

.fi-simple-main-ctn {
    min-height: 100dvh;
    padding: clamp(1rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

.fi-simple-main-ctn::before {
    content: "National Boda Register\A Ride Smart | Ride Safe | Build Uganda";
    position: fixed;
    left: clamp(1rem, 4vw, 3rem);
    top: clamp(4.4rem, 7vw, 5.2rem);
    white-space: pre;
    color: rgb(71, 85, 105);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
}

.fi-simple-main-ctn::after {
    background: url("/images/brand/nbr-logo.jpeg") left center / contain no-repeat;
    content: "";
    height: 3rem;
    left: clamp(1rem, 4vw, 3rem);
    position: fixed;
    top: clamp(1rem, 3vw, 2rem);
    width: 9rem;
}

.fi-simple-main {
    width: min(100%, 29rem) !important;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(14px);
    padding: clamp(1.25rem, 3vw, 2.25rem) !important;
    position: relative;
}

.fi-simple-main::before {
    content: "System access";
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgb(234, 88, 12);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.fi-simple-main::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 4px 0 rgba(234, 88, 12, 0.82);
}

.fi-simple-header {
    margin-bottom: 1.35rem !important;
    text-align: left !important;
}

.fi-simple-header .fi-logo,
.fi-simple-header img {
    display: none !important;
}

.fi-simple-header-heading {
    color: rgb(15, 23, 42) !important;
    font-size: clamp(1.65rem, 3vw, 2.25rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    margin-top: 0 !important;
}

.fi-simple-header-subheading {
    color: rgb(100, 116, 139) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.fi-simple-page-content form,
.fi-simple-page-content .fi-form {
    gap: 1rem !important;
}

.fi-simple-page-content .fi-fo-field-wrp-label,
.fi-simple-page-content .fi-fo-field-wrp-label span,
.fi-simple-page-content label {
    color: rgb(30, 41, 59) !important;
    font-size: 0.82rem !important;
    font-weight: 760 !important;
}

.fi-simple-page-content .fi-input-wrp {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 7px !important;
    background: rgb(255, 255, 255) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.fi-simple-page-content .fi-input-wrp:focus-within {
    border-color: rgba(234, 88, 12, 0.82) !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14), 0 12px 30px rgba(15, 23, 42, 0.06) !important;
}

.fi-simple-page-content .fi-input {
    color: rgb(15, 23, 42) !important;
    font-size: 0.95rem !important;
    min-height: 2.9rem !important;
}

.fi-simple-page-content .fi-checkbox-input {
    border-radius: 5px !important;
}

.fi-simple-page-content .fi-btn {
    border-radius: 7px !important;
    font-weight: 820 !important;
    min-height: 2.9rem;
}

.fi-simple-page-content .fi-btn.fi-color-primary {
    background: rgb(234, 88, 12) !important;
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.22) !important;
    color: rgb(255, 255, 255) !important;
}

.fi-simple-page-content .fi-btn.fi-color-primary:hover,
.fi-simple-page-content .fi-btn.fi-color-primary:focus-visible {
    background: rgb(194, 65, 12) !important;
}

@media (max-width: 860px) {
    .fi-simple-layout::after,
    .fi-simple-main-ctn::before,
    .fi-simple-main-ctn::after {
        display: none;
    }

    .fi-simple-main-ctn {
        align-items: center;
        padding: 1rem;
    }

    .fi-simple-main {
        margin-top: 0 !important;
    }
}

/* ── Chrome height tracking: topbar (4rem/64px) + domain-switcher (3.2rem/~51px) ── */
:root {
    --nbr-topbar-h:    4rem;                                   /* Filament topbar */
    --nbr-dswitcher-h: 3.2rem;                                 /* domain-switcher bar */
    --nbr-chrome-h:    calc(var(--nbr-topbar-h) + var(--nbr-dswitcher-h)); /* 7.2rem / ~115px */

    /* NBR brand accent (Deep Blue #0C388A) — used for structural chrome:
       active tabs, KPI accents, ranking bars, badges, primary highlights.
       Semantic amber (pending status) and founder gold are intentionally kept. */
    --nbr-accent:        rgb(12, 56, 138);
    --nbr-accent-strong: rgb(12, 84, 164);
    --nbr-accent-text:   rgb(12, 56, 138);
    --nbr-accent-soft:   rgba(12, 56, 138, 0.10);
    --nbr-accent-softer: rgba(12, 56, 138, 0.16);
    --nbr-accent-border: rgba(12, 56, 138, 0.45);
    --nbr-green:         rgb(76, 167, 53);
}
.dark :root,
.dark {
    --nbr-accent-text:   rgb(125, 164, 226);
}

/* ── Sidebar: pin all hub sidenav states below both sticky bars ── */
.fi-sidebar {
    top: var(--nbr-chrome-h) !important;
    height: calc(100dvh - var(--nbr-chrome-h)) !important;
    max-height: calc(100dvh - var(--nbr-chrome-h)) !important;
}

.fi-sidebar .fi-sidebar-header-ctn {
    display: none !important;
}

.fi-sidebar .fi-sidebar-nav {
    height: calc(100dvh - var(--nbr-chrome-h)) !important;
    max-height: calc(100dvh - var(--nbr-chrome-h)) !important;
}

.nbr-domain-switcher {
    position: sticky;
    top: 4rem;
    z-index: 29;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
}

.dark .nbr-domain-switcher {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(17, 24, 39, 0.94);
}

.nbr-domain-switcher__inner {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.45rem 0.9rem;
    scrollbar-width: none;
}

.nbr-domain-switcher__inner::-webkit-scrollbar {
    display: none;
}

.nbr-domain-switcher__item {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0 0.7rem;
    color: rgb(71, 85, 105);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.nbr-domain-switcher__item:hover,
.nbr-domain-switcher__item:focus-visible {
    border-color: rgba(17, 24, 39, 0.12);
    background: rgba(249, 250, 251, 0.95);
    color: rgb(17, 24, 39);
    outline: none;
}

.nbr-domain-switcher__item--active {
    border-color: var(--nbr-accent-border);
    background: var(--nbr-accent-soft);
    color: var(--nbr-accent-text);
}

.dark .nbr-domain-switcher__item {
    color: rgb(209, 213, 219);
}

.dark .nbr-domain-switcher__item:hover,
.dark .nbr-domain-switcher__item:focus-visible {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgb(249, 250, 251);
}

.dark .nbr-domain-switcher__item--active {
    border-color: var(--nbr-accent-border);
    background: var(--nbr-accent-softer);
    color: var(--nbr-accent-text);
}

.nbr-domain-switcher__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.nbr-domain-dashboard {
    display: grid;
    gap: 1rem;
}

.nbr-domain-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.nbr-domain-dashboard__stat,
.nbr-domain-dashboard__module {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dark .nbr-domain-dashboard__stat,
.dark .nbr-domain-dashboard__module {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(17, 24, 39);
}

.nbr-domain-dashboard__stat {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
}

.nbr-domain-dashboard__stat-label {
    color: rgb(107, 114, 128);
    font-size: 0.78rem;
    font-weight: 600;
}

.dark .nbr-domain-dashboard__stat-label {
    color: rgb(156, 163, 175);
}

.nbr-domain-dashboard__stat-value {
    color: rgb(17, 24, 39);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.dark .nbr-domain-dashboard__stat-value {
    color: rgb(249, 250, 251);
}

.nbr-domain-dashboard__module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.nbr-domain-dashboard__module {
    display: flex;
    min-height: 4rem;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: rgb(31, 41, 55);
    font-weight: 650;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.nbr-domain-dashboard__module:hover,
.nbr-domain-dashboard__module:focus-visible {
    border-color: var(--nbr-accent-border);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.dark .nbr-domain-dashboard__module {
    color: rgb(243, 244, 246);
}

.nbr-domain-dashboard__module-icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--nbr-accent);
}

.nbr-command-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
}

.nbr-command-stat,
.nbr-command-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 10px 30px rgba(15, 23, 42, 0.025);
}

.dark .nbr-command-stat,
.dark .nbr-command-panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(17, 24, 39);
}

.nbr-command-stat {
    display: grid;
    gap: 0.35rem;
    min-height: 5.75rem;
    overflow: hidden;
    padding: 0.8rem 0.9rem;
    position: relative;
}

.nbr-command-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--nbr-accent);
}

.nbr-command-stat[data-tone="green"]::before,
.nbr-command-breakdown__item[data-tone="green"] .nbr-command-breakdown__bar span,
.nbr-command-queue__item[data-tone="green"] b,
.nbr-command-health__item[data-tone="green"]::before {
    background: rgb(34, 197, 94);
}

.nbr-command-stat[data-tone="blue"]::before,
.nbr-command-breakdown__item[data-tone="blue"] .nbr-command-breakdown__bar span,
.nbr-command-queue__item[data-tone="blue"] b,
.nbr-command-health__item[data-tone="blue"]::before {
    background: rgb(14, 165, 233);
}

.nbr-command-stat[data-tone="red"]::before,
.nbr-command-breakdown__item[data-tone="red"] .nbr-command-breakdown__bar span,
.nbr-command-queue__item[data-tone="red"] b,
.nbr-command-health__item[data-tone="red"]::before {
    background: rgb(239, 68, 68);
}

.nbr-command-stat[data-tone="slate"]::before,
.nbr-command-breakdown__item[data-tone="slate"] .nbr-command-breakdown__bar span,
.nbr-command-queue__item[data-tone="slate"] b,
.nbr-command-health__item[data-tone="slate"]::before {
    background: rgb(100, 116, 139);
}

.nbr-command-stat[data-tone="violet"]::before,
.nbr-command-breakdown__item[data-tone="violet"] .nbr-command-breakdown__bar span,
.nbr-command-queue__item[data-tone="violet"] b,
.nbr-command-health__item[data-tone="violet"]::before {
    background: rgb(124, 58, 237);
}

.nbr-command-stat__label,
.nbr-command-stat__meta,
.nbr-command-panel__header span,
.nbr-command-density__label span,
.nbr-command-feed__row span,
.nbr-command-queue__item span,
.nbr-command-activity__row span,
.nbr-command-health__item span,
.nbr-command-health__item small,
.nbr-command-empty {
    color: rgb(107, 114, 128);
}

.dark .nbr-command-stat__label,
.dark .nbr-command-stat__meta,
.dark .nbr-command-panel__header span,
.dark .nbr-command-density__label span,
.dark .nbr-command-feed__row span,
.dark .nbr-command-queue__item span,
.dark .nbr-command-activity__row span,
.dark .nbr-command-health__item span,
.dark .nbr-command-health__item small,
.dark .nbr-command-empty {
    color: rgb(156, 163, 175);
}

.nbr-command-stat__label,
.nbr-command-panel__header span,
.nbr-command-health__item span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.nbr-command-stat__value {
    color: rgb(17, 24, 39);
    font-size: 1.3rem;
    font-weight: 750;
    line-height: 1;
}

.dark .nbr-command-stat__value,
.dark .nbr-command-panel h2,
.dark .nbr-command-density__label strong,
.dark .nbr-command-density__value,
.dark .nbr-command-feed__row strong,
.dark .nbr-command-queue__item strong,
.dark .nbr-command-activity__row strong,
.dark .nbr-command-health__item strong {
    color: rgb(249, 250, 251);
}

.nbr-command-stat__meta,
.nbr-command-feed__row span,
.nbr-command-queue__item span,
.nbr-command-activity__row span,
.nbr-command-health__item small {
    font-size: 0.74rem;
}

.nbr-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.75fr);
    gap: 0.85rem;
}

.nbr-command-grid--map {
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.72fr);
}

.nbr-command-grid--primary {
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.8fr);
}

.nbr-command-panel {
    min-width: 0;
    padding: 0.95rem;
}

.nbr-command-panel--map {
    padding-bottom: 0.75rem;
}

.nbr-command-panel__header {
    align-items: center;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.1rem 0 0.75rem;
    padding-bottom: 0.65rem;
}

.dark .nbr-command-panel__header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nbr-command-panel h2 {
    color: rgb(17, 24, 39);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.2;
    margin: 0;
}

.nbr-command-density,
.nbr-command-feed,
.nbr-command-queue,
.nbr-command-activity,
.nbr-command-health,
.nbr-command-breakdown {
    display: grid;
    gap: 0.55rem;
}

.nbr-command-density__row {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(9rem, 0.8fr) minmax(7rem, 1fr) 4rem;
    min-height: 2.35rem;
}

.nbr-command-density__label {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.nbr-command-density__label strong,
.nbr-command-density__value,
.nbr-command-feed__row strong,
.nbr-command-queue__item strong,
.nbr-command-activity__row strong,
.nbr-command-health__item strong {
    color: rgb(31, 41, 55);
}

.nbr-command-density__label span,
.nbr-command-density__label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nbr-command-density__bar,
.nbr-command-breakdown__bar {
    background: rgba(17, 24, 39, 0.07);
    border-radius: 999px;
    height: 0.5rem;
    overflow: hidden;
}

.dark .nbr-command-density__bar,
.dark .nbr-command-breakdown__bar {
    background: rgba(255, 255, 255, 0.1);
}

.nbr-command-density__bar span,
.nbr-command-breakdown__bar span {
    background: var(--nbr-accent);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 0.25rem;
}

.nbr-command-density__value {
    font-size: 0.92rem;
    justify-self: end;
}

.nbr-command-breakdown__item {
    display: grid;
    gap: 0.4rem;
}

.nbr-command-breakdown__item > div:first-child,
.nbr-command-queue__item,
.nbr-command-activity__row,
.nbr-command-feed__row,
.nbr-command-health__item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.nbr-command-breakdown__item span,
.nbr-command-breakdown__chip span {
    color: rgb(75, 85, 99);
    font-size: 0.82rem;
    font-weight: 650;
}

.dark .nbr-command-breakdown__item span,
.dark .nbr-command-breakdown__chip span {
    color: rgb(209, 213, 219);
}

.nbr-command-breakdown__item strong {
    color: rgb(17, 24, 39);
}

.dark .nbr-command-breakdown__item strong {
    color: rgb(249, 250, 251);
}

.nbr-command-breakdown--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.75rem;
}

.nbr-command-breakdown__chip {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    background: rgb(255, 255, 255);
    color: rgb(31, 41, 55);
    display: grid;
    gap: 0.18rem;
    min-height: 3.2rem;
    overflow: hidden;
    padding: 0.55rem 0.65rem;
    position: relative;
}

.nbr-command-breakdown__chip::before {
    background: var(--nbr-accent);
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: 3px;
}

.nbr-command-breakdown__chip[data-tone="green"]::before {
    background: rgb(34, 197, 94);
}

.nbr-command-breakdown__chip[data-tone="blue"]::before {
    background: rgb(14, 165, 233);
}

.nbr-command-breakdown__chip[data-tone="red"]::before {
    background: rgb(239, 68, 68);
}

.nbr-command-breakdown__chip[data-tone="slate"]::before {
    background: rgb(100, 116, 139);
}

.nbr-command-breakdown__chip[data-tone="violet"]::before {
    background: rgb(124, 58, 237);
}

.dark .nbr-command-breakdown__chip {
    background: rgb(17, 24, 39);
}

.nbr-command-breakdown__chip span,
.nbr-command-breakdown__chip strong {
    color: rgb(31, 41, 55);
}

.dark .nbr-command-breakdown__chip span,
.dark .nbr-command-breakdown__chip strong {
    color: rgb(249, 250, 251);
}

.nbr-command-feed__row,
.nbr-command-activity__row,
.nbr-command-queue__item {
    border-bottom: 1px solid rgba(17, 24, 39, 0.07);
    min-height: 3rem;
    padding-bottom: 0.55rem;
}

.dark .nbr-command-feed__row,
.dark .nbr-command-activity__row,
.dark .nbr-command-queue__item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nbr-command-feed__row:last-child,
.nbr-command-activity__row:last-child,
.nbr-command-queue__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nbr-command-feed__row {
    grid-template-columns: minmax(11rem, 1.2fr) minmax(9rem, 0.9fr) minmax(6rem, 0.55fr);
    display: grid;
}

.nbr-command-feed__row > div,
.nbr-command-activity__row > div,
.nbr-command-queue__item > div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.nbr-command-feed__row span,
.nbr-command-feed__row strong,
.nbr-command-activity__row span,
.nbr-command-activity__row strong,
.nbr-command-queue__item span,
.nbr-command-queue__item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nbr-command-queue__item b {
    align-items: center;
    background: var(--nbr-accent);
    border-radius: 999px;
    color: rgb(255, 255, 255);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.55rem;
}

.nbr-command-health__item {
    border-bottom: 1px solid rgba(17, 24, 39, 0.07);
    min-height: 3.2rem;
    padding: 0 0 0.55rem 0.85rem;
    position: relative;
}

.dark .nbr-command-health__item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nbr-command-health__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nbr-command-health__item::before {
    content: "";
    position: absolute;
    inset: 0.45rem auto auto 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--nbr-accent);
}

.nbr-command-health__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.nbr-command-health__item small {
    grid-column: 1 / -1;
}

.nbr-command-empty {
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 900px) {
    .nbr-command-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nbr-command-grid,
    .nbr-command-grid--primary,
    .nbr-command-grid--map {
        grid-template-columns: 1fr;
    }
}

/* ── Leaflet map container ────────────────────────────────────────────────── */
.nbr-command-map-leaflet {
    border-radius: 8px;
    height: 15.5rem;
    min-height: 15.5rem;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* Ensure Leaflet tile layer is not clipped outside the rounded container */
.nbr-command-map-leaflet .leaflet-container {
    border-radius: inherit;
    height: 100%;
}

/* Popup typography */
.nbr-command-map-leaflet .leaflet-popup-content {
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0.6rem 0.7rem;
}

.nbr-command-map-leaflet .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}


/* ── Map shell layout (Leaflet + summary sidebar) ───────────────────────── */
.nbr-command-map-shell {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) 11rem;
}

.nbr-command-map__summary {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.nbr-command-map__summary div {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    display: grid;
    gap: 0.22rem;
    padding: 0.62rem;
}

.dark .nbr-command-map__summary div {
    border-color: rgba(255, 255, 255, 0.1);
}

.nbr-command-map__summary span,
.nbr-command-map__summary small,
.nbr-command-legend {
    color: rgb(100, 116, 139);
    font-size: 0.76rem;
    font-weight: 650;
}

.dark .nbr-command-map__summary span,
.dark .nbr-command-map__summary small,
.dark .nbr-command-legend {
    color: rgb(148, 163, 184);
}

.nbr-command-map__summary strong {
    color: rgb(15, 23, 42);
    font-size: 1rem;
}

.dark .nbr-command-map__summary strong {
    color: rgb(248, 250, 252);
}

.nbr-command-trend {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 11.75rem;
}

.nbr-command-trend__day {
    align-items: center;
    display: grid;
    gap: 0.45rem;
}

.nbr-command-trend__day strong {
    color: rgb(100, 116, 139);
    font-size: 0.72rem;
    text-align: center;
}

.dark .nbr-command-trend__day strong {
    color: rgb(148, 163, 184);
}

.nbr-command-trend__bars {
    align-items: end;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.05), transparent);
    border-radius: 999px;
    display: flex;
    gap: 0.18rem;
    height: 9.75rem;
    justify-content: center;
    padding: 0.45rem 0.2rem;
}

.dark .nbr-command-trend__bars {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.06), transparent);
}

.nbr-command-trend__bar {
    border-radius: 999px;
    display: block;
    min-height: 0.25rem;
    width: 0.42rem;
}

.nbr-command-trend__bar--riders {
    background: var(--nbr-accent);
}

.nbr-command-trend__bar--motorcycles {
    background: var(--nbr-green);
}

.nbr-command-legend {
    display: flex;
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.nbr-command-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.nbr-command-legend b {
    border-radius: 999px;
    display: inline-block;
    height: 0.55rem;
    width: 0.55rem;
}

.nbr-command-legend__rider {
    background: var(--nbr-accent);
}

.nbr-command-legend__motorcycle {
    background: var(--nbr-green);
}

@media (max-width: 720px) {
    .nbr-command-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nbr-command-map-shell {
        grid-template-columns: 1fr;
    }

    .nbr-command-map-leaflet {
        height: 14rem;
        min-height: 14rem;
    }
}

@media (max-width: 520px) {
    .nbr-command-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .nbr-command-density__row,
    .nbr-command-feed__row {
        grid-template-columns: 1fr;
    }

    .nbr-command-density__value {
        justify-self: start;
    }

    .nbr-command-breakdown--compact {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COORDINATE PICKER — District edit / create form
   ═══════════════════════════════════════════════════════════════════════════ */

.nbr-coord-picker {
    display: grid;
    gap: 0.5rem;
}

.nbr-coord-picker__map {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    height: 22rem;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.nbr-coord-picker__map .leaflet-container {
    border-radius: inherit;
    height: 100%;
}

.nbr-coord-picker__hint {
    align-items: center;
    color: rgb(100, 116, 139);
    display: flex;
    font-size: 0.78rem;
    gap: 0.4rem;
    margin: 0;
}

.nbr-coord-picker__hint svg {
    color: var(--nbr-accent);
    flex-shrink: 0;
    height: 0.95rem;
    width: 0.95rem;
}

.dark .nbr-coord-picker__hint {
    color: rgb(148, 163, 184);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIDER REGISTRATION PREVIEW — final wizard step
   ═══════════════════════════════════════════════════════════════════════════ */

.nbr-rider-preview {
    display: grid;
    gap: 1rem;
}

.nbr-rider-preview__credential {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
}

.nbr-rider-preview__qr-card,
.nbr-rider-preview__summary,
.nbr-rider-preview__panel {
    background: rgb(248, 250, 252);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
}

.dark .nbr-rider-preview__qr-card,
.dark .nbr-rider-preview__summary,
.dark .nbr-rider-preview__panel {
    background: rgb(15, 23, 42);
    border-color: rgba(255, 255, 255, 0.09);
}

.nbr-rider-preview__qr-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.nbr-rider-preview__qr,
.nbr-rider-preview__qr-placeholder {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    height: 10rem;
    width: 10rem;
}

.nbr-rider-preview__qr {
    object-fit: contain;
    padding: 0.35rem;
}

.nbr-rider-preview__qr-placeholder {
    align-items: center;
    color: rgb(148, 163, 184);
    display: flex;
    justify-content: center;
}

.nbr-rider-preview__qr-placeholder svg {
    height: 3rem;
    width: 3rem;
}

.nbr-rider-preview__qr-meta {
    display: grid;
    gap: 0.2rem;
}

.nbr-rider-preview__qr-meta span,
.nbr-rider-preview__details dt,
.nbr-rider-preview__panel dt {
    color: rgb(100, 116, 139);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dark .nbr-rider-preview__qr-meta span,
.dark .nbr-rider-preview__details dt,
.dark .nbr-rider-preview__panel dt {
    color: rgb(148, 163, 184);
}

.nbr-rider-preview__qr-meta strong {
    color: rgb(15, 23, 42);
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 0.86rem;
    font-weight: 800;
}

.dark .nbr-rider-preview__qr-meta strong {
    color: rgb(248, 250, 252);
}

.nbr-rider-preview__qr-action {
    background: rgb(234, 88, 12);
    border: 0;
    border-radius: 6px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
}

.nbr-rider-preview__qr-action:disabled {
    cursor: wait;
    opacity: 0.65;
}

.nbr-rider-preview__summary {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.nbr-rider-preview__headline {
    align-items: center;
    display: flex;
    gap: 0.8rem;
    min-width: 0;
}

.nbr-rider-preview__avatar {
    align-items: center;
    background: linear-gradient(135deg, rgb(37, 99, 235), rgb(20, 184, 166));
    border-radius: 50%;
    color: rgb(255, 255, 255);
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 800;
    height: 2.8rem;
    justify-content: center;
    width: 2.8rem;
}

.nbr-rider-preview__headline h3 {
    color: rgb(15, 23, 42);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.dark .nbr-rider-preview__headline h3 {
    color: rgb(248, 250, 252);
}

.nbr-rider-preview__headline p {
    color: rgb(100, 116, 139);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.35rem;
    margin: 0.15rem 0 0;
}

.nbr-rider-preview__details,
.nbr-rider-preview__panel dl {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.nbr-rider-preview__details div,
.nbr-rider-preview__panel dl div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.nbr-rider-preview__details dd,
.nbr-rider-preview__panel dd {
    color: rgb(15, 23, 42);
    font-size: 0.82rem;
    font-weight: 650;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .nbr-rider-preview__details dd,
.dark .nbr-rider-preview__panel dd {
    color: rgb(226, 232, 240);
}

.nbr-rider-preview__status {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    width: fit-content;
}

.nbr-rider-preview__status[data-status="pending"] { background: rgba(245, 158, 11, 0.14); color: rgb(180, 83, 9); }
.nbr-rider-preview__status[data-status="approved"] { background: rgba(34, 197, 94, 0.14); color: rgb(21, 128, 61); }
.nbr-rider-preview__status[data-status="active"] { background: rgba(34, 197, 94, 0.14); color: rgb(21, 128, 61); }
.nbr-rider-preview__status[data-status="suspended"] { background: rgba(239, 68, 68, 0.14); color: rgb(185, 28, 28); }
.nbr-rider-preview__status[data-status="inactive"] { background: rgba(239, 68, 68, 0.14); color: rgb(185, 28, 28); }
.nbr-rider-preview__status[data-status="blacklisted"] { background: rgba(100, 116, 139, 0.14); color: rgb(71, 85, 105); }

.nbr-rider-preview__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nbr-rider-preview__panel {
    padding: 1rem;
}

.nbr-rider-preview__panel h4 {
    color: rgb(15, 23, 42);
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0 0 0.85rem;
}

.dark .nbr-rider-preview__panel h4 {
    color: rgb(248, 250, 252);
}

.nbr-rider-wizard .fi-sc-wizard-header {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
}

.nbr-rider-wizard .fi-sc-wizard-header-step,
.nbr-rider-wizard .fi-sc-wizard-header-step-btn {
    min-width: 0 !important;
    width: 100% !important;
}

.nbr-rider-wizard .fi-sc-wizard-header-step-btn {
    gap: 0.55rem !important;
    justify-content: center;
    padding-inline: 0.75rem !important;
}

.nbr-rider-wizard .fi-sc-wizard-header-step-btn span {
    font-size: 0.82rem;
    min-width: 0;
}

.nbr-rider-preview__panel dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nbr-rider-preview__span {
    grid-column: 1 / -1;
}

.nbr-rider-preview__span dd {
    white-space: normal;
}

.nbr-rider-preview__empty {
    color: rgb(100, 116, 139);
    font-size: 0.82rem;
    margin: 0;
}

@media (max-width: 900px) {
    .nbr-rider-preview__credential,
    .nbr-rider-preview__grid {
        grid-template-columns: 1fr;
    }

    .nbr-rider-preview__details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .nbr-rider-preview__details,
    .nbr-rider-preview__panel dl {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP EXPAND BUTTON — panel header action
   ═══════════════════════════════════════════════════════════════════════════ */

.nbr-map-expand-btn {
    align-items: center;
    background: rgba(15, 23, 42, 0.055);
    border: none;
    border-radius: 6px;
    color: rgb(100, 116, 139);
    cursor: pointer;
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    padding: 0;
    transition: background 120ms ease, color 120ms ease;
    width: 1.75rem;
}

.nbr-map-expand-btn:hover {
    background: var(--nbr-accent-soft);
    color: var(--nbr-accent-text);
}

.nbr-map-expand-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--nbr-accent);
    outline: none;
}

.nbr-map-expand-btn svg {
    height: 0.95rem;
    width: 0.95rem;
}

.dark .nbr-map-expand-btn {
    background: rgba(255, 255, 255, 0.07);
    color: rgb(156, 163, 175);
}

.dark .nbr-map-expand-btn:hover {
    background: var(--nbr-accent-softer);
    color: var(--nbr-accent-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-SCREEN MAP MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.nbr-map-modal-overlay {
    align-items: center;
    background: rgba(2, 6, 23, 0.72);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 1.25rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

/* Alpine transition classes */
.nbr-map-modal-overlay--enter {
    transition: opacity 180ms ease, backdrop-filter 180ms ease;
}

.nbr-map-modal-overlay--enter-start {
    backdrop-filter: blur(0);
    opacity: 0;
}

.nbr-map-modal-overlay--enter-end {
    opacity: 1;
}

.nbr-map-modal-overlay--leave {
    transition: opacity 150ms ease;
}

.nbr-map-modal-overlay--leave-end {
    opacity: 0;
}

.nbr-map-modal {
    background: rgb(255, 255, 255);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(2, 6, 23, 0.28), 0 8px 20px rgba(2, 6, 23, 0.14);
    display: grid;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 2.5rem);
    max-height: 56rem;
    max-width: 80rem;
    overflow: hidden;
    width: 100%;
}

.dark .nbr-map-modal {
    background: rgb(15, 23, 42);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

/* Modal header */
.nbr-map-modal__header {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
    display: flex;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    gap: 1rem;
}

.dark .nbr-map-modal__header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nbr-map-modal__title h3 {
    color: rgb(17, 24, 39);
    font-size: 0.97rem;
    font-weight: 750;
    line-height: 1.2;
    margin: 0;
}

.dark .nbr-map-modal__title h3 {
    color: rgb(248, 250, 252);
}

.nbr-map-modal__title span {
    color: rgb(107, 114, 128);
    font-size: 0.75rem;
    font-weight: 600;
}

.nbr-map-modal__controls {
    align-items: center;
    display: flex;
    gap: 1.25rem;
}

.nbr-map-modal__legend {
    align-items: center;
    color: rgb(107, 114, 128);
    display: flex;
    font-size: 0.74rem;
    font-weight: 600;
    gap: 0.55rem;
}

.nbr-map-modal__legend b {
    border-radius: 999px;
    display: inline-block;
    height: 0.6rem;
    width: 0.6rem;
}

.nbr-map-modal__close {
    align-items: center;
    background: rgba(15, 23, 42, 0.055);
    border: none;
    border-radius: 6px;
    color: rgb(100, 116, 139);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    transition: background 120ms ease, color 120ms ease;
    width: 2rem;
}

.nbr-map-modal__close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(220, 38, 38);
}

.nbr-map-modal__close svg {
    height: 1.1rem;
    width: 1.1rem;
}

.dark .nbr-map-modal__close {
    background: rgba(255, 255, 255, 0.07);
    color: rgb(156, 163, 175);
}

/* Modal body */
.nbr-map-modal__body {
    display: grid;
    grid-template-columns: 1fr 14rem;
    min-height: 0;
    overflow: hidden;
}

.nbr-map-modal__map {
    height: 100%;
    min-height: 0;
    position: relative;
    z-index: 0;
}

.nbr-map-modal__map .leaflet-container {
    height: 100%;
}

/* Modal sidebar */
.nbr-map-modal__sidebar {
    border-left: 1px solid rgba(15, 23, 42, 0.09);
    display: grid;
    align-content: start;
    gap: 0.85rem;
    overflow-y: auto;
    padding: 1rem;
}

.dark .nbr-map-modal__sidebar {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.nbr-map-modal__stat {
    display: grid;
    gap: 0.18rem;
}

.nbr-map-modal__stat span {
    color: rgb(107, 114, 128);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dark .nbr-map-modal__stat span {
    color: rgb(148, 163, 184);
}

.nbr-map-modal__stat strong {
    color: rgb(17, 24, 39);
    font-size: 1.05rem;
    font-weight: 750;
}

.dark .nbr-map-modal__stat strong {
    color: rgb(248, 250, 252);
}

.nbr-map-modal__stat small {
    color: rgb(107, 114, 128);
    font-size: 0.74rem;
}

.nbr-map-modal__divider {
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.09);
    margin: 0;
}

.dark .nbr-map-modal__divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.nbr-map-modal__note {
    color: rgb(107, 114, 128);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

.nbr-map-modal__action {
    color: var(--nbr-accent-text);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    transition: color 120ms ease;
}

.nbr-map-modal__action:hover {
    color: var(--nbr-accent-strong);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .nbr-map-modal__body {
        grid-template-columns: 1fr;
    }

    .nbr-map-modal__sidebar {
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.09);
        max-height: 9rem;
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1rem;
        padding: 0.75rem;
    }

    .nbr-map-modal__note,
    .nbr-map-modal__action,
    .nbr-map-modal__divider {
        display: none;
    }

    .nbr-map-modal__legend {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIDERS DOMAIN DASHBOARD
   Color variables: indigo, teal, amber, blue, violet, green, red, slate
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tone palette ─────────────────────────────────────────────────────────── */
:root {
    /* NBR brand kit (see config/brand.php) */
    --nbr-blue:       #0C388A;  /* NBR Deep Blue */
    --nbr-green:      #4CA735;  /* NBR Vibrant Green */
    --nbr-black:      #1A1A1A;

    /* Kampala division colour system (ID cards / helmets / accents) */
    --nbr-div-central:  #0C54A4;
    --nbr-div-kawempe:  #008B45;
    --nbr-div-makindye: #E36F1E;
    --nbr-div-nakawa:   #F2A900;
    --nbr-div-rubaga:   #D61A21;

    --riders-indigo:  var(--nbr-blue);
    --riders-teal:    #14b8a6;
    --riders-amber:   #f59e0b;
    --riders-blue:    #3b82f6;
    --riders-violet:  #8b5cf6;
    --riders-green:   var(--nbr-green);
    --riders-red:     #ef4444;
    --riders-slate:   #64748b;
}

/* ── KPI Ribbon ───────────────────────────────────────────────────────────── */
.nbr-riders-kpi {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

.nbr-riders-kpi__card {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    border-top: 3px solid transparent;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 0.22rem;
    padding: 0.9rem 1rem 0.85rem;
    text-decoration: none;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.nbr-riders-kpi__card:hover { box-shadow: 0 4px 12px rgba(15,23,42,0.12); transform: translateY(-1px); }

.nbr-riders-kpi__card[data-tone="indigo"] { border-top-color: var(--riders-indigo); }
.nbr-riders-kpi__card[data-tone="teal"]   { border-top-color: var(--riders-teal); }
.nbr-riders-kpi__card[data-tone="amber"]  { border-top-color: var(--riders-amber); }
.nbr-riders-kpi__card[data-tone="blue"]   { border-top-color: var(--riders-blue); }
.nbr-riders-kpi__card[data-tone="violet"] { border-top-color: var(--riders-violet); }
.nbr-riders-kpi__card[data-tone="green"]  { border-top-color: var(--riders-green); }
.nbr-riders-kpi__card[data-tone="red"]    { border-top-color: var(--riders-red); }
.nbr-riders-kpi__card[data-tone="slate"]  { border-top-color: var(--riders-slate); }

.nbr-riders-kpi__label {
    color: rgb(100, 116, 139);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.055em;
}

.nbr-riders-kpi__value {
    color: rgb(15, 23, 42);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.nbr-riders-kpi__meta {
    color: rgb(100, 116, 139);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.3;
}

.dark .nbr-riders-kpi__card          { background: rgb(30, 41, 59); }
.dark .nbr-riders-kpi__value         { color: rgb(248, 250, 252); }
.dark .nbr-riders-kpi__label,
.dark .nbr-riders-kpi__meta          { color: rgb(148, 163, 184); }

/* ── Grid layouts ─────────────────────────────────────────────────────────── */
.nbr-riders-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.nbr-riders-grid--top    { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.nbr-riders-grid--middle { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* ── Shared panel base ────────────────────────────────────────────────────── */
.nbr-riders-panel {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    overflow: hidden;
    padding: 1.1rem 1.2rem 1.2rem;
}

.nbr-riders-panel--wide { padding: 1.1rem 1.2rem 1.2rem; }

.dark .nbr-riders-panel { background: rgb(30, 41, 59); }

.nbr-riders-panel__header {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.nbr-riders-panel__header h2 {
    color: rgb(15, 23, 42);
    font-size: 0.92rem;
    font-weight: 750;
    margin: 0;
}

.dark .nbr-riders-panel__header h2 { color: rgb(248, 250, 252); }

.nbr-riders-panel__header > span,
.nbr-riders-panel__header > a {
    color: rgb(100, 116, 139);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.nbr-riders-panel__link {
    color: rgb(99, 102, 241) !important;
    transition: color 100ms ease;
}

.nbr-riders-panel__link:hover { color: rgb(79, 70, 229) !important; text-decoration: underline; }

.nbr-riders-panel__subheader {
    color: rgb(100, 116, 139);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.dark .nbr-riders-panel__subheader { color: rgb(148, 163, 184); }

/* ── Registration Pipeline ────────────────────────────────────────────────── */
.nbr-riders-pipeline {
    display: grid;
    gap: 0.65rem;
}

.nbr-riders-pipeline__stage { display: grid; gap: 0.3rem; }

.nbr-riders-pipeline__meta {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.nbr-riders-pipeline__label {
    color: rgb(51, 65, 85);
    font-size: 0.8rem;
    font-weight: 600;
}

.dark .nbr-riders-pipeline__label { color: rgb(203, 213, 225); }

.nbr-riders-pipeline__count {
    align-items: baseline;
    display: flex;
    gap: 0.35rem;
}

.nbr-riders-pipeline__count strong {
    color: rgb(15, 23, 42);
    font-size: 0.92rem;
    font-weight: 750;
}

.dark .nbr-riders-pipeline__count strong { color: rgb(248, 250, 252); }

.nbr-riders-pipeline__count small {
    color: rgb(148, 163, 184);
    font-size: 0.72rem;
}

.nbr-riders-pipeline__track {
    background: rgb(241, 245, 249);
    border-radius: 999px;
    height: 0.45rem;
    overflow: hidden;
    width: 100%;
}

.dark .nbr-riders-pipeline__track { background: rgb(51, 65, 85); }

.nbr-riders-pipeline__fill {
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 2%;
    transition: width 600ms ease;
}

.nbr-riders-pipeline__stage[data-tone="amber"] .nbr-riders-pipeline__fill  { background: var(--riders-amber); }
.nbr-riders-pipeline__stage[data-tone="blue"]  .nbr-riders-pipeline__fill  { background: var(--riders-blue); }
.nbr-riders-pipeline__stage[data-tone="green"] .nbr-riders-pipeline__fill  { background: var(--riders-green); }
.nbr-riders-pipeline__stage[data-tone="red"]   .nbr-riders-pipeline__fill  { background: var(--riders-red); }
.nbr-riders-pipeline__stage[data-tone="slate"] .nbr-riders-pipeline__fill  { background: var(--riders-slate); }

.nbr-riders-pipeline__divider {
    background: rgba(15, 23, 42, 0.07);
    border: none;
    height: 1px;
    margin: 0.85rem 0 0.65rem;
}

.dark .nbr-riders-pipeline__divider { background: rgba(255, 255, 255, 0.08); }

/* ── Hailing app distribution ─────────────────────────────────────────────── */
.nbr-riders-apps {
    display: grid;
    gap: 0.45rem;
}

.nbr-riders-apps__row {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 7rem 1fr auto;
}

.nbr-riders-apps__name {
    color: rgb(71, 85, 105);
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .nbr-riders-apps__name { color: rgb(203, 213, 225); }

.nbr-riders-apps__track {
    background: rgb(241, 245, 249);
    border-radius: 999px;
    height: 0.38rem;
    overflow: hidden;
}

.dark .nbr-riders-apps__track { background: rgb(51, 65, 85); }

.nbr-riders-apps__fill {
    background: var(--riders-indigo);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width 500ms ease;
}

.nbr-riders-apps__count {
    color: rgb(15, 23, 42);
    font-size: 0.8rem;
    font-weight: 750;
    text-align: right;
    width: 2.5rem;
}

.dark .nbr-riders-apps__count { color: rgb(248, 250, 252); }

/* ── Quick Actions ────────────────────────────────────────────────────────── */
.nbr-riders-actions {
    display: grid;
    gap: 0.45rem;
}

.nbr-riders-actions__item {
    align-items: center;
    background: rgb(248, 250, 252);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 8px;
    color: rgb(30, 41, 59);
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 2rem 1fr auto auto;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.nbr-riders-actions__item:hover {
    background: rgb(241, 245, 249);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(2px);
}

.dark .nbr-riders-actions__item {
    background: rgb(51, 65, 85);
    border-color: rgba(255, 255, 255, 0.07);
    color: rgb(226, 232, 240);
}

.dark .nbr-riders-actions__item:hover {
    background: rgb(71, 85, 105);
    border-color: rgba(99, 102, 241, 0.4);
}

.nbr-riders-actions__icon {
    align-items: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    color: rgb(99, 102, 241);
    display: flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.nbr-riders-actions__icon svg { height: 1rem; width: 1rem; }

.nbr-riders-actions__item[data-tone="teal"]   .nbr-riders-actions__icon { background: rgba(20, 184, 166, 0.1); color: var(--riders-teal); }
.nbr-riders-actions__item[data-tone="amber"]  .nbr-riders-actions__icon { background: rgba(245, 158, 11, 0.1); color: var(--riders-amber); }
.nbr-riders-actions__item[data-tone="blue"]   .nbr-riders-actions__icon { background: rgba(59, 130, 246, 0.1); color: var(--riders-blue); }
.nbr-riders-actions__item[data-tone="violet"] .nbr-riders-actions__icon { background: rgba(139, 92, 246, 0.1); color: var(--riders-violet); }
.nbr-riders-actions__item[data-tone="slate"]  .nbr-riders-actions__icon { background: rgba(100, 116, 139, 0.1); color: var(--riders-slate); }

.nbr-riders-actions__label {
    font-size: 0.82rem;
    font-weight: 650;
}

.nbr-riders-actions__badge {
    background: var(--riders-amber);
    border-radius: 999px;
    color: rgb(255, 255, 255);
    font-size: 0.7rem;
    font-weight: 750;
    min-width: 1.3rem;
    padding: 0.15rem 0.45rem;
    text-align: center;
}

.nbr-riders-actions__chevron {
    color: rgb(148, 163, 184);
    height: 1rem;
    width: 1rem;
}

/* ── District Hub Table ───────────────────────────────────────────────────── */
.nbr-riders-hubs {
    display: grid;
    gap: 0;
}

.nbr-riders-hubs__head {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: rgb(100, 116, 139);
    display: grid;
    font-size: 0.68rem;
    font-weight: 750;
    gap: 0.75rem;
    grid-template-columns: 1fr 3rem 1fr 3.5rem;
    letter-spacing: 0.04em;
    padding: 0 0 0.55rem;
    text-transform: uppercase;
}

.dark .nbr-riders-hubs__head { border-bottom-color: rgba(255,255,255,0.09); color: rgb(100, 116, 139); }

.nbr-riders-hubs__row {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.045);
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 3rem 1fr 3.5rem;
    padding: 0.6rem 0;
    text-decoration: none;
    transition: background 100ms ease;
}

.nbr-riders-hubs__row:hover { background: rgba(99, 102, 241, 0.04); border-radius: 6px; padding-left: 0.3rem; padding-right: 0.3rem; }
.dark .nbr-riders-hubs__row { border-bottom-color: rgba(255,255,255,0.06); }

.nbr-riders-hubs__district {
    display: grid;
    gap: 0.1rem;
}

.nbr-riders-hubs__district strong {
    color: rgb(15, 23, 42);
    font-size: 0.82rem;
    font-weight: 700;
}

.dark .nbr-riders-hubs__district strong { color: rgb(248, 250, 252); }

.nbr-riders-hubs__district span {
    color: rgb(100, 116, 139);
    font-size: 0.72rem;
}

.nbr-riders-hubs__stages {
    color: rgb(100, 116, 139);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.nbr-riders-hubs__bar-col { padding-left: 0.25rem; }

.nbr-riders-hubs__bar-cell {
    align-items: center;
    display: flex;
    padding: 0 0.25rem;
}

.nbr-riders-hubs__bar {
    background: rgb(241, 245, 249);
    border-radius: 999px;
    flex: 1;
    height: 0.45rem;
    overflow: hidden;
}

.dark .nbr-riders-hubs__bar { background: rgb(51, 65, 85); }

.nbr-riders-hubs__bar span {
    background: var(--riders-indigo);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 2%;
    transition: width 500ms ease;
}

.nbr-riders-hubs__bar span[data-status="suspended"] { background: var(--riders-red); }
.nbr-riders-hubs__bar span[data-status="monitoring"] { background: var(--riders-amber); }

.nbr-riders-hubs__count {
    color: rgb(15, 23, 42);
    font-size: 0.92rem;
    font-weight: 800;
    text-align: right;
}

.dark .nbr-riders-hubs__count { color: rgb(248, 250, 252); }

/* ── Motorcycle Fleet Grid ────────────────────────────────────────────────── */
.nbr-riders-fleet {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0.85rem;
}

.nbr-riders-fleet__item {
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    background: rgb(248, 250, 252);
    display: grid;
    gap: 0.15rem;
}

.dark .nbr-riders-fleet__item { background: rgb(51, 65, 85); }

.nbr-riders-fleet__item[data-tone="green"]  { border-left-color: var(--riders-green); }
.nbr-riders-fleet__item[data-tone="amber"]  { border-left-color: var(--riders-amber); }
.nbr-riders-fleet__item[data-tone="blue"]   { border-left-color: var(--riders-blue); }
.nbr-riders-fleet__item[data-tone="violet"] { border-left-color: var(--riders-violet); }
.nbr-riders-fleet__item[data-tone="red"]    { border-left-color: var(--riders-red); }
.nbr-riders-fleet__item[data-tone="teal"]   { border-left-color: var(--riders-teal); }

.nbr-riders-fleet__label {
    color: rgb(100, 116, 139);
    font-size: 0.71rem;
    font-weight: 650;
}

.nbr-riders-fleet__value {
    color: rgb(15, 23, 42);
    font-size: 1.2rem;
    font-weight: 800;
}

.dark .nbr-riders-fleet__value { color: rgb(248, 250, 252); }

/* ── Compliance Alerts ────────────────────────────────────────────────────── */
.nbr-riders-compliance {
    display: grid;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.nbr-riders-compliance__alert {
    align-items: center;
    border-radius: 7px;
    display: flex;
    font-size: 0.78rem;
    font-weight: 650;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    transition: opacity 120ms ease;
}

.nbr-riders-compliance__alert:hover { opacity: 0.85; }
.nbr-riders-compliance__alert svg { flex-shrink: 0; height: 0.9rem; width: 0.9rem; }

.nbr-riders-compliance__alert[data-tone="amber"] {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(180, 100, 0);
}

.nbr-riders-compliance__alert[data-tone="red"] {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(185, 28, 28);
}

.dark .nbr-riders-compliance__alert[data-tone="amber"] {
    background: rgba(245, 158, 11, 0.15);
    color: rgb(251, 191, 36);
}

.dark .nbr-riders-compliance__alert[data-tone="red"] {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(252, 165, 165);
}

/* ── Recent Registrations Feed ────────────────────────────────────────────── */
.nbr-riders-feed {
    display: grid;
    gap: 0;
}

.nbr-riders-feed__head {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: rgb(100, 116, 139);
    display: grid;
    font-size: 0.68rem;
    font-weight: 750;
    gap: 1rem;
    grid-template-columns: 10rem 1fr 1fr 6rem 7rem;
    letter-spacing: 0.04em;
    padding: 0 0.5rem 0.55rem;
    text-transform: uppercase;
}

.dark .nbr-riders-feed__head { border-bottom-color: rgba(255,255,255,0.09); }

.nbr-riders-feed__row {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 1rem;
    grid-template-columns: 10rem 1fr 1fr 6rem 7rem;
    padding: 0.65rem 0.5rem;
    text-decoration: none;
    transition: background 100ms ease;
}

.nbr-riders-feed__row:hover { background: rgba(99, 102, 241, 0.04); border-radius: 6px; }
.dark .nbr-riders-feed__row { border-bottom-color: rgba(255,255,255,0.05); }
.nbr-riders-feed__row:last-child { border-bottom: none; }

.nbr-riders-feed__id {
    background: rgba(99, 102, 241, 0.08);
    border-radius: 4px;
    color: rgb(99, 102, 241);
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    overflow: hidden;
    padding: 0.2rem 0.45rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nbr-riders-feed__name {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    min-width: 0;
}

.nbr-riders-feed__avatar {
    align-items: center;
    background: linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246));
    border-radius: 50%;
    color: rgb(255, 255, 255);
    display: flex;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 800;
    height: 1.85rem;
    justify-content: center;
    width: 1.85rem;
}

.nbr-riders-feed__name strong {
    color: rgb(15, 23, 42);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .nbr-riders-feed__name strong { color: rgb(248, 250, 252); }

.nbr-riders-feed__name small {
    color: rgb(148, 163, 184);
    font-size: 0.7rem;
}

.nbr-riders-feed__location {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.nbr-riders-feed__location span {
    color: rgb(51, 65, 85);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .nbr-riders-feed__location span { color: rgb(203, 213, 225); }

.nbr-riders-feed__location small {
    color: rgb(148, 163, 184);
    font-size: 0.72rem;
}

.nbr-riders-feed__status {
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.65rem;
    text-align: center;
    width: fit-content;
}

.nbr-riders-feed__status[data-status="pending"]     { background: rgba(245, 158, 11, 0.12); color: rgb(180, 100, 0); }
.nbr-riders-feed__status[data-status="approved"]    { background: rgba(34, 197, 94, 0.12);  color: rgb(21, 128, 61); }
.nbr-riders-feed__status[data-status="active"]      { background: rgba(34, 197, 94, 0.12);  color: rgb(21, 128, 61); }
.nbr-riders-feed__status[data-status="suspended"]   { background: rgba(239, 68, 68, 0.12);  color: rgb(185, 28, 28); }
.nbr-riders-feed__status[data-status="inactive"]    { background: rgba(239, 68, 68, 0.12);  color: rgb(185, 28, 28); }
.nbr-riders-feed__status[data-status="blacklisted"] { background: rgba(100, 116, 139, 0.12); color: rgb(71, 85, 105); }

.dark .nbr-riders-feed__status[data-status="pending"]     { background: rgba(245,158,11,0.18); color: rgb(251,191,36); }
.dark .nbr-riders-feed__status[data-status="approved"]    { background: rgba(34,197,94,0.18);  color: rgb(134,239,172); }
.dark .nbr-riders-feed__status[data-status="active"]      { background: rgba(34,197,94,0.18);  color: rgb(134,239,172); }
.dark .nbr-riders-feed__status[data-status="suspended"]   { background: rgba(239,68,68,0.18);  color: rgb(252,165,165); }
.dark .nbr-riders-feed__status[data-status="inactive"]    { background: rgba(239,68,68,0.18);  color: rgb(252,165,165); }
.dark .nbr-riders-feed__status[data-status="blacklisted"] { background: rgba(100,116,139,0.18); color: rgb(148,163,184); }

.nbr-riders-feed__time {
    color: rgb(148, 163, 184);
    font-size: 0.75rem;
    text-align: right;
}

/* ── Rider profile dossier ───────────────────────────────────────────────── */
.nbr-rider-profile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nbr-rider-profile__hero,
.nbr-rider-profile__founder-strip,
.nbr-rider-profile__qr-panel,
.nbr-rider-profile__panel {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.dark .nbr-rider-profile__hero,
.dark .nbr-rider-profile__founder-strip,
.dark .nbr-rider-profile__qr-panel,
.dark .nbr-rider-profile__panel {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: none;
}

.nbr-rider-profile__hero {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 0.8fr);
    overflow: hidden;
    padding: 1.1rem;
    position: relative;
}

.nbr-rider-profile__hero::before {
    background: linear-gradient(90deg, var(--nbr-accent), var(--nbr-green));
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}

.nbr-rider-profile__hero[data-status="active"]::before { background: linear-gradient(90deg, rgb(34, 197, 94), rgb(14, 165, 233)); }
.nbr-rider-profile__hero[data-status="inactive"]::before { background: linear-gradient(90deg, rgb(239, 68, 68), rgb(100, 116, 139)); }

.nbr-rider-profile__identity {
    align-items: center;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.nbr-rider-profile__avatar {
    align-items: center;
    background: rgb(15, 23, 42);
    border: 4px solid rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
    color: rgb(255, 255, 255);
    display: flex;
    flex: 0 0 6rem;
    font-size: 2rem;
    font-weight: 850;
    height: 6rem;
    justify-content: center;
    overflow: hidden;
    width: 6rem;
}

.dark .nbr-rider-profile__avatar {
    border-color: rgba(30, 41, 59, 0.95);
}

.nbr-rider-profile__avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.nbr-rider-profile__headline {
    min-width: 0;
}

.nbr-rider-profile__eyebrow {
    align-items: center;
    color: rgb(100, 116, 139);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.dark .nbr-rider-profile__eyebrow {
    color: rgb(148, 163, 184);
}

.nbr-rider-profile__founder-pill {
    background: rgb(255, 247, 237);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    color: rgb(154, 52, 18);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 850;
    padding: 0.16rem 0.55rem;
}

.nbr-rider-profile__division-chip {
    align-items: center;
    background: color-mix(in srgb, var(--division-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--division-color) 45%, transparent);
    border-radius: 999px;
    color: var(--division-color);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.16rem 0.55rem;
}

.nbr-rider-profile__division-chip::before {
    background: var(--division-color);
    border-radius: 999px;
    content: "";
    height: 0.5rem;
    width: 0.5rem;
}

.dark .nbr-rider-profile__founder-pill {
    background: rgba(245, 158, 11, 0.16);
    color: rgb(253, 186, 116);
}

.nbr-rider-profile__headline h2 {
    color: rgb(15, 23, 42);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
}

.dark .nbr-rider-profile__headline h2 {
    color: rgb(248, 250, 252);
}

.nbr-rider-profile__headline p {
    align-items: center;
    color: rgb(71, 85, 105);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    gap: 0.4rem;
    margin: 0.45rem 0 0;
}

.dark .nbr-rider-profile__headline p {
    color: rgb(203, 213, 225);
}

.nbr-rider-profile__hero-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nbr-rider-profile__status-block {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 7px;
    padding: 0.8rem;
}

.dark .nbr-rider-profile__status-block {
    border-color: rgba(148, 163, 184, 0.16);
}

.nbr-rider-profile__status-block[data-tone="green"] { background: rgba(34, 197, 94, 0.09); }
.nbr-rider-profile__status-block[data-tone="amber"] { background: rgba(245, 158, 11, 0.1); }
.nbr-rider-profile__status-block[data-tone="red"] { background: rgba(239, 68, 68, 0.09); }
.nbr-rider-profile__status-block[data-tone="blue"] { background: rgba(14, 165, 233, 0.09); }
.nbr-rider-profile__status-block[data-tone="slate"] { background: rgba(100, 116, 139, 0.08); }

.nbr-rider-profile__status-block span,
.nbr-rider-profile__qr-panel dt,
.nbr-rider-profile__panel dt,
.nbr-rider-profile__founder-strip dt {
    color: rgb(100, 116, 139);
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.dark .nbr-rider-profile__status-block span,
.dark .nbr-rider-profile__qr-panel dt,
.dark .nbr-rider-profile__panel dt,
.dark .nbr-rider-profile__founder-strip dt {
    color: rgb(148, 163, 184);
}

.nbr-rider-profile__status-block strong {
    color: rgb(15, 23, 42);
    display: block;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.15;
    margin-top: 0.35rem;
}

.dark .nbr-rider-profile__status-block strong {
    color: rgb(248, 250, 252);
}

.nbr-rider-profile__status-block p {
    color: rgb(71, 85, 105);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0.35rem 0 0;
}

.dark .nbr-rider-profile__status-block p {
    color: rgb(203, 213, 225);
}

.nbr-rider-profile__founder-strip {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.nbr-rider-profile__founder-strip > div > span {
    color: rgb(154, 52, 18);
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
}

.dark .nbr-rider-profile__founder-strip > div > span {
    color: rgb(253, 186, 116);
}

.nbr-rider-profile__founder-strip > div > strong {
    color: rgb(15, 23, 42);
    display: block;
    font-size: 1.2rem;
    font-weight: 850;
    margin-top: 0.2rem;
}

.dark .nbr-rider-profile__founder-strip > div > strong {
    color: rgb(248, 250, 252);
}

.nbr-rider-profile__founder-strip dl {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(7rem, 1fr));
    margin: 0;
}

.nbr-rider-profile__founder-strip dd {
    color: rgb(15, 23, 42);
    font-size: 1rem;
    font-weight: 850;
    margin: 0.25rem 0 0;
}

.dark .nbr-rider-profile__founder-strip dd {
    color: rgb(248, 250, 252);
}

.nbr-rider-profile__layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
}

.nbr-rider-profile__rail,
.nbr-rider-profile__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nbr-rider-profile__qr-panel,
.nbr-rider-profile__panel {
    padding: 1rem;
}

.nbr-rider-profile__qr-frame {
    align-items: center;
    background: rgb(248, 250, 252);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 7px;
    display: flex;
    justify-content: center;
    min-height: 15rem;
    overflow: hidden;
}

.dark .nbr-rider-profile__qr-frame {
    background: rgba(2, 6, 23, 0.7);
    border-color: rgba(148, 163, 184, 0.16);
}

.nbr-rider-profile__qr-frame img {
    background: rgb(255, 255, 255);
    border-radius: 6px;
    height: min(12rem, 70vw);
    padding: 0.65rem;
    width: min(12rem, 70vw);
}

.nbr-rider-profile__qr-placeholder {
    align-items: center;
    color: rgb(148, 163, 184);
    display: flex;
    height: 5rem;
    justify-content: center;
    width: 5rem;
}

.nbr-rider-profile__qr-placeholder svg {
    height: 3rem;
    width: 3rem;
}

.nbr-rider-profile__qr-panel dl,
.nbr-rider-profile__panel dl {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.nbr-rider-profile__qr-panel dl {
    margin-top: 0.8rem;
}

.nbr-rider-profile__qr-panel dd,
.nbr-rider-profile__panel dd {
    color: rgb(15, 23, 42);
    font-size: 0.9rem;
    font-weight: 680;
    line-height: 1.35;
    margin: 0.18rem 0 0;
    overflow-wrap: anywhere;
}

.dark .nbr-rider-profile__qr-panel dd,
.dark .nbr-rider-profile__panel dd {
    color: rgb(248, 250, 252);
}

.nbr-rider-profile__panel header {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    justify-content: space-between;
    margin: -0.1rem 0 0.9rem;
    padding-bottom: 0.75rem;
}

.dark .nbr-rider-profile__panel header {
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

.nbr-rider-profile__panel h3 {
    color: rgb(15, 23, 42);
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.2;
    margin: 0;
}

.dark .nbr-rider-profile__panel h3 {
    color: rgb(248, 250, 252);
}

.nbr-rider-profile__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nbr-rider-profile__facts > div,
.nbr-rider-profile__qr-panel dl > div,
.nbr-rider-profile__panel--compact dl > div {
    background: rgba(248, 250, 252, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 7px;
    padding: 0.75rem;
}

.dark .nbr-rider-profile__facts > div,
.dark .nbr-rider-profile__qr-panel dl > div,
.dark .nbr-rider-profile__panel--compact dl > div {
    background: rgba(2, 6, 23, 0.32);
    border-color: rgba(148, 163, 184, 0.12);
}

.nbr-rider-profile__span {
    grid-column: 1 / -1;
}

.nbr-rider-profile__empty {
    color: rgb(100, 116, 139);
    font-size: 0.88rem;
    margin: 0;
}

.dark .nbr-rider-profile__empty {
    color: rgb(203, 213, 225);
}

@media (max-width: 1180px) {
    .nbr-rider-profile__hero,
    .nbr-rider-profile__layout {
        grid-template-columns: 1fr;
    }

    .nbr-rider-profile__hero-grid,
    .nbr-rider-profile__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .nbr-rider-profile__hero,
    .nbr-rider-profile__qr-panel,
    .nbr-rider-profile__panel,
    .nbr-rider-profile__founder-strip {
        padding: 0.85rem;
    }

    .nbr-rider-profile__identity,
    .nbr-rider-profile__founder-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .nbr-rider-profile__avatar {
        flex-basis: 5rem;
        height: 5rem;
        width: 5rem;
    }

    .nbr-rider-profile__hero-grid,
    .nbr-rider-profile__facts,
    .nbr-rider-profile__founder-strip dl {
        grid-template-columns: 1fr;
    }

    .nbr-rider-profile__headline h2 {
        font-size: 1.35rem;
    }

    .nbr-rider-profile__qr-frame {
        min-height: 12rem;
    }
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.nbr-riders-empty {
    color: rgb(148, 163, 184);
    font-size: 0.8rem;
    padding: 0.75rem 0;
    text-align: center;
}

.nbr-riders-empty--feed {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
}

.nbr-riders-empty--feed svg { color: rgb(203, 213, 225); height: 2rem; opacity: 0.6; width: 2rem; }
.nbr-riders-empty--feed a   { color: var(--riders-indigo); font-size: 0.8rem; font-weight: 650; text-decoration: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .nbr-riders-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .nbr-riders-grid--top,
    .nbr-riders-grid--middle { grid-template-columns: 1fr; }

    .nbr-riders-feed__head,
    .nbr-riders-feed__row {
        grid-template-columns: 8rem 1fr 5rem 6rem;
    }

    /* hide stage column on smaller screens */
    .nbr-riders-feed__head span:nth-child(3),
    .nbr-riders-feed__row .nbr-riders-feed__location { display: none; }
}

@media (max-width: 640px) {
    .nbr-riders-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .nbr-riders-feed__head,
    .nbr-riders-feed__row { grid-template-columns: 1fr 5rem 6rem; }

    .nbr-riders-feed__head span:first-child,
    .nbr-riders-feed__id { display: none; }

    .nbr-riders-hubs__head,
    .nbr-riders-hubs__row { grid-template-columns: 1fr 1fr 2.5rem; }

    .nbr-riders-hubs__head span:nth-child(2),
    .nbr-riders-hubs__stages { display: none; }
}

/* ══ Founding Rider Program page ═══════════════════════════════════════════ */
[x-cloak] { display: none !important; }

.nbr-founder {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nbr-founder__countdown {
    background: linear-gradient(135deg, rgb(120, 53, 15) 0%, rgb(180, 83, 9) 55%, rgb(217, 119, 6) 100%);
    border-radius: 1.25rem;
    box-shadow: 0 20px 45px -25px rgba(180, 83, 9, 0.85);
    color: rgb(255, 251, 235);
    overflow: hidden;
    padding: 1.6rem 1.75rem;
    position: relative;
}

.nbr-founder__countdown[data-open="false"] {
    background: linear-gradient(135deg, rgb(30, 41, 59) 0%, rgb(51, 65, 85) 100%);
}

.nbr-founder__countdown-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.nbr-founder__eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    opacity: 0.85;
    text-transform: uppercase;
}

.nbr-founder__countdown-head h2 {
    font-size: 1.4rem;
    font-weight: 850;
    line-height: 1.2;
    margin-top: 0.35rem;
    max-width: 34ch;
}

.nbr-founder__status-chip {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 750;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.nbr-founder__meters {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.35rem 0 1rem;
}

.nbr-founder__meter {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
}

.nbr-founder__meter dt {
    font-size: 0.72rem;
    font-weight: 650;
    opacity: 0.85;
}

.nbr-founder__meter dd {
    font-size: 1.65rem;
    font-weight: 850;
    margin-top: 0.2rem;
}

.nbr-founder__progress {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    height: 0.6rem;
    overflow: hidden;
}

.nbr-founder__progress span {
    background: rgb(255, 251, 235);
    border-radius: 999px;
    display: block;
    height: 100%;
    transition: width 0.6s ease;
}

.nbr-founder__progress-label {
    font-size: 0.74rem;
    font-weight: 650;
    margin-top: 0.45rem;
    opacity: 0.9;
}

.nbr-founder__tabs {
    border-bottom: 1px solid rgb(226, 232, 240);
    display: flex;
    gap: 0.25rem;
}

.dark .nbr-founder__tabs { border-bottom-color: rgb(51, 65, 85); }

.nbr-founder__tabs button {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgb(100, 116, 139);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: -1px;
    padding: 0.7rem 1rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nbr-founder__tabs button.is-active {
    border-bottom-color: rgb(217, 119, 6);
    color: rgb(180, 83, 9);
}

.dark .nbr-founder__tabs button.is-active { color: rgb(251, 191, 36); border-bottom-color: rgb(251, 191, 36); }

.nbr-founder__panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.nbr-founder__panel-head h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: rgb(15, 23, 42);
}

.dark .nbr-founder__panel-head h3 { color: rgb(241, 245, 249); }

.nbr-founder__panel-head p {
    color: rgb(71, 85, 105);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-top: 0.35rem;
    max-width: 70ch;
}

.dark .nbr-founder__panel-head p { color: rgb(148, 163, 184); }

.nbr-founder__group-title {
    color: rgb(51, 65, 85);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dark .nbr-founder__group-title { color: rgb(148, 163, 184); }

.nbr-founder__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.nbr-founder__card {
    align-items: flex-start;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(226, 232, 240);
    border-radius: 0.9rem;
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
}

.dark .nbr-founder__card { background: rgb(30, 41, 59); border-color: rgb(51, 65, 85); }

.nbr-founder__card[data-tone="founder"] {
    background: rgb(255, 251, 235);
    border-color: rgba(245, 158, 11, 0.35);
}

.dark .nbr-founder__card[data-tone="founder"] { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }

.nbr-founder__card-icon {
    color: rgb(217, 119, 6);
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

.nbr-founder__card h5 {
    color: rgb(15, 23, 42);
    font-size: 0.9rem;
    font-weight: 750;
}

.dark .nbr-founder__card h5 { color: rgb(241, 245, 249); }

.nbr-founder__card p {
    color: rgb(100, 116, 139);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.2rem;
}

.dark .nbr-founder__card p { color: rgb(148, 163, 184); }

.nbr-founder__steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nbr-founder__steps li {
    align-items: flex-start;
    display: flex;
    gap: 0.85rem;
}

.nbr-founder__steps span {
    align-items: center;
    background: rgb(217, 119, 6);
    border-radius: 999px;
    color: rgb(255, 251, 235);
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 850;
    height: 1.85rem;
    justify-content: center;
    width: 1.85rem;
}

.nbr-founder__steps h5 {
    color: rgb(15, 23, 42);
    font-size: 0.9rem;
    font-weight: 750;
}

.dark .nbr-founder__steps h5 { color: rgb(241, 245, 249); }

.nbr-founder__steps p {
    color: rgb(100, 116, 139);
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.dark .nbr-founder__steps p { color: rgb(148, 163, 184); }

.nbr-founder__roster {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.nbr-founder__roster-item {
    align-items: center;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(226, 232, 240);
    border-radius: 0.75rem;
    display: flex;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.nbr-founder__roster-item:hover { border-color: rgba(217, 119, 6, 0.6); transform: translateY(-1px); }

.dark .nbr-founder__roster-item { background: rgb(30, 41, 59); border-color: rgb(51, 65, 85); }

.nbr-founder__roster-number {
    color: rgb(180, 83, 9);
    font-size: 0.8rem;
    font-weight: 850;
}

.dark .nbr-founder__roster-number { color: rgb(251, 191, 36); }

.nbr-founder__roster-name {
    color: rgb(15, 23, 42);
    flex: 1;
    font-size: 0.84rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .nbr-founder__roster-name { color: rgb(226, 232, 240); }

.nbr-founder__roster-id {
    color: rgb(148, 163, 184);
    font-size: 0.72rem;
    font-weight: 600;
}

.nbr-founder__empty {
    color: rgb(148, 163, 184);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

@media (max-width: 720px) {
    .nbr-founder__meters { grid-template-columns: 1fr; }
    .nbr-founder__countdown-head { flex-direction: column; }
}