/* ==========================================================================
   BeeBizi — application styles
   Layered over Bootstrap 5.3. Mobile first; the partners read reports on phones.
   ========================================================================== */

:root {
    --bb-navy: #123a63;
    --bb-navy-dark: #0d2b4a;
    --bb-accent: #c9962f;
    --bb-ink: #1b2530;
    --bb-muted: #6b7785;
    --bb-line: #e2e6ea;
    --bb-surface: #ffffff;
    --bb-canvas: #f4f6f8;
    --bb-ok: #1d7a4c;
    --bb-ok-bg: #e6f4ec;
    --bb-warn: #94620a;
    --bb-warn-bg: #fdf3dc;
    --bb-off: #6b7785;
    --bb-off-bg: #eceef1;
    --bb-danger: #b3261e;
    --bb-radius: 10px;
    --bb-shadow: 0 1px 2px rgba(18, 58, 99, .06), 0 2px 8px rgba(18, 58, 99, .05);
}

html {
    -webkit-text-size-adjust: 100%;
    /* Reserve the vertical scrollbar's width at all times, so moving between a short
       page and a long one does not shift the whole layout sideways by 15px. */
    scrollbar-gutter: stable;
}

body {
    background: var(--bb-canvas);
    color: var(--bb-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

/* Tabular figures everywhere money appears — columns must line up. */
.bb-stat-value,
.bb-table td,
.bb-num,
code {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* -------------------------------------------------------------- Sidebar -- */

:root {
    --bb-sidebar-width: 236px;
}

.bb-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--bb-sidebar-width);
    z-index: 1035;
    flex-direction: column;
    background: var(--bb-navy);
    border-right: 1px solid rgba(0, 0, 0, .12);
    /*
       Both axes named on purpose. CSS says that when one axis is not `visible`, a
       `visible` on the other computes to `auto` — so `overflow-y: auto` alone was
       quietly turning on a horizontal scrollbar too, and a long nav label was enough
       to trigger it. Two bars in a 236px rail is what "the scrolls are not perfect"
       looked like.
    */
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Content sits beside the sidebar rather than under it. min-width:0 stops a wide
   child — a table with a lot of columns — from pushing the whole page sideways
   instead of scrolling inside its own .table-responsive wrapper. */
@media (min-width: 992px) {
    .bb-app .bb-shell {
        margin-left: var(--bb-sidebar-width);
        min-width: 0;
    }
}

.bb-sidebar-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .9rem .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.bb-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1 1 auto;
    color: #fff;
    text-decoration: none;
}

.bb-sidebar-brand:hover {
    color: #fff;
}

.bb-brand-words {
    min-width: 0;
}

/* --- Collapse toggle --- */

.bb-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.bb-nav-toggle:hover,
.bb-nav-toggle:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.bb-nav-toggle svg {
    width: 18px;
    height: 18px;
}

.bb-brand-text {
    display: block;
    font-weight: 650;
    font-size: 1.02rem;
    line-height: 1.2;
    letter-spacing: .01em;
}

.bb-brand-sub {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .58);
}

.bb-sidebar-nav {
    flex: 1 1 auto;
    padding: .85rem .6rem;
}

.bb-nav-section {
    margin-bottom: 1.1rem;
}

.bb-nav-heading {
    color: rgba(255, 255, 255, .45);
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 0 .65rem .4rem;
}

.bb-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    margin-bottom: .12rem;
    border-radius: 7px;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    /* 44px tap target once padding and line height are counted. */
    min-height: 38px;
    transition: background .12s ease, color .12s ease;
}

/* A label longer than the rail truncates rather than pushing the rail sideways.
   min-width:0 is what lets a flex item shrink below its content width at all. */
.bb-nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bb-nav-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    opacity: .85;
}

.bb-nav-link.active .bb-nav-icon {
    opacity: 1;
    color: var(--bb-accent);
}

.bb-nav-link:hover,
.bb-nav-link:focus {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

/* The only destructive link in the menu. It should not look like the others. */
.bb-nav-danger {
    color: #ffb4ae;
}

.bb-nav-danger:hover,
.bb-nav-danger:focus {
    background: rgba(179, 38, 30, .25);
    color: #ffd9d5;
}

.bb-nav-link.active {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bb-accent);
}

/* --- Sidebar user menu --- */

.bb-sidebar-foot {
    padding: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.bb-sidebar-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .55rem;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
}

.bb-sidebar-user:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.bb-sidebar-user::after {
    margin-left: auto;
}

.bb-sidebar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bb-accent);
    color: var(--bb-navy-dark);
    font-weight: 700;
    font-size: .85rem;
}

.bb-sidebar-user-body {
    min-width: 0;
}

.bb-sidebar-user-name {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-sidebar-user-role {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .58);
}

/* ------------------------------------------------- Collapsed sidebar ----- */

/*
   Only the desktop sidebar collapses. The mobile drawer always shows labels —
   it is opened deliberately and then dismissed, so there is nothing to save.

   Changing the custom property re-flows the content margin too, because
   .bb-shell reads the same variable.
*/
@media (min-width: 992px) {
    .bb-nav-collapsed {
        --bb-sidebar-width: 68px;
    }

    .bb-nav-collapsed .bb-sidebar-head {
        justify-content: center;
        padding: .9rem .35rem;
    }

    .bb-nav-collapsed .bb-sidebar-brand {
        flex: 0 0 auto;
    }

    .bb-nav-collapsed .bb-brand-words,
    .bb-nav-collapsed .bb-nav-text,
    .bb-nav-collapsed .bb-nav-heading,
    .bb-nav-collapsed .bb-sidebar-user-body {
        display: none;
    }

    /* The toggle sits under the brand once there is no room beside it. */
    .bb-nav-collapsed .bb-sidebar-head {
        flex-direction: column;
        gap: .5rem;
    }

    .bb-nav-collapsed .bb-nav-toggle svg {
        transform: rotate(180deg);
    }

    .bb-nav-collapsed .bb-sidebar-nav {
        padding: .85rem .5rem;
    }

    /* A rule instead of a heading keeps the grouping visible without text. */
    .bb-nav-collapsed .bb-nav-section + .bb-nav-section {
        border-top: 1px solid rgba(255, 255, 255, .1);
        padding-top: .7rem;
    }

    .bb-nav-collapsed .bb-nav-section {
        margin-bottom: .7rem;
    }

    .bb-nav-collapsed .bb-nav-link {
        justify-content: center;
        padding: .55rem 0;
        gap: 0;
    }

    .bb-nav-collapsed .bb-nav-icon {
        width: 21px;
        height: 21px;
    }

    .bb-nav-collapsed .bb-sidebar-user {
        justify-content: center;
        padding: .5rem 0;
    }

    /* Bootstrap's caret would sit oddly with no label beside it. */
    .bb-nav-collapsed .bb-sidebar-user::after {
        display: none;
    }

    .bb-nav-collapsed .bb-sidebar-foot {
        padding: .6rem .35rem;
    }
}

/* --------------------------------------------------- Mobile top bar ------ */

.bb-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    background: var(--bb-navy);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.bb-topbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
}

.bb-topbar-brand:hover {
    color: #fff;
}

.bb-topbar .bb-role-chip {
    margin-left: auto;
}

.bb-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: transparent;
}

/* Drawn in CSS rather than an icon font, so nothing extra is downloaded. */
.bb-burger,
.bb-burger::before,
.bb-burger::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.bb-burger {
    position: relative;
}

.bb-burger::before,
.bb-burger::after {
    content: "";
    position: absolute;
    left: 0;
}

.bb-burger::before { top: -6px; }
.bb-burger::after  { top: 6px; }

/* --------------------------------------------------- Mobile drawer ------- */

.bb-drawer {
    background: var(--bb-navy);
    color: #fff;
    max-width: 82vw;
}

.bb-drawer .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.bb-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--bb-accent);
    color: var(--bb-navy-dark);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}

.bb-brand-mark-lg {
    width: 42px;
    height: 42px;
    font-size: 16px;
    border-radius: 10px;
}

.bb-sidebar .dropdown-menu,
.bb-topbar .dropdown-menu {
    border: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow);
    border-radius: 8px;
}

/* ----------------------------------------------------------- Role chips -- */

.bb-role-chip {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.bb-role-admin {
    background: var(--bb-accent);
    color: var(--bb-navy-dark);
}

/* Teal, distinct from both the gold Admin chip and the muted Investor one — an
   operator is neither "in charge" nor "read only", and the colour should not
   suggest either. */
.bb-role-operator {
    background: #0f6e6e;
    color: #fff;
}

.bb-role-investor {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Inside the page body the investor chip needs contrast against white. */
.bb-main .bb-role-investor,
.bb-table .bb-role-investor {
    background: var(--bb-off-bg);
    color: var(--bb-off);
}

.bb-main .bb-role-operator,
.bb-table .bb-role-operator {
    background: #e2f1f1;
    color: #0b5555;
}

/* --------------------------------------------------------------- Layout -- */

.bb-main {
    padding: 1.5rem 0 2.5rem;
}

/*
   Centred, with its own gutters. It had a max-width and nothing else, so on a wide
   screen the content sat hard against the sidebar with the whitespace all piled up on
   the right — which reads as a rendering fault rather than a layout.

   Gutters are set here rather than on .bb-main so that the table cards, which run to
   the full container width, keep the same alignment as the headings above them.
*/
.bb-container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .bb-container {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .bb-container {
        padding-inline: 2rem;
    }
}

.bb-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

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

.bb-page-sub {
    color: var(--bb-muted);
    font-size: .88rem;
    margin: .15rem 0 0;
}

.bb-muted {
    color: var(--bb-muted);
}

.bb-note {
    color: var(--bb-muted);
    font-size: .85rem;
}

/* ---------------------------------------------------------------- Cards -- */

.bb-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}

.bb-card-head {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--bb-line);
    background: #fbfcfd;
}

.bb-card-title {
    font-size: 1rem;
    font-weight: 620;
    margin: 0;
}

.bb-card-body {
    padding: 1.15rem;
}

.bb-form-card {
    max-width: 640px;
}

/* ------------------------------------------------------------ Stat tiles -- */

.bb-stat {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: .9rem 1rem;
    height: 100%;
}

.bb-stat-label {
    color: var(--bb-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bb-stat-value {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.25;
    margin-top: .25rem;
}

.bb-stat-foot {
    color: var(--bb-muted);
    font-size: .78rem;
    margin-top: .1rem;
}

/* --------------------------------------------------------------- Tables -- */

.bb-table {
    font-size: .9rem;
}

.bb-table > thead > tr > th {
    background: #fbfcfd;
    border-bottom: 1px solid var(--bb-line);
    color: var(--bb-muted);
    font-size: .76rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .7rem .9rem;
    white-space: nowrap;
}

.bb-table > tbody > tr > td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--bb-line);
    vertical-align: middle;
}

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

.bb-actions {
    white-space: nowrap;
}

.bb-actions .btn,
.bb-actions form {
    margin-left: .25rem;
}

/* Stacked cards replace tables on small screens — never sideways scrolling. */

.bb-row-card {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--bb-line);
}

.bb-row-card:last-child {
    border-bottom: 0;
}

.bb-row-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .25rem;
}

.bb-row-card-line {
    font-size: .86rem;
    margin-bottom: .3rem;
}

.bb-row-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

/* --------------------------------------------------------------- Pills --- */

.bb-pill {
    display: inline-block;
    padding: .16rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.bb-pill-on {
    background: var(--bb-ok-bg);
    color: var(--bb-ok);
}

.bb-pill-wait {
    background: var(--bb-warn-bg);
    color: var(--bb-warn);
}

.bb-pill-off {
    background: var(--bb-off-bg);
    color: var(--bb-off);
}

/* --------------------------------------------------------------- Passkeys --- */

/* Revealed by site.js once WebAuthn is known to be available. */
.bb-passkey-choice[hidden] {
    display: none;
}

/* A rule with "or" sitting in the gap, between the password form and the passkey
   button — so the two read as alternatives rather than as steps. */
.bb-passkey-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 1rem;
    color: var(--bb-muted);
    font-size: .8rem;
    text-transform: lowercase;
}

.bb-passkey-or::before,
.bb-passkey-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bb-line);
}

.bb-plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ------------------------------------------------- Add to Home Screen hint --- */

/* Shown only on iPhones that have not installed the app, because iOS never offers to
   install one itself. Unhidden by site.js; hidden in the markup so it never flashes. */
.bb-install-hint {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bb-line);
    border-left: 3px solid var(--bb-accent);
    border-radius: 8px;
    background: #fff;
    font-size: .88rem;
    line-height: 1.45;
}

.bb-install-hint[hidden] {
    display: none;
}

/* The iOS share glyph: a box with an arrow coming out of the top. Drawn rather than
   pasted as an emoji, which renders as a different picture on every platform. */
.bb-install-share {
    display: inline-block;
    width: .82em;
    height: .82em;
    vertical-align: -.06em;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M10 2.5v10M6.8 5.7 10 2.5l3.2 3.2M5 9H3.8v8.5h12.4V9H15'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M10 2.5v10M6.8 5.7 10 2.5l3.2 3.2M5 9H3.8v8.5h12.4V9H15'/%3E%3C/svg%3E");
}

/* Something is late, not merely waiting. Used for an exit past its due date: the
   partnership owes somebody their own money and the screen should not be calm about it. */
.bb-pill-bad {
    background: rgba(179, 38, 30, .10);
    color: var(--bb-danger);
}

/* ---------------------------------------------------------------- Forms -- */

.form-label {
    font-weight: 600;
    font-size: .87rem;
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    border-color: #ced4da;
    border-radius: 8px;
    padding: .55rem .75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bb-navy);
    box-shadow: 0 0 0 .18rem rgba(18, 58, 99, .13);
}

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

.bb-field-error {
    display: block;
    color: var(--bb-danger);
    font-size: .82rem;
    margin-top: .25rem;
}

.bb-form-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.btn {
    border-radius: 8px;
    font-weight: 550;
    padding: .5rem 1.1rem;
}

.btn-primary {
    background: var(--bb-navy);
    border-color: var(--bb-navy);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--bb-navy-dark);
    border-color: var(--bb-navy-dark);
}

.btn-sm {
    padding: .3rem .7rem;
    font-size: .82rem;
}

/* Role selector cards */

.bb-role-choices {
    display: grid;
    gap: .5rem;
}

.bb-role-choice {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border: 1px solid var(--bb-line);
    border-radius: 9px;
    padding: .75rem .9rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.bb-role-choice:hover {
    border-color: #c3ccd6;
    background: #fbfcfd;
}

.bb-role-choice:has(input:checked) {
    border-color: var(--bb-navy);
    background: rgba(18, 58, 99, .04);
}

.bb-role-choice input {
    margin-top: .25rem;
    flex: 0 0 auto;
}

.bb-role-choice-title {
    display: block;
    font-weight: 620;
    font-size: .92rem;
}

.bb-role-choice-desc {
    display: block;
    color: var(--bb-muted);
    font-size: .83rem;
    line-height: 1.4;
}

/* ------------------------------------------------------- Definition list -- */

.bb-dl {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: .5rem 1rem;
    margin: 0;
    font-size: .9rem;
}

.bb-dl dt {
    color: var(--bb-muted);
    font-weight: 600;
}

.bb-dl dd {
    margin: 0;
}

/* ------------------------------------------------------ Filter chip bar -- */

.bb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.bb-chip {
    display: inline-block;
    padding: .3rem .75rem;
    border: 1px solid var(--bb-line);
    border-radius: 999px;
    background: var(--bb-surface);
    color: var(--bb-ink);
    font-size: .84rem;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.bb-chip:hover {
    border-color: #c3ccd6;
    background: #fbfcfd;
}

.bb-chip-on {
    background: var(--bb-navy);
    border-color: var(--bb-navy);
    color: #fff;
}

.bb-chip-on:hover {
    background: var(--bb-navy-dark);
    color: #fff;
}

/* ----------------------------------------- Category-defined attributes --- */

/* Rendered from data, so the count and labels vary by category. Wrapping pairs
   keeps a row readable whether an item has one field or six. */
.bb-attr {
    display: inline-block;
    margin: 0 .75rem .15rem 0;
    font-size: .86rem;
    white-space: nowrap;
}

.bb-attr-label {
    color: var(--bb-muted);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-right: .2rem;
}

.bb-required {
    color: var(--bb-danger);
    margin-left: .15rem;
}

/* A rate more than a week old will quietly mis-price a purchase, so it is called
   out rather than shown in the same muted grey as everything else. */
.bb-stale {
    color: var(--bb-warn);
    font-weight: 600;
}

/* A reversed entry stays on the record, struck through rather than removed. Seeing
   the mistake and its correction side by side is the point of an append-only ledger. */
.bb-reversed td {
    color: var(--bb-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(107, 119, 133, .5);
}

.bb-reversed td .bb-pill {
    text-decoration: none;
}

/* A whole role-choice card that is a link, used for picking a category. */
a.bb-role-choice {
    color: inherit;
}

a.bb-role-choice:hover {
    border-color: var(--bb-navy);
    background: rgba(18, 58, 99, .04);
}

/* --------------------------------------------------------------- Empty --- */

.bb-empty {
    background: var(--bb-surface);
    border: 1px dashed #cfd6dd;
    border-radius: var(--bb-radius);
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--bb-muted);
}

.bb-roadmap {
    padding-left: 1.15rem;
    margin-bottom: 1rem;
}

.bb-roadmap li {
    margin-bottom: .3rem;
}

/* ------------------------------------------------------------ Auth pages -- */

.bb-auth-body {
    background: linear-gradient(180deg, #0d2b4a 0%, #123a63 46%, #f4f6f8 46%, #f4f6f8 100%);
    min-height: 100vh;
    min-height: 100dvh;
}

.bb-auth-wrap {
    max-width: 440px;
    margin: 0 auto;
    padding: 3rem 1rem 2rem;
}

.bb-auth-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: 14px;
    box-shadow: 0 6px 28px rgba(13, 43, 74, .16);
    padding: 1.9rem 1.6rem;
}

.bb-auth-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.6rem;
}

.bb-auth-title {
    font-size: 1.15rem;
    font-weight: 680;
    line-height: 1.2;
}

.bb-auth-sub {
    color: var(--bb-muted);
    font-size: .82rem;
}

.bb-auth-heading {
    font-size: 1.28rem;
    font-weight: 650;
    margin-bottom: .5rem;
}

.bb-auth-lead {
    color: var(--bb-muted);
    font-size: .9rem;
    margin-bottom: 1rem;
}

.bb-auth-note {
    color: var(--bb-muted);
    font-size: .82rem;
    text-align: center;
    margin: 1.4rem 0 0;
}

.bb-auth-foot {
    text-align: center;
    color: var(--bb-muted);
    font-size: .78rem;
    margin-top: 1.25rem;
}

.bb-link-quiet {
    color: var(--bb-navy);
    font-size: .87rem;
    text-decoration: none;
}

.bb-link-quiet:hover {
    text-decoration: underline;
}

.bb-reference {
    background: var(--bb-canvas);
    border: 1px solid var(--bb-line);
    border-radius: 8px;
    padding: .7rem .85rem;
    margin-bottom: 1.25rem;
}

.bb-reference-label {
    color: var(--bb-muted);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
}

.bb-reference code {
    font-size: .82rem;
    color: var(--bb-ink);
    word-break: break-all;
}

/* --------------------------------------------------- Mobile bottom nav --- */

.bb-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 10px rgba(18, 58, 99, .07);
}

.bb-bottom-nav a {
    flex: 1;
    text-align: center;
    padding: .7rem .25rem;
    color: var(--bb-muted);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
    /* 44px minimum tap target */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-bottom-nav a.active {
    color: var(--bb-navy);
    box-shadow: inset 0 2px 0 var(--bb-navy);
}

@media (max-width: 991.98px) {
    .bb-main {
        padding-bottom: 4.75rem;
    }
}

/* --------------------------------------------------- Dashboard actions -- */

/* The whole row is the link, not a button inside it. On a phone the difference
   between a 44px target and a 300px one is whether the thing gets used. */

.bb-actions-list {
    display: grid;
    gap: .55rem;
}

.bb-action {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-left: 3px solid var(--bb-navy);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s ease, transform .12s ease;
}

.bb-action:hover,
.bb-action:focus-visible {
    border-color: var(--bb-navy);
    border-left-color: var(--bb-navy);
    color: inherit;
}

.bb-action-urgent {
    border-left-color: var(--bb-danger);
    background: #fffaf9;
}

.bb-action-count {
    flex: 0 0 auto;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bb-navy);
    color: #fff;
    font-weight: 650;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.bb-action-urgent .bb-action-count {
    background: var(--bb-danger);
}

.bb-action-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bb-action-title {
    display: block;
    font-weight: 620;
    line-height: 1.35;
}

.bb-action-detail {
    display: block;
    color: var(--bb-muted);
    font-size: .84rem;
    margin-top: .1rem;
}

.bb-action-go {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .3rem;
    color: var(--bb-muted);
}

/* The operator's balance. Deliberately the largest thing on his screen — it is
   what he opens the application to check, and he reads it on a phone. */

.bb-pool {
    border-left: 4px solid var(--bb-accent);
}

.bb-pool-value {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin: .2rem 0 .5rem;
    color: var(--bb-navy);
    font-variant-numeric: tabular-nums;
}

.bb-pool-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bb-muted);
    margin-left: .25rem;
}

/* The operator's three buttons. Big, obvious, and the same three every day —
   he uses this on a phone, standing in a shop. */

.bb-quick {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    padding: .85rem 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    color: var(--bb-navy);
    font-weight: 620;
    text-decoration: none;
}

.bb-quick:hover,
.bb-quick:focus-visible {
    border-color: var(--bb-navy);
    background: rgba(18, 58, 99, .04);
    color: var(--bb-navy);
}

.bb-quick svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--bb-accent);
}

.bb-quick span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------- Audit -- */

/* Collapsed by default. The before/after JSON is evidence and is shown raw —
   prettifying it would mean deciding what to leave out — but it is long, and a
   log where every row is a paragraph is a log nobody scans. */

.bb-changes summary {
    cursor: pointer;
    color: var(--bb-navy);
    font-size: .78rem;
    font-weight: 600;
}

.bb-changes pre {
    margin: .35rem 0 0;
    padding: .5rem .6rem;
    background: var(--bb-canvas);
    border: 1px solid var(--bb-line);
    border-radius: 6px;
    font-size: .74rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 16rem;
    overflow: auto;
}

/* ------------------------------------------------------------- Reports -- */

.bb-report-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    height: 100%;
    padding: 1.1rem 1.15rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s ease;
}

.bb-report-card:hover,
.bb-report-card:focus-visible {
    border-color: var(--bb-navy);
    color: inherit;
}

.bb-report-title {
    font-weight: 640;
    font-size: 1.02rem;
    color: var(--bb-navy);
}

.bb-report-desc {
    color: var(--bb-muted);
    font-size: .86rem;
    line-height: 1.5;
}

/* Deliberately quiet. "Nothing waiting" is good news and should not compete for
   attention with the figures underneath it. */
.bb-clear {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--bb-ok-bg);
    border-radius: var(--bb-radius);
    background: var(--bb-ok-bg);
    color: var(--bb-ok);
    font-weight: 560;
}

.bb-clear svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

/* ----------------------------------------------------- Agreement / docs -- */

/* Reading measure, not full width. A legal document set across 1200px is one
   nobody finishes; ~70 characters a line is where prose stays readable. */

.bb-doc {
    max-width: 40rem;
    font-size: .95rem;
    line-height: 1.7;
}

.bb-doc h2 {
    font-size: 1.05rem;
    font-weight: 650;
    margin: 1.8rem 0 .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--bb-line);
}

.bb-doc h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.bb-doc-risk {
    color: var(--bb-danger);
}

.bb-doc p,
.bb-doc ul {
    margin-bottom: .9rem;
}

.bb-doc li {
    margin-bottom: .35rem;
}

.bb-doc-table {
    font-size: .88rem;
    margin-bottom: 1rem;
}

/* Markdig renders "> quoted" as a blockquote; the terms use it for the one
   paragraph that must not be skimmed. */
.bb-doc blockquote,
.bb-doc-emphasis {
    padding: .8rem 1rem;
    border-left: 3px solid var(--bb-danger);
    background: #fffaf9;
    font-weight: 560;
}

/* Monospaced, because Markdown's meaning is in its alignment — a pipe table or a
   nested bullet is unreadable in a proportional face. */
.bb-markdown {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.6;
    tab-size: 2;
}

/* --- The standalone printable copy --- */

.bb-print-body {
    background: var(--bb-canvas);
    padding: 2rem 1rem 6rem;
}

.bb-print-sheet {
    max-width: 46rem;
    margin-inline: auto;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
}

.bb-print-head {
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--bb-navy);
}

.bb-print-brand {
    color: var(--bb-navy);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
}

.bb-print-head h1 {
    font-size: 1.6rem;
    font-weight: 650;
    margin: .3rem 0 .2rem;
}

.bb-print-head p {
    color: var(--bb-muted);
    font-size: .88rem;
    margin: 0;
}

.bb-print-accepted,
.bb-print-unaccepted {
    padding: .7rem 1rem;
    border-radius: 6px;
    font-size: .88rem;
    margin-bottom: 1.5rem;
}

.bb-print-accepted {
    background: var(--bb-ok-bg);
    color: var(--bb-ok);
}

.bb-print-unaccepted {
    background: var(--bb-warn-bg);
    color: var(--bb-warn);
}

.bb-print-foot {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bb-line);
    color: var(--bb-muted);
    font-size: .78rem;
}

.bb-print-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: .5rem;
    justify-content: center;
    padding: .85rem;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-line);
}

@media print {
    .bb-print-body {
        background: #fff;
        padding: 0;
    }

    .bb-print-sheet {
        max-width: none;
        border: 0;
        padding: 0;
    }

    /* Never split a clause across a page break — half a risk warning on one
       sheet and half on the next is how the second half goes unread. */
    .bb-doc h2 {
        break-after: avoid;
    }

    .bb-doc p,
    .bb-doc ul,
    .bb-doc-emphasis,
    .bb-doc-table {
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------- Print -- */

@media print {
    .bb-sidebar,
    .bb-topbar,
    .bb-drawer,
    .bb-bottom-nav,
    .bb-form-actions,
    .bb-actions,
    .btn {
        display: none !important;
    }

    /* The sidebar is gone, so reclaim its column - a printed report should use
       the whole page. */
    .bb-app .bb-shell {
        margin-left: 0 !important;
    }

    body {
        background: #fff;
    }

    .bb-card,
    .bb-stat {
        border-color: #bbb;
        box-shadow: none;
        break-inside: avoid;
    }
}