/*
 * American Savings Life — Bootstrap 5 Theme
 * Aligned with americansavingslife.com brand identity
 *
 * Brand palette:
 *   Navy (brand primary):  #052767
 *   Blue (interactive):    #1a56db
 *   Blue light (hover bg): #eff6ff
 *   Blue mid (borders):    #bfdbfe
 */

/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   ============================================================ */

:root {
    /* --- Layout --- */
    /* Desktop AppHeader height; sticky offsets in MainLayout/NavMenu scoped CSS depend on it. */
    --header-height: 5.5rem;

    /* --- Primary (interactive blue) --- */
    --bs-primary:                   #1a56db;
    --bs-primary-rgb:               26, 86, 219;
    --bs-primary-text-emphasis:     #052767;
    --bs-primary-bg-subtle:         #eff6ff;
    --bs-primary-border-subtle:     #bfdbfe;

    /* --- Links --- */
    --bs-link-color:                #1a56db;
    --bs-link-color-rgb:            26, 86, 219;
    --bs-link-hover-color:          #052767;
    --bs-link-hover-color-rgb:      5, 39, 103;

    /* --- Body --- */
    --bs-body-font-family:          -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Inter", sans-serif;
    --bs-body-font-size:            0.9375rem;
    --bs-body-line-height:          1.6;
    --bs-body-color:                #1e293b;
    --bs-body-color-rgb:            30, 41, 59;
    --bs-body-bg:                   #f8fafc;

    /* --- Secondary / muted text --- */
    --bs-secondary-color:           #64748b;
    --bs-secondary-color-rgb:       100, 116, 139;
    --bs-tertiary-color:            #94a3b8;
    --bs-tertiary-color-rgb:        148, 163, 184;

    /* --- Borders & radius --- */
    --bs-border-color:              #e2e8f0;
    --bs-border-color-translucent:  rgba(0, 0, 0, 0.08);
    --bs-border-radius:             0.5rem;
    --bs-border-radius-sm:          0.375rem;
    --bs-border-radius-lg:          0.75rem;
    --bs-border-radius-xl:          1rem;
    --bs-border-radius-pill:        50rem;

    /* --- Card --- */
    --bs-card-spacer-y:             1.25rem;
    --bs-card-spacer-x:             1.25rem;
    --bs-card-title-spacer-y:       0.375rem;
    --bs-card-border-width:         1px;
    --bs-card-border-color:         #e2e8f0;
    --bs-card-border-radius:        0.75rem;
    --bs-card-box-shadow:           0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05);
    --bs-card-bg:                   #ffffff;

    /* --- Shadows --- */
    --bs-box-shadow:                0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --bs-box-shadow-sm:             0 1px 2px 0 rgb(0 0 0 / 0.05);
    --bs-box-shadow-lg:             0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

    /* --- Focus ring ---
       Bootstrap's .focus-ring utility reads this; kept solid so it clears 3:1 (WCAG 1.4.11). */
    --bs-focus-ring-color:          var(--asl-focus-ring-color);

    /* --- Table --- */
    --bs-table-border-color:        #e2e8f0;
    --bs-table-striped-bg:          #f8fafc;
    --bs-table-hover-bg:            #f1f5f9;
    --bs-table-active-bg:           #eff6ff;
    --bs-table-active-color:        #1e293b;

    /* --- Input --- */
    --bs-input-focus-border-color:  var(--asl-blue);
    --bs-input-focus-box-shadow:    none;

    /* --- Brand-specific variables (not Bootstrap) --- */
    --asl-navy:                     #052767;
    --asl-navy-rgb:                 5, 39, 103;
    --asl-blue:                     #1a56db;
    --asl-blue-hover:               #1741b0;
    --asl-blue-active:              #143398;
    --asl-blue-light:               #eff6ff;
    --asl-blue-mid:                 #bfdbfe;
    --asl-text-dark:                #1e293b;
    --asl-text-body:                #374151;
    --asl-text-muted:               #64748b;
    --asl-text-subtle:              #9ca3af;
    --asl-border:                   #e2e8f0;
    --asl-border-subtle:            #f1f5f9;
    --asl-surface:                  #f8fafc;
    --asl-attention-bg:             #fffbeb;  /* same shade as asl-chip-action's hard-coded fill (not read from this token); secondary tint on untagged matrix rows */
    --asl-on-primary-muted:         rgba(255, 255, 255, 0.85);  /* muted text on an active (blue) list-group row */
    --asl-invalid-color:            #ef4444;
    --asl-valid-color:              #22c55e;

    /* --- Keyboard focus indicator (WCAG 2.2 AA 1.4.11 + 2.4.7) ---
       One ring for every focusable control, shown on :focus-visible only so a mouse click does not
       draw it. --asl-blue is 6.18:1 on white and 5.9:1 on --asl-surface. The inverse colour is for
       rings drawn on the navy sidebar (9.9:1) or on an --asl-blue fill (4.35:1). The inset offset
       draws the ring 1px inside the element's edge, for stacked rows (list groups) where an outside
       ring would be painted over by the next row, and for controls flush against the viewport edge.
       A dark region (the navy sidebar) re-points --asl-focus-ring-color at the inverse colour on its
       root, so every ring inside it inherits the light one. */
    --asl-focus-ring-color:         var(--asl-blue);
    --asl-focus-ring-color-inverse: var(--asl-blue-mid);
    --asl-focus-ring-width:         2px;
    --asl-focus-ring-offset:        2px;
    --asl-focus-ring-offset-inset:  calc(-1 * var(--asl-focus-ring-width) - 1px);
}

/* ============================================================
   BASE / RESET
   ============================================================ */

html, body {
    font-family:     var(--bs-body-font-family);
    font-size:       var(--bs-body-font-size);
    color:           var(--bs-body-color);
    background-color: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link {
    color: var(--bs-link-color);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

/* ============================================================
   FOCUS INDICATORS
   MudBlazor.min.css ships `a:focus-visible { outline: none }` and `button:focus { outline: none }`,
   and Bootstrap replaces outlines with faint box-shadow rings (1.3–1.8:1 on this palette). This
   puts one ring back on every link, button and control. The explicit Bootstrap/Mud selectors are
   needed because their own :focus rules set `outline: 0` at a higher specificity.
   ============================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.btn-close:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.ql-picker-label:focus-visible,
.mud-button-root:focus-visible,
/* MudBlazor 9.5.0 MudCheckBox/MudRadio: the focusable <input> is visually hidden inside the
   span.mud-button-root icon button, so the ring goes on that span. */
.mud-button-root:has(> input:focus-visible) {
    outline:        var(--asl-focus-ring-width) solid var(--asl-focus-ring-color);
    outline-offset: var(--asl-focus-ring-offset);
}

/* Bootstrap's translucent close-button shadow (1.3:1); the ring above replaces it. */
.btn-close {
    --bs-btn-close-focus-shadow: none;
}

/* Blazor's .invalid outline would otherwise be replaced by the blue ring while the field has focus;
   keep the error colour (3.76:1 on white) so focusing a bad field does not hide that it is bad. */
.form-control.invalid:focus-visible,
.form-select.invalid:focus-visible {
    outline-color: var(--asl-invalid-color);
}

/* Blazor's .valid.modified outline (Form validation, 0,3,0) would otherwise beat the ring above and
   leave a 1.5px green outline (2.28:1) as the only focus cue. Out of focus it stays as it was. */
.form-control.valid.modified:focus-visible,
.form-select.valid.modified:focus-visible {
    outline:        var(--asl-focus-ring-width) solid var(--asl-focus-ring-color);
    outline-offset: var(--asl-focus-ring-offset);
}

/* Stacked rows: ring inside the row so the neighbouring row cannot paint over it. */
.list-group-item-action:focus-visible {
    outline:        var(--asl-focus-ring-width) solid var(--asl-focus-ring-color);
    outline-offset: var(--asl-focus-ring-offset-inset);
}

.list-group-item-action.active:focus-visible {
    outline-color: var(--asl-focus-ring-color-inverse);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color:          #1e293b;
    font-weight:    600;
    letter-spacing: -0.015em;
    line-height:    1.3;
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-weight:    700;
    letter-spacing: -0.02em;
}

.lead {
    font-size:   1.0625rem;
    font-weight: 400;
    color:       var(--asl-text-body);
}

.text-muted {
    color: var(--asl-text-muted) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    font-weight:    500;
    letter-spacing: 0.005em;
    border-radius:  var(--bs-border-radius-sm);
    transition:     background-color 0.15s ease,
                    border-color 0.15s ease,
                    box-shadow 0.15s ease,
                    color 0.15s ease;
    /* The ring comes from FOCUS INDICATORS; drop Bootstrap's translucent focus shadow. */
    --bs-btn-focus-box-shadow: none;
}

/* Primary */
.btn-primary {
    background-color: var(--asl-blue);
    border-color:     var(--asl-blue);
    color:            #fff;
}

.btn-primary:hover {
    background-color: var(--asl-blue-hover);
    border-color:     var(--asl-blue-hover);
    color:            #fff;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--asl-blue-active);
    border-color:     var(--asl-blue-active);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--asl-blue);
    border-color:     var(--asl-blue);
    opacity:          0.55;
}

/* Outline primary */
.btn-outline-primary {
    color:            var(--asl-blue);
    border-color:     var(--asl-blue);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--asl-blue);
    border-color:     var(--asl-blue);
    color:            #fff;
}

/* Secondary (white/ghost) */
.btn-secondary {
    background-color: #ffffff;
    border-color:     #d1d5db;
    color:            #374151;
}

.btn-secondary:hover {
    background-color: #f9fafb;
    border-color:     #9ca3af;
    color:            #1f2937;
}

.btn-secondary:active {
    background-color: #f3f4f6;
    border-color:     #9ca3af;
}

/* Danger */
.btn-danger {
    background-color: #dc2626;
    border-color:     #dc2626;
}

.btn-danger:hover {
    background-color: #b91c1c;
    border-color:     #b91c1c;
}

/* Size adjustments */
.btn-sm {
    font-size:     0.8125rem;
    border-radius: 0.375rem;
    padding:       0.3125rem 0.625rem;
}

.btn-lg {
    font-size:     1rem;
    border-radius: 0.5rem;
    padding:       0.625rem 1.25rem;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background-color: var(--bs-card-bg);
    border:           var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius:    var(--bs-card-border-radius);
    box-shadow:       var(--bs-card-box-shadow);
}

.card-header {
    background-color: transparent;
    border-bottom:    1px solid var(--asl-border);
    font-weight:      600;
    color:            var(--asl-text-dark);
    padding:          1rem 1.25rem;
}

.card-footer {
    background-color: var(--asl-surface);
    border-top:       1px solid var(--asl-border);
    padding:          0.875rem 1.25rem;
}

.card-title {
    font-weight:   600;
    color:         var(--asl-text-dark);
    margin-bottom: 0.25rem;
}

.card-subtitle {
    color: var(--asl-text-muted);
}

/* ============================================================
   TABLES
   ============================================================ */

.table {
    --bs-table-border-color: var(--asl-border);
    --bs-table-hover-bg:     #f8fafc;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-size:      0.8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color:          var(--asl-text-muted);
    border-bottom:  1px solid var(--asl-border);
    padding:        0.6875rem 1rem;
    white-space:    nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding:        0.8125rem 1rem;
    vertical-align: middle;
    color:          var(--asl-text-body);
    border-bottom:  1px solid var(--asl-border-subtle);
}

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

/* Selected row */
.table > tbody > tr.table-active > td,
.table > tbody > tr.selected > td {
    background-color: var(--asl-blue-light) !important;
}

.table > tbody > tr:hover > td {
    background-color: #f8fafc;
}

/* Clickable table rows */
.table-clickable > tbody > tr {
    cursor: pointer;
}

/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.form-select {
    border-color:  #d1d5db;
    border-radius: var(--bs-border-radius-sm);
    font-size:     0.9375rem;
    color:         var(--asl-text-dark);
    background-color: #fff;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-input-focus-border-color);
    box-shadow:   var(--bs-input-focus-box-shadow);
    color:        var(--asl-text-dark);
}

.form-control::placeholder {
    color: var(--asl-text-subtle);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--asl-surface);
    color:            var(--asl-text-muted);
}

.form-label {
    font-size:     0.875rem;
    font-weight:   500;
    color:         var(--asl-text-body);
    margin-bottom: 0.375rem;
}

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

/* Search input with icon */
.input-search {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: 0.75rem center;
    padding-left:        2.25rem;
}

/* Checkbox & Radio
   The unchecked border is the only thing that shows the control is there, so it needs 3:1
   (--asl-text-muted is 4.76:1 on white; the old #d1d5db was 1.47:1). Disabled keeps Bootstrap's
   0.5 opacity, which still reads as disabled. */
.form-check-input {
    width:        1.125rem;
    height:       1.125rem;
    border-color: var(--asl-text-muted);
    margin-top:   0.125em;
    cursor:       pointer;
}

/* Before :checked on purpose, so a checked box keeps its blue border while focused. The ring comes
   from FOCUS INDICATORS; this only stops Bootstrap's pale border and shadow. */
.form-check-input:focus {
    box-shadow:   none;
    border-color: var(--asl-text-muted);
}

.form-check-input:checked {
    background-color: var(--asl-blue);
    border-color:     var(--asl-blue);
}

.form-check-label {
    cursor: pointer;
    color:  var(--asl-text-body);
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1.5px solid var(--asl-valid-color);
}

.invalid {
    outline: 1.5px solid var(--asl-invalid-color);
}

.validation-message {
    font-size: 0.8125rem;
    color:     #dc2626;
    margin-top: 0.25rem;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
    font-weight:   500;
    font-size:     0.7375rem;
    border-radius: 0.375rem;
    padding:       0.3em 0.65em;
    letter-spacing: 0.01em;
}

.badge.bg-primary {
    background-color: var(--asl-blue) !important;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
    border-radius: var(--bs-border-radius);
    border-width:  1px;
    font-size:     0.9rem;
}

.alert-primary {
    background-color: #eff6ff;
    border-color:     #bfdbfe;
    color:            #1e40af;
}

.alert-success {
    background-color: #f0fdf4;
    border-color:     #bbf7d0;
    color:            #166534;
}

.alert-danger {
    background-color: #fef2f2;
    border-color:     #fecaca;
    color:            #991b1b;
}

.alert-warning {
    background-color: #fffbeb;
    border-color:     #fde68a;
    color:            #92400e;
}

.alert-info {
    background-color: #f0f9ff;
    border-color:     #bae6fd;
    color:            #075985;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-content {
    border:        none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow:    0 20px 25px -5px rgb(0 0 0 / 0.12),
                   0 8px 10px -6px rgb(0 0 0 / 0.08);
}

.modal-header {
    border-bottom: 1px solid var(--asl-border);
    padding:       1.25rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    color:       var(--asl-text-dark);
    font-size:   1.0625rem;
}

.modal-body {
    padding: 1.25rem 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--asl-border);
    padding:    1rem 1.5rem;
    gap:        0.5rem;
}

.modal-backdrop.show {
    opacity: 0.35;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-menu {
    border:        1px solid var(--asl-border);
    border-radius: var(--bs-border-radius);
    box-shadow:    var(--bs-box-shadow);
    padding:       0.375rem;
    font-size:     0.9rem;
}

.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    padding:       0.4375rem 0.75rem;
    color:         var(--asl-text-body);
    font-size:     0.9rem;
    transition:    background-color 0.1s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--asl-surface);
    color:            var(--asl-text-dark);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--asl-blue);
    color:            #fff;
}

.dropdown-divider {
    border-color: var(--asl-border);
    margin:       0.375rem 0;
}

.dropdown-header {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--asl-text-muted);
    padding:        0.25rem 0.75rem;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Top bar */
.navbar {
    border-bottom: 1px solid var(--asl-border);
}

.navbar-brand {
    font-weight:    700;
    color:          var(--asl-navy);
    letter-spacing: -0.01em;
}

/* Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--asl-text-subtle);
}

.breadcrumb-item.active {
    color: var(--asl-text-muted);
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--asl-border);
    gap:           0.25rem;
}

.nav-tabs .nav-link {
    color:         var(--asl-text-muted);
    border:        none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding:       0.5rem 0.75rem;
    font-weight:   500;
    font-size:     0.9rem;
    transition:    color 0.15s, border-color 0.15s;
}

.nav-tabs .nav-link:hover {
    color:        var(--asl-blue);
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color:            var(--asl-blue);
    border-bottom:    2px solid var(--asl-blue);
    background-color: transparent;
}

/* Pills */
.nav-pills .nav-link {
    color:         var(--asl-text-body);
    border-radius: var(--bs-border-radius-sm);
    font-weight:   500;
    font-size:     0.9rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--asl-blue);
    color:            #fff;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
    gap: 0.125rem;
}

.page-link {
    border-color:  var(--asl-border);
    color:         var(--asl-blue);
    border-radius: var(--bs-border-radius-sm) !important;
    padding:       0.375rem 0.75rem;
    font-size:     0.875rem;
    transition:    background-color 0.1s, border-color 0.1s;
}

.page-link:hover {
    background-color: var(--asl-blue-light);
    border-color:     var(--asl-blue-mid);
    color:            var(--asl-blue-hover);
}

.page-link:focus {
    box-shadow: none;
}

.page-item.active .page-link {
    background-color: var(--asl-blue);
    border-color:     var(--asl-blue);
    color:            #fff;
}

.page-item.disabled .page-link {
    color:            var(--asl-text-subtle);
    border-color:     var(--asl-border);
    background-color: transparent;
}

/* ============================================================
   TOASTS & SPINNERS
   ============================================================ */

.toast {
    border:        1px solid var(--asl-border);
    border-radius: var(--bs-border-radius);
    box-shadow:    var(--bs-box-shadow);
    font-size:     0.9rem;
}

.toast-header {
    border-bottom: 1px solid var(--asl-border);
    font-weight:   600;
    background-color: #fff;
}

.spinner-border { color: var(--asl-blue); }
.spinner-grow   { color: var(--asl-blue); }

/* ============================================================
   PROGRESS
   ============================================================ */

.progress {
    border-radius: var(--bs-border-radius-pill);
    background-color: #e2e8f0;
    height:          0.5rem;
}

.progress-bar {
    background-color: var(--asl-blue);
    border-radius:    var(--bs-border-radius-pill);
}

/* ============================================================
   LIST GROUP
   ============================================================ */

.list-group-item {
    border-color: var(--asl-border);
    color:        var(--asl-text-body);
    font-size:    0.9rem;
}

.list-group-item.active {
    background-color: var(--asl-blue);
    border-color:     var(--asl-blue);
    color:            #fff;
}

/* Secondary line in a list row ("n contacts · m templates", "2 audiences"). On the active row the usual
   muted grey is 1.30:1 against the blue, so it switches to the on-primary muted white. */
.list-group-item .list-meta {
    color: var(--asl-text-muted);
}

.list-group-item.active .list-meta {
    color: var(--asl-on-primary-muted);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--asl-surface);
    color:            var(--asl-text-dark);
}

.list-group-item-action.active:hover,
.list-group-item-action.active:focus {
    background-color: var(--asl-blue);
    color:            #fff;
}

/* ============================================================
   CUSTOM COMPONENTS
   ============================================================ */

/* --- Avatar --- */
.avatar {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2.75rem;
    height:          2.75rem;
    border-radius:   50%;
    background-color: var(--asl-blue);
    color:           #fff;
    font-weight:     600;
    font-size:       0.9375rem;
    flex-shrink:     0;
    user-select:     none;
    letter-spacing:  0.02em;
}

.avatar-sm {
    width:     2rem;
    height:    2rem;
    font-size: 0.75rem;
}

.avatar-lg {
    width:     3.5rem;
    height:    3.5rem;
    font-size: 1.125rem;
}

.avatar-xl {
    width:     4.5rem;
    height:    4.5rem;
    font-size: 1.375rem;
}

.avatar-navy  { background-color: var(--asl-navy); }
.avatar-blue  { background-color: var(--asl-blue); }
.avatar-green { background-color: #16a34a; }
.avatar-red   { background-color: #dc2626; }
.avatar-amber { background-color: #d97706; }

/* --- Section label (uppercase category header) --- */
.section-label {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color:          var(--asl-text-muted);
    margin-bottom:  0.5rem;
}

/* --- Detail row (icon + label + value) --- */
.detail-row {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       0.5625rem 0;
    font-size:     0.9rem;
    border-bottom: 1px solid var(--asl-border-subtle);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .detail-icon {
    color:      var(--asl-text-muted);
    flex-shrink: 0;
    width:       1.1rem;
    margin-top:  0.1rem;
}

.detail-row .detail-label {
    color:      var(--asl-text-muted);
    min-width:  7rem;
    flex-shrink: 0;
}

.detail-row .detail-value {
    color:       var(--asl-text-dark);
    font-weight: 500;
}

/* --- Radio list (company search results etc.) --- */
.radio-list .form-check {
    padding:       0.5625rem 0.75rem;
    border-radius: var(--bs-border-radius-sm);
    margin-bottom: 0.125rem;
    transition:    background-color 0.1s;
}

.radio-list .form-check:hover {
    background-color: var(--asl-surface);
}

.radio-list .form-check:has(.form-check-input:checked) {
    background-color: var(--asl-blue-light);
}

/* --- Divider with centred text --- */
.divider-text {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    color:       var(--asl-text-subtle);
    font-size:   0.875rem;
    margin:      0.75rem 0;
}

.divider-text::before,
.divider-text::after {
    content:          '';
    flex:             1;
    height:           1px;
    background-color: var(--asl-border);
}

/* --- Results count --- */
.results-count {
    font-size: 0.875rem;
    color:     var(--asl-text-muted);
}

/* --- Page header --- */
.page-header {
    padding:       1.25rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--asl-border);
}

.page-header h1,
.page-header .page-title {
    font-size:   1.375rem;
    font-weight: 600;
    color:       var(--asl-text-dark);
    margin:      0;
}

/* --- Stat / KPI card --- */
.stat-card {
    display:          flex;
    flex-direction:   column;
    gap:              0.375rem;
}

.stat-card .stat-value {
    font-size:   1.75rem;
    font-weight: 700;
    color:       var(--asl-text-dark);
    line-height: 1.1;
}

.stat-card .stat-label {
    font-size: 0.8125rem;
    color:     var(--asl-text-muted);
}

.stat-card .stat-delta {
    font-size:   0.8125rem;
    font-weight: 500;
}

.stat-card .stat-delta.up   { color: #16a34a; }
.stat-card .stat-delta.down { color: #dc2626; }

/* ============================================================
   SCROLLBAR (subtle, cross-browser)
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
    width:  6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius:    3px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* ============================================================
   BLAZOR-SPECIFIC
   ============================================================ */

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}
/* .blazor-error-boundary and .form-floating overrides live in app.css */

/* ============================================================
   OPPORTUNITY ADMIN PHASES
   The five vertical phase bars and their matching action buttons on the
   single-page opportunity admin, built as a 20/40/60/80/100% tint scale of
   the brand navy (--asl-navy, #052767) rather than an unrelated hue — see
   the "Navy Tint Scale" reference for the derivation. Light fills (1–3)
   take dark ink; dark fills (4–5) take white. Referenced from
   OpportunityAdmin.razor.css and the .btn-phase-* classes used inside the
   stage section components.
   ============================================================ */

:root {
    --phase-1: #cdd4e1;        /* 20% */
    --phase-2: #9ba9c2;        /* 40% */
    --phase-3: #697da4;        /* 60% */
    --phase-4: #375285;        /* 80% */
    --phase-5: #052767;        /* 100% — --asl-navy */
    --phase-ink: #0b1220;      /* text on the light phase fills (1–3) */
    --phase-border: #052767;   /* shared outline so light buttons stay visible */
}

/* The stage rail's column (admin workflow pages). It sits LAST in the markup, so its natural place
   is to the right of the content; below the xl breakpoint it is lifted above the sections it
   indexes. Doing it here rather than with Bootstrap's order utilities keeps the fallback safe: if
   this rule never applies, the rail drops below the content instead of jumping to the left. */
@media (max-width: 1199.98px) {
    .stage-rail-col {
        order: -1;
    }
}

/* A section the stage rail jumps to. The offset clears the app header plus the page's own sticky
   header; AdminDetailLayout computes --admin-anchor-offset from the one header height a page states,
   so this can never drift out of step with where the header actually ends. Global rather than scoped
   because the targets live in the pages and their section components, not in the layout. */
.rail-target {
    scroll-margin-top: var(--admin-anchor-offset, 6.5rem);
}

.btn-phase-1, .btn-phase-2, .btn-phase-3, .btn-phase-4, .btn-phase-5 {
    --bs-btn-border-color: var(--phase-border);
    --bs-btn-hover-border-color: var(--phase-border);
    --bs-btn-active-border-color: var(--phase-border);
    --bs-btn-disabled-border-color: var(--phase-border);
    /* A disabled phase button keeps its phase colour but reads as unavailable. Previously this was
       opacity 1 with the enabled background, so a blocked action looked exactly like a live one and
       clicking it appeared to do nothing. */
    --bs-btn-disabled-opacity: 0.45;
    font-weight: 600;
}

.btn-phase-1:disabled, .btn-phase-2:disabled, .btn-phase-3:disabled,
.btn-phase-4:disabled, .btn-phase-5:disabled {
    cursor: not-allowed;
    filter: grayscale(55%);
}

.btn-phase-1 {
    --bs-btn-bg: var(--phase-1);
    --bs-btn-color: var(--phase-ink);
    --bs-btn-hover-bg: #bdc3cf;
    --bs-btn-hover-color: var(--phase-ink);
    --bs-btn-active-bg: #aeb4bf;
    --bs-btn-active-color: var(--phase-ink);
    --bs-btn-disabled-bg: var(--phase-1);
    --bs-btn-disabled-color: var(--phase-ink);
}

.btn-phase-2 {
    --bs-btn-bg: var(--phase-2);
    --bs-btn-color: var(--phase-ink);
    --bs-btn-hover-bg: #8f9cb2;
    --bs-btn-hover-color: var(--phase-ink);
    --bs-btn-active-bg: #8490a5;
    --bs-btn-active-color: var(--phase-ink);
    --bs-btn-disabled-bg: var(--phase-2);
    --bs-btn-disabled-color: var(--phase-ink);
}

.btn-phase-3 {
    --bs-btn-bg: var(--phase-3);
    --bs-btn-color: var(--phase-ink);
    --bs-btn-hover-bg: #617397;
    --bs-btn-hover-color: var(--phase-ink);
    --bs-btn-active-bg: #596a8b;
    --bs-btn-active-color: var(--phase-ink);
    --bs-btn-disabled-bg: var(--phase-3);
    --bs-btn-disabled-color: var(--phase-ink);
}

.btn-phase-4 {
    --bs-btn-bg: var(--phase-4);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #334b7a;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2f4671;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--phase-4);
    --bs-btn-disabled-color: #fff;
}

.btn-phase-5 {
    --bs-btn-bg: var(--phase-5);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #05245f;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #042158;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--phase-5);
    --bs-btn-disabled-color: #fff;
}

/* ============================================================
   LOAN OVERVIEW / KEY TERMS
   Shared by the participant opportunities list (the expanded row) and the opportunity detail page,
   so the panel a participant expands is a preview of the page it links to — same tiers, same order,
   same grouping. Global rather than scoped for exactly that reason: two copies would drift.
   ============================================================ */

/* ── Loan overview ───────────────────────────────────────────────────
   Three tiers instead of one flat grid of identical bordered tiles. Eleven boxes of equal weight
   meant the reader had to scan all of them to find the one they came for, and the chrome competed
   with the numbers it was meant to frame.

   Tier 1 (headline) is the three figures that decide whether you read on. Tier 2 (groups) is the
   supporting detail, grouped by what it describes and stripped of per-field borders — the group is
   the container, so proximity does the work a box used to. Tier 3 is prose. */

.overview-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--asl-border, #e2e8f0);
}

.overview-headline-label {
    color: var(--asl-text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.overview-headline-value {
    color: var(--asl-navy, #052767);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.25rem;
    /* Figures should compare down the page rather than jitter on digit width. */
    font-variant-numeric: tabular-nums;
}

.overview-headline-sub {
    color: var(--asl-text-muted, #64748b);
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

/* Per-company amounts in the headline when the viewer acts for several companies. Name truncates,
   amount never wraps, so the figures stay in one right-aligned column. */
.headline-amounts {
    list-style: none;
    margin: 0.375rem 0 0;
    padding: 0;
}

.headline-amount {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--asl-border-subtle, #f1f5f9);
    color: inherit;
    text-decoration: none;
}

.headline-amounts li:last-child .headline-amount {
    border-bottom: 0;
}

.headline-amount:hover .headline-amount-name {
    text-decoration: underline;
}

.headline-amount-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.headline-amount-value {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--asl-navy, #052767);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.overview-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem 3rem;
    margin-top: 1.5rem;
    /* Clips the first column's divider (below), which sits in the gutter left of the grid. */
    overflow: hidden;
}

/* A hairline between side-by-side groups, centred in the column gap, so each label reads with its own
   values. Every group carries one; the first column's falls outside the grid and is clipped. */
.overview-group {
    border-left: 1px solid var(--asl-border, #e2e8f0);
    margin-left: -1.5rem;
    padding-left: 1.5rem;
}

.overview-group-title {
    color: var(--asl-text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.overview-pairs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

/* Label left, value right, on a hairline — a spec sheet reads faster than a grid of cards, because
   the values line up in a single column the eye can run down. */
.overview-pair {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--asl-border-subtle, #f1f5f9);
}

.overview-pair:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* The label never breaks; a long value wraps beside it instead. */
.overview-pair dt {
    color: var(--asl-text-muted, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.overview-pair dd {
    margin: 0;
    min-width: 0;
    color: var(--asl-text-dark, #1e293b);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.overview-terms {
    margin-top: 1.5rem;
}

.overview-terms-body {
    color: var(--asl-text-body, #374151);
    font-size: 0.9375rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* The documents navigator is its own card; inside the overview it needs a rule above it so it reads
   as a part of the loan rather than as something that fell in. */
.overview-documents {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--asl-border, #e2e8f0);
}

.overview-documents .card {
    background-color: #fff;
    margin-bottom: 0;
}

/* ── Participant detail page shell ────────────────────────────────────────
   Shared by Loan Opportunity Detail and My Capital Call. These lived twice in two scoped stylesheets,
   which is exactly how two pages that are meant to look alike stop looking alike. They sit here with
   the overview-* vocabulary above for the same reason: scoped CSS cannot be shared, and these classes
   describe the participant surface rather than one page of it. */

.back-link {
    color: var(--asl-text-muted, #64748b);
    text-decoration: none;
    font-size: 0.9375rem;
}

.back-link:hover {
    color: var(--asl-blue, #2563eb);
    text-decoration: underline;
}

.detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}

.detail-header-info {
    flex: 1 1 320px;
    min-width: 0;
}

.detail-header-info h1 {
    font-size: 1.5rem;
}

/* One shell per acting company, so an asset-manager login can see where one company's figures end and
   the next begin. The shell IS a .card, so its background and border come from the card treatment;
   all this adds is the gap to the next company, deliberately larger than the gap between the cards
   inside one. */
.participant-section {
    margin-bottom: 2.5rem;
    /* Clears the sticky app header when a headline link jumps here. */
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.participant-section-title {
    color: var(--asl-navy, #052767);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* White inside the shell — the same figure/ground the Loan Overview card has with its tiles. Cards are
   --asl-surface app-wide, which reads fine on the page but disappears against a section of the same
   colour. The shell owns the outer spacing, so they sit flush to its padding. */
.participant-section .card {
    background-color: #fff;
    margin-bottom: 0;
}

/* ── Stat tiles ───────────────────────────────────────────────────────── */
.stat-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.stat-tile-icon {
    font-size: 1.25rem;
    color: var(--asl-navy, #052767);
    flex-shrink: 0;
    margin-top: 0.125rem;
    opacity: 0.75;
}

.stat-tile-label {
    font-size: 0.8125rem;
    color: var(--asl-text-muted, #64748b);
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.stat-tile-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--asl-text-dark, #1e293b);
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

/* The one figure the reader opened the page for gets the headline treatment its neighbours do not. */
.stat-tile-value-lg {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--asl-navy, #052767);
}

/* "Viewing as" company picker. A long company name shrinks the select (the browser truncates it)
   instead of pushing the page wider than a phone. */
.company-switcher {
    min-width: 0;
    max-width: 100%;
}

.company-switcher label {
    white-space: nowrap;
}

.company-switcher .form-select {
    min-width: 0;
}

/* ── Participant list tables ──────────────────────────────────────────────
   House sizing: every column hugs its content and one column takes the slack, truncating with an
   ellipsis rather than forcing the table wider than its card. */
.participant-table th {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom-width: 1px;
}

.participant-table .col-narrow,
.participant-table .col-date,
.participant-table .col-amount,
.participant-table .col-status,
.participant-table .col-rate,
.participant-table .col-loan-stage {
    width: 1%;
    white-space: nowrap;
}

/* Multi-word headers wrap inside their column instead of setting its width from the header. Amount
   headers get more room than the rest: at 6rem "Your Amount Due" broke onto three lines and dragged
   the whole header row taller than the data it labels. */
.participant-table th.col-rate {
    white-space: normal;
    min-width: 6rem;
}

.participant-table th.col-date {
    white-space: normal;
    min-width: 7rem;
}

.participant-table th.col-amount {
    white-space: normal;
    min-width: 8rem;
}

.participant-table td.col-amount {
    font-variant-numeric: tabular-nums;
}

.participant-table .col-fill {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Row navigation ───────────────────────────────────────────────────────
   A row opens its detail page. The REAL affordances are the links inside it — the name cell and the
   end-of-row button — because a <tr> takes no focus and announces nothing; the row click is a bigger
   mouse target layered over them, not the mechanism. */
.participant-row {
    cursor: pointer;
}

/* The name reads as the row's title, not as a blue link in a table of plain text; it still announces
   as a link and still shows its destination on hover. */
.participant-table .row-link {
    color: inherit;
    text-decoration: none;
}

.participant-table .row-link:hover,
.participant-table .row-link:focus-visible {
    color: var(--asl-blue, #1a56db);
    text-decoration: underline;
}

.participant-table .col-actions {
    width: 1%;
    white-space: nowrap;
}