@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /Components/ConfirmationModal.razor.rz.scp.css */
.modal-overlay[b-eogaki81zi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(16, 24, 40, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.c-modal[b-eogaki81zi] {
    background: var(--am-surface);
    padding: 0 0 20px 0;
    border-radius: var(--am-radius-lg);
    box-shadow: var(--am-shadow-2);
    text-align: center;
    min-width: 300px;
    overflow: hidden;
}

    .c-modal p[b-eogaki81zi] {
        font-size: var(--am-fs-h2);
        margin-bottom: 15px;
        background-color: var(--am-slate);
        font-weight: 600;
        padding: 12px 16px;
        color: #fff;
    }

    .c-modal button[b-eogaki81zi] {
        padding: 10px 20px;
        margin: 5px;
        border: none;
        border-radius: var(--am-radius);
        font-size: var(--am-fs-body);
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

        .c-modal button:first-child[b-eogaki81zi] {
            background: var(--am-good);
            color: #fff;
        }

        .c-modal button:last-child[b-eogaki81zi] {
            background: var(--am-blue);
            color: #fff;
        }

        .c-modal button:hover[b-eogaki81zi] {
            opacity: 0.8;
        }
/* /Components/Loader.razor.rz.scp.css */
.fullscreen-loader[b-b2txidqhyq] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(16, 24, 40, 0.45);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.fullscreen-loader.is-loading[b-b2txidqhyq] {
    display: flex;
}

.spinner[b-b2txidqhyq] {
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin-b-b2txidqhyq 1s linear infinite;
}

/* Users who ask for reduced motion get a still ring rather than a spinning one. */
@media (prefers-reduced-motion: reduce) {
    .spinner[b-b2txidqhyq] {
        animation: none;
    }
}

@keyframes spin-b-b2txidqhyq {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Client/Clients.razor.rz.scp.css */
.header[b-f8afar72fy] {
    display: flex;
}

.add-icon[b-f8afar72fy] {
    margin-left: 10px;
}

.edit-rate[b-f8afar72fy] {
    margin-left: 10px;
}

.rate-table[b-f8afar72fy] {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

    .rate-table th[b-f8afar72fy],
    .rate-table td[b-f8afar72fy] {
        padding: 0 4px;
        width: 25%;
    }

.rate[b-f8afar72fy] {
    width: 120px;
    text-align: end;
}

/* On a phone four rate inputs across a modal come to 70px each, too narrow for
   a rate. They go two by two, each with its own label because the column heads
   above them are gone. */
@media (max-width: 575.98px) {
    .rate-table thead[b-f8afar72fy] {
        display: none;
    }

    .rate-table tbody tr[b-f8afar72fy] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 0.75rem;
    }

    .rate-table td[b-f8afar72fy] {
        display: block;
        width: auto;
        padding: 0;
    }

    .rate-table td[b-f8afar72fy]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-size: var(--am-fs-label);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--am-steel-light);
    }
}
/* /Pages/Dashboard/DashboardView.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   Dashboard layout.

   The screen is four bands, each with its tracks named. It used to be two
   auto-fit grids, which on a 1920px monitor resolved to three 533px cards
   holding a two digit number, and a four column panel row with the fifth panel
   orphaned alone underneath. auto-fit is right when the item count varies; this
   screen's does not, so the columns are a decision rather than a calculation -
   and naming them is also what lets the drill-down be wider than its neighbour.
   --------------------------------------------------------------------------- */

.dash[b-3txikuy5g7] {
    max-width: 1500px;
    padding-bottom: var(--am-space-6);
}

/* Chart colours.

   The age ramp is one blue stepped light to dark - newer to older - rather than
   a green/amber/red set: it is a magnitude, the four steps stay separable under
   every kind of colour blindness, and each bar carries its band and its value in
   text beside it. The labour split is the two hues that read as most distinct
   from one another on white. */
.dash[b-3txikuy5g7] {
    --age-1: #86b6ef;
    --age-2: #5598e7;
    --age-3: #3a6fcc;
    --age-4: #1c5cab;
    --billable: #447ee2;
    --nonbillable: #eb6834;
    --chart-baseline: #e1e0d9;
}

.band[b-3txikuy5g7] {
    display: grid;
    gap: var(--am-space-3);
    margin-bottom: var(--am-space-3);
}

.band-money[b-3txikuy5g7] {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
}

.band-drill[b-3txikuy5g7],
.band-trend[b-3txikuy5g7] {
    grid-template-columns: 2fr 1fr;
}

.band-ops[b-3txikuy5g7] {
    grid-template-columns: 1fr 1fr 1fr;
}

.band-trend[b-3txikuy5g7] {
    margin-bottom: 0;
}

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

.dash-card[b-3txikuy5g7] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--am-rule);
    border-radius: var(--am-radius-lg);
    background-color: var(--am-surface);
    box-shadow: var(--am-shadow-1);
    overflow: hidden;
}

.dash-card-head[b-3txikuy5g7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--am-space-3);
    padding: var(--am-space-3) var(--am-space-4);
    border-bottom: 1px solid var(--am-rule);
}

.dash-card-title[b-3txikuy5g7] {
    margin: 0;
    font-size: var(--am-fs-label);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--am-steel);
}

.dash-card-head[b-3txikuy5g7]  a {
    font-size: var(--am-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .dash-card-head[b-3txikuy5g7]  a:hover {
        text-decoration: underline;
    }

.dash-card-body[b-3txikuy5g7] {
    flex: 1 1 auto;
    padding: var(--am-space-3) var(--am-space-4) var(--am-space-4);
}

/* Only the drill-down is allowed to grow, and it scrolls itself rather than
   dragging the whole band down with it. Every other panel ends where its content
   ends - no fixed cap turning a short list into a peephole. */
.dash-card-scroll[b-3txikuy5g7] {
    max-height: 30rem;
    overflow-y: auto;
}

/* Its neighbour spreads to match instead of leaving a void underneath. */
.dash-card-spread[b-3txikuy5g7] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.panel-empty[b-3txikuy5g7] {
    margin: 0;
    padding: var(--am-space-2) 0;
    font-size: var(--am-fs-sm);
    color: var(--am-steel);
}

.panel-note[b-3txikuy5g7] {
    margin: var(--am-space-3) 0 0;
    font-size: var(--am-fs-sm);
    color: var(--am-steel);
}

/* ---------------------------------------------------------------------------
   Tiles
   --------------------------------------------------------------------------- */

.tile[b-3txikuy5g7] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--am-space-4);
    border: 1px solid var(--am-rule);
    border-radius: var(--am-radius-lg);
    background-color: var(--am-surface);
    box-shadow: var(--am-shadow-1);
}

.tile-label[b-3txikuy5g7] {
    margin: 0 0 var(--am-space-2);
    font-size: var(--am-fs-label);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--am-steel);
}

.tile-value[b-3txikuy5g7] {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--am-ink);
}

.tile-note[b-3txikuy5g7] {
    margin: var(--am-space-2) 0 0;
    font-size: var(--am-fs-sm);
    color: var(--am-steel);
}

    .tile-note b[b-3txikuy5g7] {
        color: var(--am-ink-2);
        font-weight: 600;
    }

.tile-note-flag[b-3txikuy5g7] {
    color: var(--am-bad);
}

/* The one number the screen leads with. Tinted rather than outlined so it reads
   as the subject of the row without a second border weight appearing. */
.tile-hero[b-3txikuy5g7] {
    border-color: #f3c9c5;
    background: linear-gradient(180deg, #fffbfb 0%, var(--am-surface) 62%);
}

    .tile-hero .tile-label[b-3txikuy5g7] {
        color: var(--am-bad);
    }

.hero-value[b-3txikuy5g7] {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--am-ink);
}

.hero-sub[b-3txikuy5g7] {
    margin: var(--am-space-2) 0 var(--am-space-3);
    font-size: var(--am-fs-body);
    color: var(--am-ink-2);
}

    .hero-sub b[b-3txikuy5g7] {
        font-weight: 600;
    }

.delta[b-3txikuy5g7] {
    font-weight: 600;
}

.delta-up[b-3txikuy5g7] {
    color: var(--am-good);
}

.delta-down[b-3txikuy5g7] {
    color: var(--am-bad);
}

/* ---------------------------------------------------------------------------
   Age strip and age bars
   --------------------------------------------------------------------------- */

.agestrip[b-3txikuy5g7] {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--am-space-2);
}

    .agestrip i[b-3txikuy5g7] {
        display: block;
        height: 100%;
    }

.agekey[b-3txikuy5g7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-space-1) var(--am-space-3);
    font-size: var(--am-fs-label);
    color: var(--am-steel);
    letter-spacing: 0.02em;
}

    .agekey span[b-3txikuy5g7] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .agekey b[b-3txikuy5g7] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

.agerow[b-3txikuy5g7] {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--am-space-3);
    margin-bottom: var(--am-space-3);
}

    .agerow:last-child[b-3txikuy5g7] {
        margin-bottom: 0;
    }

.agelab[b-3txikuy5g7] {
    font-size: var(--am-fs-sm);
    color: var(--am-ink-2);
    white-space: nowrap;
}

.agebar[b-3txikuy5g7] {
    height: 20px;
    border-radius: 0 4px 4px 0;
}

.ageval[b-3txikuy5g7] {
    font-size: var(--am-fs-body);
    font-weight: 600;
    color: var(--am-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.agefoot[b-3txikuy5g7] {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: var(--am-space-4) 0 0;
    padding-top: var(--am-space-3);
    border-top: 1px solid var(--am-rule);
    font-size: var(--am-fs-sm);
    color: var(--am-ink-2);
}

    .agefoot .dot[b-3txikuy5g7] {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-top: 5px;
        border-radius: 50%;
        background-color: var(--am-bad);
    }

.fill-age-1[b-3txikuy5g7] { background-color: var(--age-1); }
.fill-age-2[b-3txikuy5g7] { background-color: var(--age-2); }
.fill-age-3[b-3txikuy5g7] { background-color: var(--age-3); }
.fill-age-4[b-3txikuy5g7] { background-color: var(--age-4); }
.fill-billable[b-3txikuy5g7] { background-color: var(--billable); }
.fill-other[b-3txikuy5g7] { background-color: var(--nonbillable); }

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

.dash-table[b-3txikuy5g7] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--am-fs-body);
}

.dash-table-sm[b-3txikuy5g7] {
    font-size: var(--am-fs-sm);
}

.dash-table th[b-3txikuy5g7] {
    padding: 0 var(--am-space-2) var(--am-space-2) 0;
    border-bottom: 1px solid var(--am-rule);
    font-size: var(--am-fs-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--am-steel);
    text-align: left;
    white-space: nowrap;
}

.dash-table td[b-3txikuy5g7] {
    padding: 0.4rem var(--am-space-2) 0.4rem 0;
    border-bottom: 1px solid var(--am-rule);
    vertical-align: middle;
    color: var(--am-ink-2);
}

.dash-table-sm td[b-3txikuy5g7] {
    padding: 0.38rem var(--am-space-2) 0.38rem 0;
}

.dash-table tbody tr:last-child td[b-3txikuy5g7] {
    border-bottom: 0;
}

.dash-table .num[b-3txikuy5g7] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dash-table .strong[b-3txikuy5g7] {
    font-weight: 600;
    color: var(--am-ink);
}

.dash-table .muted[b-3txikuy5g7] {
    color: var(--am-steel);
}

.dash-table .nowrap[b-3txikuy5g7] {
    white-space: nowrap;
}

.dash-table .ref[b-3txikuy5g7] {
    font-weight: 600;
    color: var(--am-blue-text);
    white-space: nowrap;
}

/* The one column that gives up its width first, so a long client name shortens
   rather than pushing the numbers out of the card. */
.col-grow[b-3txikuy5g7] {
    width: 99%;
}

.trunc[b-3txikuy5g7] {
    max-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-client[b-3txikuy5g7] {
    width: 14rem;
}

.col-bar[b-3txikuy5g7] {
    width: 34%;
    padding-right: var(--am-space-3) !important;
}

.bar-track[b-3txikuy5g7] {
    position: relative;
    height: 16px;
}

.bar[b-3txikuy5g7] {
    height: 16px;
    border-radius: 0 4px 4px 0;
    background-color: var(--am-blue);
}

/* ---------------------------------------------------------------------------
   Drill down rows
   --------------------------------------------------------------------------- */

.crow[b-3txikuy5g7],
.linkrow[b-3txikuy5g7] {
    cursor: pointer;
}

    .crow:hover[b-3txikuy5g7],
    .linkrow:hover[b-3txikuy5g7] {
        background-color: var(--am-ground);
    }

    .crow.open[b-3txikuy5g7] {
        background-color: var(--am-blue-light);
    }

.cname[b-3txikuy5g7] {
    font-weight: 600;
    color: var(--am-ink);
    white-space: nowrap;
}

.caret[b-3txikuy5g7] {
    display: inline-block;
    width: 12px;
    color: var(--am-steel);
    transition: transform 0.12s;
}

.crow.open .caret[b-3txikuy5g7] {
    transform: rotate(90deg);
    color: var(--am-blue-text);
}

/* A client's own reports, set on the page ground so the group reads as one
   thing that opened rather than as more rows in the same list. */
.rrow[b-3txikuy5g7] {
    cursor: pointer;
}

    .rrow td[b-3txikuy5g7] {
        background-color: var(--am-ground);
        font-size: var(--am-fs-sm);
    }

    .rrow:hover td[b-3txikuy5g7] {
        background-color: var(--am-blue-light);
    }

    .rrow .ref[b-3txikuy5g7] {
        padding-left: 1.6rem;
    }

.pill[b-3txikuy5g7] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: var(--am-fs-label);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pill-ok[b-3txikuy5g7] {
    background-color: var(--am-good-soft);
    color: var(--am-good);
}

.pill-warn[b-3txikuy5g7] {
    background-color: var(--am-warn-soft);
    color: var(--am-warn-ink);
}

.pill-bad[b-3txikuy5g7] {
    background-color: var(--am-bad-soft);
    color: var(--am-bad);
}

/* ---------------------------------------------------------------------------
   Labour
   --------------------------------------------------------------------------- */

.util-hero[b-3txikuy5g7] {
    display: flex;
    align-items: baseline;
    gap: var(--am-space-2);
    margin-bottom: var(--am-space-1);
}

    .util-hero b[b-3txikuy5g7] {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1;
        color: var(--am-ink);
    }

    .util-hero span[b-3txikuy5g7] {
        font-size: var(--am-fs-sm);
        color: var(--am-steel);
    }

.legend[b-3txikuy5g7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-space-1) var(--am-space-3);
    margin: var(--am-space-3) 0;
    font-size: var(--am-fs-label);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--am-steel);
}

    .legend span[b-3txikuy5g7] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .legend i[b-3txikuy5g7] {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
    }

/* The name column is wide enough for "N. Oppermann" rather than the shortest name in the
   list, so a longer surname is not the one that gets an ellipsis. */
.urow[b-3txikuy5g7] {
    display: grid;
    grid-template-columns: 6rem 1fr 2.6rem;
    align-items: center;
    gap: var(--am-space-2);
    margin-bottom: 7px;
}

.uname[b-3txikuy5g7] {
    font-size: var(--am-fs-sm);
    color: var(--am-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2px of surface between the two fills rather than a stroke around them: the
   gap is what separates the marks, and a border would add ink that is not data. */
.ustack[b-3txikuy5g7] {
    display: flex;
    gap: 2px;
    height: 14px;
}

    .ustack i[b-3txikuy5g7] {
        display: block;
        height: 100%;
    }

        .ustack i:first-child[b-3txikuy5g7] {
            border-radius: 2px 0 0 2px;
        }

        .ustack i:last-child[b-3txikuy5g7] {
            border-radius: 0 4px 4px 0;
        }

.upct[b-3txikuy5g7] {
    font-size: var(--am-fs-sm);
    font-weight: 600;
    color: var(--am-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Six month trend
   --------------------------------------------------------------------------- */

.cols[b-3txikuy5g7] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--am-space-3);
    height: 132px;
    padding-top: var(--am-space-4);
    border-bottom: 1px solid var(--chart-baseline);
}

.col[b-3txikuy5g7] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

    /* Capped rather than filling the slot, so the leftover is air. */
    .col b[b-3txikuy5g7] {
        display: block;
        width: 100%;
        max-width: 24px;
        border-radius: 4px 4px 0 0;
        background-color: var(--am-blue);
    }

    .col.dim b[b-3txikuy5g7] {
        background-color: #9ec5f4;
    }

    /* One direct label, on the month the reader is standing in. A value on every
       column reads as noise and goes unread; the rest carry theirs in the tooltip. */
    .col em[b-3txikuy5g7] {
        position: absolute;
        font-style: normal;
        font-size: var(--am-fs-sm);
        font-weight: 600;
        color: var(--am-ink);
        white-space: nowrap;
    }

.colx[b-3txikuy5g7] {
    display: flex;
    gap: var(--am-space-3);
    margin-top: 6px;
}

    .colx span[b-3txikuy5g7] {
        flex: 1;
        text-align: center;
        font-size: var(--am-fs-label);
        letter-spacing: 0.03em;
        color: var(--am-steel);
    }

/* ---------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .band-ops[b-3txikuy5g7] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1100px) {
    .band-money[b-3txikuy5g7] {
        grid-template-columns: 1fr 1fr;
    }

    .band-drill[b-3txikuy5g7],
    .band-trend[b-3txikuy5g7],
    .band-ops[b-3txikuy5g7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .band-money[b-3txikuy5g7] {
        grid-template-columns: 1fr;
    }

    /* Five columns of client figures came to 340px in a 325px card. */
    .dash-table th[b-3txikuy5g7],
    .dash-table td[b-3txikuy5g7] {
        padding-right: var(--am-space-1);
    }

    .col-client[b-3txikuy5g7] {
        width: auto;
    }

    .col-bar[b-3txikuy5g7] {
        display: none;
    }
}
/* /Pages/Employee/Employee.razor.rz.scp.css */


.edit-rate[b-mbczozhyyl] {
    margin-left: 10px;
}
/* /Pages/Index.razor.rz.scp.css */
/* The shell's only style: what stands in for the dashboard while it loads. Everything else
   belongs to DashboardView, which owns the screen itself. */

.dash-loading[b-x1su9oag46] {
    color: var(--am-steel);
    font-size: var(--am-fs-body);
}
/* /Pages/Login/LoginLayout.razor.rz.scp.css */
/* -----------------------------------------------------------------------------
   Login / landing shell, shared by sign-in, forgot-password and reset-password.

   One continuous dark slate canvas across the whole viewport: brand copy on
   the left, the white card floating on the right. There is no light section
   and so no seam - the card is the single bright element on the page.
   Everything is drawn from the design tokens in site.css so the pages stay in
   step with the rest of the app. Below the laptop breakpoint the brand copy is
   removed and the card centres itself on the (still dark) viewport, so there
   is a sensible layout at every width - a tablet or a half-width window is not
   left with an empty screen.

   The shell, hero and card frame are rendered by this layout; the card content
   (intro, fields, alerts, links) comes from each page through the layout body,
   so those rules are reached with ::deep.
   ----------------------------------------------------------------------------- */

.login-shell[b-thq5zqwa5e] {
    position: relative;
    /* Clips the glow and cog texture at the viewport edges. */
    overflow: hidden;
    display: grid;
    /* Capped columns centred as a pair: on a big monitor the canvas stretches
       but the copy and the card stay in one composition instead of drifting to
       opposite edges. minmax(0, …) lets the columns shrink below the caps on
       smaller laptops. */
    grid-template-columns: minmax(0, 34rem) minmax(0, 30rem);
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(120% 120% at 15% 0%, var(--am-slate-light) 0%, var(--am-slate) 55%, #1a2735 100%);
}

/* --- Left: brand copy, straight on the canvas ------------------------------ */

.login-hero[b-thq5zqwa5e] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--am-space-12) var(--am-space-12) var(--am-space-8);
    color: #fff;
}

/* A soft brand-blue wash so the panel is not a flat slab. */
.login-hero-glow[b-thq5zqwa5e] {
    position: absolute;
    top: -18%;
    right: -20%;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(68, 126, 226, 0.55) 0%, rgba(68, 126, 226, 0) 68%);
    pointer-events: none;
}

/* Faint cogs as quiet texture. Line icons read fine in white at low opacity;
   they never compete with the copy. */
.login-hero-cog[b-thq5zqwa5e] {
    position: absolute;
    color: #fff;
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}

.login-hero-cog-1[b-thq5zqwa5e] {
    bottom: -3.5rem;
    right: -3rem;
    font-size: 20rem;
}

.login-hero-cog-2[b-thq5zqwa5e] {
    top: 3rem;
    right: 6rem;
    font-size: 6rem;
    opacity: 0.05;
}

.login-hero-inner[b-thq5zqwa5e] {
    position: relative;
    z-index: 1;
    max-width: 26rem;
    margin: auto 0;
}

.login-hero-brand[b-thq5zqwa5e] {
    display: flex;
    align-items: center;
    gap: var(--am-space-3);
    margin-bottom: var(--am-space-8);
}

/* The mark carries black detail, so it sits on a white chip rather than straight
   on the dark panel where that detail would be lost. */
.login-hero-mark[b-thq5zqwa5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0.4rem;
    border-radius: var(--am-radius-lg);
    background-color: #fff;
    box-shadow: var(--am-shadow-1);
    flex: 0 0 auto;
}

.login-hero-mark img[b-thq5zqwa5e] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-hero-word[b-thq5zqwa5e] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.login-hero-name[b-thq5zqwa5e] {
    font-size: var(--am-fs-h2);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.login-hero-tag[b-thq5zqwa5e] {
    font-size: var(--am-fs-sm);
    color: rgba(255, 255, 255, 0.72);
}

.login-hero-headline[b-thq5zqwa5e] {
    margin: 0 0 var(--am-space-3);
    font-size: var(--am-fs-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.login-hero-lead[b-thq5zqwa5e] {
    margin: 0 0 var(--am-space-8);
    font-size: var(--am-fs-h2);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.login-hero-list[b-thq5zqwa5e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--am-space-4);
}

.login-hero-list li[b-thq5zqwa5e] {
    display: flex;
    align-items: center;
    gap: var(--am-space-3);
    font-size: var(--am-fs-body);
    color: rgba(255, 255, 255, 0.9);
}

.login-hero-list i[b-thq5zqwa5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--am-radius);
    background-color: rgba(68, 126, 226, 0.22);
    color: #fff;
    font-size: 1rem;
    flex: 0 0 auto;
}

.login-hero-foot[b-thq5zqwa5e] {
    position: relative;
    z-index: 1;
    margin: var(--am-space-8) 0 0;
    font-size: var(--am-fs-sm);
    color: rgba(255, 255, 255, 0.5);
}

/* --- Right: the page's card ----------------------------------------------- */

.login-main[b-thq5zqwa5e] {
    /* Anchors the language chip to the panel's top-right corner. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--am-space-8) var(--am-space-6);
}

/* The language chip sits quietly in the corner, clear of the card at every width. */
.login-lang[b-thq5zqwa5e] {
    position: absolute;
    top: var(--am-space-4);
    right: var(--am-space-4);
}

/* The chip's ink colours are tuned for light surfaces; on the dark canvas it
   switches to white at the same quiet weights. */
.login-lang[b-thq5zqwa5e]  .lang-chip {
    color: rgba(255, 255, 255, 0.85);
}

.login-lang[b-thq5zqwa5e]  .lang-chip .bi-globe2,
.login-lang[b-thq5zqwa5e]  .lang-caret {
    color: rgba(255, 255, 255, 0.65);
}

.login-lang[b-thq5zqwa5e]  .lang-chip:hover,
.login-lang[b-thq5zqwa5e]  .lang-chip[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.12);
}

.login-card[b-thq5zqwa5e] {
    width: 100%;
    max-width: 24rem;
    padding: var(--am-space-8);
    border-radius: 1.25rem;
    background-color: var(--am-surface);
    /* The card is the one bright element on the dark canvas, so it floats on a
       deep soft shadow rather than a hairline border. */
    box-shadow: 0 24px 64px rgba(10, 16, 24, 0.45);
}

.login-logo[b-thq5zqwa5e] {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
    margin: 0 0 var(--am-space-6);
}

/* --- Card content, supplied by each page through the layout body ----------- */

.login-card[b-thq5zqwa5e]  .login-intro {
    margin-bottom: var(--am-space-6);
}

.login-card[b-thq5zqwa5e]  .login-title {
    margin: 0 0 var(--am-space-1);
    font-size: var(--am-fs-h1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--am-ink);
}

.login-card[b-thq5zqwa5e]  .login-subtitle {
    margin: 0;
    font-size: var(--am-fs-body);
    color: var(--am-steel);
}

.login-card[b-thq5zqwa5e]  .login-alert {
    display: flex;
    align-items: center;
    gap: var(--am-space-2);
    padding: var(--am-space-2) var(--am-space-3);
    margin-bottom: var(--am-space-4);
    font-size: var(--am-fs-body);
}

.login-card[b-thq5zqwa5e]  .login-field {
    margin-bottom: var(--am-space-4);
}

.login-card[b-thq5zqwa5e]  .login-label {
    display: block;
    margin-bottom: var(--am-space-1);
    font-size: var(--am-fs-sm);
    font-weight: 600;
    color: var(--am-ink-2);
}

/* display/text-align cover the anchor-styled buttons the recovery pages use. */
.login-card[b-thq5zqwa5e]  .login-submit {
    display: block;
    width: 100%;
    margin-top: var(--am-space-2);
    padding: var(--am-space-2) var(--am-space-4);
    font-weight: 600;
    text-align: center;
}

.login-card[b-thq5zqwa5e]  .login-links {
    margin-top: var(--am-space-4);
    text-align: center;
    font-size: var(--am-fs-sm);
}

.login-card[b-thq5zqwa5e]  .login-links a {
    color: var(--am-steel);
    text-decoration: none;
}

.login-card[b-thq5zqwa5e]  .login-links a:hover {
    color: var(--am-ink);
    text-decoration: underline;
}

/* --- Reflow --------------------------------------------------------------- */

/* Below the laptop breakpoint the brand panel is more than the width can carry,
   so it steps aside and the card takes the viewport. */
@media (max-width: 900px) {
    .login-shell[b-thq5zqwa5e] {
        grid-template-columns: 1fr;
    }

    .login-hero[b-thq5zqwa5e] {
        display: none;
    }

    .login-main[b-thq5zqwa5e] {
        min-height: 100vh;
    }
}
/* /Pages/Part/Part.razor.rz.scp.css */
.header[b-i5piau7rp6] {
    display: flex;
}

.add-icon[b-i5piau7rp6] {
    margin-left: 10px;
}

.edit-rate[b-i5piau7rp6] {
    margin-left: 10px;
}

.part-description[b-i5piau7rp6] {
    text-overflow: ellipsis;
    max-width: 400px;
    text-wrap: nowrap;
    overflow: hidden;
}
/* /Pages/Quote/AddQuote.razor.rz.scp.css */
.page-footer[b-sr1tabew3c] {
    padding: 40px 0 20px 0;
}
/* /Pages/Quote/Quotes.razor.rz.scp.css */
.header[b-jznxlx4zxz] {
    display: flex;
}

.add-icon[b-jznxlx4zxz] {
    margin-left: 10px;
}

.edit-rate[b-jznxlx4zxz] {
    margin-left: 10px;
}
/* /Pages/Reports/DisplayQuote.razor.rz.scp.css */

/* /Pages/Reports/DisplayReport.razor.rz.scp.css */

/* /Pages/ServiceReport/AddServiceReport.razor.rz.scp.css */
.page-footer[b-j8i4s3pgwe] {
    padding: 40px 0 20px 0;
}

.quoted-labour[b-j8i4s3pgwe] {
    max-width: 640px;
}
/* /Pages/ServiceReport/ServiceReports.razor.rz.scp.css */
.header[b-pxo8v4uy38] {
    display: flex;
}

.add-icon[b-pxo8v4uy38] {
    margin-left: 10px;
}

.edit-rate[b-pxo8v4uy38] {
    margin-left: 10px;
}

.page-numbers[b-pxo8v4uy38] {
    vertical-align: text-bottom;
    line-height: 20px;
}
/* /Pages/StockReceiving/ReceiveStock.razor.rz.scp.css */
.header[b-fnq0qkrl6q] {
    display: flex;
}

.add-icon[b-fnq0qkrl6q] {
    margin-left: 10px;
}

.page-numbers[b-fnq0qkrl6q] {
    vertical-align: text-bottom;
    line-height: 20px;
}
/* /Pages/StockReceiving/StockReceipts.razor.rz.scp.css */
.header[b-na0p9rkgbi] {
    display: flex;
}

.add-icon[b-na0p9rkgbi] {
    margin-left: 10px;
}

.page-numbers[b-na0p9rkgbi] {
    vertical-align: text-bottom;
    line-height: 20px;
}
/* /Pages/Vehicle/Vehicle.razor.rz.scp.css */
.header[b-gu14kigq9q] {
    display: flex;
}

.add-icon[b-gu14kigq9q] {
    margin-left: 10px;
}

.edit-rate[b-gu14kigq9q] {
    margin-left: 10px;
}

.vehicle-description[b-gu14kigq9q] {
    text-overflow: ellipsis;
    max-width: 400px;
    text-wrap: nowrap;
    overflow: hidden;
}
/* /Shared/LanguageSelector.razor.rz.scp.css */
/* Mirrors the user chip next to it so the top row reads as one family. */
.lang-chip[b-9ow0qlja3t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--am-radius);
    background: none;
    color: var(--am-ink-2);
    font: inherit;
    font-weight: 500;
}

    .lang-chip:hover[b-9ow0qlja3t],
    .lang-chip[aria-expanded="true"][b-9ow0qlja3t] {
        background-color: var(--am-blue-light);
    }

    .lang-chip .bi-globe2[b-9ow0qlja3t] {
        color: var(--am-steel);
        font-size: 0.95rem;
    }

.lang-code[b-9ow0qlja3t] {
    font-size: var(--am-fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.lang-caret[b-9ow0qlja3t] {
    font-size: 0.7rem;
    color: var(--am-steel);
}

.lang-menu[b-9ow0qlja3t] {
    min-width: 9rem;
    border: 1px solid var(--am-rule);
    border-radius: var(--am-radius-lg);
    box-shadow: var(--am-shadow-2);
    font-size: var(--am-fs-body);
}

    .lang-menu .dropdown-item[b-9ow0qlja3t] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.4rem 1rem;
        color: var(--am-ink-2);
        font-weight: 500;
    }

        .lang-menu .dropdown-item:hover[b-9ow0qlja3t],
        .lang-menu .dropdown-item:focus[b-9ow0qlja3t] {
            background-color: var(--am-blue-light);
            color: var(--am-blue-text-hover);
        }

    .lang-menu .dropdown-item i[b-9ow0qlja3t] {
        color: var(--am-blue);
        font-size: 0.85rem;
    }
/* /Shared/LoginDisplay.razor.rz.scp.css */
/* The user chip is now a button that opens the account menu, so it carries the
   button reset itself and a quiet hover to signal it is interactive. */
.user-chip[b-233wofbx3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--am-radius);
    background: none;
    color: inherit;
    font: inherit;
}

    .user-chip:hover[b-233wofbx3y],
    .user-chip[aria-expanded="true"][b-233wofbx3y] {
        background-color: var(--am-blue-light);
    }

.user-avatar[b-233wofbx3y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--am-blue-light);
    /* The initials are small and bold on a pale tint, so they take the darkest
       blue in the set - the brand blue itself only reaches 3.4:1 here. */
    color: var(--am-blue-text-hover);
    font-size: var(--am-fs-sm);
    font-weight: 700;
    line-height: 1;
}

.user-name[b-233wofbx3y] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--am-ink-2);
    font-weight: 500;
}

.user-caret[b-233wofbx3y] {
    font-size: 0.7rem;
    color: var(--am-steel);
}

.user-menu[b-233wofbx3y] {
    min-width: 12rem;
    border: 1px solid var(--am-rule);
    border-radius: var(--am-radius-lg);
    box-shadow: var(--am-shadow-2);
    font-size: var(--am-fs-body);
}

    .user-menu .dropdown-item[b-233wofbx3y] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 1rem;
        color: var(--am-ink-2);
        font-weight: 500;
    }

        .user-menu .dropdown-item:hover[b-233wofbx3y],
        .user-menu .dropdown-item:focus[b-233wofbx3y] {
            background-color: var(--am-blue-light);
            color: var(--am-blue-text-hover);
        }

    .user-menu .dropdown-item i[b-233wofbx3y] {
        color: var(--am-steel);
        font-size: 0.9rem;
    }

        .user-menu .dropdown-item:hover i[b-233wofbx3y],
        .user-menu .dropdown-item:focus i[b-233wofbx3y] {
            color: var(--am-blue-text-hover);
        }

.logout-form[b-233wofbx3y] {
    margin: 0;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-u013rtvpsc] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Nothing inside the shell may widen the page. A grid that scrolls sideways
       inside its own card still reports its full width up the tree to here, and
       a phone browser answers that by widening its layout viewport to match - so
       every list page zoomed out to a thousand pixels. clip rather than hidden,
       so this box does not become a scroller and the sticky sidebar keeps the
       viewport as its own. */
    overflow-x: clip;
}

main[b-u013rtvpsc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--am-ground);
}

.sidebar[b-u013rtvpsc] {
    background-color: var(--am-slate);
}

/* The top bar reads as a shelf for the page, not as a second band of brand
   colour. It was previously the same saturated blue as the sidebar, which put a
   heavy L of colour around every screen. */
.top-row[b-u013rtvpsc] {
    background-color: var(--am-surface);
    border-bottom: 1px solid var(--am-rule);
    justify-content: flex-end;
    align-items: center;
    gap: var(--am-space-3);
    height: 3.5rem;
    display: flex;
    font-size: var(--am-fs-body);
    font-weight: 400;
    color: var(--am-steel);
}

    .top-row[b-u013rtvpsc]  a,
    .top-row[b-u013rtvpsc]  .btn-link {
        white-space: nowrap;
        color: var(--am-ink-2);
        font-weight: 500;
        text-decoration: none;
    }

        .top-row[b-u013rtvpsc]  a:hover,
        .top-row[b-u013rtvpsc]  .btn-link:hover {
            color: var(--am-blue);
        }

    .top-row[b-u013rtvpsc]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.main-view-port[b-u013rtvpsc] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 640.98px) {
    /* On a phone the language and account chips sit in the dark navbar beside the
       menu button (see NavMenu), so the light top bar has nothing left to show and
       gives its height back to the page. */
    .top-row[b-u013rtvpsc] {
        display: none;
    }

    /* A rem and a half of gutter each side is a fifth of a 375px screen. */
    article[b-u013rtvpsc] {
        padding-left: var(--am-space-4) !important;
        padding-right: var(--am-space-4) !important;
    }
}

@media (min-width: 641px) {
    .page[b-u013rtvpsc] {
        flex-direction: row;
    }

    .sidebar[b-u013rtvpsc] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex: 0 0 250px;
    }

    .top-row[b-u013rtvpsc] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-u013rtvpsc], article[b-u013rtvpsc] {
        padding-left: var(--am-space-8) !important;
        padding-right: var(--am-space-6) !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* The sidebar is chrome, so it stays deep and desaturated and lets the data on
   the page carry the colour. The previous blue gradient ran the full height and,
   with the matching blue top bar, wrapped every screen in an L of saturated
   colour that competed with the content. */

.navbar-toggler[b-jrauo9ftx7] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.top-row[b-jrauo9ftx7] {
    height: 3.5rem;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.navbar-brand[b-jrauo9ftx7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

/* The gear from the AeroMech lockup, cropped out of the full logo. It sits on a
   white tile because the mark's inner shape is black and would disappear against
   the slate; the tile keeps the brand colours exactly as drawn. The wordmark half
   of the logo is not used here - the sidebar sets "AeroMech" in its own type. */
.brand-mark[b-jrauo9ftx7] {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 5px;
    background-color: #fff;
    padding: 2px;
    object-fit: contain;
}

.nav-item[b-jrauo9ftx7] {
    font-size: var(--am-fs-body);
    padding-bottom: 0.125rem;
    font-weight: 400;
}

    .nav-item:first-of-type[b-jrauo9ftx7] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-jrauo9ftx7] {
        padding-bottom: 0.5rem;
    }

    .nav-item[b-jrauo9ftx7]  a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        height: 2.25rem;
        padding: 0 0.625rem;
        border-radius: var(--am-radius);
        color: #a9b6c4;
        line-height: 1;
        transition: background-color .12s ease-in-out, color .12s ease-in-out;
    }

.nav-item[b-jrauo9ftx7]  a .nav-icon {
    flex: 0 0 1rem;
    width: 1rem;
    font-size: 0.9375rem;
    color: #7e8fa1;
    text-align: center;
    transition: color .12s ease-in-out;
}

.nav-item[b-jrauo9ftx7]  a .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item[b-jrauo9ftx7]  a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}

    .nav-item[b-jrauo9ftx7]  a:hover .nav-icon {
        color: #c6d2de;
    }

/* The active item takes a rail rather than a full wash: it marks the position
   without lifting a whole block of colour out of the sidebar. */
.nav-item[b-jrauo9ftx7]  a.active {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-weight: 600;
}

    .nav-item[b-jrauo9ftx7]  a.active .nav-icon {
        color: #fff;
    }

    .nav-item[b-jrauo9ftx7]  a.active::before {
        content: "";
        position: absolute;
        left: -0.625rem;
        top: 0.25rem;
        bottom: 0.25rem;
        width: 2.5px;
        border-radius: 0 2px 2px 0;
        background-color: var(--am-blue);
    }

.nav-item[b-jrauo9ftx7]  a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* The two "start something new" buttons at the foot of the sidebar. One primary,
   one quieter, so the pair reads as a hierarchy rather than two equal choices. */
.nav-actions[b-jrauo9ftx7] {
    display: flex;
    flex-direction: column;
    gap: var(--am-space-2);
    padding: var(--am-space-2) var(--am-space-4) var(--am-space-4);
}

.nav-action[b-jrauo9ftx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--am-radius);
    font-size: var(--am-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .12s ease-in-out, border-color .12s ease-in-out;
}

.nav-action-primary[b-jrauo9ftx7] {
    background-color: var(--am-blue);
    border-color: var(--am-blue);
    color: #fff;
}

    .nav-action-primary:hover[b-jrauo9ftx7] {
        background-color: var(--am-blue-dark);
        border-color: var(--am-blue-dark);
    }

.nav-action-secondary[b-jrauo9ftx7] {
    background-color: transparent;
    border-color: var(--am-slate-rail);
    color: #c6d2de;
}

    .nav-action-secondary:hover[b-jrauo9ftx7] {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: #5d7186;
        color: #fff;
    }

.nav-action:focus-visible[b-jrauo9ftx7] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (min-width: 641px) {
    .navbar-toggler[b-jrauo9ftx7] {
        display: none;
    }

    .collapse[b-jrauo9ftx7] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-jrauo9ftx7] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

        /* The action buttons sit at the foot of the sidebar rather than directly
           under the last nav item, so the menu length does not move them. */
        .nav-scrollable > nav[b-jrauo9ftx7] {
            flex: 1 1 auto;
        }
}

/* Language and account chips, phones only. The light top bar that carries them
   from 641px up is hidden on a phone, so they sit here beside the menu button -
   one bar of chrome rather than two. The chips are drawn for a light surface;
   here they switch to white ink at the same quiet weights the login screen uses
   on its dark canvas. */
.navbar-tools[b-jrauo9ftx7] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
    margin-right: 0.5rem;
    min-width: 0;
}

.navbar-tools[b-jrauo9ftx7]  .lang-chip,
.navbar-tools[b-jrauo9ftx7]  .user-chip {
    min-height: 2.5rem;
    color: rgba(255, 255, 255, 0.85);
}

    .navbar-tools[b-jrauo9ftx7]  .lang-chip:hover,
    .navbar-tools[b-jrauo9ftx7]  .user-chip:hover,
    .navbar-tools[b-jrauo9ftx7]  .lang-chip[aria-expanded="true"],
    .navbar-tools[b-jrauo9ftx7]  .user-chip[aria-expanded="true"] {
        background-color: rgba(255, 255, 255, 0.12);
    }

.navbar-tools[b-jrauo9ftx7]  .lang-chip .bi-globe2,
.navbar-tools[b-jrauo9ftx7]  .lang-caret,
.navbar-tools[b-jrauo9ftx7]  .user-caret {
    color: rgba(255, 255, 255, 0.65);
}

/* The desktop bar has room for the name; here the avatar alone says who is in. */
.navbar-tools[b-jrauo9ftx7]  .user-name {
    display: none;
}

@media (min-width: 641px) {
    .navbar-tools[b-jrauo9ftx7] {
        display: none;
    }
}