/* app.css — Blazor-specific overrides; main theme is in theme.css */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmss9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Stable resize cursor while dragging a table column (toggled by columnResize.js). */
body.col-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ── Chips ──────────────────────────────────────────────────────────────────
   The app's one status-chip shape: a tinted fill, a matching border and darker
   text. Lives here rather than on a component because more than one thing is a
   chip — a participant's state, a loan's source — and two lookalike systems
   drift apart the first time one of them is adjusted.

   Tones are named for what they MEAN, not for a colour, so a caller picks by
   intent and a new chip can't ship colourless. */

.asl-chip {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Amber — someone owes us something. */
.asl-chip-action {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

/* Navy — waiting on us, or on the loan. Also the resting tone for a neutral
   classification like a closing deal. */
.asl-chip-waiting {
    color: var(--asl-navy, #052767);
    background: var(--asl-blue-light, #eff6ff);
    border: 1px solid var(--asl-blue-mid, #bfdbfe);
}

/* Grey — out of the deal, one way or another. */
.asl-chip-negative {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

/* Green — done, or live and performing. */
.asl-chip-success {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

/* Violet — a classification that has to stand apart from the status chips beside it. Not a state, so
   it borrows none of their meanings: on the opportunities list a Closing chip sits directly next to a
   navy in-flight Stage chip, and any of the tones above would either repeat a neighbour or import a
   meaning ("needs action", "done") that a loan's source does not carry. */
.asl-chip-accent {
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

/* Red — needs attention before money moves. */
.asl-chip-danger {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* Small uppercase label naming what kind of row this is (e.g. "Asset manager"), not a status, so it
   stays quieter than the .asl-chip tones above. Shared by the audience matrix and the recipient tree. */
.asl-chip-kind {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--asl-navy);
    background: var(--asl-blue-mid);
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
}

/* ── List tables ────────────────────────────────────────────────────────────
   The shape every list page shares: a clickable row, quiet column headers, and
   a sort arrow that only lights up on the sorted column. App-wide rather than
   scoped to a page, because the headers are rendered by SortableTableHeader and
   a page's scoped CSS cannot reach into a child component's markup. The header's
   own type and border come from theme.css's .table > thead > tr > th. */

.asl-list-row {
    cursor: pointer;
}

.asl-list-table th[role="button"] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.asl-list-table th[role="button"] .bi {
    font-size: 0.75rem;
    opacity: 0.4;
}

.asl-list-table th[aria-sort="ascending"] .bi,
.asl-list-table th[aria-sort="descending"] .bi {
    opacity: 1;
}

/* Search box with the magnifier sitting inside it — ListSearchBar and
   AdminListToolbar both draw one. */

.list-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 420px;
}

.list-search .bi-search {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--asl-text-muted, #64748b);
    pointer-events: none;
}

.list-search .form-control {
    padding-left: 2.25rem;
}

/* Staff sidebar rail tooltip, drawn by js/navRail.js (Docs/spec/nav-groups.md §7). Matches MudTooltip's
   default look. Global because the element is appended to <body>, outside every scoped component. */
.nav-rail-tip {
    position: fixed;
    z-index: var(--mud-zindex-tooltip, 1100);       /* MudBlazor's tooltip layer; above AppHeader and the sticky sidebar */
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: var(--mud-default-borderradius, 4px);
    background-color: var(--mud-palette-gray-darker, #424242);
    color: var(--mud-palette-dark-text, #fff);
    font-size: 0.8rem;                              /* 12px */
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

    /* Hover bridge across the 8px gap (navRail.js GAP), so moving from the icon to the tooltip never
       leaves both. */
    .nav-rail-tip::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 8px;
    }
.field-warning .mud-input-outlined-border {
    border-color: var(--mud-palette-warning) !important;
}

.field-warning .mud-input-label {
    color: var(--mud-palette-warning-darken) !important;
}

.field-warning .mud-input-slot {
    color: var(--mud-palette-warning-darken) !important;
    caret-color: var(--mud-palette-warning-darken);
}

.field-warning .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-warning) !important;
}

.loan-detail-group {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--asl-muted, #64748b);
    margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--asl-border, #e2e8f0);
}